Update app.py

app.py

@@ -33,19 +33,18 @@ def load_model():
     print("Model loaded successfully!")
 
 def format_thinking_text(text):
-    """Format text to properly display <think> tags in Gradio with blue border styling like HelpingAI"""
+    """Format text to properly display <think> and <ser> tags in Gradio with styled borders"""
     if not text:
         return text
 
-    # More sophisticated formatting for thinking blocks with blue styling
+    # More sophisticated formatting for thinking and ser blocks
     formatted_text = text
 
-    # Handle thinking blocks with proper HTML-like styling for Gradio
+    # Handle thinking blocks with blue styling
     thinking_pattern = r'<think>(.*?)</think>'
 
     def replace_thinking_block(match):
         thinking_content = match.group(1).strip()
-        # Use HTML div with inline CSS for blue border styling like HelpingAI
         return f'''
 
 <div style="border-left: 4px solid #4a90e2; background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%); padding: 16px 20px; margin: 16px 0; border-radius: 12px; font-family: 'Segoe UI', sans-serif; box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15); border: 1px solid rgba(74, 144, 226, 0.2);">
@@ -59,10 +58,30 @@ def format_thinking_text(text):
 
 '''
 
+    # Handle ser blocks with green styling
+    ser_pattern = r'<ser>(.*?)</ser>'
+
+    def replace_ser_block(match):
+        ser_content = match.group(1).strip()
+        return f'''
+
+<div style="border-left: 4px solid #28a745; background: linear-gradient(135deg, #f0fff4 0%, #e6ffed 100%); padding: 16px 20px; margin: 16px 0; border-radius: 12px; font-family: 'Segoe UI', sans-serif; box-shadow: 0 2px 8px rgba(40, 167, 69, 0.15); border: 1px solid rgba(40, 167, 69, 0.2);">
+<div style="color: #28a745; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; font-size: 14px;">
+<span style="margin-right: 8px;">💚</span> Ser
+</div>
+<div style="color: #155724; line-height: 1.6; font-size: 14px;">
+{ser_content}
+</div>
+</div>
+
+'''
+
+    # Apply both patterns
     formatted_text = re.sub(thinking_pattern, replace_thinking_block, formatted_text, flags=re.DOTALL)
+    formatted_text = re.sub(ser_pattern, replace_ser_block, formatted_text, flags=re.DOTALL)
 
-    # Clean up any remaining raw tags that might not have been caught
-    formatted_text = re.sub(r'</?think>', '', formatted_text)
+    # Clean up any remaining raw tags
+    formatted_text = re.sub(r'</?(?:think|ser)>', '', formatted_text)
 
     return formatted_text.strip()
 
@@ -174,176 +193,433 @@ def chat_interface(message, history, max_tokens, temperature, top_p):
 print("Initializing model...")
 load_model()
 
