Sarath0x8f commited on
Commit
ac80b8c
·
verified ·
1 Parent(s): 7ef8bf9

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +139 -179
app.py CHANGED
@@ -12,7 +12,7 @@ client = InferenceClient(
12
  token=os.getenv("token")
13
  )
14
 
15
- # Chatbot response function (unchanged)
16
  def respond(
17
  message,
18
  history: list[tuple[str, str]],
@@ -31,14 +31,19 @@ def respond(
31
  }
32
 
33
  messages = [system_message]
 
 
34
  for val in history:
35
  if val[0]:
36
  messages.append({"role": "user", "content": val[0]})
37
  if val[1]:
38
  messages.append({"role": "assistant", "content": val[1]})
 
 
39
  messages.append({"role": "user", "content": message})
40
  response = ""
41
 
 
42
  for message_chunk in client.chat_completion(
43
  messages,
44
  max_tokens=max_tokens,
@@ -72,226 +77,181 @@ website_logo_encoded = encode_image("Images/ai-logo.png")
72
 
73
  # Custom CSS for enhanced UI
74
  custom_css = """
75
- /* General styling */
76
  body {
77
- background-color: #f5f7fa;
 
78
  }
79
 
80
- /* Chatbot styling */
81
- .chatbot .message {
82
- border-radius: 12px;
83
- padding: 12px;
84
- margin: 8px 0;
85
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
86
- }
87
- .chatbot .user-message {
88
- background-color: #007bff;
89
- color: white;
90
- }
91
- .chatbot .bot-message {
92
- background-color: #e9ecef;
93
- color: #333;
94
  }
95
 
96
  /* Tab styling */
 
 
 
 
 
 
 
97
  .tab-nav button {
98
  font-weight: 600;
99
- transition: all 0.3s ease;
 
100
  }
 
101
  .tab-nav button:hover {
102
- background-color: #007bff;
103
- color: white;
104
  }
105
 
106
- /* Footer styling */
107
- .footer {
108
- display: flex;
109
- justify-content: center;
110
- gap: 20px;
111
- padding: 20px;
112
- background-color: #343a40;
113
  border-radius: 8px;
 
 
 
114
  }
115
- .footer img {
116
- width: 32px;
117
- height: 32px;
118
- transition: transform 0.3s ease;
 
 
119
  }
120
- .footer img:hover {
121
- transform: scale(1.2);
 
 
122
  }
123
 
124
- /* Sidebar styling */
125
- .sidebar {
126
- background-color: #ffffff;
127
- padding: 20px;
128
- border-right: 1px solid #dee2e6;
129
- box-shadow: 2px 0 5px rgba(0,0,0,0.1);
130
  }
131
 
132
- /* Responsive design */
133
- @media (max-width: 768px) {
134
- .chatbot {
135
- height: 60vh !important;
136
- }
137
- .footer img {
138
- width: 24px;
139
- height: 24px;
140
- }
141
  }
142
 
143
- /* Loading spinner */
144
- .spinner {
145
- border: 4px solid #f3f3f3;
146
- border-top: 4px solid #007bff;
147
- border-radius: 50%;
148
- width: 24px;
149
- height: 24px;
150
- animation: spin 1s linear infinite;
151
- margin: 10px auto;
152
  }
153
- @keyframes spin {
154
- 0% { transform: rotate(0deg); }
155
- 100% { transform: rotate(360deg); }
156
  }
157
 
158
- /* Download button */
159
- .download-btn {
160
- background-color: #28a745;
161
- color: white;
 
 
162
  padding: 10px 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
163
  border-radius: 8px;
164
- text-decoration: none;
165
- transition: background-color 0.3s ease;
166
  }
167
- .download-btn:hover {
168
- background-color: #218838;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
169
  }
170
  """
171
 
172
- # Gradio interface
173
  with gr.Blocks(
174
  theme=gr.themes.Soft(
175
  primary_hue="blue",
176
  secondary_hue="gray",
177
- font=[gr.themes.GoogleFont("Roboto"), "Arial", "sans-serif"],
 
178
  radius_size="lg",
 
179
  ),
180
  css=custom_css
181
  ) as main:
182
- # Welcome banner
183
  gr.Markdown(
184
- """
185
- # Welcome to SARATH's Portfolio
186
- **BTech Final-Year Student | AI & ML Enthusiast | Job Seeker**
187
- Explore my projects, skills, and resume below.
188
- """,
189
- elem_classes=["welcome-banner"]
190
  )
191
-
192
- with gr.Row():
193
- # Sidebar for navigation
194
- with gr.Column(scale=1, min_width=200):
195
- gr.Markdown("## Navigation", elem_classes=["sidebar-title"])
196
- gr.Button("Chat with SARATH", link="#chat", elem_classes=["nav-btn"])
197
- gr.Button("View Resume", link="#resume", elem_classes=["nav-btn"])
198
- gr.Button("Download Resume", link="path/to/resume.pdf", elem_classes=["download-btn"])
199
- gr.Markdown("### Connect with Me")
200
- gr.HTML(
201
- f"""
202
- <div class='footer'>
203
- <a href='https://github.com/your-profile' aria-label='GitHub Profile'>
204
- <img src='data:image/png;base64,{github_logo_encoded}' alt='GitHub Logo'>
205
- </a>
206
- <a href='https://linkedin.com/in/your-profile' aria-label='LinkedIn Profile'>
207
- <img src='data:image/png;base64,{linkedin_logo_encoded}' alt='LinkedIn Logo'>
208
- </a>
209
- <a href='https://your-website.com' aria-label='Personal Website'>
210
- <img src='data:image/png;base64,{website_logo_encoded}' alt='Website Logo'>
211
- </a>
212
- </div>
213
- """
 
 
 
 
 
214
  )
 
215
 
216
- # Main content
217
- with gr.Column(scale=4):
218
- with gr.Tabs():
219
- with gr.TabItem("Chat with SARATH", id="chat"):
220
- gr.Markdown(
221
- """
222
- ### Ask Me Anything!
223
- I'm SARATH, a BTech student specializing in AI/ML. Ask about my projects, skills, or experience.
224
- """,
225
- elem_classes=["tab-header"]
226
- )
227
- gr.ChatInterface(
228
- respond,
229
- chatbot=gr.Chatbot(
230
- height="60vh",
231
- show_copy_button=True,
232
- bubble_full_width=False,
233
- avatar_images=(None, "Images/ai-logo.png"),
234
- elem_classes=["chatbot"]
235
- ),
236
- examples=[
237
- {"text": "Tell me about yourself", "tooltip": "Learn about SARATH's background and interests."},
238
- {"text": "Can you walk me through some of your recent projects?", "tooltip": "Explore SARATH's project portfolio."},
239
- {"text": "What specific skills do you bring to AI/ML initiatives?", "tooltip": "Discover SARATH's technical expertise."},
240
- {"text": "How do you stay updated with AI/ML trends?", "tooltip": "Understand SARATH's learning approach."},
241
- ],
242
- additional_inputs=[
243
- gr.Slider(
244
- minimum=0.1,
245
- maximum=1.0,
246
- value=0.4,
247
- label="Temperature",
248
- info="Controls response creativity"
249
- ),
250
- gr.Slider(
251
- minimum=512,
252
- maximum=2048,
253
- value=1024,
254
- step=512,
255
- label="Max Tokens",
256
- info="Controls response length"
257
- )
258
- ],
259
- submit_btn=gr.Button("Send", variant="primary", elem_classes=["submit-btn"]),
260
- retry_btn=None,
261
- undo_btn=None,
262
- clear_btn=gr.Button("Clear Chat", variant="secondary"),
263
- loading_component=gr.HTML("<div class='spinner'></div>")
264
- )
265
- gr.Markdown(md.description)
266
-
267
- with gr.TabItem("Resume", id="resume"):
268
- gr.Markdown(
269
- """
270
- ### My Resume
271
- Below is a detailed overview of my education, skills, and projects.
272
- """,
273
- elem_classes=["tab-header"]
274
- )
275
- gr.Markdown(data)
276
- gr.Button("Download Resume", link="path/to/resume.pdf", elem_classes=["download-btn"])
277
-
278
- # Footer
279
- gr.HTML(
280
- f"""
281
- <div class='footer' role='contentinfo' aria-label='Social Links and Contact'>
282
- <a href='https://github.com/your-profile' aria-label='GitHub Profile'>
283
- <img src='data:image/png;base64,{github_logo_encoded}' alt='GitHub Logo'>
284
- </a>
285
- <a href='https://linkedin.com/in/your-profile' aria-label='LinkedIn Profile'>
286
- <img src='data:image/png;base64,{linkedin_logo_encoded}' alt='LinkedIn Logo'>
287
- </a>
288
- <a href='https://your-website.com' aria-label='Personal Website'>
289
- <img src='data:image/png;base64,{website_logo_encoded}' alt='Website Logo'>
290
- </a>
291
- </div>
292
- <p styleEAD: style='text-align: center;'>© {datetime.datetime.now().year} SARATH. All rights reserved.</p>
293
- """
294
- )
295
 
296
  if __name__ == "__main__":
297
  main.launch(share=True)
 
12
  token=os.getenv("token")
13
  )
14
 
15
+ # Chatbot response function with integrated system message
16
  def respond(
17
  message,
18
  history: list[tuple[str, str]],
 
31
  }
32
 
33
  messages = [system_message]
34
+
35
+ # Add chat history
36
  for val in history:
37
  if val[0]:
38
  messages.append({"role": "user", "content": val[0]})
39
  if val[1]:
40
  messages.append({"role": "assistant", "content": val[1]})
41
+
42
+ # Add current message
43
  messages.append({"role": "user", "content": message})
44
  response = ""
45
 
46
+ # Streaming safe decoding
47
  for message_chunk in client.chat_completion(
48
  messages,
49
  max_tokens=max_tokens,
 
77
 
78
  # Custom CSS for enhanced UI
79
  custom_css = """
80
+ /* General layout styling */
81
  body {
82
+ background-color: #f4f7fc;
83
+ font-family: 'Roboto Mono', monospace;
84
  }
85
 
86
+ /* Chatbot container */
87
+ .gradio-container {
88
+ max-width: 1200px;
89
+ margin: 0 auto;
90
+ padding: 20px;
 
 
 
 
 
 
 
 
 
91
  }
92
 
93
  /* Tab styling */
94
+ .tab-nav {
95
+ background-color: #ffffff;
96
+ border-radius: 8px;
97
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
98
+ margin-bottom: 20px;
99
+ }
100
+
101
  .tab-nav button {
102
  font-weight: 600;
103
+ color: #333;
104
+ padding: 12px 24px;
105
  }
106
+
107
  .tab-nav button:hover {
108
+ background-color: #e6f0fa;
 
109
  }
110
 
111
+ /* Chatbot area */
112
+ .chatbot {
 
 
 
 
 
113
  border-radius: 8px;
114
+ background-color: #ffffff;
115
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
116
+ padding: 20px;
117
  }
118
+
119
+ /* Chat messages */
120
+ .chatbot .message {
121
+ border-radius: 12px;
122
+ margin: 10px 0;
123
+ padding: 15px;
124
  }
125
+
126
+ .chatbot .user-message {
127
+ background-color: #e6f0fa;
128
+ color: #1a3c6e;
129
  }
130
 
131
+ .chatbot .bot-message {
132
+ background-color: #f0f4f8;
133
+ color: #2d3748;
 
 
 
134
  }
135
 
136
+ /* Input box */
137
+ input[type="text"] {
138
+ border: 1px solid #d1d5db;
139
+ border-radius: 8px;
140
+ padding: 12px;
141
+ font-size: 16px;
 
 
 
142
  }
143
 
144
+ /* Submit button */
145
+ button.submit {
146
+ background-color: #1a3c6e;
147
+ color: white;
148
+ border-radius: 8px;
149
+ padding: 12px 24px;
150
+ font-weight: 600;
151
+ transition: background-color 0.3s;
 
152
  }
153
+
154
+ button.submit:hover {
155
+ background-color: #2b528b;
156
  }
157
 
158
+ /* Example buttons */
159
+ .examples button {
160
+ background-color: #edf2f7;
161
+ color: #2d3748;
162
+ border-radius: 8px;
163
+ margin: 5px;
164
  padding: 10px 20px;
165
+ font-size: 14px;
166
+ transition: background-color 0.3s;
167
+ }
168
+
169
+ .examples button:hover {
170
+ background-color: #e2e8f0;
171
+ }
172
+
173
+ /* Footer styling */
174
+ footer {
175
+ visibility: visible !important;
176
+ text-align: center;
177
+ margin-top: 20px;
178
+ padding: 20px;
179
+ background-color: #ffffff;
180
  border-radius: 8px;
181
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 
182
  }
183
+
184
+ /* Logo styling */
185
+ footer img {
186
+ width: 32px;
187
+ height: 32px;
188
+ margin: 0 10px;
189
+ transition: transform 0.3s;
190
+ }
191
+
192
+ footer img:hover {
193
+ transform: scale(1.1);
194
+ }
195
+
196
+ /* Markdown content */
197
+ .markdown {
198
+ line-height: 1.6;
199
+ color: #2d3748;
200
  }
201
  """
202
 
203
+ # Gradio interface with enhanced UI
204
  with gr.Blocks(
205
  theme=gr.themes.Soft(
206
  primary_hue="blue",
207
  secondary_hue="gray",
208
+ neutral_hue="slate",
209
+ font=[gr.themes.GoogleFont("Roboto Mono"), "Arial", "sans-serif"],
210
  radius_size="lg",
211
+ spacing_size="md",
212
  ),
213
  css=custom_css
214
  ) as main:
 
215
  gr.Markdown(
216
+ md.title,
217
+ elem_classes=["markdown"],
218
+ header_links=True
 
 
 
219
  )
220
+ with gr.Tabs(elem_classes=["tab-nav"]):
221
+ with gr.TabItem("My2.0", visible=True, interactive=True):
222
+ gr.ChatInterface(
223
+ respond,
224
+ chatbot=gr.Chatbot(
225
+ height=600,
226
+ elem_classes=["chatbot"],
227
+ bubble_full_width=False,
228
+ show_copy_button=True,
229
+ avatar_images=(None, "Images/ai-logo.png"),
230
+ render_markdown=True
231
+ ),
232
+ textbox=gr.Textbox(
233
+ placeholder="Ask me about my skills, projects, or experience!",
234
+ scale=7,
235
+ max_lines=5
236
+ ),
237
+ submit_btn=gr.Button("Send", variant="primary", elem_classes=["submit"]),
238
+ retry_btn=gr.Button("Retry", variant="secondary"),
239
+ undo_btn=gr.Button("Undo", variant="secondary"),
240
+ clear_btn=gr.Button("Clear", variant="stop"),
241
+ examples=[
242
+ "Tell me about yourself",
243
+ "Can you walk me through some of your recent projects and explain the role you played in each?",
244
+ "What specific skills do you bring to the table that would benefit our company's AI/ML initiatives?",
245
+ "How do you stay updated with the latest trends and advancements in AI and Machine Learning?",
246
+ ],
247
+ examples_per_page=4,
248
  )
249
+ gr.Markdown(md.description, elem_classes=["markdown"])
250
 
251
+ with gr.TabItem("Resume", visible=True, interactive=True):
252
+ gr.Markdown(data, elem_classes=["markdown"])
253
+
254
+ gr.HTML(md.footer.format(github_logo_encoded, linkedin_logo_encoded, website_logo_encoded))
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
255
 
256
  if __name__ == "__main__":
257
  main.launch(share=True)