Update app.py

app.py

@@ -12,7 +12,7 @@ client = InferenceClient(
     token=os.getenv("token")
 )
 
-# Chatbot response function (unchanged)
+# Chatbot response function with integrated system message
 def respond(
         message,
         history: list[tuple[str, str]],
@@ -31,14 +31,19 @@ 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,
@@ -72,226 +77,181 @@ website_logo_encoded = encode_image("Images/ai-logo.png")
 
 # Custom CSS for enhanced UI
 custom_css = """
-/* General styling */
+/* General layout styling */
 body {
-    background-color: #f5f7fa;
+    background-color: #f4f7fc;
+    font-family: 'Roboto Mono', monospace;
 }
 
-/* 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;
+/* Chatbot container */
+.gradio-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
 }
 
 /* Tab styling */
+.tab-nav {
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin-bottom: 20px;
+}
+
 .tab-nav button {
     font-weight: 600;
-    transition: all 0.3s ease;
+    color: #333;
+    padding: 12px 24px;
 }
+
 .tab-nav button:hover {
-    background-color: #007bff;
-    color: white;
+    background-color: #e6f0fa;
 }
 
-/* Footer styling */
-.footer {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    padding: 20px;
-    background-color: #343a40;
+/* Chatbot area */
+.chatbot {
     border-radius: 8px;
+    background-color: #ffffff;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    padding: 20px;
 }
-.footer img {
-    width: 32px;
-    height: 32px;
-    transition: transform 0.3s ease;
+
+/* Chat messages */
+.chatbot .message {
+    border-radius: 12px;
+    margin: 10px 0;
+    padding: 15px;
 }
-.footer img:hover {
-    transform: scale(1.2);
+
+.chatbot .user-message {
+    background-color: #e6f0fa;
+    color: #1a3c6e;
 }
 
-/* Sidebar styling */
-.sidebar {
-    background-color: #ffffff;
-    padding: 20px;
-    border-right: 1px solid #dee2e6;
-    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+.chatbot .bot-message {
+    background-color: #f0f4f8;
+    color: #2d3748;
 }
 
-/* Responsive design */
-@media (max-width: 768px) {
-    .chatbot {
-        height: 60vh !important;
-    }
-    .footer img {
-        width: 24px;
-        height: 24px;
-    }
+/* Input box */
+input[type="text"] {
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    padding: 12px;
+    font-size: 16px;
 }
 
-/* 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;
+/* Submit button */
+button.submit {
+    background-color: #1a3c6e;
+    color: white;
+    border-radius: 8px;
+    padding: 12px 24px;
+    font-weight: 600;
+    transition: background-color 0.3s;
 }
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+
+button.submit:hover {
+    background-color: #2b528b;
 }
 
-/* Download button */
-.download-btn {
-    background-color: #28a745;
-    color: white;
+/* Example buttons */
+.examples button {
+    background-color: #edf2f7;
+    color: #2d3748;
+    border-radius: 8px;
+    margin: 5px;
     padding: 10px 20px;
+    font-size: 14px;
+    transition: background-color 0.3s;
+}
+
+.examples button:hover {
+    background-color: #e2e8f0;
+}
+
+/* Footer styling */
+footer {
+    visibility: visible !important;
+    text-align: center;
+    margin-top: 20px;
+    padding: 20px;
+    background-color: #ffffff;
     border-radius: 8px;
-    text-decoration: none;
-    transition: background-color 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
-.download-btn:hover {
-    background-color: #218838;
+
+/* Logo styling */
+footer img {
+    width: 32px;
+    height: 32px;
+    margin: 0 10px;
+    transition: transform 0.3s;
+}
+
+footer img:hover {
+    transform: scale(1.1);
+}
+
+/* Markdown content */
+.markdown {
+    line-height: 1.6;
+    color: #2d3748;
 }
 """
 
-# Gradio interface
+# Gradio interface with enhanced UI
 with gr.Blocks(
     theme=gr.themes.Soft(
         primary_hue="blue",
         secondary_hue="gray",
-        font=[gr.themes.GoogleFont("Roboto"), "Arial", "sans-serif"],
+        neutral_hue="slate",
+        font=[gr.themes.GoogleFont("Roboto Mono"), "Arial", "sans-serif"],
         radius_size="lg",
+        spacing_size="md",
     ),
     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"]
+        md.title,
+        elem_classes=["markdown"],
+        header_links=True
     )
-
-    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>
-                """
+    with gr.Tabs(elem_classes=["tab-nav"]):
+        with gr.TabItem("My2.0", visible=True, interactive=True):
+            gr.ChatInterface(
+                respond,
+                chatbot=gr.Chatbot(
+                    height=600,
+                    elem_classes=["chatbot"],
+                    bubble_full_width=False,
+                    show_copy_button=True,
+                    avatar_images=(None, "Images/ai-logo.png"),
+                    render_markdown=True
+                ),
+                textbox=gr.Textbox(
+                    placeholder="Ask me about my skills, projects, or experience!",
+                    scale=7,
+                    max_lines=5
+                ),
+                submit_btn=gr.Button("Send", variant="primary", elem_classes=["submit"]),
+                retry_btn=gr.Button("Retry", variant="secondary"),
+                undo_btn=gr.Button("Undo", variant="secondary"),
+                clear_btn=gr.Button("Clear", variant="stop"),
+                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?",
+                ],
+                examples_per_page=4,
             )
+            gr.Markdown(md.description, elem_classes=["markdown"])
 
-        # 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"])
-
-    # 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>
-        """
-    )
+        with gr.TabItem("Resume", visible=True, interactive=True):
+            gr.Markdown(data, elem_classes=["markdown"])
+
+    gr.HTML(md.footer.format(github_logo_encoded, linkedin_logo_encoded, website_logo_encoded))
 
 if __name__ == "__main__":
     main.launch(share=True)