Hugging Face's logo

Spaces:
SatyamSinghal
/
Councelling_Bot
Running

App Files Community
SatyamSinghal commited on
Commit
4f629bb
·
verified ·
1 Parent(s): c7471c3

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +168 -125
app.py CHANGED
@@ -50,128 +50,171 @@ def chatbot(user_input, history=[]):
50
  history.append((f"({topic}) You: {user_input}", f"Motivator Bot: {bot_response}"))
51
  return history, saved_chats
52
 
53
- # Function to display saved chats
54
- def display_saved_chats():
55
- display = ""
56
- for category, chats in saved_chats.items():
57
- display += f"<div class='chat-category'><h3>{category}</h3>"
58
- for user_message, bot_response in chats:
59
- display += f"<p><strong>You:</strong> {user_message}<br><strong>Bot:</strong> {bot_response}</p>"
60
- display += "</div>"
61
- return display.strip()
62
-
63
- # Gradio Interface setup
64
- chat_interface = gr.Blocks(css="""
65
- body {
66
- font-family: 'Poppins', sans-serif;
67
- background: linear-gradient(120deg, #000000, #1c1c1c);
68
- color: #ffffff;
69
- margin: 0;
70
- padding: 0;
71
- animation: gradientBG 12s ease infinite;
72
- }
73
-
74
- @keyframes gradientBG {
75
- 0% { background-color: #1c1c1c; }
76
- 50% { background-color: #000000; }
77
- 100% { background-color: #1c1c1c; }
78
- }
79
-
80
- header, footer {
81
- text-align: center;
82
- background: linear-gradient(90deg, #6a11cb, #2575fc);
83
- color: white;
84
- padding: 1rem;
85
- border-radius: 15px;
86
- margin-bottom: 1rem;
87
- box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
88
- }
89
-
90
- .chatbot-container {
91
- display: flex;
92
- flex-direction: column;
93
- justify-content: space-between;
94
- border-radius: 15px;
95
- background: rgba(50, 50, 50, 0.8);
96
- padding: 1rem;
97
- height: 400px;
98
- overflow-y: auto;
99
- box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.8);
100
- }
101
-
102
- input, button {
103
- border: none;
104
- padding: 0.8rem;
105
- border-radius: 10px;
106
- margin: 0.5rem 0;
107
- outline: none;
108
- }
109
-
110
- input {
111
- background: #222;
112
- color: #fff;
113
- font-size: 1rem;
114
- }
115
-
116
- button {
117
- background: linear-gradient(90deg, #ff6a95, #ff4b81);
118
- color: white;
119
- font-weight: bold;
120
- cursor: pointer;
121
- transition: transform 0.2s, background 0.2s;
122
- }
123
-
124
- button:hover {
125
- transform: scale(1.05);
126
- background: linear-gradient(90deg, #ff4b81, #ff6a95);
127
- }
128
-
129
- .chat-category {
130
- background: rgba(40, 40, 40, 0.8);
131
- border: 2px solid #6a11cb;
132
- margin: 1rem 0;
133
- padding: 1rem;
134
- border-radius: 10px;
135
- transition: transform 0.2s, box-shadow 0.2s;
136
- color: #fff;
137
- }
138
-
139
- .chat-category:hover {
140
- transform: translateY(-3px);
141
- box-shadow: 0px 4px 15px rgba(106, 17, 203, 0.8);
142
- }
143
-
144
- h1, h3 {
145
- color: #ffffff;
146
- }
147
-
148
- p {
149
- color: #b3b3b3;
150
- }
151
- """)
152
-
153
- with chat_interface:
154
- with gr.Row():
155
- gr.Markdown("<h1 style='text-align:center;'>🌌 Dark-Themed Motivational Chatbot</h1>")
156
- with gr.Row():
157
- gr.Markdown("**Feeling stressed or unmotivated? Share your thoughts and let me help!**")
158
- with gr.Row():
159
- chatbot_output = gr.Chatbot(label="Motivator Bot")
160
- with gr.Row():
161
- user_input = gr.Textbox(label="Your Message", placeholder="Type something...")
162
- send_button = gr.Button("Send")
163
- with gr.Row():
164
- saved_chats_display = gr.HTML(label="Saved Chats", value=display_saved_chats())
165
- refresh_button = gr.Button("Refresh Saved Chats")
166
-
167
- def handle_interaction(user_input, history):
168
- if not user_input.strip():
169
- return history, display_saved_chats()
170
- updated_history, _ = chatbot(user_input, history)
171
- return updated_history, display_saved_chats()
172
-
173
- send_button.click(handle_interaction, inputs=[user_input, chatbot_output], outputs=[chatbot_output, saved_chats_display])
174
- refresh_button.click(display_saved_chats, inputs=[], outputs=saved_chats_display)
175
-
176
- if __name__ == "__main__":
177
- chat_interface.launch()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  history.append((f"({topic}) You: {user_input}", f"Motivator Bot: {bot_response}"))
51
  return history, saved_chats
52
 
