|
|
<!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"> |
|
|
<meta name="description" content="A conversational AI system that listens, learns, and challenges"> |
|
|
<meta property="og:title" content="G4F Chat"> |
|
|
<meta property="og:image" content="https://g4f.dev/dist/img/android-chrome-512x512.png"> |
|
|
<meta property="og:description" content="A conversational AI system that listens, learns, and challenges"> |
|
|
<meta property="og:url" content="https://g4f.dev"> |
|
|
<link rel="stylesheet" href="https://g4f.dev/dist/css/style.css"> |
|
|
<link rel="stylesheet" href="https://g4f.dev/dist/css/all.min.css"> |
|
|
<link rel="apple-touch-icon" sizes="180x180" href="https://g4f.dev/dist/img/apple-touch-icon.png"> |
|
|
<link rel="icon" type="image/png" sizes="32x32" href="https://g4f.dev/dist/img/favicon-32x32.png"> |
|
|
<link rel="icon" type="image/png" sizes="16x16" href="https://g4f.dev/dist/img/favicon-16x16.png"> |
|
|
<link rel="manifest" href="https://g4f.dev/dist/img/site.webmanifest"> |
|
|
<script src="https://g4f.dev/dist/js/framework.js"></script> |
|
|
<script src="https://g4f.dev/dist/js/chat.v1.js?v=1.1" defer></script> |
|
|
<script src="https://g4f.dev/dist/js/recorder.js" async></script> |
|
|
<script src="https://g4f.dev/dist/js/highlight.min.js" async></script> |
|
|
<script src="https://g4f.dev/dist/js/highlightjs-copy.min.js" async></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/jsencrypt/bin/jsencrypt.min.js"></script> |
|
|
<script src="https://g4f.dev/dist/js/sanitize-html.js" async></script> |
|
|
<script type="module" async> |
|
|
import { Client, Custom, PollinationsAI, DeepInfra, Puter, HuggingFace } from "https://g4f.dev/dist/js/client.js"; |
|
|
window.providers = { |
|
|
Azure: Client, |
|
|
PollinationsAI, |
|
|
ApiAirforce: Client, |
|
|
DeepInfra, |
|
|
Puter, |
|
|
HuggingFace, |
|
|
Custom |
|
|
}; |
|
|
</script> |
|
|
<link rel="stylesheet" href="https://g4f.dev/dist/css/dracula.min.css"> |
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css"> |
|
|
<script> |
|
|
MathJax = { |
|
|
chtml: { |
|
|
scale: 1, |
|
|
displayAlign: 'left' |
|
|
}, |
|
|
tex: { |
|
|
inlineMath: [['$', '$'], ['\\(', '\\)']], |
|
|
displayMath: [['$$', '$$'], ['\\[', '\\]']] |
|
|
}, |
|
|
}; |
|
|
</script> |
|
|
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script> |
|
|
<script> |
|
|
var tag = document.createElement('script'); |
|
|
tag.src = "https://www.youtube.com/iframe_api"; |
|
|
var firstScriptTag = document.getElementsByTagName('script')[0]; |
|
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); |
|
|
</script> |
|
|
<template> |
|
|
<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="https://cdn.jsdelivr.net/npm/gpt-tokenizer/dist/o200k_base.js" async></script> |
|
|
</template> |
|
|
<script type="module" src="https://g4f.dev/dist/js/photoswipe.js" async></script> |
|
|
<script async> |
|
|
if (localStorage.getItem("countTokens") != "false") { |
|
|
const template = document.head.querySelector('template'); |
|
|
document.head.appendChild(template.content); |
|
|
template.remove(); |
|
|
} |
|
|
</script> |
|
|
<script> |
|
|
const user_image = '<img src="https://g4f.dev/dist/img/user.png" alt="your avatar">'; |
|
|
const gpt_image = '<img src="https://g4f.dev/dist/img/gpt.png" alt="your avatar">'; |
|
|
window.conversation_id = ""; |
|
|
</script> |
|
|
<title>G4F Chat</title> |
|
|
</head> |
|
|
<body> |
|
|
<script async> |
|
|
localStorage.getItem("darkMode") == "false" ? document.body.classList.add("white") : null; |
|
|
</script> |
|
|
<div class="media-overlay"></div> |
|
|
<div class="gradient"></div> |
|
|
<div class="container"> |
|
|
<div class="sidebar"> |
|
|
<div class="sidebar-container"> |
|
|
<div class="sidebar-header"> |
|
|
<div class="sidebar-logo" data-translate="true">G4F Chat</div> |
|
|
<div class="mobile-sidebar-toggle"> |
|
|
<i class="fa-solid fa-bars"></i> |
|
|
</div> |
|
|
</div> |
|
|
<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(true)"> |
|
|
<i class="fa-solid fa-user-secret"></i> |
|
|
<span>Private Conversation</span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="bottom_buttons"> |
|
|
<button onclick="open_settings();"> |
|
|
<i class="fa-solid fa-gear"></i> |
|
|
<span>Open Settings</span> |
|
|
</button> |
|
|
<div class="info"> |
|
|
<i class="fa fa-question-circle"></i> |
|
|
<span class="convo-title">support ~ <a href="https://discord.gg/qXA4Wf4Fsm" target="_blank">discord.gg/qXA4Wf4Fsm</a> |
|
|
</span> |
|
|
</div> |
|
|
<div class="info"> |
|
|
<i class="fa-brands fa-discord"></i> |
|
|
<span class="convo-title">discord ~ <a href="https://discord.gg/5E39JUWUFa" target="_blank">discord.gg/5E39JUWUFa</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> |
|
|
<div class="settings hidden"> |
|
|
<div class="paper"> |
|
|
<div class="settings-top-bar"> |
|
|
<button class="settings-back-button" onclick="open_settings();"> |
|
|
<i class="fa-solid fa-arrow-left"></i> |
|
|
</button> |
|
|
<span>Settings</span> |
|
|
</div> |
|
|
<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 media</span> |
|
|
<input type="checkbox" id="download_media" checked/> |
|
|
<label for="download_media" class="toogle" title="Download and save generated images, audios and videos"></label> |
|
|
</div> |
|
|
<div class="field"> |
|
|
<span class="label">Refine files with spaCy</span> |
|
|
<input type="checkbox" id="refine"/> |
|
|
<label for="refine" class="toogle" title=""></label> |
|
|
</div> |
|
|
<div class="field"> |
|
|
<span class="label">Report errors</span> |
|
|
<input type="checkbox" id="report_error" checked/> |
|
|
<label for="report_error" class="toogle" title=""></label> |
|
|
</div> |
|
|
<div class="field"> |
|
|
<span class="label">Count words and tokens</span> |
|
|
<input type="checkbox" id="countTokens" checked/> |
|
|
<label for="countTokens" class="toogle" title=""></label> |
|
|
</div> |
|
|
<div class="field"> |
|
|
<span class="label">Automatic Orientation (16:9 or 9:16)</span> |
|
|
<input type="checkbox" id="automaticOrientation" checked/> |
|
|
<label for="automaticOrientation" class="toogle" title=""></label> |
|
|
</div> |
|
|
<div class="field box"> |
|
|
<label for="systemPrompt" class="label">System prompt</label> |
|
|
<textarea id="systemPrompt" placeholder="You are a helpful assistant." data-example="If you need to generate images, you can use the following format: . This will enable the use of an image generation tool."></textarea> |
|
|
</div> |
|
|
<div class="field box"> |
|
|
<label for="userInput-height" class="label" title="">Input max. height</label> |
|
|
<input type="number" id="userInput-height" value="200"/> |
|
|
</div> |
|
|
<div class="field box"> |
|
|
<label for="recognition-language" class="label" title="">Speech recognition language</label> |
|
|
<input type="text" id="recognition-language" value="" placeholder="navigator.language"/> |
|
|
</div> |
|
|
<div class="field mem0 hidden"> |
|
|
<span class="label">Enable Memory with Mem0</span> |
|
|
<input type="checkbox" id="mem0"/> |
|
|
<label for="mem0" class="toogle" title=""></label> |
|
|
<button onclick="import_memory()"> |
|
|
<i class="fa-solid fa-arrow-up-from-bracket"></i> |
|
|
<span>Import Messages to Mem0</span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="field box hidden"> |
|
|
<label for="mem0-api_key" class="label" title="">Mem0 API:</label> |
|
|
<input type="text" id="mem0-api_key" name="mem0[api_key]" placeholder="api_key"/> |
|
|
</div> |
|
|
<div class="field box hidden"> |
|
|
<label for="Custom-api_base" class="label" title="">Custom Provider (Base Url):</label> |
|
|
<input type="text" id="Custom-api_base" name="Custom[api_base]" placeholder="http://localhost:8080/v1"/> |
|
|
</div> |
|
|
<div class="field box hidden"> |
|
|
<label for="Custom-api_key" class="label" title="">Custom Provider:</label> |
|
|
<input type="text" id="Custom-api_key" name="Custom[api_key]" placeholder="api_key"/> |
|
|
</div> |
|
|
<div class="field box hidden"> |
|
|
<label for="BingCreateImages-api_key" class="label" title="">Microsoft Designer in Bing:</label> |
|
|
<input type="text" id="BingCreateImages-api_key" name="BingCreateImages[api_key]" placeholder=""_U" cookie"/> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bottom_buttons"> |
|
|
<button onclick="delete_conversations()"> |
|
|
<i class="fa-solid 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="save_storage(true)"> |
|
|
<i class="fa-solid fa-pencil"></i> |
|
|
<a href="" onclick="return false;">Export Settings</a> |
|
|
</button> |
|
|
<button onclick="this.querySelector('.fa-spin').classList.remove('hidden'); framework.translateAll().then(()=>{window.location.reload()}).catch(()=>{this.querySelector('.fa-spin').classList.add('hidden')})"> |
|
|
<i class="fa-solid fa-language"></i> |
|
|
<a href="" onclick="return false;">Translate UI</a> |
|
|
<i class="fas fa-spinner fa-spin hidden"></i> |
|
|
</button> |
|
|
<button id="showLog"> |
|
|
<i class="fa-solid fa-terminal"></i> |
|
|
<a href="" onclick="return false;">Show log</a> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="provider_forms hidden"> |
|
|
<div class="bottom_buttons"> |
|
|
<button id="close_provider_forms"> |
|
|
<i class="fa-regular fa-circle-xmark"></i> |
|
|
<a href="" onclick="return false;">Close</a> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chat-container"> |
|
|
<div class="chat-top-panel"> |
|
|
<div class="mobile-sidebar-toggle"> |
|
|
<i class="fa-solid fa-bars"></i> |
|
|
</div> |
|
|
<div class="convo-title">New Conversation</div> |
|
|
<button class="new_convo_icon" onclick="new_conversation()"> |
|
|
<i class="fa-regular fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
<textarea id="chatPrompt" class="box" placeholder="System prompt"></textarea> |
|
|
<button class="slide-header"> |
|
|
<i class="fa-solid fa-angles-up"></i> |
|
|
</button> |
|
|
<div class="chat-body" id="chatBody"></div> |
|
|
<div class="chat-footer"> |
|
|
<div class="chat-toolbar"> |
|
|
<div id="input-count" class=""> |
|
|
<button class="hide-input"> |
|
|
<i class="fa-solid fa-angles-down"></i> |
|
|
</button> |
|
|
<label for="agree" class="text" onclick="this.innerText='';"></label> |
|
|
</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="media-player"> |
|
|
<i class="fa-regular fa-x"></i> |
|
|
</div> |
|
|
<div class="media-select hidden"> |
|
|
<label class="image-select" for="image" title=""> |
|
|
<input type="file" id="image" name="image" accept="image/*" required/> |
|
|
<i class="fa-regular fa-image"></i> |
|
|
</label> |
|
|
<label class="capture-camera" for="camera"> |
|
|
<input type="file" id="camera" name="camera" accept="image/*" capture="camera" required/> |
|
|
<i class="fa-solid fa-camera"></i> |
|
|
</label> |
|
|
<label class="capture-audio" for="audio"> |
|
|
<i class="fa-solid fa-microphone"></i> |
|
|
</label> |
|
|
<label class="add-link" for="link"> |
|
|
<i class="fa-solid fa-link"></i> |
|
|
</label> |
|
|
<button class="close"> |
|
|
<i class="fa-solid fa-xmark"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="user-input"> |
|
|
<div class="input-area"> |
|
|
<a id="download"></a> |
|
|
<textarea id="userInput" class="box" placeholder="Type a message..." cols="30" rows="10" |
|
|
style="white-space: pre-wrap;resize: none;"></textarea> |
|
|
<label class="file-label image-label"> |
|
|
<i class="fa-brands fa-usb"></i> |
|
|
</label> |
|
|
<label class="file-label" for="file"> |
|
|
<input type="file" id="file" name="file" accept="*/*" required multiple/> |
|
|
<i class="fa-solid fa-paperclip"></i> |
|
|
</label> |
|
|
<label class="micro-label" for="micro"> |
|
|
<i class="fa-solid fa-microphone-slash"></i> |
|
|
</label> |
|
|
<button class="code" title="Insert code block"> |
|
|
<i class="fa-solid fa-code"></i> |
|
|
</button> |
|
|
<div class="send-buttons"> |
|
|
<button id="addButton" aria-label="Add message"> |
|
|
<i class="fa-solid fa-square-plus" aria-hidden="true"></i> |
|
|
<span>Add</span> |
|
|
</button> |
|
|
|
|
|
<button id="sendButton" aria-label="Send message"> |
|
|
<i class="fa-regular fa-paper-plane" aria-hidden="true"></i> |
|
|
<span>Send</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chat-buttons"> |
|
|
<div class="field"> |
|
|
<button id="search"> |
|
|
<i class="fa-solid fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="field"> |
|
|
<select name="model" id="model"> |
|
|
<option value="" selected="selected">Model: Default</option> |
|
|
</select> |
|
|
<select name="model2" id="model2" class="hidden model"></select> |
|
|
<div class="model-selector hidden"> |
|
|
<div id="model-suggestions" class="suggestions-dropdown"></div> |
|
|
<input |
|
|
type="text" |
|
|
id="model-search" |
|
|
placeholder="Search models (e.g. 'gpt-4', 'claude')..." |
|
|
autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" |
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
<div class="field"> |
|
|
<button id="model_edit" class=""> |
|
|
<i class="fa-solid fa-edit"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="field"> |
|
|
<select name="provider" id="provider"> |
|
|
<option value="AnyProvider">Provider: Auto</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="field"> |
|
|
<button id="pin"> |
|
|
<i class="fa-solid fa-thumbtack"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div id="pin_container" class="field"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="log hidden"> |
|
|
<div class="log-top-bar"> |
|
|
<button class="log-back-button" onclick="open_settings();"> |
|
|
<i class="fa-solid fa-arrow-left"></i> |
|
|
</button> |
|
|
<span>Logs</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hljs-iframe-container hidden"> |
|
|
<iframe class="hljs-iframe"></iframe> |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
