summaryrefslogtreecommitdiffstats
path: root/g4f/gui/client
diff options
context:
space:
mode:
authorkqlio67 <kqlio67@users.noreply.github.com>2024-10-29 08:48:04 +0100
committerkqlio67 <kqlio67@users.noreply.github.com>2024-10-29 08:48:04 +0100
commitd7d1db835ed6670d51823e32c855151813e12fce (patch)
tree228725193aa025568fba91cd9d8f52f2f73ab86c /g4f/gui/client
parentdocs(docs/interference-api.md): update image generation model in usage guide (diff)
downloadgpt4free-d7d1db835ed6670d51823e32c855151813e12fce.tar
gpt4free-d7d1db835ed6670d51823e32c855151813e12fce.tar.gz
gpt4free-d7d1db835ed6670d51823e32c855151813e12fce.tar.bz2
gpt4free-d7d1db835ed6670d51823e32c855151813e12fce.tar.lz
gpt4free-d7d1db835ed6670d51823e32c855151813e12fce.tar.xz
gpt4free-d7d1db835ed6670d51823e32c855151813e12fce.tar.zst
gpt4free-d7d1db835ed6670d51823e32c855151813e12fce.zip
Diffstat (limited to '')
-rw-r--r--g4f/gui/client/index.html437
-rw-r--r--g4f/gui/client/static/css/style.css87
-rw-r--r--g4f/gui/client/static/js/chat.v1.js110
3 files changed, 216 insertions, 418 deletions
diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html
index f8c11ea2..7e8ef09c 100644
--- a/g4f/gui/client/index.html
+++ b/g4f/gui/client/index.html
@@ -1,222 +1,227 @@
<!DOCTYPE html>
<html lang="en" data-framework="javascript">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
- <meta name="description" content="A conversational AI system that listens, learns, and challenges">
- <meta property="og:title" content="ChatGPT">
- <meta property="og:image" content="https://openai.com/content/images/2022/11/ChatGPT.jpg">
- <meta property="og:description" content="A conversational AI system that listens, learns, and challenges">
- <meta property="og:url" content="https://g4f.ai">
- <link rel="stylesheet" href="/static/css/style.css">
- <link rel="apple-touch-icon" sizes="180x180" href="/static/img/apple-touch-icon.png">
- <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="/static/img/favicon-16x16.png">
- <link rel="manifest" href="/static/img/site.webmanifest">
- <script src="/static/js/icons.js"></script>
- <script src="/static/js/highlightjs-copy.min.js"></script>
- <script src="/static/js/chat.v1.js" defer></script>
- <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
- <link rel="stylesheet" href="/static/css/dracula.min.css">
- <script>
- MathJax = {
- chtml: {
- scale: 1,
- displayAlign: 'left'
- }
- };
- </script>
- <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
- <script type="module" src="https://cdn.jsdelivr.net/npm/mistral-tokenizer-js" async>
- import mistralTokenizer from "mistral-tokenizer-js"
- </script>
- <script type="module" src="https://cdn.jsdelivr.net/gh/belladoreai/llama-tokenizer-js@master/llama-tokenizer.js" async>
- import llamaTokenizer from "llama-tokenizer-js"
- </script>
- <script src="https://cdn.jsdelivr.net/npm/gpt-tokenizer/dist/cl100k_base.js" async></script>
- <script src="/static/js/text_to_speech/index.js" async></script>
- <!--
- <script src="/static/js/whisper-web/index.js" async></script>
- -->
- <script>
- const user_image = '<img src="/static/img/user.png" alt="your avatar">';
- const gpt_image = '<img src="/static/img/gpt.png" alt="your avatar">';
- </script>
- <script src="/static/js/highlight.min.js"></script>
- <script>window.conversation_id = "{{chat_id}}"</script>
- <title>g4f - gui</title>
- </head>
- <body>
- <div class="gradient"></div>
- <div class="row">
- <div class="box conversations">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
+ <meta name="description" content="A conversational AI system that listens, learns, and challenges">
+ <meta property="og:title" content="ChatGPT">
+ <meta property="og:image" content="https://openai.com/content/images/2022/11/ChatGPT.jpg">
+ <meta property="og:description" content="A conversational AI system that listens, learns, and challenges">
+ <meta property="og:url" content="https://g4f.ai">
+ <link rel="stylesheet" href="/static/css/style.css">
+ <link rel="apple-touch-icon" sizes="180x180" href="/static/img/apple-touch-icon.png">
+ <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon-32x32.png">
+ <link rel="icon" type="image/png" sizes="16x16" href="/static/img/favicon-16x16.png">
+ <link rel="manifest" href="/static/img/site.webmanifest">
+ <script src="/static/js/icons.js"></script>
+ <script src="/static/js/highlightjs-copy.min.js"></script>
+ <script src="/static/js/chat.v1.js" defer></script>
+ <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
+ <link rel="stylesheet" href="/static/css/dracula.min.css">
+ <script>
+ MathJax = {
+ chtml: {
+ scale: 1,
+ displayAlign: 'left'
+ }
+ };
+ </script>
+ <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
+ <script type="module" src="https://cdn.jsdelivr.net/npm/mistral-tokenizer-js" async>
+ import mistralTokenizer from "mistral-tokenizer-js"
+ </script>
+ <script type="module" src="https://cdn.jsdelivr.net/gh/belladoreai/llama-tokenizer-js@master/llama-tokenizer.js" async>
+ import llamaTokenizer from "llama-tokenizer-js"
+ </script>
+ <script src="https://cdn.jsdelivr.net/npm/gpt-tokenizer/dist/cl100k_base.js" async></script>
+ <script src="/static/js/text_to_speech/index.js" async></script>
+ <!--
+ <script src="/static/js/whisper-web/index.js" async></script>
+ -->
+ <script>
+ const user_image = '<img src="/static/img/user.png" alt="your avatar">';
+ const gpt_image = '<img src="/static/img/gpt.png" alt="your avatar">';
+ </script>
+ <script src="/static/js/highlight.min.js"></script>
+ <script>window.conversation_id = "{{chat_id}}"</script>
+ <title>g4f - gui</title>
+</head>
+
+<body>
+ <div class="gradient"></div>
+ <div class="row">
+ <div class="box conversations">
<div class="top">
- <button class="new_convo" onclick="new_conversation()">
- <i class="fa-regular fa-plus"></i>
- <span>New Conversation</span>
- </button>
+ <button class="new_convo" onclick="new_conversation()">
+ <i class="fa-regular fa-plus"></i>
+ <span>New Conversation</span>
+ </button>
</div>
<div class="bottom_buttons">
- <button onclick="open_album();">
- <i class="fa-solid fa-toolbox"></i>
- <span>Images Album</span>
- </button>
- <button onclick="open_settings();">
- <i class="fa-solid fa-toolbox"></i>
- <span>Open Settings</span>
- </button>
- <div class="info">
- <i class="fa-brands fa-discord"></i>
- <span class="convo-title">discord ~ <a href="https://discord.gg/XfybzPXPH5">discord.gg/XfybzPXPH5</a>
- </span>
- </div>
- <div class="info">
- <i class="fa-brands fa-github"></i>
- <span class="convo-title">github ~ <a href="https://github.com/xtekky/gpt4free">@xtekky/gpt4free</a>
- </span>
- </div>
- <div class="info">
- <i class="fa-solid fa-star"></i>
- <span id="version_text" class="convo-title"></span>
- </div>
+ <!--
+ <button onclick="open_album();">
+ <i class="fa-solid fa-toolbox"></i>
+ <span>Images Album</span>
+ </button>
+ -->
+ <button onclick="open_settings();">
+ <i class="fa-solid fa-toolbox"></i>
+ <span>Open Settings</span>
+ </button>
+ <div class="info">
+ <i class="fa-brands fa-discord"></i>
+ <span class="convo-title">discord ~ <a href="https://discord.gg/XfybzPXPH5">discord.gg/XfybzPXPH5</a>
+ </span>
+ </div>
+ <div class="info">
+ <i class="fa-brands fa-github"></i>
+ <span class="convo-title">github ~ <a href="https://github.com/xtekky/gpt4free">@xtekky/gpt4free</a>
+ </span>
+ </div>
+ <div class="info">
+ <i class="fa-solid fa-star"></i>
+ <span id="version_text" class="convo-title"></span>
+ </div>
</div>
- </div>
- <div class="images hidden">
- </div>
- <div class="settings hidden">
+ </div>
+ <div class="images hidden">
+
+ </div>
+ <div class="settings hidden">
<div class="paper">
- <h3>Settings</h3>
- <div class="field">
- <span class="label">Enable Dark Mode</span>
- <input type="checkbox" id="darkMode" checked />
- <label for="darkMode" class="toogle" title=""></label>
- </div>
- <div class="field">
- <span class="label">Web Access with DuckDuckGo</span>
- <input type="checkbox" id="switch" />
- <label for="switch" class="toogle" title="Add the pages of the first 5 search results to the query."></label>
- </div>
- <div class="field">
- <span class="label">Disable Conversation History</span>
- <input type="checkbox" id="history" />
- <label for="history" class="toogle" title="To improve the reaction time or if you have trouble with large conversations."></label>
- </div>
- <div class="field">
- <span class="label">Hide System-prompt</span>
- <input type="checkbox" id="hide-systemPrompt" />
- <label for="hide-systemPrompt" class="toogle" title="For more space on phones"></label>
- </div>
- <div class="field">
- <span class="label">Auto continue in ChatGPT</span>
- <input id="auto_continue" type="checkbox" name="auto_continue" checked/>
- <label for="auto_continue" class="toogle" title="Continue large responses in OpenaiChat"></label>
- </div>
- <div class="field box">
- <label for="message-input-height" class="label" title="">Input max. height</label>
- <input type="number" id="message-input-height" value="200"/>
- </div>
- <div class="field box">
- <label for="recognition-language" class="label" title="">Speech recognition lang</label>
- <input type="text" id="recognition-language" value="" placeholder="navigator.language"/>
- </div>
- <div class="field box">
- <label for="BingCreateImages-api_key" class="label" title="">Microsoft Designer in Bing:</label>
- <textarea id="BingCreateImages-api_key" name="BingCreateImages[api_key]" placeholder="&quot;_U&quot; cookie"></textarea>
- </div>
- <div class="field box">
- <label for="DeepInfra-api_key" class="label" title="">DeepInfra:</label>
- <textarea id="DeepInfra-api_key" name="DeepInfra[api_key]" class="DeepInfraImage-api_key" placeholder="api_key"></textarea>
- </div>
- <div class="field box">
- <label for="GeminiPro-api_key" class="label" title="">Gemini API:</label>
- <textarea id="GeminiPro-api_key" name="GeminiPro[api_key]" placeholder="api_key"></textarea>
- </div>
- <div class="field box">
- <label for="Groq-api_key" class="label" title="">Groq:</label>
- <textarea id="Groq-api_key" name="Groq[api_key]" placeholder="api_key"></textarea>
- </div>
- <div class="field box">
- <label for="HuggingFace-api_key" class="label" title="">HuggingFace:</label>
- <textarea id="HuggingFace-api_key" name="HuggingFace[api_key]" placeholder="api_key"></textarea>
- </div>
- <div class="field box">
- <label for="Openai-api_key" class="label" title="">OpenAI API:</label>
- <textarea id="Openai-api_key" name="Openai[api_key]" placeholder="api_key"></textarea>
- </div>
- <div class="field box">
- <label for="OpenRouter-api_key" class="label" title="">OpenRouter:</label>
- <textarea id="OpenRouter-api_key" name="OpenRouter[api_key]" placeholder="api_key"></textarea>
- </div>
- <div class="field box">
- <label for="PerplexityApi-api_key" class="label" title="">Perplexity API:</label>
- <textarea id="PerplexityApi-api_key" name="PerplexityApi[api_key]" placeholder="api_key"></textarea>
- </div>
- <div class="field box">
- <label for="Replicate-api_key" class="label" title="">Replicate:</label>
- <textarea id="Replicate-api_key" name="Replicate[api_key]" class="ReplicateImage-api_key" placeholder="api_key"></textarea>
- </div>
+ <h3>Settings</h3>
+ <div class="field">
+ <span class="label">Enable Dark Mode</span>
+ <input type="checkbox" id="darkMode" checked />
+ <label for="darkMode" class="toogle" title=""></label>
+ </div>
+ <div class="field">
+ <span class="label">Web Access with DuckDuckGo</span>
+ <input type="checkbox" id="switch" />
+ <label for="switch" class="toogle" title="Add the pages of the first 5 search results to the query."></label>
+ </div>
+ <div class="field">
+ <span class="label">Disable Conversation History</span>
+ <input type="checkbox" id="history" />
+ <label for="history" class="toogle" title="To improve the reaction time or if you have trouble with large conversations."></label>
+ </div>
+ <div class="field">
+ <span class="label">Hide System-prompt</span>
+ <input type="checkbox" id="hide-systemPrompt" />
+ <label for="hide-systemPrompt" class="toogle" title="For more space on phones"></label>
+ </div>
+ <div class="field">
+ <span class="label">Auto continue in ChatGPT</span>
+ <input id="auto_continue" type="checkbox" name="auto_continue" checked/>
+ <label for="auto_continue" class="toogle" title="Continue large responses in OpenaiChat"></label>
+ </div>
+ <div class="field box">
+ <label for="message-input-height" class="label" title="">Input max. height</label>
+ <input type="number" id="message-input-height" value="200"/>
+ </div>
+ <div class="field box">
+ <label for="recognition-language" class="label" title="">Speech recognition lang</label>
+ <input type="text" id="recognition-language" value="" placeholder="navigator.language"/>
+ </div>
+ <div class="field box">
+ <label for="BingCreateImages-api_key" class="label" title="">Microsoft Designer in Bing:</label>
+ <textarea id="BingCreateImages-api_key" name="BingCreateImages[api_key]" placeholder="&quot;_U&quot; cookie"></textarea>
+ </div>
+ <div class="field box">
+ <label for="DeepInfra-api_key" class="label" title="">DeepInfra:</label>
+ <textarea id="DeepInfra-api_key" name="DeepInfra[api_key]" class="DeepInfraImage-api_key" placeholder="api_key"></textarea>
+ </div>
+ <div class="field box">
+ <label for="GeminiPro-api_key" class="label" title="">Gemini API:</label>
+ <textarea id="GeminiPro-api_key" name="GeminiPro[api_key]" placeholder="api_key"></textarea>
+ </div>
+ <div class="field box">
+ <label for="Groq-api_key" class="label" title="">Groq:</label>
+ <textarea id="Groq-api_key" name="Groq[api_key]" placeholder="api_key"></textarea>
+ </div>
+ <div class="field box">
+ <label for="HuggingFace-api_key" class="label" title="">HuggingFace:</label>
+ <textarea id="HuggingFace-api_key" name="HuggingFace[api_key]" placeholder="api_key"></textarea>
+ </div>
+ <div class="field box">
+ <label for="Openai-api_key" class="label" title="">OpenAI API:</label>
+ <textarea id="Openai-api_key" name="Openai[api_key]" placeholder="api_key"></textarea>
+ </div>
+ <div class="field box">
+ <label for="OpenRouter-api_key" class="label" title="">OpenRouter:</label>
+ <textarea id="OpenRouter-api_key" name="OpenRouter[api_key]" placeholder="api_key"></textarea>
+ </div>
+ <div class="field box">
+ <label for="PerplexityApi-api_key" class="label" title="">Perplexity API:</label>
+ <textarea id="PerplexityApi-api_key" name="PerplexityApi[api_key]" placeholder="api_key"></textarea>
+ </div>
+ <div class="field box">
+ <label for="Replicate-api_key" class="label" title="">Replicate:</label>
+ <textarea id="Replicate-api_key" name="Replicate[api_key]" class="ReplicateImage-api_key" placeholder="api_key"></textarea>
+ </div>
</div>
<div class="bottom_buttons">
- <button onclick="delete_conversations()">
- <i class="fa-regular fa-trash"></i>
- <span>Clear Conversations</span>
- </button>
- <button onclick="save_storage()">
- <i class="fa-solid fa-download"></i>
- <a href="" onclick="return false;">Export Conversations</a>
- </button>
+ <button onclick="delete_conversations()">
+ <i class="fa-regular fa-trash"></i>
+ <span>Clear Conversations</span>
+ </button>
+ <button onclick="save_storage()">
+ <i class="fa-solid fa-download"></i>
+ <a href="" onclick="return false;">Export Conversations</a>
+ </button>
</div>
- </div>
- <div class="conversation">
+ </div>
+ <div class="conversation">
<textarea id="systemPrompt" class="box" placeholder="System prompt"></textarea>
<div id="messages" class="box"></div>
<button class="slide-systemPrompt">
- <i class="fa-solid fa-angles-up"></i>
+ <i class="fa-solid fa-angles-up"></i>
</button>
<div class="toolbar">
- <div id="input-count" class="">
- <button class="hide-input">
- <i class="fa-solid fa-angles-down"></i>
- </button>
- <span class="text"></span>
- </div>
- <div class="stop_generating stop_generating-hidden">
- <button id="cancelButton">
- <span>Stop Generating</span>
- <i class="fa-regular fa-stop"></i>
- </button>
- </div>
- <div class="regenerate regenerate-hidden">
- <button id="regenerateButton">
- <span>Regenerate</span>
- <i class="fa-solid fa-rotate"></i>
- </button>
- </div>
+ <div id="input-count" class="">
+ <button class="hide-input">
+ <i class="fa-solid fa-angles-down"></i>
+ </button>
+ <span class="text"></span>
+ </div>
+ <div class="stop_generating stop_generating-hidden">
+ <button id="cancelButton">
+ <span>Stop Generating</span>
+ <i class="fa-regular fa-stop"></i>
+ </button>
+ </div>
+ <div class="regenerate regenerate-hidden">
+ <button id="regenerateButton">
+ <span>Regenerate</span>
+ <i class="fa-solid fa-rotate"></i>
+ </button>
+ </div>
</div>
<div class="user-input">
- <div class="box input-box">
- <textarea id="message-input" placeholder="Ask a question" cols="30" rows="10"
- style="white-space: pre-wrap;resize: none;"></textarea>
- <label class="file-label image-label" for="image" title="Works with Bing, Gemini, OpenaiChat and You">
- <input type="file" id="image" name="image" accept="image/*" required/>
- <i class="fa-regular fa-image"></i>
- </label>
- <label class="file-label image-label" for="camera">
- <input type="file" id="camera" name="camera" accept="image/*" capture="camera" required/>
- <i class="fa-solid fa-camera"></i>
- </label>
- <label class="file-label" for="file">
- <input type="file" id="file" name="file" accept="text/plain, text/html, text/xml, application/json, text/javascript, .sh, .py, .php, .css, .yaml, .sql, .log, .csv, .twig, .md" required/>
- <i class="fa-solid fa-paperclip"></i>
- </label>
- <label class="micro-label" for="micro">
- <i class="fa-solid fa-microphone-slash"></i>
- </label>
- <div id="send-button">
- <i class="fa-solid fa-paper-plane-top"></i>
- </div>
- </div>
+ <div class="box input-box">
+ <textarea id="message-input" placeholder="Ask a question" cols="30" rows="10"
+ style="white-space: pre-wrap;resize: none;"></textarea>
+ <label class="file-label image-label" for="image" title="Works with Bing, Gemini, OpenaiChat and You">
+ <input type="file" id="image" name="image" accept="image/*" required/>
+ <i class="fa-regular fa-image"></i>
+ </label>
+ <label class="file-label image-label" for="camera">
+ <input type="file" id="camera" name="camera" accept="image/*" capture="camera" required/>
+ <i class="fa-solid fa-camera"></i>
+ </label>
+ <label class="file-label" for="file">
+ <input type="file" id="file" name="file" accept="text/plain, text/html, text/xml, application/json, text/javascript, .sh, .py, .php, .css, .yaml, .sql, .log, .csv, .twig, .md" required/>
+ <i class="fa-solid fa-paperclip"></i>
+ </label>
+ <label class="micro-label" for="micro">
+ <i class="fa-solid fa-microphone-slash"></i>
+ </label>
+ <div id="send-button">
+ <i class="fa-solid fa-paper-plane-top"></i>
+ </div>
+ </div>
</div>
<div class="buttons">
<div class="field">
@@ -243,30 +248,18 @@
<option value="Gemini">Gemini</option>
<option value="MetaAI">Meta AI</option>
<option value="DeepInfraChat">DeepInfraChat</option>
- <option value="ReplicateHome">ReplicateHome</option>
<option value="Blackbox">Blackbox</option>
<option value="HuggingChat">HuggingChat</option>
<option value="DDG">DDG</option>
<option value="Pizzagpt">Pizzagpt</option>
<option value="">----</option>
- </select>
- </div>
+ </select>
+ </div>
</div>
- </div>
- </div>
- <div id="imageModal" class="modal hidden">
- <span class="close">&times;</span>
- <img class="modal-content" id="img01">
- <div id="caption"></div>
- <div class="navigation-controls">
- <button id="prevImage" class="nav-button left">&#10094;</button>
- <span id="imageCounter" class="image-counter"></span>
- <button id="nextImage" class="nav-button right">&#10095;</button>
- </div>
- </div>
- <div class="mobile-sidebar">
- <i class="fa-solid fa-bars"></i>
- </div>
- </body>
+ </div>
+ </div>
+ <div class="mobile-sidebar">
+ <i class="fa-solid fa-bars"></i>
+ </div>
+</body>
</html>
-
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index 72f3ec4f..441e2042 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -474,6 +474,7 @@ body {
.stop_generating, .toolbar .regenerate {
position: absolute;
+ z-index: 1000000;
top: 0;
right: 0;
}
@@ -1117,92 +1118,6 @@ a:-webkit-any-link {
display: none;
}
-.album-image {
- width: 100px;
- height: auto;
- margin: 5px;
- display: inline-block;
-}
-
-.modal {
- display: none;
- position: fixed;
- z-index: 1;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- overflow: hidden;
- background-color: rgba(0,0,0,0.9);
-}
-
-.modal-content {
- margin: auto;
- display: block;
- max-width: 80%;
- max-height: 80%;
- transition: transform 0.2s;
-}
-
-.close {
- position: absolute;
- top: 15px;
- right: 35px;
- color: #f1f1f1;
- font-size: 40px;
- font-weight: bold;
- transition: 0.3s;
-}
-
-.close:hover,
-.close:focus {
- color: #bbb;
- text-decoration: none;
- cursor: pointer;
-}
-
-
-.image-counter {
- color: #fff;
- font-size: 18px;
- margin: auto 10px;
- user-select: none;
-}
-
-.nav-button {
- background-color: #555;
- color: #fff;
- border: none;
- padding: 10px;
- font-size: 20px;
- cursor: pointer;
-}
-
-.nav-button:hover {
- background-color: #777;
-}
-
-.nav-button {
- position: relative;
-}
-
-.nav-button.left {
- left: 0;
-}
-
-.nav-button.right {
- right: 0;
-}
-
-.navigation-controls {
- position: absolute;
- bottom: 20px;
- left: 50%;
- transform: translateX(-50%);
- display: flex;
- gap: 10px;
-}
-
.blink {
animation: blinker 1s step-start infinite;
}
diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
index 9bf07046..42ddb129 100644
--- a/g4f/gui/client/static/js/chat.v1.js
+++ b/g4f/gui/client/static/js/chat.v1.js
@@ -936,127 +936,17 @@ function open_settings() {
}
}
-async function loadImages() {
- try {
- const response = await fetch('/images');
- const images = await response.json();
- console.log(images);
- displayImages(images);
- } catch (error) {
- console.error('Error fetching images:', error);
- }
-}
-
-function displayImages(images) {
- const album = document.querySelector('.images');
- album.innerHTML = '';
- images.forEach(image => {
- const imgElement = document.createElement('img');
- imgElement.src = image;
- imgElement.alt = 'Generated Image';
- imgElement.classList.add('album-image');
- album.appendChild(imgElement);
- });
-}
-
-document.addEventListener('DOMContentLoaded', () => {
- loadImages();
-});
-
function open_album() {
- const album = document.querySelector('.images');
if (album.classList.contains("hidden")) {
sidebar.classList.remove("shown");
settings.classList.add("hidden");
album.classList.remove("hidden");
history.pushState({}, null, "/images/");
- loadImages();
} else {
album.classList.add("hidden");
}
}
-let currentScale = 1;
-let currentImageIndex = 0;
-let imagesList = [];
-
-function displayImages(images) {
- imagesList = images;
- const album = document.querySelector('.images');
- album.innerHTML = '';
- images.forEach((image, index) => {
- const imgElement = document.createElement('img');
- imgElement.src = image;
- imgElement.alt = 'Generated Image';
- imgElement.classList.add('album-image');
- imgElement.style.cursor = 'pointer';
- imgElement.addEventListener('click', () => openImageModal(index));
- album.appendChild(imgElement);
- });
-}
-
-function openImageModal(index) {
- currentImageIndex = index;
- const modal = document.getElementById('imageModal');
- const modalImg = document.getElementById('img01');
- const imageCounter = document.getElementById('imageCounter');
- modal.style.display = 'block';
- modalImg.src = imagesList[index];
- currentScale = 1;
- modalImg.style.transform = `scale(${currentScale})`;
- imageCounter.textContent = `${index + 1} / ${imagesList.length}`;
-}
-
-const modal = document.getElementById('imageModal');
-const span = document.getElementsByClassName('close')[0];
-const prevImageButton = document.getElementById('prevImage');
-const nextImageButton = document.getElementById('nextImage');
-
-span.onclick = function() {
- modal.style.display = 'none';
-}
-
-window.onclick = function(event) {
- if (event.target == modal) {
- modal.style.display = 'none';
- }
-}
-
-document.getElementById('img01').addEventListener('wheel', function(event) {
- event.preventDefault();
- if (event.deltaY < 0) {
- currentScale += 0.1;
- } else if (currentScale > 0.1) {
- currentScale -= 0.1;
- }
- document.getElementById('img01').style.transform = `scale(${currentScale})`;
-});
-
-prevImageButton.onclick = function() {
- if (currentImageIndex > 0) {
- currentImageIndex--;
- openImageModal(currentImageIndex);
- }
-}
-
-nextImageButton.onclick = function() {
- if (currentImageIndex < imagesList.length - 1) {
- currentImageIndex++;
- openImageModal(currentImageIndex);
- }
-}
-
-document.addEventListener('keydown', function(event) {
- if (modal.style.display === 'block') {
- if (event.key === 'ArrowLeft') {
- prevImageButton.click();
- } else if (event.key === 'ArrowRight') {
- nextImageButton.click();
- }
- }
-});
-
-
const register_settings_storage = async () => {
optionElements.forEach((element) => {
if (element.type == "textarea") {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 00:40:48 +0100