Remove Gradio, replace with pure FastAPI + static HTML

- New app.py: pure FastAPI server with all existing endpoints preserved
- New static/index.html: upload/convert/MML playback page
- Corrector now served as full page at /corrector (no more iframe)
- corrector.js: auto-loads from /api/session-data on page load
- corrector.html: CSS/JS paths updated for /static/ mount
- Dockerfile: app_gradio.py → app.py, removed Gradio env vars
- requirements: gradio → fastapi

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Dockerfile

@@ -50,7 +50,7 @@ RUN pip install --no-cache-dir -r /tmp/requirements.txt
 WORKDIR /app
 COPY core/ ./core/
 COPY static/ ./static/
-COPY app_gradio.py .
+COPY app.py .
 COPY convert_3part.py .
 COPY omr_parser.py .
 
@@ -59,9 +59,8 @@ ENV AUDIVERIS_BIN=/opt/audiveris/bin/Audiveris
 ENV AUDIVERIS_MAX_HEAP=1500m
 ENV JAVA_TOOL_OPTIONS="-Djava.awt.headless=true"
 ENV MAX_PDF_PAGES=5
-ENV GRADIO_SERVER_NAME=0.0.0.0
-ENV GRADIO_SERVER_PORT=7860
 
 EXPOSE 7860
 
-CMD ["python", "app_gradio.py", "--port", "7860"]
+
+CMD ["python", "app.py", "--port", "7860"]

app.py

