Hugging Face's logo

Spaces:
AiDeveloper1
/
linkedinvoice
Running

App Files Community
AiDeveloper1 commited on
Commit
fe7ded9
·
verified ·
1 Parent(s): 06a3b3f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +38 -48
index.html CHANGED
@@ -2,49 +2,45 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <title>Multi-language Voice Agent</title>
6
  <style>
7
  body {
8
  font-family: Arial, sans-serif;
9
  text-align: center;
10
- margin: 30px;
11
  }
12
- select, button {
13
- margin: 10px;
14
- padding: 10px;
15
- font-size: 16px;
 
 
 
 
 
 
 
16
  }
17
  #status {
18
  margin-top: 20px;
19
- font-weight: bold;
20
- color: #444;
21
  }
22
  </style>
23
  </head>
24
  <body>
25
 
26
- <h2>Voice Agent</h2>
27
- <p>Select Language:</p>
28
- <select id="languageSelector">
29
- <option value="ja-JP">Japanese</option>
30
- <option value="en-US" selected>English (US)</option>
31
- <option value="hi-IN">Hindi</option>
32
- <option value="es-ES">Spanish</option>
33
- <option value="fr-FR">French</option>
34
- </select>
35
- <br>
36
  <button id="speakButton">Tap to Speak</button>
37
  <div id="status">Initializing...</div>
38
 
39
  <script>
40
  const speakButton = document.getElementById("speakButton");
41
- const languageSelector = document.getElementById("languageSelector");
42
  const statusDiv = document.getElementById("status");
43
-
44
  const synth = window.speechSynthesis;
45
  let voices = [];
46
 
47
- // Load voices (Safari requires special handling)
48
  function loadVoices() {
49
  return new Promise((resolve) => {
50
  voices = synth.getVoices();
@@ -56,62 +52,57 @@
56
  });
57
  }
58
 
59
- // Unlock TTS for Safari by speaking an empty utterance
60
  function unlockSafariAudio() {
61
- const utterance = new SpeechSynthesisUtterance("");
62
- utterance.volume = 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  synth.speak(utterance);
64
  }
65
 
66
  async function askPermissions() {
67
  try {
68
- // Request microphone access
69
  await navigator.mediaDevices.getUserMedia({ audio: true });
70
-
71
- // Safari requires audio to be unlocked with user gesture
72
  if (navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome")) {
73
  unlockSafariAudio();
74
  }
75
-
76
- statusDiv.textContent = "Ready. Tap the button and speak.";
77
  } catch (error) {
78
  statusDiv.textContent = "Microphone permission denied.";
79
  }
80
  }
81
 
82
- async function speakText(text, langCode) {
83
- await loadVoices();
84
- const utter = new SpeechSynthesisUtterance(text);
85
- const matchingVoice = voices.find(v => v.lang === langCode);
86
- if (matchingVoice) {
87
- utter.voice = matchingVoice;
88
- utter.lang = matchingVoice.lang;
89
- } else {
90
- utter.lang = langCode;
91
- }
92
- synth.speak(utter);
93
- }
94
-
95
  function startRecognition() {
96
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
97
  if (!SpeechRecognition) {
98
- statusDiv.textContent = "Speech recognition not supported in this browser.";
99
  return;
100
  }
101
 
102
  const recognition = new SpeechRecognition();
103
- const lang = languageSelector.value;
104
- recognition.lang = lang;
105
  recognition.interimResults = false;
106
 
107
  recognition.onstart = () => {
108
- statusDiv.textContent = "Listening...";
109
  };
110
 
111
  recognition.onresult = (event) => {
112
  const transcript = event.results[0][0].transcript;
113
  statusDiv.textContent = `You said: "${transcript}"`;
114
- speakText(transcript, lang);
115
  };
116
 
117
  recognition.onerror = (event) => {
@@ -127,7 +118,6 @@
127
  recognition.start();
128
  }
129
 
130
- // On page load
131
  window.onload = async () => {
132
  await loadVoices();
133
  await askPermissions();
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <title>Japanese Voice Agent</title>
6
  <style>
7
  body {
8
  font-family: Arial, sans-serif;
9
  text-align: center;
10
+ margin-top: 50px;
11
  }
12
+ #speakButton {
13
+ padding: 15px 30px;
14
+ font-size: 18px;
15
+ background: #007bff;
16
+ color: white;
17
+ border: none;
18
+ border-radius: 5px;
19
+ cursor: pointer;
20
+ }
21
+ #speakButton:hover {
22
+ background: #0056b3;
23
  }
24
  #status {
25
  margin-top: 20px;
26
+ font-size: 16px;
27
+ color: #333;
28
  }
29
  </style>
30
  </head>
31
  <body>
32
 
33
+ <h2>Japanese Voice Agent</h2>
34
+ <p>Click the button and speak in Japanese. The system will repeat what you said.</p>
 
 
 
 
 
 
 
 
35
  <button id="speakButton">Tap to Speak</button>
36
  <div id="status">Initializing...</div>
37
 
38
  <script>
39
  const speakButton = document.getElementById("speakButton");
 
40
  const statusDiv = document.getElementById("status");
 
41
  const synth = window.speechSynthesis;
42
  let voices = [];
43
 
 
44
  function loadVoices() {
45
  return new Promise((resolve) => {
46
  voices = synth.getVoices();
 
52
  });
53
  }
54
 
 
55
  function unlockSafariAudio() {
56
+ const silentUtterance = new SpeechSynthesisUtterance("");
57
+ silentUtterance.volume = 0;
58
+ synth.speak(silentUtterance);
59
+ }
60
+
61
+ async function speakJapanese(text) {
62
+ await loadVoices();
63
+ const utterance = new SpeechSynthesisUtterance(text);
64
+ const jpVoice = voices.find(v => v.lang === "ja-JP");
65
+ if (jpVoice) {
66
+ utterance.voice = jpVoice;
67
+ utterance.lang = "ja-JP";
68
+ } else {
69
+ utterance.lang = "ja-JP";
70
+ }
71
+ synth.cancel();
72
  synth.speak(utterance);
73
  }
74
 
75
  async function askPermissions() {
76
  try {
 
77
  await navigator.mediaDevices.getUserMedia({ audio: true });
 
 
78
  if (navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome")) {
79
  unlockSafariAudio();
80
  }
81
+ statusDiv.textContent = "Ready. Tap the button and speak in Japanese.";
 
82
  } catch (error) {
83
  statusDiv.textContent = "Microphone permission denied.";
84
  }
85
  }
86
 
 
 
 
 
 
 
 
 
 
 
 
 
 
87
  function startRecognition() {
88
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
89
  if (!SpeechRecognition) {
90
+ statusDiv.textContent = "Speech recognition not supported.";
91
  return;
92
  }
93
 
94
  const recognition = new SpeechRecognition();
95
+ recognition.lang = "ja-JP";
 
96
  recognition.interimResults = false;
97
 
98
  recognition.onstart = () => {
99
+ statusDiv.textContent = "Listening in Japanese...";
100
  };
101
 
102
  recognition.onresult = (event) => {
103
  const transcript = event.results[0][0].transcript;
104
  statusDiv.textContent = `You said: "${transcript}"`;
105
+ speakJapanese(transcript);
106
  };
107
 
108
  recognition.onerror = (event) => {
 
118
  recognition.start();
119
  }
120
 
 
121
  window.onload = async () => {
122
  await loadVoices();
123
  await askPermissions();