edited the readme file

README.md

@@ -1,12 +1,12 @@
 ---
 title: BuyVerse
-emoji: 🏢
-colorFrom: yellow
+emoji: 🛒
+colorFrom: quartz
 colorTo: blue
 sdk: gradio
 sdk_version: 5.33.1
 app_file: app.py
-pinned: false
+pinned: True
 short_description: 'Shopping AI Assistant '
 ---
 

app.py

@@ -0,0 +1,361 @@
+import gradio as gr
+import random
+
+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;
+    }
+    
+    .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;
+}
+
+.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)