Hugging Face's logo

Spaces:
rohitghosh1763
/
mini-project
Running

App Files Community
Rohit Ghosh commited on
Commit
aeea182
·
1 Parent(s): 7673b0d

made a demo static chatbot ui

Browse files
Files changed (4) hide show
  1. app.py +18 -0
  2. index.html +21 -18
  3. script.js +31 -0
  4. style.css +58 -18
app.py ADDED
@@ -0,0 +1,18 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ from flask import Flask, request, jsonify
2
+ from flask_cors import CORS
3
+
4
+ app = Flask(__name__)
5
+ CORS(app, resources={r"/*": {"origins": "*"}})
6
+
7
+ # Static reply for testing
8
+ @app.route("/get_response", methods=["POST"])
9
+ def get_response():
10
+ # Get the message from the frontend (though we're ignoring it)
11
+ data = request.get_json()
12
+ message = data.get("message") # You can use this if you want to log the message or process it
13
+ # Static response message
14
+ response = {"response": "This is a static reply for testing."}
15
+ return jsonify(response)
16
+
17
+ if __name__ == "__main__":
18
+ app.run(debug=True)
index.html CHANGED
@@ -1,19 +1,22 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
19
  </html>
 
1
+ <!-- index.html -->
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Chatbot</title>
8
+ <link rel="stylesheet" href="style.css">
9
+ </head>
10
+ <body>
11
+ <div id="chat-container">
12
+ <div id="chat-box">
13
+ <div id="chat-log"></div>
14
+ </div>
15
+ <div id="input-container">
16
+ <input type="text" id="user-input" placeholder="Type a message...">
17
+ <button onclick="sendMessage()">Send</button>
18
+ </div>
19
+ </div>
20
+ <script src="script.js"></script>
21
+ </body>
22
  </html>
script.js ADDED
@@ -0,0 +1,31 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // script.js
2
+ async function sendMessage() {
3
+ const userInput = document.getElementById("user-input");
4
+ const message = userInput.value;
5
+
6
+ if (message.trim() === "") return;
7
+
8
+ displayMessage("You: " + message, "user-message");
9
+ userInput.value = "";
10
+
11
+ // Send message to the server
12
+ const response = await fetch("http://127.0.0.1:5000/get_response", {
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
+ displayMessage("Bot: " + data.response, "bot-message");
22
+ }
23
+
24
+ function displayMessage(text, className) {
25
+ const chatLog = document.getElementById("chat-log");
26
+ const messageElement = document.createElement("div");
27
+ messageElement.className = className;
28
+ messageElement.textContent = text;
29
+ chatLog.appendChild(messageElement);
30
+ chatLog.scrollTop = chatLog.scrollHeight;
31
+ }
style.css CHANGED
@@ -1,28 +1,68 @@
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* style.css */
2
  body {
3
+ font-family: Arial, sans-serif;
4
+ display: flex;
5
+ justify-content: center;
6
+ align-items: center;
7
+ height: 100vh;
8
+ margin: 0;
9
+ background-color: #f0f0f0;
10
  }
11
 
12
+ #chat-container {
13
+ width: 400px;
14
+ height: 500px;
15
+ border: 1px solid #ddd;
16
+ background-color: #fff;
17
+ display: flex;
18
+ flex-direction: column;
19
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
20
  }
21
 
22
+ #chat-box {
23
+ flex: 1;
24
+ padding: 15px;
25
+ overflow-y: auto;
26
+ border-bottom: 1px solid #ddd;
27
  }
28
 
29
+ #chat-log div {
30
+ margin-bottom: 10px;
 
 
 
 
31
  }
32
 
33
+ .user-message {
34
+ text-align: right;
35
+ color: blue;
36
  }
37
+
38
+ .bot-message {
39
+ text-align: left;
40
+ color: green;
41
+ }
42
+
43
+ #input-container {
44
+ display: flex;
45
+ padding: 10px;
46
+ }
47
+
48
+ #user-input {
49
+ flex: 1;
50
+ padding: 8px;
51
+ border: 1px solid #ddd;
52
+ border-radius: 4px;
53
+ }
54
+
55
+ button {
56
+ margin-left: 10px;
57
+ padding: 8px 16px;
58
+ border: none;
59
+ background-color: #5a67d8;
60
+ color: white;
61
+ cursor: pointer;
62
+ border-radius: 4px;
63
+ }
64
+
65
+ button:hover {
66
+ background-color: #4c51bf;
67
+ }
68
+