chore: Complete User Interface

app.py

@@ -1,5 +1,23 @@
 import gradio as gr
 
+# 📌 CUSTOM CSS
+css_code = """
+#footer-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background-color: var(--background-fill-primary);
+    padding: var(--spacing-md);
+    border-top: 1px solid var(--border-color-primary);
+}
+
+.gradio-container {
+    padding-bottom: 70px !important;
+}
+"""
+
 
 # 📌 FUNCTIONS
 def predict(mode, text, image_path):
@@ -54,16 +72,23 @@ def update_inputs(mode: str):
 with gr.Blocks(
     title="Multimodal Product Classification",
     theme=gr.themes.Ocean(),
+    css=css_code,
 ) as demo:
     with gr.Tabs():
         # 📌 APP TAB
         with gr.TabItem("App"):
-            gr.Markdown("# 🛍️ Multimodal Product Classification")
+            gr.Markdown("""
+                <div style="text-align: center;">
+                    <h1>🛍️ Multimodal Product Classification</h1>
+                </div>
+                <br><br>
+                """)
 
             with gr.Row(equal_height=True):
+                # 📌 CLASSIFICATION INPUTS COLUMN
                 with gr.Column():
                     with gr.Column():
-                        gr.Markdown("## ⚙️ Classification Inputs")
+                        gr.Markdown("## 📝 Classification Inputs")
 
                         mode_radio = gr.Radio(
                             choices=["Multimodal", "Text Only", "Image Only"],
@@ -80,7 +105,7 @@ with gr.Blocks(
                             label="Product Image",
                             type="filepath",
                             visible=True,
-                            height=300,
+                            height=350,
                             width="100%",
                         )
 
@@ -88,6 +113,7 @@ with gr.Blocks(
                             "✨ Classify Product", variant="primary"
                         )
 
+                # 📌 RESULTS COLUMN
                 with gr.Column():
                     with gr.Column():
                         gr.Markdown("## 📊 Results")
@@ -102,6 +128,8 @@ with gr.Blocks(
                             """
                         )
 
+                        gr.HTML("<hr>")
+
                         output_label = gr.Label(
                             label="Predict category", num_top_classes=5
                         )
@@ -143,8 +171,8 @@ This evolution demonstrates the ability to design a scalable microservices syste
 """)
 
     # 📌 FOOTER
-    gr.HTML("<hr>")
-    with gr.Row():
+    # gr.HTML("<hr>")
+    with gr.Row(elem_id="footer-container"):
         gr.Markdown("""
 <div style="text-align: center; margin-bottom: 1.5rem;">
         <b>Connect with me:</b> 💼 <a href="https://www.linkedin.com/in/alex-turpo/" target="_blank">LinkedIn</a> • 

base.py

@@ -1,155 +0,0 @@
-import gradio as gr
-
-
-# 📌 FUNCTIONS
-def predict(mode, text, image_path):
-    # ... your existing predict function ...
-    multimodal_output = {
-        "abcat0100000": 0.05,
-        "abcat0200000": 0.10,
-        "abcat0300000": 0.20,
-        "abcat0400000": 0.45,
-        "abcat0500000": 0.20,
-    }
-    text_only_output = {
-        "abcat0100000": 0.08,
-        "abcat0200000": 0.15,
-        "abcat0300000": 0.25,
-        "abcat0400000": 0.35,
-        "abcat0500000": 0.17,
-    }
-    image_only_output = {
-        "abcat0100000": 0.10,
-        "abcat0200000": 0.20,
-        "abcat0300000": 0.30,
-        "abcat0400000": 0.25,
-        "abcat0500000": 0.15,
-    }
-
-    if mode == "Multimodal":
-        return multimodal_output
-    elif mode == "Text Only":
-        return text_only_output
-    elif mode == "Image Only":
-        return image_only_output
-    else:
-        return {}
-
-
-def update_inputs(mode: str):
-    # ... your existing update_inputs function ...
-    if mode == "Multimodal":
-        return gr.Textbox(visible=True), gr.Image(visible=True)
-    elif mode == "Text Only":
-        return gr.Textbox(visible=True), gr.Image(visible=False)
-    elif mode == "Image Only":
-        return gr.Textbox(visible=False), gr.Image(visible=True)
-    else:
-        return gr.Textbox(visible=True), gr.Image(visible=True)
-
-
-# 📌 CUSTOM CSS FOR FIXED FOOTER
-css_code = """
-/* Target the footer container by its ID and apply fixed positioning */
-#footer-container {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000; /* Ensure it stays on top of other content */
-    background-color: var(--background-fill-primary); /* Use a Gradio theme variable */
-    padding: var(--spacing-md);
-    border-top: 1px solid var(--border-color-primary);
-}
-
-/* Add padding to the body to prevent content from being hidden by the footer */
-.gradio-container {
-    padding-bottom: 70px !important;
-}
-"""
-
-# 📌 USER INTERFACE
-with gr.Blocks(
-    title="Multimodal Product Classification",
-    theme=gr.themes.Ocean(),
-    css=css_code,
-) as demo:
-    # 📌 TABS
-    with gr.Tabs():
-        # ... your existing tabs ...
-        # 📌 APP TAB
-        with gr.TabItem("App"):
-            gr.Markdown("# 🛍️ Multimodal Product Classification")
-
-            with gr.Row(equal_height=True):
-                with gr.Column(scale=1):
-                    with gr.Column():
-                        gr.Markdown("## ⚙️ Classification Inputs")
-
-                        mode_radio = gr.Radio(
-                            choices=["Multimodal", "Text Only", "Image Only"],
-                            value="Multimodal",
-                            label="Choose Classification Mode:",
-                        )
-
-                        text_input = gr.Textbox(
-                            label="Product Description:",
-                            placeholder="e.g., Apple iPhone 15 Pro Max 256GB",
-                        )
-
-                        image_input = gr.Image(
-                            label="Product Image", type="filepath", visible=True
-                        )
-
-                        classify_button = gr.Button(
-                            "✨ Classify Product", variant="primary"
-                        )
-
-                with gr.Column(scale=2):
-                    with gr.Column():
-                        gr.Markdown("## 📊 Results")
-
-                        gr.Markdown(
-                            """**💡 How to use this app**
-
-                            This app classifies a product based on its description and image.
-                            - **Multimodal:** Uses both text and image for the most accurate prediction.
-                            - **Text Only:** Uses only the product description.
-                            - **Image Only:** Uses only the product image.
-                            """
-                        )
-
-                        output_label = gr.Label(
-                            label="Predict category", num_top_classes=5
-                        )
-
-        # 📌 ABOUT TAB
-        with gr.TabItem("About"):
-            gr.Markdown("""...""")
-
-        # 📌 MODEL TAB
-        with gr.TabItem("Model"):
-            gr.Markdown("""...""")
-
-    # 📌 FOOTER
-    with gr.Row(elem_id="footer-container"):
-        gr.HTML("""
-<div style="text-align: center;">
-    <b>Connect with me:</b> 💼 <a href="https://www.linkedin.com/in/alex-turpo/" target="_blank">LinkedIn</a> •
-    🐱 <a href="https://github.com/iBrokeTheCode" target="_blank">GitHub</a> •
-    🤗 <a href="https://huggingface.co/iBrokeTheCode" target="_blank">Hugging Face</a>
-</div>
-""")
-
-    # 📌 EVENT LISTENERS
-    mode_radio.change(
-        fn=update_inputs,
-        inputs=mode_radio,
-        outputs=[text_input, image_input],
-    )
-
-    classify_button.click(
-        fn=predict, inputs=[mode_radio, text_input, image_input], outputs=output_label
-    )
-
-demo.launch()