visionavtr
/
gpt4free
mirror of https://github.com/xtekky/gpt4free


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
							<!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">
            <div class="top">
                <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/6yrm7H4B" target="_blank">discord.gg/6yrm7H4B</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" target="_blank">@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 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">Download generated images</span>
                <input type="checkbox" id="download_images" checked/>
                <label for="download_images" class="toogle" title="Download and save generated images to /generated_images"></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="Cerebras-api_key" class="label" title="">Cerebras Inference:</label>
                <textarea id="Cerebras-api_key" name="Cerebras[api_key]" placeholder="api_key"></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]" class="HuggingFace2-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 id="showLog">
                    <i class="fa-solid fa-terminal"></i>
                    <a href="" onclick="return false;">Show log</a>
                </button>
            </div>
        </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>
            </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-solid fa-stop"></i>
                    </button>
                </div>
                <div class="regenerate">
                    <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, .har, .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-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 disabled="disabled">----</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="Copilot">Microsoft Copilot</option>
                     <option value="ChatGpt">ChatGpt</option>
                     <option value="Gemini">Gemini</option>
                     <option value="MetaAI">Meta AI</option>
                     <option value="DeepInfraChat">DeepInfraChat</option>
                     <option value="Blackbox">Blackbox</option>
                     <option value="DDG">DuckDuckGo</option>
                     <option value="Pizzagpt">Pizzagpt</option>
                     <option disabled="disabled">----</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="log hidden"></div>
    </div>
    <div class="mobile-sidebar">
        <i class="fa-solid fa-bars"></i>
    </div>
</body>
</html>