Update app.py

app.py

@@ -11,41 +11,47 @@ from pathlib import Path
 # PATHS (Hugging Face Spaces safe)
 # =========================
 BASE_DIR = Path(__file__).resolve().parent if "__file__" in globals() else Path.cwd()
-
-# Put your files either in repo root OR in ./assets/
 ASSETS_DIR = BASE_DIR / "assets"
 if not ASSETS_DIR.exists():
-    ASSETS_DIR = BASE_DIR
+    ASSETS_DIR = BASE_DIR  # fallback: files in repo root
 
 VAL_CSV_PATH  = ASSETS_DIR / "validation_data.csv"
 MAIN_CSV_PATH = ASSETS_DIR / "Cochlear_Implant_Dataset.csv"
 CLF_PKL_PATH  = ASSETS_DIR / "ci_success_classifier.pkl"
 REG_PKL_PATH  = ASSETS_DIR / "ci_speech_score_regressor.pkl"
 
-# Batch output: /tmp is writable on HF Spaces
+# Writable location on HF Spaces for generated outputs
 BATCH_OUT_PATH = Path("/tmp/predictions_output.csv")
 
+def _missing_assets_html():
+    return f"""
+    <div class="result-card">
+      <div class="result-head">
+        <div class="result-title">Setup required</div>
+        <div class="pill warn"><span class="dot"></span><span class="pill-ic">!</span><span>Missing files</span></div>
+      </div>
+      <div class="box">
+        <div class="k">This Space is missing required files.</div>
+        <div class="sub">Upload these to <span class="mono">/assets</span> (recommended) or repo root:</div>
+        <div class="v mono" style="font-weight:700; font-size:12px; line-height:1.5;">
+          validation_data.csv<br/>
+          Cochlear_Implant_Dataset.csv<br/>
+          ci_success_classifier.pkl<br/>
+          ci_speech_score_regressor.pkl
+        </div>
+      </div>
+    </div>
+    """
 
-def _require_file(path: Path, label: str):
-    if not path.exists():
-        raise FileNotFoundError(
-            f"Missing required file: {label}. "
-            f"Expected at: {path}. "
-            f"Upload it to your Space repo (recommended: /assets folder)."
-        )
+def _require(path: Path):
+    return path.exists() and path.is_file()
 
 # =========================
-# Load data + models (guarded for HF)
+# Load data + models (guarded)
 # =========================
-APP_READY = True
-APP_ERROR_MSG = ""
-
-try:
-    _require_file(VAL_CSV_PATH, "validation_data.csv")
-    _require_file(MAIN_CSV_PATH, "Cochlear_Implant_Dataset.csv")
-    _require_file(CLF_PKL_PATH, "ci_success_classifier.pkl")
-    _require_file(REG_PKL_PATH, "ci_speech_score_regressor.pkl")
+APP_READY = all(map(_require, [VAL_CSV_PATH, MAIN_CSV_PATH, CLF_PKL_PATH, REG_PKL_PATH]))
 
+if APP_READY:
     val_df  = pd.read_csv(VAL_CSV_PATH)
     main_df = pd.read_csv(MAIN_CSV_PATH)
 
@@ -58,23 +64,13 @@ try:
 
     clf_model = load_model(CLF_PKL_PATH)
     reg_model = load_model(REG_PKL_PATH)
+else:
+    # Placeholders so the file imports cleanly on Spaces even when assets are missing
+    val_df = pd.DataFrame()
+    main_df = pd.DataFrame()
+    clf_model = None
+    reg_model = None
 
-except Exception:
-    APP_READY = False
-    # Keep errors user-safe (no stacktraces); admins can view logs in HF
-    APP_ERROR_MSG = (
-        "This app is not configured yet. Please upload the required model and dataset files to the Space.\n\n"
-        "Required files:\n"
-        "- validation_data.csv\n"
-        "- Cochlear_Implant_Dataset.csv\n"
-        "- ci_success_classifier.pkl\n"
-        "- ci_speech_score_regressor.pkl\n\n"
-        "Recommended location: a folder named 'assets' in the Space repo."
-    )
-
-# =========================
-# Feature name extraction
-# =========================
 def get_model_feature_names(m):
     if hasattr(m, "feature_names_in_"):
         return list(getattr(m, "feature_names_in_"))
@@ -84,25 +80,17 @@ def get_model_feature_names(m):
                 return list(step.feature_names_in_)
     return None
 
