Hugging Face's logo

Spaces:
joermd
/
test11
Running

App Files Community
joermd commited on
Commit
f25fc28
·
verified ·
1 Parent(s): 27fbe7f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +69 -4
index.html CHANGED
@@ -3,7 +3,7 @@
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;
@@ -41,6 +41,20 @@
41
  color: #666;
42
  margin-bottom: 5px;
43
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  </style>
45
  </head>
46
  <body>
@@ -48,6 +62,23 @@
48
  <button id="startBtn">ابدأ التحدث</button>
49
  <button id="stopBtn" disabled>توقف</button>
50
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
51
  <div id="transcription">
52
  <div class="label">ما قلته:</div>
53
  <div id="spokenText"></div>
@@ -65,10 +96,37 @@
65
  const stopBtn = document.getElementById('stopBtn');
66
  const spokenText = document.getElementById('spokenText');
67
  const modelResponse = document.getElementById('modelResponse');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68
 
69
  // إعداد التعرف على الكلام
70
  const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
71
- recognition.lang = 'ar-SA';
72
  recognition.continuous = false;
73
  recognition.interimResults = false;
74
 
@@ -92,7 +150,15 @@
92
 
93
  // تحويل الرد إلى صوت
94
  const utterance = new SpeechSynthesisUtterance(botReply);
95
- utterance.lang = 'ar-SA';
 
 
 
 
 
 
 
 
96
  speechSynthesis.speak(utterance);
97
  } catch (error) {
98
  modelResponse.textContent = 'حدث خطأ في الاتصال بالنموذج';
@@ -118,7 +184,6 @@
118
  stopBtn.disabled = true;
119
  };
120
 
121
- // عند انتهاء التعرف على الكلام
122
  recognition.onend = () => {
123
  startBtn.disabled = false;
124
  stopBtn.disabled = true;
 
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;
 
41
  color: #666;
42
  margin-bottom: 5px;
43
  }
44
+ .voice-controls {
45
+ margin: 15px 0;
46
+ padding: 10px;
47
+ background: #f8f9fa;
48
+ border-radius: 5px;
49
+ }
50
+ .voice-controls label {
51
+ display: block;
52
+ margin: 5px 0;
53
+ }
54
+ select, input {
55
+ margin: 5px;
56
+ padding: 5px;
57
+ }
58
  </style>
59
  </head>
60
  <body>
 
62
  <button id="startBtn">ابدأ التحدث</button>
63
  <button id="stopBtn" disabled>توقف</button>
64
 
65
+ <div class="voice-controls">
66
+ <label>
67
+ الصوت:
68
+ <select id="voiceSelect"></select>
69
+ </label>
70
+ <label>
71
+ سرعة الكلام:
72
+ <input type="range" id="rateRange" min="0.5" max="2" step="0.1" value="1">
73
+ <span id="rateValue">1</span>
74
+ </label>
75
+ <label>
76
+ درجة الصوت:
77
+ <input type="range" id="pitchRange" min="0.5" max="2" step="0.1" value="1">
78
+ <span id="pitchValue">1</span>
79
+ </label>
80
+ </div>
81
+
82
  <div id="transcription">
83
  <div class="label">ما قلته:</div>
84
  <div id="spokenText"></div>
 
96
  const stopBtn = document.getElementById('stopBtn');
97
  const spokenText = document.getElementById('spokenText');
98
  const modelResponse = document.getElementById('modelResponse');
99
+ const voiceSelect = document.getElementById('voiceSelect');
100
+ const rateRange = document.getElementById('rateRange');
101
+ const pitchRange = document.getElementById('pitchRange');
102
+ const rateValue = document.getElementById('rateValue');
103
+ const pitchValue = document.getElementById('pitchValue');
104
+
105
+ // تحديث قائمة الأصوات المتاحة
106
+ function populateVoiceList() {
107
+ const voices = speechSynthesis.getVoices();
108
+ voiceSelect.innerHTML = '';
109
+
110
+ voices.forEach((voice, index) => {
111
+ if (voice.lang.includes('ar')) { // فقط الأصوات العربية
112
+ const option = document.createElement('option');
113
+ option.textContent = `${voice.name} (${voice.lang})`;
114
+ option.setAttribute('data-voice-index', index);
115
+ voiceSelect.appendChild(option);
116
+ }
117
+ });
118
+ }
119
+
120
+ speechSynthesis.onvoiceschanged = populateVoiceList;
121
+ populateVoiceList();
122
+
123
+ // تحديث قيم السرعة والنبرة
124
+ rateRange.onchange = () => rateValue.textContent = rateRange.value;
125
+ pitchRange.onchange = () => pitchValue.textContent = pitchRange.value;
126
 
127
  // إعداد التعرف على الكلام
128
  const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
129
+ recognition.lang = 'ar-EG'; // تعيين اللغة للهجة المصرية
130
  recognition.continuous = false;
131
  recognition.interimResults = false;
132
 
 
150
 
151
  // تحويل الرد إلى صوت
152
  const utterance = new SpeechSynthesisUtterance(botReply);
153
+
154
+ // تعيين خصائص الصوت
155
+ const voices = speechSynthesis.getVoices();
156
+ const selectedVoice = voices[voiceSelect.selectedOptions[0].getAttribute('data-voice-index')];
157
+ utterance.voice = selectedVoice;
158
+ utterance.rate = parseFloat(rateRange.value);
159
+ utterance.pitch = parseFloat(pitchRange.value);
160
+ utterance.lang = 'ar-EG'; // تعيين اللغة للهجة المصرية
161
+
162
  speechSynthesis.speak(utterance);
163
  } catch (error) {
164
  modelResponse.textContent = 'حدث خطأ في الاتصال بالنموذج';
 
184
  stopBtn.disabled = true;
185
  };
186
 
 
187
  recognition.onend = () => {
188
  startBtn.disabled = false;
189
  stopBtn.disabled = true;