Update app.py

app.py

@@ -3,22 +3,14 @@ import torch
 from torchvision import transforms
 from PIL import Image
 import joblib
-import base64
-import os
 
 # Load model and metadata
-try:
-    model = torch.jit.load("resnet_grocery_model_scripted.pt", map_location=torch.device("cpu"))
-    model.eval()
-except FileNotFoundError:
-    raise FileNotFoundError("Model file 'resnet_grocery_model_scripted.pt' not found. Ensure it is in the working directory.")
-
-try:
-    assets = joblib.load("deployment_assets.joblib")
-    transform = assets['transform']
-    class_names = assets['class_names']
-except FileNotFoundError:
-    raise FileNotFoundError("Assets file 'deployment_assets.joblib' not found. Ensure it is in the working directory.")
+model = torch.jit.load("resnet_grocery_model_scripted.pt", map_location=torch.device("cpu"))
+model.eval()
+
+assets = joblib.load("deployment_assets.joblib")
+transform = assets['transform']
+class_names = assets['class_names']
 
 # Item names and prices
 items = ['Bisconni Chocolate Chip Cookies 46.8gm', 'Coca Cola Can 250ml', 'Colgate Maximum Cavity Protection 75gm',
@@ -81,121 +73,113 @@ def classify_and_track(images, budget):
     if total_cost <= budget:
         receipt_lines.append("      ✅ You're within budget! 🎉")
         receipt_lines.append("      🛍️ Happy Shopping!")
-        sound_path = "success.mp3" if os.path.exists("success.mp3") else None
     else:
         receipt_lines.append("      ❌ Over budget! Try removing items 😬")
-        sound_path = "fail.mp3" if os.path.exists("fail.mp3") else None
+    receipt_lines.append("      ==============================")
+    receipt_lines.append("       THANK YOU FOR SHOPPING WITH US!")
+    receipt_lines.append("      Come back for smarter buys! 🧾")
 
     receipt_text = "\n".join(receipt_lines)
-    percent = min(100, int((total_cost / budget) * 100)) if budget else 0
-    status_msg = f"**Total: ₱{total_cost:.2f} / ₱{budget:.2f}**"
-    summary = "\n".join([f"🛒 **{r[1].split(' - ')[0]}** — ₱{float(r[1].split(' - ')[1][1:]):.2f}" for r in results])
-
-    return results, status_msg, summary, percent, sound_path, receipt_text
-
-def reset_ui():
-    return [], "", "", 0, None, ""
-
-# Read and encode the local background image as base64
-b64_string = ""
-try:
-    with open("background.jpg", "rb") as img_file:
-        b64_string = base64.b64encode(img_file.read()).decode()
-except FileNotFoundError:
-    print("Warning: 'background.jpg' not found. Using fallback background color.")
-    b64_string = ""  # Fallback to a solid color
-
-# Embed base64 image in CSS or use a fallback
-html_style = f"""
-<style>
-body {{
-    {"background-image: url('data:image/jpg;base64," + b64_string + "');" if b64_string else "background-color: #ffe5e5;"}
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    font-family: 'Segoe UI', sans-serif;
-}}
-.glass-card {{
-    background: rgba(255, 255, 255, 0.75);
-    border-radius: 20px;
-    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    padding: 2rem;
-    margin-bottom: 1.5rem;
-}}
-h1 {{
-    text-align: center;
-    font-size: 2.2em;
-    font-weight: 800;
-    color: #2c2f8f;
-}}
-p {{
-    text-align: center;
-    font-size: 1.1em;
-    font-weight: 400;
-    color: #333;
-    max-width: 800px;
-    margin: 0 auto;
-}}
-.upload-box {{
-    background-color: #1a1a1a !important;
-    color: #ffffff !important;
-    text-align: center !important;
-    padding: 20px !important;
-    border-radius: 5px !important;
-    width: 100% !important;
-    height: 150px !important;
-    display: flex !important;
-    flex-direction: column !important;
-    justify-content: center !important;
-}}
-.budget-box {{
-    background-color: #1a1a1a !important;
-    color: #ffffff !important;
-    text-align: center !important;
-    padding: 20px !important;
-    border-radius: 5px !important;
-    width: 100% !important;
-    height: 150px !important;
-    display: flex !important;
-    flex-direction: column !important;
-    justify-content: center !important;
-}}
-.button-row button {{
-    background-color: #4a4a4a !important;
-    color: #ffffff !important;
-    margin: 0 10px !important;
-    padding: 10px 20px !important;
-    border-radius: 5px !important;
-    border: none !important;
-}}
-</style>
-"""
+    return results, receipt_text
+
+# Custom Theme
+custom_theme = gr.themes.Base(
+    primary_hue="rose",
+    secondary_hue="amber",
+    neutral_hue="stone",
+    font=[gr.themes.GoogleFont("Helvetica")]
+).set(
+    body_background_fill="#ffe5e5"
+)
 
 # Gradio Interface
-with gr.Blocks(title="ScanCart", css=html_style) as iface:
-    with gr.Column(elem_classes="glass-card"):
-        gr.Markdown("<h1>🛒 ScanCart 🧾</h1>")
-        gr.Markdown("<p>Upload images of your grocery items, and ScanCart will identify them, calculate the total cost, and check if it fits within your budget. 🛒📸</p>")
-
-    with gr.Column(elem_classes="glass-card"):
-        with gr.Row():
-            image_input = gr.Image(type="pil", label="Upload Grocery Items 🍎", elem_classes="upload-box", height=150)
-            budget_input = gr.Number(label="Budget (₱) 🍊", value=500.0, precision=2, elem_classes="budget-box")
-        gallery_output = gr.Gallery(label="Cart Preview", columns=3, height="auto", object_fit="contain")
-        with gr.Row(elem_classes="button-row"):
-            add_btn = gr.Button("Add Items 🚀")
-            remove_btn = gr.Button("Reset 🔄")
-            classify_btn = gr.Button("Generate Receipt 🧾")
-
-    with gr.Column(elem_classes="glass-card"):
-        status_text = gr.Markdown()
-        details = gr.Markdown()
-        progress = gr.Slider(0, 100, value=0, label="📊 Budget Usage", interactive=False)
-        sound_player = gr.Audio(label="🔊 Sound Feedback", visible=True, interactive=False)
-        receipt_output = gr.Textbox(label="Receipt", lines=20, interactive=False, show_copy_button=True)
+with gr.Blocks(
+    theme=custom_theme,
+    css="""
+    .center-column { 
+        display: flex !important; 
+        justify-content: center !important; 
+        align-items: center !important; 
+        width: 100% !important; 
+        margin: 0 auto !important; 
+    }
+    #title { 
+        width: 100% !important; 
+        margin: 0 auto !important; 
+        text-align: center !important; 
+        padding: 20px !important;
+        border: 1px solid #ccc !important; /* Remove this line after confirming centering */
+    }
+    #title h1 { 
+        font-size: 2.2em !important; 
+        margin: 0 auto 0.2em !important; 
+        text-align: center !important; 
+    }
+    #title p { 
+        font-size: 1.1em !important; 
+        margin: 0 auto !important; 
+        text-align: center !important; 
+        max-width: 800px !important; 
+    }
+    .upload-box { 
+        background-color: #1a1a1a !important; 
+        color: #ffffff !important; 
+        text-align: center !important; 
+        padding: 20px !important; 
+        border-radius: 5px !important; 
+        width: 100% !important; 
+        height: 150px !important; 
+        display: flex !important; 
+        flex-direction: column !important; 
+        justify-content: center !important; 
+    }
+    .budget-box { 
+        background-color: #1a1a1a !important; 
+        color: #ffffff !important; 
+        text-align: center !important; 
+        padding: 20px !important; 
+        border-radius: 5px !important; 
+        width: 100% !important; 
+        height: 150px !important; 
+        display: flex !important; 
+        flex-direction: column !important; 
+        justify-content: center !important; 
+    }
+    .button-row button { 
+        background-color: #4a4a4a !important; 
+        color: #ffffff !important; 
+        margin: 0 10px !important; 
+        padding: 10px 20px !important; 
+        border-radius: 5px !important; 
+        border: none !important; 
+    }
+    """
+) as iface:
+    with gr.Row():
+        with gr.Column(scale=1, min_width=0, elem_classes="center-column"):
+            gr.Markdown(
+                """
+                <div style="width: 100%; margin: 0 auto; text-align: center; padding: 20px;">
+                    <h1 style="font-size: 2.2em; margin: 0 auto 0.2em; text-align: center;">ScanCart 🧾</h1>
+                    <p style="font-size: 1.1em; margin: 0 auto; text-align: center; max-width: 800px;">Upload images of your grocery items, and ScanCart will identify them, calculate the total cost, and check if it fits within your budget. 🛒📸</p>
+                </div>
+                """,
+                elem_id="title"
+            )
+
+    with gr.Row():
+        with gr.Column(scale=1):
+            with gr.Row():
+                image_input = gr.Image(type="pil", label="Upload Grocery Items 🍎", elem_classes="upload-box", height=150)
+                budget_input = gr.Number(label="Budget (₱) 🍊", value=500.0, precision=2, elem_classes="budget-box")
+            gallery_output = gr.Gallery(label="Cart Preview", columns=3, height="auto", object_fit="contain")
+            with gr.Row(elem_classes="button-row"):
+                add_btn = gr.Button("Add Items 🚀")
+                remove_btn = gr.Button("Reset 🔄")
+                classify_btn = gr.Button("Generate Receipt 🧾")
+
+        with gr.Column(scale=2):
+            receipt_output = gr.Textbox(label="Receipt", lines=20, interactive=False, show_copy_button=True)
 
     image_list_state = gr.State([])
 
@@ -208,14 +192,13 @@ with gr.Blocks(title="ScanCart", css=html_style) as iface:
     remove_btn.click(
         remove_last_image,
         inputs=image_list_state,
-        outputs=[image_list_state, gallery_output, status_text, details, progress, sound_player, receipt_output],
-        _js="() => {return [[]]}"
+        outputs=[image_list_state, gallery_output]
     )
 
     classify_btn.click(
         classify_and_track,
         inputs=[image_list_state, budget_input],
-        outputs=[gallery_output, status_text, details, progress, sound_player, receipt_output]
+        outputs=[gallery_output, receipt_output]
     )
 
 iface.launch()