Hugging Face's logo

Spaces:
joermd
/
test11
Running

App Files Community
joermd commited on
Commit
491c4ca
·
verified ·
1 Parent(s): 0db5763

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +18 -22
index.html CHANGED
@@ -5,6 +5,7 @@
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
  margin: 0;
@@ -54,17 +55,19 @@
54
  background: rgba(40, 167, 69, 0.2);
55
  animation: pulse 2s infinite;
56
  }
57
- .record-button.recording .inner-circle {
58
- background: #28a745;
59
- transform: scale(0.8);
60
- }
61
- .inner-circle {
62
  width: 40%;
63
  height: 40%;
64
  background: #28a745;
65
- border-radius: 50%;
 
66
  transition: all 0.3s ease;
67
- box-shadow: 0 5px 15px rgba(40, 167, 69, 0.2);
 
 
 
68
  }
69
 
70
  .wave-container {
@@ -96,7 +99,6 @@
96
  0%, 100% { transform: scaleY(0.5); }
97
  50% { transform: scaleY(2); }
98
  }
99
-
100
  .status-text {
101
  text-align: center;
102
  color: #28a745;
@@ -104,7 +106,6 @@
104
  font-weight: bold;
105
  margin-top: 20px;
106
  }
107
-
108
  .toggle-code-button {
109
  position: fixed;
110
  top: 20px;
@@ -183,13 +184,12 @@
183
  </style>
184
  </head>
185
  <body>
186
- <!-- باقي الكود كما هو بدون تغيير -->
187
  <div class="container">
188
  <button class="toggle-code-button" id="toggleCode">عرض النص</button>
189
 
190
  <div class="record-button-container">
191
  <button class="record-button" id="recordButton">
192
- <div class="inner-circle"></div>
193
  </button>
194
  <div class="wave-container">
195
  <div class="wave"></div>
@@ -224,7 +224,6 @@
224
  </div>
225
 
226
  <script>
227
- // نفس الكود JavaScript السابق بدون تغيير
228
  const API_URL = 'https://4w27gwem61caof-7777.proxy.runpod.net/proxy/8000/chat';
229
  const recordButton = document.getElementById('recordButton');
230
  const statusText = document.getElementById('statusText');
@@ -236,7 +235,6 @@
236
  const waveContainer = document.querySelector('.wave-container');
237
 
238
  let isRecording = false;
239
-
240
  toggleCodeButton.onclick = () => {
241
  codeSection.classList.toggle('visible');
242
  toggleCodeButton.textContent = codeSection.classList.contains('visible') ? 'إخفاء النص' : 'عرض النص';
@@ -246,7 +244,7 @@
246
  recognition.lang = 'ar-SA';
247
  recognition.continuous = false;
248
  recognition.interimResults = false;
249
-
250
  function loadVoices() {
251
  const voices = speechSynthesis.getVoices();
252
  voiceSelect.innerHTML = '<option value="">اختر صوت رجل عربي فصحى</option>';
@@ -262,7 +260,6 @@
262
  voiceSelect.appendChild(option);
263
  }
264
  });
265
-
266
  if (voiceSelect.options.length === 1) {
267
  voices.forEach((voice, index) => {
268
  if (voice.name.includes('Male')) {
@@ -274,10 +271,10 @@
274
  });
275
  }
276
  }
277
-
278
  speechSynthesis.onvoiceschanged = loadVoices;
279
  loadVoices();
280
-
281
  recognition.onresult = async (event) => {
282
  const text = event.results[0][0].transcript;
283
  spokenText.textContent = text;
@@ -290,11 +287,10 @@
290
  },
291
  body: JSON.stringify({ message: text })
292
  });
293
-
294
  const data = await response.json();
295
  const botReply = data.response;
296
  modelResponse.textContent = botReply;
297
-
298
  const utterance = new SpeechSynthesisUtterance(botReply);
299
  const voices = speechSynthesis.getVoices();
300
  const selectedVoice = voices[voiceSelect.value || 0];
@@ -309,20 +305,20 @@
309
  statusText.textContent = 'حدث خطأ في الاتصال';
310
  }
311
  };
312
-
313
  recognition.onerror = (event) => {
314
  console.error('خطأ:', event.error);
315
  statusText.textContent = 'حدث خطأ في التعرف على الكلام';
316
  isRecording = false;
317
  recordButton.classList.remove('recording');
318
  };
