Hugging Face's logo

Spaces:
krishna195
/
just
Running

App Files Community
krishna195 commited on
Commit
6d25e44
·
verified ·
1 Parent(s): 146b13d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +67 -13
index.html CHANGED
@@ -1,20 +1,74 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Speech-to-Text Debug</title>
7
- <script src="https://cdn.jsdelivr.net/npm/@xenova/transformers"></script>
8
- <script defer src="script.js"></script>
 
 
 
 
 
 
 
9
  </head>
10
- <body>
11
- <h1>Speech-to-Text (Debug Mode)</h1>
12
- <p id="modelStatus">⏳ Loading model...</p>
13
- <button id="testModel" disabled>Test Model</button>
14
- <button id="recordButton" disabled>🔄 Model Loading...</button>
15
- <p id="status">Waiting for model...</p>
16
- <p><strong>Transcription:</strong></p>
17
- <p id="output"></p>
18
- <p id="error" style="color: red;"></p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </body>
20
- </html>
 
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Conversational Chatbot with Voice Input</title>
8
+
9
+ <!-- Import the pipeline from transformers.js -->
10
+ <script type="module">
11
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
12
+ window.pipeline = pipeline;
13
+ </script>
14
+
15
+ <!-- Bootstrap CSS -->
16
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
17
  </head>
18
+
19
+ <body style="font-family: Arial, sans-serif;">
20
+ <div class="container mt-5" style="max-width: 800px; margin: 0 auto;">
21
+ <h1 class="text-center mb-4" style="font-weight: bold; color: #333;">Conversational Voice Chatbot</h1>
22
+
23
+ <!-- Chatbot Interface -->
24
+ <div id="chat-container" class="p-3" style="height: 70vh; overflow-y: auto;">
25
+ <!-- Chat messages will appear here -->
26
+ </div>
27
+
28
+ <!-- Input and Button Section -->
29
+ <div class="input-group mt-3">
30
+ <input id="user-input" type="text" class="form-control" placeholder="Type your message..." />
31
+ <button id="send-button" class="btn btn-primary" onclick="handleUserInput()">Send</button>
32
+ <button id="record-button" class="btn btn-secondary" onclick="toggleRecording()">🎙️</button>
33
+ </div>
34
+ </div>
35
+
36
+ <!-- External JavaScript -->
37
+ <script src="script.js"></script>
38
+
39
+ <style>
40
+ /* Chat message styling */
41
+ .user-message {
42
+ text-align: right;
43
+ color: #004085;
44
+ margin: 10px 0;
45
+ padding: 10px;
46
+ border-radius: 15px;
47
+ background-color: #d1ecf1;
48
+ max-width: 75%;
49
+ margin-left: auto;
50
+ font-family: Arial, sans-serif;
51
+ }
52
+ .bot-message {
53
+ text-align: left;
54
+ color: #155724;
55
+ margin: 10px 0;
56
+ padding: 10px;
57
+ border-radius: 15px;
58
+ background-color: #d4edda;
59
+ max-width: 75%;
60
+ margin-right: auto;
61
+ font-family: Arial, sans-serif;
62
+ }
63
+ /* Scrollbar styling */
64
+ #chat-container::-webkit-scrollbar {
65
+ width: 6px;
66
+ }
67
+ #chat-container::-webkit-scrollbar-thumb {
68
+ background: #888;
69
+ border-radius: 10px;
70
+ }
71
+ </style>
72
  </body>
73
+
74
+ </html>