🎨 Redesign from AnyCoder

app.py

@@ -8,7 +8,6 @@ if not (key := os.getenv("NVIDIA_API_KEY")):
 client = OpenAI(base_url="https://integrate.api.nvidia.com/v1", api_key=key)
 
 def respond(message, history):
-    # В Gradio 4.x история уже в формате OpenAI (список словарей)
     messages = history + [{"role": "user", "content": message}]
     
     try:
@@ -28,5 +27,191 @@ def respond(message, history):
     except Exception as e:
         yield f"Ошибка: {e}"
 
+# Custom theme for modern, clean look
+custom_theme = gr.themes.Soft(
+    primary_hue="teal",
+    secondary_hue="gray",
+    neutral_hue="slate",
+    font=gr.themes.GoogleFont("Inter"),
+    text_size="lg",
+    spacing_size="lg",
+    radius_size="md"
+).set(
+    button_primary_background_fill="*primary_600",
+    button_primary_background_fill_hover="*primary_700",
+    block_title_text_weight="600",
+    body_background_fill="*neutral_50",
+)
+
+# Custom CSS for mobile-friendly design
+custom_css = """
+/* Mobile-first responsive design */
+.gradio-container {
+    max-width: 100% !important;
+    padding: 8px !important;
+}
+
+/* Chat container optimization */
+.chat-container {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+/* Better message bubbles */
+.message {
+    padding: 12px 16px !important;
+    border-radius: 12px !important;
+}
+
+/* User message styling */
+.message.user {
+    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%) !important;
+    color: white !important;
+}
+
+/* Assistant message styling */
+.message.assistant {
+    background: white !important;
+    border: 1px solid #e2e8f0 !important;
+    color: #1e293b !important;
+}
+
+/* Input area optimization */
+.input-area {
+    padding: 12px !important;
+    background: white !important;
+    border-radius: 12px !important;
+    box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
+}
+
+/* Textbox styling */
+.textarea {
+    border-radius: 12px !important;
+    border: 2px solid #e2e8f0 !important;
+    padding: 12px !important;
+    transition: border-color 0.2s ease !important;
+}
+
+.textarea:focus {
+    border-color: #14b8a6 !important;
+    outline: none !important;
+}
+
+/* Button styling */
+.submit-button {
+    border-radius: 10px !important;
+    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
+}
+
+.submit-button:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3) !important;
+}
+
+/* Title area */
+.title-area {
+    text-align: center;
+    padding: 16px 0 !important;
+}
+
+.title-area h1 {
+    font-size: 1.5rem !important;
+    font-weight: 600 !important;
+    color: #1e293b !important;
+    margin-bottom: 4px !important;
+}
+
+.title-area p {
+    color: #64748b !important;
+    font-size: 0.9rem !important;
+}
+
+/* Reduce padding on mobile */
+@media (max-width: 640px) {
+    .gradio-container {
+        padding: 4px !important;
+    }
+    
+    .chat-message {
+        font-size: 0.95rem !important;
+    }
+    
+    .title-area h1 {
+        font-size: 1.25rem !important;
+    }
+}
+
+/* Subtle animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.message {
+    animation: fadeIn 0.2s ease-out !important;
+}
+"""
+
+# Custom JavaScript for enhanced UX
+custom_js = """
+function() {
+    // Add smooth scroll behavior
+    const style = document.createElement('style');
+    style.textContent = `
+        html { scroll-behavior: smooth; }
+        .chat-scroller { scroll-behavior: smooth; }
+    `;
+    document.head.appendChild(style);
+}
+"""
+
 if __name__ == "__main__":
-    gr.ChatInterface(respond, title="Step 3.5 Flash").launch(ssr_mode=False)
+    with gr.Blocks(
+        title="Step 3.5 Flash Chat",
+        fill_height=True
+    ) as demo:
+        # Header with anycoder link
+        gr.HTML("""
+            <div style="text-align: center; padding: 12px 0; margin-bottom: 8px;">
+                <a href="https://huggingface.co/spaces/akhaliq/anycoder" 
+                   target="_blank" 
+                   style="font-size: 0.75rem; color: #64748b; text-decoration: none; opacity: 0.7;">
+                    Built with anycoder
+                </a>
+            </div>
+        """)
+        
+        gr.ChatInterface(
+            respond,
+            title="Step 3.5 Flash",
+            description="Chat with Step 3.5 Flash - Powered by NVIDIA",
+            chatbot=gr.Chatbot(
+                show_label=False,
+                container=True,
+                height=500,
+                bubble_full_width=False,
+                layout="bubble",
+                avatar_images=(None, None),
+                render_markdown=True,
+            ),
+            textbox=gr.Textbox(
+                placeholder="Type your message...",
+                show_label=False,
+                container=True,
+                scale=5,
+            ),
+            submit_btn="Send",
+            stop_btn="Stop",
+            clear_btn="Clear",
+            show_examples=False,
+            show_copy_button=True,
+            fill_height=True,
+        )
+    
+    demo.launch(
+        theme=custom_theme,
+        css=custom_css,
+        js=custom_js,
+        fill_width=True,
+        ssr_mode=False,
+    )