-# If app isn't ready, define minimal placeholders to avoid NameErrors
-if not APP_READY:
-    val_df = pd.DataFrame()
-    main_df = pd.DataFrame()
-    clf_model = None
-    reg_model = None
-    clf_expected, reg_expected, input_cols = [], [], []
-else:
-    clf_expected = get_model_feature_names(clf_model) or []
-    reg_expected = get_model_feature_names(reg_model) or []
-
-    # Union of expected columns (preserve order)
-    input_cols = []
-    for colset in [clf_expected, reg_expected]:
-        for c in colset:
-            if c not in input_cols:
-                input_cols.append(c)
-    if not input_cols:
-        input_cols = list(val_df.columns)
+clf_expected = get_model_feature_names(clf_model) or [] if APP_READY else []
+reg_expected = get_model_feature_names(reg_model) or [] if APP_READY else []
+
+# Union of expected columns (preserve order)
+input_cols = []
+for colset in [clf_expected, reg_expected]:
+    for c in colset:
+        if c not in input_cols:
+            input_cols.append(c)
+if not input_cols:
+    input_cols = list(val_df.columns) if APP_READY else []
 
 # =========================
 # Build Gene dropdown choices from MAIN dataset
@@ -137,6 +125,12 @@ if APP_READY:
 # Helpers
 # =========================
 def parse_age_to_years(age_raw: str, mode: str):
+    """
+    mode:
+      - "Years.Months (1.11 = 1y 11m)"  -> 1 + 11/12
+      - "Decimal (1.11 = 1.11 years)"  -> 1.11
+    Accepts "1.6YRS", "2yrs", etc.
+    """
     if age_raw is None:
         return np.nan
 
@@ -152,6 +146,7 @@ def parse_age_to_years(age_raw: str, mode: str):
         except:
             return np.nan
 
+    # Years.Months mode
     if cleaned.count(".") == 1:
         a, b = cleaned.split(".")
         if a.isdigit() and b.isdigit() and len(b) == 2:
@@ -159,6 +154,7 @@ def parse_age_to_years(age_raw: str, mode: str):
             months = int(b)
             if 0 <= months <= 11:
                 return years + months / 12.0
+        # fallback to decimal
         try:
             return float(cleaned)
         except:
