Spaces:

AiDeveloper1
/

linkedinvoice

Running

App Files Files Community

AiDeveloper1 commited on Jun 26, 2025

Commit

a584900

verified ·

1 Parent(s): 016c4c9

Update index.html

Browse files

Files changed (1) hide show

index.html +92 -70

index.html CHANGED Viewed

@@ -1,82 +1,104 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Voice Command | Chatbot</title>
-    <style>
-        .chat-container {
-            max-width: 400px;
-            margin: 20px auto;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            font-family: Arial, sans-serif;
-        }
-        .user-message {
-            background-color: #f0f0f0;
-            border-radius: 5px;
-            padding: 5px 10px;
-            margin: 5px 0;
-            text-align: right;
-        }
-        .bot-message {
-            background-color: #d3e9ff;
-            border-radius: 5px;
-            padding: 5px 10px;
-            margin: 5px 0;
-        }
-        #languageSelector {
-            width: 100%;
-            margin-top: 10px;
-            padding: 5px;
-            border-radius: 5px;
-            border: 1px solid #ccc;
-        }
-    </style>
 </head>
 <body>
-    <div class="chat-container">
-        <div id="chat-box"></div>
-        <!-- Language Selection -->
-        <select id="languageSelector">
-            <option value="en-US">English (US)</option>
-            <option value="hi-IN">Hindi (India)</option>
-            <option value="es-ES">Spanish (Spain)</option>
-            <option value="fr-FR">French (France)</option>
-            <option value="de-DE">German (Germany)</option>
-            <option value="ar-SA">Arabic (Saudi Arabia)</option>
-            <!-- Add more as needed -->
-        </select>
-        <div class="speaker" style="display: flex; justify-content: space-between; width: 100%; box-shadow: 0 0 13px #0000003d; border-radius: 5px; margin-top: 10px;">
-            <p id="action" style="color: grey; font-weight: 800; padding: 0; padding-left: 2rem;"></p>
-            <button id="speech" onclick="runSpeechRecog()" style="border: transparent; padding: 0 0.5rem;">
-                Tap to Speak
-            </button>
-        </div>
-    </div>
-    <button onclick="speak()">Speak</button>
-<script>
-function speak() {
     const synth = window.speechSynthesis;
-    const utter = new SpeechSynthesisUtterance("Bonjour, comment ça va ?");
-    utter.lang = 'fr-FR';
-    // Wait for voices to be loaded (Safari quirk)
-    const interval = setInterval(() => {
-        const voices = synth.getVoices();
-        if (voices.length > 0) {
-            utter.voice = voices.find(v => v.lang === 'en-US') || voices[0];
-            synth.speak(utter);
-            clearInterval(interval);
-        }
-    }, 100);
-}
-</script>
 </body>
-</html>

 <!DOCTYPE html>
+<html lang="ja">
 <head>
+  <meta charset="UTF-8">
+  <title>Japanese Voice Agent</title>
+  <style>
+    #action, #status {
+      text-align: center;
+      font-family: Arial, sans-serif;
+      margin: 10px;
+    }
+    #speech {
+      display: block;
+      margin: 20px auto;
+      padding: 10px 20px;
+      font-size: 18px;
+      font-weight: bold;
+      background: #007bff;
+      color: white;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+    #speech:hover {
+      background: #0056b3;
+    }
+  </style>
 </head>
 <body>
+  <p id="action">タップして話す</p>
+  <button id="speech">Tap to Speak</button>
+  <p id="status"></p>
+  <script>
+    const action = document.getElementById('action');
+    const status = document.getElementById('status');
+    const speechButton = document.getElementById('speech');
+    // Load Japanese voice
+    let voices = [];
     const synth = window.speechSynthesis;
+    function loadVoices() {
+      return new Promise(resolve => {
+        voices = synth.getVoices();
+        if (voices.length > 0) resolve();
+        else synth.addEventListener('voiceschanged', () => {
+          voices = synth.getVoices();
+          resolve();
+        });
+      });
+    }
+    async function speakText(text) {
+      await loadVoices();
+      const utter = new SpeechSynthesisUtterance(text);
+      const japaneseVoice = voices.find(v => v.lang === 'ja-JP');
+      if (japaneseVoice) {
+        utter.voice = japaneseVoice;
+        utter.lang = 'ja-JP';
+      }
+      synth.cancel(); // Cancel any ongoing speech
+      synth.speak(utter);
+    }
+    function runSpeechRecognition() {
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+      if (!SpeechRecognition) {
+        status.textContent = 'このブラウザは音声認識をサポートしていません。';
+        return;
+      }
+      const recognition = new SpeechRecognition();
+      recognition.lang = 'ja-JP';
+      recognition.interimResults = false;
+      recognition.onstart = () => {
+        action.textContent = '聞いています...';
+        status.textContent = '';
+      };
+      recognition.onresult = (event) => {
+        const transcript = event.results[0][0].transcript;
+        action.textContent = '認識完了';
+        status.textContent = `聞き取った内容: ${transcript}`;
+        speakText(transcript); // Speak back the text
+      };
+      recognition.onerror = (event) => {
+        action.textContent = 'エラー';
+        status.textContent = `認識エラー: ${event.error}`;
+      };
+      recognition.onend = () => {
+        action.textContent = 'タップして話す';
+      };
+      recognition.start();
+    }
+    speechButton.addEventListener('click', runSpeechRecognition);
+  </script>
 </body>
+</html>