feat: improve demo model selection workflow

新增 demo 頁面的模型下拉選單，支援在同一張圖片上切換不同模型重新推論。

調整圖片預覽縮放與顯示尺寸，並放寬 multipart 上傳大小限制，避免大圖被 1MB 預設限制擋下。

app.py

@@ -2,15 +2,17 @@ import base64
 from contextlib import asynccontextmanager
 from io import BytesIO
 from pathlib import Path
+from urllib.parse import unquote_to_bytes
 
-from fastapi import FastAPI, File, HTTPException, Request, UploadFile
+from fastapi import FastAPI, HTTPException, Request, UploadFile
 from fastapi.responses import HTMLResponse
 from fastapi.templating import Jinja2Templates
 from PIL import Image, UnidentifiedImageError
 
-from model_service import get_model_config, get_model_service
+from model_service import MODEL_CONFIGS, get_model_config, get_model_service
 
 BASE_DIR = Path(__file__).resolve().parent
+MAX_UPLOAD_SIZE = 10 * 1024 * 1024
 templates = Jinja2Templates(directory=str(BASE_DIR / "templates"))
 ACTIVE_MODEL_CONFIG = get_model_config()
 
@@ -39,30 +41,112 @@ def _build_demo_context(**overrides):
         "confidence": "-",
         "acc": "-",
         "error": None,
+        "selected_model": ACTIVE_MODEL_CONFIG.name,
+        "model_options": [
+            {
+                "name": config.name,
+                "backend": config.backend,
+                "path": config.model_path.name,
+            }
+            for config in MODEL_CONFIGS.values()
+        ],
     }
     context.update(overrides)
     return context
 
 
-async def _predict_upload(file: UploadFile) -> tuple[dict, bytes]:
-    if not file.content_type or not file.content_type.startswith("image/"):
-        raise HTTPException(status_code=400, detail="Uploaded file must be an image.")
+def _parse_data_url(data_url: str) -> tuple[bytes, str]:
+    if not data_url.startswith("data:") or "," not in data_url:
+        raise HTTPException(status_code=400, detail="Invalid preview image data.")
 
-    data = await file.read()
-    if not data:
-        raise HTTPException(status_code=400, detail="Uploaded file is empty.")
+    header, encoded = data_url.split(",", 1)
+    content_type = header[5:].split(";")[0] or "image/png"
+    if not content_type.startswith("image/"):
+        raise HTTPException(status_code=400, detail="Preview data must be an image.")
+
+    if ";base64" in header:
+        try:
+            return base64.b64decode(encoded), content_type
+        except ValueError as exc:
+            raise HTTPException(status_code=400, detail="Invalid preview image data.") from exc
+
+    return unquote_to_bytes(encoded), content_type
+
+
+async def _read_image_data(
+    file: UploadFile | None,
+    existing_image_data_url: str | None = None,
+) -> tuple[bytes, str, str | None]:
+    if file and file.filename:
+        if not file.content_type or not file.content_type.startswith("image/"):
+            raise HTTPException(status_code=400, detail="Uploaded file must be an image.")
+
+        data = await file.read()
+        if not data:
+            raise HTTPException(status_code=400, detail="Uploaded file is empty.")
+        return data, file.content_type, file.filename
+
+    if existing_image_data_url:
+        data, content_type = _parse_data_url(existing_image_data_url)
+        if not data:
+            raise HTTPException(status_code=400, detail="Preview image is empty.")
+        return data, content_type, None
+
+    raise HTTPException(status_code=400, detail="Please upload an image first.")
+
+
+async def _predict_upload(
+    file: UploadFile | None,
+    model_name: str | None = None,
+    existing_image_data_url: str | None = None,
+) -> tuple[dict, bytes]:
+    data, content_type, filename = await _read_image_data(file, existing_image_data_url)
 
     try:
         image = Image.open(BytesIO(data)).convert("RGB")
-    except UnidentifiedImageError as exc:
+    except (UnidentifiedImageError, OSError) as exc:
         raise HTTPException(status_code=400, detail="Invalid image file.") from exc
 
-    result = get_model_service().predict_image(image)
-    result["filename"] = file.filename
-    result["content_type"] = file.content_type
+    try:
+        result = get_model_service(model_name).predict_image(image)
+    except ValueError as exc:
+        raise HTTPException(status_code=400, detail=str(exc)) from exc
+    result["filename"] = filename
+    result["content_type"] = content_type
     return result, data
 
 
