Update index.html

index.html

@@ -964,59 +964,54 @@ function solution() {
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
-  <script>
+   <script>
     // Global variables
-    let isLoading = false;
+    let attachedFiles = [];
     let currentCarouselIndex = 0;
+    let isLoading = false;
     let isDragging = false;
-    let startX = 0;
 
     // Initialize the application
     document.addEventListener('DOMContentLoaded', function() {
       loadSettings();
       setupEventListeners();
-      setupSimpleCarousel();
+      setupCarousel();
+      setupDropzone();
       hljs.highlightAll();
-      
-      // Dark mode detection
-      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        document.documentElement.classList.add('dark');
-      }
-      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-        if (event.matches) {
-          document.documentElement.classList.add('dark');
-        } else {
-          document.documentElement.classList.remove('dark');
-        }
-      });
     });
 
     // Settings management
     function loadSettings() {
       const settings = {
-        model: localStorage.getItem('selectedModel') || 'mistralai/Mistral-7B-Instruct-v0.1',
-        apiKey: localStorage.getItem('apiKey') || '',
-        maxTokens: localStorage.getItem('maxTokens') || '512',
-        primarySystemPrompt: localStorage.getItem('primarySystemPrompt') || 'You are a helpful AI assistant that provides clear, accurate, and helpful responses. Focus on practical solutions and detailed explanations.',
-        codeTemplate: localStorage.getItem('codeTemplate') || '```javascript\n// Code implementation\nfunction solution() {\n  // Your code here\n  return result;\n}\n```',
-        additionalInstructions: localStorage.getItem('additionalInstructions') || 'Provide working code examples when possible. Explain complex concepts step by step. Use modern best practices.'
+        model: localStorage.getItem('selectedModel') || 'Qwen/Qwen2.5-Coder-32B-Instruct',
+        ocrModel: localStorage.getItem('selectedOcrModel') || 'none',
+        primarySystemPrompt: localStorage.getItem('primarySystemPrompt') || 'You are a powerful AI assistant that excels at understanding code, images, and technical content. Provide clear, accurate, and helpful responses. Focus on practical solutions and detailed explanations.',
+        ocrSystemPrompt: localStorage.getItem('ocrSystemPrompt') || 'Extract all text from the provided image clearly and accurately. Preserve formatting, structure, and layout when possible. If text is unclear, indicate uncertain parts.',
+        codeTemplate: localStorage.getItem('codeTemplate') || '```javascript\n// Enhanced code implementation\nfunction solution() {\n  // Your optimized code here\n  return result;\n}\n```',
+        additionalInstructions: localStorage.getItem('additionalInstructions') || 'Always provide working, tested code examples. Include error handling and optimization suggestions. Explain complex concepts step by step. Use modern best practices.',
+        promptPrefix: localStorage.getItem('promptPrefix') || 'Please analyze the following request carefully and provide a comprehensive solution:',
+        promptSuffix: localStorage.getItem('promptSuffix') || 'Ensure your response is complete, accurate, and includes practical examples where applicable.'
       };
 
       document.getElementById('modelSelect').value = settings.model;
-      document.getElementById('apiKeyInput').value = settings.apiKey;
-      document.getElementById('maxTokensInput').value = settings.maxTokens;
+      document.getElementById('ocrModelSelect').value = settings.ocrModel;
       document.getElementById('primarySystemPrompt').value = settings.primarySystemPrompt;
+      document.getElementById('ocrSystemPrompt').value = settings.ocrSystemPrompt;
       document.getElementById('codeTemplate').value = settings.codeTemplate;
       document.getElementById('additionalInstructions').value = settings.additionalInstructions;
+      document.getElementById('promptPrefix').value = settings.promptPrefix;
+      document.getElementById('promptSuffix').value = settings.promptSuffix;
     }
 
     function saveSettings() {
       localStorage.setItem('selectedModel', document.getElementById('modelSelect').value);
-      localStorage.setItem('apiKey', document.getElementById('apiKeyInput').value);
-      localStorage.setItem('maxTokens', document.getElementById('maxTokensInput').value);
+      localStorage.setItem('selectedOcrModel', document.getElementById('ocrModelSelect').value);
       localStorage.setItem('primarySystemPrompt', document.getElementById('primarySystemPrompt').value);
+      localStorage.setItem('ocrSystemPrompt', document.getElementById('ocrSystemPrompt').value);
       localStorage.setItem('codeTemplate', document.getElementById('codeTemplate').value);
       localStorage.setItem('additionalInstructions', document.getElementById('additionalInstructions').value);
+      localStorage.setItem('promptPrefix', document.getElementById('promptPrefix').value);
+      localStorage.setItem('promptSuffix', document.getElementById('promptSuffix').value);
       showNotification('Settings saved successfully!', 'success');
     }
 
