Update app.py

app.py

@@ -1,3 +1,10 @@
+"""
+ShazaTwin - AI Assistant
+
+A Gradio-based chatbot that acts as a digital twin for Shaza Aly,
+answering questions about skills, experience, and background.
+"""
+
 import os
 import gradio as gr
 from openai import OpenAI
@@ -21,14 +28,13 @@ client = OpenAI(
 )
 
 # --- 3. THEME CUSTOMIZATION ---
-# Using a built-in cheerful theme that is reliable across versions.
+# Using a cheerful theme with vibrant colors
 cheerful_theme = gr.themes.Soft(
-    primary_hue=gr.themes.colors.blue,
-    secondary_hue=gr.themes.colors.sky,
+    primary_hue=gr.themes.colors.purple,
+    secondary_hue=gr.themes.colors.pink,
     font=gr.themes.GoogleFont("Poppins")
 )
 
-
 # --- 4. Prepare Context for the Chatbot ---
 summary = (
     "I am a 3 years experienced Backend Software Engineer with a strong focus on building scalable, well-architected systems "
@@ -40,11 +46,9 @@ summary = (
     "using gRPC, Redis, and message queues (e.g., RabbitMQ). I'm passionate about automation, developer "
     "tools (e.g., n8n, Copilot, Cursor), and mentoring through technical content. As an ALX alumna, I have a "
     "hands-on mindset and a continuous learning attitude. I am also the author of a technical blog on "
-    "software engineering and AI systems: shazaali.substack.com."
+    "software engineering and AI systems: shazaali.substack.com. "
     "I worked on projects like: Mediconsult, E-commerce, and more. So proud of RAG chatbot I built for suplyd.app"
-
 )
-
 linkedin_text = "My LinkedIn Profile: https://www.linkedin.com/in/shazaali/\n\n"
 try:
     reader = PdfReader("linkedin.pdf")
@@ -61,7 +65,7 @@ system_prompt = (
     f"You are given a summary of my background and my LinkedIn profile to use for answering questions. "
     f"Be professional, friendly, and engaging, as if you are talking to a potential client or future employer. "
     f"If you don't know the answer based on the provided context, it's better to say so than to invent information. "
-    f"Always stay in character as {name} so act like human not ai model. Answer in the same language as the user's question without disclosing any private information."
+    f"Always stay in character as {name}. Answer in the same language as the user's question without disclosing any private information."
     f"\n\n## My Summary:\n{summary}\n\n## My LinkedIn Profile Text:\n{linkedin_text}\n\n## My CV:\n{cv_link}"
 )
 
@@ -81,7 +85,7 @@ def chat(message, history):
     try:
         response = client.chat.completions.create(
             model="openai/gpt-3.5-turbo",
-            max_tokens=1000,
+            max_tokens=300,
             messages=messages,
             temperature=0.7
         )
@@ -90,158 +94,94 @@ def chat(message, history):
         print(f"An error occurred: {e}")
         return "Sorry, I encountered an error while processing your request. Please try again."
 
-# --- 6. Create and Launch the Gradio App (CORRECTED METHOD) ---
+# --- 6. Create and Launch the Gradio App with Your Custom CSS ---
 
-# We use gr.Blocks() to get more control and apply custom CSS reliably.
-with gr.Blocks(theme=cheerful_theme, css="""
-    /* Increase base font size for the entire app */
-    .gradio-container {
-        font-size: 18px !important;
+# The magic happens here: fill_height=True and your refined CSS.
+with gr.Blocks(
+    theme=cheerful_theme,
+    fill_height=True,  # This is crucial for making the app fill the HF Space vertically
+    css="""
+    /* --- Global Layout & Background --- */
+    #root, .gradio-container {
         background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ff 100%) !important;
     }
 
