Update app.py

app.py

@@ -124,70 +124,250 @@ def convert_messages_to_tuples(history: List[Dict[str, str]]) -> List[Tuple[str,
 def create_ui() -> gr.Blocks:
     """Creates and configures the entire Gradio interface."""
 
-    with gr.Blocks(theme=gr.themes.Soft(), title="Hugging Face Repo Analyzer") as app:
+    css = """
+    /* Modern sleek design */
+    .gradio-container {
+        font-family: 'Inter', 'system-ui', sans-serif;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+    }
+    
+    .gr-form {
+        background: rgba(255, 255, 255, 0.95);
+        backdrop-filter: blur(10px);
+        border-radius: 16px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        padding: 24px;
+        margin: 16px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+    
+    .gr-button {
+        background: linear-gradient(45deg, #667eea, #764ba2);
+        border: none;
+        border-radius: 12px;
+        color: white;
+        font-weight: 600;
+        padding: 12px 24px;
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+    }
+    
+    .gr-button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+    }
+    
+    .gr-textbox {
+        border: 2px solid rgba(102, 126, 234, 0.2);
+        border-radius: 12px;
+        background: rgba(255, 255, 255, 0.9);
+        transition: all 0.3s ease;
+    }
+    
+    .gr-textbox:focus {
+        border-color: #667eea;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+    
+    .gr-panel {
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: 16px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+    
+    .gr-tab-nav {
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: 12px 12px 0 0;
+        backdrop-filter: blur(10px);
+    }
+    
+    .gr-tab-nav button {
+        background: transparent;
+        border: none;
+        padding: 16px 24px;
+        font-weight: 600;
+        color: #666;
+        transition: all 0.3s ease;
+    }
+    
+    .gr-tab-nav button.selected {
+        background: linear-gradient(45deg, #667eea, #764ba2);
+        color: white;
+        border-radius: 8px;
+    }
+    
+    .chatbot {
+        border-radius: 16px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    }
+    
+    /* Hide Gradio footer */
+    footer {
+        display: none !important;
+    }
+    
+    /* Custom scrollbar */
+    ::-webkit-scrollbar {
+        width: 8px;
+    }
+    
+    ::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 4px;
+    }
+    
+    ::-webkit-scrollbar-thumb {
+        background: linear-gradient(45deg, #667eea, #764ba2);
+        border-radius: 4px;
+    }
+    """
+
+    with gr.Blocks(
+        theme=gr.themes.Soft(
+            primary_hue="blue",
+            secondary_hue="purple",
+            neutral_hue="gray",
+            font=["Inter", "system-ui", "sans-serif"]
+        ), 
+        css=css, 
+        title="🚀 HF Repo Analyzer"
+    ) as app:
         
         # --- State Management ---
         # Using simple, separate state objects for robustness.
         repo_ids_state = gr.State([])
         current_repo_idx_state = gr.State(0)
 
-        gr.Markdown("# Hugging Face Repository Analyzer")
+        gr.Markdown(
+            """
+            <div style="text-align: center; padding: 40px 20px; background: rgba(255, 255, 255, 0.1); border-radius: 20px; margin: 20px auto; max-width: 900px; backdrop-filter: blur(10px);">
+                <h1 style="font-size: 3.5rem; font-weight: 800; margin: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
+                    🚀 HF Repo Analyzer
+                </h1>
+                <p style="font-size: 1.3rem; color: rgba(255, 255, 255, 0.9); margin: 16px 0 0 0; font-weight: 400; line-height: 1.6;">
+                    Discover, analyze, and evaluate Hugging Face repositories with AI-powered insights
+                </p>
+                <div style="height: 4px; width: 80px; background: linear-gradient(45deg, #667eea, #764ba2); margin: 24px auto; border-radius: 2px;"></div>
+            </div>
+            """
+        )
 
         with gr.Tabs() as tabs:
             # --- Input Tab ---
-            with gr.TabItem("1. Input Repositories", id="input_tab"):
-                with gr.Row():
-                    with gr.Column():
-                        gr.Markdown("## Enter Repository IDs")
+            with gr.TabItem("📝 Input & Search", id="input_tab"):
+                with gr.Row(equal_height=True):
+                    with gr.Column(scale=1):
+                        gr.Markdown("### 📁 Repository IDs")
                         repo_id_input = gr.Textbox(
-                            label="Enter repo IDs (comma or newline separated)",
+                            label="Repository IDs",
                             lines=8,
-                            placeholder="org/repo1, org/repo2"
+                            placeholder="microsoft/DialoGPT-medium\nopenai/whisper\nhuggingface/transformers",
+                            info="Enter repo IDs separated by commas or new lines"
                         )
-                        submit_repo_btn = gr.Button("Submit Repository IDs", variant="primary")
-                    with gr.Column():
-                        gr.Markdown("## Or Search by Keywords")
+                        submit_repo_btn = gr.Button("🚀 Submit Repositories", variant="primary", size="lg")
+                    
+                    with gr.Column(scale=1):
+                        gr.Markdown("### 🔍 Keyword Search")
                         keyword_input = gr.Textbox(
-                            label="Enter keywords to search",
+                            label="Search Keywords",
                             lines=8,
-                            placeholder="e.g., text generation, image classification"
+                            placeholder="text generation\nimage classification\nsentiment analysis",
+                            info="Enter keywords to find relevant repositories"
                         )
-                        search_btn = gr.Button("Search by Keywords", variant="primary")
+                        search_btn = gr.Button("🔎 Search Repositories", variant="primary", size="lg")
                 
-                status_box_input = gr.Textbox(label="Status", interactive=False)
+                status_box_input = gr.Textbox(label="📊 Status", interactive=False, lines=2)
 
             # --- Analysis Tab ---
-            with gr.TabItem("2. Analyze Repositories", id="analysis_tab"):
-                gr.Markdown("## Repository Analysis")
-                analyze_next_btn = gr.Button("Analyze Next Repository", variant="primary")
-                status_box_analysis = gr.Textbox(label="Status", interactive=False)
+            with gr.TabItem("🔬 Analysis", id="analysis_tab"):
+                gr.Markdown("### 🧪 Repository Analysis Engine")
                 
                 with gr.Row():
-                    content_output = gr.Textbox(label="Repository Content", lines=20)
-                    summary_output = gr.Textbox(label="Analysis Summary", lines=20)
+                    analyze_next_btn = gr.Button("⚡ Analyze Next Repository", variant="primary", size="lg", scale=2)
+                    with gr.Column(scale=3):
+                        status_box_analysis = gr.Textbox(label="📈 Analysis Status", interactive=False, lines=2)
+                
+                with gr.Row(equal_height=True):
+                    with gr.Column():
+                        content_output = gr.Textbox(
+                            label="📄 Repository Content", 
+                            lines=20, 
+                            show_copy_button=True,
+                            info="Raw content extracted from the repository"
+                        )
+                    with gr.Column():
+                        summary_output = gr.Textbox(
+                            label="🎯 AI Analysis Summary", 
+                            lines=20, 
+                            show_copy_button=True,
+                            info="Detailed analysis and insights from AI"
+                        )
 
-                gr.Markdown("### Analysis Results Table")
-                df_output = gr.Dataframe(headers=["repo id", "strength", "weaknesses", "speciality", "relevance rating"])
+                gr.Markdown("### 📊 Results Dashboard")
+                df_output = gr.Dataframe(
+                    headers=["Repository", "Strengths", "Weaknesses", "Speciality", "Relevance"],
+                    wrap=True,
+                    interactive=False
+                )
 
             # --- Chatbot Tab ---
-            with gr.TabItem("3. Find Repos with AI", id="chatbot_tab"):
-                gr.Markdown("## Chat with an Assistant to Find Repositories")
+            with gr.TabItem("🤖 AI Assistant", id="chatbot_tab"):
+                gr.Markdown("### 💬 Intelligent Repository Discovery")
+                
                 chatbot = gr.Chatbot(
                     value=[{"role": "assistant", "content": CHATBOT_INITIAL_MESSAGE}],
-                    label="Chat with Assistant",
-                    height=400,
-                    type="messages"
+                    label="🤖 AI Assistant",
+                    height=450,
+                    bubble_full_width=False,
+                    avatar_images=(
+                        "https://cdn-icons-png.flaticon.com/512/149/149071.png",
+                        "https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.png"
+                    ),
+                    show_copy_button=True
                 )
-                msg_input = gr.Textbox(label="Your Message", placeholder="Type your message here...", lines=2)
-                with gr.Row():
-                    send_btn = gr.Button("Send", variant="primary")
-                    end_chat_btn = gr.Button("End Chat & Get Keywords")
                 
-                gr.Markdown("### Extracted Keywords")
-                extracted_keywords_output = gr.Textbox(label="Keywords", interactive=False)
-                use_keywords_btn = gr.Button("Use These Keywords to Search", variant="primary")
-                status_box_chatbot = gr.Textbox(label="Status", interactive=False)
+                with gr.Row():
+                    msg_input = gr.Textbox(
+                        label="💭 Your Message", 
+                        placeholder="Tell me about your ideal repository...", 
+                        lines=1, 
+                        scale=4,
+                        info="Describe what you're looking for"
+                    )
+                    send_btn = gr.Button("📤 Send", variant="primary", scale=1)
+                    end_chat_btn = gr.Button("🎯 Extract Keywords", scale=1)
+                    use_keywords_btn = gr.Button("🔎 Search Now", variant="primary", scale=1)
+
+                with gr.Row():
+                    with gr.Column():
+                        extracted_keywords_output = gr.Textbox(
+                            label="🏷️ Extracted Keywords", 
+                            interactive=False, 
+                            show_copy_button=True,
+                            info="AI-generated search terms from our conversation"
+                        )
+                    with gr.Column():
+                        status_box_chatbot = gr.Textbox(
+                            label="📊 Chat Status", 
+                            interactive=False,
+                            info="Current conversation status"
+                        )
         
+        # --- Footer ---
+        gr.Markdown(
+            """
+            <div style="text-align: center; padding: 30px 20px; margin-top: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 16px; backdrop-filter: blur(10px);">
+                <p style="margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; font-weight: 500;">
+                    🚀 Powered by <span style="background: linear-gradient(45deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700;">Gradio</span> 
+                    & <span style="background: linear-gradient(45deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700;">Hugging Face</span>
+                </p>
+                <div style="height: 2px; width: 60px; background: linear-gradient(45deg, #667eea, #764ba2); margin: 16px auto; border-radius: 1px;"></div>
+            </div>
+            """
+        )
+
         # --- Event Handler Functions ---
 
         def handle_repo_id_submission(text: str) -> Tuple[List[str], int, pd.DataFrame, str, Any]: