MasterBrand_ChatBot

Sleeping

App Files Files Community

Yordann commited on Sep 10, 2025

Commit

3225e49

verified ·

1 Parent(s): 17a86bf

Update app.py

Browse files

Files changed (1) hide show

app.py +324 -76

app.py CHANGED Viewed

@@ -70,82 +70,330 @@ def reset_textbox():
 # ==== Custom CSS ====
 custom_css = """
-@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;
-}
-.gradio-container {
-    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
-    min-height: 100vh !important;
-}
-.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;
-    text-shadow: 0 0 20px rgba(255, 77, 0, 0.3) !important;
-}
-.main-header p {
-    color: #cccccc !important;
-    font-size: 1.2rem !important;
-}
-.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;
-}
-.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;
-}
-.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-container label {
-    color: #ffffff !important;
-    font-weight: 600 !important;
-    font-size: 1rem !important;
-}
-.status-container textarea {
-    background: transparent !important;
-    border: none !important;
-    color: #4CAF50 !important;
-    font-weight: 600 !important;
-}
-.footer {
-    display: none !important;
-}
 """
 # ==== Theme ====

 # ==== Custom CSS ====
 custom_css = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MasterBrand AI Assistant - Enhanced UI Demo</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Inter', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a1a1a 100%);
+            min-height: 100vh;
+            color: #ffffff;
+        }
+        .main-header {
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 50%, #2a1a1a 100%);
+            padding: 3rem 0;
+            text-align: center;
+            border-bottom: 3px solid #00ff41;
+            margin-bottom: 2rem;
+            position: relative;
+            overflow: hidden;
+        }
+        .main-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(circle at 50% 50%, rgba(0, 255, 65, 0.1) 0%, transparent 70%);
+            pointer-events: none;
+        }
+        .logo-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 1rem;
+            margin-bottom: 1rem;
+        }
+        .logo-image {
+            width: 60px;
+            height: 60px;
+            border-radius: 12px;
+            box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
+            background: #00ff41;
+            padding: 8px;
+            animation: pulse 3s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 20px rgba(0, 255, 65, 0.3); }
+            50% { box-shadow: 0 0 30px rgba(0, 255, 65, 0.6); }
+            100% { box-shadow: 0 0 20px rgba(0, 255, 65, 0.3); }
+        }
+        .main-header h1 {
+            font-size: 3.5rem;
+            font-weight: 900;
+            text-shadow: 0 0 30px rgba(0, 255, 65, 0.5);
+            background: linear-gradient(135deg, #ffffff 0%, #00ff41 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin: 0;
+        }
+        .main-header p {
+            color: #cccccc;
+            font-size: 1.3rem;
+            font-weight: 500;
+            margin-top: 0.5rem;
+        }
+        .subtitle {
+            font-size: 1rem;
+            color: #00ff41;
+            font-weight: 600;
+            margin-top: 1rem;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 2rem;
+        }
+        .chatbot-container {
+            background: rgba(26, 26, 26, 0.95);
+            border: 2px solid #00ff41;
+            border-radius: 25px;
+            box-shadow: 0 15px 40px rgba(0, 255, 65, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+            margin-bottom: 2rem;
+            backdrop-filter: blur(10px);
+            padding: 2rem;
+            min-height: 400px;
+        }
+        .chat-messages {
+            height: 350px;
+            overflow-y: auto;
+            margin-bottom: 1rem;
+            padding: 1rem;
+            background: rgba(42, 42, 42, 0.5);
+            border-radius: 15px;
+        }
+        .message {
+            background: rgba(42, 42, 42, 0.8);
+            border-radius: 15px;
+            margin: 0.5rem 0;
+            padding: 1rem;
+            border-left: 4px solid #00ff41;
+        }
+        .message.user {
+            background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
+            border-left: 4px solid #00ff41;
+            margin-left: 2rem;
+        }
+        .message.bot {
+            background: linear-gradient(135deg, #1a2a1a 0%, #2a3a2a 100%);
+            border-left: 4px solid #00cc33;
+            margin-right: 2rem;
+        }
+        .input-container {
+            position: relative;
+            margin-bottom: 1rem;
+        }
+        .input-container textarea {
+            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+            border: 2px solid #00ff41;
+            border-radius: 15px;
+            color: #ffffff;
+            font-size: 1.1rem;
+            padding: 1.2rem;
+            resize: none;
+            transition: all 0.3s ease;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+            width: 100%;
+            min-height: 80px;
+        }
+        .input-container textarea:focus {
+            border-color: #00ff41;
+            box-shadow: 0 0 25px rgba(0, 255, 65, 0.4), 0 5px 15px rgba(0, 0, 0, 0.3);
+            outline: none;
+            transform: translateY(-2px);
+        }
+        .input-container textarea::placeholder {
+            color: #888888;
+            font-style: italic;
+        }
+        .submit-button {
+            background: linear-gradient(135deg, #00ff41 0%, #00cc33 100%);
+            border: none;
+            border-radius: 15px;
+            color: #000000;
+            font-size: 1.2rem;
+            font-weight: 700;
+            padding: 1.2rem 2.5rem;
+            transition: all 0.3s ease;
+            box-shadow: 0 8px 20px rgba(0, 255, 65, 0.3);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            cursor: pointer;
+            width: 100%;
+        }
+        .submit-button:hover {
+            background: linear-gradient(135deg, #00cc33 0%, #00aa2a 100%);
+            transform: translateY(-3px);
+            box-shadow: 0 12px 30px rgba(0, 255, 65, 0.4);
+        }
+        .submit-button:active {
+            transform: translateY(-1px);
+        }
+        .footer {
+            text-align: center;
+            padding: 2rem;
+            color: #666666;
+            border-top: 1px solid #333333;
+            margin-top: 3rem;
+        }
+        .footer p {
+            margin: 0;
+            font-size: 0.9rem;
+        }
+        .footer .sub-text {
+            margin: 0.5rem 0 0 0;
+            font-size: 0.8rem;
+            color: #888888;
+        }
+        @media (max-width: 768px) {
+            .main-header h1 {
+                font-size: 2.5rem;
+            }
+            .main-header p {
+                font-size: 1.1rem;
+            }
+            .logo-image {
+                width: 50px;
+                height: 50px;
+            }
+            .container {
+                padding: 0 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="main-header">
+        <div class="logo-container">
+            <div class="logo-image">🚀</div>
+            <h1>MASTERBRAND AI ASSISTANT</h1>
+        </div>
+        <p>Your Personal E-commerce Business Expert - Available in English & Bulgarian</p>
+        <p class="subtitle">
+            🚀 Powered by Advanced AI • 🌍 Multilingual Support • 💼 Expert Business Guidance
+        </p>
+    </div>
+    <div class="container">
+        <div class="chatbot-container">
+            <h3 style="margin-bottom: 1rem; color: #00ff41;">💬 Chat with MasterBrand AI</h3>
+            <div class="chat-messages" id="chatMessages">
+                <div class="message bot">
+                    <strong>MasterBrand AI:</strong> Welcome! I'm here to help you build and grow your e-commerce business. Whether you're just starting out or looking to scale, I can provide expert guidance on everything from product selection to marketing strategies. What would you like to know?
+                </div>
+            </div>
+            <div class="input-container">
+                <textarea id="userInput" placeholder="Ask me anything about your e-commerce business... 💡" rows="3"></textarea>
+            </div>
+            <button class="submit-button" onclick="sendMessage()">
+                🚀 Get Expert Advice
+            </button>
+        </div>
+    </div>
+    <div class="footer">
+        <p>© 2025 MasterBrand AI Assistant • Built with ❤️ for E-commerce Success</p>
+        <p class="sub-text">Empowering entrepreneurs worldwide with AI-driven business insights</p>
+    </div>
+    <script>
+        function sendMessage() {
+            const input = document.getElementById('userInput');
+            const messages = document.getElementById('chatMessages');
+            const userMessage = input.value.trim();
+            if (!userMessage) return;
+            // Add user message
+            const userDiv = document.createElement('div');
+            userDiv.className = 'message user';
+            userDiv.innerHTML = `<strong>You:</strong> ${userMessage}`;
+            messages.appendChild(userDiv);
+            // Clear input
+            input.value = '';
+            // Simulate AI response
+            setTimeout(() => {
+                const botDiv = document.createElement('div');
+                botDiv.className = 'message bot';
+                let response = '';
+                if (userMessage.toLowerCase().includes('start') || userMessage.toLowerCase().includes('begin')) {
+                    response = "Great question! Starting an e-commerce business is exciting. First, let's identify your niche - what products are you passionate about? Then we'll work on market research, setting up your online store, and creating a marketing strategy. What specific area interests you most?";
+                } else if (userMessage.toLowerCase().includes('marketing')) {
+                    response = "Marketing is crucial for e-commerce success! Focus on: 1) Social media presence (Instagram, Facebook, TikTok), 2) Content marketing (blogs, videos), 3) Email campaigns, 4) SEO optimization, and 5) Influencer partnerships. Which channel would you like to explore first?";
+                } else if (userMessage.toLowerCase().includes('product')) {
+                    response = "Product selection is key! Consider: 1) Market demand and trends, 2) Profit margins, 3) Competition analysis, 4) Your expertise and passion, 5) Shipping and storage requirements. Research tools like Google Trends and Amazon Best Sellers can help. What product category are you considering?";
+                } else {
+                    response = "I'm here to help with your e-commerce journey! Whether you need advice on starting your business, marketing strategies, product selection, or scaling operations, I can provide expert guidance based on proven Masterbrand principles. What specific challenge can I help you with today?";
+                }
+                botDiv.innerHTML = `<strong>MasterBrand AI:</strong> ${response}`;
+                messages.appendChild(botDiv);
+                // Scroll to bottom
+                messages.scrollTop = messages.scrollHeight;
+            }, 1000);
+            // Scroll to bottom
+            messages.scrollTop = messages.scrollHeight;
+        }
+        // Allow Enter key to send message
+        document.getElementById('userInput').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+    </script>
+</body>
+</html>
 """
 # ==== Theme ====