Deploy public web upscaler

README.md

@@ -11,6 +11,7 @@ app_port: 7860
 
 CPU-first Hugging Face Space for anime image upscaling with:
 
+- Beginner-friendly browser web UI at `/`
 - API key protected `/api/v1/upscale`
 - Admin login, key management, runtime controls
 - Job history and lightweight dashboard
@@ -83,7 +84,8 @@ export ADMIN_PASSWORD='change-me-now'
 uvicorn app.main:app --host 0.0.0.0 --port 7860
 ```
 
-Open `http://127.0.0.1:7860/admin`.
+Open `http://127.0.0.1:7860/` for the public web upscaler.
+Open `http://127.0.0.1:7860/admin` for the admin console.
 
 ## Notes
 

app/main.py

@@ -3,7 +3,6 @@ from __future__ import annotations
 from datetime import datetime, timezone
 from pathlib import Path
 from typing import Any
-from uuid import uuid4
 
 from fastapi import FastAPI, File, Form, HTTPException, Request, UploadFile
 from fastapi.responses import HTMLResponse, JSONResponse, RedirectResponse, Response
@@ -23,11 +22,8 @@ db.initialize()
 runtime = RealCuganRuntime(env)
 
 templates = Jinja2Templates(directory=str(Path(__file__).resolve().parent / "templates"))
-outputs_dir = Path("/tmp/realcugan_outputs")
-outputs_dir.mkdir(parents=True, exist_ok=True)
 
 app = FastAPI(title=env.app_name, docs_url=None, redoc_url=None)
-app.mount("/outputs", StaticFiles(directory=str(outputs_dir)), name="outputs")
 app.add_middleware(
     SessionMiddleware,
     secret_key=env.session_secret,
@@ -218,8 +214,122 @@ def dashboard_context(request: Request, *, issued_key: str | None = None) -> dic
     }
 
 
