fix: made download background and ui sub menu for model select

Dockerfile

@@ -59,5 +59,5 @@ EXPOSE 7860
 HEALTHCHECK --interval=30s --timeout=10s --retries=3 \
     CMD python -c "import urllib.request; urllib.request.urlopen('http://localhost:7860/health')"
 
-# Entrypoint: download models from HF Hub if absent, then start the server
-CMD ["sh", "-c", "python scripts/download_models.py && uvicorn api.main:app --host 0.0.0.0 --port 7860 --workers 1"]
+# Entrypoint: start API immediately; model bootstrap runs in FastAPI lifespan
+CMD ["uvicorn", "api.main:app", "--host", "0.0.0.0", "--port", "7860", "--workers", "1"]

api/main.py

@@ -68,20 +68,11 @@ _FRONTEND_DIST = _HERE.parent / "frontend" / "dist"
 # ── Lifespan ─────────────────────────────────────────────────────────────────
 @asynccontextmanager
 async def lifespan(app: FastAPI):
-    """Load only top v3 models on startup; v1/v2 loaded on-demand."""
+    """Start API immediately; bootstrap top v3 models in background."""
     log.info("Loading model registries …")
-    startup_models = select_top_models("v3")
-    if startup_models:
-        registry_v3.load_all(only_models=set(startup_models))
-        log.info(
-            "v3 registry ready — %d models loaded (startup top-%d set: %s)",
-            registry_v3.model_count,
-            DEFAULT_STARTUP_TOP_MODELS,
-            ", ".join(startup_models),
-        )
-    else:
-        registry_v3.load_all()
-        log.warning("Top-5 selection unavailable; loaded full v3 registry")
+    _version_status["v3"] = "downloading"
+    app.state.v3_bootstrap_task = asyncio.create_task(_bg_bootstrap_v3())
+    log.info("v3 bootstrap started in background — API is available immediately")
     # v1 and v2 are NOT loaded at startup — download + load on-demand via
     # POST /api/versions/{v}/load to reduce startup time and memory usage.
     if _version_loaded("v1"):
@@ -89,6 +80,9 @@ async def lifespan(app: FastAPI):
     if _version_loaded("v2"):
         log.info("v2 artifacts present on disk (not loaded — use API to activate)")
     yield
+    t = getattr(app.state, "v3_bootstrap_task", None)
+    if t and not t.done():
+        t.cancel()
     log.info("Shutting down battery-lifecycle API")
 
 
@@ -195,6 +189,45 @@ async def _bg_load_version(version: str) -> None:
         log.error("Failed to load version %s: %s", version, exc)
 
 
+async def _bg_bootstrap_v3() -> None:
+    """Download metadata + top startup models, then load them into memory."""
+    import sys as _sys
+
+    try:
+        proc = await asyncio.create_subprocess_exec(
+            _sys.executable,
+            "scripts/download_models.py",
+            stdout=asyncio.subprocess.PIPE,
+            stderr=asyncio.subprocess.STDOUT,
+        )
+        await proc.wait()
+        if proc.returncode != 0:
+            _version_status["v3"] = "error"
+            log.error("Startup model download failed for v3")
+            return
+
+        startup_models = select_top_models("v3")
+        if startup_models:
+            registry_v3.load_all(only_models=set(startup_models))
+            log.info(
+                "v3 registry ready — %d models loaded (startup top-%d set: %s)",
+                registry_v3.model_count,
+                DEFAULT_STARTUP_TOP_MODELS,
+                ", ".join(startup_models),
+            )
+        else:
+            registry_v3.load_all()
+            log.warning("Top model selection unavailable; loaded full v3 registry")
+
+        _version_status["v3"] = "ready"
+    except asyncio.CancelledError:
+        log.info("v3 bootstrap task cancelled")
+        raise
+    except Exception as exc:
+        _version_status["v3"] = "error"
+        log.error("Failed during v3 bootstrap: %s", exc)
+
+
 async def _bg_load_model(version: str, model_name: str) -> None:
     import sys as _sys
 

