diff options
Diffstat (limited to 'g4f/gui')
| -rw-r--r-- | g4f/gui/client/index.html | 488 | ||||
| -rw-r--r-- | g4f/gui/client/static/css/style.css | 87 | ||||
| -rw-r--r-- | g4f/gui/client/static/js/chat.v1.js | 126 | ||||
| -rw-r--r-- | g4f/gui/server/api.py | 63 | ||||
| -rw-r--r-- | g4f/gui/server/backend.py | 24 | ||||
| -rw-r--r-- | g4f/gui/server/website.py | 6 |
6 files changed, 494 insertions, 300 deletions
diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html index 1a660062..f8c11ea2 100644 --- a/g4f/gui/client/index.html +++ b/g4f/gui/client/index.html @@ -1,258 +1,272 @@ <!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=""_U" 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=""_U" 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"> - <select name="model" id="model"> - <option value="">Model: Default</option> - <option value="gpt-4">gpt-4</option> - <option value="gpt-3.5-turbo">gpt-3.5-turbo</option> - <option value="llama-3-70b-chat">llama-3-70b-chat</option> - <option value="llama-3.1-70b">llama-3.1-70b</option> - <option value="gemini-pro">gemini-pro</option> - <option value="">----</option> - </select> - <select name="model2" id="model2" class="hidden"></select> - </div> - <div class="field"> - <select name="provider" id="provider"> - <option value="">Provider: Auto</option> - <option value="Bing">Bing</option> - <option value="OpenaiChat">OpenAI ChatGPT</option> - <option value="Gemini">Gemini</option> - <option value="Liaobots">Liaobots</option> - <option value="MetaAI">Meta AI</option> - <option value="You">You</option> - <option value="">----</option> - </select> - </div> + <div class="field"> + <select name="model" id="model"> + <option value="">Model: Default</option> + <option value="gpt-4">gpt-4</option> + <option value="gpt-4o">gpt-4o</option> + <option value="gpt-4o-mini">gpt-4o-mini</option> + <option value="llama-3.1-70b">llama-3.1-70b</option> + <option value="llama-3.1-70b">llama-3.1-405b</option> + <option value="llama-3.1-70b">mixtral-8x7b</option> + <option value="gemini-pro">gemini-pro</option> + <option value="gemini-flash">gemini-flash</option> + <option value="claude-3-haiku">claude-3-haiku</option> + <option value="claude-3.5-sonnet">claude-3.5-sonnet</option> + <option value="">----</option> + </select> + <select name="model2" id="model2" class="hidden"></select> + </div> + <div class="field"> + <select name="provider" id="provider"> + <option value="">Provider: Auto</option> + <option value="OpenaiChat">OpenAI ChatGPT</option> + <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> </div> - </div> - </div> - <div class="mobile-sidebar"> - <i class="fa-solid fa-bars"></i> - </div> -</body> + </div> + </div> + <div id="imageModal" class="modal hidden"> + <span class="close">×</span> + <img class="modal-content" id="img01"> + <div id="caption"></div> + <div class="navigation-controls"> + <button id="prevImage" class="nav-button left">❮</button> + <span id="imageCounter" class="image-counter"></span> + <button id="nextImage" class="nav-button right">❯</button> + </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 441e2042..72f3ec4f 100644 --- a/g4f/gui/client/static/css/style.css +++ b/g4f/gui/client/static/css/style.css @@ -474,7 +474,6 @@ body { .stop_generating, .toolbar .regenerate { position: absolute; - z-index: 1000000; top: 0; right: 0; } @@ -1118,6 +1117,92 @@ 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 d5a1ffaa..9bf07046 100644 --- a/g4f/gui/client/static/js/chat.v1.js +++ b/g4f/gui/client/static/js/chat.v1.js @@ -338,6 +338,14 @@ const prepare_messages = (messages, message_index = -1) => { messages = messages.filter((_, index) => message_index >= index); } + let new_messages = []; + if (systemPrompt?.value) { + new_messages.push({ + "role": "system", + "content": systemPrompt.value + }); + } + // Remove history, if it's selected if (document.getElementById('history')?.checked) { if (message_index == null) { @@ -347,13 +355,6 @@ const prepare_messages = (messages, message_index = -1) => { } } - let new_messages = []; - if (systemPrompt?.value) { - new_messages.push({ - "role": "system", - "content": systemPrompt.value - }); - } messages.forEach((new_message) => { // Include only not regenerated messages if (new_message && !new_message.regenerate) { @@ -366,6 +367,7 @@ const prepare_messages = (messages, message_index = -1) => { return new_messages; } + async function add_message_chunk(message) { if (message.type == "conversation") { console.info("Conversation used:", message.conversation) @@ -934,17 +936,127 @@ 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/api.py b/g4f/gui/server/api.py index 57f3eaa1..51cf3d32 100644 --- a/g4f/gui/server/api.py +++ b/g4f/gui/server/api.py @@ -2,12 +2,11 @@ from __future__ import annotations import logging import os -import os.path import uuid import asyncio import time from aiohttp import ClientSession -from typing import Iterator, Optional +from typing import Iterator, Optional, AsyncIterator, Union from flask import send_from_directory from g4f import version, models @@ -20,21 +19,20 @@ from g4f.Provider import ProviderType, __providers__, __map__ from g4f.providers.base_provider import ProviderModelMixin, FinishReason from g4f.providers.conversation import BaseConversation -conversations: dict[dict[str, BaseConversation]] = {} +# Define the directory for generated images images_dir = "./generated_images" +# Function to ensure the images directory exists +def ensure_images_dir(): + if not os.path.exists(images_dir): + os.makedirs(images_dir) + +conversations: dict[dict[str, BaseConversation]] = {} + class Api: @staticmethod def get_models() -> list[str]: - """ - Return a list of all models. - - Fetches and returns a list of all available models in the system. - - Returns: - List[str]: A list of model names. - """ return models._all_models @staticmethod @@ -82,9 +80,6 @@ class Api: @staticmethod def get_providers() -> list[str]: - """ - Return a list of all working providers. - """ return { provider.__name__: ( provider.label if hasattr(provider, "label") else provider.__name__ @@ -99,12 +94,6 @@ class Api: @staticmethod def get_version(): - """ - Returns the current and latest version of the application. - - Returns: - dict: A dictionary containing the current and latest version. - """ try: current_version = version.utils.current_version except VersionNotFoundError: @@ -115,18 +104,10 @@ class Api: } def serve_images(self, name): + ensure_images_dir() return send_from_directory(os.path.abspath(images_dir), name) def _prepare_conversation_kwargs(self, json_data: dict, kwargs: dict): - """ - Prepares arguments for chat completion based on the request data. - - Reads the request and prepares the necessary arguments for handling - a chat completion request. - - Returns: - dict: Arguments prepared for chat completion. - """ model = json_data.get('model') or models.default provider = json_data.get('provider') messages = json_data['messages'] @@ -159,13 +140,11 @@ class Api: result = ChatCompletion.create(**kwargs) first = True if isinstance(result, ImageResponse): - # Якщо результат є ImageResponse, обробляємо його як одиночний елемент if first: first = False yield self._format_json("provider", get_last_provider(True)) yield self._format_json("content", str(result)) else: - # Якщо результат є ітерабельним, обробляємо його як раніше for chunk in result: if first: first = False @@ -181,7 +160,6 @@ class Api: elif isinstance(chunk, ImagePreview): yield self._format_json("preview", chunk.to_string()) elif isinstance(chunk, ImageResponse): - # Обробка ImageResponse images = asyncio.run(self._copy_images(chunk.get_list(), chunk.options.get("cookies"))) yield self._format_json("content", str(ImageResponse(images, chunk.alt))) elif not isinstance(chunk, FinishReason): @@ -190,8 +168,8 @@ class Api: logging.exception(e) yield self._format_json('error', get_error_message(e)) - # Додайте цей метод до класу Api async def _copy_images(self, images: list[str], cookies: Optional[Cookies] = None): + ensure_images_dir() async with ClientSession( connector=get_connector(None, os.environ.get("G4F_PROXY")), cookies=cookies @@ -212,16 +190,6 @@ class Api: return await asyncio.gather(*[copy_image(image) for image in images]) def _format_json(self, response_type: str, content): - """ - Formats and returns a JSON response. - - Args: - response_type (str): The type of the response. - content: The content to be included in the response. - - Returns: - str: A JSON formatted string. - """ return { 'type': response_type, response_type: content @@ -229,15 +197,6 @@ class Api: def get_error_message(exception: Exception) -> str: - """ - Generates a formatted error message from an exception. - - Args: - exception (Exception): The exception to format. - - Returns: - str: A formatted error message string. - """ message = f"{type(exception).__name__}: {exception}" provider = get_last_provider() if provider is None: diff --git a/g4f/gui/server/backend.py b/g4f/gui/server/backend.py index dc1b1080..e24d4da2 100644 --- a/g4f/gui/server/backend.py +++ b/g4f/gui/server/backend.py @@ -1,5 +1,6 @@ import json -from flask import request, Flask +import os +from flask import request, Flask, jsonify, send_from_directory from g4f.image import is_allowed_extension, to_image from .api import Api @@ -54,6 +55,10 @@ class Backend_Api(Api): '/images/<path:name>': { 'function': self.serve_images, 'methods': ['GET'] + }, + '/images': { + 'function': self.get_images, + 'methods': ['GET'] } } @@ -110,4 +115,19 @@ class Backend_Api(Api): Returns: str: A JSON formatted string. """ - return json.dumps(super()._format_json(response_type, content)) + "\n"
\ No newline at end of file + 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) diff --git a/g4f/gui/server/website.py b/g4f/gui/server/website.py index 5e633674..3cabcdf3 100644 --- a/g4f/gui/server/website.py +++ b/g4f/gui/server/website.py @@ -27,6 +27,10 @@ class Website: 'function': redirect_home, 'methods': ['GET', 'POST'] }, + '/images/': { + 'function': redirect_home, + 'methods': ['GET', 'POST'] + }, } def _chat(self, conversation_id): @@ -35,4 +39,4 @@ class Website: return render_template('index.html', chat_id=conversation_id) def _index(self): - return render_template('index.html', chat_id=str(uuid.uuid4()))
\ No newline at end of file + return render_template('index.html', chat_id=str(uuid.uuid4())) |