-# Custom CSS for better styling and thinking blocks
+# Advanced CSS for professional UI design
 custom_css = """
-/* Main chatbot styling */
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+/* Global styling */
+* {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+/* Main container */
+.gradio-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+}
+
+/* Header styling */
+.header-container {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    padding: 24px;
+    margin-bottom: 24px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Main chat container */
+.chat-container {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    padding: 24px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Chatbot styling */
 .chatbot {
-    font-size: 14px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 15px;
+    font-family: 'Inter', sans-serif;
+    background: transparent;
+    border: none;
+    border-radius: 16px;
+    overflow: hidden;
 }
 
-/* Enhanced thinking block styling - now handled via inline HTML */
-.thinking-block {
-    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
-    border-left: 4px solid #4a90e2;
-    border-radius: 8px;
-    padding: 12px 16px;
+.chatbot .message {
     margin: 12px 0;
-    font-family: 'Segoe UI', sans-serif;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    position: relative;
+    padding: 0;
+    background: transparent;
 }
 
-/* Support for HTML content in chatbot */
-.chatbot .message {
-    overflow: visible;
+.chatbot .message.user {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 18px 18px 4px 18px;
+    padding: 16px 20px;
+    margin-left: 20%;
+    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
 }
 
-.chatbot .message div {
-    max-width: none;
+.chatbot .message.bot {
+    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+    color: #2c3e50;
+    border-radius: 18px 18px 18px 4px;
+    padding: 16px 20px;
+    margin-right: 20%;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
-/* Message styling */
-.message {
-    padding: 10px 14px;
-    margin: 6px 0;
-    border-radius: 12px;
-    line-height: 1.5;
+/* Input styling */
+.input-container {
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 25px;
+    padding: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    border: 2px solid transparent;
+    transition: all 0.3s ease;
 }
 
-.user-message {
-    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
-    margin-left: 15%;
-    border-bottom-right-radius: 4px;
+.input-container:focus-within {
+    border-color: #667eea;
+    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
 }
 
-.assistant-message {
-    background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
-    margin-right: 15%;
-    border-bottom-left-radius: 4px;
+.gradio-textbox {
+    border: none !important;
+    background: transparent !important;
+    font-size: 15px;
+    padding: 12px 20px;
+    border-radius: 20px;
+    font-family: 'Inter', sans-serif;
 }
 
-/* Code block styling */
-pre {
-    background-color: #f8f9fa;
-    border: 1px solid #e9ecef;
-    border-radius: 6px;
-    padding: 12px;
-    overflow-x: auto;
-    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-    font-size: 13px;
-    line-height: 1.4;
+.gradio-textbox:focus {
+    outline: none !important;
+    box-shadow: none !important;
 }
 
 /* Button styling */
 .gradio-button {
-    border-radius: 8px;
-    font-weight: 500;
-    transition: all 0.2s ease;
+    border-radius: 20px !important;
+    font-weight: 600 !important;
+    font-family: 'Inter', sans-serif !important;
+    transition: all 0.3s ease !important;
+    border: none !important;
+    font-size: 14px !important;
+    padding: 12px 24px !important;
 }
 
-.gradio-button:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+.gradio-button.primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3) !important;
 }
 
-/* Input styling */
-.gradio-textbox {
-    border-radius: 8px;
-    border: 2px solid #e0e0e0;
-    transition: border-color 0.2s ease;
+.gradio-button.primary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
 }
 
-.gradio-textbox:focus {
-    border-color: #4a90e2;
-    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
+.gradio-button.secondary {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
+    color: #495057 !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+.gradio-button.secondary:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+
+/* Parameter panel styling */
+.parameter-panel {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    padding: 24px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 /* Slider styling */
 .gradio-slider {
-    margin: 8px 0;
+    margin: 16px 0 !important;
+}
+
+.gradio-slider .wrap {
+    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+    border-radius: 12px;
+    padding: 16px;
+    border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
 /* Examples styling */
 .gradio-examples {
-    margin-top: 16px;
+    margin-top: 20px;
 }
 
 .gradio-examples .gradio-button {
-    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-    border: 1px solid #dee2e6;
-    color: #495057;
-    font-size: 13px;
-    padding: 8px 12px;
+    background: rgba(255, 255, 255, 0.8) !important;
+    border: 1px solid rgba(102, 126, 234, 0.2) !important;
+    color: #667eea !important;
+    font-size: 13px !important;
+    padding: 10px 16px !important;
+    margin: 4px !important;
+    border-radius: 15px !important;
+    transition: all 0.2s ease !important;
 }
 
 .gradio-examples .gradio-button:hover {
-    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
-    color: #212529;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
+}
+
+/* Footer styling */
+.footer-container {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    padding: 20px;
+    margin-top: 24px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    text-align: center;
+}
+
+/* Animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.animate-fade-in {
+    animation: fadeInUp 0.6s ease-out;
+}
+
+.animate-slide-in {
+    animation: slideIn 0.4s ease-out;
+}
+
+/* Loading states */
+.loading {
+    position: relative;
+    overflow: hidden;
+}
+
+.loading::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+    animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+    0% { left: -100%; }
+    100% { left: 100%; }
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .chat-container, .parameter-panel, .header-container {
+        margin: 12px;
+        padding: 16px;
+        border-radius: 16px;
+    }
+
+    .chatbot .message.user {
+        margin-left: 10%;
+    }
+
+    .chatbot .message.bot {
+        margin-right: 10%;
+    }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .gradio-container {
+        background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
+    }
+
+    .chat-container, .parameter-panel, .header-container, .footer-container {
+        background: rgba(45, 55, 72, 0.95);
+        color: #e2e8f0;
+    }
+
+    .chatbot .message.bot {
+        background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
+        color: #e2e8f0;
+    }
 }
 """
 
-# Create Gradio interface
+# Create advanced Gradio interface with professional design
 with gr.Blocks(
-    title="🤖 Dhanishtha-2.0-preview Chat",
+    title="� Dhanishtha-2.0-preview | Advanced Reasoning AI",
     theme=gr.themes.Soft(),
-    css=custom_css
+    css=custom_css,
+    head="""
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Chat with Dhanishtha-2.0-preview - The world's first LLM with multi-step reasoning capabilities">
+    """
 ) as demo:
