Update templates/chat-gemma-4-e4b-it.html

templates/chat-gemma-4-e4b-it.html

@@ -6,72 +6,44 @@
     <title>دستیار هوشمند Gemma-4</title>
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap" rel="stylesheet">
     <style>
-        :root {
-            --bg-color: #E5DDD5;
-            --chat-bg: #E5DDD5;
-            --header-bg: #075E54;
-            --user-msg: #DCF8C6;
-            --bot-msg: #FFFFFF;
-            --text-main: #303030;
-            --text-muted: #888888;
-        }
-
+        :root { --bg-color: #E5DDD5; --chat-bg: #E5DDD5; --header-bg: #075E54; --user-msg: #DCF8C6; --bot-msg: #FFFFFF; --text-main: #303030; }
         * { box-sizing: border-box; margin: 0; padding: 0; }
         body, html { font-family: 'Vazirmatn', sans-serif; height: 100%; background-color: var(--bg-color); overflow: hidden; }
-
         .chat-container { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 800px; margin: 0 auto; background: var(--chat-bg); box-shadow: 0 0 20px rgba(0,0,0,0.1); }
-        
-        /* Header */
         .chat-header { background: var(--header-bg); color: white; padding: 15px 20px; display: flex; align-items: center; gap: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 10; }
         .avatar { width: 45px; height: 45px; background: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 24px; }
         .header-info h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 2px; }
         .header-info p { font-size: 0.8rem; color: #d1d1d1; }
-
-        /* Chat Area */
         .chat-box { flex-grow: 1; padding: 20px 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); }
-        
         .message-row { display: flex; flex-direction: column; max-width: 85%; animation: fadeIn 0.3s ease; }
         .message-row.user { align-self: flex-start; }
         .message-row.bot { align-self: flex-end; }
-
         .message-bubble { padding: 12px 15px; border-radius: 18px; font-size: 0.95rem; line-height: 1.6; color: var(--text-main); position: relative; word-wrap: break-word; }
         .message-row.user .message-bubble { background: var(--user-msg); border-top-right-radius: 4px; box-shadow: 1px 1px 3px rgba(0,0,0,0.08); }
         .message-row.bot .message-bubble { background: var(--bot-msg); border-top-left-radius: 4px; box-shadow: -1px 1px 3px rgba(0,0,0,0.08); }
-
         .file-preview-in-chat { max-width: 100%; border-radius: 12px; margin-bottom: 8px; }
