Update index.html

index.html

@@ -31,19 +31,27 @@
             color: white;
             cursor: pointer;
         }
+        button:hover {
+            background-color: #0066cc;
+        }
         button:disabled {
             background-color: #ccc;
+            cursor: not-allowed;
         }
         .messages {
             display: flex;
             flex-direction: column;
             gap: 10px;
             margin-top: 20px;
+            max-height: 400px;
+            overflow-y: auto;
+            padding: 10px;
         }
         .message {
             padding: 10px;
             border-radius: 10px;
             max-width: 80%;
+            word-wrap: break-word;
         }
         .user-message {
             background-color: #e3f2fd;
@@ -56,6 +64,23 @@
         #status {
             margin-top: 10px;
             color: #666;
+            padding: 10px;
+            border-radius: 5px;
+        }
+        .error {
+            color: #d32f2f;
+            background-color: #ffebee;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+        }
+        #textInput {
+            width: 100%;
+            padding: 10px;
+            margin-top: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-size: 16px;
         }
     </style>
 </head>
@@ -66,20 +91,42 @@
             <button id="stopRecording" disabled>أوقف التسجيل</button>
         </div>
         <div id="status">جاهز للتسجيل...</div>
+        <textarea id="textInput" placeholder="أو اكتب رسالتك هنا..." rows="3"></textarea>
+        <button id="sendText">إرسال النص</button>
         <div class="messages" id="messages"></div>
     </div>
 
     <script>
         const API_URL = 'https://8o1mzdgh9f40t4-7777.proxy.runpod.net/proxy/8000/chat';
-        let mediaRecorder;
+        let mediaRecorder = null;
         let audioChunks = [];
 
         const startButton = document.getElementById('startRecording');
         const stopButton = document.getElementById('stopRecording');
         const statusDiv = document.getElementById('status');
         const messagesDiv = document.getElementById('messages');
+        const textInput = document.getElementById('textInput');
+        const sendTextButton = document.getElementById('sendText');
+
+        // التحقق من دعم المتصفح للميزات المطلوبة
+        function checkBrowserSupport() {
+            if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+                showError('متصفحك لا يدعم تسجيل الصوت. الرجاء استخدام متصفح حديث.');
+                startButton.disabled = true;
+                return false;
+            }
+            if (!window.SpeechRecognition && !window.webkitSpeechRecognition) {
+                showError('متصفحك لا يدعم التعرف على الكلام. الرجاء استخدام Google Chrome.');
+                startButton.disabled = true;
+                return false;
+            }
+            return true;
+        }
+
+        function showError(message) {
+            statusDiv.innerHTML = `<div class="error">${message}</div>`;
+        }
 
-        // إضافة رسالة إلى المحادثة
         function addMessage(text, isUser) {
             const messageDiv = document.createElement('div');
             messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
@@ -88,16 +135,20 @@
             messagesDiv.scrollTop = messagesDiv.scrollHeight;
         }
 
-        // تحويل النص إلى كلام
         async function speakText(text) {
-            const utterance = new SpeechSynthesisUtterance(text);
-            utterance.lang = 'ar-SA';
-            speechSynthesis.speak(utterance);
+            try {
+                const utterance = new SpeechSynthesisUtterance(text);
+                utterance.lang = 'ar-SA';
+                speechSynthesis.speak(utterance);
+            } catch (error) {
+                console.error('Error speaking:', error);
+                showError('حدث خطأ في تحويل النص إلى كلام');
+            }
         }
 
-        // إرسال النص إلى النموذج
         async function sendToModel(text) {
             try {
+                statusDiv.textContent = 'جارِ إرسال الرسالة...';
                 const response = await fetch(API_URL, {
                     method: 'POST',
                     headers: {
@@ -106,16 +157,31 @@
                     body: JSON.stringify({ message: text })
                 });
                 
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                
                 const data = await response.json();
                 const botResponse = data.response || 'عذراً، حدث خطأ في الاستجابة';
                 addMessage(botResponse, false);
                 speakText(botResponse);
+                statusDiv.textContent = 'جاهز للتسجيل...';
             } catch (error) {
                 console.error('Error:', error);
-                addMessage('عذراً، حدث خطأ في الاتصال بالنموذج', false);
+                showError('حدث خطأ في الاتصال بالنموذج. الرجاء المحاولة مرة أخرى.');
             }
         }
 
+        // إرسال النص المكتوب
+        sendTextButton.onclick = () => {
+            const text = textInput.value.trim();
+            if (text) {
+                addMessage(text, true);
+                sendToModel(text);
+                textInput.value = '';
+            }
+        };
+
         startButton.onclick = async () => {
             try {
                 const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
@@ -129,8 +195,8 @@
                     const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                     audioChunks = [];
                     
-                    // تحويل الصوت إلى نص باستخدام Web Speech API
-                    const recognition = new webkitSpeechRecognition();
+                    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+                    const recognition = new SpeechRecognition();
                     recognition.lang = 'ar-SA';
                     recognition.continuous = false;
                     recognition.interimResults = false;
@@ -143,7 +209,7 @@
 
                     recognition.onerror = (event) => {
                         console.error('Speech recognition error:', event.error);
-                        statusDiv.textContent = 'حدث خطأ في التعرف على الكلام';
+                        showError('حدث خطأ في التعرف على الكلام');
                     };
 
                     recognition.start();
@@ -155,17 +221,30 @@
                 statusDiv.textContent = 'جارِ التسجيل...';
             } catch (error) {
                 console.error('Error:', error);
-                statusDiv.textContent = 'حدث خطأ في الوصول إلى الميكروفون';
+                showError('حدث خطأ في الوصول إلى الميكروفون. تأكد من السماح للموقع باستخدام الميكروفون.');
             }
         };
 
         stopButton.onclick = () => {
-            mediaRecorder.stop();
-            mediaRecorder.stream.getTracks().forEach(track => track.stop());
-            startButton.disabled = false;
-            stopButton.disabled = true;
-            statusDiv.textContent = 'تم إيقاف التسجيل، جارِ معالجة الكلام...';
+            if (mediaRecorder && mediaRecorder.state === 'recording') {
+                mediaRecorder.stop();
+                mediaRecorder.stream.getTracks().forEach(track => track.stop());
+                startButton.disabled = false;
+                stopButton.disabled = true;
+                statusDiv.textContent = 'تم إيقاف التسجيل، جارِ معالجة الكلام...';
+            }
         };
+
+        // التحقق من دعم المتصفح عند تحميل الصفحة
+        window.onload = checkBrowserSupport;
+
+        // إضافة دعم للإرسال بضغط Enter
+        textInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendTextButton.click();
+            }
+        });
     </script>
 </body>
 </html>