Update index.html

index.html

@@ -303,8 +303,8 @@
             transition: all 0.3s ease; color: var(--text-secondary);
         }
         .chip:hover {
-            background: var(--accent-orange); color: var(--bg-primary);
-            transform: translateY(-2px); box-shadow: 0 6px 15px var(--shadow-color-orange);
+            background: var(--accent-secondary); color: var(--bg-primary);
+            transform: translateY(-2px); box-shadow: 0 6px 15px rgba(255, 153, 51, 0.3);
         }
 
         .floating-buttons {
@@ -319,8 +319,8 @@
             transition: all 0.3s ease; padding: 0; color: var(--text-primary);
         }
         .floating-btn:hover {
-            background: var(--accent-green); color: var(--bg-primary);
-            transform: scale(1.1); box-shadow: 0 0 15px var(--accent-green);
+            background: var(--accent-primary); color: var(--bg-primary);
+            transform: scale(1.1); box-shadow: 0 0 15px var(--accent-primary);
         }
 
         #chatMode { display: none; flex: 1; flex-direction: column; }
@@ -401,7 +401,7 @@
                 <div class="input-container">
                     <button id="attachButton" class="input-btn"><span class="material-icons">attach_file</span></button>
                     <input type="file" id="fileInput" multiple accept="image/*" style="display: none;">
-                    <span id="fileName" style="font-size: 0.8rem; color: var(--accent-green); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100px;"></span>
+                    <span id="fileName" style="font-size: 0.8rem; color: var(--accent-primary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100px;"></span>
                     <textarea id="userInput" placeholder="พิมพ์ข้อความ..."></textarea>
                     <button id="sendButton" class="input-btn"><span class="material-icons">send</span></button>
                 </div>
@@ -412,13 +412,15 @@
     <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>
-        const HUGGINGFACE_TOKEN = "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"; // <<< !!! ใส่ Hugging Face Token ของคุณที่นี่ !!!
+        // Set up the Hugging Face API Token
+        const HUGGINGFACE_TOKEN = "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";
 
         let attachedFiles = [];
         let currentCarouselIndex = 0;
         let isLoading = false;
         let carouselElement;
 
+        // Default prompts for the carousel
         const prompts = [
             { id: 'primarySystemPrompt', label: '🎯 Primary System Prompt', value: '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.' },
             { id: 'ocrSystemPrompt', label: '👁️ OCR System Prompt', value: 'Extract all text from the provided image clearly and accurately. Preserve formatting, structure, and layout when possible. If text is unclear, indicate uncertain parts.' },
@@ -437,6 +439,7 @@
             switchMode('carousel'); // Start with carousel
         });
 
+        // Populates the carousel with prompt cards and navigation dots
         function populateCarousel() {
             const carousel = document.getElementById('promptCarousel');
             const indicator = document.getElementById('carouselIndicator');
@@ -466,12 +469,14 @@
              carousel.dataset.translateZ = translateZ; // Store for later use
         }
 
+        // Loads saved settings from local storage
         function loadSettings() {
             document.getElementById('modelSelect').value = localStorage.getItem('selectedModel') || 'Qwen/Qwen2.5-Coder-32B-Instruct';
             document.getElementById('ocrModelSelect').value = localStorage.getItem('selectedOcrModel') || 'none';
-            // Values are loaded during populateCarousel now
+            // Prompt values are loaded directly in populateCarousel
         }
 
+        // Saves current settings to local storage
         function saveSettings() {
             localStorage.setItem('selectedModel', document.getElementById('modelSelect').value);
             localStorage.setItem('selectedOcrModel', document.getElementById('ocrModelSelect').value);
@@ -479,6 +484,7 @@
             showNotification('บันทึกแล้ว!', 'success');
         }
 
+        // Sets up all event listeners for interactive elements
         function setupEventListeners() {
             document.getElementById('carouselModeBtn').addEventListener('click', () => switchMode('carousel'));
             document.getElementById('chatModeBtn').addEventListener('click', () => switchMode('chat'));
@@ -520,6 +526,7 @@
             }
         }
 
+        // Switches between carousel and chat modes
         function switchMode(mode) {
             const carouselMode = document.getElementById('carouselMode');
             const chatMode = document.getElementById('chatMode');
@@ -545,17 +552,20 @@
             }
         }
 
