Spaces:

triflix
/

gemini-functioncall

Paused

App Files Files Community

triflix commited on Mar 15, 2025

Commit

dedc4d5

verified ·

1 Parent(s): 39aa5c5

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +97 -39

templates/index.html CHANGED Viewed

@@ -3,36 +3,106 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Upload Image for Generative AI</title>
   <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-100 flex items-center justify-center h-screen">
-  <div class="bg-white p-8 rounded shadow-md w-full max-w-md">
-    <h1 class="text-2xl font-bold mb-4 text-center">Upload Image</h1>
-    <form id="uploadForm" enctype="multipart/form-data">
-      <input type="file" id="fileInput" name="file" accept="image/*" class="mb-4 w-full" required />
-      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
-        Send
-      </button>
-    </form>
-    <div id="result" class="mt-4"></div>
   </div>
   <script>
-    const form = document.getElementById('uploadForm');
     const fileInput = document.getElementById('fileInput');
-    const resultDiv = document.getElementById('result');
-    form.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      const formData = new FormData();
-      if (fileInput.files.length === 0) {
-        alert("Please select an image.");
         return;
       }
-      formData.append('file', fileInput.files[0]);
-      resultDiv.innerHTML = `<p class="text-gray-500">Processing...</p>`;
       try {
         const response = await fetch('/upload', {
           method: 'POST',
@@ -40,27 +110,15 @@
         });
         const data = await response.json();
         if (response.ok && data.result) {
-          resultDiv.innerHTML = `<pre class="bg-gray-200 p-4 rounded whitespace-pre-wrap">${data.result}</pre>`;
         } else {
-          resultDiv.innerHTML = `<p class="text-red-500">${data.detail || 'No result received.'}</p>`;
         }
       } catch (error) {
-        resultDiv.innerHTML = `<p class="text-red-500">Error processing the image: ${error.message}</p>`;
-      }
-    });
-    // Listen for paste events (Ctrl+V) to upload an image.
-    window.addEventListener('paste', (event) => {
-      const items = event.clipboardData.items;
-      for (let item of items) {
-        if (item.type.indexOf("image") !== -1) {
-          const file = item.getAsFile();
-          const dt = new DataTransfer();
-          dt.items.add(file);
-          fileInput.files = dt.files;
-          form.dispatchEvent(new Event('submit'));
-          break;
-        }
       }
     });
   </script>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Upload Images for Generative AI</title>
   <script src="https://cdn.tailwindcss.com"></script>
 </head>
+<body class="bg-gray-100">
+  <div class="container mx-auto p-4">
+    <h1 class="text-3xl font-bold text-center mb-6">Upload Images</h1>
+    <div class="flex flex-col items-center">
+      <!-- Upload/Paste Area -->
+      <div id="upload-area" class="border-2 border-dashed border-gray-400 p-8 rounded w-full max-w-lg bg-white">
+        <p class="mb-4 text-center">
+          Paste images with <strong>Ctrl + V</strong> or click "Add Image".
+        </p>
+        <input type="file" id="fileInput" name="files" accept="image/*" multiple class="hidden" />
+        <button id="addImageBtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-4">
+          Add Image
+        </button>
+        <!-- Thumbnails container -->
+        <div id="thumbnails" class="flex flex-wrap gap-4"></div>
+      </div>
+      <!-- Send Button -->
+      <div class="mt-6">
+        <button id="sendBtn" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
+          Send
+        </button>
+      </div>
+      <!-- Result Display -->
+      <div id="resultArea" class="mt-6 w-full max-w-lg"></div>
+    </div>
   </div>
   <script>
     const fileInput = document.getElementById('fileInput');
+    const addImageBtn = document.getElementById('addImageBtn');
+    const thumbnails = document.getElementById('thumbnails');
+    const sendBtn = document.getElementById('sendBtn');
+    const resultArea = document.getElementById('resultArea');
+    // Array to hold selected image files.
+    let selectedFiles = [];
+    // Trigger file input when Add Image button is clicked.
+    addImageBtn.addEventListener('click', () => {
+      fileInput.click();
+    });
+    // Handle file selection.
+    fileInput.addEventListener('change', () => {
+      for (let file of fileInput.files) {
+        selectedFiles.push(file);
+        addThumbnail(file);
+      }
+      fileInput.value = ""; // reset input
+    });
+    // Function to add image thumbnail.
+    function addThumbnail(file) {
+      const reader = new FileReader();
+      reader.onload = function(e) {
+        const thumbContainer = document.createElement('div');
+        thumbContainer.classList.add('relative');
+        thumbContainer.innerHTML = `
+          <img src="${e.target.result}" alt="${file.name}" class="w-24 h-24 object-cover rounded border" />
+          <button class="removeBtn absolute -top-2 -right-2 bg-red-500 text-white rounded-full px-1 text-xs">x</button>
+        `;
+        thumbnails.appendChild(thumbContainer);
+        // Remove image on click.
+        thumbContainer.querySelector('.removeBtn').addEventListener('click', () => {
+          selectedFiles = selectedFiles.filter(f => f !== file);
+          thumbContainer.remove();
+        });
+      }
+      reader.readAsDataURL(file);
+    }
+    // Listen for paste events (Ctrl+V) to add images.
+    window.addEventListener('paste', (event) => {
+      const items = event.clipboardData.items;
+      for (let item of items) {
+        if (item.type.indexOf("image") !== -1) {
+          const file = item.getAsFile();
+          selectedFiles.push(file);
+          addThumbnail(file);
+        }
+      }
+    });
+    // Handle Send button click.
+    sendBtn.addEventListener('click', async () => {
+      if (selectedFiles.length === 0) {
+        alert("Please add at least one image.");
         return;
       }
+      const formData = new FormData();
+      selectedFiles.forEach(file => {
+        formData.append('files', file);
+      });
+      resultArea.innerHTML = `<p class="text-gray-500">Processing...</p>`;
       try {
         const response = await fetch('/upload', {
           method: 'POST',
         });
         const data = await response.json();
         if (response.ok && data.result) {
+          resultArea.innerHTML = `<pre class="bg-gray-200 p-4 rounded whitespace-pre-wrap">${data.result}</pre>`;
+          // Reset the UI.
+          selectedFiles = [];
+          thumbnails.innerHTML = "";
         } else {
+          resultArea.innerHTML = `<p class="text-red-500">${data.detail || 'No result received.'}</p>`;
         }
       } catch (error) {
+        resultArea.innerHTML = `<p class="text-red-500">Error processing the images: ${error.message}</p>`;
       }
     });
   </script>