new gui

.gradio/certificate.pem

@@ -0,0 +1,31 @@
+-----BEGIN CERTIFICATE-----
+MIIFazCCA1OgAwIBAgIRAIIQz7DSQONZRGPgu2OCiwAwDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMTUwNjA0MTEwNDM4
+WhcNMzUwNjA0MTEwNDM4WjBPMQswCQYDVQQGEwJVUzEpMCcGA1UEChMgSW50ZXJu
+ZXQgU2VjdXJpdHkgUmVzZWFyY2ggR3JvdXAxFTATBgNVBAMTDElTUkcgUm9vdCBY
+MTCCAiIwDQYJKoZIhvcNAQEBBQADggIPADCCAgoCggIBAK3oJHP0FDfzm54rVygc
+h77ct984kIxuPOZXoHj3dcKi/vVqbvYATyjb3miGbESTtrFj/RQSa78f0uoxmyF+
+0TM8ukj13Xnfs7j/EvEhmkvBioZxaUpmZmyPfjxwv60pIgbz5MDmgK7iS4+3mX6U
+A5/TR5d8mUgjU+g4rk8Kb4Mu0UlXjIB0ttov0DiNewNwIRt18jA8+o+u3dpjq+sW
+T8KOEUt+zwvo/7V3LvSye0rgTBIlDHCNAymg4VMk7BPZ7hm/ELNKjD+Jo2FR3qyH
+B5T0Y3HsLuJvW5iB4YlcNHlsdu87kGJ55tukmi8mxdAQ4Q7e2RCOFvu396j3x+UC
+B5iPNgiV5+I3lg02dZ77DnKxHZu8A/lJBdiB3QW0KtZB6awBdpUKD9jf1b0SHzUv
+KBds0pjBqAlkd25HN7rOrFleaJ1/ctaJxQZBKT5ZPt0m9STJEadao0xAH0ahmbWn
+OlFuhjuefXKnEgV4We0+UXgVCwOPjdAvBbI+e0ocS3MFEvzG6uBQE3xDk3SzynTn
+jh8BCNAw1FtxNrQHusEwMFxIt4I7mKZ9YIqioymCzLq9gwQbooMDQaHWBfEbwrbw
+qHyGO0aoSCqI3Haadr8faqU9GY/rOPNk3sgrDQoo//fb4hVC1CLQJ13hef4Y53CI
+rU7m2Ys6xt0nUW7/vGT1M0NPAgMBAAGjQjBAMA4GA1UdDwEB/wQEAwIBBjAPBgNV
+HRMBAf8EBTADAQH/MB0GA1UdDgQWBBR5tFnme7bl5AFzgAiIyBpY9umbbjANBgkq
+hkiG9w0BAQsFAAOCAgEAVR9YqbyyqFDQDLHYGmkgJykIrGF1XIpu+ILlaS/V9lZL
+ubhzEFnTIZd+50xx+7LSYK05qAvqFyFWhfFQDlnrzuBZ6brJFe+GnY+EgPbk6ZGQ
+3BebYhtF8GaV0nxvwuo77x/Py9auJ/GpsMiu/X1+mvoiBOv/2X/qkSsisRcOj/KK
+NFtY2PwByVS5uCbMiogziUwthDyC3+6WVwW6LLv3xLfHTjuCvjHIInNzktHCgKQ5
+ORAzI4JMPJ+GslWYHb4phowim57iaztXOoJwTdwJx4nLCgdNbOhdjsnvzqvHu7Ur
+TkXWStAmzOVyyghqpZXjFaH3pO3JLF+l+/+sKAIuvtd7u+Nxe5AW0wdeRlN8NwdC
+jNPElpzVmbUq4JUagEiuTDkHzsxHpFKVK7q4+63SM1N95R1NbdWhscdCb+ZAJzVc
+oyi3B43njTOQ5yOf+1CceWxG1bQVs5ZufpsMljq4Ui0/1lvh+wjChP4kqKOJ2qxq
+4RgqsahDYVvTH9w7jXbyLeiNdd8XM2w9U/t7y0Ff/9yi0GE44Za4rF2LN9d11TPA
+mRGunUHBcnWEvgJBQl9nJEiU0Zsnvgc/ubhPgXRR4Xq37Z0j4r7g1SgEEzwxA57d
+emyPxgcYxn/eR44/KJ4EBs+lVDR3veyJm+kXQ99b21/+jh5Xos1AnX5iItreGCc=
+-----END CERTIFICATE-----

