Hugging Face's logo

Spaces:
srinuksv
/
fastapiyes
Running

App Files Community
srinuksv commited on
Commit
b32ac0d
•
1 Parent(s): e0d14cc

Upload 3 files

Browse files
Files changed (3) hide show
  1. static/index.html +95 -0
  2. static/script.js +30 -0
  3. static/styles.css +25 -0
static/index.html ADDED
@@ -0,0 +1,95 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <style>
7
+ #chat-container {
8
+ max-width: 600px;
9
+ margin: auto;
10
+ padding: 20px;
11
+ border: 1px solid #ccc;
12
+ border-radius: 5px;
13
+ background-color: #f9f9f9;
14
+ }
15
+
16
+ #chat-history {
17
+ height: 400px;
18
+ overflow-y: auto;
19
+ margin-bottom: 10px;
20
+ border: 1px solid #ddd;
21
+ padding: 10px;
22
+ background: white;
23
+ }
24
+
25
+ #user-input {
26
+ width: calc(100% - 90px);
27
+ }
28
+
29
+ button {
30
+ padding: 10px;
31
+ }
32
+ </style>
33
+ <title>Chat Interface</title>
34
+ </head>
35
+ <body>
36
+ <div id="chat-container">
37
+ <div id="chat-history"></div>
38
+ <input type="text" id="user-input" placeholder="Type your message..." aria-label="Message input">
39
+ <button id="send-button" aria-label="Send message">Send</button>
40
+ </div>
41
+ <script>
42
+ document.getElementById("send-button").addEventListener("click", sendMessage);
43
+ document.getElementById("user-input").addEventListener("keypress", function(event) {
44
+ if (event.key === "Enter") {
45
+ event.preventDefault(); // Prevent form submission
46
+ sendMessage();
47
+ }
48
+ });
49
+
50
+ async function sendMessage() {
51
+ const input = document.getElementById("user-input");
52
+ const message = input.value.trim();
53
+
54
+ if (message === "") {
55
+ return; // Do not send empty messages
56
+ }
57
+
58
+ // Add user message to chat history
59
+ addMessage("User", message);
60
+
61
+ // Clear input field
62
+ input.value = "";
63
+
64
+ try {
65
+ // Send message to the backend
66
+ const response = await fetch("/chat/", {
67
+ method: "POST",
68
+ headers: {
69
+ "Content-Type": "application/json"
70
+ },
71
+ body: JSON.stringify({ message })
72
+ });
73
+
74
+ if (!response.ok) {
75
+ throw new Error(`HTTP error! Status: ${response.status}`);
76
+ }
77
+
78
+ const data = await response.json();
79
+ addMessage("Bot", data.response);
80
+ } catch (error) {
81
+ console.error('Error:', error);
82
+ addMessage("Bot", "Sorry, something went wrong.");
83
+ }
84
+ }
85
+
86
+ function addMessage(sender, message) {
87
+ const chatHistory = document.getElementById("chat-history");
88
+ const messageElement = document.createElement("div");
89
+ messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
90
+ chatHistory.appendChild(messageElement);
91
+ chatHistory.scrollTop = chatHistory.scrollHeight; // Scroll to the bottom
92
+ }
93
+ </script>
94
+ </body>
95
+ </html>
static/script.js ADDED
@@ -0,0 +1,30 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.getElementById("send-button").addEventListener("click", async () => {
2
+ const input = document.getElementById("user-input");
3
+ const message = input.value;
4
+
5
+ // Add user message to chat history
6
+ addMessage("User", message);
7
+
8
+ // Clear input field
9
+ input.value = "";
10
+
11
+ // Send message to the backend
12
+ const response = await fetch("/chat/", {
13
+ method: "POST",
14
+ headers: {
15
+ "Content-Type": "application/json"
16
+ },
17
+ body: JSON.stringify({ message })
18
+ });
19
+
20
+ const data = await response.json();
21
+ addMessage("Bot", data.response);
22
+ });
23
+
24
+ function addMessage(sender, message) {
25
+ const chatHistory = document.getElementById("chat-history");
26
+ const messageElement = document.createElement("div");
27
+ messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
28
+ chatHistory.appendChild(messageElement);
29
+ chatHistory.scrollTop = chatHistory.scrollHeight; // Scroll to the bottom
30
+ }
static/styles.css ADDED
@@ -0,0 +1,25 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ #chat-container {
2
+ max-width: 600px;
3
+ margin: auto;
4
+ padding: 20px;
5
+ border: 1px solid #ccc;
6
+ border-radius: 5px;
7
+ background-color: #f9f9f9;
8
+ }
9
+
10
+ #chat-history {
11
+ height: 400px;
12
+ overflow-y: auto;
13
+ margin-bottom: 10px;
14
+ border: 1px solid #ddd;
15
+ padding: 10px;
16
+ background: white;
17
+ }
18
+
19
+ #user-input {
20
+ width: calc(100% - 90px);
21
+ }
22
+
23
+ button {
24
+ padding: 10px;
25
+ }