Create app.py

app.py

@@ -0,0 +1,109 @@
+import gradio as gr
+
+# Backend function
+def add_to_cart(name, price, quantity, special_instructions):
+    cart = []  # This could be replaced with a database or persistent storage
+    item = {
+        "name": name,
+        "price": price,
+        "quantity": quantity,
+        "special_instructions": special_instructions
+    }
+    cart.append(item)
+    return f"Item '{name}' added to the cart with quantity {quantity}!"
+
+# Custom JavaScript for frontend
+custom_js = """
+<script>
+function openModal(name, price) {
+    const modal = document.getElementById("modal");
+    modal.style.display = "block";
+    document.getElementById("item-name").innerText = name;
+    document.getElementById("item-price").innerText = price;
+}
+
+function closeModal() {
+    document.getElementById("modal").style.display = "none";
+}
+
+function addToCart() {
+    const name = document.getElementById("item-name").innerText;
+    const price = document.getElementById("item-price").innerText;
+    const quantity = document.getElementById("item-quantity").value;
+    const instructions = document.getElementById("special-instructions").value;
+
+    fetch("/api/predict", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+            data: [name, price, quantity, instructions],
+            fn_index: 0  // This must match the backend function index
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        alert(data.data[0]);
+        closeModal();
+    })
+    .catch(error => {
+        console.error("Error:", error);
+        alert("Failed to add item to cart.");
+    });
+}
+</script>
+"""
+
+# Modal HTML
+modal_html = """
+<div id="modal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; padding:20px; border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,0.2);">
+    <h3>Item Details</h3>
+    <p><strong>Name:</strong> <span id="item-name"></span></p>
+    <p><strong>Price:</strong> <span id="item-price"></span></p>
+    <label for="item-quantity">Quantity:</label>
+    <input type="number" id="item-quantity" value="1" min="1" />
+    <br /><br />
+    <label for="special-instructions">Special Instructions:</label>
+    <textarea id="special-instructions" rows="3" style="width:100%;"></textarea>
+    <br /><br />
+    <button onclick="addToCart()">Add to Cart</button>
+    <button onclick="closeModal()">Close</button>
+</div>
+"""
+
+# Gradio Interface
+with gr.Blocks() as app:
+    with gr.Row():
+        gr.HTML("<h1>Welcome to the Shop</h1>")
+
+    with gr.Row():
+        # Display items
+        gr.HTML(
+            """
+            <div style="display:flex; gap:20px;">
+                <div style="border:1px solid #ddd; padding:10px; border-radius:8px;">
+                    <h3>Item 1</h3>
+                    <p>Price: $10</p>
+                    <button onclick="openModal('Item 1', '$10')">Add to Cart</button>
+                </div>
+                <div style="border:1px solid #ddd; padding:10px; border-radius:8px;">
+                    <h3>Item 2</h3>
+                    <p>Price: $20</p>
+                    <button onclick="openModal('Item 2', '$20')">Add to Cart</button>
+                </div>
+            </div>
+            """
+        )
+
+    # Inject modal and JavaScript
+    gr.HTML(modal_html)
+    gr.HTML(custom_js)
+
+    # Map backend function
+    app.add_handler(
+        fn=add_to_cart,
+        inputs=["text", "text", "number", "text"],  # Match parameters of `add_to_cart`
+        outputs="text"
+    )
+
+# Launch app
+app.launch()