From 6c422b2965d07e33a4c03fd7e1963316500bd527 Mon Sep 17 00:00:00 2001
From: Heiner Lohaus <hlohaus@users.noreply.github.com>
Date: Sun, 11 Feb 2024 01:59:57 +0100
Subject: Add GPT 4 support in You, Add camera input, Enable logging on debug
 in GUI, Don't load expired cookies

---
 g4f/gui/client/css/style.css   | 25 +++++++++++++++++----
 g4f/gui/client/html/index.html |  8 +++++--
 g4f/gui/client/js/chat.v1.js   | 51 +++++++++++++++++++++++++++---------------
 3 files changed, 60 insertions(+), 24 deletions(-)

(limited to 'g4f/gui/client')

diff --git a/g4f/gui/client/css/style.css b/g4f/gui/client/css/style.css
index e03f36d2..8752dee5 100644
--- a/g4f/gui/client/css/style.css
+++ b/g4f/gui/client/css/style.css
@@ -404,7 +404,7 @@ body {
     display: none;
 }
 
-#image, #file {
+#image, #file, #camera {
     display: none;
 }
 
@@ -412,20 +412,37 @@ label[for="image"]:has(> input:valid){
     color: var(--accent);
 }
 
+label[for="camera"]:has(> input:valid){
+    color: var(--accent);
+}
+
 label[for="file"]:has(> input:valid){
     color: var(--accent);
 }
 
-label[for="image"], label[for="file"] {
+label[for="image"], label[for="file"], label[for="camera"] {
     cursor: pointer;
     position: absolute;
     top: 10px;
     left: 10px;
 }
 
-label[for="file"] {
+label[for="image"] {
     top: 32px;
-    left: 10px;
+}
+
+label[for="camera"] {
+    top: 54px;
+}
+
+label[for="camera"] {
+    display: none;
+}
+
+@media (pointer:none), (pointer:coarse) {
+    label[for="camera"] {
+        display: block;
+    }
 }
 
 .buttons input[type="checkbox"] {
diff --git a/g4f/gui/client/html/index.html b/g4f/gui/client/html/index.html
index 55b54b48..175b7dc8 100644
--- a/g4f/gui/client/html/index.html
+++ b/g4f/gui/client/html/index.html
@@ -114,10 +114,14 @@
                 <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 for="image" title="Works only with Bing and OpenaiChat">
-                        <input type="file" id="image" name="image" accept="image/png, image/gif, image/jpeg, image/svg+xml" required/>
+                    <label for="image" title="Works only with Bing, Gemini and OpenaiChat">
+                        <input type="file" id="image" name="image" accept="image/*" required/>
                         <i class="fa-regular fa-image"></i>
                     </label>
+                    <label for="camera">
+                        <input type="file" id="camera" name="camera" accept="image/*" capture="camera" required/>
+                        <i class="fa-solid fa-camera"></i>
+                    </label>
                     <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>
diff --git a/g4f/gui/client/js/chat.v1.js b/g4f/gui/client/js/chat.v1.js
index 86eef8c9..4b2f1c1a 100644
--- a/g4f/gui/client/js/chat.v1.js
+++ b/g4f/gui/client/js/chat.v1.js
@@ -8,6 +8,7 @@ const stop_generating   = document.querySelector(`.stop_generating`);
 const regenerate        = document.querySelector(`.regenerate`);
 const send_button       = document.querySelector(`#send-button`);
 const imageInput        = document.querySelector('#image');
+const cameraInput       = document.querySelector('#camera');
 const fileInput         = document.querySelector('#file');
 
 let   prompt_lock       = false;
@@ -63,6 +64,10 @@ const handle_ask = async () => {
                         ? '<img src="' + imageInput.dataset.src + '" alt="Image upload">'
                         : ''
                     }
+                    ${cameraInput.dataset.src
+                        ? '<img src="' + cameraInput.dataset.src + '" alt="Image capture">'
+                        : ''
+                    }
                 </div>
             </div>
         `;
@@ -141,9 +146,10 @@ const ask_gpt = async () => {
         const headers = {
             accept: 'text/event-stream'
         }
-        if (imageInput && imageInput.files.length > 0) {
+        const input = imageInput && imageInput.files.length > 0 ? imageInput : cameraInput
+        if (input && input.files.length > 0) {
             const formData = new FormData();
-            formData.append('image', imageInput.files[0]);
+            formData.append('image', input.files[0]);
             formData.append('json', body);
             body = formData;
         } else {
@@ -211,8 +217,11 @@ const ask_gpt = async () => {
                 message_box.scrollTo({ top: message_box.scrollHeight, behavior: "auto" });
             }
         }
-        if (!error && imageInput) imageInput.value = "";
-        if (!error && fileInput) fileInput.value = "";
+        if (!error) {
+            if (imageInput) imageInput.value = "";
+            if (cameraInput) cameraInput.value = "";
+            if (fileInput) fileInput.value = "";
+        }
     } catch (e) {
         console.error(e);
 
@@ -668,21 +677,27 @@ observer.observe(message_input, { attributes: true });
     }
     document.getElementById("version_text").innerHTML = text
 })()
-imageInput.addEventListener('click', async (event) => {
-    imageInput.value = '';
-    delete imageInput.dataset.src;
-});
-imageInput.addEventListener('change', async (event) => {
-    if (imageInput.files.length) {
-        const reader = new FileReader();
-        reader.addEventListener('load', (event) => {
-            imageInput.dataset.src = event.target.result;
-        });
-        reader.readAsDataURL(imageInput.files[0]);
-    } else {
-        delete imageInput.dataset.src;
+for (el of [imageInput, cameraInput]) {
+    console.log(el.files);
+    el.addEventListener('click', async () => {
+        el.value = '';
+        delete el.dataset.src;
+    });
+    do_load = async () => {
+        if (el.files.length) {
+            delete imageInput.dataset.src;
+            delete cameraInput.dataset.src;
+            const reader = new FileReader();
+            reader.addEventListener('load', (event) => {
+                el.dataset.src = event.target.result;
+                console.log(el.dataset.src);
+            });
+            reader.readAsDataURL(el.files[0]);
+        }
     }
-});
+    do_load()
+    el.addEventListener('change', do_load);
+}
 fileInput.addEventListener('click', async (event) => {
     fileInput.value = '';
     delete fileInput.dataset.text;
-- 
cgit v1.2.3