-    gr.Markdown(
-        """
-        # 🤖 Dhanishtha-2.0-preview Chat
-
-        Chat with the **HelpingAI/Dhanishtha-2.0-preview** model - The world's first LLM designed to think between responses!
-
-        ### ✨ Key Features:
-        - 🧠 **Multi-step Reasoning**: Unlike other LLMs that think once, Dhanishtha can think, rethink, self-evaluate, and refine using multiple `<think>` blocks
-        - 🔄 **Iterative Thinking**: Watch the model's thought process unfold in real-time
-        - 💡 **Enhanced Problem Solving**: Better reasoning capabilities through structured thinking
-
-        **Note**: The `<think>` blocks show the model's internal reasoning process and will be displayed in a formatted way below.
-        """
-    )
-    
-    with gr.Row():
+    # Header Section
+    with gr.Row(elem_classes="header-container animate-fade-in"):
+        with gr.Column():
+            gr.HTML("""
+                <div style="text-align: center; padding: 20px 0;">
+                    <h1 style="font-size: 3em; font-weight: 700; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; font-family: 'Inter', sans-serif;">
+                        🧠 Dhanishtha-2.0-preview
+                    </h1>
+                    <p style="font-size: 1.2em; color: #6c757d; margin: 10px 0 0 0; font-weight: 400;">
+                        Advanced Reasoning AI with Multi-Step Thinking
+                    </p>
+                </div>
+            """)
+
+            # Feature highlights
+            with gr.Row():
+                with gr.Column(scale=1):
+                    gr.HTML("""
+                        <div style="text-align: center; padding: 15px; background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%); border-radius: 15px; border-left: 4px solid #4a90e2;">
+                            <div style="font-size: 2em; margin-bottom: 8px;">🧠</div>
+                            <div style="font-weight: 600; color: #4a90e2;">Think Blocks</div>
+                            <div style="font-size: 0.9em; color: #6c757d;">Internal reasoning process</div>
+                        </div>
+                    """)
+                with gr.Column(scale=1):
+                    gr.HTML("""
+                        <div style="text-align: center; padding: 15px; background: linear-gradient(135deg, #f0fff4 0%, #e6ffed 100%); border-radius: 15px; border-left: 4px solid #28a745;">
+                            <div style="font-size: 2em; margin-bottom: 8px;">💚</div>
+                            <div style="font-weight: 600; color: #28a745;">Ser Blocks</div>
+                            <div style="font-size: 0.9em; color: #6c757d;">Emotional understanding</div>
+                        </div>
+                    """)
+                with gr.Column(scale=1):
+                    gr.HTML("""
+                        <div style="text-align: center; padding: 15px; background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%); border-radius: 15px; border-left: 4px solid #e53e3e;">
+                            <div style="font-size: 2em; margin-bottom: 8px;">⚡</div>
+                            <div style="font-weight: 600; color: #e53e3e;">Real-time</div>
+                            <div style="font-size: 0.9em; color: #6c757d;">Streaming responses</div>
+                        </div>
+                    """)
+                with gr.Column(scale=1):
+                    gr.HTML("""
+                        <div style="text-align: center; padding: 15px; background: linear-gradient(135deg, #fefcbf 0%, #fef08a 100%); border-radius: 15px; border-left: 4px solid #f59e0b;">
+                            <div style="font-size: 2em; margin-bottom: 8px;">🎯</div>
+                            <div style="font-weight: 600; color: #f59e0b;">Precise</div>
+                            <div style="font-size: 0.9em; color: #6c757d;">Step-by-step solutions</div>
+                        </div>
+                    """)
+
+    # Main Chat Interface
+    with gr.Row(elem_classes="chat-container animate-fade-in"):
         with gr.Column(scale=4):