+        // Rotates the carousel by one card in the given direction
         function rotateCarousel(direction) {
             const totalCards = prompts.length;
             currentCarouselIndex = (currentCarouselIndex + direction + totalCards) % totalCards;
             updateCarouselPosition();
         }
 
+        // Jumps to a specific carousel card by index
         function goToCarouselIndex(index) {
             currentCarouselIndex = index;
             updateCarouselPosition();
         }
 
+        // Updates the visual position of the carousel based on currentCarouselIndex
         function updateCarouselPosition() {
             const totalCards = prompts.length;
             const anglePerCard = 360 / totalCards;
@@ -573,17 +583,20 @@
             });
         }
 
+        // Saves prompts and switches to chat mode
         function applyPromptsAndSwitchToChat() {
             saveSettings();
             switchMode('chat');
             showNotification('ใช้ Prompt แล้ว!', 'success');
         }
 
+        // Handles file selection for attachments
         function handleFileSelect(e) {
             attachedFiles = Array.from(e.target.files);
             updateFileDisplay();
         }
 
+        // Updates the displayed file name(s)
         function updateFileDisplay() {
             const fileNameEl = document.getElementById('fileName');
             if (attachedFiles.length === 0) fileNameEl.textContent = '';
@@ -591,6 +604,7 @@
             else fileNameEl.textContent = `${attachedFiles.length} ไฟล์`;
         }
 
+        // Handles key presses in the user input field
         function handleKeyDown(e) {
             if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
@@ -598,22 +612,23 @@
             }
         }
 
+        // Sends a message to the Hugging Face API
        async function sendMessage() {
             const userInput = document.getElementById('userInput');
             const message = userInput.value.trim();
-            if (!message && attachedFiles.length === 0 || isLoading) return;
+            if (!message && attachedFiles.length === 0 || isLoading) return; // Prevent sending empty messages or while loading
 
             setLoading(true);
             const chatContainer = document.getElementById('chatContainer');
             const userMessage = message;
-            const currentFiles = [...attachedFiles];
+            const currentFiles = [...attachedFiles]; // Snapshot files to send
 
-            userInput.value = '';
-            attachedFiles = [];
+            userInput.value = ''; // Clear input
+            attachedFiles = []; // Clear attached files
             updateFileDisplay();
 
             if (userMessage) addMessage(userMessage, 'user');
-            currentFiles.forEach(file => addImageMessage(URL.createObjectURL(file), 'user'));
+            currentFiles.forEach(file => addImageMessage(URL.createObjectURL(file), 'user')); // Display attached images
             scrollToBottom(chatContainer);
 
             try {
@@ -629,24 +644,40 @@
             }
         }
 
