Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="theme-color" content="#181527"> | |
| <meta name="description" content="Blindly compare two locally generated MOSS images against an exact text layout. Browser-only annotations and export by alphaBell."> | |
| <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: blob:; connect-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'; frame-src 'none'"> | |
| <title>MOSS Blind Layout Check | alphaBell</title> | |
| <link rel="icon" href="favicon.svg"> | |
| <link rel="stylesheet" href="evaluate.css"> | |
| <script type="module" src="evaluate.mjs"></script> | |
| </head> | |
| <body> | |
| <header class="topbar"><a class="brand" href="index.html"><span class="mark">Ξ±</span><span>alphaBell <i>/</i> MOSS Layout Studio</span></a><a class="back" href="index.html">Back to the editor β</a></header> | |
| <main> | |
| <section class="intro"><p class="eyebrow">Layout experiment <span>02 / Blind A/B</span></p><h1>Which image<br><em>followed the brief?</em></h1><p class="lead">Give this page one target layout and two images you generated from it. It hides the Base and SFT labels while you transcribe visible text and mark where it landed.</p><div class="scope"><span class="scope-dot"></span><p>Manual evaluation in your browser. Images stay on your device. The exported result contains image hashes and annotations, never image bytes.</p></div></section> | |
| <section class="setup" id="setup" aria-labelledby="setup-title"><div class="section-head"><p class="eyebrow">01 / Prepare a pair</p><h2 id="setup-title">One target. Two outputs.</h2><p>Use matching generation dimensions and settings for the two images. Choose the Base and SFT outputs separately; their display order is randomized after loading.</p></div><div class="setup-grid"><div class="setup-card"><h3>1. Import the layout</h3><p>Paste an editable Studio draft or a compiled MOSS layout prompt. A compiled prompt omits dimensions, so enter the original generation size below.</p><label class="file-button" for="layout-file">Choose layout JSON</label><input id="layout-file" type="file" accept=".json,application/json" hidden><label for="layout-json" class="field-label">Layout JSON</label><textarea id="layout-json" spellcheck="false" rows="8" aria-describedby="layout-note"></textarea><p class="small" id="layout-note">The existing Studio parser checks field names, coordinates and exact text. <a href="index.html">Open the layout editor β</a></p><div class="dimensions"><label for="layout-width">Original width<input id="layout-width" type="number" min="16" max="8192" step="16" inputmode="numeric"></label><label for="layout-height">Original height<input id="layout-height" type="number" min="16" max="8192" step="16" inputmode="numeric"></label></div></div><div class="setup-card"><h3>2. Add the outputs</h3><p>Choose one Base output and one SFT output in PNG, JPEG or WebP format. File names are hidden during annotation.</p><label class="file-button" for="base-image">Choose Base image</label><input id="base-image" type="file" accept="image/png,image/jpeg,image/webp" hidden> <label class="file-button" for="sft-image">Choose SFT image</label><input id="sft-image" type="file" accept="image/png,image/jpeg,image/webp" hidden><p class="file-status" id="image-status">No images selected</p><label for="generation-notes" class="field-label">Generation settings or seed</label><textarea id="generation-notes" rows="4" maxlength="1200" placeholder="Record model settings and seed, or say unknown."></textarea><p class="small">Each image must match the layout's original width and height. Cropped or resized files need their original full-size versions for this check.</p><button id="start" class="start" type="button">Start blind check β</button><p class="error" id="setup-error" role="alert"></p></div></div></section> | |
| <section class="evaluation" id="evaluation" aria-labelledby="evaluation-title" hidden><div class="section-head"><p class="eyebrow">02 / Observe without labels</p><h2 id="evaluation-title">Mark what you can see</h2><p>Draw a rectangle around each visible text region, then transcribe its exact characters. Use the numeric box fields for keyboard entry. Mark missing or illegible text when needed.</p></div><div class="progress"><span id="progress-label">Text region 1 of 1</span><span id="progress-count">0 of 2 observations complete</span></div><article class="target"><div><p class="eyebrow">Target text</p><pre id="target-text"></pre><p id="target-caption"></p></div><div class="target-facts"><span id="target-coordinates"></span><small>Blue outlines show the target. Orange outlines show your observed location.</small></div></article><div class="sides"><section class="side" data-side="A" aria-labelledby="side-a-title"><div class="side-head"><span class="side-letter" id="side-a-title">A</span><span>Identity hidden</span></div><canvas id="canvas-a" aria-label="Image A with target and observed boxes"></canvas><div class="status-choices" role="group" aria-label="Image A text status"><button type="button" data-status="visible">Visible</button><button type="button" data-status="missing">Missing</button><button type="button" data-status="illegible">Illegible</button></div><label for="text-a">Characters you can read<textarea id="text-a" rows="3" maxlength="2000" spellcheck="false"></textarea></label><div class="box-fields" aria-label="Image A observed text box"><label>X<input type="number" data-coordinate="x" min="0" step="1"></label><label>Y<input type="number" data-coordinate="y" min="0" step="1"></label><label>Width<input type="number" data-coordinate="w" min="1" step="1"></label><label>Height<input type="number" data-coordinate="h" min="1" step="1"></label></div><p class="canvas-note">Drag across the image to mark the observed text, or enter its box above.</p></section><section class="side" data-side="B" aria-labelledby="side-b-title"><div class="side-head"><span class="side-letter" id="side-b-title">B</span><span>Identity hidden</span></div><canvas id="canvas-b" aria-label="Image B with target and observed boxes"></canvas><div class="status-choices" role="group" aria-label="Image B text status"><button type="button" data-status="visible">Visible</button><button type="button" data-status="missing">Missing</button><button type="button" data-status="illegible">Illegible</button></div><label for="text-b">Characters you can read<textarea id="text-b" rows="3" maxlength="2000" spellcheck="false"></textarea></label><div class="box-fields" aria-label="Image B observed text box"><label>X<input type="number" data-coordinate="x" min="0" step="1"></label><label>Y<input type="number" data-coordinate="y" min="0" step="1"></label><label>Width<input type="number" data-coordinate="w" min="1" step="1"></label><label>Height<input type="number" data-coordinate="h" min="1" step="1"></label></div><p class="canvas-note">Drag across the image to mark the observed text, or enter its box above.</p></section></div><div class="navigation"><button id="previous" type="button">β Previous text</button><button id="next" type="button">Next text β</button><button id="reveal" type="button" disabled>Reveal the pair</button></div><p class="error" id="evaluation-error" role="alert"></p></section> | |
| <section class="results" id="results" aria-labelledby="results-title" hidden><div class="section-head"><p class="eyebrow">03 / This pair</p><h2 id="results-title">What the annotations show</h2><p>These figures describe two images and human observations. They are not OCR output or a general Base-versus-SFT benchmark.</p></div><div id="result-cards" class="result-cards"></div><p class="result-note">Exact text keeps Unicode and line breaks. Missing text counts as a full miss. Illegible text is reported separately and excluded from averages. Placement compares your drawn box with the requested box.</p><button id="download" type="button">Download annotation JSON β</button><p class="small">The JSON includes source revisions, the validated layout, image SHA-256 digests, manual annotations, settings and randomized A/B mapping. Image pixels remain local.</p></section> | |
| <section class="source" aria-labelledby="source-title"><div class="section-head"><p class="eyebrow">Pinned sources</p><h2 id="source-title">Check the format and model cards</h2></div><div class="source-grid"><a href="https://huggingface.co/spaces/alphabell/MOSS-Layout-Studio/blob/1210c33a99640fdcc7ae8dbc0cdddc03bafa4632/layout.mjs" target="_blank" rel="noopener noreferrer"><span>alphaBell source</span><strong>Layout parser and checks β</strong></a><a href="https://huggingface.co/OpenMOSS-Team/MOSS-Image-Base/tree/85975793d8b3d432f1b6e27f352abaa4c2a4c0d3" target="_blank" rel="noopener noreferrer"><span>Publisher model</span><strong>MOSS-Image-Base β</strong></a><a href="https://huggingface.co/OpenMOSS-Team/MOSS-Image-SFT/tree/f972bd4b4b9e3852133cc5da954d87bc32cd8fb9" target="_blank" rel="noopener noreferrer"><span>Publisher model</span><strong>MOSS-Image-SFT β</strong></a></div></section> | |
| </main> | |
| <footer><span>alphaBell / MOSS Layout Studio</span><span>All images and annotations stay in this browser tab until export.</span><a href="index.html">Build another layout β</a></footer> | |
| </body> | |
| </html> | |