@@ -0,0 +1,614 @@
+"""
+app.py
+
+Pure FastAPI server — 악보(PDF/PNG/JPG) 업로드 → MML 변환 + OMR 교정도구.
+Gradio 의존성 없음.
+
+실행:
+    python app.py --port 7860
+"""
+
+import argparse
+import datetime
+import json
+import logging
+import os
+import re
+import shutil
+import tempfile
+import threading
+from pathlib import Path
+from typing import List
+
+from fastapi import FastAPI, Query, UploadFile, File, Form
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, PlainTextResponse, JSONResponse
+
+from core.convert_pipeline import run_score_pipeline
+
+logger = logging.getLogger(__name__)
+
+SUPPORTED_EXTENSIONS = [".pdf", ".png", ".jpg", ".jpeg"]
+MAX_PDF_PAGES = int(os.environ.get("MAX_PDF_PAGES", "5"))
+_SEP = "-" * 40
+
+# ---------------------------------------------------------------------------
+# Persistent stats via Hugging Face Dataset repo
+# ---------------------------------------------------------------------------
+_STATS_REPO = os.environ.get("STATS_REPO", "Coconuttttt/score-to-mml-stats")
+_STATS_FILE = "stats.json"
+_stats_lock = threading.Lock()
+
+_active_lock = threading.Lock()
+_active_count = 0
+
+
+def _hf_api():
+    try:
+        from huggingface_hub import HfApi
+        token = os.environ.get("HF_TOKEN")
+        return HfApi(token=token) if token else None
+    except ImportError:
+        return None
+
+
+def _load_stats() -> dict:
+    api = _hf_api()
+    if not api:
+        return {}
+    try:
+        from huggingface_hub import hf_hub_download
+        token = os.environ.get("HF_TOKEN")
+        path = hf_hub_download(
+            repo_id=_STATS_REPO, filename=_STATS_FILE,
+            repo_type="dataset", token=token,
+            force_download=True,
+        )
+        with open(path, encoding="utf-8") as f:
+            return json.load(f)
+    except Exception:
+        return {}
+
+
+def _save_stats(data: dict):
+    api = _hf_api()
+    if not api:
+        return
+    try:
+        tmp = Path(tempfile.gettempdir()) / _STATS_FILE
+        tmp.write_text(json.dumps(data, indent=2, ensure_ascii=False), encoding="utf-8")
+        api.upload_file(
+            path_or_fileobj=str(tmp),
+            path_in_repo=_STATS_FILE,
+            repo_id=_STATS_REPO,
+            repo_type="dataset",
+        )
+    except Exception as e:
+        logger.warning("stats save failed: %s", e)
+
+
+def _bump_stat(key: str, extra: dict | None = None):
+    now = datetime.datetime.now()
+    today = now.strftime("%Y-%m-%d")
+    hour = now.strftime("%H")
+    with _stats_lock:
+        data = _load_stats()
+        if today not in data:
+            data[today] = {"visits": 0, "conversions": 0, "errors": 0, "hourly": {}}
+        if "hourly" not in data[today]:
+            data[today]["hourly"] = {}
+        if "errors" not in data[today]:
+            data[today]["errors"] = 0
+        data[today][key] = data[today].get(key, 0) + 1
+        if hour not in data[today]["hourly"]:
+            data[today]["hourly"][hour] = {"visits": 0, "conversions": 0, "errors": 0}
+        data[today]["hourly"][hour][key] = data[today]["hourly"][hour].get(key, 0) + 1
+        with _active_lock:
+            cur = _active_count
+        peak = data[today].get("peak_concurrent", 0)
+        if cur > peak:
+            data[today]["peak_concurrent"] = cur
+        if extra:
+            if "recent_errors" not in data[today]:
+                data[today]["recent_errors"] = []
+            data[today]["recent_errors"].append(extra)
+            data[today]["recent_errors"] = data[today]["recent_errors"][-10:]
+        _save_stats(data)
+
+
+def _record_visit():
+    threading.Thread(target=_bump_stat, args=("visits",), daemon=True).start()
+
+
+def _record_conversion():
+    threading.Thread(target=_bump_stat, args=("conversions",), daemon=True).start()
+
+
+def _record_error(error_msg: str):
+    now = datetime.datetime.now().strftime("%H:%M:%S")
+    short = str(error_msg)[:200]
+    extra = {"time": now, "msg": short}
+    threading.Thread(target=_bump_stat, args=("errors", extra), daemon=True).start()
+
+
+def _get_dashboard() -> str:
+    with _active_lock:
+        active = _active_count
+    data = _load_stats()
+    today = datetime.date.today().isoformat()
+    lines = []
+    lines.append(f"=== 실시간 ===")
+    lines.append(f"현재 변환 중: {active}건")
+    lines.append("")
+    td = data.get(today, {})
+    lines.append(f"=== 오늘 ({today}) ===")
+    lines.append(f"방문: {td.get('visits', 0)}  |  변환: {td.get('conversions', 0)}  |  에러: {td.get('errors', 0)}  |  피크 동시: {td.get('peak_concurrent', 0)}")
+    hourly = td.get("hourly", {})
+    if hourly:
+        lines.append("")
+        lines.append("시간대별:")
+        for h in sorted(hourly.keys()):
+            hd = hourly[h]
+            err_str = f"  에러: {hd.get('errors',0):>3}" if hd.get('errors', 0) else ""
+            lines.append(f"  {h}시  방문: {hd.get('visits',0):>3}  변환: {hd.get('conversions',0):>3}{err_str}")
+    recent_errs = td.get("recent_errors", [])
+    if recent_errs:
+        lines.append("")
+        lines.append("최근 에러:")
+        for e in recent_errs[-5:]:
+            lines.append(f"  [{e.get('time','')}] {e.get('msg','')[:100]}")
+    lines.append("")
+    lines.append("=== 최근 7일 ===")
+    lines.append(f"{'날짜':<12} {'방문':>5} {'변환':>5} {'에러':>4} {'피크':>4}")
+    lines.append("-" * 38)
+    dates = sorted(data.keys(), reverse=True)[:7]
+    total_v, total_c, total_e = 0, 0, 0
+    for d in dates:
+        dd = data[d]
+        v = dd.get("visits", 0)
+        c = dd.get("conversions", 0)
+        e = dd.get("errors", 0)
+        p = dd.get("peak_concurrent", 0)
+        total_v += v
+        total_c += c
+        total_e += e
+        lines.append(f"{d:<12} {v:>5} {c:>5} {e:>4} {p:>4}")
+    lines.append("-" * 38)
+    lines.append(f"{'합계':<12} {total_v:>5} {total_c:>5} {total_e:>4}")
+    return "\n".join(lines)
+
+
+# ---------------------------------------------------------------------------
+# MML Helpers
+# ---------------------------------------------------------------------------
+_PREPROCESS_MAP = {"none": "none", "otsu": "otsu", "adaptive": "adaptive", "contrast": "contrast"}
+_UPSCALE_MAP = {"none": "none", "pil_2": "pil_2", "pil_3": "pil_3"}
+_MABI_CHAR_LIMIT = 1500
+
+
+def _extract_mml_parts(text: str) -> List[str]:
+    return re.findall(r'MML@([^;]*);', text, re.IGNORECASE)
+
+
+def _to_mabi_tracks(text: str) -> List[str]:
+    parts = _extract_mml_parts(text)
+    if not parts:
+        return []
+    tracks = []
+    for i in range(0, len(parts), 3):
+        chunk = parts[i:i + 3]
+        while len(chunk) < 3:
+            chunk.append("")
+        tracks.append("MML@" + ",".join(chunk) + ";")
+    return tracks
+
+
+def _make_track_files(text: str, prefix: str, ts: str, tmpdir: Path) -> List[str]:
+    tracks = _to_mabi_tracks(text)
+    if not tracks:
+        return []
+    paths = []
+    for i, track in enumerate(tracks, 1):
+        p = tmpdir / f"{prefix}_track{i}_{ts}.mml"
+        p.write_text(track, encoding="utf-8")
+        paths.append(str(p))
+    return paths
+
+
+def _mml_char_info(text: str, label: str) -> str:
+    parts = _extract_mml_parts(text)
+    if not parts:
+        return ""
+    lines = [f"[{label} 글자수]"]
+    for i, p in enumerate(parts, 1):
+        full = f"MML@{p};"
+        n = len(full)
+        warn = f" *** {_MABI_CHAR_LIMIT}자 초과!" if n > _MABI_CHAR_LIMIT else ""
+        lines.append(f"  Part {i}: {n}자{warn}")
+    return "\n".join(lines)
+
+
+def _check_pdf_pages(file_path: str) -> str | None:
+    if Path(file_path).suffix.lower() != ".pdf":
+        return None
+    try:
+        import fitz
+        doc = fitz.open(file_path)
+        count = doc.page_count
+        doc.close()
+        if count > MAX_PDF_PAGES:
+            return f"PDF가 {count}페이지입니다. 최대 {MAX_PDF_PAGES}페이지까지 지원합니다."
+    except Exception:
+        pass
+    return None
+
+
+def _apply_tempo(whole_text: str, three_text: str, tempo: int):
+    tempo = max(32, min(255, int(tempo)))
+
+    def replace_tempo(text):
+        if not text:
+            return text
+        return re.sub(r'(MML@)(T\d+)?', rf'\1T{tempo}', text, flags=re.IGNORECASE)
+
+    new_whole = replace_tempo(whole_text)
+    new_three = replace_tempo(three_text)
+
+    ts = datetime.datetime.now().strftime("%Y%m%d_%H%M%S")
+    tmpdir = Path(tempfile.gettempdir())
+
+    whole_files = _make_track_files(new_whole, f"tempo{tempo}_whole", ts, tmpdir) if new_whole else []
+    three_files = _make_track_files(new_three, f"tempo{tempo}_3part", ts, tmpdir) if new_three else []
+
+    return new_whole, new_three, whole_files, three_files
+
+
+# ---------------------------------------------------------------------------
+# Session (single-user HF Space — no UUID needed)
+# ---------------------------------------------------------------------------
+_session_lock = threading.Lock()
+_SESSION: dict = {}
+
+
+# ---------------------------------------------------------------------------
+# Conversion (adapted from app_gradio.py convert())
+# ---------------------------------------------------------------------------
+def _do_convert(file_path: str, preprocess: str, dpi: int, upscale: str,
+                page_start: int, page_end: int) -> dict:
+    global _active_count
+
+    ext = Path(file_path).suffix.lower()
+    if ext not in SUPPORTED_EXTENSIONS:
+        raise ValueError(f"지원하지 않는 파일 형식입니다: {ext}")
+
+    page_err = _check_pdf_pages(file_path)
+    if page_err and page_start == 0 and page_end == 0:
+        raise ValueError(page_err)
+
+    work_dir = tempfile.mkdtemp(prefix="sml_ui_")
+
+    with _active_lock:
+        _active_count += 1
+    try:
+        combined, mxl_paths, xml_paths, warnings = run_score_pipeline(
+            input_path=file_path,
+            preprocess_mode=_PREPROCESS_MAP.get(preprocess, "none"),
+            dpi=dpi,
+            upscale_mode=_UPSCALE_MAP.get(upscale, "none"),
+            correct_xml=False,
+            save_dir=work_dir,
+            page_start=page_start,
+            page_end=page_end,
+        )
+    except Exception as e:
+        _record_error(str(e))
+        raise
+    finally:
+        with _active_lock:
+            _active_count -= 1
+
+    # Page preview images
+    pages_dir = Path(work_dir) / "pages"
+    preview_images = sorted(pages_dir.glob("*.png")) if pages_dir.exists() else []
+    pre_imgs = [p for p in preview_images if "_pre" in p.name or "_norm" in p.name]
+    if not pre_imgs:
+        pre_imgs = [p for p in preview_images if not p.name.endswith(("_norm.png",))]
+    preview_paths = [str(p) for p in (pre_imgs if pre_imgs else preview_images)]
+
+    # Split MML
+    if _SEP in combined:
+        parts = combined.split(_SEP, 1)
+        whole_text = parts[0].strip()
+        three_text = parts[1].strip()
+    else:
+        whole_text = combined.strip()
+        three_text = ""
+
+    # Generate track files
+    stem = Path(file_path).stem
+    ts = datetime.datetime.now().strftime("%Y%m%d_%H%M%S")
+    tmpdir = Path(tempfile.gettempdir())
+    whole_files = _make_track_files(whole_text, f"{stem}_whole", ts, tmpdir)
+    three_files = _make_track_files(three_text, f"{stem}_3part", ts, tmpdir) if three_text else []
+
+    _record_conversion()
+
+    # Warnings + char info
+    info_parts = []
+    if warnings:
+        info_parts.append("\n".join(f"[WARN] {w}" for w in warnings))
+    else:
+        info_parts.append("경고 없음")
+    whole_info = _mml_char_info(whole_text, "Whole Part")
+    three_info = _mml_char_info(three_text, "3 Part")
+    if whole_info:
+        info_parts.append(whole_info)
+    if three_info:
+        info_parts.append(three_info)
+    warnings_text = "\n\n".join(info_parts)
+
+    # Corrector data
+    corrector_images = []
+    for mxl_p in mxl_paths:
+        stem2 = Path(mxl_p).stem
+        norm_path = pages_dir / f"{stem2}_norm.png" if pages_dir.exists() else None
+        if norm_path and norm_path.exists():
+            corrector_images.append(str(norm_path))
+        else:
+            fallback = pages_dir / f"{stem2}.png" if pages_dir.exists() else None
+            if fallback and fallback.exists():
+                corrector_images.append(str(fallback))
+            elif preview_paths:
+                idx = mxl_paths.index(mxl_p)
+                if idx < len(preview_paths):
+                    corrector_images.append(preview_paths[idx])
+
+    corrector_xmls = []
+    for xp in (xml_paths or []):
+        try:
+            corrector_xmls.append(Path(xp).read_text(encoding="utf-8"))
+        except Exception:
+            pass
+
+    corrector_omr_data = []
+    corrector_omr_paths = []
+    mxl_dir = Path(work_dir) / "mxl" if Path(work_dir).exists() else None
+    if mxl_dir and mxl_dir.exists():
+        for mxl_p in mxl_paths:
+            omr_path = mxl_dir / f"{Path(mxl_p).stem}.omr"
+            if omr_path.exists():
+                corrector_omr_paths.append(str(omr_path))
+                try:
+                    from omr_parser import parse_omr as _parse_omr
+                    corrector_omr_data.append(_parse_omr(str(omr_path)))
+                except Exception:
+                    corrector_omr_data.append(None)
+            else:
+                corrector_omr_paths.append(None)
+                corrector_omr_data.append(None)
+
+    # Build URLs
+    image_urls = [f"/corrector-file?path={p}" for p in corrector_images]
+    omr_file_urls = [f"/corrector-file?path={p}" if p else None for p in corrector_omr_paths]
+    preview_urls = [f"/corrector-file?path={p}" for p in preview_paths]
+
+    result = {
+        "ok": True,
+        "whole_text": whole_text,
+        "three_text": three_text,
+        "whole_files": [f"/corrector-file?path={p}" for p in whole_files],
+        "three_files": [f"/corrector-file?path={p}" for p in three_files],
+        "mxl_paths": [f"/corrector-file?path={p}" for p in mxl_paths],
+        "xml_paths": [f"/corrector-file?path={p}" for p in (xml_paths or [])],
+        "preview_urls": preview_urls,
+        "warnings_text": warnings_text,
+        # Corrector data
+        "image_urls": image_urls,
+        "xml_texts": corrector_xmls,
+        "omr_data_array": corrector_omr_data,
+        "omr_file_urls": omr_file_urls,
+    }
+
+    with _session_lock:
+        _SESSION["latest"] = result
+
+    return result
+
+
+# ---------------------------------------------------------------------------
+# FastAPI App
+# ---------------------------------------------------------------------------
+def create_app() -> FastAPI:
+    _static_path = str(Path(__file__).resolve().parent / "static")
+    _tmp_dir = tempfile.gettempdir()
+
+    app = FastAPI(title="악보 → MML 변환기")
+
+    # --- Pages ---
+    @app.get("/")
+    async def index_page():
+        _record_visit()
+        return FileResponse(os.path.join(_static_path, "index.html"), media_type="text/html")
+
+    @app.get("/corrector")
+    async def corrector_page():
+        return FileResponse(os.path.join(_static_path, "corrector.html"), media_type="text/html")
+
+    # --- File serving ---
+    def _serve_temp_file(path: str):
+        resolved = str(Path(path).resolve())
+        if not resolved.startswith(_tmp_dir):
+            return PlainTextResponse("Forbidden", status_code=403)
+        if not Path(resolved).exists():
+            return PlainTextResponse("Not found", status_code=404)
+        return FileResponse(resolved)
+
+    @app.get("/corrector-file")
+    async def corrector_file(path: str = Query(...)):
+        return _serve_temp_file(path)
+
+    @app.get("/api/download")
+    async def download_file(path: str = Query(...)):
+        return _serve_temp_file(path)
+
+    # --- Convert ---
+    @app.post("/api/convert")
+    async def api_convert(
+        file: UploadFile = File(...),
+        preprocess: str = Form("none"),
+        dpi: int = Form(300),
+        upscale: str = Form("none"),
+        page_start: int = Form(0),
+        page_end: int = Form(0),
+    ):
+        tmp_path = None
+        try:
+            suffix = Path(file.filename or "upload").suffix or ".png"
+            with tempfile.NamedTemporaryFile(suffix=suffix, delete=False) as tmp:
+                content = await file.read()
+                tmp.write(content)
+                tmp_path = tmp.name
+
+            result = _do_convert(tmp_path, preprocess, dpi, upscale, page_start, page_end)
+            return JSONResponse(content=result)
+
+        except ValueError as e:
+            return JSONResponse(content={"ok": False, "error": str(e)}, status_code=422)
+        except Exception as e:
+            return JSONResponse(content={"ok": False, "error": f"변환 중 오류 발생: {e}"}, status_code=500)
+        finally:
+            if tmp_path and os.path.exists(tmp_path):
+                os.unlink(tmp_path)
+
+    # --- Session data for corrector ---
+    @app.get("/api/session-data")
+    async def session_data():
+        with _session_lock:
+            data = _SESSION.get("latest")
+        if not data:
+            return JSONResponse(content={"error": "No conversion data"}, status_code=404)
+        return JSONResponse(content={
+            "image_urls": data["image_urls"],
+            "xml_texts": data["xml_texts"],
+            "omr_data_array": data["omr_data_array"],
+            "omr_file_urls": data["omr_file_urls"],
+        })
+
+    # --- Tempo ---
+    @app.post("/api/apply-tempo")
+    async def api_apply_tempo(
+        whole_text: str = Form(""),
+        three_text: str = Form(""),
+        tempo: int = Form(120),
+    ):
+        new_whole, new_three, whole_files, three_files = _apply_tempo(whole_text, three_text, tempo)
+        return JSONResponse(content={
+            "whole_text": new_whole,
+            "three_text": new_three,
+            "whole_files": [f"/corrector-file?path={p}" for p in whole_files],
+            "three_files": [f"/corrector-file?path={p}" for p in three_files],
+        })
+
+    # --- Dashboard ---
+    @app.get("/api/dashboard")
+    async def dashboard():
+        return PlainTextResponse(_get_dashboard())
+
+    # --- OMR endpoints ---
+    @app.post("/api/parse-omr")
+    async def parse_omr_endpoint(
+        omr_file: UploadFile = File(...),
+        sheet_number: int = 1,
+    ):
+        from omr_parser import parse_omr as _parse_omr
+        tmp_path = None
+        try:
+            with tempfile.NamedTemporaryFile(suffix=".omr", delete=False) as tmp:
+                content = await omr_file.read()
+                tmp.write(content)
+                tmp_path = tmp.name
+            result = _parse_omr(tmp_path, sheet_number)
+            return JSONResponse(content=result)
+        except ValueError as e:
+            return JSONResponse(content={"error": str(e)}, status_code=422)
+        except Exception as e:
+            return JSONResponse(content={"error": f"OMR parsing failed: {e}"}, status_code=500)
+        finally:
+            if tmp_path and os.path.exists(tmp_path):
+                os.unlink(tmp_path)
+
+    @app.post("/api/omr/apply-edits")
+    async def omr_apply_edits(
+        omr_file: UploadFile = File(...),
+        edits: str = Form(""),
+        sheet_number: int = Form(1),
+    ):
+        import json as _json
+        from omr_parser import load_omr, save_omr, apply_edits, parse_omr as _parse_omr
+
+        try:
+            edit_list = _json.loads(edits) if edits else []
+        except _json.JSONDecodeError as e:
+            return JSONResponse(content={"error": f"Invalid edits JSON: {e}"}, status_code=422)
+
+        if not edit_list:
+            return JSONResponse(content={"error": "No edits provided"}, status_code=422)
+
+        tmp_path = None
+        try:
+            with tempfile.NamedTemporaryFile(suffix=".omr", delete=False) as tmp:
+                content = await omr_file.read()
+                tmp.write(content)
+                tmp_path = tmp.name
+
+            all_files, sheet_root, sheet_key = load_omr(tmp_path, sheet_number)
+            edit_results = apply_edits(sheet_root, edit_list)
+            save_omr(tmp_path, all_files, sheet_root, sheet_key)
+
+            xml_text = None
+            try:
+                from omr_parser import export_omr
+                import zipfile as _zf
+                mxl_path = export_omr(tmp_path)
+                with _zf.ZipFile(mxl_path, "r") as zf:
+                    for name in zf.namelist():
+                        if name.endswith(".xml") and not name.startswith("META-INF"):
+                            xml_text = zf.read(name).decode("utf-8")
+                            break
+            except (FileNotFoundError, RuntimeError):
+                pass
+
+            omr_data = _parse_omr(tmp_path, sheet_number)
+
+            import base64 as _b64
+            with open(tmp_path, "rb") as f:
+                omr_b64 = _b64.b64encode(f.read()).decode("ascii")
+
+            return JSONResponse(content={
+                "editResults": edit_results,
+                "xml": xml_text,
+                "omrData": omr_data,
+                "omrFileBase64": omr_b64,
+            })
+
+        except Exception as e:
+            return JSONResponse(content={"error": f"OMR edit failed: {e}"}, status_code=500)
+        finally:
+            if tmp_path and os.path.exists(tmp_path):
+                os.unlink(tmp_path)
+
+    # --- Static files (must be last — catch-all) ---
+    app.mount("/static", StaticFiles(directory=_static_path), name="static")
+
+    return app
+
+
+if __name__ == "__main__":
+    print(f"===== Application Startup at {datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')} =====")
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--port", type=int, default=7860)
+    args = parser.parse_args()
+
+    import uvicorn
+    application = create_app()
+    uvicorn.run(application, host="0.0.0.0", port=args.port)

