Update app.py

app.py

@@ -7,17 +7,17 @@ generator = pipeline("text-generation", model="gpt2")
 bg_to_en = pipeline("translation", model="Helsinki-NLP/opus-mt-bg-en")
 en_to_bg = pipeline("translation", model="Helsinki-NLP/opus-mt-en-bg")
 
-NUM_THREADS = 2
-
 def generate_response(user_input, top_p, temperature, chat_counter, chatbot, history, request: gr.Request):
     lang = detect(user_input)
     print(f"Detected language: {lang}")
 
+    # Translate if needed
     if lang == "bg":
         user_input_translated = bg_to_en(user_input)[0]["translation_text"]
     else:
         user_input_translated = user_input
 
+    # Create prompt
     prompt = (
         "You are a helpful e-commerce business assistant for beginners.\n"
         "Here is what the user said:\n"
@@ -25,36 +25,32 @@ def generate_response(user_input, top_p, temperature, chat_counter, chatbot, his
         "Give simple, friendly, clear advice:"
     )
 
-    response = generator(prompt, max_length=200, top_p=top_p, temperature=temperature, do_sample=True)[0]["generated_text"]
+    # Generate response
+    response_text = 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_text = en_to_bg(response_text)[0]["translation_text"]
 
-    chat_counter += 1
-    history.append((user_input, response))
+    # Format for type="messages"
+    history.append({"role": "user", "content": user_input})
+    history.append({"role": "assistant", "content": response_text})
 
+    chat_counter += 1
     return history, history, chat_counter, "✅ Success", gr.update(value=''), gr.update(interactive=True)
 
 def reset_textbox():
     return gr.update(value='', interactive=False), gr.update(interactive=False)
 
-# Custom CSS to match MasterBrand website design
-custom_css = """
-/* Import Google Fonts */
+# ==== Custom CSS ====
+custom_css = """ 
 @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;
@@ -62,41 +58,23 @@ custom_css = """
     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 {
+.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;
@@ -106,15 +84,12 @@ custom_css = """
     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 {
+.submit-button {
     background: linear-gradient(135deg, #ff4d00 0%, #ff6d20 100%) !important;
     border: none !important;
     border-radius: 12px !important;
@@ -125,246 +100,89 @@ custom_css = """
     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
+# ==== Theme ====
+masterbrand_theme = gr.themes.Base(primary_hue="orange").set(
     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",
+    button_primary_background_fill="#ff4d00",
+    button_primary_background_fill_hover="#ff6d20",
+    button_primary_text_color="#ffffff"
 )
 
+# ==== UI ====
 with gr.Blocks(theme=masterbrand_theme, css=custom_css, title="MasterBrand AI Assistant") as demo:
-    gr.Textbox(label="Test Box", value="If you see this, layout works")
-    # 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>
     """)
-    
-    # Main chat interface
+
     with gr.Row():
         with gr.Column(scale=1):
             chatbot = gr.Chatbot(
                 label="💬 Chat with MasterBrand AI",
                 height=400,
-                elem_id="chatbot-container",
+                elem_classes=["chatbot-container"],
                 type="messages"
             )
-            
-            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_id="input-container"
-                )
-            
+
+            inputs = gr.Textbox(
+                placeholder="Ask me anything about your e-commerce business...",
+                label="Your Question",
+                lines=2,
+                elem_classes=["input-container"]
+            )
+
             with gr.Row():
                 submit_btn = gr.Button(
                     "🚀 Get Expert Advice",
                     variant="primary",
                     size="lg",
-                    elem_id="submit-button"
+                    elem_classes=["submit-button"]
                 )
                 status_box = gr.Textbox(
                     label="Status",
                     interactive=False,
-                    elem_id="status-container"
+                    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_id="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_id="slider-container"
-                )
-    
-    # Hidden state variables
+        top_p = gr.Slider(0.1, 1.0, value=0.9, step=0.05, label="🎯 Creativity (Top-p)", elem_classes=["slider-container"])
+        temperature = gr.Slider(0.1, 2.0, value=1.0, step=0.1, label="🌡️ Temperature", elem_classes=["slider-container"])
+
+    # State
     state = gr.State([])
     chat_counter = gr.Number(value=0, visible=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
+
+    # 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])
 
+# ==== Launch ====
 if __name__ == "__main__":
     demo.queue(max_size=10).launch()
-
-