Hugging Face's logo

Spaces:
joermd
/
test11
Running

App Files Community
joermd commited on
Commit
3f5d3d8
·
verified ·
1 Parent(s): 83b1d27

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +171 -19
index.html CHANGED
@@ -1,19 +1,171 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html dir="rtl" lang="ar">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>تطبيق المحادثة الصوتية</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ max-width: 800px;
11
+ margin: 0 auto;
12
+ padding: 20px;
13
+ background-color: #f0f2f5;
14
+ }
15
+ .chat-container {
16
+ background-color: white;
17
+ border-radius: 10px;
18
+ padding: 20px;
19
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
20
+ }
21
+ .controls {
22
+ display: flex;
23
+ gap: 10px;
24
+ margin: 20px 0;
25
+ }
26
+ button {
27
+ padding: 10px 20px;
28
+ border: none;
29
+ border-radius: 5px;
30
+ background-color: #0084ff;
31
+ color: white;
32
+ cursor: pointer;
33
+ }
34
+ button:disabled {
35
+ background-color: #ccc;
36
+ }
37
+ .messages {
38
+ display: flex;
39
+ flex-direction: column;
40
+ gap: 10px;
41
+ margin-top: 20px;
42
+ }
43
+ .message {
44
+ padding: 10px;
45
+ border-radius: 10px;
46
+ max-width: 80%;
47
+ }
48
+ .user-message {
49
+ background-color: #e3f2fd;
50
+ align-self: flex-end;
51
+ }
52
+ .bot-message {
53
+ background-color: #f5f5f5;
54
+ align-self: flex-start;
55
+ }
56
+ #status {
57
+ margin-top: 10px;
58
+ color: #666;
59
+ }
60
+ </style>
61
+ </head>
62
+ <body>
63
+ <div class="chat-container">
64
+ <div class="controls">
65
+ <button id="startRecording">ابدأ التسجيل</button>
66
+ <button id="stopRecording" disabled>أوقف التسجيل</button>
67
+ </div>
68
+ <div id="status">جاهز للتسجيل...</div>
69
+ <div class="messages" id="messages"></div>
70
+ </div>
71
+
72
+ <script>
73
+ const API_URL = 'https://8o1mzdgh9f40t4-7777.proxy.runpod.net/proxy/8000/chat';
74
+ let mediaRecorder;
75
+ let audioChunks = [];
76
+
77
+ const startButton = document.getElementById('startRecording');
78
+ const stopButton = document.getElementById('stopRecording');
79
+ const statusDiv = document.getElementById('status');
80
+ const messagesDiv = document.getElementById('messages');
81
+
82
+ // إضافة رسالة إلى المحادثة
83
+ function addMessage(text, isUser) {
84
+ const messageDiv = document.createElement('div');
85
+ messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
86
+ messageDiv.textContent = text;
87
+ messagesDiv.appendChild(messageDiv);
88
+ messagesDiv.scrollTop = messagesDiv.scrollHeight;
89
+ }
90
+
91
+ // تحويل النص إلى كلام
92
+ async function speakText(text) {
93
+ const utterance = new SpeechSynthesisUtterance(text);
94
+ utterance.lang = 'ar-SA';
95
+ speechSynthesis.speak(utterance);
96
+ }
97
+
98
+ // إرسال النص إلى النموذج
99
+ async function sendToModel(text) {
100
+ try {
101
+ const response = await fetch(API_URL, {
102
+ method: 'POST',
103
+ headers: {
104
+ 'Content-Type': 'application/json',
105
+ },
106
+ body: JSON.stringify({ message: text })
107
+ });
108
+
109
+ const data = await response.json();
110
+ const botResponse = data.response || 'عذراً، حدث خطأ في الاستجابة';
111
+ addMessage(botResponse, false);
112
+ speakText(botResponse);
113
+ } catch (error) {
114
+ console.error('Error:', error);
115
+ addMessage('عذراً، حدث خطأ في الاتصال بالنموذج', false);
116
+ }
117
+ }
118
+
119
+ startButton.onclick = async () => {
120
+ try {
121
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
122
+ mediaRecorder = new MediaRecorder(stream);
123
+
124
+ mediaRecorder.ondataavailable = (event) => {
125
+ audioChunks.push(event.data);
126
+ };
127
+
128
+ mediaRecorder.onstop = async () => {
129
+ const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
130
+ audioChunks = [];
131
+
132
+ // تحويل الصوت إلى نص باستخدام Web Speech API
133
+ const recognition = new webkitSpeechRecognition();
134
+ recognition.lang = 'ar-SA';
135
+ recognition.continuous = false;
136
+ recognition.interimResults = false;
137
+
138
+ recognition.onresult = (event) => {
139
+ const text = event.results[0][0].transcript;
140
+ addMessage(text, true);
141
+ sendToModel(text);
142
+ };
143
+
144
+ recognition.onerror = (event) => {
145
+ console.error('Speech recognition error:', event.error);
146
+ statusDiv.textContent = 'حدث خطأ في التعرف على الكلام';
147
+ };
148
+
149
+ recognition.start();
150
+ };
151
+
152
+ mediaRecorder.start();
153
+ startButton.disabled = true;
154
+ stopButton.disabled = false;
155
+ statusDiv.textContent = 'جارِ التسجيل...';
156
+ } catch (error) {
157
+ console.error('Error:', error);
158
+ statusDiv.textContent = 'حدث خطأ في الوصول إلى الميكروفون';
159
+ }
160
+ };
161
+
162
+ stopButton.onclick = () => {
163
+ mediaRecorder.stop();
164
+ mediaRecorder.stream.getTracks().forEach(track => track.stop());
165
+ startButton.disabled = false;
166
+ stopButton.disabled = true;
167
+ statusDiv.textContent = 'تم إيقاف التسجيل، جارِ معالجة الكلام...';
168
+ };
169
+ </script>
170
+ </body>
171
+ </html>