UI change

app.py

@@ -62,29 +62,135 @@ def full_pipeline(image):
 
 
 # ------------------ GRADIO UI ------------------
-with gr.Blocks() as demo:
-    gr.Markdown("<h1 style='text-align:center;'>♻️ AI Waste Classifier</h1>")
-
+# =========================
+#  CSS TÙY CHỈNH GIAO DIỆN
+# =========================
+custom_css = """
+#main-title {
+    text-align: center;
+    color: #2E7D32;
+    font-size: 34px;
+    font-weight: 800;
+    margin-bottom: 22px;
+}
+
+.gradio-container {
+    background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 100%);
+    font-family: 'Segoe UI', sans-serif;
+}
+
+#explainbox textarea {
+    background: #ffffff;
+    border: 2px solid #A5D6A7;
+    border-radius: 12px;
+    padding: 12px;
+    font-size: 15px;
+}
+
+.gr-button.primary {
+    background: #43A047 !important;
+    color: white !important;
+    border-radius: 12px !important;
+    padding: 12px 20px !important;
+    font-size: 17px !important;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
+    transition: 0.2s ease;
+}
+
+.gr-button.primary:hover {
+    background: #2E7D32 !important;
+    transform: translateY(-2px);
+}
+
+/* PROGRESS BAR CUSTOM */
+#loading-container {
+    width: 100%;
+    height: 12px;
+    margin-top: 15px;
+    margin-bottom: 5px;
+    background: #C8E6C9;
+    border-radius: 10px;
+}
+
+#loading-bar {
+    width: 0%;
+    height: 100%;
+    background: #66BB6A;
+    border-radius: 10px;
+    transition: width 0.25s ease-out;
+}
+"""
+
+# =========================
+#  GRADIO UI
+# =========================
+with gr.Blocks(css=custom_css) as demo:
+
+    # ---- TITLE
+    gr.Markdown("<h1 id='main-title'>♻️ AI Waste Classifier + Eco Advisor</h1>")
+
+    # ---- INPUT ROW
     with gr.Row():
-        img_input = gr.Image(type="pil", label="Upload waste image")
+        with gr.Column(scale=1):
+            img_input = gr.Image(
+                type="pil",
+                label="📸 Upload waste image",
+                elem_id="upload-area"
+            )
+
+        with gr.Column(scale=1):
+            gr.Markdown(
+                """
+                <div style="border:2px solid #A5D6A7; padding:16px; border-radius:14px; background:white;">
+                    <h3 style="color:#2E7D32;">🌍 Mẹo phân loại nhanh:</h3>
+                    <ul>
+                        <li>Rác hữu cơ → thùng xanh</li>
+                        <li>Nhựa, kim loại → tái chế</li>
+                        <li>Thủy tinh nhớ rửa sạch</li>
+                        <li>Pin, thiết bị điện → xử lý đặc biệt</li>
+                    </ul>
+                </div>
+                """
+            )
+
+    # ---- OUTPUTS
+    cls_output = gr.Label(
+        num_top_classes=3,
+        label="🔍 Classifier Prediction (Top 3)"
+    )
 
-    cls_output = gr.Label(num_top_classes=3, label="Classifier Prediction")
-    gr.Markdown("<h1 style='text-align:center;'>♻️ Disposal Advisor</h1>")
     explain_output = gr.Textbox(
-        label="Detailed Recycling & Disposal Advice",
+        label="🧩 Detailed Recycling & Disposal Advice",
         elem_id="explainbox",
         lines=18
     )
 
-    analyze_btn = gr.Button("Analyze", variant="primary")
+    # ---- BUTTON + PROGRESS BAR
+    analyze_btn = gr.Button("Analyze Waste", variant="primary")
+
+    progress_html = gr.HTML(
+        """
+        <div id="loading-container">
+            <div id="loading-bar"></div>
+        </div>
+        """
+    )
+
+    # ---- JS ANIMATION FOR PROGRESS BAR
+    animate_js = """
+    function(p){
+        let bar = document.getElementById('loading-bar');
+        if (bar){
+            bar.style.width = (p * 100) + "%";
+        }
+    }
+    """
 
     analyze_btn.click(
         full_pipeline,
         inputs=img_input,
-        outputs=[cls_output, explain_output]
+        outputs=[cls_output, explain_output],
+        progress=animate_js
     )
 
-demo.launch(
-    theme=gr.themes.Soft(primary_hue="green"),
-    css="#explainbox {height: 330px; font-size: 15px;}"
-)
+demo.launch()