<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Perfect Pixel Local Studio</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='atlas.css') }}">
    <script defer src="{{ url_for('static', filename='app.js') }}"></script>
    <script defer src="{{ url_for('static', filename='atlas.js') }}"></script>
  </head>
  <body>
    <div class="ambient ambient-a" aria-hidden="true"></div>
    <div class="ambient ambient-b" aria-hidden="true"></div>

    <div class="page-shell">
      <header class="hero">
        <div class="hero-copyblock">
          <p class="eyebrow">Perfect Pixel · Local Studio</p>
          <h1>本地像素生成网站</h1>
          <p class="hero-copy">
            上传一张图片，手动设置输出画布的宽高，或者继续使用自动识别。
            生成后的像素图可以直接预览并下载成 PNG。
          </p>
        </div>

        <div class="hero-badges" aria-label="特性概览">
          <span class="hero-badge">本地运行</span>
          <span class="hero-badge">自定义画布尺寸</span>
          <span class="hero-badge">像素级预览</span>
          <a class="hero-badge hero-badge-link" href="{{ url_for('transparent_studio') }}">透明背景工作台</a>
        </div>
      </header>

      <main class="workspace">
        <section id="quickStartPanel" class="card quick-start-card">
          <div class="quick-start-head">
            <div>
              <p class="eyebrow">Quick Flow</p>
              <h2>快速生成区</h2>
              <p class="quick-start-copy">
                把常用的 1 - 5 步收在顶部：上传、设尺寸、生成、导出并切片、直接下载。下面完整流程保持不变，顶部只做更简洁的一键操作。
              </p>
            </div>

            <a class="ghost-button quick-start-link" href="#pixelForm">查看下方完整步骤</a>
          </div>

          <div class="quick-start-grid">
            <article id="quickUploadStep" class="quick-step" data-workflow-state="idle">
              <div class="quick-step-head">
                <span class="quick-step-index">1</span>
                <div>
                  <h3>上传图片</h3>
                  <p>选择图片后会直接联动下方主生成流程，也支持把图片直接拖到这里。</p>
                </div>
                <span id="quickUploadStepState" class="quick-step-status" data-state="idle">待上传</span>
              </div>

              <div class="quick-step-body">
                <input
                  id="quickImageInput"
                  class="quick-hidden-input"
                  type="file"
                  accept=".png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp"
                >
                <div id="quickUploadDropzone" class="quick-upload-dropzone" role="button" tabindex="0">
                  <span class="quick-upload-kicker">拖拽上传</span>
                  <button id="quickSelectImageButton" class="ghost-button" type="button">选择图片</button>
                  <p class="quick-upload-tip">也可以把图片直接拖到这里，松开后会自动载入。</p>

                  <div class="quick-meta-stack">
                    <span id="quickUploadName" class="meta-pill subtle-pill">还没有选择图片</span>
                    <span id="quickUploadMeta" class="meta-pill subtle-pill">支持 PNG / JPG / JPEG / WebP</span>
                  </div>
                </div>
              </div>
            </article>

            <article id="quickSizeStep" class="quick-step" data-workflow-state="idle">
              <div class="quick-step-head">
                <span class="quick-step-index">2</span>
                <div>
                  <h3>输出尺寸</h3>
                  <p>保留最常用的手动尺寸和自动识别，快速生成时不用再翻下面的完整参数。</p>
                </div>
                <span id="quickSizeStepState" class="quick-step-status" data-state="idle">待设置</span>
              </div>

              <div class="quick-step-body">
                <div class="quick-choice-row" role="radiogroup" aria-label="快速输出尺寸模式">
                  <label class="quick-choice-pill">
                    <input type="radio" name="quick_size_mode" value="manual" checked>
                    <span>手动尺寸</span>
                  </label>
                  <label class="quick-choice-pill">
                    <input type="radio" name="quick_size_mode" value="auto">
                    <span>自动识别</span>
                  </label>
                </div>

                <div class="quick-inline-grid">
                  <label class="text-field">
                    <span>宽度</span>
                    <input id="quickWidthInput" type="number" min="1" value="1024">
                  </label>
                  <label class="text-field">
                    <span>高度</span>
                    <input id="quickHeightInput" type="number" min="1" value="1024">
                  </label>
                </div>

                <div class="quick-preset-row quick-size-preset-row" aria-label="快速尺寸预设">
                  <button type="button" class="quick-preset-chip quick-size-preset" data-width="32" data-height="32">32 x 32</button>
                  <button type="button" class="quick-preset-chip quick-size-preset" data-width="64" data-height="64">64 x 64</button>
                  <button type="button" class="quick-preset-chip quick-size-preset" data-width="128" data-height="128">128 x 128</button>
                  <button type="button" class="quick-preset-chip quick-size-preset" data-width="1024" data-height="1024">1024 x 1024</button>
                </div>

                <div class="quick-toggle-stack">
                  <label id="quickFitContentBoundsChip" class="toggle-chip quick-toggle-chip" for="quickFitContentBoundsToggle">
                    <input id="quickFitContentBoundsToggle" type="checkbox">
                    <span class="toggle-chip-indicator" aria-hidden="true"></span>
                    <span class="toggle-chip-label">先识别有效范围，再压缩到目标尺寸</span>
                  </label>
                </div>

                <p id="quickSizeHint" class="inline-note">当前将按 1024 x 1024 生成像素结果。</p>
              </div>
            </article>

            <article id="quickGenerateStep" class="quick-step" data-workflow-state="idle">
              <div class="quick-step-head">
                <span class="quick-step-index">3</span>
                <div>
                  <h3>一键生成</h3>
                  <p>顶部直接复用下方原有生成逻辑，生成后会自动送到图集切片模块。</p>
                </div>
                <span id="quickGenerateStepState" class="quick-step-status" data-state="idle">待生成</span>
              </div>

              <div class="quick-step-body">
                <div class="quick-inline-grid">
                  <label class="text-field">
                    <span>采样方式</span>
                    <select id="quickSampleMethod">
                      <option value="center">center</option>
                      <option value="majority">majority</option>
                      <option value="median">median</option>
                    </select>
                  </label>
                  <label class="text-field">
                    <span>细化强度</span>
                    <input id="quickRefineInput" type="number" min="0" max="0.5" step="0.05" value="0.25">
                  </label>
                </div>

                <div class="quick-toggle-stack">
                  <label id="quickTransparentBackgroundChip" class="toggle-chip quick-toggle-chip" for="quickTransparentBackgroundToggle">
                    <input id="quickTransparentBackgroundToggle" type="checkbox" checked>
                    <span class="toggle-chip-indicator" aria-hidden="true"></span>
                    <span class="toggle-chip-label">把背景色转成透明</span>
                  </label>
                </div>

                <div class="quick-step-action">
                <button id="quickGenerateButton" class="primary-button" type="button">一键生成像素图</button>
                </div>
                <p class="inline-note">顶部点生成时不会自动把页面滚到下面，完整预览和高级参数仍然保留。</p>
              </div>
            </article>

            <article id="quickSliceStep" class="quick-step" data-workflow-state="idle">
              <div class="quick-step-head">
                <span class="quick-step-index">4</span>
                <div>
                  <h3>导出并切片</h3>
                  <p>把导出类型和切片操作合并在同一步，减少顶部重复切换和重复点击。</p>
                </div>
                <span id="quickSliceStepState" class="quick-step-status" data-state="idle">待切片</span>
              </div>

              <div class="quick-step-body">
                <div class="quick-choice-row" role="radiogroup" aria-label="快速导出类型">
                  <label class="quick-choice-pill">
                    <input type="radio" name="quick_export_mode" value="original">
                    <span>原图切片</span>
                  </label>
                  <label class="quick-choice-pill">
                    <input type="radio" name="quick_export_mode" value="pixel" checked>
                    <span>像素结果</span>
                  </label>
                </div>

                <div id="quickPixelExportPanel" class="quick-export-size-panel is-hidden">
                  <div id="quickPixelExportFields" class="quick-inline-grid quick-export-fields">
                    <label class="text-field">
                      <span>单张宽度</span>
                      <input id="quickPixelWidthInput" type="number" min="1" value="16">
                    </label>
                    <label class="text-field">
                      <span>单张高度</span>
                      <input id="quickPixelHeightInput" type="number" min="1" value="16">
                    </label>
                  </div>
                  <div id="quickSlicePresetRow" class="quick-preset-row quick-slice-preset-row" aria-label="快速切片尺寸预设">
                    <button type="button" class="quick-preset-chip quick-slice-preset" data-size="16">16 x 16</button>
                    <button type="button" class="quick-preset-chip quick-slice-preset" data-size="32">32 x 32</button>
                    <button type="button" class="quick-preset-chip quick-slice-preset" data-size="64">64 x 64</button>
                  </div>
                  <p class="inline-note quick-square-size-note">点击预设会同时设置宽度和高度。</p>
                </div>

                <div class="quick-split-actions">
                  <button id="quickSlicePixelButton" class="ghost-button" type="button">快捷切像素</button>
                </div>
                <button id="quickSliceButton" class="primary-button quick-secondary-action" type="button">按当前导出类型切片</button>
                <p class="inline-note">先选导出类型；如果想跳过选择，也可以直接点上面的两个快捷切片按钮。</p>
              </div>
            </article>

            <article id="quickDownloadStep" class="quick-step" data-workflow-state="idle">
              <div class="quick-step-head">
                <span class="quick-step-index">5</span>
                <div>
                  <h3>下载结果</h3>
                  <p>生成和切片完成后，顶部这里会直接启用可下载结果，不用再往下滑。</p>
                </div>
                <span id="quickDownloadStepState" class="quick-step-status" data-state="idle">待下载</span>
              </div>

              <div class="quick-step-body quick-step-action">
                <div class="quick-download-actions quick-download-actions-inline">
                  <a id="quickResultDownloadLink" class="ghost-button disabled" href="#" download>下载结果 PNG</a>
                  <a id="quickProcessedDownloadLink" class="ghost-button disabled" href="#" download>下载压缩后整图 PNG</a>
                  <a id="quickZipDownloadLink" class="primary-button disabled" href="#" download>下载切片 ZIP</a>
                </div>
                <p class="inline-note">结果 PNG、压缩后整图 PNG、切片 ZIP 会按完成状态自动启用。</p>
              </div>
            </article>
          </div>

          <div class="quick-flow-strip" aria-label="快速流程图片预览">
            <article class="quick-flow-card">
              <div class="quick-flow-card-head">
                <span class="quick-flow-step">步骤 1</span>
                <strong>原图</strong>
              </div>
              <div id="quickFlowSourceStage" class="quick-flow-stage">
                <img id="quickFlowSourceImage" class="quick-flow-image" alt="步骤1 原图预览">
                <span id="quickFlowSourcePlaceholder" class="quick-flow-placeholder">等待上传</span>
              </div>
            </article>

            <span class="quick-flow-arrow" aria-hidden="true">→</span>

            <article class="quick-flow-card">
              <div class="quick-flow-card-head">
                <span class="quick-flow-step">步骤 3</span>
                <strong>像素结果</strong>
              </div>
              <div id="quickFlowResultStage" class="quick-flow-stage">
                <img id="quickFlowResultImage" class="quick-flow-image" alt="步骤3 像素结果预览">
                <span id="quickFlowResultPlaceholder" class="quick-flow-placeholder">等待生成</span>
              </div>
            </article>

            <span class="quick-flow-arrow" aria-hidden="true">→</span>

            <article class="quick-flow-card">
              <div class="quick-flow-card-head">
                <span class="quick-flow-step">步骤 5</span>
                <strong>最终导出</strong>
              </div>
              <div id="quickFlowFinalStage" class="quick-flow-stage">
                <img id="quickFlowFinalImage" class="quick-flow-image" alt="步骤5 最终导出预览">
                <span id="quickFlowFinalPlaceholder" class="quick-flow-placeholder">等待导出</span>
              </div>
            </article>
          </div>
        </section>


        <section class="card controls-card">
          <form id="pixelForm" class="control-stack">
            <div class="field-block">
              <div class="field-heading">
                <span class="field-index">01</span>
                <div>
                  <h2>上传图片</h2>
                  <p>支持 PNG、JPG、JPEG、WebP，透明背景会自动铺白底。</p>
                </div>
              </div>

              <label id="uploadDropzone" class="upload-dropzone" for="imageInput">
                <input
                  id="imageInput"
                  name="image"
                  type="file"
                  accept=".png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp"
                  required
                >
                <span class="upload-kicker">拖拽上传</span>
                <span class="upload-title">点击选择图片，或直接把图片拖到这里</span>
                <span class="upload-subtitle">松开鼠标后会自动载入预览，不需要再单独确认。</span>

                <div class="upload-meta">
                  <span id="uploadFilename" class="meta-pill subtle-pill">当前还没有选择图片</span>
                  <span id="uploadFileMeta" class="meta-pill subtle-pill">支持 PNG、JPG、JPEG、WebP</span>
                </div>

                <div id="uploadProgress" class="upload-progress" aria-live="polite">
                  <div class="progress-track">
                    <span id="uploadProgressBar" class="progress-fill"></span>
                  </div>
                  <p id="uploadProgressLabel" class="progress-label">等待上传</p>
                </div>
              </label>
            </div>

            <div class="field-block">
              <div class="field-heading">
                <span class="field-index">02</span>
                <div>
                  <h2>输出画布大小</h2>
                  <p>手动尺寸时，宽高就是最终生成的像素格数量。</p>
                </div>
              </div>

              <div class="mode-switch" role="radiogroup" aria-label="输出尺寸模式">
                <label class="mode-pill">
                  <input type="radio" name="size_mode" value="manual" checked>
                  <span class="mode-pill-indicator" aria-hidden="true"></span>
                  <span class="mode-pill-label">
                    <strong>手动尺寸</strong>
                    <small>按指定宽高生成</small>
                  </span>
                </label>
                <label class="mode-pill">
                  <input type="radio" name="size_mode" value="auto">
                  <span class="mode-pill-indicator" aria-hidden="true"></span>
                  <span class="mode-pill-label">
                    <strong>自动识别</strong>
                    <small>自动推断像素网格</small>
                  </span>
                </label>
              </div>

              <div class="dimension-grid">
                <label class="text-field">
                  <span>宽度</span>
                  <input id="widthInput" name="output_width" type="number" min="1" value="1024">
                </label>
                <label class="text-field">
                  <span>高度</span>
                  <input id="heightInput" name="output_height" type="number" min="1" value="1024">
                </label>
              </div>

              <div class="preset-row" aria-label="尺寸预设">
                <button type="button" class="preset-chip" data-width="16" data-height="16">16 x 16</button>
                <button type="button" class="preset-chip" data-width="32" data-height="32">32 x 32</button>
                <button type="button" class="preset-chip" data-width="48" data-height="48">48 x 48</button>
                <button type="button" class="preset-chip" data-width="64" data-height="64">64 x 64</button>
              </div>

              <div class="option-chip-row">
                <label id="fitContentBoundsChip" class="toggle-chip option-toggle-chip" for="fitContentBoundsToggle">
                  <input id="fitContentBoundsToggle" name="fit_content_bounds" type="checkbox">
                  <span class="toggle-chip-indicator" aria-hidden="true"></span>
                  <span class="toggle-chip-label">先自动识别图片有效范围，再压缩到目标尺寸</span>
                </label>
              </div>

              <p class="inline-note" id="sizeSummary">当前准备生成 1024 x 1024 的像素画布。</p>
            </div>

            <div class="field-block">
              <div class="field-heading">
                <span class="field-index">03</span>
                <div>
                  <h2>生成参数</h2>
                  <p>默认参数已经够用，想要微调也可以直接改。</p>
                </div>
              </div>

              <div class="dimension-grid">
                <label class="text-field">
                  <span>采样方式</span>
                  <select name="sample_method" id="sampleMethod">
                    <option value="center">center</option>
                    <option value="majority">majority</option>
                    <option value="median">median</option>
                  </select>
                </label>
                <label class="text-field">
                  <span>细化强度</span>
                  <input id="refineInput" name="refine_intensity" type="number" min="0" max="0.5" step="0.05" value="0.25">
                </label>
              </div>

              <div class="option-chip-row">
                <label id="transparentBackgroundChip" class="toggle-chip option-toggle-chip" for="transparentBackgroundToggle">
                  <input id="transparentBackgroundToggle" name="transparent_background" type="checkbox" checked>
                  <span class="toggle-chip-indicator" aria-hidden="true"></span>
                  <span class="toggle-chip-label">把背景色转成透明</span>
                </label>
              </div>

              <p id="generationSummary" class="inline-note">默认会保留已有透明通道，并尽量把边缘背景色转成透明。</p>
            </div>

            <div class="action-row">
              <button id="generateButton" class="primary-button" type="submit">生成像素图</button>

              <div class="form-status">
                <p id="statusText" class="status-badge status-idle">等待上传图片</p>
                <p id="formStatusDetail" class="status-detail">准备好图片后，就可以开始生成。</p>
              </div>
            </div>
          </form>
        </section>

        <section class="card preview-card">
          <div class="preview-topbar">
            <div>
              <p class="eyebrow">Preview</p>
              <h2>结果预览</h2>
              <p class="preview-copy">左边看原图，右边看像素结果。生成后可以快速切换倍率，也可以一键适应当前窗口。</p>
            </div>

            <div class="preview-controls">
              <div class="zoom-toolbar">
                <button type="button" class="zoom-chip" data-zoom-action="fit">适应窗口</button>
                <button type="button" class="zoom-chip" data-zoom="6">6x</button>
                <button type="button" class="zoom-chip" data-zoom="12">12x</button>
                <button type="button" class="zoom-chip" data-zoom="20">20x</button>
              </div>

              <label class="zoom-control" for="zoomRange">
                <span>预览倍率</span>
                <div class="zoom-range-wrap">
                  <input id="zoomRange" type="range" min="1" max="32" value="12">
                </div>
                <strong id="zoomValue">12x</strong>
              </label>
            </div>
          </div>

          <div class="preview-grid">
            <article class="preview-panel">
              <div class="panel-head">
                <div>
                  <h3>原图</h3>
                  <span>上传后会自动显示完整预览</span>
                </div>

                <div class="meta-pills">
                  <span id="sourceMeta" class="meta-pill subtle-pill">还没有选择图片</span>
                </div>
              </div>

              <div class="preview-stage source-stage">
                <div class="stage-artboard source-artboard">
                  <img id="sourcePreview" alt="原图预览">
                  <div id="sourcePlaceholder" class="placeholder">
                    选择图片后，这里会显示原图预览。
                  </div>
                </div>
              </div>
            </article>

            <article class="preview-panel">
              <div class="panel-head">
                <div>
                  <h3>像素结果</h3>
                  <span>生成后可放大查看每个像素块</span>
                </div>

                <div class="meta-pills">
                  <span id="resultMeta" class="meta-pill">等待生成</span>
                </div>
              </div>

              <div id="resultViewport" class="preview-stage result-stage">
                <div id="resultArtboard" class="stage-artboard result-artboard">
                  <div id="resultCanvasShell" class="result-canvas-shell">
                    <canvas id="resultCanvas"></canvas>
                    <div id="selectionOverlay" class="selection-overlay" aria-hidden="true">
                      <div id="selectionBox" class="selection-box"></div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="stage-footbar">
                <p id="resultHint" class="stage-note">生成后可以拖动滚动条查看放大细节。</p>

                <div class="meta-pills">
                  <span id="resultZoomMeta" class="meta-pill subtle-pill">当前 12x</span>
                </div>
              </div>
            </article>
          </div>

          <section class="transparent-export">
            <div class="transparent-export-head">
              <div>
                <p class="eyebrow">Transparent Export</p>
                <h3>透明背景微调</h3>
                <p class="preview-copy">
                  现在生成结果本身默认就是透明背景 PNG。
                  这里保留给你做局部微调用：如果还想只清理某个区域的白底，可以在右侧预览里框选范围后再导出一次。
                </p>
              </div>

              <label id="selectionModeChip" class="toggle-chip" for="selectionModeToggle">
                <input id="selectionModeToggle" type="checkbox">
                <span class="toggle-chip-indicator" aria-hidden="true"></span>
                <span class="toggle-chip-label">框选区域</span>
              </label>
            </div>

            <div class="transparent-toolbar">
              <label class="compact-range" for="alphaThreshold">
                <span>去白阈值</span>
                <input id="alphaThreshold" type="range" min="200" max="255" value="245">
                <strong id="alphaThresholdValue">245</strong>
              </label>

              <button id="clearSelectionButton" class="ghost-button" type="button">清除选区</button>
              <button id="downloadTransparentButton" class="primary-button secondary-primary" type="button" hidden>导出微调后的 PNG</button>
            </div>

            <p id="selectionSummary" class="inline-note">
              当前范围：整张结果。默认下载已经是透明背景；这里仅用于局部重新去背和微调。
            </p>
          </section>

          <div class="download-row">
            <a id="downloadLink" class="ghost-button disabled" href="#" download>下载结果 PNG</a>
            <p class="inline-note" id="downloadHint">生成完成后会自动启用下载按钮。</p>
          </div>
        </section>

        <section class="card atlas-card">
          <div class="atlas-topbar">
            <div>
              <p class="eyebrow">Texture Atlas</p>
              <h2>图集自动识别切片</h2>
              <p class="preview-copy">
                系统会优先使用自动特征匹配与图像分割机制，自动识别图中所有同尺寸小图，自动定位边界、
                自动对齐并批量导出独立 PNG 和 ZIP。只有在极少数特殊图集下，才需要打开高级设置手动兜底。
              </p>
            </div>
          </div>

          <div class="atlas-layout">
            <form id="atlasForm" class="atlas-form" novalidate>
              <input id="atlasSliceMode" name="slice_mode" type="hidden" value="auto">

              <div class="field-block">
                <div class="field-heading">
                  <span class="field-index">04</span>
                  <div>
                    <h2>上传图集</h2>
                    <p>支持 PNG、JPG、JPEG、WebP。推荐使用带 Alpha 的 PNG 图集。</p>
                  </div>
                </div>

                <label id="atlasUploadDropzone" class="upload-dropzone atlas-upload-dropzone" for="atlasInput">
                  <input
                    id="atlasInput"
                    name="atlas"
                    type="file"
                    accept=".png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp"
                    required
                  >
                  <span class="upload-kicker">Sprite Slicing</span>
                  <span class="upload-title">点击选择图集，或直接把图集拖到这里</span>
                  <span class="upload-subtitle">上传后会在右侧显示完整预览，方便核对切片范围。</span>

                  <div class="upload-meta">
                    <span id="atlasUploadFilename" class="meta-pill subtle-pill">当前还没有选择图集</span>
                    <span id="atlasUploadFileMeta" class="meta-pill subtle-pill">默认规则：8 x 8，无边距，无间距</span>
                  </div>

                  <div id="atlasUploadProgress" class="upload-progress" aria-live="polite">
                    <div class="progress-track">
                      <span id="atlasUploadProgressBar" class="progress-fill"></span>
                    </div>
                    <p id="atlasUploadProgressLabel" class="progress-label">等待上传</p>
                  </div>
                </label>
              </div>

              <div class="field-block">
                <div class="field-heading">
                  <span class="field-index">05</span>
                  <div>
                    <h2>自动识别模式</h2>
                    <p>默认直接自动分析，不需要你手动输入行列、尺寸和间距。</p>
                  </div>
                </div>

                <div class="mode-switch atlas-mode-switch" role="radiogroup" aria-label="图集切片模式">
                  <label class="mode-pill atlas-mode-pill">
                    <input type="radio" name="atlas_mode_ui" value="auto" checked>
                    <span class="mode-pill-indicator" aria-hidden="true"></span>
                    <span class="mode-pill-label">
                      <strong>自动识别</strong>
                      <small>自动分割、自动对齐、自动导出</small>
                    </span>
                  </label>

                  <label class="mode-pill atlas-mode-pill">
                    <input type="radio" name="atlas_mode_ui" value="manual">
                    <span class="mode-pill-indicator" aria-hidden="true"></span>
                    <span class="mode-pill-label">
                      <strong>高级手动</strong>
                      <small>仅在特殊图集下作为兜底</small>
                    </span>
                  </label>
                </div>

                <div class="atlas-auto-points">
                  <p class="atlas-auto-point">自动识别所有相同大小的小图片，不需要预先知道行列数。</p>
                  <p class="atlas-auto-point">自动基于图像分割与边界特征定位每个小图的有效区域。</p>
                  <p class="atlas-auto-point">自动统一导出尺寸，并按从上到下、从左到右的顺序命名。</p>
                </div>

                <p id="atlasModeSummary" class="inline-note">
                  当前模式：自动识别。上传图集后，点击按钮即可自动分割全部小图并导出 ZIP。
                </p>

                <div class="atlas-section-block atlas-export-block">
                  <h4 class="atlas-section-title">导出结果类型</h4>
                  <div class="mode-switch atlas-export-mode-switch" aria-label="图集导出结果类型">
                    <label class="mode-pill atlas-export-mode-pill">
                      <input type="radio" name="export_mode" value="original">
                      <span class="mode-pill-indicator" aria-hidden="true"></span>
                      <span class="mode-pill-label">
                        <strong>原图切片</strong>
                        <small>直接导出识别后的原始小图</small>
                      </span>
                    </label>
                    <label class="mode-pill atlas-export-mode-pill">
                      <input type="radio" name="export_mode" value="pixel" checked>
                      <span class="mode-pill-indicator" aria-hidden="true"></span>
                      <span class="mode-pill-label">
                        <strong>像素结果</strong>
                        <small>先自动切片，再按单张尺寸生成像素结果</small>
                      </span>
                    </label>
                  </div>

                  <div id="atlasPixelExportPanel" class="atlas-export-size-panel is-hidden">
                    <div id="atlasPixelOptions" class="atlas-grid atlas-grid-2 atlas-export-options">
                      <label class="text-field">
                        <span>像素结果宽度</span>
                        <input id="atlasPixelOutputWidth" name="pixel_output_width" type="number" min="1" value="16" placeholder="例如 16 / 32 / 64">
                      </label>
                      <label class="text-field">
                        <span>像素结果高度</span>
                        <input id="atlasPixelOutputHeight" name="pixel_output_height" type="number" min="1" value="16" placeholder="例如 16 / 32 / 64">
                      </label>
                    </div>
                    <div id="atlasPixelPresetRow" class="preset-row atlas-preset-row atlas-pixel-preset-row" aria-label="图集导出尺寸预设">
                      <button type="button" class="preset-chip atlas-pixel-preset" data-size="16">16 x 16</button>
                      <button type="button" class="preset-chip atlas-pixel-preset" data-size="32">32 x 32</button>
                      <button type="button" class="preset-chip atlas-pixel-preset" data-size="64">64 x 64</button>
                    </div>
                    <p class="inline-note atlas-square-size-note">点击预设会同时设置宽度和高度。</p>
                  </div>
                  <input name="pixel_sample_method" type="hidden" value="center">
                  <input name="pixel_refine_intensity" type="hidden" value="0.25">
                  <p class="inline-note atlas-manual-note">
                    新流程支持反向使用：图集自动识别切片 -> 像素结果 -> 原图来源。
                    如果你想把每张小图统一生成成 `32 x 32` 这样的目标尺寸，就切到“像素结果”并填写宽高。
                  </p>
                </div>

                <div id="atlasAdvancedPanel" class="atlas-advanced-panel is-hidden">
                  <div class="atlas-advanced-head">
                    <h3>高级兜底设置</h3>
                    <p>只有自动识别不理想时，再切换到这里手动微调。</p>
                  </div>

                  <div class="atlas-section-block">
                    <h4 class="atlas-section-title">手动切片类型</h4>
                    <div class="mode-switch atlas-manual-mode-switch" aria-label="手动切片类型">
                      <label class="mode-pill atlas-manual-mode-pill">
                        <input type="radio" name="atlas_manual_mode_ui" value="grid" checked>
                        <span class="mode-pill-indicator" aria-hidden="true"></span>
                        <span class="mode-pill-label">
                          <strong>按行列切片</strong>
                          <small>直接填写行数和列数</small>
                        </span>
                      </label>
                      <label class="mode-pill atlas-manual-mode-pill">
                        <input type="radio" name="atlas_manual_mode_ui" value="cell_size">
                        <span class="mode-pill-indicator" aria-hidden="true"></span>
                        <span class="mode-pill-label">
                          <strong>按单张尺寸反推</strong>
                          <small>填写单格宽高，自动反推行列</small>
                        </span>
                      </label>
                    </div>
                    <p class="inline-note atlas-manual-note">
                      逆向模式会根据单格宽高、边距、间距和切片区域，自动反推出整张图该切成多少行和多少列。
                    </p>
                  </div>

                  <div class="atlas-section-block">
                    <h4 class="atlas-section-title">手动网格切片</h4>
                    <div class="preset-row atlas-preset-row" aria-label="图集网格预设">
                      <button type="button" class="preset-chip atlas-grid-preset" data-rows="8" data-cols="8">8 x 8 默认</button>
                      <button type="button" class="preset-chip atlas-grid-preset" data-rows="4" data-cols="4">4 x 4</button>
                      <button type="button" class="preset-chip atlas-grid-preset" data-rows="16" data-cols="16">16 x 16</button>
                    </div>

                    <div class="atlas-grid atlas-grid-4">
                      <label class="text-field">
                        <span>行数</span>
                        <input id="atlasRows" name="rows" type="number" min="1" value="8">
                      </label>
                      <label class="text-field">
                        <span>列数</span>
                        <input id="atlasCols" name="cols" type="number" min="1" value="8">
                      </label>
                      <label class="text-field">
                        <span>起始 X</span>
                        <input id="atlasOriginX" name="origin_x" type="number" min="0" value="0">
                      </label>
                      <label class="text-field">
                        <span>起始 Y</span>
                        <input id="atlasOriginY" name="origin_y" type="number" min="0" value="0">
                      </label>
                    </div>

                    <div class="atlas-grid atlas-grid-3">
                      <label class="text-field">
                        <span>切片区域宽度</span>
                        <input id="atlasRegionWidth" name="region_width" type="number" min="1" placeholder="留空则用整张图剩余宽度">
                      </label>
                      <label class="text-field">
                        <span>切片区域高度</span>
                        <input id="atlasRegionHeight" name="region_height" type="number" min="1" placeholder="留空则用整张图剩余高度">
                      </label>
                      <label class="text-field">
                        <span>命名起始序号</span>
                        <input id="atlasIndexBase" name="index_base" type="number" value="0">
                      </label>
                    </div>

                    <div class="atlas-grid atlas-grid-2">
                      <label class="text-field">
                        <span>单格宽度</span>
                        <input id="atlasCellWidth" name="cell_width" type="number" min="0" step="0.01" placeholder="反推模式必填；按行列模式可留空">
                      </label>
                      <label class="text-field">
                        <span>单格高度</span>
                        <input id="atlasCellHeight" name="cell_height" type="number" min="0" step="0.01" placeholder="反推模式必填；按行列模式可留空">
                      </label>
                    </div>
                    <p class="inline-note atlas-manual-note">
                      如果你知道最后每张切片应该是多大，比如 `32 x 32`，就切到“按单张尺寸反推”，填这里的单格宽高即可。
                    </p>
                  </div>

                  <div class="atlas-section-block">
                    <h4 class="atlas-section-title">自动识别微调</h4>
                    <div class="atlas-grid atlas-grid-3">
                      <label class="text-field">
                        <span>自动连接半径</span>
                        <input id="atlasAutoCloseRadius" name="auto_close_radius" type="number" min="0" value="6">
                      </label>
                      <label class="text-field">
                        <span>最小识别面积</span>
                        <input id="atlasAutoMinArea" name="auto_min_area" type="number" min="0" value="24">
                      </label>
                      <label class="text-field">
                        <span>导出留白</span>
                        <input id="atlasAutoPadding" name="auto_padding" type="number" min="0" value="2">
                      </label>
                    </div>

                    <div class="atlas-grid atlas-grid-2">
                      <label class="text-field">
                        <span>横向间距</span>
                        <input id="atlasSpacingX" name="spacing_x" type="number" min="0" value="0">
                      </label>
                      <label class="text-field">
                        <span>纵向间距</span>
                        <input id="atlasSpacingY" name="spacing_y" type="number" min="0" value="0">
                      </label>
                    </div>

                    <div class="atlas-grid atlas-grid-4">
                      <label class="text-field">
                        <span>左边距</span>
                        <input id="atlasMarginLeft" name="margin_left" type="number" min="0" value="0">
                      </label>
                      <label class="text-field">
                        <span>上边距</span>
                        <input id="atlasMarginTop" name="margin_top" type="number" min="0" value="0">
                      </label>
                      <label class="text-field">
                        <span>右边距</span>
                        <input id="atlasMarginRight" name="margin_right" type="number" min="0" value="0">
                      </label>
                      <label class="text-field">
                        <span>下边距</span>
                        <input id="atlasMarginBottom" name="margin_bottom" type="number" min="0" value="0">
                      </label>
                    </div>

                    <div class="atlas-toggle-row">
                      <label id="visualBoundaryChip" class="toggle-chip" for="visualBoundaryMatch">
                        <input id="visualBoundaryMatch" name="visual_boundary_match" type="checkbox">
                        <span class="toggle-chip-indicator" aria-hidden="true"></span>
                        <span class="toggle-chip-label">视觉边界匹配</span>
                      </label>

                      <p class="inline-note atlas-toggle-note">
                        开启后会在每个切片窗口内搜索前景内容，并尽量围绕可见纹理重新居中，更适合不规则素材。
                      </p>
                    </div>

                    <div class="atlas-grid atlas-grid-3">
                      <label class="text-field">
                        <span>搜索补边</span>
                        <input id="atlasSearchPadding" name="visual_search_padding" type="number" min="0" value="4">
                      </label>
                      <label class="text-field">
                        <span>颜色阈值</span>
                        <input id="atlasColorThreshold" name="color_threshold" type="number" min="0" value="18">
                      </label>
                      <label class="text-field">
                        <span>透明阈值</span>
                        <input id="atlasAlphaThreshold" name="alpha_threshold" type="number" min="0" value="8">
                      </label>
                    </div>
                  </div>
                </div>
              </div>

              <div class="action-row">
                <button id="sliceAtlasButton" class="primary-button" type="submit">自动识别并导出 ZIP</button>

                <div class="form-status atlas-form-status">
                  <p id="atlasStatusText" class="status-badge status-idle">等待上传图集</p>
                  <p id="atlasStatusDetail" class="status-detail">默认会自动识别全部小图，自动排序后导出独立 PNG 与 ZIP。</p>
                </div>
              </div>
            </form>

            <aside class="atlas-side">
              <article class="preview-panel atlas-preview-panel">
                <div class="panel-head">
                  <div>
                    <h3>图集预览</h3>
                    <span>上传后会显示完整图集，方便核对尺寸与切片区域。</span>
                  </div>

                  <div class="meta-pills">
                    <span id="atlasSourceMeta" class="meta-pill subtle-pill">尚未选择图集</span>
                  </div>
                </div>

                <div class="preview-stage atlas-preview-stage">
                  <div class="stage-artboard atlas-artboard">
                    <img id="atlasPreviewImage" alt="图集预览">
                    <div id="atlasPreviewPlaceholder" class="placeholder">
                      上传图集后，这里会显示完整预览，方便你确认默认 8 x 8 或自定义切片规则。
                    </div>
                  </div>
                </div>
              </article>

              <article class="preview-panel atlas-summary-panel">
                <div class="panel-head">
                  <div>
                    <h3>切片结果</h3>
                    <span>生成后会显示切片数量、尺寸分布和 ZIP 下载入口。</span>
                  </div>

                  <div class="meta-pills">
                    <span id="atlasResultMeta" class="meta-pill">等待切片</span>
                  </div>
                </div>

                <div class="atlas-summary-grid">
                  <div class="atlas-summary-item">
                    <span>切片数量</span>
                    <strong id="atlasSliceCount">-</strong>
                  </div>
                  <div class="atlas-summary-item">
                    <span>识别行列</span>
                    <strong id="atlasDetectedGrid">-</strong>
                  </div>
                  <div class="atlas-summary-item">
                    <span>尺寸分布</span>
                    <strong id="atlasSliceSize">-</strong>
                  </div>
                  <div class="atlas-summary-item">
                    <span>命名范围</span>
                    <strong id="atlasSliceNames">-</strong>
                  </div>
                </div>

                <p id="atlasSummaryText" class="inline-note">
                  上传图集后就可以直接自动识别。系统会优先尝试无手动参数的自动分割流程。
                </p>

                <div class="download-row atlas-download-row">
                  <a id="atlasSourceDownloadLink" class="ghost-button disabled atlas-download-button" href="#" download>下载压缩后整图 PNG</a>
                  <p id="atlasSourceDownloadHint" class="inline-note">切到“像素结果”并处理完成后，这里可以单独下载压缩后的整图 PNG。</p>
                </div>

                <div class="download-row atlas-download-row">
                  <a id="atlasDownloadLink" class="primary-button secondary-primary disabled atlas-download-button" href="#" download>下载切片 ZIP</a>
                  <p id="atlasDownloadHint" class="inline-note">切片完成后，这里会启用 ZIP 下载按钮。</p>
                </div>
              </article>
            </aside>
          </div>
        </section>
      </main>
    </div>
  </body>
</html>
