static/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="#faf9f6">
  <title>PixText · Text repair studio</title>
  <link rel="stylesheet" href="/static/style.css">
  <link rel="preload" as="image" href="/examples/english-preview.webp?v=8a15b66d2fd9">
<link rel="preload" as="image" href="/examples/chinese-preview.webp?v=dfbb3fb24330">
<link rel="modulepreload" href="/static/gradio-client.js">
  <script defer src="/static/app.js"></script>
</head>
<body>
<header class="topbar">
  <a class="brand" href="/"><span class="brand-mark">P<span>×</span></span><strong>PixText</strong></a>
  <nav><a href="https://arxiv.org/abs/2610.18284" target="_blank" rel="noopener">Paper ↗</a><a href="https://huggingface.co/ATH-MaaS/PixText" target="_blank" rel="noopener">Weights ↗</a><a href="https://github.com/ATH-MaaS/PixText" target="_blank" rel="noopener">GitHub ↗</a></nav>
</header>
<main>
  <section class="intro">
    <div><h1>Refine the text in your image.</h1></div>
    
  </section>
  <section class="start-row">
    <div class="example-selector"><button data-example="english" class="example active"><img src="/examples/english.webp" alt="English editorial example"><span>English</span></button><button data-example="chinese" class="example"><img src="/examples/chinese.webp" alt="Chinese New Year example"><span>中文</span></button></div>
    <div class="upload-area"><button id="uploadButton" class="button secondary"><span class="upload-icon">↥</span> Upload image</button><input id="imageUpload" type="file" accept="image/png,image/jpeg,image/webp" hidden></div>
  </section>
  <div id="notice" class="notice" role="status" hidden></div>
  <section class="studio" aria-label="Text refinement workspace">
    <div class="image-workspace">
      <div class="canvas-heading"><div class="view-tabs" role="tablist"><button id="editView" role="tab" aria-selected="true" class="active"><span>Edit</span></button><button id="compareView" role="tab" aria-selected="false" disabled><span>Compare</span></button></div><span id="imageSize" class="dimension" hidden>1024 × 1024</span></div>
      <div id="editorPanel" class="editor-panel">
        <div class="image-toolbar"><div><button id="selectTool" class="tool active" title="Select, move or resize a box">↖ <span>Select</span></button><button id="drawTool" class="tool" title="Draw a new box (D)">▣ <span>Draw box</span></button><span class="toolbar-separator"></span><button id="undoButton" class="tool" title="Undo region edit" disabled>↶</button><button id="resetButton" class="tool" title="Reset regions" aria-label="Reset regions">↺</button></div><span id="boxCount" hidden>No regions yet</span></div>
        <div id="dropZone" class="canvas-wrap"><svg id="regionCanvas" viewBox="0 0 1024 1024" aria-label="Image region editor" role="img"><image id="sourceImage" x="0" y="0" width="1024" height="1024"></image><g id="regionBoxes"></g><rect id="draftBox" hidden></rect></svg></div>
        <div class="canvas-footer" id="drawHint" hidden><span class="hint-dot"></span><span id="canvasHint">Drag to draw a box.</span></div>
      </div>
      <div id="comparePanel" class="compare-panel" hidden>
        <div class="result-toolbar"><span id="resultSummary"></span><a id="downloadImage" class="text-link" download="pixtext-refined.png">Download PNG ↓</a></div>
        <div class="wipe" id="wipe"><img id="afterImage" alt="PixText refined image"><img id="beforeImage" class="wipe-before" alt="Original image"><div class="wipe-label before">BEFORE</div><div class="wipe-label after">AFTER</div><div class="wipe-divider"><span>‹ ›</span></div><input id="compareSlider" aria-label="Before and after comparison slider" type="range" min="0" max="100" value="50"></div>
        <div class="canvas-footer compare-downloads"><a id="downloadRegions" class="text-link" download="pixtext-regions.json">Regions JSON ↓</a></div>
      </div>
    </div>
    <aside class="controls">
      <section class="detect-section"><button id="detectButton" class="button detect"><span class="scan-icon">⌗</span> Detect text <span class="button-arrow">→</span></button><div class="detect-sub"><button id="exampleTargets">Reset example</button></div></section>
      <section class="regions-section"><div class="control-title"><h2>Regions</h2><span id="selectedCount" class="count-pill">0 selected</span></div><div id="regionsEmpty" class="empty-regions"><p>Detect text or draw a box.</p></div><div id="regionList" class="region-list" aria-label="Detected text regions"></div><div id="regionDetail" class="region-detail" hidden><div class="detail-heading"><button id="deleteRegion" title="Delete selected region">Delete</button></div><div class="crop-preview"><canvas id="selectedCrop"></canvas></div><label for="targetText">Target text</label><input id="targetText" type="text" maxlength="64" placeholder="Enter the correct word"><details class="box-settings"><summary>Box coordinates</summary><div class="coords" id="coordinates"></div></details><div hidden><input id="enableRegion" type="checkbox"><span id="regionOrigin"></span></div></div></section>
      <section class="refine-section"><div class="model-options" role="radiogroup" aria-label="PixText model"><button class="model-option active" data-model="meanflow" role="radio" aria-checked="true"><strong>MeanFlow</strong><span>4 steps</span><i></i></button><button class="model-option" data-model="teacher" role="radio" aria-checked="false"><strong>Teacher</strong><span>25 steps</span><i></i></button></div><details class="settings"><summary>Settings <span>⌄</span></summary><div class="settings-grid"><label>Steps<input id="steps" type="number" min="1" max="40" value="4"></label><label>Seed<input id="seed" type="number" min="0" max="4294967295" value="42"></label><label>Guidance<input id="guidance" type="number" min="0" max="10" step="0.1" value="2.6"></label><label>Text threshold<input id="textThreshold" type="number" min="0.1" max="0.95" step="0.05" value="0.5"></label></div></details><button id="refineButton" class="button primary" disabled>Refine text <span>↗</span></button><p class="run-note" id="runNote" hidden></p></section>
    </aside>
  </section>
  <section id="regionResults" class="region-results" hidden><div class="results-heading"><div class="control-title"><h2>Region comparisons</h2></div><span id="resultsCount"></span></div><div id="resultCards" class="result-cards"></div></section>
  <footer><a href="https://registry.comfy.org/publishers/yaoliliu/nodes/pixtext" target="_blank" rel="noopener">ComfyUI ↗</a></footer>