+            # Status indicator
+            gr.HTML("""
+                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 12px 20px; background: linear-gradient(135deg, #e8f5e8 0%, #f0fff4 100%); border-radius: 12px; border-left: 4px solid #28a745;">
+                    <div style="display: flex; align-items: center;">
+                        <div style="width: 8px; height: 8px; background: #28a745; border-radius: 50%; margin-right: 8px; animation: pulse 2s infinite;"></div>
+                        <span style="font-weight: 600; color: #28a745;">Model Ready</span>
+                    </div>
+                    <div style="font-size: 0.9em; color: #6c757d;">
+                        HelpingAI/Dhanishtha-2.0-preview
+                    </div>
+                </div>
+            """)
+
             chatbot = gr.Chatbot(
                 [],
                 elem_id="chatbot",
+                elem_classes="chat-container",
                 bubble_full_width=False,
-                height=600,
+                height=650,
                 show_copy_button=True,
                 show_share_button=True,
-                avatar_images=("👤", "🤖"),
+                avatar_images=("👤", "�"),
                 render_markdown=True,
-                sanitize_html=False,  # Allow HTML for thinking blocks
+                sanitize_html=False,  # Allow HTML for thinking and ser blocks
                 latex_delimiters=[
                     {"left": "$$", "right": "$$", "display": True},
                     {"left": "$", "right": "$", "display": False}
-                ]
+                ],
+                container=True,
+                scale=1
             )
 
