Spaces:

joermd
/

test11

Running

App Files Files Community

joermd commited on Dec 28, 2024

Commit

12f504a

verified ·

1 Parent(s): 835a507

Update index.html

Browse files

Files changed (1) hide show

index.html +141 -45

index.html CHANGED Viewed

@@ -7,64 +7,133 @@
     <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)();
@@ -72,12 +141,29 @@
         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: {
@@ -92,36 +178,46 @@
                 // تحويل الرد إلى صوت
                 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>

     <style>
         body {
             font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
             background: #f0f2f5;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
         }
         .container {
             max-width: 600px;
+            width: 100%;
             background: white;
             padding: 20px;
+            border-radius: 15px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
+        .record-button-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 20px 0;
+        }
+        .record-button {
+            width: 150px;
+            height: 150px;
+            border-radius: 50%;
+            background: #f0f2f5;
             border: none;
             cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            transition: all 0.3s ease;
         }
+        .record-button:hover {
+            background: #e4e6e9;
         }
+        .record-button.recording {
+            background: #ff4444;
+        }
+        .record-button.recording .inner-circle {
+            background: white;
+            width: 50px;
+            height: 50px;
             border-radius: 5px;
+        }
+        .inner-circle {
+            width: 60px;
+            height: 60px;
+            background: #ff4444;
+            border-radius: 50%;
+            transition: all 0.3s ease;
+        }
+        .status-text {
+            text-align: center;
+            margin: 10px 0;
+            color: #666;
+            font-size: 14px;
+        }
+        .message-container {
             background: #f8f9fa;
+            padding: 15px;
+            border-radius: 10px;
+            margin: 10px 0;
         }
+        .message-label {
             font-weight: bold;
             color: #666;
+            margin-bottom: 8px;
+        }
+        .message-content {
+            padding: 10px;
+            background: white;
+            border-radius: 8px;
+            min-height: 40px;
+        }
+        .voice-settings {
+            margin-top: 20px;
+            padding: 15px;
+            background: #f8f9fa;
+            border-radius: 10px;
+        }
+        select {
+            width: 100%;
+            padding: 8px;
+            margin: 5px 0;
+            border-radius: 5px;
+            border: 1px solid #ddd;
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <div class="record-button-container">
+            <button class="record-button" id="recordButton">
+                <div class="inner-circle"></div>
+            </button>
+        </div>
+        <div class="status-text" id="statusText">انقر للبدء في التسجيل</div>
+        <div class="voice-settings">
+            <select id="voiceSelect">
+                <option value="">اختر صوت رجل عربي فصحى</option>
+            </select>
+        </div>
+        <div class="message-container">
+            <div class="message-label">ما قلته:</div>
+            <div class="message-content" id="spokenText"></div>
         </div>
+        <div class="message-container">
+            <div class="message-label">رد النموذج:</div>
+            <div class="message-content" id="modelResponse"></div>
         </div>
     </div>
     <script>
         const API_URL = 'https://8o1mzdgh9f40t4-7777.proxy.runpod.net/proxy/8000/chat';
+        const recordButton = document.getElementById('recordButton');
+        const statusText = document.getElementById('statusText');
         const spokenText = document.getElementById('spokenText');
         const modelResponse = document.getElementById('modelResponse');
+        const voiceSelect = document.getElementById('voiceSelect');
+        let isRecording = false;
         // إعداد التعرف على الكلام
         const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
         recognition.continuous = false;
         recognition.interimResults = false;
+        // تحميل الأصوات العربية
+        function loadVoices() {
+            const voices = speechSynthesis.getVoices();
+            voiceSelect.innerHTML = '<option value="">اختر صوت رجل عربي فصحى</option>';
+            voices.forEach((voice, index) => {
+                if (voice.lang.includes('ar') && voice.name.includes('Male')) {
+                    const option = document.createElement('option');
+                    option.value = index;
+                    option.textContent = voice.name;
+                    voiceSelect.appendChild(option);
+                }
+            });
+        }
+        speechSynthesis.onvoiceschanged = loadVoices;
+        loadVoices();
         recognition.onresult = async (event) => {
             const text = event.results[0][0].transcript;
             spokenText.textContent = text;
             try {
                 const response = await fetch(API_URL, {
                     method: 'POST',
                     headers: {
                 // تحويل الرد إلى صوت
                 const utterance = new SpeechSynthesisUtterance(botReply);
+                const voices = speechSynthesis.getVoices();
+                const selectedVoice = voices[voiceSelect.value || 0];
+                utterance.voice = selectedVoice;
                 utterance.lang = 'ar-SA';
+                utterance.rate = 1;
+                utterance.pitch = 1;
                 speechSynthesis.speak(utterance);
             } catch (error) {
                 modelResponse.textContent = 'حدث خطأ في الاتصال بالنموذج';
+                statusText.textContent = 'حدث خطأ في الاتصال';
             }
         };
         recognition.onerror = (event) => {
             console.error('خطأ:', event.error);
+            statusText.textContent = 'حدث خطأ في التعرف على الكلام';
+            isRecording = false;
+            recordButton.classList.remove('recording');
         };
+        recognition.onend = () => {
+            isRecording = false;
+            recordButton.classList.remove('recording');
+            statusText.textContent = 'انقر للبدء في التسجيل';
         };
+        recordButton.onclick = () => {
+            if (!isRecording) {
+                recognition.start();
+                isRecording = true;
+                recordButton.classList.add('recording');
+                statusText.textContent = 'جارٍ التسجيل... انقر للإيقاف';
+                spokenText.textContent = '';
+                modelResponse.textContent = '';
+            } else {
+                recognition.stop();
+                isRecording = false;
+                recordButton.classList.remove('recording');
+                statusText.textContent = 'جارٍ معالجة الكلام...';
+            }
         };
     </script>
 </body>