-    /* Make chat messages bigger and more cheerful */
-    .message-wrap { font-size: 20px !important; }
-    .user-message { background-color: #f0e6ff !important; border-radius: 18px !important; }
-    .bot-message { background-color: #f9f5ff !important; border-radius: 18px !important; }
-
-    /* Add a subtle bounce animation to messages */
-    @keyframes bounce {
-        0% { transform: translateY(0); }
-        20% { transform: translateY(-10px); }
-        40% { transform: translateY(0); }
-    }
-    .message:last-child {
-        animation: bounce 1s ease;
-    }
-
-    /* Make the title and description bigger and more colorful */
+    /* --- Titles & Headers --- */
     h1 {
-        font-size: 36px !important;
+        font-size: 42px !important;
         font-weight: 700 !important;
-        margin-bottom: 16px !important;
         background: linear-gradient(90deg, #9333ea, #e879f9);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         text-shadow: 0px 2px 4px rgba(0,0,0,0.1);
-    }
-    h2, h3 { font-size: 24px !important; color: #9333ea !important; }
-
-    /* Make buttons bigger and more cheerful */
-    button {
-        font-size: 18px !important;
-        padding: 12px 20px !important;
-        border-radius: 12px !important;
-        transition: all 0.3s ease !important;
-    }
-    button:hover {
-        transform: translateY(-3px) !important;
-        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
-    }
-
-    /* Make input box MUCH bigger and friendlier */
-    textarea, .chat-input-row textarea {
-        font-size: 24px !important;
-        line-height: 1.5 !important;
-        padding: 16px !important;
-        min-height: 100px !important;
-        border-radius: 16px !important;
-        border: 2px solid #d8b4fe !important;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
-        transition: all 0.3s ease !important;
-    }
-    textarea:focus {
-        border-color: #9333ea !important;
-        box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.3) !important;
+        text-align: center !important;
+        padding-top: 20px !important;
     }
 
-    /* Make the input container bigger */
-    .chat-input-row {
+    /* --- Example Prompts Section --- */
+    .examples-panel {
         padding: 20px !important;
-        margin-top: 20px !important;
+        background-color: rgba(255, 255, 255, 0.7) !important;
+        border-radius: 20px !important;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
     }
-
-    /* Make examples MUCH bigger and more playful */
+    .examples-panel .prose h2 {
+        font-size: 28px !important; color: #7e22ce !important; text-align: center !important; font-weight: 700 !important;
+    }
+    .examples-panel .prose h2::before { content: "✨ "; }
+    .examples-panel .prose h2::after { content: " ✨"; }
     .examples-panel .gr-button {
-        font-size: 26px !important;
+        font-size: 18px !important;
         background-color: #f0e6ff !important;
         border: 2px solid #d8b4fe !important;
-        margin: 10px !important;
-        padding: 20px 24px !important;
+        color: #7e22ce !important;
         transition: all 0.3s ease !important;
         border-radius: 16px !important;
         font-weight: 600 !important;
-        color: #7e22ce !important;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
-        display: block !important;
-        width: 100% !important;
-        text-align: left !important;
     }
     .examples-panel .gr-button:hover {
         background-color: #e9d5ff !important;
         transform: scale(1.03) !important;
         box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
-        border-color: #a855f7 !important;
-    }
-
-    /* Make the examples section more prominent */
-    .examples-panel {
-        padding: 20px !important;
-        background-color: rgba(255, 255, 255, 0.8) !important;
-        border-radius: 20px !important;
-        margin-top: 24px !important;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
-        border: 1px solid #f3e8ff !important;
     }
 
-    /* Make the examples title bigger */
-    .examples-panel .prose h2 {
-        font-size: 28px !important;
-        margin-bottom: 20px !important;
-        color: #7e22ce !important;
-        text-align: center !important;
-        font-weight: 700 !important;
-    }
+    /* --- Chat Area & Messages --- */
+    .message-wrap { font-size: 18px !important; } /* Base message font size */
+    .message { margin-bottom: 12px !important; } /* Space between messages */
+    .user > .message { background-color: #f0e6ff !important; border-radius: 18px !important; }
+    .bot > .message { background-color: #f9f5ff !important; border-radius: 18px !important; }
 
-    /* Add emoji to examples title */
-    .examples-panel .prose h2::before {
-        content: "✨ ";
-    }
-    .examples-panel .prose h2::after {
-        content: " ✨";
-    }
-
-    /* Add more space between chat messages */
-    .message {
+    /* --- Input Textbox & Submit Button --- */
+    textarea {
+        font-size: 20px !important;
+        line-height: 1.5 !important;
         padding: 16px !important;
-        margin-bottom: 16px !important;
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
+        border-radius: 16px !important;
+        border: 2px solid #d8b4fe !important;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
     }
-
-    /* Make the chat container wider */
-    .chat-container { max-width: 90% !important; margin: 0 auto !important; }
-
-    /* Increase padding in the entire app */
-    .gradio-container { padding: 20px !important; }
-
-    /* Make the submit button more prominent and cheerful */
-    .submit-btn {
+    textarea:focus {
+        border-color: #9333ea !important;
+        box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.3) !important;
+    }
+    .send-button { /* More specific selector for the submit button */
         background: linear-gradient(90deg, #9333ea, #d946ef) !important;
         color: white !important;
         font-weight: bold !important;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
-        font-size: 22px !important;
-        padding: 15px 25px !important;
+        font-size: 20px !important;
     }
-    .submit-btn:hover {
+    .send-button:hover {
         background: linear-gradient(90deg, #7e22ce, #c026d3) !important;
         transform: translateY(-2px) !important;
     }
 """) as interface:
     gr.ChatInterface(
         fn=chat,
-        title=f"Chat with me {name}",
-        description="Let's talk about my experience, skills, or projects",
+        # We don't need the title and description here because your CSS h1 is now the main title.
+        chatbot=gr.Chatbot(
+            label="Talk to me: Shaza Aly",
+        ),
         examples=[
             ["What are your main technical skills?"],
             ["Tell me about your experience with AI and RAG chatbots."],
@@ -251,4 +191,4 @@ with gr.Blocks(theme=cheerful_theme, css="""
 
 # Now, launch the interface defined within the Blocks context.
 if __name__ == "__main__":
-    interface.launch()
+    interface.launch()