api/routers/predict.py

@@ -33,7 +33,7 @@ async def predict(req: PredictRequest):
         features["avg_temp"] = features["ambient_temperature"] + 8.0
 
     try:
-        result = registry.predict(features)
+        result = registry.predict(features, req.model_name)
     except Exception as exc:
         raise HTTPException(status_code=500, detail=str(exc))
 
@@ -225,7 +225,7 @@ async def predict_v1(req: PredictRequest):
     if abs(features["avg_temp"] - features["ambient_temperature"]) < 0.5:
         features["avg_temp"] = features["ambient_temperature"] + 8.0
     try:
-        result = registry_v1.predict(features)
+        result = registry_v1.predict(features, req.model_name)
     except Exception as exc:
         raise HTTPException(status_code=500, detail=str(exc))
     return PredictResponse(

api/routers/predict_v2.py

@@ -32,7 +32,7 @@ async def predict_v2(req: PredictRequest):
     # v2 FIX: no avg_temp auto-correction — trust the user's input
 
     try:
-        result = registry_v2.predict(features)
+        result = registry_v2.predict(features, req.model_name)
     except Exception as exc:
         raise HTTPException(status_code=500, detail=str(exc))
 
@@ -115,7 +115,7 @@ async def recommend_v2(req: RecommendationRequest):
         feat = {**base_features, "ambient_temperature": t, "avg_current": c,
                 "min_voltage": v, "voltage_range": 4.19 - v,
                 "avg_temp": t + 8.0}
-        result = registry_v2.predict(feat)
+        result = registry_v2.predict(feat, req.model_name)
         rul = result.get("rul_cycles", 0) or 0
         candidates.append((rul, t, c, v, result["soh_pct"]))
 

api/routers/predict_v3.py

@@ -31,7 +31,7 @@ async def predict_v3(req: PredictRequest):
     features["voltage_range"] = features["peak_voltage"] - features["min_voltage"]
 
     try:
-        result = registry_v3.predict(features)
+        result = registry_v3.predict(features, req.model_name)
     except Exception as exc:
         raise HTTPException(status_code=500, detail=str(exc))
 
@@ -107,7 +107,7 @@ async def recommend_v3(req: RecommendationRequest):
         feat = {**base_features, "ambient_temperature": t, "avg_current": c,
                 "min_voltage": v, "voltage_range": 4.19 - v,
                 "avg_temp": t + 8.0}
-        result = registry_v3.predict(feat)
+        result = registry_v3.predict(feat, req.model_name)
         rul = result.get("rul_cycles", 0) or 0
         candidates.append((rul, t, c, v, result["soh_pct"]))
 

api/schemas.py

@@ -25,6 +25,7 @@ class PredictRequest(BaseModel):
     Re: float = Field(default=0.045, description="Electrolyte resistance (Ω) — training range 0.027–0.156")
     Rct: float = Field(default=0.069, description="Charge transfer resistance (Ω) — training range 0.04–0.27")
     delta_capacity: float = Field(default=-0.005, description="Capacity change from last cycle (Ah)")
+    model_name: Optional[str] = Field(default=None, description="Optional model key override")
 
 
 class PredictResponse(BaseModel):
@@ -61,6 +62,7 @@ class RecommendationRequest(BaseModel):
     current_soh: float = Field(..., ge=0, le=100)
     ambient_temperature: float = Field(default=24.0)
     top_k: int = Field(default=5, ge=1, le=20)
+    model_name: Optional[str] = Field(default=None, description="Optional model key override")
 
 
 class SingleRecommendation(BaseModel):

frontend/src/App.tsx

@@ -79,7 +79,7 @@ export default function App() {
       {/* Content */}
       <main className="max-w-7xl mx-auto px-4 py-6">
         {activeTab === "simulation" && <SimulationPanel />}
-        {activeTab === "predict" && <PredictionForm />}
+        {activeTab === "predict" && <PredictionForm apiVersion={apiVersion} />}
         {activeTab === "graphs" && <GraphPanel />}
         {activeTab === "recommend" && <RecommendationPanel apiVersion={apiVersion} />}
         {activeTab === "metrics" && <MetricsPanel />}

frontend/src/components/PredictionForm.tsx

@@ -28,7 +28,11 @@ const familyColour = (family: string) => {
   }
 };
 
-export default function PredictionForm() {
+type Props = {
+  apiVersion: "v1" | "v2" | "v3";
+};
+
+export default function PredictionForm({ apiVersion }: Props) {
   const [form, setForm] = useState<PredictRequest>(DEFAULTS);
   const [models, setModels] = useState<ModelInfo[]>([]);
   const [result, setResult] = useState<PredictResponse | null>(null);
@@ -39,15 +43,22 @@ export default function PredictionForm() {
   useEffect(() => {
     fetchModels()
       .then((ms) => {
-        // Prefer loaded models; sort by r2 desc
-        const sorted = [...ms].sort((a, b) => {
-          if (a.loaded !== b.loaded) return a.loaded ? -1 : 1;
+        // Loaded-only list for stable UX
+        const sorted = [...ms]
+          .filter((m) => m.loaded)
+          .sort((a, b) => {
           return (b.r2 ?? 0) - (a.r2 ?? 0);
-        });
+          });
         setModels(sorted);
+        if (sorted.length > 0) {
+          setForm((prev) => {
+            const keep = prev.model_name && sorted.some((m) => m.name === prev.model_name);
+            return { ...prev, model_name: keep ? prev.model_name : null };
+          });
+        }
       })
       .catch(() => {/* silently ignore — model list is optional */});
-  }, []);
+  }, [apiVersion]);
 
   const handleChange = (key: keyof PredictRequest, val: string) => {
     setForm((prev) => ({
@@ -136,10 +147,9 @@ export default function PredictionForm() {
           >
             <option value="">— Registry Default —</option>
             {models.map((m) => (
-              <option key={m.name} value={m.name} disabled={!m.loaded}>
+              <option key={m.name} value={m.name}>
                 {m.display_name ?? m.name}
                 {m.r2 != null ? ` (R²=${m.r2.toFixed(3)})` : ""}
-                {!m.loaded ? " [unavailable]" : ""}
               </option>
             ))}
           </select>

frontend/src/components/SimulationPanel.tsx

@@ -29,7 +29,13 @@ import {
   TableProperties, ScrollText, CheckCircle2, WifiOff,
   Server, FlaskConical, Copy, Download,
 } from "lucide-react";
-import { simulateBatteries, BatterySimConfig, BatterySimResult } from "../api";
+import {
+  simulateBatteries,
+  BatterySimConfig,
+  BatterySimResult,
+  fetchVersionModels,
+  VersionModelInfo,
+} from "../api";
 import { useToast } from "./Toast";
 
 // ── Constants ─────────────────────────────────────────────────────────────
@@ -620,6 +626,7 @@ export default function SimulationPanel() {
   const [isSimulating, setIsSimulating]   = useState(false);
   const [modelUsed, setModelUsed]         = useState<string | null>(null);
   const [selectedModel, setSelectedModel] = useState<string>("best_ensemble");
+  const [loadedModels, setLoadedModels]   = useState<VersionModelInfo[]>([]);
 
   // --- Playback ---
   const [playIndex, setPlayIndex]   = useState(0);
@@ -637,6 +644,26 @@ export default function SimulationPanel() {
 
   const totalSteps = results.length > 0 ? results[0].soh_history.length : 0;
 
+  useEffect(() => {
+    const refreshLoadedModels = () => {
+      fetchVersionModels("v3")
+        .then((rows) => {
+          const loaded = rows
+            .filter((m) => m.loaded)
+            .sort((a, b) => (b.r2 ?? -1) - (a.r2 ?? -1));
+          setLoadedModels(loaded);
+          if (loaded.length > 0 && !loaded.some((m) => m.name === selectedModel)) {
+            setSelectedModel(loaded[0].name);
+          }
+        })
+        .catch(() => setLoadedModels([]));
+    };
+
+    refreshLoadedModels();
+    const id = setInterval(refreshLoadedModels, 3000);
+    return () => clearInterval(id);
+  }, []);
+
   // current per-battery snapshot at playIndex
   const currentSohs = useMemo(() =>
     results.map((r) => ({
@@ -1032,15 +1059,15 @@ export default function SimulationPanel() {
               onChange={(e) => setSelectedModel(e.target.value)}
               className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-green-500"
             >
-              <option value="best_ensemble">Best Ensemble (RF+ET+LGB)</option>
-              <option value="random_forest">Random Forest</option>
-              <option value="extra_trees">Extra Trees</option>
-              <option value="lightgbm">LightGBM</option>
-              <option value="ridge">Ridge Regression</option>
-              <option value="svr">SVR</option>
-              <option value="batterygpt">BatteryGPT</option>
-              <option value="tft">TFT</option>
-              <option value="vae_lstm">VAE-LSTM</option>
+              {loadedModels.length === 0 && (
+                <option value={selectedModel}>No loaded models</option>
+              )}
+              {loadedModels.map((m) => (
+                <option key={m.name} value={m.name}>
+                  {m.display_name}
+                  {m.r2 != null ? ` (R²=${m.r2.toFixed(3)})` : ""}
+                </option>
+              ))}
             </select>
           </div>
 

frontend/src/components/VersionSelector.tsx

@@ -138,6 +138,15 @@ export default function VersionSelector({ activeVersion, onSwitch }: Props) {
     }
   };
 
+  const statusForVersion = (v: VersionInfo) => {
+    const isDownloading = v.status === "downloading" || busy === v.id;
+    const isError = v.status === "error";
+    const isLoaded = v.loaded && v.model_count > 0;
+    const isOnDisk = v.status === "on_disk" || (v.on_disk && !isLoaded && !isDownloading && !isError);
+    const isNotDownloaded = v.status === "not_downloaded" && !v.on_disk;
+    return { isDownloading, isError, isLoaded, isOnDisk, isNotDownloaded };
+  };
+
   // Auto-switch when download completes
   useEffect(() => {
     if (busy) {
@@ -153,8 +162,6 @@ export default function VersionSelector({ activeVersion, onSwitch }: Props) {
   const activeDisplay = versions.find((v) => v.id === activeVersion)?.display
     ?? `v${activeVersion[1]}.0`;
 
-  const others = versions.filter((v) => v.id !== activeVersion);
-
   const versionColor = (id: string) => {
     if (id === "v3") return "bg-green-600 text-white hover:bg-green-500";
     if (id === "v2") return "bg-blue-600 text-white hover:bg-blue-500";
@@ -179,7 +186,7 @@ export default function VersionSelector({ activeVersion, onSwitch }: Props) {
 
       {open && (
         <div
-          className="absolute right-0 top-full mt-2 w-64
+          className="absolute right-0 top-full mt-2 w-72
             bg-gray-900 border border-gray-700 rounded-xl shadow-2xl z-50
             overflow-hidden"
         >
@@ -187,27 +194,9 @@ export default function VersionSelector({ activeVersion, onSwitch }: Props) {
             Model Versions
           </div>
 
-          {/* Active version row */}
-          <div className="flex items-center justify-between px-3 py-2.5 bg-gray-800/50">
-            <div>
-              <span className="text-sm font-semibold text-white">{activeDisplay}</span>
-              <span className="ml-2 text-xs text-green-400">active</span>
-            </div>
-            <Check className="w-4 h-4 text-green-400 shrink-0" />
-          </div>
-
-          {/* Other versions */}
-          {others.length === 0 && (
-            <div className="px-3 py-3 text-xs text-gray-500 text-center">
-              No other versions available
-            </div>
-          )}
-          {others.map((v) => {
-            const isDownloading = v.status === "downloading" || busy === v.id;
-            const isError = v.status === "error";
-            const isLoaded = v.loaded && v.model_count > 0;
-            const isOnDisk = v.status === "on_disk" || (v.on_disk && !isLoaded && !isDownloading && !isError);
-            const isNotDownloaded = v.status === "not_downloaded" && !v.on_disk;
+          {versions.map((v) => {
+            const { isDownloading, isError, isLoaded, isOnDisk, isNotDownloaded } = statusForVersion(v);
+            const isActiveVersion = v.id === activeVersion;
             const isExpanded = expandedVersion === v.id;
             const models = versionModels[v.id] ?? [];
 
@@ -218,7 +207,10 @@ export default function VersionSelector({ activeVersion, onSwitch }: Props) {
                     hover:bg-gray-800/60 transition-colors"
                 >
                   <div className="flex-1 min-w-0">
-                    <span className="text-sm font-medium text-gray-200">{v.display}</span>
+                    <span className={`text-sm font-medium ${isActiveVersion ? "text-white" : "text-gray-200"}`}>{v.display}</span>
+                    {isActiveVersion && (
+                      <span className="ml-2 text-xs text-green-400 italic">Active Version</span>
+                    )}
                     {v.features && (
                       <span className="ml-2 text-xs text-gray-500">
                         {v.features}f
@@ -246,7 +238,7 @@ export default function VersionSelector({ activeVersion, onSwitch }: Props) {
                   </div>
 
                   <div className="flex items-center gap-1 shrink-0 ml-2">
-                    {isLoaded && (
+                    {isLoaded && !isActiveVersion && (
                       <button
                         onClick={() => handleSwitch(v.id)}
                         className="px-2.5 py-1 rounded text-xs font-medium
@@ -299,10 +291,10 @@ export default function VersionSelector({ activeVersion, onSwitch }: Props) {
 
                     <button
                       onClick={() => handleExpandVersion(v.id)}
-                      className="px-2 py-1 rounded text-xs font-medium bg-gray-800 hover:bg-gray-700 text-gray-300 transition-colors"
-                      title="Show model-level controls"
+                      className="p-1.5 rounded bg-gray-800 hover:bg-gray-700 text-gray-300 transition-colors"
+                      title="Open model submenu"
                     >
-                      {isExpanded ? "Hide Models" : "Models"}
+                      <ChevronRight className={`w-3.5 h-3.5 transition-transform ${isExpanded ? "rotate-90" : ""}`} />
                     </button>
                   </div>
                 </div>
@@ -311,7 +303,7 @@ export default function VersionSelector({ activeVersion, onSwitch }: Props) {
                   <div className="px-3 pb-3">
                     <div className="rounded-lg border border-gray-800 bg-gray-950/50 overflow-hidden">
                       <div className="px-2 py-1.5 text-[11px] text-gray-500 border-b border-gray-800">
-                        Download / load models individually
+                        {v.display} models
                       </div>
                       <div className="max-h-44 overflow-auto">
                         {models.length === 0 && (
@@ -336,7 +328,7 @@ export default function VersionSelector({ activeVersion, onSwitch }: Props) {
                                   </div>
                                 </div>
                                 <div className="flex items-center gap-1">
-                                  {loaded && <span className="text-[11px] text-green-400">ready</span>}
+                                  {loaded && <span className="text-[11px] text-green-400 italic font-medium">Active</span>}
                                   {!loaded && canDownload && !downloading && (
                                     <button
                                       onClick={() => handleLoadModel(v.id, m.name)}