Add corrector tool as iframe tab in Gradio UI

- Embed corrector (HTML/JS/CSS) in new "교정 도구" tab via iframe
- Add loadFromData() + postMessage listener for programmatic data loading
- Convert function now returns corrector data (image paths + XML texts as JSON)
- Uses _norm.png images (Audiveris-processed) for coordinate accuracy
- "교정 도구 열기" button sends conversion results to iframe via postMessage
- Dockerfile updated to COPY static/ directory
- allowed_paths includes static dir + temp dir for file serving

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

Dockerfile

@@ -48,6 +48,7 @@ RUN pip install --no-cache-dir -r /tmp/requirements.txt
 # Copy application code
 WORKDIR /app
 COPY core/ ./core/
+COPY static/ ./static/
 COPY app_gradio.py .
 COPY convert_3part.py .
 

app_gradio.py

@@ -282,19 +282,19 @@ def _check_pdf_pages(file_path: str) -> str | None:
 
 def convert(file_path, preprocess, dpi_str, upscale, page_start, page_end, progress=gr.Progress()):
     global _active_count
-    empty = ("", "", [], [], [], [], [], "")
+    empty = ("", "", [], [], [], [], [], "", "")
     if file_path is None:
-        return (*empty[:7], "파일을 업로드해주세요.")
+        return (*empty[:8], "파일을 업로드해주세요.")
 
     ext = Path(file_path).suffix.lower()
     if ext not in SUPPORTED_EXTENSIONS:
-        return (*empty[:7], f"지원하지 않는 파일 형식입니다: {ext}\n지원 형식: PDF, PNG, JPG")
+        return (*empty[:8], f"지원하지 않는 파일 형식입니다: {ext}\n지원 형식: PDF, PNG, JPG")
 
     page_err = _check_pdf_pages(file_path)
     ps = int(page_start) if page_start else 0
     pe = int(page_end) if page_end else 0
     if page_err and ps == 0 and pe == 0:
-        return (*empty[:7], page_err)
+        return (*empty[:8], page_err)
 
     dpi = int(dpi_str) if dpi_str else 300
 
@@ -319,7 +319,7 @@ def convert(file_path, preprocess, dpi_str, upscale, page_start, page_end, progr
         with _active_lock:
             _active_count -= 1
         _record_error(str(e))
-        return (*empty[:7], f"변환 중 오류 발생:\n{e}")
+        return (*empty[:8], f"변환 중 오류 발생:\n{e}")
 
     with _active_lock:
         _active_count -= 1
@@ -367,6 +367,36 @@ def convert(file_path, preprocess, dpi_str, upscale, page_start, page_end, progr
         info_parts.append(three_info)
     warnings_text = "\n\n".join(info_parts)
 
+    # Build corrector data: page images + XML texts as JSON for iframe postMessage
+    # Must use _norm images — Audiveris processes those, so XML coordinates match them.
+    # _normalize_png can resize, so dimensions may differ from _pre or original.
+    corrector_images = []
+    for mxl_p in mxl_paths:
+        stem = Path(mxl_p).stem  # e.g., "page_01_x2_pre"
+        # Audiveris input is {stem}_norm.png
+        norm_path = pages_dir / f"{stem}_norm.png" if pages_dir.exists() else None
+        if norm_path and norm_path.exists():
+            corrector_images.append(str(norm_path))
+        else:
+            # fallback: try {stem}.png
+            fallback = pages_dir / f"{stem}.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_data = json.dumps({
+        "images": corrector_images,
+        "xmls": corrector_xmls,
+    }, ensure_ascii=False)
+
     return (
         whole_text,
         three_text,
@@ -375,6 +405,7 @@ def convert(file_path, preprocess, dpi_str, upscale, page_start, page_end, progr
         mxl_paths,
         xml_paths,
         preview_paths,
+        corrector_data,
         warnings_text,
     )
 
@@ -522,102 +553,128 @@ def build_ui() -> gr.Blocks:
             size="lg",
         )
 