-@app.get("/", response_class=JSONResponse)
-async def root() -> JSONResponse:
+def public_context(request: Request) -> dict[str, Any]:
+    settings = get_runtime_settings()
+    model_options = {
+        scale: [
+            {
+                "value": variant,
+                "label": variant,
+                "available": any((env.weights_dir / filename).exists() for filename in candidates),
+            }
+            for variant, candidates in variants.items()
+        ]
+        for scale, variants in MODEL_CATALOG.items()
+    }
+    return {
+        "request": request,
+        "app_name": env.app_name,
+        "csrf_token": csrf_token(request),
+        "settings": settings,
+        "model_options": model_options,
+        "runtime_status": runtime.runtime_status(),
+        "max_input_long_edge": settings["max_input_long_edge"],
+        "max_input_pixels": settings["max_input_pixels"],
+    }
+
+
+async def run_upscale_job(
+    *,
+    file: UploadFile | None,
+    scale: int | None,
+    variant: str | None,
+    alpha: float | None,
+    tile_mode: int | None,
+    cache_mode: int | None,
+    response_format: str,
+) -> Response:
+    if file is None:
+        raise HTTPException(status_code=400, detail="Missing image file.")
+    settings = typed_runtime_settings()
+    chosen_scale = scale or settings["default_scale"]
+    chosen_variant = variant or settings["default_variant"]
+    chosen_alpha = alpha if alpha is not None else settings["default_alpha"]
+    chosen_tile = tile_mode if tile_mode is not None else settings["default_tile_mode"]
+    chosen_cache = cache_mode if cache_mode is not None else settings["default_cache_mode"]
+    chosen_format = response_format.strip().lower()
+    if chosen_format not in {"png", "jpeg", "webp"}:
+        raise HTTPException(status_code=400, detail="Unsupported response_format.")
+    payload = await file.read()
+    if not payload:
+        raise HTTPException(status_code=400, detail="Empty upload.")
+    try:
+        prepared = runtime.inspect_input(
+            payload,
+            max_input_long_edge=settings["max_input_long_edge"],
+            max_input_pixels=settings["max_input_pixels"],
+        )
+    except ValueError as exc:
+        raise HTTPException(status_code=400, detail=str(exc)) from exc
+    job_id = db.create_job(
+        status="queued",
+        source_filename=file.filename or "upload",
+        input_sha256=prepared.input_sha256,
+        input_width=prepared.width,
+        input_height=prepared.height,
+        scale=chosen_scale,
+        model_variant=chosen_variant,
+        alpha=chosen_alpha,
+        tile_mode_requested=chosen_tile,
+        cache_mode=chosen_cache,
+        response_format=chosen_format,
+    )
+    db.mark_job_running(job_id)
+    try:
+        result = runtime.upscale(
+            prepared,
+            scale=chosen_scale,
+            variant=chosen_variant,
+            alpha=chosen_alpha,
+            tile_mode=chosen_tile,
+            cache_mode=chosen_cache,
+            response_format=chosen_format,
+            jpeg_quality=settings["jpeg_quality"],
+        )
+    except BusyError as exc:
+        db.mark_job_failed(job_id, str(exc))
+        raise HTTPException(status_code=429, detail=str(exc)) from exc
+    except (RuntimeConfigurationError, UnsupportedModelError) as exc:
+        db.mark_job_failed(job_id, str(exc))
+        raise HTTPException(status_code=503, detail=str(exc)) from exc
+    except Exception as exc:  # noqa: BLE001
+        db.mark_job_failed(job_id, str(exc))
+        raise HTTPException(status_code=500, detail="Upscaling failed.") from exc
+    db.mark_job_success(
+        job_id,
+        output_width=result.output_width,
+        output_height=result.output_height,
+        tile_mode_used=result.tile_mode_used,
+        duration_ms=result.duration_ms,
+    )
+    headers = {
+        "X-Job-Id": str(job_id),
+        "X-Scale": str(result.scale),
+        "X-Variant": result.variant,
+        "X-Tile-Mode-Used": str(result.tile_mode_used),
+        "X-Cache-Mode-Used": str(result.cache_mode_used),
+        "X-Duration-Ms": str(result.duration_ms),
+    }
+    return Response(content=result.content, media_type=result.media_type, headers=headers)
+
+
+@app.get("/", response_class=HTMLResponse)
+async def public_home(request: Request) -> HTMLResponse:
+    return templates.TemplateResponse(request, "public.html", public_context(request))
+
+
+@app.get("/api", response_class=JSONResponse)
+async def api_info() -> JSONResponse:
     return JSONResponse(
         {
             "name": env.app_name,
@@ -409,6 +519,27 @@ async def admin_metrics(request: Request) -> JSONResponse:
     return JSONResponse(payload)
 
 
+@app.post("/upscale")
+async def public_upscale(
+    request: Request,
+    file: UploadFile | None = File(None),
+    scale: int | None = Form(None),
+    variant: str | None = Form(None),
+    response_format: str = Form("png"),
+    csrf: str = Form(...),
+) -> Response:
+    ensure_csrf(request, csrf)
+    return await run_upscale_job(
+        file=file,
+        scale=scale,
+        variant=variant,
+        alpha=None,
+        tile_mode=3,
+        cache_mode=1,
+        response_format=response_format,
+    )
+
+
 @app.post("/api/v1/upscale")
 async def upscale_image(
     request: Request,
@@ -421,94 +552,12 @@ async def upscale_image(
     response_format: str = Form("png"),
 ) -> Response:
     authenticate_api_request(request)
-    if file is None:
-        raise HTTPException(status_code=400, detail="Missing image file.")
-    settings = typed_runtime_settings()
-    chosen_scale = scale or settings["default_scale"]
-    chosen_variant = variant or settings["default_variant"]
-    chosen_alpha = alpha if alpha is not None else settings["default_alpha"]
-    chosen_tile = tile_mode if tile_mode is not None else settings["default_tile_mode"]
-    chosen_cache = cache_mode if cache_mode is not None else settings["default_cache_mode"]
-    chosen_format = response_format.strip().lower()
-    if chosen_format not in {"png", "jpeg", "webp"}:
-        raise HTTPException(status_code=400, detail="Unsupported response_format.")
-    payload = await file.read()
-    if not payload:
-        raise HTTPException(status_code=400, detail="Empty upload.")
-    try:
-        prepared = runtime.inspect_input(
-            payload,
-            max_input_long_edge=settings["max_input_long_edge"],
-            max_input_pixels=settings["max_input_pixels"],
-        )
-    except ValueError as exc:
-        raise HTTPException(status_code=400, detail=str(exc)) from exc
-    job_id = db.create_job(
-        status="queued",
-        source_filename=file.filename or "upload",
-        input_sha256=prepared.input_sha256,
-        input_width=prepared.width,
-        input_height=prepared.height,
-        scale=chosen_scale,
-        model_variant=chosen_variant,
-        alpha=chosen_alpha,
-        tile_mode_requested=chosen_tile,
-        cache_mode=chosen_cache,
-        response_format=chosen_format,
+    return await run_upscale_job(
+        file=file,
+        scale=scale,
+        variant=variant,
+        alpha=alpha,
+        tile_mode=tile_mode,
+        cache_mode=cache_mode,
+        response_format=response_format,
     )
-    db.mark_job_running(job_id)
-    try:
-        result = runtime.upscale(
-            prepared,
-            scale=chosen_scale,
-            variant=chosen_variant,
-            alpha=chosen_alpha,
-            tile_mode=chosen_tile,
-            cache_mode=chosen_cache,
-            response_format=chosen_format,
-            jpeg_quality=settings["jpeg_quality"],
-        )
-    except BusyError as exc:
-        db.mark_job_failed(job_id, str(exc))
-        raise HTTPException(status_code=429, detail=str(exc)) from exc
-    except (RuntimeConfigurationError, UnsupportedModelError) as exc:
-        db.mark_job_failed(job_id, str(exc))
-        raise HTTPException(status_code=503, detail=str(exc)) from exc
-    except Exception as exc:  # noqa: BLE001
-        db.mark_job_failed(job_id, str(exc))
-        raise HTTPException(status_code=500, detail="Upscaling failed.") from exc
-    db.mark_job_success(
-        job_id,
-        output_width=result.output_width,
-        output_height=result.output_height,
-        tile_mode_used=result.tile_mode_used,
-        duration_ms=result.duration_ms,
-    )
-    headers = {
-        "X-Job-Id": str(job_id),
-        "X-Scale": str(result.scale),
-        "X-Variant": result.variant,
-        "X-Tile-Mode-Used": str(result.tile_mode_used),
-        "X-Cache-Mode-Used": str(result.cache_mode_used),
-        "X-Duration-Ms": str(result.duration_ms),
-    }
-    if request.headers.get("x-return-url", "").lower() in {"1", "true", "yes"}:
-        ext = {"png": "png", "jpeg": "jpg", "webp": "webp"}[chosen_format]
-        filename = f"rc_{job_id}_{uuid4().hex}.{ext}"
-        output_path = outputs_dir / filename
-        output_path.write_bytes(result.content)
-        url = str(request.base_url).rstrip("/") + f"/outputs/{filename}"
-        headers["X-Output-Url"] = url
-        return JSONResponse(
-            {
-                "url": url,
-                "filename": filename,
-                "size": len(result.content),
-                "media_type": result.media_type,
-                "width": result.output_width,
-                "height": result.output_height,
-                "job_id": job_id,
-            },
-            headers=headers,
-        )
-    return Response(content=result.content, media_type=result.media_type, headers=headers)

app/static/public.js

@@ -0,0 +1,197 @@
+const form = document.querySelector("#upscale-form");
+const fileInput = document.querySelector("#file");
+const dropZone = document.querySelector("[data-drop-zone]");
+const inputPreview = document.querySelector("[data-input-preview]");
+const outputPreview = document.querySelector("[data-output-preview]");
+const resultPlaceholder = document.querySelector("[data-result-placeholder]");
+const downloadRow = document.querySelector("[data-download-row]");
+const downloadLink = document.querySelector("[data-download-link]");
+const jobMeta = document.querySelector("[data-job-meta]");
+const statusNode = document.querySelector("[data-status]");
+const submitButton = document.querySelector("[data-submit-button]");
+
+let inputPreviewUrl = "";
+let outputPreviewUrl = "";
+let startedAt = 0;
+let timer = 0;
+
+function setStatus(message, tone = "") {
+  if (!statusNode) return;
+  statusNode.textContent = message;
+  statusNode.dataset.tone = tone;
+}
+
+function friendlyError(detail, status) {
+  const text = String(detail || "");
+  if (status === 429 || text.includes("Another inference")) {
+    return "现在有另一张图正在处理，请稍等一会再试。";
+  }
+  if (status === 503 || text.includes("Weight for") || text.includes("Unsupported model")) {
+    return "这个模型组合暂时不可用。请先试 2x + no-denoise。";
+  }
+  if (text.includes("too large") || text.includes("exceeds")) {
+    return "这张图片超过当前 CPU 演示限制，请先缩小一点再上传。";
+  }
+  if (text.includes("too small")) {
+    return "图片太小了，最短边至少需要 8px。";
+  }
+  if (text.includes("Unsupported") || text.includes("corrupted")) {
+    return "图片格式不支持或文件损坏，请换一张常见格式图片。";
+  }
+  if (text.includes("Missing") || text.includes("Empty")) {
+    return "请先选择一张图片。";
+  }
+  return text || "处理失败了，请换张图或稍后再试。";
+}
+
+function showInputPreview(file) {
+  if (!inputPreview || !file) return;
+  if (inputPreviewUrl) URL.revokeObjectURL(inputPreviewUrl);
+  inputPreviewUrl = URL.createObjectURL(file);
+  inputPreview.src = inputPreviewUrl;
+  inputPreview.hidden = false;
+  setStatus(`已选择：${file.name}，可以开始放大。`);
+}
+
+function resetResult() {
+  if (outputPreviewUrl) URL.revokeObjectURL(outputPreviewUrl);
+  outputPreviewUrl = "";
+  if (outputPreview) {
+    outputPreview.removeAttribute("src");
+    outputPreview.hidden = true;
+  }
+  if (resultPlaceholder) resultPlaceholder.hidden = false;
+  if (downloadRow) downloadRow.hidden = true;
+  if (downloadLink) downloadLink.removeAttribute("href");
+  if (jobMeta) jobMeta.textContent = "";
+}
+
+function startTimer() {
+  startedAt = Date.now();
+  window.clearInterval(timer);
+  timer = window.setInterval(() => {
+    const seconds = Math.max(1, Math.round((Date.now() - startedAt) / 1000));
+    setStatus(`处理中……CPU 推理比较慢，已经等待 ${seconds} 秒。`);
+  }, 1000);
+}
+
+function stopTimer() {
+  window.clearInterval(timer);
+  timer = 0;
+}
+
+async function parseError(response) {
+  try {
+    const payload = await response.json();
+    return payload.detail || response.statusText;
+  } catch (_) {
+    return response.statusText;
+  }
+}
+
+function syncVariantOptions() {
+  if (!form) return;
+  const scale = form.querySelector('input[name="scale"]:checked')?.value || "2";
+  const select = form.querySelector('select[name="variant"]');
+  if (!select) return;
+  let selectedStillValid = false;
+  Array.from(select.options).forEach((option) => {
+    const scales = (option.dataset.scales || "").split(",");
+    const valid = scales.includes(scale);
+    option.disabled = !valid;
+    if (option.selected && valid) selectedStillValid = true;
+  });
+  if (!selectedStillValid) {
+    const fallback = Array.from(select.options).find((option) => !option.disabled);
+    if (fallback) fallback.selected = true;
+  }
+}
+function bindDropZone() {
+  if (!dropZone || !fileInput) return;
+  ["dragenter", "dragover"].forEach((eventName) => {
+    dropZone.addEventListener(eventName, (event) => {
+      event.preventDefault();
+      dropZone.classList.add("drop-zone--active");
+    });
+  });
+  ["dragleave", "drop"].forEach((eventName) => {
+    dropZone.addEventListener(eventName, (event) => {
+      event.preventDefault();
+      dropZone.classList.remove("drop-zone--active");
+    });
+  });
+  dropZone.addEventListener("drop", (event) => {
+    const file = event.dataTransfer?.files?.[0];
+    if (!file) return;
+    fileInput.files = event.dataTransfer.files;
+    resetResult();
+    showInputPreview(file);
+  });
+}
+
+fileInput?.addEventListener("change", () => {
+  const file = fileInput.files?.[0];
+  resetResult();
+  if (file) showInputPreview(file);
+});
+
+form?.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const file = fileInput?.files?.[0];
+  if (!file) {
+    setStatus("请先选择一张图片。", "error");
+    return;
+  }
+  if (!file.type.startsWith("image/")) {
+    setStatus("请选择图片文件，不要上传压缩包或其他文件。", "error");
+    return;
+  }
+
+  resetResult();
+  submitButton?.setAttribute("disabled", "disabled");
+  startTimer();
+
+  try {
+    const response = await fetch(form.action, {
+      method: "POST",
+      body: new FormData(form),
+      credentials: "same-origin",
+    });
+    if (!response.ok) {
+      const detail = await parseError(response);
+      throw new Error(friendlyError(detail, response.status));
+    }
+    const blob = await response.blob();
+    outputPreviewUrl = URL.createObjectURL(blob);
+    if (outputPreview) {
+      outputPreview.src = outputPreviewUrl;
+      outputPreview.hidden = false;
+    }
+    if (resultPlaceholder) resultPlaceholder.hidden = true;
+    const format = form.querySelector('input[name="response_format"]:checked')?.value || "png";
+    const scale = response.headers.get("x-scale") || form.querySelector('input[name="scale"]:checked')?.value || "2";
+    if (downloadLink) {
+      downloadLink.href = outputPreviewUrl;
+      downloadLink.download = `real-cugan-${scale}x.${format === "jpeg" ? "jpg" : format}`;
+    }
+    if (downloadRow) downloadRow.hidden = false;
+    if (jobMeta) {
+      const jobId = response.headers.get("x-job-id") || "-";
+      const duration = response.headers.get("x-duration-ms") || "-";
+      const variant = response.headers.get("x-variant") || "-";
+      jobMeta.textContent = `job #${jobId} · ${scale}x/${variant} · ${duration} ms`;
+    }
+    setStatus("完成！可以预览或下载结果。", "success");
+  } catch (error) {
+    setStatus(error.message || "处理失败了，请稍后再试。", "error");
+  } finally {
+    stopTimer();
+    submitButton?.removeAttribute("disabled");
+  }
+});
+
+bindDropZone();
+syncVariantOptions();
+form?.querySelectorAll('input[name="scale"]').forEach((input) => {
+  input.addEventListener("change", syncVariantOptions);
+});

app/static/styles.css

@@ -661,3 +661,295 @@ input:disabled {
     scroll-behavior: auto !important;
   }
 }
+
+
+.public-shell {
+  width: min(calc(100% - 32px), var(--content-width));
+  margin: 0 auto;
+  padding: 28px 0 36px;
+}
+
+.public-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
+  gap: 20px;
+  align-items: stretch;
+  margin-bottom: 20px;
+}
+
+.public-hero__copy {
+  position: relative;
+  overflow: hidden;
+  padding: clamp(24px, 4vw, 44px);
+  border: 1px solid rgba(121, 93, 48, 0.12);
+  border-radius: var(--radius);
+  background:
+    radial-gradient(circle at right 12% top 10%, rgba(222, 174, 58, 0.22), transparent 26%),
+    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(249, 242, 230, 0.94));
+  box-shadow: var(--shadow);
+}
+
+.public-hero h1 {
+  margin: 0;
+  max-width: 13ch;
+  font-size: clamp(2.6rem, 7vw, 6.4rem);
+  line-height: 0.92;
+  letter-spacing: -0.07em;
+  text-wrap: balance;
+}
+
+.hero-copy {
+  max-width: 740px;
+  color: var(--muted);
+  font-size: clamp(1rem, 1.4vw, 1.2rem);
+  line-height: 1.75;
+  text-wrap: pretty;
+}
+
+.hero-actions,
+.download-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  margin-top: 18px;
+}
+
+.hero-guide {
+  display: grid;
+  align-content: center;
+}
+
+.step-list {
+  display: grid;
+  gap: 14px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.step-list li {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 6px 12px;
+  padding: 14px;
+  border: 1px solid rgba(126, 96, 47, 0.08);
+  border-radius: 14px;
+  background: rgba(255, 252, 247, 0.78);
+}
+
+.step-list strong {
+  color: oklch(0.43 0.1 80);
+}
+
+.step-list span {
+  color: var(--muted);
+}
+
+.public-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.uploader-card,
+.result-column {
+  display: grid;
+  gap: 18px;
+}
+
+.drop-zone {
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  padding: clamp(22px, 4vw, 42px);
+  border: 2px dashed rgba(178, 125, 21, 0.34);
+  border-radius: 22px;
+  background: rgba(255, 252, 246, 0.7);
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 160ms cubic-bezier(0.2, 0, 0, 1), background-color 160ms cubic-bezier(0.2, 0, 0, 1), transform 160ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.drop-zone input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+}
+
+.drop-zone__icon {
+  font-size: 2.6rem;
+}
+
+.drop-zone small,
+.helper-text,
+.progress-note {
+  color: var(--muted);
+  line-height: 1.55;
+}
+
+.drop-zone--active {
+  border-color: rgba(178, 125, 21, 0.72);
+  background: rgba(255, 245, 220, 0.9);
+  transform: translateY(-1px);
+}
+
+.option-section {
+  display: grid;
+  gap: 12px;
+  margin-top: 18px;
+}
+
+.option-section h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.option-grid {
+  display: grid;
+  gap: 10px;
+}
+
+.option-grid--three {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.option-card {
+  display: grid;
+  gap: 7px;
+  padding: 14px;
+  border: 1px solid rgba(126, 96, 47, 0.12);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.68);
+  cursor: pointer;
+}
+
+.option-card input {
+  width: auto;
+}
+
+.option-card span {
+  font-weight: 800;
+}
+
+.option-card small {
+  color: var(--muted);
+  line-height: 1.35;
+}
+
+.submit-button {
+  width: 100%;
+  margin-top: 18px;
+}
+
+.submit-button:disabled {
+  cursor: wait;
+  opacity: 0.7;
+}
+
+.progress-note {
+  margin: 0;
+  padding: 12px 14px;
+  border-radius: 14px;
+  background: rgba(255, 252, 247, 0.78);
+}
+
+.progress-note[data-tone="success"] {
+  color: oklch(0.35 0.09 150);
+  background: var(--green-soft);
+}
+
+.progress-note[data-tone="error"] {
+  color: oklch(0.42 0.13 24);
+  background: var(--red-soft);
+}
+
+.preview-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.preview-frame {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+}
+
+.preview-frame img,
+.placeholder {
+  width: 100%;
+  min-height: 220px;
+  max-height: 420px;
+  object-fit: contain;
+  border: 1px solid rgba(126, 96, 47, 0.1);
+  border-radius: 16px;
+  background:
+    linear-gradient(45deg, rgba(126, 96, 47, 0.05) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(126, 96, 47, 0.05) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(126, 96, 47, 0.05) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(126, 96, 47, 0.05) 75%);
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+  background-size: 20px 20px;
+}
+
+.placeholder {
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  color: var(--muted);
+  text-align: center;
+}
+
+.preview-frame figcaption,
+.job-meta {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.limit-list {
+  display: grid;
+  gap: 10px;
+  padding-left: 1.2rem;
+  color: var(--muted);
+  line-height: 1.6;
+}
+
+.limit-list a {
+  color: oklch(0.43 0.1 80);
+  font-weight: 700;
+}
+
+@media (hover: hover) {
+  .drop-zone:hover,
+  .option-card:hover {
+    border-color: rgba(178, 125, 21, 0.4);
+    background: rgba(255, 255, 255, 0.92);
+  }
+}
+
+@media (max-width: 1080px) {
+  .public-hero,
+  .public-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .public-shell {
+    width: min(calc(100% - 20px), var(--content-width));
+    padding-top: 12px;
+  }
+
+  .option-grid--three,
+  .preview-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .public-hero h1 {
+    font-size: clamp(2.4rem, 17vw, 4.2rem);
+  }
+}

app/templates/base.html

@@ -4,6 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{% block title %}{{ app_name }}{% endblock %}</title>
+    <meta name="description" content="{% block description %}Real-CUGAN anime and illustration image upscaling service.{% endblock %}" />
+    <meta name="theme-color" content="#d3a12d" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

app/templates/public.html

@@ -0,0 +1,142 @@
+{% extends "base.html" %}
+
+{% block title %}{{ app_name }} | Web Upscaler{% endblock %}
+{% block description %}Upload an anime or illustration image and upscale it with Real-CUGAN directly in your browser.{% endblock %}
+{% block head %}
+  <script defer src="{{ request.url_for('static', path='/public.js') }}"></script>
+{% endblock %}
+
+{% block body %}
+  <main class="public-shell">
+    <section class="public-hero">
+      <div class="public-hero__copy">
+        <p class="eyebrow">Real-CUGAN web upscaler</p>
+        <h1>把动漫图、插画图放大得更清楚。</h1>
+        <p class="hero-copy">
+          新手友好的网页入口：上传图片，选择倍数和风格，等待 CPU 慢慢处理，完成后直接下载结果。
+          图片只在内存里处理，不会默认保存原图。
+        </p>
+        <div class="hero-actions">
+          <a class="button button--primary" href="#upscale-form">开始上传</a>
+          <a class="button button--ghost" href="/admin">管理后台</a>
+        </div>
+      </div>
+      <div class="hero-guide panel">
+        <p class="eyebrow">保姆级流程</p>
+        <ol class="step-list">
+          <li><strong>选图</strong><span>推荐 PNG/JPEG/WebP，长边不超过 {{ max_input_long_edge }}px。</span></li>
+          <li><strong>选参数</strong><span>不懂就保持默认：2x + no-denoise + PNG。</span></li>
+          <li><strong>等结果</strong><span>CPU 机器一次只跑一张，大图可能要等一会。</span></li>
+        </ol>
+      </div>
+    </section>
+
+    <section class="public-grid">
+      <form id="upscale-form" class="panel uploader-card" action="/upscale" method="post" enctype="multipart/form-data">
+        <input type="hidden" name="csrf" value="{{ csrf_token }}" />
+        <div class="panel-heading">
+          <div>
+            <p class="eyebrow">Upload</p>
+            <h2>选择要放大的图片</h2>
+          </div>
+          <p class="panel-note">最大 {{ max_input_long_edge }}px / {{ max_input_pixels }} 像素</p>
+        </div>
+
+        <label class="drop-zone" data-drop-zone>
+          <input id="file" type="file" name="file" accept="image/png,image/jpeg,image/webp,image/bmp" required />
+          <span class="drop-zone__icon">🖼️</span>
+          <strong>点击选择图片，或拖到这里</strong>
+          <small>支持常见图片格式；透明 PNG 会尽量保留透明通道。</small>
+        </label>
+
+        <div class="option-section">
+          <h3>1. 放大倍数</h3>
+          <div class="option-grid option-grid--three">
+            {% for scale_value in [2, 3, 4] %}
+              <label class="option-card">
+                <input type="radio" name="scale" value="{{ scale_value }}" {% if settings.default_scale == scale_value|string %}checked{% endif %} />
+                <span>{{ scale_value }}x</span>
+                <small>{% if scale_value == 2 %}默认推荐，最稳{% elif scale_value == 3 %}更大，耗时更久{% else %}最大，CPU 压力最高{% endif %}</small>
+              </label>
+            {% endfor %}
+          </div>
+        </div>
+
+        <div class="option-section">
+          <h3>2. 模型风格</h3>
+          <select name="variant" aria-label="Model style">
+            <option value="no-denoise" data-scales="2,3,4" {% if settings.default_variant == "no-denoise" %}selected{% endif %}>No denoise：保留细节，默认推荐</option>
+            <option value="denoise1x" data-scales="2" {% if settings.default_variant == "denoise1x" %}selected{% endif %}>Denoise 1x：轻微去噪</option>
+            <option value="denoise2x" data-scales="2" {% if settings.default_variant == "denoise2x" %}selected{% endif %}>Denoise 2x：清理压缩痕迹</option>
+            <option value="denoise3x" data-scales="2,3,4" {% if settings.default_variant == "denoise3x" %}selected{% endif %}>Denoise 3x：更强去噪</option>
+            <option value="conservative" data-scales="2,3,4" {% if settings.default_variant == "conservative" %}selected{% endif %}>Conservative：保守柔和</option>
+          </select>
+          <p class="helper-text">提示：3x/4x 目前只支持 no-denoise、denoise3x、conservative；如果组合不支持，页面会提醒你。</p>
+        </div>
+
+        <div class="option-section">
+          <h3>3. 输出格式</h3>
+          <div class="option-grid option-grid--three">
+            <label class="option-card">
+              <input type="radio" name="response_format" value="png" checked />
+              <span>PNG</span>
+              <small>质量最好</small>
+            </label>
+            <label class="option-card">
+              <input type="radio" name="response_format" value="jpeg" />
+              <span>JPEG</span>
+              <small>文件较小</small>
+            </label>
+            <label class="option-card">
+              <input type="radio" name="response_format" value="webp" />
+              <span>WebP</span>
+              <small>网页友好</small>
+            </label>
+          </div>
+        </div>
+
+        <button class="button button--primary submit-button" type="submit" data-submit-button>
+          开始放大
+        </button>
+        <p class="progress-note" data-status>准备好了。选择图片后即可开始。</p>
+      </form>
+
+      <aside class="result-column">
+        <section class="panel preview-card">
+          <div class="panel-heading">
+            <div>
+              <p class="eyebrow">Preview</p>
+              <h2>预览和结果</h2>
+            </div>
+          </div>
+          <div class="preview-grid">
+            <figure class="preview-frame">
+              <img data-input-preview alt="Input preview" hidden />
+              <figcaption>原图预览</figcaption>
+            </figure>
+            <figure class="preview-frame preview-frame--result">
+              <img data-output-preview alt="Upscaled result" hidden />
+              <div class="placeholder" data-result-placeholder>结果会显示在这里</div>
+              <figcaption>放大结果</figcaption>
+            </figure>
+          </div>
+          <div class="download-row" data-download-row hidden>
+            <a class="button button--secondary" data-download-link href="#" download>下载结果</a>
+            <div class="job-meta mono" data-job-meta></div>
+          </div>
+        </section>
+
+        <section class="panel tips-card">
+          <p class="eyebrow">Tips</p>
+          <h2>新手建议</h2>
+          <ul class="limit-list">
+            <li>第一次建议用 <strong>2x + no-denoise + PNG</strong>。</li>
+            <li>如果原图噪点多，再试 denoise1x 或 denoise2x。</li>
+            <li>出现“另一个任务正在运行”时，等几十秒再点一次。</li>
+            <li>自动化调用请看 <a href="/api">API 信息</a>；后台在 <a href="/admin">/admin</a>。</li>
+          </ul>
+        </section>
+      </aside>
+    </section>
+  </main>
+{% endblock %}