From aba4b96f23ef38ca75195b3b78a88bb92035b4a9 Mon Sep 17 00:00:00 2001
From: Heiner Lohaus <hlohaus@users.noreply.github.com>
Date: Mon, 12 Feb 2024 11:41:27 +0100
Subject: Add new Client API with Docs Use object urls for the preview of image
 uploads. Fix upload images in You provider Fix create image. It's now a
 single image. Improve system message for create images.

---
 g4f/gui/client/js/chat.v1.js | 29 ++++++++++-------------------
 1 file changed, 10 insertions(+), 19 deletions(-)

(limited to 'g4f/gui/client')

diff --git a/g4f/gui/client/js/chat.v1.js b/g4f/gui/client/js/chat.v1.js
index a243b1de..2042d174 100644
--- a/g4f/gui/client/js/chat.v1.js
+++ b/g4f/gui/client/js/chat.v1.js
@@ -52,6 +52,12 @@ const handle_ask = async () => {
         }
         await add_message(window.conversation_id, "user", message);
         window.token = message_id();
+
+        if (imageInput.dataset.src) URL.revokeObjectURL(imageInput.dataset.src);
+        const input = imageInput && imageInput.files.length > 0 ? imageInput : cameraInput
+        if (input.files.length > 0) imageInput.dataset.src = URL.createObjectURL(input.files[0]);
+        else delete imageInput.dataset.src
+
         message_box.innerHTML += `
             <div class="message">
                 <div class="user">
@@ -64,10 +70,6 @@ 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>
         `;
@@ -683,24 +685,13 @@ observer.observe(message_input, { attributes: true });
     document.getElementById("version_text").innerHTML = text
 })()
 for (const 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;
-            });
-            reader.readAsDataURL(el.files[0]);
+        if (imageInput.dataset.src) {
+            URL.revokeObjectURL(imageInput.dataset.src);
+            delete imageInput.dataset.src
         }
-    }
-    do_load()
-    el.addEventListener('change', do_load);
+    });
 }
 fileInput.addEventListener('click', async (event) => {
     fileInput.value = '';
-- 
cgit v1.2.3