@@ -280,7 +276,7 @@ def render_single_result_html(gene, age_entered, age_used_years, parse_mode, lab
 
 def predict_single(gene, age_text, parse_mode):
     if not APP_READY:
-        raise gr.Error("App is not configured. Please upload required files to the Space.")
+        return _missing_assets_html()
 
     if gene is None or str(gene).strip() == "":
         raise gr.Error("Please select a Gene.")
@@ -325,7 +321,7 @@ def _file_to_path(file_obj):
 
 def predict_batch(csv_file, parse_mode):
     if not APP_READY:
-        raise gr.Error("App is not configured. Please upload required files to the Space.")
+        raise gr.Error("This Space is missing required model/dataset files. Please upload them to /assets or repo root.")
 
     path = _file_to_path(csv_file)
     if not path:
@@ -431,11 +427,151 @@ def age_preview(age_text, parse_mode):
     return "<div class='hint'>Model will use: <span class='mono'>—</span></div>"
 
 # =========================
-# CSS (unchanged)
+# CSS: minimal, clean, mobile responsive + hide Gradio footer
 # =========================
-CSS = """<YOUR EXISTING CSS HERE>"""
-# ↑ Keep your CSS block exactly as-is.
-# (I’m not re-pasting it here to keep the patch focused.)
+CSS = """
+:root{
+  --bg:#f6f7fb;
+  --card:#ffffff;
+  --border:#e5e7eb;
+  --text:#0f172a;
+  --muted:#64748b;
+  --accent:#2563eb;
+  --ok:#16a34a;
+  --warn:#d97706;
+  --shadow: 0 10px 30px rgba(15, 23, 42, .08);
+  --radius: 16px;
+}
+
+.gradio-container{
+  background: var(--bg);
+  color: var(--text);
+}
+
+/* Hide Gradio footer / API bar */
+footer, .footer, #footer, .gradio-footer { display:none !important; height:0 !important; }
+
+/* Page wrapper */
+#wrap{ max-width: 980px; margin: 0 auto; padding: 14px 12px 28px; }
+
+/* Make Rows wrap on small screens */
+.gr-row{ flex-wrap: wrap !important; gap: 12px !important; }
+.gr-column{ min-width: 280px; }
+
+/* Hero */
+.hero{
+  padding: 16px 16px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: linear-gradient(180deg, #ffffff, #fbfdff);
+  box-shadow: var(--shadow);
+  margin-bottom: 12px;
+}
+.hero h1{ margin:0; font-size: 18px; font-weight: 800; letter-spacing:.2px; }
+.hero p{ margin:6px 0 0; color: var(--muted); font-size: 13px; line-height:1.35; }
+
+/* Card wrapper for inputs/outputs */
+.card{
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 14px;
+}
+
+.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+
+/* Results */
+.result-card{
+  background: #ffffff;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px;
+  box-shadow: var(--shadow);
+}
+.result-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
+.result-title{ font-size: 13px; font-weight: 900; letter-spacing:.3px; }
+
+.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.grid3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
+
+.box{
+  border: 1px solid var(--border);
+  background: #fbfcff;
+  border-radius: 14px;
+  padding: 12px;
+}
+.k{ color: var(--muted); font-size: 12px; }
+.v{ color: var(--text); font-size: 14px; font-weight: 800; margin-top: 3px; }
+.sub{ margin-top:6px; color: var(--muted); font-size: 11px; }
+
+.pill{
+  display:flex; align-items:center; gap:8px;
+  padding: 8px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: #ffffff;
+  font-size: 12px;
+  white-space: nowrap;
+}
+.pill .dot{ width:10px; height:10px; border-radius:999px; background: rgba(100,116,139,.25); }
+.pill.ok{ border-color: rgba(22,163,74,.25); }
+.pill.ok .dot{ background: var(--ok); }
+.pill.warn{ border-color: rgba(217,119,6,.25); }
+.pill.warn .dot{ background: var(--warn); }
+.pill.neutral{ border-color: rgba(37,99,235,.20); }
+.pill.neutral .dot{ background: var(--accent); }
+.pill-ic{ font-weight: 900; }
+
+.prob-row{ display:flex; align-items:center; gap: 10px; margin-top: 6px; }
+.prob-bar{
+  flex: 1;
+  height: 10px;
+  border-radius: 999px;
+  background: #eef2ff;
+  border: 1px solid rgba(37,99,235,.15);
+  overflow: hidden;
+}
+.prob-fill{
+  height: 100%;
+  background: linear-gradient(90deg, rgba(37,99,235,.95), rgba(22,163,74,.85));
+  border-radius: 999px;
+}
+.prob-txt{ width: 56px; text-align:right; color: var(--text); font-weight: 900; }
+
+.fine{
+  margin-top: 12px;
+  font-size: 11px;
+  color: var(--muted);
+  line-height: 1.35;
+}
+
+.hint{
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--muted);
+  padding: 8px 10px;
+  border: 1px dashed rgba(100,116,139,.35);
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+/* Primary button styling + full width on mobile */
+#primaryBtn button{
+  border-radius: 14px !important;
+  border: 1px solid rgba(37,99,235,.35) !important;
+  background: var(--accent) !important;
+  color: white !important;
+  font-weight: 900 !important;
+}
+@media (max-width: 740px){
+  #primaryBtn button{ width: 100% !important; }
+  .grid2{ grid-template-columns: 1fr; }
+  .grid3{ grid-template-columns: 1fr; }
+  .result-head{ flex-direction: column; align-items: flex-start; }
+  .gr-column{ min-width: 100%; }
+}
+"""
 
 theme = gr.themes.Base(
     primary_hue="blue",
@@ -446,87 +582,86 @@ theme = gr.themes.Base(
 )
 
 # =========================
-# UI
+# UI (UNCHANGED)
 # =========================
 with gr.Blocks(theme=theme, css=CSS, title="CI Outcome Predictor") as demo:
     with gr.Column(elem_id="wrap"):
-        if not APP_READY:
-            gr.Markdown(APP_ERROR_MSG)
-        else:
-            gr.HTML("""
-              <div class="hero">
-                <h1>CI Outcome Predictor</h1>
-                <p>Single and batch predictions. Gene options are loaded from the dataset. Age parsing is shown transparently.</p>
-              </div>
-            """)
-
-            with gr.Tabs():
-                with gr.Tab("Single Prediction"):
-                    with gr.Row():
-                        with gr.Column(scale=1):
-                            with gr.Group(elem_classes=["card"]):
-                                gene_in = gr.Dropdown(
-                                    choices=gene_choices,
-                                    value=gene_choices[0] if gene_choices else None,
-                                    label="Gene",
-                                    filterable=True,
-                                )
-                                age_in = gr.Textbox(
-                                    label="Age",
-                                    placeholder="Examples: 1.11  |  1.6YRS  |  2.3"
-                                )
-                                parse_mode = gr.Radio(
-                                    choices=[
-                                        "Decimal (1.11 = 1.11 years)",
-                                        "Years.Months (1.11 = 1y 11m)"
-                                    ],
-                                    value="Decimal (1.11 = 1.11 years)",
-                                    label="Age format"
-                                )
-
-                                age_hint = gr.HTML(value=age_preview("", "Decimal (1.11 = 1.11 years)"))
-                                btn = gr.Button("Run Prediction", elem_id="primaryBtn")
-
-                        with gr.Column(scale=1):
-                            single_out = gr.HTML(value="", elem_classes=["card"])
-
-                    age_in.change(fn=age_preview, inputs=[age_in, parse_mode], outputs=[age_hint])
-                    parse_mode.change(fn=age_preview, inputs=[age_in, parse_mode], outputs=[age_hint])
-
-                    btn.click(
-                        fn=predict_single,
-                        inputs=[gene_in, age_in, parse_mode],
-                        outputs=[single_out]
+        gr.HTML("""
+          <div class="hero">
+            <h1>CI Outcome Predictor</h1>
+            <p>Single and batch predictions. Gene options are loaded from the dataset. Age parsing is shown transparently.</p>
+          </div>
+        """)
+
+        with gr.Tabs():
+            with gr.Tab("Single Prediction"):
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        with gr.Group(elem_classes=["card"]):
+                            gene_in = gr.Dropdown(
+                                choices=gene_choices,
+                                value=gene_choices[0] if gene_choices else None,
+                                label="Gene",
+                                filterable=True,
+                            )
+                            age_in = gr.Textbox(
+                                label="Age",
+                                placeholder="Examples: 1.11  |  1.6YRS  |  2.3"
+                            )
+                            parse_mode = gr.Radio(
+                                choices=[
+                                    "Decimal (1.11 = 1.11 years)",
+                                    "Years.Months (1.11 = 1y 11m)"
+                                ],
+                                value="Decimal (1.11 = 1.11 years)",
+                                label="Age format"
+                            )
+
+                            age_hint = gr.HTML(value=age_preview("", "Decimal (1.11 = 1.11 years)"))
+
+                            btn = gr.Button("Run Prediction", elem_id="primaryBtn")
+
+                    with gr.Column(scale=1):
+                        # If assets missing, show styled HTML card instead of blank
+                        single_out = gr.HTML(value=_missing_assets_html() if not APP_READY else "", elem_classes=["card"])
+
+                age_in.change(fn=age_preview, inputs=[age_in, parse_mode], outputs=[age_hint])
+                parse_mode.change(fn=age_preview, inputs=[age_in, parse_mode], outputs=[age_hint])
+
+                btn.click(
+                    fn=predict_single,
+                    inputs=[gene_in, age_in, parse_mode],
+                    outputs=[single_out]
+                )
+
+            with gr.Tab("Batch Prediction (CSV)"):
+                with gr.Group(elem_classes=["card"]):
+                    gr.Markdown(
+                        "**Required columns:** `Gene`, `Age`",
+                        elem_classes=["mono"]
                     )
 
-                with gr.Tab("Batch Prediction (CSV)"):
-                    with gr.Group(elem_classes=["card"]):
-                        gr.Markdown(
-                            "**Required columns:** `Gene`, `Age`",
-                            elem_classes=["mono"]
-                        )
-
-                        parse_mode_b = gr.Radio(
-                            choices=[
-                                "Decimal (1.11 = 1.11 years)",
-                                "Years.Months (1.11 = 1y 11m)"
-                            ],
-                            value="Decimal (1.11 = 1.11 years)",
-                            label="Age format"
-                        )
-
-                        csv_in = gr.File(file_types=[".csv"], label="Upload CSV")
-                        run_b = gr.Button("Run Batch Prediction", elem_id="primaryBtn")
-
-                        batch_summary = gr.HTML(value="")
-                        preview = gr.Dataframe(label="Preview (first 20 rows)", wrap=True)
-                        out_file = gr.File(label="Download results")
-
-                    run_b.click(
-                        fn=predict_batch,
-                        inputs=[csv_in, parse_mode_b],
-                        outputs=[batch_summary, preview, out_file]
+                    parse_mode_b = gr.Radio(
+                        choices=[
+                            "Decimal (1.11 = 1.11 years)",
+                            "Years.Months (1.11 = 1y 11m)"
+                        ],
+                        value="Decimal (1.11 = 1.11 years)",
+                        label="Age format"
                     )
 
-# Hugging Face Spaces provides the external URL; don't use share=True there.
+                    csv_in = gr.File(file_types=[".csv"], label="Upload CSV")
+                    run_b = gr.Button("Run Batch Prediction", elem_id="primaryBtn")
+
+                    batch_summary = gr.HTML(value="")
+                    preview = gr.Dataframe(label="Preview (first 20 rows)", wrap=True)
+                    out_file = gr.File(label="Download results")
+
+                run_b.click(
+                    fn=predict_batch,
+                    inputs=[csv_in, parse_mode_b],
+                    outputs=[batch_summary, preview, out_file]
+                )
+
+# For Hugging Face Spaces: don't use share=True
 demo.launch(show_error=False, quiet=True)