Spaces:
Running on Zero
Running on Zero
| <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> | |