updated scritps

static/script.js

@@ -2,9 +2,20 @@ document.addEventListener('DOMContentLoaded', () => {
   const queryInput = document.getElementById('queryInput');
   const askButton = document.getElementById('askButton');
   const chatMessages = document.getElementById('chatMessages');
+  const attachFileBtn = document.getElementById('attachFileBtn');
+  const fileInput = document.getElementById('fileInput');
+  const ocrModal = document.getElementById('ocrModal');
+  const closeOcrModal = document.getElementById('closeOcrModal');
+  const useOcrText = document.getElementById('useOcrText');
+  const queryWithOcr = document.getElementById('queryWithOcr');
+  const cancelOcr = document.getElementById('cancelOcr');
+  const ocrPreview = document.getElementById('ocrPreview');
+  const ocrResults = document.getElementById('ocrResults');
 
   // 💬 Conversation state management
   let conversationHistory = [];
+  let currentOcrText = '';
+  let currentOcrImage = null;
 
   function addUserMessage(content) {
     conversationHistory.push({
@@ -135,6 +146,106 @@ function formatAnswer(text) {
     .join('');
 }
 
+  // 📷 OCR Functions
+  async function handleFileUpload(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    // Validate file type
+    if (!file.type.startsWith('image/')) {
+      alert('Please select an image file.');
+      return;
+    }
+
+    // Show modal
+    ocrModal.style.display = 'block';
+    ocrPreview.innerHTML = `<img src="${URL.createObjectURL(file)}" alt="Preview" style="max-width: 100%; max-height: 300px;">`;
+    ocrResults.innerHTML = '<div class="loading">Processing image...</div>';
+
+    try {
+      // Extract text using OCR
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const response = await fetch('/ocr/extract-text/', {
+        method: 'POST',
+        body: formData
+      });
+
+      if (!response.ok) throw new Error(`Server returned ${response.status}`);
+      const data = await response.json();
+
+      if (data.success) {
+        currentOcrText = data.extracted_text;
+        currentOcrImage = file;
+        ocrResults.innerHTML = `
+          <div class="ocr-success">
+            <h4>Extracted Text:</h4>
+            <div class="extracted-text">${escapeHtml(data.extracted_text)}</div>
+          </div>
+        `;
+      } else {
+        ocrResults.innerHTML = `
+          <div class="ocr-error">
+            <h4>Error:</h4>
+            <p>${data.error || 'Failed to extract text'}</p>
+          </div>
+        `;
+      }
+    } catch (error) {
+      ocrResults.innerHTML = `
+        <div class="ocr-error">
+          <h4>Error:</h4>
+          <p>Failed to process image: ${error.message}</p>
+        </div>
+      `;
+    }
+  }
+
+  async function handleOcrQuery(query) {
+    if (!currentOcrText) {
+      alert('No OCR text available. Please upload an image first.');
+      return;
+    }
+
+    // Add user message
+    addUserMessage(`[Image Query] ${query}`);
+    displayAllMessages();
+
+    // Show loading
+    const loadingMessage = renderLoadingMessage();
+    chatMessages.innerHTML += loadingMessage;
+    scrollToBottom();
+
+    try {
+      const response = await fetch('/ocr/query/', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          query: query,
+          conversation_history: getHistory(),
+          extracted_text: currentOcrText
+        })
+      });
+
+      if (!response.ok) throw new Error(`Server returned ${response.status}`);
+      const data = await response.json();
+
+      // Remove loading and add response
+      chatMessages.innerHTML = chatMessages.innerHTML.replace(loadingMessage, '');
+      addAssistantMessage(data.response, data.source);
+      displayAllMessages();
+      ocrModal.style.display = 'none';
+
+    } catch (error) {
+      chatMessages.innerHTML = chatMessages.innerHTML.replace(loadingMessage, '');
+      addAssistantMessage(`Failed to get response: ${error.message}`, 'Error');
+      displayAllMessages();
+    }
+  }
+
   // 🔍 Query handler
   async function handleQuery() {
     const query = queryInput.value.trim();
@@ -187,6 +298,41 @@ function formatAnswer(text) {
     if (e.key === 'Enter') handleQuery();
   });
 
+  // OCR functionality
+  attachFileBtn.addEventListener('click', () => {
+    fileInput.click();
+  });
+
+  fileInput.addEventListener('change', handleFileUpload);
+
+  closeOcrModal.addEventListener('click', () => {
+    ocrModal.style.display = 'none';
+  });
+
+  useOcrText.addEventListener('click', () => {
+    queryInput.value = currentOcrText;
+    ocrModal.style.display = 'none';
+    queryInput.focus();
+  });
+
+  queryWithOcr.addEventListener('click', () => {
+    const query = prompt('Enter your question about the image:');
+    if (query) {
+      handleOcrQuery(query);
+    }
+  });
+
+  cancelOcr.addEventListener('click', () => {
+    ocrModal.style.display = 'none';
+  });
+
+  // Close modal when clicking outside
+  window.addEventListener('click', (e) => {
+    if (e.target === ocrModal) {
+      ocrModal.style.display = 'none';
+    }
+  });
+
   // Auto-resize input
   queryInput.addEventListener('input', () => {
     queryInput.style.height = 'auto';