Upload 4 files

ui/layout.py

@@ -0,0 +1,51 @@
+import gradio as gr
+from ui.navigator_tab import create_navigator_tab, load_initial_country_choices
+from ui.suggestions_tab import create_suggestions_tab
+
+def build_ui():
+    with gr.Blocks(title="RetailGenie") as demo:
+        # ✅ Global CSS
+        gr.HTML(
+            """
+            <style>
+                .centered-text {
+                    text-align: center;
+                    font-size: 16px;
+                    font-weight: 500;
+                    margin-bottom: 12px;
+                }
+                #main-wrapper {
+                    max-width: 1000px;
+                    margin: 0 auto;
+                    padding: 20px;
+                }
+            </style>
+            """
+        )
+
+        # 🧾 Disclaimer
+        gr.Markdown(
+            """
+            <div style="background-color:#2a2a2a; padding: 15px; border-radius: 10px; border: 1px solid #444; text-align: center; font-size: 14px; color: #ddd;">
+            ⚠ <strong>Disclaimer:</strong> <strong>RetailGenie</strong> is a prototype developed for <strong>educational and demonstration purposes only</strong>. Product suggestions, availability, and store locations are based on <strong>sample data</strong> and may not reflect real-time inventory.<br><br>
+            🕒 <strong>Note:</strong> Some responses may take a few seconds due to model inference and file processing within a constrained development environment.
+            </div>
+            """,
+            elem_classes="centered-text"
+        )
+
+        # 🧞‍♂ Title
+        gr.Markdown("# 🧞‍♂ RetailGenie – In-Store Smart Assistant", elem_classes="centered-text")
+
+        # 💡 Tabs
+        with gr.Tabs():
+            country_dropdown, = create_navigator_tab()
+            create_suggestions_tab()
+
+        # 🏁 Footer
+        gr.Markdown("Made by TEAM AtoM⚡", elem_classes="centered-text")
+
+        # 🚀 Load country dropdown choices without default selection
+        demo.load(fn=load_initial_country_choices, inputs=None, outputs=country_dropdown)
+
+    return demo

ui/navigator_tab.py

@@ -0,0 +1,88 @@
+import gradio as gr
+from config import BASE_DIR
+from utils.file_utils import get_subfolders, get_csv_files
+from utils.data_utils import get_quantities_from_csv, display_quantity_info
+
+# Reset logic
+def reset_all():
+    return (
+        None,  # country
+        None,  # state
+        None,  # city
+        None,  # store
+        None,  # category
+        None,  # product
+        None,  # brand
+        gr.update(choices=[], visible=False),  # quantity
+        "",  # result box
+        {}  # state
+    )
+
+# Load choices on app load
+def load_initial_country_choices():
+    return gr.update(choices=get_subfolders(BASE_DIR), value=None)
+
+# Main UI builder
+def create_navigator_tab():
+    with gr.TabItem("🧭 Navigator"):
+        with gr.Row():
+            country = gr.Dropdown(label="🌍 Country", choices=[], interactive=True)
+            state = gr.Dropdown(label="🏙 State", choices=[], interactive=True)
+            city = gr.Dropdown(label="🏘 City", choices=[], interactive=True)
+            store = gr.Dropdown(label="🏪 Store", choices=[], interactive=True)
+            category = gr.Dropdown(label="🛍 Category", choices=[], interactive=True)
+            product = gr.Dropdown(label="📦 Product", choices=[], interactive=True)
+            brand = gr.Dropdown(label="🏷 Brand", choices=[], interactive=True)
+            quantity = gr.Dropdown(label="🔢 Quantity", choices=[], visible=False, interactive=True)
+
+        result = gr.Textbox(label="🔍 Product Info", lines=5)
+        data_state = gr.State()
+        reset_btn = gr.Button("🔄 Reset All")
+
+        # Dropdown chaining logic
+        country.change(
+            lambda c: gr.update(choices=get_subfolders(f"{BASE_DIR}/{c}") if c else [], value=None),
+            inputs=country, outputs=state
+        )
+        state.change(
+            lambda c, s: gr.update(choices=get_subfolders(f"{BASE_DIR}/{c}/{s}") if c and s else [], value=None),
+            inputs=[country, state], outputs=city
+        )
+        city.change(
+            lambda c, s, ci: gr.update(choices=get_subfolders(f"{BASE_DIR}/{c}/{s}/{ci}") if c and s and ci else [], value=None),
+            inputs=[country, state, city], outputs=store
+        )
+        store.change(
+            lambda c, s, ci, st: gr.update(choices=get_subfolders(f"{BASE_DIR}/{c}/{s}/{ci}/{st}") if all([c, s, ci, st]) else [], value=None),
+            inputs=[country, state, city, store], outputs=category
+        )
+        category.change(
+            lambda c, s, ci, st, cat: gr.update(choices=get_subfolders(f"{BASE_DIR}/{c}/{s}/{ci}/{st}/{cat}") if all([c, s, ci, st, cat]) else [], value=None),
+            inputs=[country, state, city, store, category], outputs=product
+        )
+        product.change(
+            lambda c, s, ci, st, cat, prod: gr.update(choices=get_csv_files(f"{BASE_DIR}/{c}/{s}/{ci}/{st}/{cat}/{prod}") if all([c, s, ci, st, cat, prod]) else [], value=None),
+            inputs=[country, state, city, store, category, product], outputs=brand
+        )
+        brand.change(
+            lambda c, s, ci, st, cat, prod, b: get_quantities_from_csv(f"{BASE_DIR}/{c}/{s}/{ci}/{st}/{cat}/{prod}/{b}.csv") if all([c, s, ci, st, cat, prod, b]) else (gr.update(choices=[], visible=False), {}),
+            inputs=[country, state, city, store, category, product, brand],
+            outputs=[quantity, data_state]
+        )
+        quantity.change(
+            display_quantity_info,
+            inputs=[quantity, data_state],
+            outputs=result
+        )
+
+        reset_btn.click(
+            reset_all,
+            inputs=[],
+            outputs=[
+                country, state, city, store,
+                category, product, brand, quantity,
+                result, data_state
+            ]
+        )
+
+        return country,  # so we can use it in demo.load() from layout.py