53
+ # Custom HTML, CSS, and JavaScript
54
+ custom_html = """
55
+ <!DOCTYPE html>
56
+ <html lang="en">
57
+ <head>
58
+ <meta charset="UTF-8">
59
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
60
+ <title>Motivational Chatbot</title>
61
+ <style>
62
+ body {
63
+ font-family: 'Poppins', sans-serif;
64
+ background: #121212;
65
+ color: #f3f3f3;
66
+ margin: 0;
67
+ padding: 0;
68
+ display: flex;
69
+ justify-content: center;
70
+ align-items: center;
71
+ height: 100vh;
72
+ }
73
+ .container {
74
+ width: 90%;
75
+ max-width: 800px;
76
+ background: #1e1e1e;
77
+ border-radius: 15px;
78
+ box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
79
+ overflow: hidden;
80
+ display: flex;
81
+ flex-direction: column;
82
+ }
83
+ header {
84
+ background: #282828;
85
+ padding: 20px;
86
+ text-align: center;
87
+ color: #ffffff;
88
+ border-bottom: 2px solid #ff6a95;
89
+ }
90
+ header h1 {
91
+ margin: 0;
92
+ font-size: 1.8rem;
93
+ }
94
+ header p {
95
+ margin: 5px 0 0;
96
+ font-size: 1rem;
97
+ color: #cccccc;
98
+ }
99
+ main {
100
+ flex: 1;
101
+ padding: 20px;
102
+ display: flex;
103
+ flex-direction: column;
104
+ }
105
+ .chat-container {
106
+ display: flex;
107
+ flex-direction: column;
108
+ height: 100%;
109
+ }
110
+ #chat-output {
111
+ flex: 1;
112
+ overflow-y: auto;
113
+ background: #212121;
114
+ border-radius: 10px;
115
+ padding: 10px;
116
+ margin-bottom: 10px;
117
+ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
118
+ }
119
+ .chat-input {
120
+ display: flex;
121
+ gap: 10px;
122
+ }
123
+ textarea {
124
+ flex: 1;
125
+ padding: 10px;
126
+ border-radius: 5px;
127
+ border: none;
128
+ background: #333;
129
+ color: #fff;
130
+ resize: none;
131
+ font-size: 1rem;
132
+ }
133
+ textarea:focus {
134
+ outline: none;
135
+ box-shadow: 0 0 5px #ff6a95;
136
+ }
137
+ button {
138
+ padding: 10px 20px;
139
+ background: linear-gradient(45deg, #ff6a95, #ff4b81);
140
+ border: none;
141
+ border-radius: 5px;
142
+ color: #fff;
143
+ font-weight: bold;
144
+ cursor: pointer;
145
+ transition: background 0.3s, transform 0.3s;
146
+ }
147
+ button:hover {
148
+ background: linear-gradient(45deg, #ff4b81, #ff6a95);
149
+ transform: scale(1.05);
150
+ }
151
+ footer {
152
+ background: #282828;
153
+ text-align: center;
154
+ padding: 10px;
155
+ color: #999;
156
+ font-size: 0.9rem;
157
+ border-top: 2px solid #ff6a95;
158
+ }
159
+ </style>
160
+ </head>
161
+ <body>
162
+ <div class="container">
163
+ <header>
164
+ <h1>✨ Motivational Chatbot ✨</h1>
165
+ <p>Your personal motivational speaker!</p>
166
+ </header>
167
+ <main>
168
+ <div class="chat-container">
169
+ <div id="chat-output"></div>
170
+ <div class="chat-input">
171
+ <textarea id="user-input" placeholder="Type your message here..."></textarea>
172
+ <button id="send-btn">Send</button>
173
+ </div>
174
+ </div>
175
+ </main>
176
+ <footer>
177
+ <p>Developed with ❤️ using OpenAI APIs</p>
178
+ </footer>
179
+ </div>
180
+ <script>
181
+ document.getElementById("send-btn").addEventListener("click", async () => {
182
+ const userInput = document.getElementById("user-input").value.trim();
183
+ if (!userInput) return;
184
+
185
+ // Display user input
186
+ const chatOutput = document.getElementById("chat-output");
187
+ const userMessage = `<div class="user-message"><strong>You:</strong> ${userInput}</div>`;
188
+ chatOutput.innerHTML += userMessage;
189
+
190
+ // Call backend
191
+ const response = await fetch("/chat", {
192
+ method: "POST",
193
+ headers: { "Content-Type": "application/json" },
194
+ body: JSON.stringify({ user_input: userInput })
195
+ });
196
+ const botResponse = await response.json();
197
+
198
+ // Display bot response
199
+ const botMessage = `<div class="bot-message"><strong>Bot:</strong> ${botResponse}</div>`;
200
+ chatOutput.innerHTML += botMessage;
201
+
202
+ // Clear input
203
+ document.getElementById("user-input").value = "";
204
+ chatOutput.scrollTop = chatOutput.scrollHeight;
205
+ });
206
+ </script>
207
+ </body>
208
+ </html>
209
+ """
210
+
211
+ # Launch Gradio interface with custom frontend
212
+ interface = gr.Interface(
213
+ fn=chatbot,
214
+ inputs=[gr.Textbox(lines=2, label="Your Message"), gr.State()],
215
+ outputs=[gr.JSON(), gr.State()],
216
+ live=True
217
+ )
218
+
219
+ app = gr.HTML(custom_html, live=True)
220
+ interface.launch(share=True)