319
-
320
  recognition.onend = () => {
321
  isRecording = false;
322
  recordButton.classList.remove('recording');
323
  statusText.textContent = 'انقر للبدء في التسجيل';
324
  };
325
-
326
  recordButton.onclick = () => {
327
  if (!isRecording) {
328
  recognition.start();
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>محادثة صوتية</title>
7
  <style>
8
+ /* Previous styles remain the same */
9
  body {
10
  font-family: Arial, sans-serif;
11
  margin: 0;
 
55
  background: rgba(40, 167, 69, 0.2);
56
  animation: pulse 2s infinite;
57
  }
58
+
59
+ /* New recording indicator styles */
60
+ .recording-indicator {
 
 
61
  width: 40%;
62
  height: 40%;
63
  background: #28a745;
64
+ border-radius: 0; /* Square by default */
65
+ display: none; /* Hidden by default */
66
  transition: all 0.3s ease;
67
+ }
68
+
69
+ .record-button.recording .recording-indicator {
70
+ display: block; /* Show when recording */
71
  }
72
 
73
  .wave-container {
 
99
  0%, 100% { transform: scaleY(0.5); }
100
  50% { transform: scaleY(2); }
101
  }
 
102
  .status-text {
103
  text-align: center;
104
  color: #28a745;
 
106
  font-weight: bold;
107
  margin-top: 20px;
108
  }
 
109
  .toggle-code-button {
110
  position: fixed;
111
  top: 20px;
 
184
  </style>
185
  </head>
186
  <body>
 
187
  <div class="container">
188
  <button class="toggle-code-button" id="toggleCode">عرض النص</button>
189
 
190
  <div class="record-button-container">
191
  <button class="record-button" id="recordButton">
192
+ <div class="recording-indicator"></div>
193
  </button>
194
  <div class="wave-container">
195
  <div class="wave"></div>
 
224
  </div>
225
 
226
  <script>
 
227
  const API_URL = 'https://4w27gwem61caof-7777.proxy.runpod.net/proxy/8000/chat';
228
  const recordButton = document.getElementById('recordButton');
229
  const statusText = document.getElementById('statusText');
 
235
  const waveContainer = document.querySelector('.wave-container');
236
 
237
  let isRecording = false;
 
238
  toggleCodeButton.onclick = () => {
239
  codeSection.classList.toggle('visible');
240
  toggleCodeButton.textContent = codeSection.classList.contains('visible') ? 'إخفاء النص' : 'عرض النص';
 
244
  recognition.lang = 'ar-SA';
245
  recognition.continuous = false;
246
  recognition.interimResults = false;
247
+
248
  function loadVoices() {
249
  const voices = speechSynthesis.getVoices();
250
  voiceSelect.innerHTML = '<option value="">اختر صوت رجل عربي فصحى</option>';
 
260
  voiceSelect.appendChild(option);
261
  }
262
  });
 
263
  if (voiceSelect.options.length === 1) {
264
  voices.forEach((voice, index) => {
265
  if (voice.name.includes('Male')) {
 
271
  });
272
  }
273
  }
274
+
275
  speechSynthesis.onvoiceschanged = loadVoices;
276
  loadVoices();
277
+
278
  recognition.onresult = async (event) => {
279
  const text = event.results[0][0].transcript;
280
  spokenText.textContent = text;
 
287
  },
288
  body: JSON.stringify({ message: text })
289
  });
 
290
  const data = await response.json();
291
  const botReply = data.response;
292
  modelResponse.textContent = botReply;
293
+
294
  const utterance = new SpeechSynthesisUtterance(botReply);
295
  const voices = speechSynthesis.getVoices();
296
  const selectedVoice = voices[voiceSelect.value || 0];
 
305
  statusText.textContent = 'حدث خطأ في الاتصال';
306
  }
307
  };
308
+
309
  recognition.onerror = (event) => {
310
  console.error('خطأ:', event.error);
311
  statusText.textContent = 'حدث خطأ في التعرف على الكلام';
312
  isRecording = false;
313
  recordButton.classList.remove('recording');
314
  };
315
+
316
  recognition.onend = () => {
317
  isRecording = false;
318
  recordButton.classList.remove('recording');
319
  statusText.textContent = 'انقر للبدء في التسجيل';
320
  };
321
+
322
  recordButton.onclick = () => {
323
  if (!isRecording) {
324
  recognition.start();