Update app.py

app.py

@@ -12,7 +12,7 @@ client = InferenceClient(
     token=os.getenv("token")
 )
 
-# Chatbot response function with integrated system message
+# Chatbot response function (unchanged)
 def respond(
         message,
         history: list[tuple[str, str]],
@@ -31,19 +31,14 @@ def respond(
     }
 
     messages = [system_message]
-
-    # Add chat history
     for val in history:
         if val[0]:
             messages.append({"role": "user", "content": val[0]})
         if val[1]:
             messages.append({"role": "assistant", "content": val[1]})
-
-    # Add current message
     messages.append({"role": "user", "content": message})
     response = ""
 
-    # Streaming safe decoding
     for message_chunk in client.chat_completion(
         messages,
         max_tokens=max_tokens,
@@ -65,39 +60,238 @@ def respond(
 
     print(f"{datetime.datetime.now()}::{messages[-1]['content']}->{response}\n")
 
-
 # Encode image to base64
 def encode_image(image_path):
     with open(image_path, "rb") as image_file:
         return base64.b64encode(image_file.read()).decode('utf-8')
 
-
 # Load and encode logos
 github_logo_encoded = encode_image("Images/github-logo.png")
 linkedin_logo_encoded = encode_image("Images/linkedin-logo.png")
 website_logo_encoded = encode_image("Images/ai-logo.png")
 
+# Custom CSS for enhanced UI
+custom_css = """
+/* General styling */
+body {
+    background-color: #f5f7fa;
+}
+
+/* Chatbot styling */
+.chatbot .message {
+    border-radius: 12px;
+    padding: 12px;
+    margin: 8px 0;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+.chatbot .user-message {
+    background-color: #007bff;
+    color: white;
+}
+.chatbot .bot-message {
+    background-color: #e9ecef;
+    color: #333;
+}
+
+/* Tab styling */
+.tab-nav button {
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+.tab-nav button:hover {
+    background-color: #007bff;
+    color: white;
+}
+
+/* Footer styling */
+.footer {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+    background-color: #343a40;
+    border-radius: 8px;
+}
+.footer img {
+    width: 32px;
+    height: 32px;
+    transition: transform 0.3s ease;
+}
+.footer img:hover {
+    transform: scale(1.2);
+}
+
+/* Sidebar styling */
+.sidebar {
+    background-color: #ffffff;
+    padding: 20px;
+    border-right: 1px solid #dee2e6;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .chatbot {
+        height: 60vh !important;
+    }
+    .footer img {
+        width: 24px;
+        height: 24px;
+    }
+}
+
+/* Loading spinner */
+.spinner {
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #007bff;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    animation: spin 1s linear infinite;
+    margin: 10px auto;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Download button */
+.download-btn {
+    background-color: #28a745;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 8px;
+    text-decoration: none;
+    transition: background-color 0.3s ease;
+}
+.download-btn:hover {
+    background-color: #218838;
+}
+"""
+
 # Gradio interface
-with gr.Blocks(theme=gr.themes.Ocean(font=[gr.themes.GoogleFont("Roboto Mono")]), css='footer {visibility: hidden}') as main:
-    gr.Markdown(md.title)
-    with gr.Tabs():
-        with gr.TabItem("My2.0", visible=True, interactive=True):
-            gr.ChatInterface(
-                respond,
-                chatbot=gr.Chatbot(height=500),
-                examples=[
-                    "Tell me about yourself",
-                    'Can you walk me through some of your recent projects and explain the role you played in each?',
-                    "What specific skills do you bring to the table that would benefit our company's AI/ML initiatives?",
-                    "How do you stay updated with the latest trends and advancements in AI and Machine Learning?",
-                ]
+with gr.Blocks(
+    theme=gr.themes.Soft(
+        primary_hue="blue",
+        secondary_hue="gray",
+        font=[gr.themes.GoogleFont("Roboto"), "Arial", "sans-serif"],
+        radius_size="lg",
+    ),
+    css=custom_css
+) as main:
+    # Welcome banner
+    gr.Markdown(
+        """
+        # Welcome to SARATH's Portfolio
+        **BTech Final-Year Student | AI & ML Enthusiast | Job Seeker**
+        Explore my projects, skills, and resume below.
+        """,
+        elem_classes=["welcome-banner"]
+    )
+
+    with gr.Row():
+        # Sidebar for navigation
+        with gr.Column(scale=1, min_width=200):
+            gr.Markdown("## Navigation", elem_classes=["sidebar-title"])
+            gr.Button("Chat with SARATH", link="#chat", elem_classes=["nav-btn"])
+            gr.Button("View Resume", link="#resume", elem_classes=["nav-btn"])
+            gr.Button("Download Resume", link="path/to/resume.pdf", elem_classes=["download-btn"])
+            gr.Markdown("### Connect with Me")
+            gr.HTML(
+                f"""
+                <div class='footer'>
+                    <a href='https://github.com/your-profile' aria-label='GitHub Profile'>
+                        <img src='data:image/png;base64,{github_logo_encoded}' alt='GitHub Logo'>
+                    </a>
+                    <a href='https://linkedin.com/in/your-profile' aria-label='LinkedIn Profile'>
+                        <img src='data:image/png;base64,{linkedin_logo_encoded}' alt='LinkedIn Logo'>
+                    </a>
+                    <a href='https://your-website.com' aria-label='Personal Website'>
+                        <img src='data:image/png;base64,{website_logo_encoded}' alt='Website Logo'>
+                    </a>
+                </div>
+                """
             )
-            gr.Markdown(md.description)
 
-        with gr.TabItem("Resume", visible=True, interactive=True):
-            gr.Markdown(data)
+        # Main content
+        with gr.Column(scale=4):
+            with gr.Tabs():
+                with gr.TabItem("Chat with SARATH", id="chat"):
+                    gr.Markdown(
+                        """
+                        ### Ask Me Anything!
+                        I'm SARATH, a BTech student specializing in AI/ML. Ask about my projects, skills, or experience.
+                        """,
+                        elem_classes=["tab-header"]
+                    )
+                    gr.ChatInterface(
+                        respond,
+                        chatbot=gr.Chatbot(
+                            height="60vh",
+                            show_copy_button=True,
+                            bubble_full_width=False,
+                            avatar_images=(None, "Images/ai-logo.png"),
+                            elem_classes=["chatbot"]
+                        ),
+                        examples=[
+                            {"text": "Tell me about yourself", "tooltip": "Learn about SARATH's background and interests."},
+                            {"text": "Can you walk me through some of your recent projects?", "tooltip": "Explore SARATH's project portfolio."},
+                            {"text": "What specific skills do you bring to AI/ML initiatives?", "tooltip": "Discover SARATH's technical expertise."},
+                            {"text": "How do you stay updated with AI/ML trends?", "tooltip": "Understand SARATH's learning approach."},
+                        ],
+                        additional_inputs=[
+                            gr.Slider(
+                                minimum=0.1,
+                                maximum=1.0,
+                                value=0.4,
+                                label="Temperature",
+                                info="Controls response creativity"
+                            ),
+                            gr.Slider(
+                                minimum=512,
+                                maximum=2048,
+                                value=1024,
+                                step=512,
+                                label="Max Tokens",
+                                info="Controls response length"
+                            )
+                        ],
+                        submit_btn=gr.Button("Send", variant="primary", elem_classes=["submit-btn"]),
+                        retry_btn=None,
+                        undo_btn=None,
+                        clear_btn=gr.Button("Clear Chat", variant="secondary"),
+                        loading_component=gr.HTML("<div class='spinner'></div>")
+                    )
+                    gr.Markdown(md.description)
+
+                with gr.TabItem("Resume", id="resume"):
+                    gr.Markdown(
+                        """
+                        ### My Resume
+                        Below is a detailed overview of my education, skills, and projects.
+                        """,
+                        elem_classes=["tab-header"]
+                    )
+                    gr.Markdown(data)
+                    gr.Button("Download Resume", link="path/to/resume.pdf", elem_classes=["download-btn"])
 
-    gr.HTML(md.footer.format(github_logo_encoded, linkedin_logo_encoded, website_logo_encoded))
+    # Footer
+    gr.HTML(
+        f"""
+        <div class='footer' role='contentinfo' aria-label='Social Links and Contact'>
+            <a href='https://github.com/your-profile' aria-label='GitHub Profile'>
+                <img src='data:image/png;base64,{github_logo_encoded}' alt='GitHub Logo'>
+            </a>
+            <a href='https://linkedin.com/in/your-profile' aria-label='LinkedIn Profile'>
+                <img src='data:image/png;base64,{linkedin_logo_encoded}' alt='LinkedIn Logo'>
+            </a>
+            <a href='https://your-website.com' aria-label='Personal Website'>
+                <img src='data:image/png;base64,{website_logo_encoded}' alt='Website Logo'>
+            </a>
+        </div>
+        <p styleEAD: style='text-align: center;'>© {datetime.datetime.now().year} SARATH. All rights reserved.</p>
+        """
+    )
 
 if __name__ == "__main__":
     main.launch(share=True)