requirements-server.txt

@@ -1,5 +1,5 @@
 # Server dependencies for Hugging Face Spaces deployment
-gradio>=4.0.0
+fastapi>=0.100.0
 uvicorn>=0.20.0
 pymupdf>=1.23.0
 opencv-python-headless>=4.9.0

static/corrector.html

@@ -4,7 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>OMR Corrector</title>
-<link rel="stylesheet" href="corrector.css">
+<link rel="stylesheet" href="/static/corrector.css">
 </head>
 <body>
 
@@ -185,6 +185,6 @@
   <span id="status-total"></span>
 </div>
 
-<script src="corrector.js"></script>
+<script src="/static/corrector.js"></script>
 </body>
 </html>

static/corrector.js

@@ -6201,11 +6201,31 @@ loadBtn.addEventListener("click", loadFiles);
 document.getElementById("btn-prev-page").addEventListener("click", prevPage);
 document.getElementById("btn-next-page").addEventListener("click", nextPage);
 
-// Auto-load test set on page load (if no files selected)
-loadFiles().catch(err => {
-  console.error("Auto-load error:", err);
-  document.getElementById("load-status").textContent = "Auto-load error: " + err.message;
-});
+// Try loading from server session first (set by /api/convert), then fallback to loadFiles
+async function loadFromSession() {
+  try {
+    const resp = await fetch("/api/session-data");
+    if (!resp.ok) return false;
+    const data = await resp.json();
+    if (!data.image_urls?.length || !data.xml_texts?.length) return false;
+    await loadFromData(data.image_urls, data.xml_texts,
+                       data.omr_data_array || [], data.omr_file_urls || []);
+    return true;
+  } catch (e) {
+    console.warn("Session data load failed:", e);
+    return false;
+  }
+}
+
+(async () => {
+  const loaded = await loadFromSession();
+  if (!loaded) {
+    loadFiles().catch(err => {
+      console.error("Auto-load error:", err);
+      document.getElementById("load-status").textContent = "Auto-load error: " + err.message;
+    });
+  }
+})();
 
 markerSvg.addEventListener("mouseover", (e) => {
   const circle = e.target.closest("circle.marker");

static/index.html

@@ -0,0 +1,373 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>악보 → MML 변환기</title>
+<style>
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #1a1a2e; color: #e0e0e0; min-height: 100vh; }
+h1 { text-align: center; padding: 20px; color: #fff; }
+.subtitle { text-align: center; color: #aaa; margin-bottom: 20px; }
+.container { max-width: 900px; margin: 0 auto; padding: 0 20px 40px; }
+
+/* Feedback */
+.feedback-bar { text-align: center; margin-bottom: 16px; }
+.feedback-bar a { background: #4a90d9; color: #fff; padding: 8px 20px; border-radius: 6px; text-decoration: none; font-weight: bold; }
+.feedback-bar a:hover { background: #5a9fe9; }
+
+/* Form */
+.upload-form { background: #16213e; border-radius: 12px; padding: 24px; margin-bottom: 24px; }
+.form-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; margin-bottom: 12px; }
+.form-group { display: flex; flex-direction: column; gap: 4px; }
+.form-group label { font-size: 13px; color: #aaa; }
+.form-group input, .form-group select { background: #0f3460; color: #fff; border: 1px solid #333; border-radius: 6px; padding: 8px 12px; font-size: 14px; }
+.form-group input[type="file"] { padding: 6px; }
+.form-group input[type="number"] { width: 80px; }
+.radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
+.radio-group label { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #ccc; cursor: pointer; }
+.radio-group input[type="radio"] { accent-color: #4a90d9; }
+button { cursor: pointer; border: none; border-radius: 6px; padding: 10px 20px; font-size: 14px; font-weight: bold; }
+.btn-primary { background: #e94560; color: #fff; }
+.btn-primary:hover { background: #f05575; }
+.btn-primary:disabled { background: #555; cursor: not-allowed; }
+.btn-secondary { background: #4a90d9; color: #fff; }
+.btn-secondary:hover { background: #5a9fe9; }
+.btn-small { padding: 6px 12px; font-size: 12px; }
+.btn-corrector { background: #00b894; color: #fff; font-size: 16px; padding: 14px 28px; }
+.btn-corrector:hover { background: #00d9a3; }
+
+/* Progress */
+#progress { display: none; text-align: center; padding: 20px; color: #aaa; font-size: 16px; }
+#progress .spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid #333; border-top-color: #4a90d9; border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 8px; vertical-align: middle; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* Results */
+#results { display: none; }
+.section { background: #16213e; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
+.section h3 { color: #4a90d9; margin-bottom: 12px; }
+.preview-gallery { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
+.preview-gallery img { max-height: 200px; border-radius: 6px; border: 1px solid #333; object-fit: contain; }
+textarea { width: 100%; background: #0f3460; color: #e0e0e0; border: 1px solid #333; border-radius: 6px; padding: 10px; font-family: monospace; font-size: 12px; resize: vertical; }
+.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
+.downloads { margin-top: 8px; }
+.downloads a { color: #4a90d9; text-decoration: none; margin-right: 12px; }
+.downloads a:hover { text-decoration: underline; }
+.tempo-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
+.tempo-row input[type="range"] { flex: 1; accent-color: #4a90d9; }
+.tempo-row span { min-width: 40px; text-align: center; }
+.warnings { color: #ffa500; white-space: pre-wrap; font-size: 12px; margin-top: 8px; }
+.corrector-section { text-align: center; padding: 24px; }
+
+/* Dashboard */
+.dashboard-toggle { cursor: pointer; color: #888; font-size: 13px; margin-top: 16px; }
+#dashboard-content { display: none; margin-top: 8px; white-space: pre-wrap; font-family: monospace; font-size: 11px; color: #888; background: #0f3460; padding: 12px; border-radius: 6px; }
+</style>
+</head>
+<body>
+
+<h1>악보 → MML 변환기</h1>
+<p class="subtitle">PDF 또는 이미지 악보를 업로드하면 마비노기 MML로 변환해드립니다.</p>
+
+<div class="container">
+  <div class="feedback-bar">
+    <a href="https://docs.google.com/forms/d/e/1FAIpQLScDoM53RMjDLlftORYHXmZ5kmkN4TTZOIyFIRuVsZhp4RGjEA/viewform" target="_blank">Feedback — 사용 후기 / 개선 요청</a>
+  </div>
+
+  <!-- Upload Form -->
+  <div class="upload-form">
+    <form id="upload-form">
+      <div class="form-row">
+        <div class="form-group" style="flex:1">
+          <label>악보 파일 (PDF, PNG, JPG)</label>
+          <input type="file" id="file-input" name="file" accept=".pdf,.png,.jpg,.jpeg" required>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>전처리</label>
+          <div class="radio-group">
+            <label><input type="radio" name="preprocess" value="none" checked> 없음</label>
+            <label><input type="radio" name="preprocess" value="otsu"> Otsu</label>
+            <label><input type="radio" name="preprocess" value="adaptive"> Adaptive</label>
+            <label><input type="radio" name="preprocess" value="contrast"> 대비강화</label>
+          </div>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>DPI (PDF만)</label>
+          <select name="dpi">
+            <option value="150">150</option>
+            <option value="300" selected>300</option>
+            <option value="450">450</option>
+            <option value="600">600</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>업스케일</label>
+          <div class="radio-group">
+            <label><input type="radio" name="upscale" value="none" checked> 없음</label>
+            <label><input type="radio" name="upscale" value="pil_2"> PIL 2×</label>
+            <label><input type="radio" name="upscale" value="pil_3"> PIL 3×</label>
+          </div>
+        </div>
+        <div class="form-group">
+          <label>시작 페이지</label>
+          <input type="number" name="page_start" value="0" min="0">
+        </div>
+        <div class="form-group">
+          <label>끝 페이지</label>
+          <input type="number" name="page_end" value="0" min="0">
+        </div>
+      </div>
+      <div class="form-row">
+        <button type="submit" class="btn-primary" id="convert-btn">변환 시작</button>
+      </div>
+    </form>
+  </div>
+
+  <div id="progress"><span class="spinner"></span> <span id="progress-text">변환 중...</span></div>
+
+  <!-- Results -->
+  <div id="results">
+    <!-- Preview -->
+    <div class="section">
+      <h3>입력 악보 미리보기</h3>
+      <div class="preview-gallery" id="preview-gallery"></div>
+    </div>
+
+    <!-- Whole Part -->
+    <div class="section">
+      <h3>Whole Part (전체화음)</h3>
+      <textarea id="mml-whole" rows="10" readonly></textarea>
+      <div class="btn-row">
+        <button class="btn-secondary btn-small" onclick="playMml('mml-whole', 'Whole Part')">▶ Whole Part 재생</button>
+        <button class="btn-small" style="background:#555;color:#fff" onclick="stopMml()">■ 정지</button>
+      </div>
+      <div class="downloads" id="whole-downloads"></div>
+    </div>
+
+    <!-- 3 Part -->
+    <div class="section">
+      <h3>3 Part (멜로디 / 화음 / 베이스)</h3>
+      <textarea id="mml-three" rows="10" readonly></textarea>
+      <div class="btn-row">
+        <button class="btn-secondary btn-small" onclick="playMml('mml-three', '3 Part')">▶ 3 Part 전체</button>
+        <button class="btn-secondary btn-small" onclick="playPart('mml-three', 0, '멜로디')">▶ 멜로디</button>
+        <button class="btn-secondary btn-small" onclick="playPart('mml-three', 1, '화음')">▶ 화음</button>
+        <button class="btn-secondary btn-small" onclick="playPart('mml-three', 2, '베이스')">▶ 베이스</button>
+        <button class="btn-small" style="background:#555;color:#fff" onclick="stopMml()">■ 정지</button>
+      </div>
+      <div class="downloads" id="three-downloads"></div>
+    </div>
+
+    <!-- Tempo -->
+    <div class="section">
+      <h3>박자 조절</h3>
+      <div class="tempo-row">
+        <span>32</span>
+        <input type="range" id="tempo-slider" min="32" max="255" value="120">
+        <span>255</span>
+        <span id="tempo-value">120</span>
+        <button class="btn-secondary btn-small" onclick="applyTempo()">박자 적용</button>
+      </div>
+    </div>
+
+    <!-- Downloads -->
+    <div class="section">
+      <h3>파일 다운로드</h3>
+      <div class="downloads" id="mxl-downloads"></div>
+      <div class="downloads" id="xml-downloads"></div>
+    </div>
+
+    <!-- Warnings -->
+    <div class="section">
+      <h3>경고</h3>
+      <div class="warnings" id="warnings"></div>
+    </div>
+
+    <!-- Corrector -->
+    <div class="corrector-section">
+      <button class="btn-corrector" onclick="window.location='/corrector'">교정도구 열기</button>
+      <p style="color:#888; margin-top:8px; font-size:13px">변환 결과가 자동으로 로드됩니다</p>
+    </div>
+  </div>
+
+  <!-- Dashboard -->
+  <div>
+    <div class="dashboard-toggle" onclick="toggleDashboard()">▶ 통계 대시보드</div>
+    <pre id="dashboard-content"></pre>
+  </div>
+</div>
+
+<script>
+// ── MML Player (from app_gradio.py _JS_INIT) ──
+var _MP = {actx:null, playing:[], stop:false};
+_MP.parse = function(mml) {
+  var notes=[],tempo=120,oct=4,dL=4,vol=8,i=0;
+  var s=mml.toUpperCase().replace(/\s+/g,'');
+  var nm={C:0,D:2,E:4,F:5,G:7,A:9,B:11};
+  function rn(){var n='';while(i<s.length&&s[i]>='0'&&s[i]<='9'){n+=s[i];i++;}return n?parseInt(n):0;}
+  function ls(l){var b=60/tempo*4/l,d=0;while(i<s.length&&s[i]==='.'){d++;i++;}var x=b;for(var j=0;j<d;j++){x/=2;b+=x;}return b;}
+  while(i<s.length){
+    var c=s[i];
+    if(c==='T'){i++;tempo=rn()||120;}
+    else if(c==='O'){i++;oct=rn()||4;}
+    else if(c==='L'){i++;dL=rn()||4;}
+    else if(c==='V'){i++;vol=rn();if(vol>15)vol=15;}
+    else if(c==='>'){i++;oct=Math.min(oct+1,8);}
+    else if(c==='<'){i++;oct=Math.max(oct-1,1);}
+    else if(c==='&'){i++;}
+    else if(c==='N'){i++;var nn=rn();var ll=rn()||dL;notes.push({m:nn,d:ls(ll),v:vol});}
+    else if(nm[c]!==undefined){
+      i++;var sm=nm[c];
+      if(i<s.length&&s[i]==='+'){sm++;i++;}
+      else if(i<s.length&&(s[i]==='-'||s[i]==='#')){if(s[i]==='#')sm++;else sm--;i++;}
+      var ll2=rn()||dL;var dur=ls(ll2);notes.push({m:(oct+1)*12+sm,d:dur,v:vol});
+    }
+    else if(c==='R'){i++;var ll3=rn()||dL;notes.push({m:-1,d:ls(ll3),v:0});}
+    else{i++;}
+  }
+  return notes;
+};
+_MP.freq = function(m){return 440*Math.pow(2,(m-69)/12);};
+_MP.playN = function(nl){
+  if(!_MP.actx) _MP.actx = new(window.AudioContext||window.webkitAudioContext)();
+  if(_MP.actx.state==='suspended') _MP.actx.resume();
+  var t=_MP.actx.currentTime+0.05;
+  for(var i=0;i<nl.length;i++){
+    var n=nl[i]; if(_MP.stop)break; if(n.m<0){t+=n.d;continue;}
+    var o=_MP.actx.createOscillator(),g=_MP.actx.createGain(),v=n.v/15*0.3;
+    o.type='triangle';o.frequency.value=_MP.freq(n.m);
+    g.gain.setValueAtTime(v,t);g.gain.exponentialRampToValueAtTime(0.001,t+n.d*0.95);
+    o.connect(g);g.connect(_MP.actx.destination);o.start(t);o.stop(t+n.d);
+    _MP.playing.push(o);t+=n.d;
+  }
+  return t-_MP.actx.currentTime;
+};
+_MP.extract = function(t){var m=t.match(/MML@[^;]*;/gi)||[];return m.map(function(s){return s.replace(/^MML@/i,'').replace(/;$/,'');});};
+_MP.doStop = function(){_MP.stop=true;_MP.playing.forEach(function(o){try{o.stop();}catch(e){}});_MP.playing=[];};
+
+function playMml(elemId, label) {
+  var text = document.getElementById(elemId).value;
+  if (!text) { alert('MML 결과가 없습니다.'); return; }
+  _MP.doStop(); _MP.stop = false;
+  var parts = _MP.extract(text);
+  if (!parts.length) { alert('파싱된 MML이 없습니다.'); return; }
+  var total = 0;
+  for (var i = 0; i < parts.length; i++) {
+    var notes = _MP.parse(parts[i]); total += notes.length; _MP.playN(notes);
+  }
+  alert(label + ' 재생 시작 (' + total + '개 노트, ' + parts.length + '트랙)');
+}
+function playPart(elemId, idx, label) {
+  var text = document.getElementById(elemId).value;
+  if (!text) { alert('MML 결과가 없습니다.'); return; }
+  _MP.doStop(); _MP.stop = false;
+  var parts = _MP.extract(text);
+  if (parts.length > idx) {
+    var notes = _MP.parse(parts[idx]); _MP.playN(notes);
+    alert(label + ' 재생 시작 (' + notes.length + '개 노트)');
+  } else { alert(label + ' 파트를 찾을 수 없습니다.'); }
+}
+function stopMml() { _MP.doStop(); }
+
+// ── Tempo slider ──
+var tempoSlider = document.getElementById('tempo-slider');
+var tempoValue = document.getElementById('tempo-value');
+tempoSlider.addEventListener('input', function() { tempoValue.textContent = this.value; });
+
+function applyTempo() {
+  var tempo = parseInt(tempoSlider.value);
+  var wholeEl = document.getElementById('mml-whole');
+  var threeEl = document.getElementById('mml-three');
+  function replaceTempo(text) {
+    if (!text) return text;
+    return text.replace(/(MML@)(T\d+)?/gi, '$1T' + tempo);
+  }
+  wholeEl.value = replaceTempo(wholeEl.value);
+  threeEl.value = replaceTempo(threeEl.value);
+}
+
+// ── Convert ──
+var convertForm = document.getElementById('upload-form');
+convertForm.addEventListener('submit', async function(e) {
+  e.preventDefault();
+  var btn = document.getElementById('convert-btn');
+  btn.disabled = true;
+  document.getElementById('progress').style.display = 'block';
+  document.getElementById('results').style.display = 'none';
+
+  var formData = new FormData(convertForm);
+  try {
+    var resp = await fetch('/api/convert', { method: 'POST', body: formData });
+    var data = await resp.json();
+    if (!data.ok) {
+      alert(data.error || '변환 실패');
+      return;
+    }
+    renderResults(data);
+  } catch (err) {
+    alert('오류: ' + err.message);
+  } finally {
+    btn.disabled = false;
+    document.getElementById('progress').style.display = 'none';
+  }
+});
+
+function renderResults(data) {
+  // Preview
+  var gallery = document.getElementById('preview-gallery');
+  gallery.innerHTML = '';
+  (data.preview_urls || []).forEach(function(url) {
+    var img = document.createElement('img');
+    img.src = url;
+    gallery.appendChild(img);
+  });
+
+  // MML text
+  document.getElementById('mml-whole').value = data.whole_text || '';
+  document.getElementById('mml-three').value = data.three_text || '';
+
+  // Downloads
+  renderDownloads(data.whole_files || [], document.getElementById('whole-downloads'), 'Whole Track');
+  renderDownloads(data.three_files || [], document.getElementById('three-downloads'), '3Part Track');
+  renderDownloads(data.mxl_paths || [], document.getElementById('mxl-downloads'), 'MXL');
+  renderDownloads(data.xml_paths || [], document.getElementById('xml-downloads'), 'XML');
+
+  // Warnings
+  document.getElementById('warnings').textContent = data.warnings_text || '';
+
+  document.getElementById('results').style.display = 'block';
+}
+
+function renderDownloads(urls, container, label) {
+  container.innerHTML = '';
+  urls.forEach(function(url, i) {
+    var a = document.createElement('a');
+    a.href = url;
+    a.download = '';
+    a.textContent = label + ' ' + (i + 1);
+    container.appendChild(a);
+  });
+}
+
+// ── Dashboard ──
+async function toggleDashboard() {
+  var el = document.getElementById('dashboard-content');
+  if (el.style.display === 'block') {
+    el.style.display = 'none';
+    return;
+  }
+  try {
+    var resp = await fetch('/api/dashboard');
+    el.textContent = await resp.text();
+  } catch (e) {
+    el.textContent = 'Error: ' + e.message;
+  }
+  el.style.display = 'block';
+}
+</script>
+</body>
+</html>