Spaces:

triflix
/

gemini-functioncall

Sleeping

App Files Files Community

triflix commited on Mar 15, 2025

Commit

78eed41

verified ·

1 Parent(s): 1ccf566

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +39 -91

templates/index.html CHANGED Viewed

@@ -3,116 +3,64 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Image to Question Generator</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">
-      Image to Question Generator
-    </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 text-center bg-white">
-        <p class="mb-4">
-          Paste an image with <strong>Ctrl + V</strong> or click to select an image.
-        </p>
-        <input type="file" id="fileInput" accept="image/*" class="hidden" />
-        <button id="selectBtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
-          Select Image
-        </button>
-      </div>
-      <!-- Result Display -->
-      <div id="resultArea" class="mt-6 w-full max-w-lg"></div>
-      <!-- History Section -->
-      <div id="historyArea" class="mt-6 w-full max-w-lg">
-        <h2 class="text-xl font-bold mb-2">History</h2>
-        <ul id="historyList" class="list-disc pl-5"></ul>
-      </div>
-    </div>
   </div>
   <script>
-    const uploadArea = document.getElementById('upload-area');
     const fileInput = document.getElementById('fileInput');
-    const selectBtn = document.getElementById('selectBtn');
-    const resultArea = document.getElementById('resultArea');
-    const historyList = document.getElementById('historyList');
-    // Load history from localStorage
-    let history = JSON.parse(localStorage.getItem('history')) || [];
-    function renderHistory() {
-      historyList.innerHTML = '';
-      history.forEach((item) => {
-        const li = document.createElement('li');
-        li.textContent = item;
-        li.classList.add('cursor-pointer', 'hover:text-blue-500');
-        li.addEventListener('click', () => {
-          resultArea.innerHTML = `<pre class="bg-gray-200 p-4 rounded whitespace-pre-wrap">${item}</pre>`;
-        });
-        historyList.appendChild(li);
-      });
-    }
-    renderHistory();
-    // Trigger file input on button click
-    selectBtn.addEventListener('click', () => {
-      fileInput.click();
-    });
-    // When a file is selected, upload it
-    fileInput.addEventListener('change', () => {
-      if (fileInput.files.length > 0) {
-        uploadFile(fileInput.files[0]);
-      }
-    });
-    // Listen for paste events to handle Ctrl+V image pasting
-    window.addEventListener('paste', (event) => {
-      const items = event.clipboardData.items;
-      for (let i = 0; i < items.length; i++) {
-        if (items[i].type.indexOf("image") !== -1) {
-          const file = items[i].getAsFile();
-          uploadFile(file);
-          break;
-        }
-      }
-    });
-    // Upload the file via fetch
-    async function uploadFile(file) {
       const formData = new FormData();
-      formData.append('file', file);
-      resultArea.innerHTML = `<p class="text-gray-500">Processing...</p>`;
       try {
         const response = await fetch('/upload', {
           method: 'POST',
           body: formData
         });
         const data = await response.json();
-        if (data.result) {
-          resultArea.innerHTML = `<pre class="bg-gray-200 p-4 rounded whitespace-pre-wrap">${data.result}</pre>`;
-          // Save result to history (only last 10 entries)
-          history.unshift(data.result);
-          if (history.length > 10) history = history.slice(0, 10);
-          localStorage.setItem('history', JSON.stringify(history));
-          renderHistory();
         } else {
-          resultArea.innerHTML = `<p class="text-red-500">No result received.</p>`;
         }
       } catch (error) {
-        resultArea.innerHTML = `<p class="text-red-500">Error processing the image.</p>`;
       }
-    }
-    // Example keyboard support: pressing Enter triggers file selection
-    document.addEventListener('keydown', (event) => {
-      if (event.key === 'Enter') {
-        fileInput.click();
       }
     });
   </script>

 <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',
           body: formData
         });
         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>