Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>مساعد ذكي باللهجة النجدية</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| background-color: #f5f5f5; | |
| font-family: 'Tahoma', 'Arial', sans-serif; | |
| } | |
| .chat-container { | |
| max-height: 500px; | |
| overflow-y: auto; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="container mx-auto p-4"> | |
| <div class="bg-white rounded-lg shadow-lg p-6 max-w-3xl mx-auto"> | |
| <h1 class="text-2xl font-bold text-center mb-6 text-gray-800">مساعد ذكي باللهجة النجدية + تحويل النص لصوت</h1> | |
| <div id="chat-container" class="chat-container mb-4 p-4 bg-gray-50 rounded-lg h-64 overflow-y-auto"> | |
| <div class="text-right mb-4"> | |
| <p class="bg-blue-100 text-blue-800 rounded-lg p-3 inline-block">مرحباً! كيف يمكنني مساعدتك اليوم؟</p> | |
| </div> | |
| </div> | |
| <div class="flex flex-col space-y-4"> | |
| <textarea id="user-input" class="p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3" placeholder="اكتب سؤالك هنا..."></textarea> | |
| <div class="flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0"> | |
| <select id="voice-select" class="p-2 border rounded-lg"> | |
| <option value="alloy">صوت عادي</option> | |
| </select> | |
| <div class="flex-grow"> | |
| <label for="speed-slider" class="block mb-1">سرعة الكلام: <span id="speed-value">1.0</span></label> | |
| <input id="speed-slider" type="range" min="0.5" max="2.0" step="0.1" value="1.0" class="w-full"> | |
| </div> | |
| </div> | |
| <button id="send-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200"> | |
| إرسال | |
| </button> | |
| <audio id="audio-player" controls class="w-full mt-4"></audio> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById('speed-slider').addEventListener('input', function() { | |
| document.getElementById('speed-value').textContent = this.value; | |
| }); | |
| document.getElementById('send-btn').addEventListener('click', async function() { | |
| const userInput = document.getElementById('user-input').value; | |
| const voice = document.getElementById('voice-select').value; | |
| const speed = document.getElementById('speed-slider').value; | |
| if (!userInput.trim()) return; | |
| const chatContainer = document.getElementById('chat-container'); | |
| // Add user message | |
| chatContainer.innerHTML += ` | |
| <div class="text-left mb-4"> | |
| <p class="bg-gray-200 text-gray-800 rounded-lg p-3 inline-block">${userInput}</p> | |
| </div> | |
| `; | |
| // Show loading indicator | |
| chatContainer.innerHTML += ` | |
| <div class="text-right mb-4"> | |
| <p class="bg-blue-100 text-blue-800 rounded-lg p-3 inline-block">...جارٍ المعالجة</p> | |
| </div> | |
| `; | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| try { | |
| const response = await fetch('https://your-api-endpoint.com/chat', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| user_input: userInput, | |
| voice: voice, | |
| speed: speed | |
| }) | |
| }); | |
| const data = await response.json(); | |
| // Remove loading indicator | |
| chatContainer.removeChild(chatContainer.lastChild); | |
| // Add assistant response | |
| chatContainer.innerHTML += ` | |
| <div class="text-right mb-4"> | |
| <p class="bg-blue-100 text-blue-800 rounded-lg p-3 inline-block">${data.reply}</p> | |
| </div> | |
| `; | |
| // Play audio if available | |
| if (data.audio_url) { | |
| const audioPlayer = document.getElementById('audio-player'); | |
| audioPlayer.src = data.audio_url; | |
| audioPlayer.play(); | |
| } | |
| // Clear input | |
| document.getElementById('user-input').value = ''; | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } catch (error) { | |
| console.error('Error:', error); | |
| // Remove loading indicator | |
| chatContainer.removeChild(chatContainer.lastChild); | |
| // Show error message | |
| chatContainer.innerHTML += ` | |
| <div class="text-right mb-4"> | |
| <p class="bg-red-100 text-red-800 rounded-lg p-3 inline-block">حدث خطأ أثناء المعالجة. يرجى المحاولة مرة أخرى.</p> | |
| </div> | |
| `; | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |