Update index.js

index.js

@@ -14,6 +14,7 @@ const QUANT = "q4f16";
 const MAX_SINGLE_CHAT_LENGTH = 10;
 
 // UI Elements
+const promptInput = document.querySelector('input[type="text"]');
 const status = document.getElementById('status');
 const fileUpload = document.getElementById('upload');
 const imageContainer = document.getElementById('container');
@@ -102,14 +103,39 @@ export function float16ToInt64(float16Value) {
   return BigInt(Math.round(value));
 }
 
-async function parse(img, txt) {
-  imageContainer.innerHTML = '';
-  imageContainer.style.backgroundImage = `url(${img})`;
-  status.textContent = 'Analysing...';
-  const output = await imageTextToText(img, txt);
-  status.textContent = output;
+// async function parse(img, txt) {
+//   imageContainer.innerHTML = '';
+//   imageContainer.style.backgroundImage = `url(${img})`;
+//   status.textContent = 'Analysing...';
+//   const output = await imageTextToText(img, txt);
+//   status.textContent = output;
+// }
+
+async function handleQuery(imageUrl, query) {
+  if (!imageUrl || !query.trim()) {
+    status.textContent = 'Please provide both an image and a prompt';
+    return;
+  }
+  
+  try {
+    status.textContent = 'Analyzing...';
+
+    // container.style.backgroundImage = `url(${imageUrl})`;
+    // container.style.backgroundSize = 'contain';
+    // container.style.backgroundRepeat = 'no-repeat';
+    // container.style.backgroundPosition = 'center';
+
+    updatePreview(imageUrl);
+    
+    const result = await imageTextToText(imageUrl, query);
+    status.textContent = result;
+  } catch (err) {
+    status.textContent = 'Error processing request';
+    console.error(err);
+  }
 }
 
+
 export async function imageTextToText(
   imagePath,
   query,
@@ -349,7 +375,25 @@ fileUpload.addEventListener('change', async function(e) {
   
   reader.onload = async (e2) => {
     updatePreview(e2.target.result);
-    // parse(e2.target.result)
+    handleQuery(e2.target.result);
   }
   reader.readAsDataURL(file);
 });
+
+promptInput.addEventListener('keypress', (e) => {
+  if (e.key === 'Enter') {
+    if (!currentImage) {
+      status.textContent = 'Please select an image first';
+      return;
+    }
+    handleQuery(currentImage, e.target.value);
+  }
+});
+
+promptInput.addEventListener('input', () => {
+  if (currentImage && !promptInput.value.trim()) {
+    status.textContent = 'Add a prompt and press Enter';
+  } else if (currentImage && promptInput.value.trim()) {
+    status.textContent = 'Press Enter to analyze';
+  }
+});