author: kqlio67 <kqlio67@users.noreply.github.com> 2024-10-29 08:48:04 +0100
committer: kqlio67 <kqlio67@users.noreply.github.com> 2024-10-29 08:48:04 +0100
commit: d7d1db835ed6670d51823e32c855151813e12fce (patch)
tree: 228725193aa025568fba91cd9d8f52f2f73ab86c /g4f
parent: docs(docs/interference-api.md): update image generation model in usage guide (diff)
download: gpt4free-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
4 files changed, 218 insertions, 440 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") {
diff --git a/g4f/gui/server/backend.py b/g4f/gui/server/backend.py
index e24d4da2..dc1b1080 100644
--- a/g4f/gui/server/backend.py
+++ b/g4f/gui/server/backend.py
@@ -1,6 +1,5 @@
 import json
-import os
-from flask import request, Flask, jsonify, send_from_directory
+from flask import request, Flask
 from g4f.image import is_allowed_extension, to_image
 from .api import Api
 
@@ -55,10 +54,6 @@ class Backend_Api(Api):
             '/images/<path:name>': {
                 'function': self.serve_images,
                 'methods': ['GET']
-            },
-            '/images': {
-                'function': self.get_images,
-                'methods': ['GET']
             }
         }
 
@@ -115,19 +110,4 @@ class Backend_Api(Api):
         Returns:
             str: A JSON formatted string.
         """
-        return json.dumps(super()._format_json(response_type, content)) + "\n"
-
-    @staticmethod
-    def get_images():
-        images_dir = "./generated_images"
-        try:
-            images = [f for f in os.listdir(images_dir) if os.path.isfile(os.path.join(images_dir, f))]
-            images = [f"/images/{image}" for image in images if image.lower().endswith(('.png', '.jpg', '.jpeg', '.gif', '.webp'))]
-            return jsonify(images)
-        except Exception as e:
-            return str(e), 500
-
-    @staticmethod
-    def serve_images(name):
-        images_dir = "./generated_images"
-        return send_from_directory(os.path.abspath(images_dir), name)
+        return json.dumps(super()._format_json(response_type, content)) + "\n"
+\ No newline at end of file
author	kqlio67 <kqlio67@users.noreply.github.com>	2024-10-29 08:48:04 +0100
committer	kqlio67 <kqlio67@users.noreply.github.com>	2024-10-29 08:48:04 +0100
commit	d7d1db835ed6670d51823e32c855151813e12fce (patch)
tree	228725193aa025568fba91cd9d8f52f2f73ab86c /g4f
parent	docs(docs/interference-api.md): update image generation model in usage guide (diff)
download	gpt4free-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