app.py

@@ -1,21 +1,458 @@
 import gradio as gr
-from gradio import ChatMessage
+import json
+import time
+from typing import List, Dict, Tuple
 
+# Sample product data for demonstration
+SAMPLE_PRODUCTS = [
+    {
+        "productName": "Wireless Noise-Cancelling Headphones",
+        "productLink": "https://example.com/headphones",
+        "productPrice": "$199.99",
+        "productImageLink": "https://via.placeholder.com/300x200/667eea/ffffff?text=Headphones"
+    },
+    {
+        "productName": "Smart Fitness Watch",
+        "productLink": "https://example.com/smartwatch", 
+        "productPrice": "$299.99",
+        "productImageLink": "https://via.placeholder.com/300x200/764ba2/ffffff?text=Smartwatch"
+    },
+    {
+        "productName": "Ergonomic Office Chair",
+        "productLink": "https://example.com/chair",
+        "productPrice": "$449.99", 
+        "productImageLink": "https://via.placeholder.com/300x200/06b6d4/ffffff?text=Office+Chair"
+    }
+]
 
+def format_product_card(product: Dict) -> str:
+    """Format a single product as HTML card"""
+    return f"""
+    <div class="product-card" style="
+        background: rgba(45, 55, 72, 0.8);
+        border-radius: 15px;
+        padding: 18px;
+        margin-bottom: 18px;
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+        border: 1px solid rgba(102, 126, 234, 0.2);
+        transition: all 0.3s ease;
+        backdrop-filter: blur(10px);
+    ">
+        <img src="{product['productImageLink']}" 
+             style="width: 100%; height: 130px; object-fit: cover; border-radius: 10px; margin-bottom: 15px; 
+                    border: 1px solid rgba(102, 126, 234, 0.1);"
+             alt="{product['productName']}">
+        <div style="font-weight: 600; color: #f7fafc; margin-bottom: 10px; font-size: 1rem; line-height: 1.4;">
+            {product['productName']}
+        </div>
+        <div style="font-size: 1.2rem; font-weight: 700; color: #4ade80; margin-bottom: 12px; text-shadow: 0 0 10px rgba(74, 222, 128, 0.3);">
+            {product['productPrice']}
+        </div>
+        <a href="{product['productLink']}" target="_blank" 
+           style="color: white; text-decoration: none; font-size: 0.9rem; font-weight: 500;
+                  padding: 8px 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                  border-radius: 20px; display: inline-block; transition: all 0.3s ease;
+                  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); border: 1px solid rgba(102, 126, 234, 0.3);">
+            View Product →
+        </a>
+    </div>
+    """
 
-def interact_with_agent(prompt, messages):
-    messages.append(ChatMessage(role="user", content=prompt))
-    yield messages
+def format_products_html(products: List[Dict]) -> str:
+    """Format all products as HTML"""
+    if not products:
+        return """
+        <div style="display: flex; flex-direction: column; align-items: center; 
+                    justify-content: center; height: 300px; color: #cbd5e0; text-align: center;">
+            <div style="font-size: 4rem; margin-bottom: 20px; filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.3));">🛍️</div>
+            <h4 style="margin-bottom: 10px; color: #f7fafc; font-weight: 600;">No products yet</h4>
+            <p style="color: #cbd5e0; opacity: 0.8;">Start chatting to get personalized recommendations!</p>
+        </div>
+        """
     