-
-        /* Typing Indicator */
         .typing-indicator { display: none; padding: 12px 15px; background: var(--bot-msg); border-radius: 18px; border-top-left-radius: 4px; align-self: flex-end; box-shadow: -1px 1px 3px rgba(0,0,0,0.08); margin-top: 5px;}
         .typing-indicator span { display: inline-block; width: 6px; height: 6px; background-color: #90949C; border-radius: 50%; margin: 0 2px; animation: bounce 1.3s linear infinite; }
         .typing-indicator span:nth-child(2) { animation-delay: -1.1s; }
         .typing-indicator span:nth-child(3) { animation-delay: -0.9s; }
-
-        /* Input Area */
         .input-area { background: #f0f0f0; padding: 10px 15px; display: flex; flex-direction: column; z-index: 10; }
-        
         .attachment-preview { display: none; align-items: center; background: white; padding: 8px 12px; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); gap: 10px;}
         .attachment-preview img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
         .attachment-preview .file-info { flex-grow: 1; font-size: 0.85rem; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .remove-file { background: #ff4d4d; color: white; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 14px;}
-
         .input-wrapper { display: flex; align-items: flex-end; gap: 10px; }
         .attach-btn { background: transparent; border: none; color: #888; font-size: 24px; cursor: pointer; padding: 5px; transition: color 0.3s; display: flex; align-items: center;}
         .attach-btn:hover { color: var(--header-bg); }
         #file-input { display: none; }
-        
         textarea { flex-grow: 1; border: none; border-radius: 20px; padding: 12px 15px; font-family: 'Vazirmatn', sans-serif; font-size: 0.95rem; resize: none; max-height: 120px; overflow-y: auto; outline: none; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
-        
         .send-btn { background: var(--header-bg); color: white; border: none; border-radius: 50%; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: transform 0.2s, background 0.3s; box-shadow: 0 2px 5px rgba(0,0,0,0.2); flex-shrink: 0;}
         .send-btn:hover { background: #054c44; transform: scale(1.05); }
         .send-btn:disabled { background: #a5c0bd; cursor: not-allowed; transform: none; }
         .send-btn svg { width: 20px; height: 20px; transform: translateX(-2px); }
-
         @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
         @keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
-
-        /* مارک‌داون ساده برای پیام‌ها */
         .message-bubble b, .message-bubble strong { font-weight: 700; }
-        .message-bubble code { background: #f4f4f4; padding: 2px 5px; border-radius: 4px; font-family: monospace; font-size: 0.9rem; }
+        .message-bubble code { background: #f4f4f4; padding: 2px 5px; border-radius: 4px; font-family: monospace; font-size: 0.9rem; direction: ltr; display: inline-block; white-space: pre-wrap; word-wrap: break-word; max-width: 100%;}
     </style>
 </head>
 <body>
@@ -110,9 +82,7 @@
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
             </button>
             <input type="file" id="file-input" accept="image/*,audio/*,video/*">
-            
             <textarea id="text-input" rows="1" placeholder="پیام خود را بنویسید..."></textarea>
-            
             <button class="send-btn" id="send-btn">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
             </button>
@@ -129,7 +99,6 @@
     const typingIndicator = document.getElementById('typing-indicator');
     const statusText = document.getElementById('status-text');
     
-    // Attachment UI
     const attachmentPreview = document.getElementById('attachment-preview');
     const previewImg = document.getElementById('preview-img');
     const fileIcon = document.getElementById('file-icon');
@@ -137,15 +106,12 @@
     const removeFileBtn = document.getElementById('remove-file-btn');
 
     let currentFile = null;
-    let pollTimer = null;
 
-    // تنظیم ارتفاع اتوماتیک Textarea
     textInput.addEventListener('input', function() {
         this.style.height = 'auto';
         this.style.height = (this.scrollHeight < 120 ? this.scrollHeight : 120) + 'px';
     });
 
-    // مدیریت فایل
     attachBtn.addEventListener('click', () => fileInput.click());
 
     fileInput.addEventListener('change', function() {
@@ -174,7 +140,6 @@
         if (previewImg.src) URL.revokeObjectURL(previewImg.src);
     });
 
-    // اضافه کردن پیام به صفحه
     function appendMessage(text, isUser, fileUrl = null, isImage = false) {
         const row = document.createElement('div');
         row.className = `message-row ${isUser ? 'user' : 'bot'}`;
@@ -185,61 +150,17 @@
             else mediaHtml = `<div style="background:rgba(0,0,0,0.1); padding:8px; border-radius:8px; margin-bottom:8px;">📎 فایل ضمیمه شد</div>`;
         }
 
-        // تبدیل متن به فرمت خوانا (بولد کردن، خطوط جدید)
         const formattedText = text.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>').replace(/\n/g, '<br>');
-
         row.innerHTML = `<div class="message-bubble">${mediaHtml}${formattedText}</div>`;
         chatBox.appendChild(row);
         chatBox.scrollTop = chatBox.scrollHeight;
-        return row.querySelector('.message-bubble'); // برای استفاده در استریم
+        return row.querySelector('.message-bubble'); 
     }
 
-    // شبیه‌سازی افکت استریم (تایپ شدن)
-    function streamTextEffect(bubbleElement, fullText) {
-        bubbleElement.innerHTML = '';
-        const formattedText = fullText.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>').replace(/\n/g, '<br>');
-        
-        // تقسیم متن بر اساس تگ‌های HTML تا تگ‌ها تایپ نشوند
-        const parts = formattedText.split(/(<[^>]*>)/);
-        let i = 0;
-        
-        function typePart() {
-            if (i < parts.length) {
-                const part = parts[i];
-                if (part.startsWith('<')) {
-                    // اگر تگ HTML است، بلافاصله اضافه کن
-                    bubbleElement.innerHTML += part;
-                    i++;
-                    typePart();
-                } else {
-                    // اگر متن است، کاراکتر به کاراکتر تایپ کن
-                    let charIndex = 0;
-                    function typeChar() {
-                        if (charIndex < part.length) {
-                            bubbleElement.innerHTML += part.charAt(charIndex);
-                            charIndex++;
-                            chatBox.scrollTop = chatBox.scrollHeight;
-                            setTimeout(typeChar, 15); // سرعت تایپ
-                        } else {
-                            i++;
-                            typePart();
-                        }
-                    }
-                    typeChar();
-                }
-            } else {
-                statusText.textContent = "آماده پاسخگویی به شما";
-            }
-        }
-        typePart();
-    }
-
-    // ارسال درخواست
     sendBtn.addEventListener('click', async () => {
         const text = textInput.value.trim();
         if (!text && !currentFile) return;
 
-        // نمایش پیام کاربر
         let fileUrlForUI = null;
         let isImage = false;
         if (currentFile) {
@@ -248,7 +169,6 @@
         }
         appendMessage(text, true, fileUrlForUI, isImage);
 
-        // ریست کردن ورودی‌ها
         const fileToSend = currentFile;
         const textToSend = text;
         
@@ -256,80 +176,76 @@
         textInput.style.height = 'auto';
         removeFileBtn.click();
         
-        // قفل کردن فرم
         sendBtn.disabled = true;
         textInput.disabled = true;
         attachBtn.disabled = true;
         typingIndicator.style.display = 'block';
         chatBox.scrollTop = chatBox.scrollHeight;
-        statusText.textContent = "در حال تفکر...";
+        statusText.textContent = "در حال اتصال به هوش مصنوعی...";
 
         try {
             const formData = new FormData();
             formData.append('prompt', textToSend);
             if (fileToSend) formData.append('file', fileToSend);
 
-            // ارسال به Flask App شما
-            const response = await fetch('/api/chat', {
-                method: 'POST',
-                body: formData
-            });
-
+            const response = await fetch('/api/chat', { method: 'POST', body: formData });
             const data = await response.json();
             
             if (data.status === 'success') {
-                statusText.textContent = "سرور ابری در حال پردازش...";
+                const botBubble = appendMessage('', false);
+                let isFirstChunk = true;
+
+                const eventSource = new EventSource(`/api/stream_chat/${data.run_id}`);
                 
-                // پیگیری وضعیت از گیت هاب
-                pollTimer = setInterval(async () => {
-                    try {
-                        const statusRes = await fetch(`/api/status/${data.run_id}`);
-                        const statusData = await statusRes.json();
-                        
-                        if (statusData.status === 'ready' && statusData.url.endsWith('.txt')) {
-                            clearInterval(pollTimer);
-                            
-                            // دریافت متن پاسخ
-                            const txtRes = await fetch(statusData.url);
-                            const botReplyText = await txtRes.text();
-                            
+                eventSource.onmessage = function(event) {
+                    if (event.data === "DONE") {
+                        eventSource.close();
+                        statusText.textContent = "آماده پاسخگویی به شما";
+                        sendBtn.disabled = false; textInput.disabled = false; attachBtn.disabled = false;
+                        textInput.focus();
+                    } else {
+                        if (isFirstChunk) {
                             typingIndicator.style.display = 'none';
                             statusText.textContent = "در حال نوشتن...";
-                            
-                            // ساخت حباب پیام ربات خالی و استریم کردن متن داخل آن
-                            const botBubble = appendMessage('', false);
-                            streamTextEffect(botBubble, botReplyText);
-
-                            // باز کردن قفل فرم
-                            sendBtn.disabled = false;
-                            textInput.disabled = false;
-                            attachBtn.disabled = false;
-                            textInput.focus();
+                            isFirstChunk = false;
                         }
-                    } catch (e) {
-                        console.error('Polling error', e);
+                        try {
+                            const parsed = JSON.parse(event.data);
+                            const formattedText = parsed.text.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>').replace(/\n/g, '<br>');
+                            botBubble.innerHTML = formattedText;
+                            chatBox.scrollTop = chatBox.scrollHeight;
+                        } catch (e) {}
                     }
-                }, 5000);
+                };
+                
+                eventSource.onerror = function() {
+                    eventSource.close();
+                    typingIndicator.style.display = 'none';
+                    statusText.textContent = "آماده پاسخگویی به شما";
+                    
+                    // بررسی اینکه اگر کادر خالی بود خطای قطع شدن بنویسد
+                    if (botBubble.innerHTML === '' || botBubble.innerHTML === '<br>') {
+                        botBubble.innerHTML = "⚠️ خطای شبکه: اتصال استریم با سرور قطع شد.";
+                    } else {
+                        botBubble.innerHTML += "<br><br>⚠️ <i>(ارتباط استریم با سرور قطع شد)</i>";
+                    }
+                    
+                    sendBtn.disabled = false; textInput.disabled = false; attachBtn.disabled = false;
+                };
             } else {
-                throw new Error("خطا در ارسال به سرور");
+                throw new Error(data.message || "خطای ناشناخته از سمت سرور");
             }
         } catch (error) {
             typingIndicator.style.display = 'none';
             statusText.textContent = "آماده پاسخگویی به شما";
-            appendMessage(`خطا در ارتباط: ${error.message}`, false);
-            sendBtn.disabled = false;
-            textInput.disabled = false;
-            attachBtn.disabled = false;
+            appendMessage(`⚠️ خطا: ${error.message}`, false);
+            sendBtn.disabled = false; textInput.disabled = false; attachBtn.disabled = false;
         }
     });
 
     textInput.addEventListener('keypress', function (e) {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            sendBtn.click();
-        }
+        if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendBtn.click(); }
     });
 </script>
-
 </body>
 </html>