-            with gr.Row():
-                msg = gr.Textbox(
-                    container=False,
-                    placeholder="Ask me anything! I'll show you my thinking process...",
-                    label="Message",
-                    autofocus=True,
-                    scale=8,
-                    lines=1,
-                    max_lines=5
-                )
-                send_btn = gr.Button("🚀 Send", variant="primary", scale=1, size="lg")
-
-        with gr.Column(scale=1, min_width=300):
-            gr.Markdown("### ⚙️ Generation Parameters")
-
+            # Enhanced input section
+            with gr.Row(elem_classes="input-container"):
+                with gr.Column(scale=1):
+                    msg = gr.Textbox(
+                        container=False,
+                        placeholder="💭 Ask me anything! I'll show you my thinking and reasoning process...",
+                        label="",
+                        autofocus=True,
+                        lines=1,
+                        max_lines=4,
+                        elem_classes="message-input"
+                    )
+                with gr.Column(scale=0, min_width=120):
+                    with gr.Row():
+                        send_btn = gr.Button(
+                            "🚀 Send",
+                            variant="primary",
+                            size="lg",
+                            elem_classes="send-button"
+                        )
+                        clear_btn = gr.Button(
+                            "🗑️",
+                            variant="secondary",
+                            size="lg",
+                            elem_classes="clear-button"
+                        )
+
+        with gr.Column(scale=1, min_width=320, elem_classes="parameter-panel"):
+            # Parameter header
+            gr.HTML("""
+                <div style="text-align: center; margin-bottom: 20px;">
+                    <h3 style="margin: 0; color: #4a5568; font-weight: 600;">⚙️ Generation Settings</h3>
+                    <p style="margin: 5px 0 0 0; color: #6c757d; font-size: 0.9em;">Fine-tune the AI's responses</p>
+                </div>
+            """)
+
+            # Enhanced sliders with better styling
             max_tokens = gr.Slider(
                 minimum=50,
                 maximum=8192,
                 value=2048,
                 step=50,
                 label="🎯 Max Tokens",
-                info="Maximum number of tokens to generate"
+                info="Maximum number of tokens to generate",
+                elem_classes="parameter-slider"
             )
 
             temperature = gr.Slider(
@@ -352,7 +628,8 @@ with gr.Blocks(
                 value=0.7,
                 step=0.1,
                 label="🌡️ Temperature",
-                info="Higher = more creative, Lower = more focused"
+                info="Higher = more creative, Lower = more focused",
+                elem_classes="parameter-slider"
             )
 
             top_p = gr.Slider(
@@ -361,22 +638,76 @@ with gr.Blocks(
                 value=0.9,
                 step=0.05,
                 label="🎲 Top-p",
-                info="Nucleus sampling threshold"
+                info="Nucleus sampling threshold",
+                elem_classes="parameter-slider"
             )
 
+            # Action buttons
             with gr.Row():
-                clear_btn = gr.Button("🗑️ Clear Chat", variant="secondary", scale=1)
-                stop_btn = gr.Button("⏹️ Stop", variant="stop", scale=1)
-
-            gr.Markdown("### 📊 Model Info")
-            gr.Markdown(
-                """
-                **Model**: HelpingAI/Dhanishtha-2.0-preview
-                **Type**: Reasoning LLM with thinking blocks
-                **Features**: Multi-step reasoning, self-evaluation
-                """
-            )
+                stop_btn = gr.Button(
+                    "⏹️ Stop",
+                    variant="stop",
+                    scale=1,
+                    elem_classes="action-button"
+                )
+
+            # Model information card
+            gr.HTML("""
+                <div style="margin-top: 24px; padding: 20px; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 16px; border: 1px solid rgba(0,0,0,0.05);">
+                    <h4 style="margin: 0 0 12px 0; color: #4a5568; font-weight: 600; display: flex; align-items: center;">
+                        <span style="margin-right: 8px;">🧠</span> Model Information
+                    </h4>
+                    <div style="space-y: 8px;">
+                        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+                            <span style="color: #6c757d; font-size: 0.9em;">Model:</span>
+                            <span style="color: #4a5568; font-weight: 500; font-size: 0.9em;">Dhanishtha-2.0-preview</span>
+                        </div>
+                        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+                            <span style="color: #6c757d; font-size: 0.9em;">Type:</span>
+                            <span style="color: #4a5568; font-weight: 500; font-size: 0.9em;">Reasoning LLM</span>
+                        </div>
+                        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+                            <span style="color: #6c757d; font-size: 0.9em;">Features:</span>
+                            <span style="color: #4a5568; font-weight: 500; font-size: 0.9em;">Think + Ser blocks</span>
+                        </div>
+                        <div style="margin-top: 12px; padding: 8px; background: rgba(74, 144, 226, 0.1); border-radius: 8px; border-left: 3px solid #4a90e2;">
+                            <div style="font-size: 0.85em; color: #4a90e2; font-weight: 500;">💡 Tip</div>
+                            <div style="font-size: 0.8em; color: #6c757d; margin-top: 4px;">Ask complex questions to see multi-step reasoning in action!</div>
+                        </div>
+                    </div>
+                </div>
+            """)
     
+    # Enhanced Examples Section
+    with gr.Row(elem_classes="examples-container animate-fade-in"):
+        with gr.Column():
+            gr.HTML("""
+                <div style="text-align: center; margin: 24px 0 16px 0;">
+                    <h3 style="margin: 0; color: #4a5568; font-weight: 600;">💡 Try These Examples</h3>
+                    <p style="margin: 5px 0 0 0; color: #6c757d; font-size: 0.9em;">Click any example to see the AI's thinking process</p>
+                </div>
+            """)
+
+            gr.Examples(
+                examples=[
+                    ["🧮 Solve this step by step: What is 15% of 240?"],
+                    ["🔤 How many letter 'r' are in the words 'strawberry' and 'raspberry'?"],
+                    ["🤖 Hello! Can you introduce yourself and show me how you think?"],
+                    ["⚛️ Explain quantum entanglement in simple terms with examples"],
+                    ["🐍 Write a Python function to find the factorial of a number"],
+                    ["🌱 What are the pros and cons of renewable energy sources?"],
+                    ["🧠 What's the difference between AI and machine learning?"],
+                    ["🎨 Create a haiku about artificial intelligence and consciousness"],
+                    ["🌌 Why is the sky blue? Explain using physics principles"],
+                    ["📊 Compare bubble sort and quick sort algorithms"],
+                    ["🎯 Plan a 7-day trip to Japan with budget considerations"],
+                    ["🔬 How does CRISPR gene editing work in simple terms?"]
+                ],
+                inputs=msg,
+                examples_per_page=6,
+                elem_classes="example-grid"
+            )
+
     # Event handlers
     def clear_chat():
         """Clear the chat history"""
@@ -406,43 +737,65 @@ with gr.Blocks(
         show_progress=False
     )
 
-    # Example prompts section
-    with gr.Row():
-        gr.Examples(
-            examples=[
-                ["Hello! Can you introduce yourself and show me how you think?"],
-                ["Solve this step by step: What is 15% of 240?"],
-                ["Explain quantum entanglement in simple terms"],
-                ["Write a short Python function to find the factorial of a number"],
-                ["What are the pros and cons of renewable energy?"],
-                ["Help me understand the difference between AI and machine learning"],
-                ["Create a haiku about artificial intelligence"],
-                ["Explain why the sky is blue using physics principles"]
-            ],
-            inputs=msg,
-            label="💡 Example Prompts - Try these to see the thinking process!",
-            examples_per_page=4
-        )
-
-    # Footer with information
-    gr.Markdown(
-        """
-        ---
-        ### 🔧 Technical Details
-        - **Model**: HelpingAI/Dhanishtha-2.0-preview
-        - **Framework**: Transformers + Gradio
-        - **Features**: Real-time streaming, thinking process visualization, custom sampling
-        - **Reasoning**: Multi-step thinking with `<think>` blocks for transparent AI reasoning
-
-        **Note**: This interface streams responses token by token and formats thinking blocks for better readability.
-        The model's internal reasoning process is displayed in formatted code blocks.
-
-        ---
-        *Built with ❤️ using Gradio and Transformers*
-        """
-    )
+    # Enhanced Footer
+    with gr.Row(elem_classes="footer-container animate-fade-in"):
+        with gr.Column():
+            gr.HTML("""
+                <div style="text-align: center; padding: 20px 0;">
+                    <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 16px;">
+                        <div style="height: 1px; background: linear-gradient(90deg, transparent, #667eea, transparent); flex: 1;"></div>
+                        <span style="margin: 0 20px; color: #6c757d; font-weight: 500;">Technical Specifications</span>
+                        <div style="height: 1px; background: linear-gradient(90deg, transparent, #667eea, transparent); flex: 1;"></div>
+                    </div>
+
+                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px;">
+                        <div style="text-align: center;">
+                            <div style="font-size: 1.5em; margin-bottom: 8px;">🧠</div>
+                            <div style="font-weight: 600; color: #4a5568;">Model Architecture</div>
+                            <div style="font-size: 0.9em; color: #6c757d;">Transformer-based reasoning</div>
+                        </div>
+                        <div style="text-align: center;">
+                            <div style="font-size: 1.5em; margin-bottom: 8px;">⚡</div>
+                            <div style="font-weight: 600; color: #4a5568;">Real-time Streaming</div>
+                            <div style="font-size: 0.9em; color: #6c757d;">Token-by-token generation</div>
+                        </div>
+                        <div style="text-align: center;">
+                            <div style="font-size: 1.5em; margin-bottom: 8px;">🎯</div>
+                            <div style="font-weight: 600; color: #4a5568;">Advanced Reasoning</div>
+                            <div style="font-size: 0.9em; color: #6c757d;">Multi-step thinking process</div>
+                        </div>
+                        <div style="text-align: center;">
+                            <div style="font-size: 1.5em; margin-bottom: 8px;">🔧</div>
+                            <div style="font-weight: 600; color: #4a5568;">Custom Sampling</div>
+                            <div style="font-size: 0.9em; color: #6c757d;">Temperature & Top-p control</div>
+                        </div>
+                    </div>
+
+                    <div style="background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 12px; padding: 16px; margin: 16px 0; border: 1px solid rgba(0,0,0,0.05);">
+                        <div style="font-weight: 600; color: #4a5568; margin-bottom: 8px;">🌟 Key Features</div>
+                        <div style="display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;">
+                            <span style="background: #e3f2fd; color: #1976d2; padding: 4px 12px; border-radius: 20px; font-size: 0.85em;">Think Blocks</span>
+                            <span style="background: #e8f5e8; color: #2e7d32; padding: 4px 12px; border-radius: 20px; font-size: 0.85em;">Ser Blocks</span>
+                            <span style="background: #fff3e0; color: #f57c00; padding: 4px 12px; border-radius: 20px; font-size: 0.85em;">Real-time Streaming</span>
+                            <span style="background: #fce4ec; color: #c2185b; padding: 4px 12px; border-radius: 20px; font-size: 0.85em;">LaTeX Support</span>
+                            <span style="background: #f3e5f5; color: #7b1fa2; padding: 4px 12px; border-radius: 20px; font-size: 0.85em;">Code Highlighting</span>
+                        </div>
+                    </div>
+
+                    <div style="margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.1);">
+                        <div style="color: #6c757d; font-size: 0.9em;">
+                            Built with ❤️ using <strong>Gradio</strong> and <strong>Transformers</strong> |
+                            Model: <strong>HelpingAI/Dhanishtha-2.0-preview</strong>
+                        </div>
+                        <div style="color: #6c757d; font-size: 0.8em; margin-top: 4px;">
+                            Experience the future of AI reasoning with transparent thinking processes
+                        </div>
+                    </div>
+                </div>
+            """)
 
 if __name__ == "__main__":
+    # Launch with enhanced configuration
     demo.queue(
         max_size=20,
         default_concurrency_limit=1
@@ -451,5 +804,9 @@ if __name__ == "__main__":
         server_port=7860,
         share=False,
         show_error=True,
-        quiet=False
+        quiet=False,
+        favicon_path=None,
+        ssl_verify=False,
+        show_tips=True,
+        enable_queue=True
     )