+async def _parse_demo_form(request: Request) -> tuple[UploadFile | None, str, str | None]:
+    try:
+        form = await request.form(max_part_size=MAX_UPLOAD_SIZE)
+    except HTTPException:
+        raise
+    except Exception as exc:
+        raise HTTPException(status_code=400, detail=str(exc)) from exc
+
+    file_value = form.get("file")
+    file = file_value if isinstance(file_value, UploadFile) else None
+    model_name = str(form.get("model_name") or ACTIVE_MODEL_CONFIG.name)
+    existing_image_data_url = form.get("existing_image_data_url")
+    if existing_image_data_url is not None:
+        existing_image_data_url = str(existing_image_data_url)
+    return file, model_name, existing_image_data_url
+
+
+async def _parse_predict_form(request: Request) -> tuple[UploadFile | None, str]:
+    try:
+        form = await request.form(max_part_size=MAX_UPLOAD_SIZE)
+    except HTTPException:
+        raise
+    except Exception as exc:
+        raise HTTPException(status_code=400, detail=str(exc)) from exc
+
+    file_value = form.get("file")
+    file = file_value if isinstance(file_value, UploadFile) else None
+    model_name = str(form.get("model_name") or ACTIVE_MODEL_CONFIG.name)
+    return file, model_name
+
+
 @app.get("/")
 def root():
     return {
@@ -89,14 +173,17 @@ def demo_page(request: Request):
 
 
 @app.post("/demo", response_class=HTMLResponse)
-async def demo_predict(request: Request, file: UploadFile = File(...)):
+async def demo_predict(
+    request: Request,
+):
+    file, model_name, existing_image_data_url = await _parse_demo_form(request)
     try:
-        result, data = await _predict_upload(file)
+        result, data = await _predict_upload(file, model_name, existing_image_data_url)
     except HTTPException as exc:
         return templates.TemplateResponse(
             request,
             "demo.html",
-            _build_demo_context(error=exc.detail),
+            _build_demo_context(error=exc.detail, selected_model=model_name),
             status_code=exc.status_code,
         )
 
@@ -116,11 +203,13 @@ async def demo_predict(request: Request, file: UploadFile = File(...)):
             class_label=pred_label,
             confidence=f"{pred_conf * 100:.2f}%",
             acc=f"{pred_conf * 100:.2f}%",
+            selected_model=result["model_name"],
         ),
     )
 
 
 @app.post("/predict")
-async def predict(file: UploadFile = File(...)):
-    result, _ = await _predict_upload(file)
+async def predict(request: Request):
+    file, model_name = await _parse_predict_form(request)
+    result, _ = await _predict_upload(file, model_name)
     return result

templates/demo.html

@@ -51,24 +51,50 @@
       gap: 10px;
     }
 
+    .field-group {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .field-label {
+      font-size: 14px;
+      color: #555;
+      letter-spacing: 0.2px;
+    }
+
+    .model-select {
+      width: 100%;
+      padding: 11px 12px;
+      border: 2px solid var(--line);
+      background: #edf2f7;
+      color: #333;
+      font-size: 15px;
+    }
+
     .upload-box {
       width: 100%;
-      aspect-ratio: 1.25 / 1;
+      min-height: 280px;
       border: 2px solid var(--line);
       background: var(--box-bg);
       color: #111;
-      display: grid;
-      place-items: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 14px;
       text-align: center;
       cursor: pointer;
-      overflow: hidden;
       position: relative;
       font-size: 22px;
     }
 
     .upload-box img {
-      width: 100%;
-      height: 100%;
+      width: min(100%, 280px);
+      height: 280px;
+      min-width: 220px;
+      min-height: 220px;
+      max-width: 100%;
+      max-height: 320px;
       object-fit: contain;
       background: #fff;
     }
@@ -142,9 +168,17 @@
       }
 
       .upload-box {
+        min-height: 220px;
         font-size: 18px;
       }
 
+      .upload-box img {
+        width: min(100%, 220px);
+        height: 220px;
+        min-width: 160px;
+        min-height: 160px;
+      }
+
       .stats {
         font-size: 22px;
       }
@@ -153,8 +187,20 @@
 </head>
 <body>
   <form class="panel" action="/demo" method="post" enctype="multipart/form-data">
+    <input type="hidden" name="existing_image_data_url" id="existingImageDataUrl" value="{{ image_data_url or '' }}">
     <div class="top-row">
       <div class="upload-wrap">
+        <div class="field-group">
+          <label class="field-label" for="modelSelect">推論模型</label>
+          <select class="model-select" id="modelSelect" name="model_name">
+            {% for model in model_options %}
+            <option value="{{ model.name }}" {% if model.name == selected_model %}selected{% endif %}>
+              {{ model.name }} ({{ model.backend }})
+            </option>
+            {% endfor %}
+          </select>
+        </div>
+
         <label class="upload-box" for="fileInput" id="uploadBox">
           {% if image_data_url %}
           <img src="{{ image_data_url }}" alt="Input image preview" id="previewImage">
@@ -163,11 +209,12 @@
           <img src="" alt="Input image preview" id="previewImage" style="display:none;">
           {% endif %}
         </label>
-        <input class="file-input" id="fileInput" type="file" name="file" accept="image/*" required>
+        <input class="file-input" id="fileInput" type="file" name="file" accept="image/*">
         <div class="upload-hint">點擊圖片區塊選擇檔案</div>
       </div>
 
       <div class="stats">
+        <div>Model: {{ selected_model }}</div>
         <div>Class: {{ class_label }}</div>
         <div>Confidence: {{ confidence }}</div>
         <div>Acc: {{ acc }}</div>
@@ -184,9 +231,11 @@
   </form>
 
   <script>
+    const form = document.querySelector(".panel");
     const fileInput = document.getElementById("fileInput");
     const previewImage = document.getElementById("previewImage");
     const placeholderText = document.getElementById("placeholderText");
+    const existingImageDataUrl = document.getElementById("existingImageDataUrl");
 
     fileInput.addEventListener("change", (event) => {
       const file = event.target.files?.[0];
@@ -197,9 +246,19 @@
         if (placeholderText) placeholderText.style.display = "none";
         previewImage.src = reader.result;
         previewImage.style.display = "block";
+        existingImageDataUrl.value = reader.result;
       };
       reader.readAsDataURL(file);
     });
+
+    form.addEventListener("submit", (event) => {
+      const hasNewFile = Boolean(fileInput.files?.length);
+      const hasExistingImage = Boolean(existingImageDataUrl.value);
+      if (!hasNewFile && !hasExistingImage) {
+        event.preventDefault();
+        alert("請先上傳圖片。");
+      }
+    });
   </script>
 </body>
 </html>