+        // Calls the Hugging Face Inference API
         async function callHuggingFaceAPI(message, files) {
             const model = document.getElementById('modelSelect').value;
             const ocrModel = document.getElementById('ocrModelSelect').value;
             let fullPrompt = `${localStorage.getItem('primarySystemPrompt')}\n\n${localStorage.getItem('promptPrefix')}\n\nUser: ${message}`;
 
-            if (files.length > 0 && ocrModel !== 'none' && (model.includes('VL') || model.includes('Florence'))) {
-                 try {
-                    const ocrText = await performOCR(files[0], ocrModel);
-                    fullPrompt += `\n\n[Image Content: ${ocrText}]`;
-                } catch (error) {
-                    fullPrompt += `\n\n[Image attached, OCR failed]`;
+            if (files.length > 0) {
+                const imageData = await Promise.all(files.map(file => {
+                    return new Promise((resolve) => {
+                        const reader = new FileReader();
+                        reader.onloadend = () => resolve(reader.result.split(',')[1]); // Get base64 content
+                        reader.readAsDataURL(file);
+                    });
+                }));
+
+                for (let i = 0; i < imageData.length; i++) {
+                    fullPrompt += `\n\nImage:\n<img src="data:${files[i].type};base64,${imageData[i]}"/>`;
+
+                    if (ocrModel !== 'none') {
+                        try {
+                            const ocrText = await performOCR(files[i], ocrModel);
+                            fullPrompt += `\n\n[Image OCR Content: ${ocrText}]`;
+                        } catch (ocrError) {
+                            console.error(`OCR failed for file ${files[i].name}:`, ocrError);
+                            fullPrompt += `\n\n[Image attached, OCR failed for this image]`;
+                        }
+                    }
                 }
-            } else if (files.length > 0) {
-                 fullPrompt += `\n\n[Image attached]`;
             }
 
             fullPrompt += `\n\n${localStorage.getItem('promptSuffix')}\n\nAI:`;
 
+            // Adjust payload for models that support multi-modal input if necessary.
+            // For now, we're encoding images into the prompt itself for simpler integration.
             const payload = {
                 inputs: fullPrompt,
                 parameters: { max_new_tokens: 2048, temperature: 0.6, top_p: 0.9 }
@@ -659,27 +690,32 @@
             });
 
             if (!response.ok) {
-                const errorBody = await response.text();
-                throw new Error(`HTTP ${response.status}: ${errorBody}`);
+                const errorBody = await response.json(); // Attempt to parse JSON error
+                throw new Error(`HTTP ${response.status}: ${JSON.stringify(errorBody.error || errorBody)}`);
             }
             const data = await response.json();
             if (data.error) throw new Error(data.error);
             let text = data[0]?.generated_text || 'No response.';
+            // Remove the prompt from the generated text, as the API often returns the full input + output
             return text.replace(fullPrompt, '').trim();
         }
 
+        // Performs OCR on an image file using a specified OCR model
         async function performOCR(file, ocrModel) {
             const response = await fetch(`https://api-inference.huggingface.co/models/${ocrModel}`, {
                 method: 'POST',
                 headers: { 'Authorization': `Bearer ${HUGGINGFACE_TOKEN}` },
                 body: file
             });
-            if (!response.ok) throw new Error(`OCR failed: ${response.statusText}`);
+            if (!response.ok) {
+                const errorBody = await response.json();
+                throw new Error(`OCR failed: HTTP ${response.status}: ${JSON.stringify(errorBody.error || errorBody)}`);
+            }
             const data = await response.json();
             return data[0]?.generated_text || 'Could not extract text.';
         }
 
-
+        // Adds a text message to the chat display
         function addMessage(content, sender, isError = false) {
             const chatContainer = document.getElementById('chatContainer');
             const messageDiv = document.createElement('div');
@@ -687,9 +723,12 @@
             if (isError) messageDiv.style.border = '1px solid var(--error)';
 
             if (sender === 'ai') {
+                // Use marked.js for Markdown parsing
                 messageDiv.innerHTML = marked.parse(content);
                 messageDiv.querySelectorAll('pre code').forEach(block => {
+                    // Highlight code blocks
                     hljs.highlightElement(block);
+                    // Add copy button to code blocks
                     addCodeTools(block.parentElement);
                 });
             } else {
@@ -698,6 +737,7 @@
             chatContainer.appendChild(messageDiv);
         }
 
+        // Adds an image message to the chat display
         function addImageMessage(imageUrl, sender) {
             const chatContainer = document.getElementById('chatContainer');
             const messageDiv = document.createElement('div');
@@ -706,6 +746,7 @@
             chatContainer.appendChild(messageDiv);
         }
 
+        // Adds copy and paste buttons to code blocks
          function addCodeTools(preElement) {
             const toolsDiv = document.createElement('div');
             toolsDiv.className = 'code-tools';
@@ -720,7 +761,7 @@
             preElement.appendChild(toolsDiv);
         }
 
-
+        // Sets the loading state of the UI
         function setLoading(loading) {
             isLoading = loading;
             const sendButton = document.getElementById('sendButton');
@@ -728,6 +769,7 @@
             sendButton.disabled = loading;
         }
 
+        // Toggles fullscreen mode
         function toggleFullscreen() {
             const icon = document.querySelector('#fullscreenToggle .material-icons');
             if (!document.fullscreenElement) {
@@ -739,16 +781,18 @@
             }
         }
 
+        // Displays a temporary notification (can be enhanced with styled toasts)
         function showNotification(message, type = 'success') {
            // Simple alert for now, can be replaced with a styled div
            console.log(`Notification (${type}): ${message}`);
-           // alert(`(${type}) ${message}`);
+           // alert(`(${type}) ${message}`); // Uncomment for actual alerts, or implement a proper notification UI
         }
 
+        // Scrolls an element to its bottom
         function scrollToBottom(element) {
             element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
         }
 
     </script>
 </body>
-</html>
+</html>