+    products_html = ""
+    for product in products:
+        products_html += format_product_card(product)
+    
+    return f"""
+    <div style="max-height: 600px; overflow-y: auto; padding-right: 10px;">
+        {products_html}
+    </div>
+    """
+
+def simulate_ai_agent(message: str, history: List[Tuple[str, str]]) -> Tuple[str, str]:
+    """
+    Simulate your AI agent response
+    Replace this with your actual LlamaIndex agent logic
+    
+    Returns: (response_text, products_html)
+    """
+    # Simulate processing time
+    time.sleep(2)
+    
+    # Sample responses based on keywords
+    if "laptop" in message.lower() or "computer" in message.lower():
+        response = "Great! I found some excellent laptops for programming and gaming within your budget. These models offer fantastic performance and great value."
+        products = [
+            {
+                "productName": "ASUS TUF Gaming Laptop - RTX 3060",
+                "productLink": "https://example.com/asus-gaming",
+                "productPrice": "$899.99",
+                "productImageLink": "https://via.placeholder.com/300x200/667eea/ffffff?text=ASUS+TUF"
+            },
+            {
+                "productName": "Acer Nitro 5 Gaming Laptop",
+                "productLink": "https://example.com/acer-nitro5",
+                "productPrice": "$799.99",
+                "productImageLink": "https://via.placeholder.com/300x200/764ba2/ffffff?text=Acer+Nitro"
+            },
+            {
+                "productName": "HP Pavilion Gaming 15",
+                "productLink": "https://example.com/hp-pavilion",
+                "productPrice": "$749.99",
+                "productImageLink": "https://via.placeholder.com/300x200/06b6d4/ffffff?text=HP+Pavilion"
+            }
+        ]
+    elif "headphone" in message.lower() or "audio" in message.lower():
+        response = "Perfect! I've found some top-rated headphones with excellent sound quality and noise cancellation."
+        products = [
+            {
+                "productName": "Sony WH-1000XM4 Wireless Headphones",
+                "productLink": "https://example.com/sony-wh1000xm4",
+                "productPrice": "$279.99",
+                "productImageLink": "https://via.placeholder.com/300x200/667eea/ffffff?text=Sony+WH1000XM4"
+            },
+            {
+                "productName": "Bose QuietComfort 45",
+                "productLink": "https://example.com/bose-qc45",
+                "productPrice": "$329.99",
+                "productImageLink": "https://via.placeholder.com/300x200/764ba2/ffffff?text=Bose+QC45"
+            }
+        ]
+    else:
+        response = "I understand you're looking for something specific! Let me find the best options for you based on your requirements."
+        products = SAMPLE_PRODUCTS
+    
+    products_html = format_products_html(products)
+    
+    return response, products_html
+
+def chat_interface(message: str, history: List[Tuple[str, str]], products_state: str) -> Tuple[List[Tuple[str, str]], str, str]:
+    """Handle chat interaction and update products"""
+    if not message.strip():
+        return history, products_state, ""
+    
+    # Get AI response and products
+    ai_response, new_products_html = simulate_ai_agent(message, history)
+    
+    # Update chat history
+    history.append((message, ai_response))
+    
+    return history, new_products_html, ""
+
+# Custom CSS for dark mode gradient styling
+custom_css = """
+/* Dark mode variables */
+:root {
+    --bg-primary: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+    --bg-secondary: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
+    --bg-card: rgba(45, 55, 72, 0.8);
+    --bg-chat: rgba(26, 32, 44, 0.9);
+    --text-primary: #f7fafc;
+    --text-secondary: #cbd5e0;
+    --accent-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --accent-glow: rgba(102, 126, 234, 0.3);
+    --border-color: rgba(102, 126, 234, 0.2);
+    --shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.4);
+}
+
+/* Main container styling */
+.gradio-container {
+    background: var(--bg-primary) !important;
+    min-height: 100vh;
+    color: var(--text-primary) !important;
+}
+
+/* Override Gradio's default backgrounds */
+.gradio-container .block {
+    background: transparent !important;
+    border: none !important;
+}
+
+/* Header styling */
+.header-text {
+    background: var(--accent-primary);
+    color: white !important;
+    padding: 25px;
+    border-radius: 20px;
+    text-align: center;
+    margin-bottom: 25px;
+    box-shadow: var(--shadow-dark);
+    border: 1px solid var(--border-color);
+    backdrop-filter: blur(10px);
+}
+
+/* Products panel styling */
+.products-panel {
+    background: var(--bg-card) !important;
+    border-radius: 20px !important;
+    padding: 25px !important;
+    box-shadow: var(--shadow-dark) !important;
+    border: 1px solid var(--border-color) !important;
+    backdrop-filter: blur(10px) !important;
+}
+
+/* Chat panel styling */  
+.chat-panel {
+    background: var(--bg-chat) !important;
+    border-radius: 20px !important;
+    box-shadow: var(--shadow-dark) !important;
+    border: 1px solid var(--border-color) !important;
+    backdrop-filter: blur(10px) !important;
+    padding: 25px !important;
+}
+
+/* Chatbot container */
+.chatbot {
+    background: rgba(26, 32, 44, 0.6) !important;
+    border-radius: 15px !important;
+    border: 1px solid var(--border-color) !important;
+    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3) !important;
+    backdrop-filter: blur(5px) !important;
+}
+
+/* Chat messages styling */
+.chatbot .message {
+    background: transparent !important;
+}
+
+/* User messages */
+.chatbot .message.user {
+    background: var(--accent-primary) !important;
+    color: white !important;
+    border-radius: 18px 18px 5px 18px !important;
+    padding: 12px 18px !important;
+    margin: 8px 0 !important;
+    box-shadow: 0 4px 15px var(--accent-glow) !important;
+    border: 1px solid rgba(102, 126, 234, 0.3) !important;
+}
+
+/* Bot messages */
+.chatbot .message.bot {
+    background: rgba(45, 55, 72, 0.8) !important;
+    color: var(--text-primary) !important;
+    border-radius: 18px 18px 18px 5px !important;
+    padding: 12px 18px !important;
+    margin: 8px 0 !important;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
+    border: 1px solid var(--border-color) !important;
+    backdrop-filter: blur(5px) !important;
+}
+
+/* Input styling */
+.chatbot-input textarea {
+    background: rgba(26, 32, 44, 0.8) !important;
+    border: 2px solid var(--border-color) !important;
+    border-radius: 25px !important;
+    padding: 15px 20px !important;
+    font-size: 16px !important;
+    color: var(--text-primary) !important;
+    backdrop-filter: blur(5px) !important;
+    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2) !important;
+}
 
+.chatbot-input textarea::placeholder {
+    color: var(--text-secondary) !important;
+    opacity: 0.7;
+}
 
-with gr.Blocks() as demo:
-    chatbot = gr.Chatbot(label="Agent",
-                         msg_format="messages",
-                         avatar_images=(None, "https://em-content.zobj.net/source/twitter/53/robot-face_1f916.png"))
-    text_input = gr.Textbox(lines=1, label="Chat Message")
-    text_input.submit(interact_with_agent, [text_input, chatbot], [chatbot])
+.chatbot-input textarea:focus {
+    border-color: #667eea !important;
+    box-shadow: 0 0 0 3px var(--accent-glow) !important;
+    background: rgba(26, 32, 44, 0.9) !important;
+}
 
+/* Button styling */
+.chatbot-submit {
+    background: var(--accent-primary) !important;
+    border: none !important;
+    border-radius: 25px !important;
+    padding: 15px 25px !important;
+    color: white !important;
+    font-weight: 600 !important;
+    box-shadow: 0 4px 15px var(--accent-glow) !important;
+    border: 1px solid rgba(102, 126, 234, 0.3) !important;
+    transition: all 0.3s ease !important;
+}
+
+.chatbot-submit:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px var(--accent-glow) !important;
+    filter: brightness(1.1) !important;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(26, 32, 44, 0.3);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--accent-primary);
+    border-radius: 5px;
+    border: 2px solid rgba(26, 32, 44, 0.3);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
+}
+
+/* Product cards hover effect */
+.product-card:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.2) !important;
+}
+
+/* Text color overrides */
+.products-panel h3,
+.products-panel p,
+.chat-panel h3 {
+    color: var(--text-primary) !important;
+}
+
+/* Gradio component overrides */
+.gr-form {
+    background: transparent !important;
+}
+
+.gr-box {
+    background: transparent !important;
+    border: none !important;
+}
+
+/* Fix input group styling */
+.gr-group {
+    background: transparent !important;
+}
+
+/* Textarea wrapper */
+.gr-textbox {
+    background: transparent !important;
+}
+
+/* Button wrapper */
+.gr-button {
+    background: transparent !important;
+}
+
+/* Chat interface specific fixes */
+.chatbot-container {
+    background: transparent !important;
+}
+
+/* Message bubble improvements */
+.chatbot .message-row {
+    margin: 10px 0 !important;
+}
+
+/* Better spacing for chat */
+.chatbot .chat-container {
+    padding: 15px !important;
+}
+"""
+
+# Create the Gradio interface
+with gr.Blocks(css=custom_css, title="Buyverse - AI Shopping Agent", theme=gr.themes.Soft()) as demo:
+    
+    # Header
+    gr.HTML("""
+    <div class="header-text">
+        <h1 style="font-size: 2.8rem; margin-bottom: 12px; font-weight: 700; text-shadow: 0 0 20px rgba(255,255,255,0.3);">🛍️ Buyverse</h1>
+        <p style="font-size: 1.3rem; opacity: 0.95; text-shadow: 0 0 10px rgba(255,255,255,0.2);">Your AI-Powered Shopping Assistant</p>
+    </div>
+    """)
+    
+    # Main layout with two columns
+    with gr.Row():
+        # Left column - Products (30% width)
+        with gr.Column(scale=3, elem_classes=["products-panel"]):
+            gr.HTML("""
+            <div style="margin-bottom: 20px;">
+                <h3 style="color: #f7fafc; font-size: 1.4rem; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center;
+                          text-shadow: 0 0 10px rgba(102, 126, 234, 0.3);">
+                    🛒 Recommended Products
+                </h3>
+                <p style="color: #cbd5e0; font-size: 1rem; opacity: 0.9;">AI-curated items based on your needs</p>
+            </div>
+            """)
+            
+            # Products display area
+            products_display = gr.HTML(
+                format_products_html([]),
+                elem_id="products-container"
+            )
+        
+        # Right column - Chat (70% width)
+        with gr.Column(scale=7, elem_classes=["chat-panel"]):
+            gr.HTML("""
+            <div style="padding: 25px 0; border-bottom: 1px solid rgba(102, 126, 234, 0.2); margin-bottom: 25px;">
+                <h3 style="color: #f7fafc; font-size: 1.4rem; font-weight: 600; display: flex; align-items: center;
+                          text-shadow: 0 0 10px rgba(102, 126, 234, 0.3);">
+                    💬 Chat with AI Assistant
+                </h3>
+            </div>
+            """)
+            
+            # Chat interface
+            chatbot = gr.Chatbot(
+                value=[("", "👋 Hello! I'm your personal shopping assistant. Tell me what you're looking for and I'll help you find the perfect products. Whether it's electronics, clothing, home goods, or anything else - just describe your needs and budget!")],
+                height=500,
+                show_label=False,
+                elem_classes=["chatbot"],
+                bubble_full_width=False,
+                render_markdown=True
+            )
+            
+            # Input area
+            with gr.Row():
+                msg = gr.Textbox(
+                    placeholder="Tell me what you're shopping for...",
+                    show_label=False,
+                    scale=4,
+                    lines=1,
+                    elem_classes=["chatbot-input"]
+                )
+                submit = gr.Button(
+                    "Send 🚀", 
+                    scale=1,
+                    elem_classes=["chatbot-submit"]
+                )
+    
+    # State to store products
+    products_state = gr.State(format_products_html([]))
+    
+    # Handle chat interactions
+    msg.submit(
+        fn=chat_interface,
+        inputs=[msg, chatbot, products_state],
+        outputs=[chatbot, products_display, msg]
+    )
+    
+    submit.click(
+        fn=chat_interface,
+        inputs=[msg, chatbot, products_state], 
+        outputs=[chatbot, products_display, msg]
+    )
 
+# Launch the app
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(
+        share=True,
+        server_name="0.0.0.0",
+        server_port=7860,
+        show_error=True
+    )