ui/suggestions_tab.py

@@ -0,0 +1,66 @@
+import gradio as gr
+from smart_suggestion.flan_suggestor import generate_product_description
+
+def create_suggestions_tab():
+    with gr.TabItem("🎁 Smart Suggestions"):
+        # 🔷 Header
+        gr.Markdown(
+            """
+            ## 🤖 Ask RetailGenie for Recommendations  
+            🧞 Just type your need — e.g., _"shampoo for dry hair under 500"_, _"gift sets"_, or _"budget skin care"_  
+            and let Genie do the rest!
+            """,
+            elem_classes="centered-text"
+        )
+
+        # 🟩 Input Section
+        suggestion_input = gr.Textbox(
+            label="💬 Your Request",
+            placeholder="Try: Gifts under 500, or Shampoo for dry hair",
+            lines=1
+        )
+
+        gr.Markdown("<div style='margin-top: 8px;'></div>")
+
+        # 🟦 Button
+        suggest_btn = gr.Button("🔍 Get Suggestions")
+
+        gr.Markdown("<div style='margin-top: 12px;'></div>")
+
+        # 🟨 Output Section
+        suggestions_output = gr.Textbox(
+            label="✨ Suggested Products",
+            lines=10,
+            interactive=False,
+            show_copy_button=True,
+            elem_id="suggestion-box"
+        )
+
+        # 🧠 Connect logic to FLAN model
+        suggest_btn.click(
+            fn=generate_product_description,
+            inputs=suggestion_input,
+            outputs=suggestions_output
+        )
+
+        # 💅 CSS for centered text and consistent spacing
+        gr.Markdown(
+            """
+            <style>
+                .centered-text {
+                    text-align: center;
+                    font-size: 16px;
+                    font-weight: 500;
+                }
+                #suggestion-box textarea {
+                    font-family: 'Courier New', monospace;
+                    font-size: 14px;
+                    background-color: #111827;
+                    color: #e5e7eb;
+                    border-radius: 10px;
+                    padding: 10px;
+                    white-space: pre-line;  /* important for preserving line breaks */
+                }
+            </style>
+            """
+        )