@@ -1030,19 +1025,15 @@ function solution() {
       document.getElementById('saveSettingsBtn').addEventListener('click', saveSettings);
       document.getElementById('settingsToggle').addEventListener('click', toggleSettings);
 
-      // Carousel controls - simple direct rotation
-      document.getElementById('prevCard').addEventListener('click', () => {
-        rotateCarousel(-1);
-      });
-      
-      document.getElementById('nextCard').addEventListener('click', () => {
-        rotateCarousel(1);
-      });
-      
+      // Carousel controls
+      document.getElementById('prevCard').addEventListener('click', () => rotateCarousel(-1));
+      document.getElementById('nextCard').addEventListener('click', () => rotateCarousel(1));
       document.getElementById('applyPromptBtn').addEventListener('click', applyPromptsAndSwitchToChat);
 
       // Chat controls
       document.getElementById('sendButton').addEventListener('click', sendMessage);
+      document.getElementById('attachButton').addEventListener('click', () => document.getElementById('fileInput').click());
+      document.getElementById('fileInput').addEventListener('change', handleFileSelect);
       document.getElementById('userInput').addEventListener('keydown', handleKeyDown);
 
       // Other controls
@@ -1058,7 +1049,7 @@ function solution() {
         });
       });
 
-      // Carousel dots - simple direct navigation
+      // Carousel dots
       document.querySelectorAll('.carousel-dot').forEach(dot => {
         dot.addEventListener('click', (e) => {
           const index = parseInt(e.target.getAttribute('data-index'));
@@ -1066,39 +1057,6 @@ function solution() {
         });
       });
     }
-    
-    // Simple carousel functions with direct animations
-    function setupSimpleCarousel() {
-      // Initial setup
-      updateCarouselPosition();
-      
-      // Add touch handling for mobile/tablet
-      const carousel = document.getElementById('promptCarousel');
-      
-      // Touch events for swiping
-      carousel.addEventListener('touchstart', handleTouchStart, { passive: true });
-      carousel.addEventListener('touchend', handleTouchEnd, { passive: true });
-    }
-    
-    function handleTouchStart(e) {
-      startX = e.touches[0].clientX;
-    }
-    
-    function handleTouchEnd(e) {
-      const endX = e.changedTouches[0].clientX;
-      const diffX = endX - startX;
-      
-      // If swipe distance is significant, rotate carousel
-      if (Math.abs(diffX) > 50) {
-        if (diffX > 0) {
-          // Swipe right - go to previous card
-          rotateCarousel(-1);
-        } else {
-          // Swipe left - go to next card
-          rotateCarousel(1);
-        }
-      }
-    }
 
     // Mode switching
     function switchMode(mode) {
@@ -1125,9 +1083,13 @@ function solution() {
       }
     }
 
-    // Simplified carousel functionality
+    // Carousel functionality
+    function setupCarousel() {
+      updateCarouselPosition();
+    }
+
     function rotateCarousel(direction) {
-      const totalCards = 3;
+      const totalCards = 6;
       currentCarouselIndex = (currentCarouselIndex + direction + totalCards) % totalCards;
       updateCarouselPosition();
     }
