Spaces:
Runtime error
Runtime error
Update app.py
Browse files
app.py
CHANGED
@@ -12,7 +12,7 @@ client = InferenceClient(
|
|
12 |
token=os.getenv("token")
|
13 |
)
|
14 |
|
15 |
-
# Chatbot response function
|
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: #
|
|
|
78 |
}
|
79 |
|
80 |
-
/* Chatbot
|
81 |
-
.
|
82 |
-
|
83 |
-
|
84 |
-
|
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 |
-
|
|
|
100 |
}
|
|
|
101 |
.tab-nav button:hover {
|
102 |
-
background-color: #
|
103 |
-
color: white;
|
104 |
}
|
105 |
|
106 |
-
/*
|
107 |
-
.
|
108 |
-
display: flex;
|
109 |
-
justify-content: center;
|
110 |
-
gap: 20px;
|
111 |
-
padding: 20px;
|
112 |
-
background-color: #343a40;
|
113 |
border-radius: 8px;
|
|
|
|
|
|
|
114 |
}
|
115 |
-
|
116 |
-
|
117 |
-
|
118 |
-
|
|
|
|
|
119 |
}
|
120 |
-
|
121 |
-
|
|
|
|
|
122 |
}
|
123 |
|
124 |
-
|
125 |
-
|
126 |
-
|
127 |
-
padding: 20px;
|
128 |
-
border-right: 1px solid #dee2e6;
|
129 |
-
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
|
130 |
}
|
131 |
|
132 |
-
/*
|
133 |
-
|
134 |
-
|
135 |
-
|
136 |
-
|
137 |
-
|
138 |
-
width: 24px;
|
139 |
-
height: 24px;
|
140 |
-
}
|
141 |
}
|
142 |
|
143 |
-
/*
|
144 |
-
.
|
145 |
-
|
146 |
-
|
147 |
-
border-radius:
|
148 |
-
|
149 |
-
|
150 |
-
|
151 |
-
margin: 10px auto;
|
152 |
}
|
153 |
-
|
154 |
-
|
155 |
-
|
156 |
}
|
157 |
|
158 |
-
/*
|
159 |
-
.
|
160 |
-
background-color: #
|
161 |
-
color:
|
|
|
|
|
162 |
padding: 10px 20px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
163 |
border-radius: 8px;
|
164 |
-
|
165 |
-
transition: background-color 0.3s ease;
|
166 |
}
|
167 |
-
|
168 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
169 |
}
|
170 |
"""
|
171 |
|
172 |
-
# Gradio interface
|
173 |
with gr.Blocks(
|
174 |
theme=gr.themes.Soft(
|
175 |
primary_hue="blue",
|
176 |
secondary_hue="gray",
|
177 |
-
|
|
|
178 |
radius_size="lg",
|
|
|
179 |
),
|
180 |
css=custom_css
|
181 |
) as main:
|
182 |
-
# Welcome banner
|
183 |
gr.Markdown(
|
184 |
-
|
185 |
-
|
186 |
-
|
187 |
-
Explore my projects, skills, and resume below.
|
188 |
-
""",
|
189 |
-
elem_classes=["welcome-banner"]
|
190 |
)
|
191 |
-
|
192 |
-
|
193 |
-
|
194 |
-
|
195 |
-
|
196 |
-
|
197 |
-
|
198 |
-
|
199 |
-
|
200 |
-
|
201 |
-
|
202 |
-
|
203 |
-
|
204 |
-
|
205 |
-
|
206 |
-
|
207 |
-
|
208 |
-
|
209 |
-
|
210 |
-
|
211 |
-
|
212 |
-
|
213 |
-
|
|
|
|
|
|
|
|
|
|
|
214 |
)
|
|
|
215 |
|
216 |
-
|
217 |
-
|
218 |
-
|
219 |
-
|
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)
|