Update app.py

app.py

@@ -98,53 +98,91 @@ def generate_response(user_input, top_p, temperature, chat_counter, chatbot, his
 def reset_textbox():
     return gr.update(value='')
 
+# Convert logo to base64
+def get_logo_base64():
+    try:
+        with open("/home/ubuntu/masterbrand_logo.jpg", "rb") as img_file:
+            return base64.b64encode(img_file.read()).decode()
+    except:
+        return ""
+
+logo_base64 = get_logo_base64()
+
 # ==== Enhanced Custom CSS with Masterbrand Styling ====
 custom_css = f""" 
-@import url(\'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
 
 * {{
-    font-family: \'Inter\', sans-serif !important;
+    font-family: 'Inter', sans-serif !important;
 }}
 
 .gradio-container {{
-    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a1a1a 100%) !important;
+    background: linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 50%, #2a1a1a 100%) !important;
     min-height: 100vh !important;
 }}
 
 .main-header {{
     background: linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 50%, #2a1a1a 100%) !important;
-    padding: 3rem 0 !important;
+    padding: 2rem 0 3rem 0 !important;
     text-align: center !important;
-    border-bottom: 3px solid #ff0000 !important; /* Changed to red */
+    border-bottom: 3px solid #ff0000 !important;
     margin-bottom: 2rem !important;
     position: relative !important;
     overflow: hidden !important;
 }}
 
 .main-header::before {{
-    content: \'\';
+    content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    background: radial-gradient(circle at 50% 50%, rgba(255, 0, 0, 0.1) 0%, transparent 70%); /* Changed to red */
+    background: radial-gradient(circle at 50% 50%, rgba(255, 0, 0, 0.1) 0%, transparent 70%);
     pointer-events: none;
 }}
 
 .logo-container {{
-    display: none; /* Removed logo */
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    margin-bottom: 1.5rem !important;
+    gap: 1rem !important;
+}}
+
+.logo-image {{
+    width: 80px !important;
+    height: 80px !important;
+    border-radius: 15px !important;
+    box-shadow: 0 0 30px rgba(255, 0, 0, 0.5) !important;
+    animation: pulse-glow 2s ease-in-out infinite alternate !important;
+    transition: transform 0.3s ease !important;
+}}
+
+.logo-image:hover {{
+    transform: scale(1.1) !important;
+}}
+
+.brand-text {{
+    background: linear-gradient(135deg, #00ff41 0%, #ffffff 50%, #ff0000 100%) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    font-size: 2.5rem !important;
+    font-weight: 900 !important;
+    letter-spacing: 2px !important;
+    text-shadow: 0 0 20px rgba(0, 255, 65, 0.3) !important;
 }}
 
 .main-header h1 {{
     color: #ffffff !important;
     font-size: 3.5rem !important;
     font-weight: 900 !important;
-    text-shadow: 0 0 30px rgba(255, 0, 0, 0.5) !important; /* Changed to red */
-    background: linear-gradient(135deg, #ffffff 0%, #ff0000 100%); /* Changed to red */
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    text-shadow: 0 0 30px rgba(255, 0, 0, 0.5) !important;
+    background: linear-gradient(135deg, #ffffff 0%, #ff0000 100%) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
     margin: 0 !important;
 }}
 
@@ -157,67 +195,137 @@ custom_css = f"""
 
 .chatbot-container {{
     background: rgba(26, 26, 26, 0.95) !important;
-    border: 2px solid #ff0000 !important; /* Changed to red */
+    border: 2px solid #ff0000 !important;
     border-radius: 25px !important;
-    box-shadow: 0 15px 40px rgba(255, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; /* Changed to red */
+    box-shadow: 0 15px 40px rgba(255, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
     margin-bottom: 2rem !important;
     backdrop-filter: blur(10px) !important;
 }}
 
-.chatbot-container .message {{
+.input-section {{
+    background: rgba(26, 26, 26, 0.8) !important;
+    border: 2px solid #333333 !important;
+    border-radius: 20px !important;
+    padding: 2rem !important;
+    margin: 1rem 0 !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
+    backdrop-filter: blur(10px) !important;
+    transition: all 0.3s ease !important;
+}}
+
+.input-section:hover {{
+    border-color: #ff0000 !important;
+    box-shadow: 0 15px 40px rgba(255, 0, 0, 0.2) !important;
+}}
+
+.input-group {{
+    margin-bottom: 1.5rem !important;
+}}
+
+.input-group:last-child {{
+    margin-bottom: 0 !important;
+}}
+
+.input-label {{
+    color: #ffffff !important;
+    font-size: 1.1rem !important;
+    font-weight: 600 !important;
+    margin-bottom: 0.8rem !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.5rem !important;
+}}
+
+.input-icon {{
+    font-size: 1.2rem !important;
+    color: #ff0000 !important;
+}}
+
+.enhanced-textbox textarea {{
+    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a1a 100%) !important;
+    border: 2px solid #444444 !important;
+    border-radius: 15px !important;
+    color: #ffffff !important;
+    font-size: 1.1rem !important;
+    padding: 1.2rem !important;
+    resize: none !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
+}}
+
+.enhanced-textbox textarea:focus {{
+    border-color: #ff0000 !important;
+    box-shadow: 0 0 25px rgba(255, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.3) !important;
+    outline: none !important;
+    transform: translateY(-2px) !important;
+}}
+
+.enhanced-textbox textarea::placeholder {{
+    color: #888888 !important;
+    font-style: italic !important;
+}}
+
+.enhanced-image-input, .enhanced-video-input {{
     background: rgba(42, 42, 42, 0.8) !important;
+    border: 2px dashed #444444 !important;
     border-radius: 15px !important;
-    margin: 0.5rem 0 !important;
-    padding: 1rem !important;
-    border-left: 4px solid #ff0000 !important; /* Changed to red */
+    padding: 2rem !important;
+    text-align: center !important;
+    transition: all 0.3s ease !important;
+    min-height: 120px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
 }}
 
-.input-container {{
-    position: relative !important;
+.enhanced-image-input:hover, .enhanced-video-input:hover {{
+    border-color: #ff0000 !important;
+    background: rgba(255, 0, 0, 0.05) !important;
 }}
 
-.input-container textarea {{
+.enhanced-url-input input {{
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a1a 100%) !important;
-    border: 2px solid #ff0000 !important; /* Changed to red */
+    border: 2px solid #444444 !important;
     border-radius: 15px !important;
     color: #ffffff !important;
     font-size: 1.1rem !important;
     padding: 1.2rem !important;
-    resize: none !important;
     transition: all 0.3s ease !important;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
 }}
 
-.input-container textarea:focus {{
-    border-color: #ff0000 !important; /* Changed to red */
-    box-shadow: 0 0 25px rgba(255, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.3) !important; /* Changed to red */
+.enhanced-url-input input:focus {{
+    border-color: #ff0000 !important;
+    box-shadow: 0 0 25px rgba(255, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.3) !important;
     outline: none !important;
     transform: translateY(-2px) !important;
 }}
 
-.input-container textarea::placeholder {{
+.enhanced-url-input input::placeholder {{
     color: #888888 !important;
     font-style: italic !important;
 }}
 
 .submit-button {{
-    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%) !important; /* Changed to red */
+    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%) !important;
     border: none !important;
     border-radius: 15px !important;
-    color: #ffffff !important; /* Changed text color to white for contrast */
+    color: #ffffff !important;
     font-size: 1.2rem !important;
     font-weight: 700 !important;
     padding: 1.2rem 2.5rem !important;
     transition: all 0.3s ease !important;
-    box-shadow: 0 8px 20px rgba(255, 0, 0, 0.3) !important; /* Changed to red */
+    box-shadow: 0 8px 20px rgba(255, 0, 0, 0.3) !important;
     text-transform: uppercase !important;
     letter-spacing: 1px !important;
+    width: 100% !important;
+    margin-top: 1rem !important;
 }}
 
 .submit-button:hover {{
-    background: linear-gradient(135deg, #cc0000 0%, #aa0000 100%) !important; /* Changed to red */
+    background: linear-gradient(135deg, #cc0000 0%, #aa0000 100%) !important;
     transform: translateY(-3px) !important;
-    box-shadow: 0 12px 30px rgba(255, 0, 0, 0.4) !important; /* Changed to red */
+    box-shadow: 0 12px 30px rgba(255, 0, 0, 0.4) !important;
 }}
 
 .submit-button:active {{
@@ -238,13 +346,13 @@ custom_css = f"""
 }}
 
 .slider-container input[type="range"] {{
-    accent-color: #ff0000 !important; /* Changed to red */
+    accent-color: #ff0000 !important;
 }}
 
 .status-container textarea {{
     background: transparent !important;
     border: none !important;
-    color: #ff0000 !important; /* Changed to red */
+    color: #ff0000 !important;
     font-weight: 600 !important;
     text-align: center !important;
 }}
@@ -256,13 +364,13 @@ custom_css = f"""
 /* Enhanced chat styling */
 .message.user {{
     background: linear-gradient(135deg, #2a2a2a 0%, #3a3a2a 100%) !important;
-    border-left: 4px solid #ff0000 !important; /* Changed to red */
+    border-left: 4px solid #ff0000 !important;
     margin-left: 2rem !important;
 }}
 
 .message.bot {{
     background: linear-gradient(135deg, #1a2a1a 0%, #2a3a2a 100%) !important;
-    border-left: 4px solid #cc0000 !important; /* Changed to red */
+    border-left: 4px solid #cc0000 !important;
     margin-right: 2rem !important;
 }}
 
@@ -275,40 +383,67 @@ custom_css = f"""
     .main-header p {{
         font-size: 1.1rem !important;
     }}
+    
+    .logo-image {{
+        width: 60px !important;
+        height: 60px !important;
+    }}
+    
+    .brand-text {{
+        font-size: 2rem !important;
+    }}
+}}
+
+/* Animations */
+@keyframes pulse-glow {{
+    0% {{ 
+        box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
+        transform: scale(1);
+    }}
+    50% {{ 
+        box-shadow: 0 0 40px rgba(255, 0, 0, 0.6);
+        transform: scale(1.02);
+    }}
+    100% {{ 
+        box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
+        transform: scale(1);
+    }}
 }}
 
-/* Animation for logo */
-@keyframes pulse {{
-    0% {{ box-shadow: 0 0 20px rgba(255, 0, 0, 0.3); }}
-    50% {{ box-shadow: 0 0 30px rgba(255, 0, 0, 0.6); }}
-    100% {{ box-shadow: 0 0 20px rgba(255, 0, 0, 0.3); }}
+@keyframes float {{
+    0%, 100% {{ transform: translateY(0px); }}
+    50% {{ transform: translateY(-10px); }}
 }}
 
-.logo-image {{
-    animation: none; /* Removed animation */
+.floating {{
+    animation: float 3s ease-in-out infinite;
 }}
 """
 
 # ==== Enhanced Theme ====
-masterbrand_theme = gr.themes.Base(primary_hue="red").set( # Changed to red
+masterbrand_theme = gr.themes.Base(primary_hue="red").set(
     body_background_fill="#0a0a0a",
     body_text_color="#ffffff",
-    border_color_accent="#ff0000", # Changed to red
-    button_primary_background_fill="#ff0000", # Changed to red
-    button_primary_background_fill_hover="#cc0000", # Changed to red
-    button_primary_text_color="#ffffff", # Changed text color to white for contrast
+    border_color_accent="#ff0000",
+    button_primary_background_fill="#ff0000",
+    button_primary_background_fill_hover="#cc0000",
+    button_primary_text_color="#ffffff",
     block_background_fill="#1a1a1a",
     block_border_color="#333333"
 )
 
 # ==== Enhanced UI ====
 with gr.Blocks(theme=masterbrand_theme, css=custom_css, title="MasterBrand AI Assistant") as demo:
-    # Enhanced header with no logo
+    # Enhanced header with logo
     logo_html = f"""
     <div class="main-header">
-        <h1>MASTERBRAND AI ASSISTANT</h1>
+        <div class="logo-container">
+            <img src="data:image/jpeg;base64,{logo_base64}" alt="MasterBrand Logo" class="logo-image floating">
+            <div class="brand-text">MASTERBRAND</div>
+        </div>
+        <h1>AI ASSISTANT</h1>
         <p>Your Personal E-commerce Business Expert - Available in English & Bulgarian</p>
-        <p style="font-size: 1rem; color: #ff0000; font-weight: 600; margin-top: 1rem;"> /* Changed to red */
+        <p style="font-size: 1rem; color: #ff0000; font-weight: 600; margin-top: 1rem;">
             🚀 Powered by Advanced AI • 🌍 Multilingual Support • 💼 Expert Business Guidance
         </p>
     </div>
@@ -328,26 +463,51 @@ with gr.Blocks(theme=masterbrand_theme, css=custom_css, title="MasterBrand AI As
                 show_copy_button=True
             )
 
-            inputs = gr.Textbox(
-                placeholder="Ask me anything about your e-commerce business... 💡",
-                label="Your Question",
-                lines=3,
-                elem_classes=["input-container"],
-                show_label=True
-            )
-
-            image_input = gr.Image(label="Upload an Image (optional)", type="pil")
-            video_input = gr.Video(label="Upload a Video (optional)")
-            url_input = gr.Textbox(label="Paste a URL (optional)", placeholder="https://example.com")
+            # Enhanced Input Section
+            with gr.Column(elem_classes=["input-section"]):
+                gr.HTML('<div class="input-label"><span class="input-icon">💬</span>Ask Your Question</div>')
+                inputs = gr.Textbox(
+                    placeholder="Ask me anything about your e-commerce business... 💡",
+                    label="",
+                    lines=3,
+                    elem_classes=["enhanced-textbox"],
+                    show_label=False
+                )
 
+                with gr.Row():
+                    with gr.Column():
+                        gr.HTML('<div class="input-label"><span class="input-icon">🖼️</span>Upload Image (Optional)</div>')
+                        image_input = gr.Image(
+                            label="", 
+                            type="pil", 
+                            elem_classes=["enhanced-image-input"],
+                            show_label=False
+                        )
+                    
+                    with gr.Column():
+                        gr.HTML('<div class="input-label"><span class="input-icon">🎥</span>Upload Video (Optional)</div>')
+                        video_input = gr.Video(
+                            label="", 
+                            elem_classes=["enhanced-video-input"],
+                            show_label=False
+                        )
+
+                gr.HTML('<div class="input-label"><span class="input-icon">🔗</span>Paste URL (Optional)</div>')
+                url_input = gr.Textbox(
+                    label="", 
+                    placeholder="https://example.com - Paste any URL for analysis",
+                    elem_classes=["enhanced-url-input"],
+                    show_label=False
+                )
 
-            with gr.Row():
                 submit_btn = gr.Button(
                     "🚀 Get Expert Advice",
                     variant="primary",
                     size="lg",
                     elem_classes=["submit-button"]
                 )
+
+            with gr.Row():
                 status_box = gr.Textbox(
                     label="Status",
                     interactive=False,
@@ -411,5 +571,3 @@ with gr.Blocks(theme=masterbrand_theme, css=custom_css, title="MasterBrand AI As
 if __name__ == "__main__":
     demo.queue(max_size=10).launch(server_name="0.0.0.0", server_port=7860)
 
-
-