Update app.py

app.py

@@ -145,42 +145,12 @@ custom_css = """
     min-height: 100vh;
 }
 
-/* Header styling */
-.main-header {
-    text-align: center;
-    padding: 2rem 0;
-    background: rgba(255, 255, 255, 0.8);
-    border-radius: 1rem;
-    margin-bottom: 2rem;
-    backdrop-filter: blur(10px);
-}
-
 /* Chat interface styling */
 .chat-interface {
     max-width: 800px;
     margin: 0 auto;
 }
 
-/* Chatbot messages */
-.message.user {
-    background: linear-gradient(135deg, #EAE4DE 0%, #D9CFC7 100%) !important;
-    border-radius: 1rem 1rem 0.5rem 1rem !important;
-}
-
-.message.bot {
-    background: linear-gradient(135deg, #F7F5F2 0%, #EFEBE7 100%) !important;
-    border-radius: 1rem 1rem 1rem 0.5rem !important;
-    border-left: 4px solid #D97757 !important;
-}
-
-/* Input styling */
-.input-container {
-    background: rgba(255, 255, 255, 0.9) !important;
-    border-radius: 1rem !important;
-    border: 2px solid #EAE8E5 !important;
-    backdrop-filter: blur(10px);
-}
-
 /* Button styling */
 .submit-btn {
     background: linear-gradient(135deg, #D97757 0%, #B85C42 100%) !important;
@@ -194,41 +164,6 @@ custom_css = """
     transform: translateY(-2px) !important;
     box-shadow: 0 8px 25px rgba(217, 119, 87, 0.3) !important;
 }