@@ -1140,38 +1102,20 @@ function solution() {
     function updateCarouselPosition() {
       const carousel = document.getElementById('promptCarousel');
       const cards = carousel.querySelectorAll('.carousel-card');
+      const dots = document.querySelectorAll('.carousel-dot');
       
-      // Update indicator dots
-      document.querySelectorAll('.carousel-dot').forEach((dot, index) => {
-        dot.classList.toggle('active', index === currentCarouselIndex);
-      });
-      
-      // Apply smooth transition
-      carousel.style.transition = 'transform 0.5s ease-out';
-      
-      // Apply new rotation
-      const newRotation = -currentCarouselIndex * 60;
-      carousel.style.transform = `rotateY(${newRotation}deg)`;
-      
-      // Update each card position
       cards.forEach((card, index) => {
         const angle = (index - currentCarouselIndex) * 60;
         const isActive = index === currentCarouselIndex;
         
-        // Add smooth transition to cards
-        card.style.transition = 'all 0.5s ease-out';
         card.style.transform = `rotateY(${angle}deg) translateZ(500px)`;
         card.style.opacity = isActive ? '1' : '0.6';
         card.style.zIndex = isActive ? '10' : '1';
       });
-      
-      // Remove transition after animation completes for better performance
-      setTimeout(() => {
-        carousel.style.transition = '';
-        cards.forEach(card => {
-          card.style.transition = '';
-        });
-      }, 500);
+
+      dots.forEach((dot, index) => {
+        dot.classList.toggle('active', index === currentCarouselIndex);
+      });
     }
 
     function applyPromptsAndSwitchToChat() {
@@ -1180,6 +1124,58 @@ function solution() {
       showNotification('Prompts applied successfully!', 'success');
     }
 
+    // File handling
+    function setupDropzone() {
+      const dropzone = document.getElementById('dropzone');
+      const chatMode = document.getElementById('chatMode');
+
+      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        chatMode.addEventListener(eventName, preventDefaults, false);
+      });
+
+      function preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+
+      ['dragenter', 'dragover'].forEach(eventName => {
+        chatMode.addEventListener(eventName, () => dropzone.classList.add('active'), false);
+      });
+
+      ['dragleave', 'drop'].forEach(eventName => {
+        chatMode.addEventListener(eventName, () => dropzone.classList.remove('active'), false);
+      });
+
+      chatMode.addEventListener('drop', handleDrop, false);
+    }
+
+    function handleDrop(e) {
+      const dt = e.dataTransfer;
+      const files = dt.files;
+      handleFiles(files);
+    }
+
+    function handleFileSelect(e) {
+      const files = e.target.files;
+      handleFiles(files);
+    }
+
+    function handleFiles(files) {
+      attachedFiles = Array.from(files);
+      updateFileDisplay();
+    }
+
+    function updateFileDisplay() {
+      const fileName = document.getElementById('fileName');
+      if (attachedFiles.length === 0) {
+        fileName.textContent = '';
+      } else if (attachedFiles.length === 1) {
+        fileName.textContent = attachedFiles[0].name;
+      } else {
+        fileName.textContent = `${attachedFiles.length} files selected`;
+      }
+    }
+
     // Chat functionality
     function handleKeyDown(e) {
       if (e.key === 'Enter' && !e.shiftKey) {
@@ -1192,19 +1188,31 @@ function solution() {
       const userInput = document.getElementById('userInput');
       const message = userInput.value.trim();
       
-      if (!message) return;
+      if (!message && attachedFiles.length === 0) return;
       if (isLoading) return;
 
       const chatContainer = document.getElementById('chatContainer');
       
       // Add user message
-      addMessage(message, 'user');
+      if (message) {
+        addMessage(message, 'user');
+      }
+
+      // Add file previews
+      if (attachedFiles.length > 0) {
+        for (const file of attachedFiles) {
+          if (file.type.startsWith('image/')) {
+            const imageUrl = URL.createObjectURL(file);
+            addImageMessage(imageUrl, 'user');
+          }
+        }
+      }
 
       userInput.value = '';
       setLoading(true);
 
       try {
-        const response = await callHuggingFaceAPI(message);
+        const response = await callHuggingFaceAPI(message, attachedFiles);
         addMessage(response, 'ai');
       } catch (error) {
         console.error('Error:', error);
@@ -1212,44 +1220,57 @@ function solution() {
         showNotification('Error: ' + error.message, 'error');
       } finally {
         setLoading(false);
+        attachedFiles = [];
+        updateFileDisplay();
       }
 
       chatContainer.scrollTop = chatContainer.scrollHeight;
     }
 
-    async function callHuggingFaceAPI(message) {
+    async function callHuggingFaceAPI(message, files) {
       const model = document.getElementById('modelSelect').value;
-      const apiKey = document.getElementById('apiKeyInput').value;
-      const maxTokens = parseInt(document.getElementById('maxTokensInput').value);
       const primaryPrompt = document.getElementById('primarySystemPrompt').value;
+      const prefix = document.getElementById('promptPrefix').value;
+      const suffix = document.getElementById('promptSuffix').value;
       
-      if (!apiKey) {
-        throw new Error('Please enter your HuggingFace API key in settings');
+      let fullPrompt = `${primaryPrompt}\n\n${prefix}\n\n${message}\n\n${suffix}`;
+
+      // Handle OCR for images if needed
+      if (files.length > 0) {
+        const ocrModel = document.getElementById('ocrModelSelect').value;
+        if (ocrModel !== 'none') {
+          for (const file of files) {
+            if (file.type.startsWith('image/')) {
+              try {
+                const ocrText = await performOCR(file, ocrModel);
+                fullPrompt += `\n\nExtracted text from image: ${ocrText}`;
+              } catch (error) {
+                console.warn('OCR failed:', error);
+              }
+            }
+          }
+        }
       }
 
-      const fullPrompt = `${primaryPrompt}\n\nUser: ${message}\n\nAssistant:`;
-
       const response = await fetch(`https://api-inference.huggingface.co/models/${model}`, {
         method: 'POST',
         headers: {
-          'Authorization': `Bearer ${apiKey}`,
+          'Authorization': 'Bearer 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', // Replace with actual token
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
           inputs: fullPrompt,
           parameters: {
-            max_new_tokens: maxTokens,
+            max_new_tokens: 2048,
             temperature: 0.7,
             top_p: 0.9,
-            do_sample: true,
-            return_full_text: false
+            do_sample: true
           }
         })
       });
 
       if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+        throw new Error(`HTTP error! status: ${response.status}`);
       }
 
       const data = await response.json();
@@ -1258,7 +1279,27 @@ function solution() {
         throw new Error(data.error);
       }
 
-      return data[0]?.generated_text || 'No response generated';
+      return data[0]?.generated_text || data.choices?.[0]?.message?.content || 'No response generated';
+    }
+
+    async function performOCR(file, ocrModel) {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const response = await fetch(`https://api-inference.huggingface.co/models/${ocrModel}`, {
+        method: 'POST',
+        headers: {
+          'Authorization': 'Bearer hf_your_token_here', // Replace with actual token
+        },
+        body: formData
+      });
+
+      if (!response.ok) {
+        throw new Error(`OCR failed: ${response.status}`);
+      }
+
+      const data = await response.json();
+      return data.generated_text || data.text || 'Could not extract text';
     }
 
     function addMessage(content, sender) {
@@ -1281,6 +1322,21 @@ function solution() {
       chatContainer.scrollTop = chatContainer.scrollHeight;
     }
 
+    function addImageMessage(imageUrl, sender) {
+      const chatContainer = document.getElementById('chatContainer');
+      const messageDiv = document.createElement('div');
+      messageDiv.className = `message ${sender}`;
+      
+      const img = document.createElement('img');
+      img.src = imageUrl;
+      img.className = 'image-preview';
+      img.alt = 'Uploaded image';
+      
+      messageDiv.appendChild(img);
+      chatContainer.appendChild(messageDiv);
+      chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+
     function addCodeTools(preElement) {
       const toolsDiv = document.createElement('div');
       toolsDiv.className = 'code-tools';
@@ -1348,22 +1404,4 @@ function solution() {
     }
   </script>
 </body>
-</html>
-<select id="modelSelect">
-          <option value="Qwen/Qwen2.5-Coder-32B-Instruct">Qwen2.5-Coder 32B (Code/Text)</option>
-          <option value="Qwen/Qwen2-VL-72B-Instruct">Qwen2-VL 72B (Text/Image)</option>
-          <option value="microsoft/Florence-2-large">Florence-2 Large (Text/Image)</option>
-          <option value="mistralai/Mixtral-8x7B-Instruct-v0.1">Mixtral 8x7B (Text)</option>
-          <option value="meta-llama/Llama-2-70b-chat-hf">Llama-2 70B (Chat)</option>
-        </select>
-        <p style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 8px;">
-          💡 Choose a model. Use VL or Florence for image processing.
-        </p>
-      </div>
-      <div class="form-field">
-        <label>👁️ OCR Model (for images):</label>
-        <select id="ocrModelSelect">
-          <option value="none">None</option>
-          <option value="scb10x/typhoon-v1.5x-72b-instruct">Typhoon 1.5x 72B</option>
-          <option value="microsoft/trocr-base-printed">TrOCR Base</option>
-        </select>
+</html>