</main>
<div id="jobProgress" class="activity-overlay" data-state="running" hidden>
  <section class="activity-card" role="status" aria-live="polite" aria-atomic="true">
    <div class="activity-header"><span class="activity-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><circle class="activity-ring" cx="12" cy="12" r="8"></circle><path class="activity-check" d="m7 12 3 3 7-7"></path><path class="activity-error" d="m8 8 8 8m0-8-8 8"></path></svg></span><div class="activity-copy"><strong id="jobTitle">Preparing</strong><p id="jobMessage">Preparing</p></div><button id="closeProgress" class="activity-close" aria-label="Dismiss task status" hidden>×</button></div>
    <div class="activity-meter"><div id="progressTrack" class="progress-track" role="progressbar" aria-label="Task progress" aria-valuemin="0" aria-valuemax="100"><div id="progressFill"></div></div><span id="jobPercent" hidden></span></div>
  </section>
</div>
<dialog id="cropDialog"><button id="closeDialog" class="dialog-close" aria-label="Close region comparison">×</button><h2 id="dialogTitle"></h2><div class="dialog-pair"><figure><figcaption>BEFORE</figcaption><img id="dialogBefore" alt="Original region"></figure><figure><figcaption>AFTER</figcaption><img id="dialogAfter" alt="Refined region"></figure></div></dialog>
</body>
</html>