edited the readme file

README.md

@@ -1,7 +1,7 @@
 ---
 title: BuyVerse
 emoji: 🛒
-colorFrom: quartz
+colorFrom: indigo
 colorTo: blue
 sdk: gradio
 sdk_version: 5.33.1

app.py

@@ -1,361 +1,21 @@
 import gradio as gr
-import random
+from gradio import ChatMessage
 
-def generate_sample_products(count=5):
-    """Generate sample product data"""
-    products = []
-    for i in range(1, count + 1):
-        product = {
-            "name": f"Sample Product {i}",
-            "price": f"${random.randint(10, 500):.2f}",
-            "rating": f"{random.uniform(1, 5):.1f} ",
-            "description": f"This is a sample product description {i} with some details about the item."
-        }
-        products.append(product)
-    return products
 
-def shopping_agent(user_request, chat_history):
-    # Simulate LlamaIndex response (replace with actual call)
-    response = {
-        "chat_response": f"I found some products based on: {user_request}",
-        "agent_actions": "Searched for products\nFiltered by price\nSorted by rating"
-    }
-    
-    # Generate sample products
-    products = generate_sample_products(3)  # Show 3 recommended products
-    
-    # Format the chat response
-    chat_message = response.get("chat_response", "Processing...")
-    chat_history.append((user_request, chat_message))
-    
-    return chat_history, response["agent_actions"], products
-
-# Custom CSS for better styling
-css = """
-:root {
-    --primary-color: #2563eb;
-    --secondary-color: #1e40af;
-    --accent-color: #3b82f6;
-    --text-color: #1f2937;
-    --light-bg: #f3f4f6;
-    --card-bg: #ffffff;
-    --border-color: #e5e7eb;
-}
-
-body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    color: var(--text-color);
-    background-color: var(--light-bg);
-    margin: 0;
-    padding: 0;
-    overflow-x: hidden;
-    width: 100%;
-    box-sizing: border-box;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-#main-container {
-    width: 100%;
-    max-width: 1600px;
-    margin: 0 auto;
-    padding: 0 1rem;
-}
-
-.header-container {
-    text-align: center;
-    margin-bottom: 1.5rem;
-    padding: 1rem;
-    max-width: 100%;
-}
-
-.header-container h1 {
-    margin-bottom: 0.5rem !important;
-    font-size: 2rem !important;
-}
-
-.header-container p {
-    color: #6b7280;
-    font-size: 1rem;
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 0 1rem;
-}
-
-.scrollable-column {
-    height: calc(100vh - 200px);
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 1rem;
-    border-radius: 12px;
-    background: var(--card-bg);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    margin: 0 0.25rem;
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-}
-
-.product-card {
-    border: 1px solid var(--border-color);
-    border-radius: 12px;
-    padding: 15px;
-    margin-bottom: 15px;
-    background: var(--card-bg);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    width: 100%;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-}
-
-.product-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-
-.product-card h3 {
-    margin: 0 0 10px 0;
-    color: var(--primary-color);
-    font-size: 1.25rem;
-    font-weight: 600;
-}
-
-.product-card .price {
-    font-weight: 700;
-    color: #059669;
-    margin: 8px 0;
-    font-size: 1.1rem;
-}
-
-.product-card .rating {
-    color: #f59e0b;
-    margin: 8px 0;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.product-card p {
-    color: #4b5563;
-    margin: 12px 0;
-    line-height: 1.5;
-}
-
-.product-card button {
-    background-color: var(--primary-color) !important;
-    color: white !important;
-    border: none !important;
-    padding: 10px 20px !important;
-    border-radius: 8px !important;
-    font-weight: 500 !important;
-    transition: background-color 0.2s ease !important;
-}
-
-.product-card button:hover {
-    background-color: var(--secondary-color) !important;
-}
-
-.action-log {
-    height: calc(100% - 50px);
-    overflow-y: auto;
-    border: 1px solid var(--border-color);
-    padding: 16px;
-    border-radius: 8px;
-    background: var(--card-bg);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    flex-grow: 1;
-    min-height: 100px;
-}
 
-.action-log div {
-    padding: 8px 0;
-    border-bottom: 1px solid var(--border-color);
-    color: #4b5563;
-}
-
-.action-log div:last-child {
-    border-bottom: none;
-}
-
-.gr-chat {
-    border-radius: 12px !important;
-    border: 1px solid var(--border-color) !important;
-    background: var(--card-bg) !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
-    max-width: 100% !important;
-    height: calc(100% - 60px) !important;
-    min-height: 200px;
-    margin-bottom: 12px;
-}
-
-.chat-column {
-    display: flex;
-    flex-direction: column;
-}
-
-.chatbot-container {
-    flex-grow: 1;
-    min-height: 200px;
-    display: flex;
-    flex-direction: column;
-}
-
-#main-row {
-    width: 100%;
-    margin: 0;
-    gap: 16px;
-}
-
-.chat-input {
-    width: 100% !important;
-    max-width: 100% !important;
-}
-
-.send-button {
-    align-self: flex-end;
-    height: 100%;
-}
-
-@media (max-width: 1200px) {
-    #main-row {
-        flex-direction: column;
-    }
+def interact_with_agent(prompt, messages):
+    messages.append(ChatMessage(role="user", content=prompt))
+    yield messages
     
-    .scrollable-column {
-        width: 100% !important;
-        margin: 0 0 16px 0 !important;
-        height: auto !important;
-        max-height: 50vh;
-    }
-    
-    .chatbot-container {
-        min-height: 300px;
-    }
-}
-
-/* Fix for Gradio's internal styles */
-.gr-block {
-    margin: 0 !important;
-    padding: 0 !important;
-}
 
-.gr-box {
-    border: none !important;
-    padding: 0 !important;
-}
 
-.gr-input {
-    border-radius: 8px !important;
-    border: 1px solid var(--border-color) !important;
-    padding: 12px !important;
-    max-width: 100% !important;
-}
+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])
 
-.gr-button {
-    border-radius: 8px !important;
-    font-weight: 500 !important;
-}
-
-h1 {
-    color: var(--primary-color) !important;
-    font-size: 2.5rem !important;
-    font-weight: 700 !important;
-    margin-bottom: 1.5rem !important;
-}
-
-h2 {
-    color: var(--text-color) !important;
-    font-size: 1.5rem !important;
-    font-weight: 600 !important;
-    margin-bottom: 1rem !important;
-}
-"""
-
-def create_product_card(product):
-    """Create HTML for a product card"""
-    return f"""
-    <div class="product-card">
-        <h3>{product['name']}</h3>
-        <div class="price">{product['price']}</div>
-        <div class="rating">★ {product['rating']}</div>
-        <p>{product['description']}</p>
-        <button class="gr-button gr-button-secondary">View Details</button>
-    </div>
-    """
-
-with gr.Blocks(css=css) as demo:
-    with gr.Column(elem_id="main-container"):
-        with gr.Column(elem_classes="header-container"):
-            gr.Markdown("# Buyverse Shopping Assistant")
-            gr.Markdown("Your AI-powered shopping companion that helps you find the perfect products")
-    
-    with gr.Row(equal_height=True, elem_id="main-row"):
-        # Left Column: Recommended Products
-        with gr.Column(scale=3, min_width=250, elem_classes="scrollable-column"):
-            gr.Markdown("## Recommended Products")
-            recommended_products = gr.HTML()
-        
-        # Middle Column: Chat Interface
-        with gr.Column(scale=5, min_width=350, elem_classes=["scrollable-column", "chat-column"]):
-            chat_preview = gr.Chatbot(label="Chat with Assistant", height=400, show_label=True, elem_classes=["chatbot-container"])
-            with gr.Row() as input_row:
-                user_input = gr.Textbox(
-                    label="",
-                    placeholder="Describe what you're looking for...",
-                    container=False,
-                    scale=8,
-                    show_label=False,
-                    elem_classes=["chat-input"],
-                    max_lines=3
-                )
-                submit_btn = gr.Button("Send", variant="primary", scale=1, min_width=80, elem_classes=["send-button"])
-        
-        # Right Column: Agent Actions Log
-        with gr.Column(scale=2, min_width=220, elem_classes="scrollable-column"):
-            gr.Markdown("## Agent Actions")
-            action_log = gr.HTML("<div class='action-log'></div>")
-    
-    # Initialize with some sample products
-    demo.load(
-        fn=lambda: [create_product_card(p) for p in generate_sample_products(5)],
-        outputs=[recommended_products]
-    )
-    
-    def update_chat_and_actions(user_input, chat_history):
-        if not user_input.strip():
-            return "", chat_history, ""
-        
-        # Get agent response
-        chat_history, actions, products = shopping_agent(user_input, chat_history)
-        
-        # Update products display
-        product_cards = "".join([create_product_card(p) for p in products])
-        
-        # Format actions log
-        action_log_content = "<div class='action-log'>"
-        for action in actions.split("\n"):
-            if action.strip():
-                action_log_content += f"<div>• {action}</div>"
-        action_log_content += "</div>"
-        
-        return "", chat_history, action_log_content, product_cards
-    
-    # Connect the submit button and Enter key
-    submit_btn.click(
-        fn=update_chat_and_actions,
-        inputs=[user_input, chat_preview],
-        outputs=[user_input, chat_preview, action_log, recommended_products]
-    )
-    
-    user_input.submit(
-        fn=update_chat_and_actions,
-        inputs=[user_input, chat_preview],
-        outputs=[user_input, chat_preview, action_log, recommended_products]
-    )
 
 if __name__ == "__main__":
-    demo.launch(share=False)
+    demo.launch()