|
<!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> |
|
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_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=""_U" 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="media_player"> |
|
<i class="fa-regular fa-x"></i> |
|
</div> |
|
<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> |
