Spaces:

joermd
/

test11

Running

App Files Files Community

joermd commited on Dec 27, 2024

Commit

27fbe7f

verified ·

1 Parent(s): 20709bb

Update index.html

Browse files

Files changed (1) hide show

index.html +79 -201

index.html CHANGED Viewed

@@ -3,248 +3,126 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>تطبيق المحادثة الصوتية</title>
     <style>
         body {
             font-family: Arial, sans-serif;
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            background-color: #f0f2f5;
         }
-        .chat-container {
-            background-color: white;
-            border-radius: 10px;
             padding: 20px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-        }
-        .controls {
-            display: flex;
-            gap: 10px;
-            margin: 20px 0;
         }
         button {
-            padding: 10px 20px;
             border: none;
             border-radius: 5px;
-            background-color: #0084ff;
-            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;
-            align-self: flex-end;
-        }
-        .bot-message {
-            background-color: #f5f5f5;
-            align-self: flex-start;
-        }
-        #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>
 <body>
-    <div class="chat-container">
-        <div class="controls">
-            <button id="startRecording">ابدأ التسجيل</button>
-            <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 = 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'}`;
-            messageDiv.textContent = text;
-            messagesDiv.appendChild(messageDiv);
-            messagesDiv.scrollTop = messagesDiv.scrollHeight;
-        }
-        async function speakText(text) {
-            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: {
-                        'Content-Type': 'application/json',
                     },
                     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);
-                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 });
-                mediaRecorder = new MediaRecorder(stream);
-                mediaRecorder.ondataavailable = (event) => {
-                    audioChunks.push(event.data);
-                };
-                mediaRecorder.onstop = async () => {
-                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-                    audioChunks = [];
-                    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-                    const recognition = new SpeechRecognition();
-                    recognition.lang = 'ar-SA';
-                    recognition.continuous = false;
-                    recognition.interimResults = false;
-                    recognition.onresult = (event) => {
-                        const text = event.results[0][0].transcript;
-                        addMessage(text, true);
-                        sendToModel(text);
-                    };
-                    recognition.onerror = (event) => {
-                        console.error('Speech recognition error:', event.error);
-                        showError('حدث خطأ في التعرف على الكلام');
-                    };
-                    recognition.start();
-                };
-                mediaRecorder.start();
-                startButton.disabled = true;
-                stopButton.disabled = false;
-                statusDiv.textContent = 'جارِ التسجيل...';
-            } catch (error) {
-                console.error('Error:', error);
-                showError('حدث خطأ في الوصول إلى الميكروفون. تأكد من السماح للموقع باستخدام الميكروفون.');
-            }
         };
-        stopButton.onclick = () => {
-            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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>محادثة صوتية</title>
     <style>
         body {
             font-family: Arial, sans-serif;
+            margin: 20px;
+            background: #f0f2f5;
         }
+        .container {
+            max-width: 600px;
+            margin: 0 auto;
+            background: white;
             padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
         button {
+            background: #0084ff;
+            color: white;
             border: none;
+            padding: 10px 20px;
             border-radius: 5px;
             cursor: pointer;
+            margin: 5px;
         }
         button:disabled {
+            background: #ccc;
         }
+        #transcription, #response {
+            margin: 20px 0;
+            padding: 15px;
             border-radius: 5px;
+            background: #f8f9fa;
         }
+        .label {
+            font-weight: bold;
+            color: #666;
+            margin-bottom: 5px;
         }
     </style>
 </head>
 <body>
+    <div class="container">
+        <button id="startBtn">ابدأ التحدث</button>
+        <button id="stopBtn" disabled>توقف</button>
+        <div id="transcription">
+            <div class="label">ما قلته:</div>
+            <div id="spokenText"></div>
+        </div>
+        <div id="response">
+            <div class="label">رد النموذج:</div>
+            <div id="modelResponse"></div>
         </div>
     </div>
     <script>
         const API_URL = 'https://8o1mzdgh9f40t4-7777.proxy.runpod.net/proxy/8000/chat';
+        const startBtn = document.getElementById('startBtn');
+        const stopBtn = document.getElementById('stopBtn');
+        const spokenText = document.getElementById('spokenText');
+        const modelResponse = document.getElementById('modelResponse');
+        // إعداد التعرف على الكلام
+        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+        recognition.lang = 'ar-SA';
+        recognition.continuous = false;
+        recognition.interimResults = false;
+        recognition.onresult = async (event) => {
+            const text = event.results[0][0].transcript;
+            spokenText.textContent = text;
             try {
+                // إرسال النص إلى النموذج
                 const response = await fetch(API_URL, {
                     method: 'POST',
                     headers: {
+                        'Content-Type': 'application/json'
                     },
                     body: JSON.stringify({ message: text })
                 });
                 const data = await response.json();
+                const botReply = data.response;
+                modelResponse.textContent = botReply;
+                // تحويل الرد إلى صوت
+                const utterance = new SpeechSynthesisUtterance(botReply);
+                utterance.lang = 'ar-SA';
+                speechSynthesis.speak(utterance);
+            } catch (error) {
+                modelResponse.textContent = 'حدث خطأ في الاتصال بالنموذج';
             }
         };
+        recognition.onerror = (event) => {
+            console.error('خطأ:', event.error);
+            spokenText.textContent = 'حدث خطأ في التعرف على الكلام';
         };
+        startBtn.onclick = () => {
+            recognition.start();
+            startBtn.disabled = true;
+            stopBtn.disabled = false;
+            spokenText.textContent = '';
+            modelResponse.textContent = '';
         };
+        stopBtn.onclick = () => {
+            recognition.stop();
+            startBtn.disabled = false;
+            stopBtn.disabled = true;
+        };
+        // عند انتهاء التعرف على الكلام
+        recognition.onend = () => {
+            startBtn.disabled = false;
+            stopBtn.disabled = true;
+        };
     </script>
 </body>
 </html>