Spaces:

prasanth345
/

hotelvoicechat

Runtime error

App Files Files Community

prasanth345 commited on Jan 9

Commit

0a2034a

verified ·

1 Parent(s): 6e45585

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +47 -15

templates/index.html CHANGED Viewed

@@ -3,22 +3,54 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
-    <title>Hotel Booking Demo</title>
 </head>
 <body>
-    <header>
-        <h1>Hotel Booking Demo</h1>
-        <p>Talk to our virtual assistant for hotel bookings</p>
-    </header>
-    <main>
-        <button id="voice-chat">Start Voice Chat</button>
-        <div id="chat-container">
-            <div id="chat-history"></div>
-            <input type="text" id="user-input" placeholder="Type your message...">
-            <button id="send-button">Send</button>
-        </div>
-    </main>
-    <script src="{{ url_for('static', filename='script.js') }}"></script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hotel Booking AI</title>
+    <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
+    <h1>Welcome to Hotel Booking AI</h1>
+    <div id="chatbot-container">
+        <h2>Chat with our AI</h2>
+        <div id="chat-history"></div>
+        <input type="text" id="user-input" placeholder="Type your message...">
+        <button onclick="sendMessage()">Send</button>
+    </div>
+    <div id="voice-container">
+        <h2>Voice Interaction</h2>
+        <div id="voice-response"></div>
+        <input type="file" accept="audio/*" id="voice-input" onchange="sendVoice()">
+        <button onclick="sendVoice()">Send Voice</button>
+    </div>
+    <script>
+        // JavaScript for chat functionality
+        function sendMessage() {
+            var input = document.getElementById('user-input').value;
+            fetch('/chatbot', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ message: input })
+            })
+            .then(response => response.text())
+            .then(data => document.getElementById('chat-history').innerHTML += `<p>User: ${input}</p><p>AI: ${data}</p>`);
+        }
+        // JavaScript for voice functionality
+        function sendVoice() {
+            var audioInput = document.getElementById('voice-input').files[0];
+            var formData = new FormData();
+            formData.append('audio', audioInput);
+            fetch('/voice', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.text())
+            .then(data => document.getElementById('voice-response').innerHTML = `<p>${data}</p>`);
+        }
+    </script>
 </body>
 </html>