-
-/* Examples styling */
-.examples-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    justify-content: center;
-    margin-top: 1rem;
-}
-
-.example-btn {
-    background: rgba(247, 245, 242, 0.8) !important;
-    border: 1px solid #EAE8E5 !important;
-    border-radius: 2rem !important;
-    padding: 0.5rem 1rem !important;
-    font-size: 0.875rem !important;
-    color: #5A524C !important;
-    transition: all 0.2s ease !important;
-}
-
-.example-btn:hover {
-    background: rgba(217, 119, 87, 0.1) !important;
-    border-color: #D97757 !important;
-    transform: translateY(-1px) !important;
-}
-
-/* Footer */
-.footer-info {
-    text-align: center;
-    padding: 1rem;
-    color: #8B7355;
-    font-size: 0.875rem;
-    border-top: 1px solid #EAE8E5;
-    background: rgba(255, 255, 255, 0.5);
-}
 """
 
 # Create Gradio Interface
@@ -243,69 +178,80 @@ with gr.Blocks(
 ) as demo:
     
     # Header
-    with gr.Row(elem_classes="main-header"):
-        with gr.Column():
-            gr.HTML("""
-            <div style="display: flex; align-items: center; justify-content: center; gap: 1rem;">
-                <svg width="48" height="48" viewBox="0 0 100 100">
-                    <path d="M50 0 L61.8 38.2 L100 38.2 L69.1 61.8 L80.9 100 L50 76.4 L19.1 100 L30.9 61.8 L0 38.2 L38.2 38.2 Z" fill="#D97757"/>
-                </svg>
-                <h1 style="font-size: 2.5rem; font-weight: 600; color: #3D3D3D; margin: 0; font-family: 'Playfair Display', serif;">
-                    Hi, कैसे मदद कर सकता हूँ?
-                </h1>
-            </div>
-            <p style="color: #8B7355; margin-top: 0.5rem; font-size: 1.1rem;">
-                आपका AI Assistant - Hindi और English में बातचीत के लिए तैयार
-            </p>
-            """)
+    gr.HTML("""
+    <div style="text-align: center; padding: 2rem 0; background: rgba(255, 255, 255, 0.8); border-radius: 1rem; margin-bottom: 2rem; backdrop-filter: blur(10px);">
+        <div style="display: flex; align-items: center; justify-content: center; gap: 1rem;">
+            <svg width="48" height="48" viewBox="0 0 100 100">
+                <path d="M50 0 L61.8 38.2 L100 38.2 L69.1 61.8 L80.9 100 L50 76.4 L19.1 100 L30.9 61.8 L0 38.2 L38.2 38.2 Z" fill="#D97757"/>
+            </svg>
+            <h1 style="font-size: 2.5rem; font-weight: 600; color: #3D3D3D; margin: 0; font-family: 'Playfair Display', serif;">
+                Hi, कैसे मदद कर सकता हूँ?
+            </h1>
+        </div>
+        <p style="color: #8B7355; margin-top: 0.5rem; font-size: 1.1rem;">
+            आपका AI Assistant - Hindi और English में बातचीत के लिए तैयार
+        </p>
+    </div>
+    """)
     
     # Main Chat Interface
-    with gr.Row(elem_classes="chat-interface"):
-        with gr.Column(scale=1):
-            chatbot = gr.Chatbot(
-                [],
-                height=500,
-                show_label=False,
-                avatar_images=("👤", "🤖"),
-                bubble_full_width=False,
-                show_share_button=False,
-                show_copy_button=True
-            )
-            
-            with gr.Row():
-                with gr.Column(scale=8):
-                    msg = gr.Textbox(
-                        placeholder="मुझसे कुछ भी पूछें... (Hindi या English में)",
-                        show_label=False,
-                        container=False,
-                        lines=1,
-                        max_lines=5
-                    )
-                with gr.Column(scale=1, min_width=80):
-                    submit = gr.Button(
-                        "भेजें ➤",
-                        variant="primary",
-                        elem_classes="submit-btn"
-                    )
-            
-            # Example prompts
-            with gr.Row():
-                gr.Examples(
-                    examples=[
-                        ["एक कविता लिखकर दो"],
-                        ["Python में calculator बनाना सिखाएं"],
-                        ["मुझसे बात करिए"],
-                        ["What is machine learning?"],
-                        ["भारत का इतिहास बताएं"],
-                        ["कोई मजेदार fact बताएं"]
-                    ],
-                    inputs=msg,
-                    elem_classes="examples-container"
+    with gr.Column():
+        # Fixed Chatbot with proper parameters
+        chatbot = gr.Chatbot(
+            value=[],
+            height=500,
+            show_label=False,
+            avatar_images=("👤", "🤖"),
+            show_share_button=False,
+            show_copy_button=True,
+            type="tuples"  # Explicitly set type to avoid warning
+        )
+        
+        with gr.Row():
+            with gr.Column(scale=8):
+                msg = gr.Textbox(
+                    placeholder="मुझसे कुछ भी पूछें... (Hindi या English में)",
+                    show_label=False,
+                    container=False,
+                    lines=1,
+                    max_lines=5
+                )
+            with gr.Column(scale=1, min_width=80):
+                submit = gr.Button(
+                    "भेजें ➤",
+                    variant="primary"
                 )
+        
+        # Example prompts - Fixed without elem_classes
+        with gr.Row():
+            with gr.Column():
+                gr.Markdown("**कुछ सुझाव:**")
+                example_buttons = []
+                examples = [
+                    "एक कविता लिखकर दो",
+                    "Python में calculator बनाना सिखाएं", 
+                    "मुझसे बात करिए",
+                    "What is machine learning?",
+                    "भारत का इतिहास बताएं",
+                    "कोई मजेदार fact बताएं"
+                ]
+                
+                # Create example buttons manually
+                with gr.Row():
+                    for i, example in enumerate(examples[:3]):
+                        btn = gr.Button(example, size="sm", variant="secondary")
+                        example_buttons.append(btn)
+                        btn.click(lambda x=example: x, outputs=msg)
+                
+                with gr.Row():
+                    for i, example in enumerate(examples[3:]):
+                        btn = gr.Button(example, size="sm", variant="secondary")
+                        example_buttons.append(btn)
+                        btn.click(lambda x=example: x, outputs=msg)
     
     # Footer
     gr.HTML("""
-    <div class="footer-info">
+    <div style="text-align: center; padding: 1rem; color: #8B7355; font-size: 0.875rem; border-top: 1px solid #EAE8E5; background: rgba(255, 255, 255, 0.5);">
         <p>🔒 Powered by <strong>Pollinations AI</strong> | 🌟 Built with Gradio on Hugging Face Spaces</p>
         <p style="font-size: 0.75rem; margin-top: 0.5rem;">
             यह AI assistant आपकी बातचीत को याद रखता है और context के साथ जवाब देता है