Hugging Face's logo

Spaces:
AiDeveloper1
/
linkedinvoice
Running

App Files Community
linkedinvoice
File size: 4,208 Bytes 
a93053a
06a3b3f
a93053a
5842128
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a93053a
 
5842128
 
 
 
 
 
 
 
 
 
 
 
 
 
 
df23fbf
5842128
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a93053a
df23fbf
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
 
<!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, .bot-message {
      border-radius: 5px;
      padding: 5px 10px;
      margin: 5px 0;
    }
    .user-message {
      background-color: #f0f0f0;
      text-align: right;
    }
    .bot-message {
      background-color: #d3e9ff;
    }
    #languageSelector {
      width: 100%;
      margin-top: 10px;
      padding: 5px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    .speaker {
      display: flex;
      justify-content: space-between;
      width: 100%;
      box-shadow: 0 0 13px #0000003d;
      border-radius: 5px;
      margin-top: 10px;
    }
    #speech {
      border: transparent;
      padding: 0 0.5rem;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="chat-container">
    <div id="chat-box"></div>

    <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>
    </select>

    <div class="speaker">
      <p id="action" style="color: grey; font-weight: 800; padding-left: 2rem;"></p>
      <button id="speech">Tap to Speak</button>
    </div>
  </div>

  <script>
    const synth = window.speechSynthesis;
    let recognition;

    // Event listener for the button
    document.getElementById("speech").addEventListener("click", () => {
      runSpeechRecog();
    });

    function runSpeechRecog() {
      const action = document.getElementById("action");

      // Prevent multiple instances
      if (recognition) recognition.abort();

      // Ensure Chrome compatibility
      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
      if (!SpeechRecognition) {
        alert("Speech Recognition not supported in this browser. Use Google Chrome.");
        return;
      }

      recognition = new SpeechRecognition();
      recognition.lang = "en-US"; // Always English for input
      recognition.interimResults = false;
      recognition.continuous = false;

      recognition.onstart = () => {
        action.innerHTML = "Listening...";
      };

      recognition.onresult = (event) => {
        const transcript = event.results[0][0].transcript;
        action.innerHTML = "";
        sendMessage(transcript);
      };

      recognition.onerror = (event) => {
        action.innerHTML = "Error: " + event.error;
      };

      recognition.onend = () => {
        action.innerHTML = "";
      };

      recognition.start();
    }

    function sendMessage(message) {
      showUserMessage(message);
      // Simulating response (replace with your backend call)
      setTimeout(() => handleResponse("You said: " + message), 500);
    }

    function showUserMessage(message) {
      const chatBox = document.getElementById("chat-box");
      chatBox.innerHTML += <div class="user-message">${message}</div>;
    }

    function handleResponse(message) {
      showBotMessage(message);
      speakResponse(message);
    }

    function showBotMessage(message) {
      const chatBox = document.getElementById("chat-box");
      chatBox.innerHTML += <div class="bot-message">${message}</div>;
    }

    function speakResponse(responseText) {
      const selectedLang = document.getElementById("languageSelector").value;
      const utterance = new SpeechSynthesisUtterance(responseText);
      utterance.lang = selectedLang;

      const voices = synth.getVoices();
      const match = voices.find(v => v.lang === selectedLang);
      if (match) utterance.voice = match;

      synth.speak(utterance);
    }

    // Ensure voices are loaded
    window.speechSynthesis.onvoiceschanged = () => synth.getVoices();
  </script>
</body>
</html>