-        with gr.Row():
-            with gr.Column():
-                file_input = gr.File(
-                    label="악보 파일 (PDF, PNG, JPG)",
-                    file_types=[".pdf", ".png", ".jpg", ".jpeg"],
-                )
-                preprocess_radio = gr.Radio(
-                    choices=["없음", "Otsu", "Adaptive", "대비강화"],
-                    value="없음",
-                    label="전처리 (없음=원본, Otsu=깨끗한스캔, Adaptive=조명불균일, 대비강화=흐린스캔)",
-                )
-                dpi = gr.Dropdown(
-                    choices=["150", "300", "450", "600"],
-                    value="300",
-                    label="DPI (PDF만 해당, 300 권장)",
-                )
-                upscale_radio = gr.Radio(
-                    choices=["없음", "PIL 2×", "PIL 3×"],
-                    value="없음",
-                    label="업스케일 (PIL 리사이즈 — 저해상도 스캔에 효과적)",
-                )
+        with gr.Tabs():
+            # ── Tab 1: 변환 ──────────────────────────────────────
+            with gr.Tab("변환"):
                 with gr.Row():
-                    page_start_input = gr.Number(
-                        value=0, label="시작 페이지 (0=처음부터)", minimum=0, precision=0,
-                    )
-                    page_end_input = gr.Number(
-                        value=0, label="끝 페이지 (0=끝까지)", minimum=0, precision=0,
+                    with gr.Column():
+                        file_input = gr.File(
+                            label="악보 파일 (PDF, PNG, JPG)",
+                            file_types=[".pdf", ".png", ".jpg", ".jpeg"],
+                        )
+                        preprocess_radio = gr.Radio(
+                            choices=["없음", "Otsu", "Adaptive", "대비강화"],
+                            value="없음",
+                            label="전처리 (없음=원본, Otsu=깨끗한스캔, Adaptive=조명불균일, 대비강화=흐린스캔)",
+                        )
+                        dpi = gr.Dropdown(
+                            choices=["150", "300", "450", "600"],
+                            value="300",
+                            label="DPI (PDF만 해당, 300 권장)",
+                        )
+                        upscale_radio = gr.Radio(
+                            choices=["없음", "PIL 2×", "PIL 3×"],
+                            value="없음",
+                            label="업스케일 (PIL 리사이즈 — 저해상도 스캔에 효과적)",
+                        )
+                        with gr.Row():
+                            page_start_input = gr.Number(
+                                value=0, label="시작 페이지 (0=처음부터)", minimum=0, precision=0,
+                            )
+                            page_end_input = gr.Number(
+                                value=0, label="끝 페이지 (0=끝까지)", minimum=0, precision=0,
+                            )
+                        convert_btn = gr.Button("변환 시작", variant="primary")
+
+                    with gr.Column():
+                        # 입력 이미지 미리보기
+                        preview_gallery = gr.Gallery(
+                            label="입력 악보 미리보기",
+                            columns=2,
+                            height=200,
+                            object_fit="contain",
+                        )
+
+                        # Whole Part (N파트 전체화음)
+                        gr.Markdown("#### Whole Part (전체화음)")
+                        whole_output = gr.Textbox(
+                            label="전체화음 N파트 MML",
+                            lines=12,
+                            placeholder="전체화음 결과",
+                            elem_id="mml-whole",
+                        )
+                        whole_file = gr.File(label="Whole Part 다운로드 (트랙별 파일)", file_count="multiple")
+                        with gr.Row():
+                            whole_play_btn = gr.Button("▶ Whole Part 재생", variant="primary", size="sm")
+                            stop_btn = gr.Button("■ 정지", size="sm")
+
+                        # 3 Part (멜로디/화음/베이스)
+                        gr.Markdown("#### 3 Part (멜로디 / 화음 / 베이스)")
+                        three_output = gr.Textbox(
+                            label="3파트 MML (Part1=멜로디, Part2=화음, Part3=베이스)",
+                            lines=12,
+                            placeholder="3파트 결과",
+                            elem_id="mml-three",
+                        )
+                        three_file = gr.File(label="3 Part 다운로드 (트랙별 파일)", file_count="multiple")
+                        with gr.Row():
+                            three_play_btn = gr.Button("▶ 3 Part 전체", size="sm")
+                            melody_btn = gr.Button("▶ 멜로디", size="sm")
+                            chord_btn = gr.Button("▶ 화음", size="sm")
+                            bass_btn = gr.Button("▶ 베이스", size="sm")
+
+                        # 박자 (Tempo) 조절
+                        gr.Markdown("#### 박자 조절")
+                        with gr.Row():
+                            tempo_slider = gr.Slider(
+                                minimum=32, maximum=255, value=120, step=1,
+                                label="Tempo (32~255, 기본: 120)",
+                                elem_id="tempo-slider",
+                            )
+                            tempo_btn = gr.Button("박자 적용", size="sm")
+
+                        # 기타 다운로드
+                        mxl_output = gr.File(label="MXL 다운로드", file_count="multiple")
+                        xml_output = gr.File(label="XML 다운로드", file_count="multiple")
+
+                        # Hidden: corrector data (JSON with image paths + XML texts)
+                        corrector_data_box = gr.Textbox(
+                            visible=False,
+                            elem_id="corrector-data",
+                        )
+
+                        warnings_output = gr.Textbox(label="경고", lines=3, placeholder="경고 메시지")
+
+                # 테스트
+                with gr.Row():
+                    test_btn = gr.Button("나비야 테스트", size="sm")
+
+                # Admin dashboard
+                with gr.Accordion("통계 대시보드", open=False):
+                    dashboard_output = gr.Textbox(
+                        label="서버 통계",
+                        lines=20,
+                        interactive=False,
+                        elem_id="dashboard",
                     )
-                convert_btn = gr.Button("변환 시작", variant="primary")
-
-            with gr.Column():
-                # 입력 이미지 미리보기
-                preview_gallery = gr.Gallery(
-                    label="입력 악보 미리보기",
-                    columns=2,
-                    height=200,
-                    object_fit="contain",
+                    refresh_btn = gr.Button("새로고침", size="sm")
+                    refresh_btn.click(fn=_get_dashboard, outputs=[dashboard_output])
+
+            # ── Tab 2: 교정 도구 (Corrector) ─────────────────────
+            with gr.Tab("교정 도구", elem_id="corrector-tab"):
+                gr.Markdown("변환 완료 후 **'교정 도구 열기'** 버튼을 누르면 악보 교정이 가능합니다.")
+                open_corrector_btn = gr.Button(
+                    "교정 도구 열기 (변환 결과 자동 로드)",
+                    variant="primary",
+                    size="lg",
                 )
-
-                # Whole Part (N파트 전체화음)
-                gr.Markdown("#### Whole Part (전체화음)")
-                whole_output = gr.Textbox(
-                    label="전체화음 N파트 MML",
-                    lines=12,
-                    placeholder="전체화음 결과",
-                    elem_id="mml-whole",
-                )
-                whole_file = gr.File(label="Whole Part 다운로드 (트랙별 파일)", file_count="multiple")
-                with gr.Row():
-                    whole_play_btn = gr.Button("▶ Whole Part 재생", variant="primary", size="sm")
-                    stop_btn = gr.Button("■ 정지", size="sm")
-
-                # 3 Part (멜로디/화음/베이스)
-                gr.Markdown("#### 3 Part (멜로디 / 화음 / 베이스)")
-                three_output = gr.Textbox(
-                    label="3파트 MML (Part1=멜로디, Part2=화음, Part3=베이스)",
-                    lines=12,
-                    placeholder="3파트 결과",
-                    elem_id="mml-three",
+                gr.HTML(
+                    '<iframe id="corrector-iframe" '
+                    'src="/file=/app/static/corrector.html" '
+                    'style="width:100%;height:80vh;border:1px solid #444;border-radius:8px;" '
+                    'allow="autoplay">'
+                    '</iframe>'
                 )
-                three_file = gr.File(label="3 Part 다운로드 (트랙별 파일)", file_count="multiple")
-                with gr.Row():
-                    three_play_btn = gr.Button("▶ 3 Part 전체", size="sm")
-                    melody_btn = gr.Button("▶ 멜로디", size="sm")
-                    chord_btn = gr.Button("▶ 화음", size="sm")
-                    bass_btn = gr.Button("▶ 베이스", size="sm")
-
-                # 박자 (Tempo) 조절
-                gr.Markdown("#### 박자 조절")
-                with gr.Row():
-                    tempo_slider = gr.Slider(
-                        minimum=32, maximum=255, value=120, step=1,
-                        label="Tempo (32~255, 기본: 120)",
-                        elem_id="tempo-slider",
-                    )
-                    tempo_btn = gr.Button("박자 적용", size="sm")
-
-                # 기타 다운로드
-                mxl_output = gr.File(label="MXL 다운로드", file_count="multiple")
-                xml_output = gr.File(label="XML 다운로드", file_count="multiple")
-                warnings_output = gr.Textbox(label="경고", lines=3, placeholder="경고 메시지")
-
-        # 테스트
-        with gr.Row():
-            test_btn = gr.Button("나비야 테스트", size="sm")
-
-        # Admin dashboard
-        with gr.Accordion("통계 대시보드", open=False):
-            dashboard_output = gr.Textbox(
-                label="서버 통계",
-                lines=20,
-                interactive=False,
-                elem_id="dashboard",
-            )
-            refresh_btn = gr.Button("새로고침", size="sm")
-            refresh_btn.click(fn=_get_dashboard, outputs=[dashboard_output])
 
         # Wire up feedback button
         feedback_btn.click(
@@ -625,6 +682,37 @@ def build_ui() -> gr.Blocks:
             js="() => { window.open('https://docs.google.com/forms/d/e/1FAIpQLScDoM53RMjDLlftORYHXmZ5kmkN4TTZOIyFIRuVsZhp4RGjEA/viewform', '_blank'); }",
         )
 
+        # Wire up corrector open button — reads hidden corrector-data and postMessages to iframe
+        _JS_OPEN_CORRECTOR = """
+() => {
+  var box = document.getElementById('corrector-data');
+  if (!box) { alert('교정 데이터를 찾을 수 없습니다.'); return; }
+  var ta = box.querySelector('textarea');
+  var raw = ta ? ta.value : '';
+  if (!raw) { alert('먼저 악보를 변환하세요.'); return; }
+  try {
+    var data = JSON.parse(raw);
+    if (!data.images || !data.images.length || !data.xmls || !data.xmls.length) {
+      alert('변환 결과가 비어있습니다.'); return;
+    }
+    // Convert file paths to Gradio /file= URLs
+    var imageUrls = data.images.map(function(p) { return '/file=' + p; });
+    var iframe = document.getElementById('corrector-iframe');
+    if (!iframe || !iframe.contentWindow) {
+      alert('교정 도구 iframe을 찾을 수 없습니다.'); return;
+    }
+    iframe.contentWindow.postMessage({
+      type: 'corrector-load',
+      images: imageUrls,
+      xmls: data.xmls
+    }, '*');
+  } catch(e) {
+    alert('데이터 파싱 오류: ' + e.message);
+  }
+}
+"""
+        open_corrector_btn.click(fn=None, js=_JS_OPEN_CORRECTOR)
+
         # Wire up playback JS
         stop_btn.click(fn=None, js=_JS_STOP)
         whole_play_btn.click(fn=None, js=_make_box_play_js("mml-whole", "Whole Part"))
@@ -646,7 +734,8 @@ def build_ui() -> gr.Blocks:
             fn=convert,
             inputs=[file_input, preprocess_radio, dpi, upscale_radio, page_start_input, page_end_input],
             outputs=[whole_output, three_output, whole_file, three_file,
-                     mxl_output, xml_output, preview_gallery, warnings_output],
+                     mxl_output, xml_output, preview_gallery, corrector_data_box,
+                     warnings_output],
         )
 
         # Record page visit
@@ -663,8 +752,11 @@ if __name__ == "__main__":
 
     demo = build_ui()
     demo.queue(max_size=10, default_concurrency_limit=1)
+    # allowed_paths: serve corrector static files + temp dirs for conversion results
+    _static_path = str(Path(__file__).resolve().parent / "static")
     demo.launch(
         share=args.share,
         server_name="0.0.0.0",
         server_port=args.port,
+        allowed_paths=[_static_path, tempfile.gettempdir()],
     )

static/corrector.css

@@ -0,0 +1,144 @@
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: 'Segoe UI', sans-serif; font-size: 13px; background: #1a1a2e; color: #e0e0e0; display: flex; flex-direction: column; height: 100vh; }
+
+/* Feedback Banner */
+#feedback-bar {
+  display: flex; justify-content: center; padding: 6px 12px;
+  background: #1a0a2e; border-bottom: 1px solid #444;
+}
+#feedback-btn {
+  display: inline-block; padding: 8px 40px;
+  background: #e94560; color: #fff; font-size: 22px; font-weight: bold;
+  text-decoration: none; border-radius: 6px; letter-spacing: 1px;
+}
+#feedback-btn:hover { background: #ff6b6b; }
+
+/* Upload Bar */
+#upload-bar {
+  display: flex; align-items: center; gap: 15px; padding: 8px 12px;
+  background: #16213e; border-bottom: 1px solid #333;
+  font-size: 24px; flex-wrap: wrap;
+}
+#upload-bar label { display: flex; align-items: center; gap: 6px; font-size: 24px; }
+#upload-bar input[type="file"] { width: 340px; font-size: 21px; }
+#upload-bar input[type="number"] { width: 75px; background: #0f3460; border: 1px solid #555; color: #fff; padding: 4px 5px; border-radius: 4px; font-size: 24px; }
+#load-btn { padding: 8px 22px; background: #e94560; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 24px; }
+#load-btn:hover { background: #ff6b6b; }
+#load-status { color: #aaa; font-size: 19px; }
+#page-nav { display: inline-flex; align-items: center; gap: 6px; }
+#page-nav button { padding: 4px 12px; background: #0f3460; color: #e0e0e0; border: 1px solid #555; border-radius: 4px; cursor: pointer; font-size: 24px; }
+#page-nav button:hover { background: #1a1a5e; }
+#page-indicator { font-size: 22px; color: #e0e0e0; min-width: 60px; text-align: center; }
+
+/* Toolbar */
+#toolbar {
+  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
+  background: #0f3460; border-bottom: 1px solid #333; flex-wrap: wrap;
+  font-size: 24px;
+}
+.tool-group { display: flex; align-items: center; gap: 4px; padding: 0 6px; border-right: 1px solid #333; }
+.tool-group:last-child { border-right: none; }
+.tool-group.right { margin-left: auto; }
+#toolbar button {
+  padding: 6px 11px; background: #16213e; color: #e0e0e0; border: 1px solid #555;
+  border-radius: 3px; cursor: pointer; font-size: 24px;
+}
+#toolbar button:hover { background: #1a1a5e; border-color: #888; }
+#toolbar button:active { background: #e94560; }
+#btn-download { background: #1b6b1b; border-color: #2a2; }
+#btn-download:hover { background: #2a8a2a; }
+#toolbar label { font-size: 24px; }
+#toolbar input[type="number"] { font-size: 24px; width: 68px; }
+#toolbar input[type="range"] { width: 112px; height: 12px; }
+
+#zoom-slider { width: 112px; vertical-align: middle; }
+#zoom-label { font-size: 21px; color: #aaa; min-width: 38px; display: inline-block; }
+
+/* Shortcut Reference Bar */
+#shortcut-bar {
+  display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 6px 12px;
+  background: #12122a; border-bottom: 1px solid #2a2a4a;
+  font-size: 20px; color: #888;
+}
+#shortcut-bar b { color: #bbb; }
+
+/* Progress Bar */
+#progress-bar-container {
+  position: relative; height: 38px; background: #0a0a1a; border-bottom: 1px solid #333;
+  cursor: pointer; user-select: none;
+}
+#progress-bar-fill {
+  height: 100%; width: 0%; background: linear-gradient(90deg, #e94560, #ff6b6b);
+  transition: none; pointer-events: none;
+}
+#progress-time {
+  position: absolute; top: 0; right: 8px; line-height: 38px;
+  font-size: 15px; color: #aaa; pointer-events: none;
+}
+
+/* Main Canvas */
+#canvas-wrapper {
+  flex: 1; overflow: auto; background: #111; position: relative;
+}
+#canvas-container {
+  position: relative; display: inline-block;
+  transform-origin: top left;
+}
+#score-image {
+  display: block; user-select: none; -webkit-user-drag: none;
+}
+#marker-svg {
+  position: absolute; top: 0; left: 0; pointer-events: none;
+}
+
+/* Markers */
+.marker {
+  pointer-events: all; cursor: pointer;
+  transition: r 0.1s, stroke-width 0.1s;
+}
+.marker:hover { r: 10; }
+.marker.selected { stroke: #ffd700; stroke-width: 3; r: 10; }
+.marker.playback-highlight { stroke: #ff3333; stroke-width: 3; r: 11; fill: rgba(255,50,50,0.9); }
+.marker.modified { stroke: #00ff88; stroke-width: 2.5; filter: drop-shadow(0 0 3px #00ff88); }
+.marker.modified.selected { stroke: #ffd700; stroke-width: 3; filter: drop-shadow(0 0 4px #00ff88); }
+.marker.voice1 { fill: rgba(68, 136, 255, 0.7); stroke: #4488ff; stroke-width: 1; }
+.marker.voice2 { fill: rgba(255, 68, 68, 0.7); stroke: #ff4444; stroke-width: 1; }
+.marker.voice3 { fill: rgba(68, 170, 68, 0.7); stroke: #44aa44; stroke-width: 1; }
+.marker.voice4 { fill: rgba(255, 170, 0, 0.7); stroke: #ffaa00; stroke-width: 1; }
+.marker.rest-marker { fill: rgba(150, 150, 150, 0.4); stroke: #888; stroke-width: 1; r: 6; }
+
+/* Accidental label next to marker */
+.acc-label {
+  pointer-events: none; font-size: 10px; fill: #ffd700; font-weight: bold;
+}
+/* Ghost marker for add mode */
+.ghost-marker {
+  fill: rgba(255, 50, 50, 0.5); stroke: #ff3333; stroke-width: 2.5;
+  stroke-dasharray: 4 2;
+}
+.ghost-label {
+  fill: #ff3333; font-size: 14px; font-weight: bold; opacity: 0.9;
+}
+
+/* Chord Popup */
+#chord-popup {
+  position: absolute; background: #16213e; border: 1px solid #e94560;
+  border-radius: 6px; padding: 6px 0; z-index: 100; min-width: 140px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+}
+#chord-popup.hidden { display: none; }
+#chord-popup-title { padding: 4px 12px; font-size: 11px; color: #aaa; border-bottom: 1px solid #333; }
+#chord-popup-list { list-style: none; }
+#chord-popup-list li {
+  padding: 6px 12px; cursor: pointer; font-size: 13px;
+}
+#chord-popup-list li:hover { background: #0f3460; }
+#chord-popup-list li .voice-dot {
+  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
+}
+
+/* Status Bar */
+#status-bar {
+  display: flex; justify-content: space-between; padding: 5px 12px;
+  background: #16213e; border-top: 1px solid #333; font-size: 19px; color: #aaa;
+}

static/corrector.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<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">
+</head>
+<body>
+
+<!-- Feedback Banner -->
+<div id="feedback-bar">
+  <a id="feedback-btn" href="https://docs.google.com/forms/d/e/1FAIpQLScDoM53RMjDLlftORYHXmZ5kmkN4TTZOIyFIRuVsZhp4RGjEA/viewform" target="_blank" rel="noopener">Feedback</a>
+</div>
+
+<!-- Upload Bar -->
+<div id="upload-bar">
+  <label>Images: <input type="file" id="image-input" accept=".png,.jpg,.jpeg" multiple></label>
+  <label>MusicXML: <input type="file" id="xml-input" accept=".xml,.musicxml,.mxl" multiple></label>
+  <label>DPI: <input type="number" id="dpi-input" value="300" min="72" max="1200" step="1"></label>
+  <button id="load-btn">Load</button>
+  <span id="page-nav">
+    <button id="btn-prev-page" title="Previous Page">&laquo;</button>
+    <span id="page-indicator">-</span>
+    <button id="btn-next-page" title="Next Page">&raquo;</button>
+  </span>
+  <span id="load-status"></span>
+</div>
+
+<!-- Toolbar -->
+<div id="toolbar">
+  <div class="tool-group">
+    <button id="btn-undo" title="Undo (Ctrl+Z)">&#8617;</button>
+    <button id="btn-redo" title="Redo (Ctrl+Y)">&#8618;</button>
+  </div>
+  <div class="tool-group">
+    <button id="btn-up" title="Pitch Up (Arrow Up)">&#9650;</button>
+    <button id="btn-down" title="Pitch Down (Arrow Down)">&#9660;</button>
+  </div>
+  <div class="tool-group">
+    <button id="btn-sharp" title="Sharp (#)">#</button>
+    <button id="btn-flat" title="Flat (b)">b</button>
+    <button id="btn-natural" title="Natural (n)">&#9838;</button>
+    <button id="btn-delete" title="Delete Note (Del)">&#128465;</button>
+  </div>
+  <div class="tool-group">
+    <button id="btn-dur-whole" title="Whole Note (1)">&#119133;</button>
+    <button id="btn-dur-half" title="Half Note (2)">&#119134;</button>
+    <button id="btn-dur-quarter" title="Quarter Note (4)">&#119135;</button>
+    <button id="btn-dur-eighth" title="Eighth Note (5)">&#119136;</button>
+    <button id="btn-dur-16th" title="16th Note (6)">&#119137;</button>
+    <button id="btn-dur-dot" title="Dot Toggle (.)">&#8226;</button>
+  </div>
+  <div class="tool-group">
+    <button id="btn-prev" title="Previous Note (Shift+Tab)">&lt;</button>
+    <button id="btn-next" title="Next Note (Tab)">&gt;</button>
+  </div>
+  <div class="tool-group">
+    <button id="btn-play" title="Play Note Sound">&#9835;</button>
+    <button id="btn-playall" title="Play All (Space)">&#9654;</button>
+    <button id="btn-stop" title="Stop">&#9632;</button>
+    <label>BPM: <input type="number" id="bpm-input" value="120" min="20" max="300" step="5" style="width:94px"></label>
+  </div>
+  <div class="tool-group">
+    <label>Zoom: <input type="range" id="zoom-slider" min="25" max="200" value="100" step="5"><span id="zoom-label">100%</span></label>
+  </div>
+  <div class="tool-group">
+    <label>X off: <input type="number" id="offset-x" value="0" step="1" style="width:84px"></label>
+    <label>Y off: <input type="number" id="offset-y" value="0" step="1" style="width:84px"></label>
+  </div>
+  <div class="tool-group">
+    <label>Staff dist: <input type="number" id="staff-dist-input" value="65" step="1" style="width:84px"></label>
+    <label>Sys dist adj: <input type="number" id="sys-dist-adj" value="0" step="1" style="width:84px"></label>
+  </div>
+  <div class="tool-group">
+    <button id="btn-debug-lines" title="Show/hide staff lines">Staff Lines</button>
+  </div>
+  <div class="tool-group right">
+    <button id="btn-download">Download XML</button>
+  </div>
+</div>
+
+<!-- Progress Bar -->
+<div id="progress-bar-container">
+  <div id="progress-bar-fill"></div>
+  <span id="progress-time">0:00 / 0:00</span>
+</div>
+
+<!-- Shortcut Reference -->
+<div id="shortcut-bar">
+  <span><b>Select:</b> Click / Tab</span>
+  <span><b>Pitch:</b> ↑↓ / Drag</span>
+  <span><b>#/b/n:</b> Accidental</span>
+  <span><b>1/2/4/5/6:</b> Duration</span>
+  <span><b>.</b> Dot</span>
+  <span><b>Del:</b> Delete</span>
+  <span><b>r:</b> Note↔Rest</span>
+  <span><b>Shift+N:</b> Add Mode</span>
+  <span><b>Shift+A:</b> Add Chord</span>
+  <span><b>Space:</b> Play</span>
+  <span><b>Shift+Click:</b> Seek</span>
+  <span><b>DblClick:</b> Seek+Play</span>
+  <span><b>PgUp/Dn:</b> Page</span>
+  <span><b>Ctrl+Z/Y:</b> Undo/Redo</span>
+</div>
+
+<!-- Main Canvas Area -->
+<div id="canvas-wrapper">
+  <div id="canvas-container">
+    <img id="score-image" alt="Score image">
+    <svg id="marker-svg" xmlns="http://www.w3.org/2000/svg"></svg>
+  </div>
+</div>
+
+<!-- Chord Popup -->
+<div id="chord-popup" class="hidden">
+  <div id="chord-popup-title">Select note:</div>
+  <ul id="chord-popup-list"></ul>
+</div>
+
+<!-- Status Bar -->
+<div id="status-bar">
+  <span id="status-mode" style="color:#ffff66;font-weight:bold;"></span>
+  <span id="status-selection">No selection</span>
+  <span id="status-total"></span>
+</div>
+
+<script src="corrector.js"></script>
+</body>
+</html>