summaryrefslogtreecommitdiffstats
path: root/g4f/gui
diff options
context:
space:
mode:
Diffstat (limited to 'g4f/gui')
-rw-r--r--g4f/gui/client/index.html25
-rw-r--r--g4f/gui/client/static/css/style.css13
-rw-r--r--g4f/gui/client/static/js/chat.v1.js23
3 files changed, 43 insertions, 18 deletions
diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html
index 064e4594..d3cddd3c 100644
--- a/g4f/gui/client/index.html
+++ b/g4f/gui/client/index.html
@@ -93,22 +93,22 @@
<div class="paper">
<h3>Settings</h3>
<div class="field">
- <span class="label">Web Access</span>
+ <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 History</span>
+ <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>
+ <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</span>
+ <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>
@@ -121,8 +121,8 @@
<input type="text" id="recognition-language" value="" placeholder="navigator.language"/>
</div>
<div class="field box">
- <label for="Bing-api_key" class="label" title="">Bing:</label>
- <textarea id="Bing-api_key" name="Bing[api_key]" class="BingCreateImages-api_key" placeholder="&quot;_U&quot; cookie"></textarea>
+ <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>
@@ -145,14 +145,14 @@
<textarea id="Openai-api_key" name="Openai[api_key]" placeholder="api_key"></textarea>
</div>
<div class="field box">
- <label for="OpenaiAccount-api_key" class="label" title="">OpenAI ChatGPT:</label>
- <textarea id="OpenaiAccount-api_key" name="OpenaiAccount[api_key]" class="OpenaiChat-api_key" placeholder="access_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>
@@ -173,7 +173,10 @@
<div id="messages" class="box"></div>
<div class="toolbar">
<div id="input-count" class="">
- &nbsp;
+ <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">
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index 01bc17fa..005cb8bf 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -457,7 +457,11 @@ body {
#input-count {
width: fit-content;
font-size: 12px;
- padding: 6px var(--inner-gap);
+ padding: 6px 6px;
+}
+
+#input-count .text {
+ padding: 0 4px;
}
.stop_generating, .toolbar .regenerate {
@@ -491,6 +495,13 @@ body {
animation: show_popup 0.4s;
}
+.toolbar .hide-input {
+ background: transparent;
+ border: none;
+ color: var(--colour-3);
+ cursor: pointer;
+}
+
@keyframes show_popup {
from {
opacity: 0;
diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
index a0178e63..46d5039e 100644
--- a/g4f/gui/client/static/js/chat.v1.js
+++ b/g4f/gui/client/static/js/chat.v1.js
@@ -11,7 +11,7 @@ const imageInput = document.getElementById("image");
const cameraInput = document.getElementById("camera");
const fileInput = document.getElementById("file");
const microLabel = document.querySelector(".micro-label");
-const inputCount = document.getElementById("input-count");
+const inputCount = document.getElementById("input-count").querySelector(".text");
const providerSelect = document.getElementById("provider");
const modelSelect = document.getElementById("model");
const modelProvider = document.getElementById("model2");
@@ -41,9 +41,7 @@ appStorage = window.localStorage || {
length: 0
}
-const markdown = window.markdownit({
- html: true,
-});
+const markdown = window.markdownit();
const markdown_render = (content) => {
return markdown.render(content
.replaceAll(/<!-- generated images start -->|<!-- generated images end -->/gm, "")
@@ -813,6 +811,17 @@ document.getElementById("regenerateButton").addEventListener("click", async () =
await ask_gpt();
});
+const hide_input = document.querySelector(".toolbar .hide-input");
+hide_input.addEventListener("click", async (e) => {
+ const icon = hide_input.querySelector("i");
+ const func = icon.classList.contains("fa-angles-down") ? "add" : "remove";
+ const remv = icon.classList.contains("fa-angles-down") ? "remove" : "add";
+ icon.classList[func]("fa-angles-up");
+ icon.classList[remv]("fa-angles-down");
+ document.querySelector(".conversation .user-input").classList[func]("hidden");
+ document.querySelector(".conversation .buttons").classList[func]("hidden");
+});
+
const uuid = () => {
return `xxxxxxxx-xxxx-4xxx-yxxx-${Date.now().toString(16)}`.replace(
/[xy]/g,
@@ -1016,7 +1025,7 @@ const count_input = async () => {
if (countFocus.value) {
inputCount.innerText = count_words_and_tokens(countFocus.value, get_selected_model());
} else {
- inputCount.innerHTML = "&nbsp;"
+ inputCount.innerText = "";
}
}, 100);
};
@@ -1060,6 +1069,8 @@ async function on_api() {
messageInput.addEventListener("keydown", async (evt) => {
if (prompt_lock) return;
+ // If not mobile
+ if (!window.matchMedia("(pointer:coarse)").matches)
if (evt.keyCode === 13 && !evt.shiftKey) {
evt.preventDefault();
console.log("pressed enter");
@@ -1262,6 +1273,7 @@ async function load_provider_models(providerIndex=null) {
if (!providerIndex) {
providerIndex = providerSelect.selectedIndex;
}
+ modelProvider.innerHTML = '';
const provider = providerSelect.options[providerIndex].value;
if (!provider) {
modelProvider.classList.add("hidden");
@@ -1269,7 +1281,6 @@ async function load_provider_models(providerIndex=null) {
return;
}
const models = await api('models', provider);
- modelProvider.innerHTML = '';
if (models.length > 0) {
modelSelect.classList.add("hidden");
modelProvider.classList.remove("hidden");
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-09 03:36:46 +0100