Update app.py

app.py

@@ -14,7 +14,7 @@ def generate_response(user_input, top_p, temperature, chat_counter, chatbot, his
     print(f"Detected language: {lang}")
 
     if lang == "bg":
-        user_input_translated = bg_to_en(user_input)[0]['translation_text']
+        user_input_translated = bg_to_en(user_input)[0]["translation_text"]
     else:
         user_input_translated = user_input
 
@@ -28,7 +28,7 @@ def generate_response(user_input, top_p, temperature, chat_counter, chatbot, his
     response = generator(prompt, max_length=200, top_p=top_p, temperature=temperature, do_sample=True)[0]["generated_text"]
 
     if lang == "bg":
-        response = en_to_bg(response)[0]['translation_text']
+        response = en_to_bg(response)[0]["translation_text"]
 
     chat_counter += 1
     history.append((user_input, response))
@@ -38,26 +38,336 @@ def generate_response(user_input, top_p, temperature, chat_counter, chatbot, his
 def reset_textbox():
     return gr.update(value='', interactive=False), gr.update(interactive=False)
 
-with gr.Blocks(theme=gr.themes.Default()) as demo:
-    gr.Markdown("""
-    # 🛍️ MasterBrand AI Assistant  
-    Ask me anything about your e-commerce store – in English or Bulgarian.
+# Custom CSS to match MasterBrand website design
+custom_css = """
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+
+/* Global styles */
+* {
+    font-family: 'Inter', sans-serif !important;
+}
+
+/* Main container styling */
+.gradio-container {
+    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
+    min-height: 100vh !important;
+}
+
+/* Header styling */
+.main-header {
+    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
+    padding: 2rem 0 !important;
+    text-align: center !important;
+    border-bottom: 2px solid #ff4d00 !important;
+    margin-bottom: 2rem !important;
+}
+
+.main-header h1 {
+    color: #ffffff !important;
+    font-size: 3rem !important;
+    font-weight: 800 !important;
+    margin-bottom: 0.5rem !important;
+    text-shadow: 0 0 20px rgba(255, 77, 0, 0.3) !important;
+}
+
+.main-header p {
+    color: #cccccc !important;
+    font-size: 1.2rem !important;
+    font-weight: 400 !important;
+    margin: 0 !important;
+}
+
+/* Chatbot container */
+.chatbot-container {
+    background: rgba(42, 42, 42, 0.8) !important;
+    border: 2px solid #ff4d00 !important;
+    border-radius: 20px !important;
+    box-shadow: 0 10px 30px rgba(255, 77, 0, 0.2) !important;
+    margin-bottom: 2rem !important;
+    min-height: 400px !important;
+}
+
+/* Input styling */
+.input-container {
+    background: rgba(42, 42, 42, 0.9) !important;
+    border: 2px solid #ff4d00 !important;
+    border-radius: 15px !important;
+    padding: 1rem !important;
+    margin-bottom: 1rem !important;
+}
+
+.input-container textarea {
+    background: #2a2a2a !important;
+    border: 1px solid #ff4d00 !important;
+    border-radius: 10px !important;
+    color: #ffffff !important;
+    font-size: 1.1rem !important;
+    padding: 1rem !important;
+    resize: none !important;
+}
+
+.input-container textarea:focus {
+    border-color: #ff6d20 !important;
+    box-shadow: 0 0 15px rgba(255, 77, 0, 0.3) !important;
+    outline: none !important;
+}
+
+/* Button styling */
+.submit-button {
+    background: linear-gradient(135deg, #ff4d00 0%, #ff6d20 100%) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    color: #ffffff !important;
+    font-size: 1.2rem !important;
+    font-weight: 600 !important;
+    padding: 1rem 2rem !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 5px 15px rgba(255, 77, 0, 0.3) !important;
+}
+
+.submit-button:hover {
+    background: linear-gradient(135deg, #ff6d20 0%, #ff8d40 100%) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 25px rgba(255, 77, 0, 0.4) !important;
+}
+
+/* Slider styling */
+.slider-container {
+    background: rgba(42, 42, 42, 0.6) !important;
+    border: 1px solid #ff4d00 !important;
+    border-radius: 10px !important;
+    padding: 1rem !important;
+    margin-bottom: 1rem !important;
+}
+
+.slider-container label {
+    color: #ffffff !important;
+    font-weight: 600 !important;
+    font-size: 1rem !important;
+    margin-bottom: 0.5rem !important;
+    display: block !important;
+}
+
+/* Status box styling */
+.status-container {
+    background: rgba(42, 42, 42, 0.8) !important;
+    border: 1px solid #4CAF50 !important;
+    border-radius: 10px !important;
+    padding: 1rem !important;
+}
+
+.status-container textarea {
+    background: transparent !important;
+    border: none !important;
+    color: #4CAF50 !important;
+    font-weight: 600 !important;
+}
+
+/* Advanced styling for chat messages */
+.message {
+    animation: fadeInUp 0.5s ease-out !important;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .main-header h1 {
+        font-size: 2rem !important;
+    }
+    
+    .main-header p {
+        font-size: 1rem !important;
+    }
+    
+    .submit-button {
+        font-size: 1rem !important;
+        padding: 0.8rem 1.5rem !important;
+    }
+}
+
+/* Hide Gradio branding */
+.footer {
+    display: none !important;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #2a2a2a;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #ff4d00;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #ff6d20;
+}
+"""
+
+# Enhanced theme matching MasterBrand
+masterbrand_theme = gr.themes.Base(
+    primary_hue="orange",
+    secondary_hue="blue", 
+    neutral_hue="slate",
+).set(
+    # Background colors
+    body_background_fill="#1a1a1a",
+    body_background_fill_dark="#1a1a1a",
+    background_fill_primary="#2a2a2a",
+    background_fill_primary_dark="#2a2a2a",
+    background_fill_secondary="#3a3a3a",
+    background_fill_secondary_dark="#3a3a3a",
+    
+    # Button colors
+    button_primary_background_fill="#ff4d00",
+    button_primary_background_fill_dark="#ff4d00",
+    button_primary_background_fill_hover="#ff6d20",
+    button_primary_background_fill_hover_dark="#ff6d20",
+    button_primary_text_color="#ffffff",
+    button_primary_text_color_dark="#ffffff",
+    
+    # Text colors
+    body_text_color="#ffffff",
+    body_text_color_dark="#ffffff",
+    body_text_color_subdued="#cccccc",
+    body_text_color_subdued_dark="#cccccc",
+    
+    # Border and accent colors
+    border_color_accent="#ff4d00",
+    border_color_accent_dark="#ff4d00",
+    border_color_primary="#3a3a3a",
+    border_color_primary_dark="#3a3a3a",
+    color_accent="#ff4d00",
+    color_accent_soft="#ff4d00",
+    
+    # Input colors
+    input_background_fill="#2a2a2a",
+    input_background_fill_dark="#2a2a2a",
+    input_background_fill_focus="#3a3a3a",
+    input_background_fill_focus_dark="#3a3a3a",
+    input_border_color="#ff4d00",
+    input_border_color_dark="#ff4d00",
+    input_border_color_focus="#ff6d20",
+    input_border_color_focus_dark="#ff6d20",
+    
+    # Link colors
+    link_text_color="#ff4d00",
+    link_text_color_dark="#ff4d00",
+    link_text_color_active="#ff6d20",
+    link_text_color_active_dark="#ff6d20",
+    link_text_color_hover="#ff6d20",
+    link_text_color_hover_dark="#ff6d20",
+    link_text_color_visited="#ff4d00",
+    link_text_color_visited_dark="#ff4d00",
+    
+    # Slider colors
+    slider_color="#ff4d00",
+    slider_color_dark="#ff4d00",
+)
+
+with gr.Blocks(theme=masterbrand_theme, css=custom_css, title="MasterBrand AI Assistant") as demo:
+    # Header section
+    gr.HTML("""
+    <div class="main-header">
+        <h1>🛍️ MASTERBRAND AI ASSISTANT</h1>
+        <p>Your Personal E-commerce Business Expert - Available in English & Bulgarian</p>
+    </div>
     """)
     
-    chatbot = gr.Chatbot()
-    inputs = gr.Textbox(placeholder="What product should I sell?", label="Your question")
+    # Main chat interface
+    with gr.Row():
+        with gr.Column(scale=1):
+            chatbot = gr.Chatbot(
+                label="💬 Chat with MasterBrand AI",
+                height=400,
+                elem_classes=["chatbot-container"]
+            )
+            
+            with gr.Row():
+                inputs = gr.Textbox(
+                    placeholder="Ask me anything about your e-commerce business... (e.g., 'What product should I sell?', 'How do I start dropshipping?')",
+                    label="Your Question",
+                    lines=2,
+                    elem_classes=["input-container"]
+                )
+            
+            with gr.Row():
+                submit_btn = gr.Button(
+                    "🚀 Get Expert Advice",
+                    variant="primary",
+                    size="lg",
+                    elem_classes=["submit-button"]
+                )
+                status_box = gr.Textbox(
+                    label="Status",
+                    interactive=False,
+                    elem_classes=["status-container"]
+                )
+    
+    # Advanced settings (collapsible)
+    with gr.Accordion("⚙️ Advanced Settings", open=False):
+        with gr.Row():
+            with gr.Column():
+                top_p = gr.Slider(
+                    minimum=0.1,
+                    maximum=1.0,
+                    value=0.9,
+                    step=0.05,
+                    label="🎯 Creativity Level (Top-p)",
+                    info="Higher values = more creative responses",
+                    elem_classes=["slider-container"]
+                )
+            with gr.Column():
+                temperature = gr.Slider(
+                    minimum=0.1,
+                    maximum=2.0,
+                    value=1.0,
+                    step=0.1,
+                    label="🌡️ Response Temperature",
+                    info="Higher values = more varied responses",
+                    elem_classes=["slider-container"]
+                )
+    
+    # Hidden state variables
     state = gr.State([])
     chat_counter = gr.Number(value=0, visible=False)
-    top_p = gr.Slider(minimum=0.1, maximum=1.0, value=0.9, step=0.05, label="Top-p (creativity)")
-    temperature = gr.Slider(minimum=0.1, maximum=2.0, value=1.0, step=0.1, label="Temperature")
-
-    with gr.Row():
-        submit_btn = gr.Button("🚀 Ask")
-        status_box = gr.Textbox(label="Status", interactive=False)
-
+    
+    # Footer
+    gr.HTML("""
+    <div style="text-align: center; padding: 2rem; color: #cccccc; border-top: 1px solid #3a3a3a; margin-top: 2rem;">
+        <p>🚀 Powered by MasterBrand AI Technology | Built for E-commerce Success</p>
+        <p style="font-size: 0.9rem; opacity: 0.7;">Get personalized advice for your online business journey</p>
+    </div>
+    """)
+    
+    # Event handlers
     inputs.submit(reset_textbox, [], [inputs, submit_btn], queue=False)
     inputs.submit(generate_response, [inputs, top_p, temperature, chat_counter, chatbot, state], [chatbot, state, chat_counter, status_box, inputs, submit_btn])
     submit_btn.click(reset_textbox, [], [inputs, submit_btn], queue=False)
     submit_btn.click(generate_response, [inputs, top_p, temperature, chat_counter, chatbot, state], [chatbot, state, chat_counter, status_box, inputs, submit_btn])
 
-demo.queue(max_size=10).launch()
+if __name__ == "__main__":
+    demo.queue(max_size=10).launch(
+        server_name="0.0.0.0",
+        server_port=7861,
+        share=False,
+        show_error=True
+    )
+
+