Hugging Face's logo

Spaces:
FINAL-Bench
/
POCKET-Image-Studio
Running

App Files Community
POCKET-Image-Studio / index.html
SeaWolf-AI's picture
SeaWolf-AI
point secondary links to model card (hide gradio Space)
85474f3 verified
Raw
History Blame Contribute Delete
30.6 kB
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>POCKET-Image โ€” Perfect text, any language, in any image</title>
<meta name="description" content="Character-perfect text in any language โ€” Korean, Chinese, Japanese, Arabic, Thai and more. Runs fully local. No GPU. No NPU. No cloud." />
<style>
 :root{
 --bg:#0b0b10; --bg-2:#101017; --panel:#15161f; --panel-2:#1b1c27;
 --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
 --ink:#f3f2f8; --ink-dim:#b9b6c7; --muted:#8b88a0;
 --g1:#19e39b; --g2:#7c5cff; --g3:#ff5d8f; --amber:#f5b740;
 --grad:linear-gradient(115deg,var(--g1),var(--g2) 54%,var(--g3));
 --radius:18px; --maxw:1180px;
 --kr:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
 --sans:system-ui,-apple-system,"Segoe UI",Roboto,var(--kr);
 --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
 }
 @media (prefers-color-scheme:light){
 :root{ --bg:#f4f4f8; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f6f6fb;
 --line:rgba(20,18,30,.10); --line-2:rgba(20,18,30,.16);
 --ink:#16151d; --ink-dim:#43414f; --muted:#6b6880; }
 }
 :root[data-theme="light"]{ --bg:#f4f4f8; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f6f6fb;
 --line:rgba(20,18,30,.10); --line-2:rgba(20,18,30,.16);
 --ink:#16151d; --ink-dim:#43414f; --muted:#6b6880; }
 :root[data-theme="dark"]{ --bg:#0b0b10; --bg-2:#101017; --panel:#15161f; --panel-2:#1b1c27;
 --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
 --ink:#f3f2f8; --ink-dim:#b9b6c7; --muted:#8b88a0; }
 *{box-sizing:border-box}
 html{scroll-behavior:smooth}
 body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
 -webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
 a{color:inherit;text-decoration:none}
 .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
 .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
 .eyebrow{font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
 /* NAV */
 nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
 background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line)}
 .nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
 .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:18px}
 .dot{width:22px;height:22px;border-radius:7px;background:var(--grad);box-shadow:0 0 22px rgba(124,92,255,.5)}
 .nav-r{display:flex;align-items:center;gap:8px}
 .btn{font:600 14px/1 var(--sans);border-radius:11px;padding:11px 16px;border:1px solid var(--line-2);
 background:var(--panel);color:var(--ink);cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:8px}
 .btn:hover{border-color:var(--g2);transform:translateY(-1px)}
 .btn-primary{background:var(--grad);border:none;color:#0a0a12;font-weight:800;box-shadow:0 8px 30px rgba(124,92,255,.35)}
 .btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
 .lang{display:flex;border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
 .lang button{background:transparent;border:0;color:var(--muted);font:700 12px/1 var(--sans);padding:9px 11px;cursor:pointer}
 .lang button.on{background:var(--panel-2);color:var(--ink)}
 /* HERO / CONSOLE (input at very top) */
 header{position:relative;padding:46px 0 20px}
 .hero-head{max-width:760px}
 .hero-head h1{font-size:clamp(30px,5.4vw,60px);line-height:1.02;letter-spacing:-.035em;font-weight:850;margin:16px 0 12px;text-wrap:balance}
 .hero-head p{font-size:clamp(16px,2vw,19px);color:var(--ink-dim);max-width:60ch;margin:0}
 .console{margin-top:30px;display:grid;grid-template-columns:1.05fr .95fr;gap:22px;
 background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
 border-radius:calc(var(--radius) + 6px);padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
 .console .pane-label{display:flex;align-items:center;gap:8px;margin-bottom:14px}
 .console .pane-label b{font-size:13px;letter-spacing:.02em}
 .console .pane-label .pill{font:700 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
 color:var(--g1);border:1px solid color-mix(in srgb,var(--g1) 45%,transparent);border-radius:99px;padding:5px 8px}
 .field{margin-bottom:14px}
 .field label{display:block;font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
 .field .hint{font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);opacity:.8}
 textarea,select,input[type=text]{width:100%;background:var(--bg-2);color:var(--ink);border:1px solid var(--line-2);
 border-radius:12px;padding:13px 14px;font:500 15px/1.4 var(--sans);resize:vertical;transition:.16s}
 textarea:focus,select:focus{outline:none;border-color:var(--g2);box-shadow:0 0 0 3px rgba(124,92,255,.22)}
 textarea{min-height:60px}
 .row{display:flex;gap:12px}
 .row>*{flex:1}
 .gen{width:100%;margin-top:4px;justify-content:center;font-size:16px;padding:15px}
 .gen[disabled]{opacity:.6;cursor:progress}
 .stage{position:relative;border-radius:var(--radius);overflow:hidden;background:#0e0e15;
 border:1px solid var(--line);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
 .stage img{width:100%;height:100%;object-fit:cover;display:block}
 .demo-poster{position:absolute;inset:0;display:grid;place-items:center;
 background:linear-gradient(135deg,#0f9d6e,#3b3ba0 46%,#a13a7a);animation:hue 18s linear infinite}
 @keyframes hue{to{filter:hue-rotate(360deg)}}
 .demo-poster span{font-family:var(--kr);font-weight:800;color:#fff;font-size:clamp(30px,7vw,58px);
 text-shadow:0 4px 24px rgba(0,0,0,.35);letter-spacing:-.01em}
 .stage-status{position:absolute;inset:auto 0 0 0;padding:10px 14px;font:600 12px/1.3 var(--sans);
 color:var(--ink);background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);display:none}
 .spin{position:absolute;inset:0;display:none;place-items:center;background:rgba(6,6,12,.66);backdrop-filter:blur(3px);z-index:2}
 .spin.on{display:grid}
 .ring{width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,.18);
 border-top-color:var(--g1);animation:spin .9s linear infinite}
 @keyframes spin{to{transform:rotate(360deg)}}
 .spin p{position:absolute;margin-top:82px;font:600 13px/1 var(--sans);color:var(--ink-dim)}
 /* MARQUEE / trust */
 .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:44px;padding:16px 0;background:var(--bg-2)}
 .strip .wrap{display:flex;flex-wrap:wrap;gap:12px 34px;align-items:center;justify-content:center;color:var(--muted);font:600 13px/1 var(--sans)}
 .strip b{color:var(--ink)}
 /* SECTION scaffolding */
 section{padding:76px 0}
 .sec-head{max-width:640px;margin-bottom:38px}
 .sec-head h2{font-size:clamp(26px,3.6vw,40px);line-height:1.08;letter-spacing:-.03em;font-weight:820;margin:12px 0 10px;text-wrap:balance}
 .sec-head p{color:var(--ink-dim);font-size:17px;margin:0}
 /* PROBLEM before/after */
 .ba{display:grid;grid-template-columns:1fr 1fr;gap:20px}
 .ba .card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
 .ba .tile{aspect-ratio:16/10;display:grid;place-items:center;position:relative}
 .ba .fail{background:#111;}
 .ba .fail span{font-family:var(--kr);font-weight:800;font-size:clamp(26px,5vw,46px);color:#e9e9ee;letter-spacing:.02em;filter:blur(.4px)}
 .ba .win{background:linear-gradient(135deg,#15b184,#5a51d6 50%,#d64f86)}
 .ba .win span{font-family:var(--kr);font-weight:800;font-size:clamp(26px,5vw,46px);color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.3)}
 .ba .cap{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font:600 14px/1 var(--sans)}
 .ba .cap .k{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
 .ba .cap .v{font-family:var(--mono);font-size:13px}
 .tag-bad{color:#ff8098}.tag-good{color:var(--g1)}
 /* FEATURES grid */
 .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
 .feat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.2s;
 position:relative;overflow:hidden}
 .feat:hover{transform:translateY(-4px);border-color:var(--line-2)}
 .feat .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;margin-bottom:16px;
 background:color-mix(in srgb,var(--g2) 16%,var(--panel-2));border:1px solid var(--line)}
 .feat h3{margin:0 0 8px;font-size:18px;letter-spacing:-.01em;font-weight:750}
 .feat p{margin:0;color:var(--ink-dim);font-size:14.5px}
 .feat .kr-sample{font-family:var(--kr);font-weight:800;font-size:20px;margin-top:12px}
 .feat .kr-sample .bad{color:#ff7d96;text-decoration:line-through;text-decoration-color:rgba(255,125,150,.5);margin-right:10px;font-weight:700}
 .feat .kr-sample .good{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
 /* HARDWARE band */
 .hw{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
 .hw-in{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
 .hw-list{display:flex;flex-direction:column;gap:14px;margin-top:22px}
 .hw-item{display:flex;gap:14px;align-items:flex-start}
 .hw-item .b{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line);font-size:17px}
 .hw-item b{display:block;font-size:15px}
 .hw-item p{margin:2px 0 0;color:var(--ink-dim);font-size:14px}
 .box{aspect-ratio:4/3;border-radius:22px;border:1px solid var(--line-2);position:relative;overflow:hidden;
 background:radial-gradient(120% 140% at 30% 20%,#1c1d2b,#0c0c12);display:grid;place-items:center}
 :root[data-theme="light"] .box{background:radial-gradient(120% 140% at 30% 20%,#fff,#ececf5)}
 .box .cube{width:46%;aspect-ratio:1;border-radius:20px;background:var(--grad);box-shadow:0 30px 70px rgba(124,92,255,.4);
 display:grid;place-items:center;color:#0a0a12;font-weight:850;letter-spacing:-.02em;font-size:clamp(15px,2.4vw,22px);text-align:center;transform:rotate(-6deg)}
 .box .cube small{display:block;font-weight:700;font-size:11px;opacity:.72;margin-top:4px;letter-spacing:.06em}
 /* STATS */
 .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
 .stat{text-align:center;border:1px solid var(--line);border-radius:var(--radius);padding:28px 16px;background:var(--panel)}
 .stat .n{font-size:clamp(30px,4.4vw,46px);font-weight:850;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
 .stat .l{color:var(--muted);font-size:13px;margin-top:6px;letter-spacing:.02em}
 /* CTA */
 .cta{text-align:center;border:1px solid var(--line);border-radius:26px;padding:56px 24px;
 background:radial-gradient(120% 160% at 50% 0%,color-mix(in srgb,var(--g2) 20%,var(--panel)),var(--panel))}
 .cta h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.03em;font-weight:850;margin:0 0 12px;text-wrap:balance}
 .cta p{color:var(--ink-dim);font-size:17px;margin:0 auto 26px;max-width:52ch}
 .cta .row{max-width:440px;margin:0 auto}
 footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:13px}
 .foot-in{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
 .reveal{opacity:0;transform:translateY(18px);transition:.7s cubic-bezier(.2,.7,.2,1)}
 .reveal.in{opacity:1;transform:none}
 @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
 @media (max-width:900px){
 .console{grid-template-columns:1fr}
 .hw-in{grid-template-columns:1fr;gap:26px}
 .grid{grid-template-columns:1fr 1fr}
 .stats{grid-template-columns:1fr 1fr}
 }
 @media (max-width:560px){
 .grid,.ba,.stats{grid-template-columns:1fr}
 .nav-r .btn.hideSm{display:none}
 }
 :focus-visible{outline:2px solid var(--g2);outline-offset:2px;border-radius:6px}
</style>
</head>
<body>
<nav>
 <div class="wrap nav-in">
 <div class="brand"><span class="dot"></span>POCKET-Image</div>
 <div class="nav-r">
 <div class="lang" role="group" aria-label="Language">
 <button id="lang-en" class="on" onclick="setLang('en')">EN</button>
 <button id="lang-ko" onclick="setLang('ko')">ํ•œ๊ตญ์–ด</button>
 </div>
 <button class="btn hideSm" onclick="toggleTheme()" aria-label="Toggle theme" id="themeBtn">โ—</button>
 <a class="btn btn-primary" href="https://huggingface.co/FINAL-Bench/POCKET-Image-Zimage" target="_blank" rel="noopener" data-i18n="nav_try">Model card โ†—</a>
 </div>
 </div>
</nav>
<!-- HERO โ€” input console at the very top -->
<header>
 <div class="wrap">
 <div class="hero-head">
 <span class="eyebrow" data-i18n="hero_eyebrow">On-device generative typography</span>
 <h1><span data-i18n="hero_h1a">Perfect text, any language.</span><br><span class="grad-text" data-i18n="hero_h1b">On any image.</span></h1>
 <p data-i18n="hero_sub">Korean, Chinese, Japanese, Arabic, Thai and more โ€” every glyph exact, where other models smear non-Latin scripts. Type a scene, drop in your text, and it lands sharp. Runs on your own machine. No GPU, no cloud.</p>
 </div>
<div class="console">
 <!-- INPUT (top-most interactive element) -->
 <form class="inputs" onsubmit="return doGen(event)">
 <div class="pane-label"><span class="pill" data-i18n="con_input">Input</span><b data-i18n="con_input_b">Compose your poster</b></div>
<div class="field">
 <label data-i18n="lb_prompt">Describe your image</label>
 <textarea id="prompt" data-i18n-ph="ph_prompt" placeholder="e.g. sunset over a calm sea ยท cozy cafe interior ยท neon city night"></textarea>
 </div>
 <div class="field">
 <label>Text โ€” any language <span class="hint" data-i18n="lb_text_hint">(optional โ€” leave empty for pure image)</span></label>
 <textarea id="ktext" data-i18n-ph="ph_text" placeholder="์˜ˆ: ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ยท ๊ฐ’์ง„ ์„ ๋ฌผ ยท ์ตœ๊ณ ์˜ ํ•˜๋ฃจ">๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค</textarea>
 </div>
 <div class="row">
 <div class="field" style="margin-bottom:0">
 <label data-i18n="lb_style">Style</label>
 <select id="style">
 <option>๐ŸŽจ Auto (prompt only)</option>
 <option>๐ŸŒˆ Vivid color</option>
 <option>โšช Minimal</option>
 <option>๐ŸŒธ Pastel</option>
 <option>๐Ÿ–ค Dark luxury</option>
 <option>๐ŸŒƒ Neon</option>
 <option selected>๐Ÿ“ท Photoreal</option>
 </select>
 </div>
 </div>
 <button class="btn btn-primary gen" id="genBtn" type="submit" data-i18n="btn_gen">โœฆ Generate</button>
 </form>
<!-- OUTPUT -->
 <div>
 <div class="pane-label"><span class="pill" style="color:var(--g3);border-color:color-mix(in srgb,var(--g3) 45%,transparent)" data-i18n="con_out">Result</span><b data-i18n="con_out_b">100% correct text</b></div>
 <div class="stage" id="stage">
 <div class="demo-poster" id="demoPoster"><span>์•ˆ๋…•ํ•˜์„ธ์š”</span></div>
 <img id="resultImg" alt="Generated result" style="display:none" />
 <div class="spin" id="spin"><div class="ring"></div><p data-i18n="gen_wait">Renderingโ€ฆ first run wakes the engine (~30s)</p></div>
 <div class="stage-status" id="status"></div>
 </div>
 </div>
 </div>
 </div>
</header>
<div class="strip">
 <div class="wrap">
 <span data-i18n="strip_1"><b>11,172</b> Hangul blocks ยท every script</span>
 <span data-i18n="strip_2"><b>0</b> GPU ยท <b>0</b> NPU required</span>
 <span data-i18n="strip_3">From <b>4.5 GB</b></span>
 <span data-i18n="strip_4"><b>Windows ยท macOS ยท Linux</b></span>
 <span data-i18n="strip_5"><b>Fully local</b>, no cloud</span>
 </div>
</div>
<!-- PROBLEM -->
<section>
 <div class="wrap">
 <div class="sec-head reveal">
 <span class="eyebrow" data-i18n="prob_eyebrow">The hard part everyone skips</span>
 <h2 data-i18n="prob_h2">Global models can't spell the world.</h2>
 <p data-i18n="prob_p">From Hangul's 11,172 syllable blocks to Arabic's connected letters and Thai's stacked marks โ€” diffusion models draw scripts as shapes, so they smear. POCKET-Image renders every glyph exactly, in any language, at any size, in any scene.</p>
 </div>
 <div class="ba reveal">
 <div class="card">
 <div class="tile fail"><span>์•ˆ&#8203;ใ…&#8203;๊ธฐ ํ•˜&#8203;์›ฒ&#8203;์†Œ</span></div>
 <div class="cap"><span class="k">๐ŸŒ <span data-i18n="prob_others">Typical models</span></span><span class="v tag-bad">gibberish โœ•</span></div>
 </div>
 <div class="card">
 <div class="tile win"><span>์•ˆ๋…•ํ•˜์„ธ์š”</span></div>
 <div class="cap"><span class="k">โœฆ POCKET-Image</span><span class="v tag-good">exact โœ“</span></div>
 </div>
 </div>
 <div class="lang-row reveal">
 <div class="lp"><b>ํ•œ๊ตญ์–ด</b><span>๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค</span></div>
 <div class="lp"><b>ไธญๆ–‡</b><span>่ฐข่ฐข</span></div>
 <div class="lp"><b>ๆ—ฅๆœฌ่ชž</b><span>ใ‚ใ‚ŠใŒใจใ†</span></div>
 <div class="lp"><b>ุงู„ุนุฑุจูŠุฉ</b><span>ุดูƒุฑุง</span></div>
 <div class="lp"><b>เน„เธ—เธข</b><span>เธ‚เธญเธšเธ„เธธเธ“</span></div>
 <div class="lp"><b>Latin</b><span>Thank you</span></div>
 </div>
 </div>
</section>
<!-- FEATURES -->
<section style="padding-top:0">
 <div class="wrap">
 <div class="sec-head reveal">
 <span class="eyebrow" data-i18n="feat_eyebrow">Why teams choose it</span>
 <h2 data-i18n="feat_h2">Built for text that has to be right.</h2>
 </div>
 <div class="grid">
 <div class="feat reveal">
 <div class="ic">๐ŸŽฏ</div>
 <h3 data-i18n="f1_h">Character-perfect, any script</h3>
 <p data-i18n="f1_p">Korean, CJK, Arabic, Thai, Cyrillic, Latin โ€” every glyph exact, with right-to-left and complex shaping handled.</p>
 <div class="kr-sample"><span class="bad">์•ˆใ…๊ธฐ</span><span class="good">์•ˆ๋…•ํ•˜์„ธ์š”</span></div>
 </div>
 <div class="feat reveal">
 <div class="ic">๐Ÿ–ผ๏ธ</div>
 <h3 data-i18n="f2_h">Any scene, one prompt</h3>
 <p data-i18n="f2_p">Describe the background you want; your text lands on it, crisp and legible. Leave the text blank for a pure image.</p>
 </div>
 <div class="feat reveal">
 <div class="ic">๐Ÿ”’</div>
 <h3 data-i18n="f3_h">Fully local &amp; private</h3>
 <p data-i18n="f3_p">Runs on your own machine. Prompts never leave the device โ€” no cloud, no account, no telemetry.</p>
 </div>
 <div class="feat reveal">
 <div class="ic">โšก</div>
 <h3 data-i18n="f4_h">No GPU. No NPU.</h3>
 <p data-i18n="f4_p">The POCKET-Core engine runs on plain CPU and RAM. No graphics card, no accelerator required.</p>
 </div>
 <div class="feat reveal">
 <div class="ic">๐Ÿชถ</div>
 <h3 data-i18n="f5_h">Featherweight footprint</h3>
 <p data-i18n="f5_p">Runs in as little as 4.5 GB โ€” light enough for a laptop, not a server rack.</p>
 </div>
 <div class="feat reveal">
 <div class="ic">๐Ÿ’ป</div>
 <h3 data-i18n="f6_h">Runs everywhere</h3>
 <p data-i18n="f6_p">Windows, macOS and Linux โ€” RTX or Apple Silicon deliver the same exact text.</p>
 </div>
 </div>
 </div>
</section>
<!-- HARDWARE / POCKET-BOX -->
<div class="hw">
 <section>
 <div class="wrap hw-in">
 <div class="reveal">
 <span class="eyebrow" data-i18n="hw_eyebrow">Powered by POCKET-Core</span>
 <h2 style="font-size:clamp(26px,3.6vw,40px);letter-spacing:-.03em;font-weight:820;margin:12px 0 6px" data-i18n="hw_h2">Intelligence without the accelerator.</h2>
 <p style="color:var(--ink-dim);font-size:17px;margin:0" data-i18n="hw_p">The same engine that powers this demo runs 250B-class models on nothing but a modern CPU and RAM โ€” the heart of the palm-sized POCKET-Box.</p>
 <div class="hw-list">
 <div class="hw-item"><span class="b">๐Ÿง </span><div><b data-i18n="hw1_b">Large models, small hardware</b><p data-i18n="hw1_p">Flagship-scale models run locally where a graphics card can't even hold them.</p></div></div>
 <div class="hw-item"><span class="b">๐Ÿˆถ</span><div><b data-i18n="hw2_b">Korean-first, natively</b><p data-i18n="hw2_p">Tuned for Korean input and output end to end โ€” with full multilingual support.</p></div></div>
 <div class="hw-item"><span class="b">๐Ÿ”‡</span><div><b data-i18n="hw3_b">Silent &amp; offline</b><p data-i18n="hw3_p">Fanless-capable, cloud-free. Your data and your generations stay yours.</p></div></div>
 </div>
 </div>
 <div class="box reveal"><div class="cube">POCKET-Box<small data-i18n="box_small">NO GPU ยท NO NPU</small></div></div>
 </div>
 </section>
</div>
<!-- STATS -->
<section>
 <div class="wrap">
 <div class="stats">
 <div class="stat reveal"><div class="n grad-text">100%</div><div class="l" data-i18n="s1">Text accuracy</div></div>
 <div class="stat reveal"><div class="n">4.5<span style="font-size:.5em">GB</span></div><div class="l" data-i18n="s2">Minimum footprint</div></div>
 <div class="stat reveal"><div class="n">0</div><div class="l" data-i18n="s3">GPU / NPU needed</div></div>
 <div class="stat reveal"><div class="n">3</div><div class="l" data-i18n="s4">Platforms supported</div></div>
 </div>
 </div>
</section>
<!-- CTA -->
<section style="padding-top:0">
 <div class="wrap">
 <div class="cta reveal">
 <span class="eyebrow" data-i18n="cta_eyebrow">Try it now</span>
 <h2 data-i18n="cta_h2">Type Korean. Get a poster.</h2>
 <p data-i18n="cta_p">Scroll back up, describe a scene, and generate โ€” or open the full live demo. No sign-up, no card.</p>
 <div class="row">
 <a class="btn btn-primary" style="justify-content:center;padding:15px" href="#top" onclick="document.getElementById('prompt').focus()" data-i18n="cta_b1">โœฆ Start composing</a>
 <a class="btn" style="justify-content:center;padding:15px" href="https://huggingface.co/FINAL-Bench/POCKET-Image-Zimage" target="_blank" rel="noopener" data-i18n="cta_b2">Model card โ†—</a>
 </div>
 </div>
 </div>
</section>
<footer>
 <div class="wrap foot-in">
 <div class="brand" style="font-size:15px"><span class="dot" style="width:16px;height:16px"></span>POCKET-Image ยท VIDRAFT</div>
 <div data-i18n="foot">ยฉ 2026 VIDRAFT โ€” POCKET line. Character-perfect Korean, on-device.</div>
 </div>
</footer>
<script>
 /* ---------- theme ---------- */
 function toggleTheme(){
 const r=document.documentElement;
 const cur=r.getAttribute('data-theme')|| (matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light');
 r.setAttribute('data-theme', cur==='dark'?'light':'dark');
 }
 /* ---------- i18n ---------- */
 const KO={
 nav_try:"๋ชจ๋ธ ์นด๋“œ โ†—",
 hero_eyebrow:"์˜จ๋””๋ฐ”์ด์Šค ์ƒ์„ฑํ˜• ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ",
 hero_h1a:"์™„๋ฒฝํ•œ ํ…์ŠคํŠธ, ๋ชจ๋“  ์–ธ์–ด.", hero_h1b:"์–ด๋–ค ์ด๋ฏธ์ง€ ์œ„์—๋„.",
 hero_sub:"ํ•œ๊ตญ์–ดยท์ค‘๊ตญ์–ดยท์ผ๋ณธ์–ดยท์•„๋ž์–ดยทํƒœ๊ตญ์–ด๊นŒ์ง€ โ€” ๋‹ค๋ฅธ ๋ชจ๋ธ์ด ๋น„๋ผํ‹ด ๋ฌธ์ž๋ฅผ ๋ญ‰๊ฐค ๋•Œ, ๋ชจ๋“  ๊ธ€์ž๊ฐ€ ์ •ํ™•ํ•ฉ๋‹ˆ๋‹ค. ์žฅ๋ฉด์„ ์ž…๋ ฅํ•˜๊ณ  ๋ฌธ๊ตฌ๋ฅผ ๋„ฃ์œผ๋ฉด ์„ ๋ช…ํ•˜๊ฒŒ ์ƒˆ๊ฒจ์ง‘๋‹ˆ๋‹ค. ๋‚ด ์ปดํ“จํ„ฐ์—์„œ, GPU๋„ ํด๋ผ์šฐ๋“œ๋„ ์—†์ด.",
 con_input:"์ž…๋ ฅ", con_input_b:"ํฌ์Šคํ„ฐ๋ฅผ ๊ตฌ์„ฑํ•˜์„ธ์š”",
 lb_prompt:"์ด๋ฏธ์ง€ ํ”„๋กฌํ”„ํŠธ", ph_prompt:"์˜ˆ: ๋…ธ์„ ์ง€๋Š” ์ž”์ž”ํ•œ ๋ฐ”๋‹ท๊ฐ€ ยท ๊ฐ์„ฑ ์นดํŽ˜ ์ธํ…Œ๋ฆฌ์–ด ยท ๋„ค์˜จ ๋„์‹œ์˜ ๋ฐค",
 lb_text_hint:"(์„ ํƒ โ€” ๋น„์šฐ๋ฉด ์ˆœ์ˆ˜ ์ด๋ฏธ์ง€ ์ƒ์„ฑ)", ph_text:"์˜ˆ: ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ยท ๊ฐ’์ง„ ์„ ๋ฌผ ยท ์ตœ๊ณ ์˜ ํ•˜๋ฃจ",
 lb_style:"์Šคํƒ€์ผ", btn_gen:"โœฆ ์ƒ์„ฑ",
 con_out:"๊ฒฐ๊ณผ", con_out_b:"๋ชจ๋“  ์–ธ์–ด 100% ์ •ํ™•",
 gen_wait:"์ƒ์„ฑ ์ค‘โ€ฆ ์ฒซ ์‹คํ–‰์€ ์—”์ง„์„ ๊นจ์›๋‹ˆ๋‹ค (~30์ดˆ)",
 strip_1:"<b>11,172</b> ํ•œ๊ธ€ ์Œ์ ˆ ยท ๋ชจ๋“  ๋ฌธ์ž", strip_2:"<b>0</b> GPU ยท <b>0</b> NPU ํ•„์š”",
 strip_3:"์ตœ์†Œ <b>4.5 GB</b>", strip_4:"<b>Windows ยท macOS ยท Linux</b>", strip_5:"<b>์™„์ „ ๋กœ์ปฌ</b>, ํด๋ผ์šฐ๋“œ ์—†์Œ",
 prob_eyebrow:"๋ชจ๋‘๊ฐ€ ํ”ผํ•ด๊ฐ„ ๋‚œ์ œ",
 prob_h2:"๊ธ€๋กœ๋ฒŒ ๋ชจ๋ธ์€ ์„ธ๊ณ„์˜ ๊ธ€์ž๋ฅผ ๋ชป ์”๋‹ˆ๋‹ค.",
 prob_p:"ํ•œ๊ธ€ 11,172 ์Œ์ ˆ๋ถ€ํ„ฐ ์•„๋ž์–ด ์—ฐ๊ฒฐ๋ฌธ์ž, ํƒœ๊ตญ์–ด ๊ฒน๊ธฐํ˜ธ๊นŒ์ง€ โ€” ๋””ํ“จ์ „ ๋ชจ๋ธ์€ ๋ฌธ์ž๋ฅผ '๊ทธ๋ฆผ'์œผ๋กœ ๊ทธ๋ ค ๋ญ‰๊ฐญ๋‹ˆ๋‹ค. POCKET-Image๋Š” ์–ด๋–ค ์–ธ์–ดยท์–ด๋–ค ํฌ๊ธฐยท์–ด๋–ค ์žฅ๋ฉด์—์„œ๋„ ๋ชจ๋“  ๊ธ€์ž๋ฅผ ์ •ํ™•ํžˆ ๋ Œ๋”ํ•ฉ๋‹ˆ๋‹ค.",
 prob_others:"์ผ๋ฐ˜ ๋ชจ๋ธ",
 feat_eyebrow:"ํŒ€์ด ์„ ํƒํ•˜๋Š” ์ด์œ ", feat_h2:"ํ‹€๋ฆฌ๋ฉด ์•ˆ ๋˜๋Š” ํ…์ŠคํŠธ๋ฅผ ์œ„ํ•ด.",
 f1_h:"๋ชจ๋“  ๋ฌธ์ž ์™„๋ฒฝ", f1_p:"ํ•œ๊ตญ์–ดยทCJKยท์•„๋ž์–ดยทํƒœ๊ตญ์–ดยทํ‚ค๋ฆดยท๋ผํ‹ด โ€” ๋ชจ๋“  ๊ธ€์ž ์ •ํ™•, RTL๊ณผ ๋ณตํ•ฉ ์…ฐ์ดํ•‘๊นŒ์ง€.",
 f2_h:"์žฅ๋ฉด ํ•˜๋‚˜๋ฉด ๋", f2_p:"์›ํ•˜๋Š” ๋ฐฐ๊ฒฝ์„ ๋ฌ˜์‚ฌํ•˜๋ฉด ๊ทธ ์œ„์— ๊ธ€์ž๊ฐ€ ์„ ๋ช…ํžˆ ์˜ฌ๋ผ๊ฐ‘๋‹ˆ๋‹ค. ๋ฌธ๊ตฌ๋ฅผ ๋น„์šฐ๋ฉด ์ˆœ์ˆ˜ ์ด๋ฏธ์ง€.",
 f3_h:"์™„์ „ ๋กœ์ปฌยทํ”„๋ผ์ด๋ฒ„์‹œ", f3_p:"๋‚ด ๊ธฐ๊ธฐ์—์„œ ์‹คํ–‰. ํ”„๋กฌํ”„ํŠธ๋Š” ๋ฐ–์œผ๋กœ ์•ˆ ๋‚˜๊ฐ‘๋‹ˆ๋‹ค โ€” ํด๋ผ์šฐ๋“œยท๊ณ„์ •ยท์ˆ˜์ง‘ ์—†์Œ.",
 f4_h:"GPU๋„ NPU๋„ ์—†์ด", f4_p:"POCKET-Core ์—”์ง„์€ ์ผ๋ฐ˜ CPUยทRAM๋งŒ์œผ๋กœ ๋™์ž‘. ๊ทธ๋ž˜ํ”ฝ์นด๋“œ๋„ ๊ฐ€์†๊ธฐ๋„ ๋ถˆํ•„์š”.",
 f5_h:"๊นƒํ„ธ์ฒ˜๋Ÿผ ๊ฐ€๋ณ๊ฒŒ", f5_p:"์ตœ์†Œ 4.5 GB๋กœ ๊ตฌ๋™ โ€” ์„œ๋ฒ„ ๋ž™์ด ์•„๋‹ˆ๋ผ ๋…ธํŠธ๋ถ์— ๋งž๋Š” ํฌ๊ธฐ.",
 f6_h:"์–ด๋””์„œ๋“  ๋™์ผํ•˜๊ฒŒ", f6_p:"WindowsยทmacOSยทLinux โ€” RTX๋“  ์• ํ”Œ ์‹ค๋ฆฌ์ฝ˜์ด๋“  ๊ฐ™์€ ์ •ํ™•ํ•œ ๊ฒฐ๊ณผ.",
 hw_eyebrow:"POCKET-Core ๊ธฐ๋ฐ˜",
 hw_h2:"๊ฐ€์†๊ธฐ ์—†๋Š” ์ง€๋Šฅ.",
 hw_p:"์ด ๋ฐ๋ชจ๋ฅผ ๋Œ๋ฆฌ๋Š” ๋ฐ”๋กœ ๊ทธ ์—”์ง„์ด, ์ตœ์‹  CPU์™€ RAM๋งŒ์œผ๋กœ 250B๊ธ‰ ๋ชจ๋ธ์„ ๊ตฌ๋™ํ•ฉ๋‹ˆ๋‹ค โ€” ์†๋ฐ”๋‹ฅ ํฌ๊ธฐ POCKET-Box์˜ ์‹ฌ์žฅ.",
 hw1_b:"ํฐ ๋ชจ๋ธ, ์ž‘์€ ํ•˜๋“œ์›จ์–ด", hw1_p:"๊ทธ๋ž˜ํ”ฝ์นด๋“œ์— ๋‹ด๊ธฐ์ง€๋„ ์•Š๋Š” ํ”Œ๋ž˜๊ทธ์‹ญ๊ธ‰ ๋ชจ๋ธ์„ ๋กœ์ปฌ์—์„œ.",
 hw2_b:"ํ•œ๊ตญ์–ด ๋„ค์ดํ‹ฐ๋ธŒ", hw2_p:"์ž…๋ ฅ๋ถ€ํ„ฐ ์ถœ๋ ฅ๊นŒ์ง€ ํ•œ๊ตญ์–ด์— ์ตœ์ ํ™” โ€” ๋‹ค๊ตญ์–ด๋„ ์™„์ „ ์ง€์›.",
 hw3_b:"๋ฌด์†Œ์Œยท์˜คํ”„๋ผ์ธ", hw3_p:"ํŒฌ๋ฆฌ์Šค ๊ฐ€๋Šฅ, ํด๋ผ์šฐ๋“œ ํ”„๋ฆฌ. ๋ฐ์ดํ„ฐ๋„ ์ƒ์„ฑ๋ฌผ๋„ ์˜จ์ „ํžˆ ๋‚ด ๊ฒƒ.",
 box_small:"GPU ์—†์Œ ยท NPU ์—†์Œ",
 s1:"ํ…์ŠคํŠธ ์ •ํ™•๋„", s2:"์ตœ์†Œ ์šฉ๋Ÿ‰", s3:"ํ•„์š”ํ•œ GPU/NPU", s4:"์ง€์› ํ”Œ๋žซํผ",
 cta_eyebrow:"์ง€๊ธˆ ์‚ฌ์šฉํ•ด ๋ณด์„ธ์š”", cta_h2:"ํ•œ๊ธ€์„ ์ž…๋ ฅํ•˜๋ฉด, ํฌ์Šคํ„ฐ๊ฐ€ ๋‚˜์˜ต๋‹ˆ๋‹ค.",
 cta_p:"์œ„๋กœ ์˜ฌ๋ผ๊ฐ€ ์žฅ๋ฉด์„ ๋ฌ˜์‚ฌํ•˜๊ณ  ์ƒ์„ฑํ•˜์„ธ์š” โ€” ๋˜๋Š” ์ „์ฒด ๋ผ์ด๋ธŒ ๋ฐ๋ชจ๋ฅผ ์—ฌ์„ธ์š”. ๊ฐ€์ž…๋„ ์นด๋“œ๋„ ์—†์Šต๋‹ˆ๋‹ค.",
 cta_b1:"โœฆ ๊ตฌ์„ฑ ์‹œ์ž‘", cta_b2:"๋ชจ๋ธ ์นด๋“œ โ†—",
 foot:"ยฉ 2026 VIDRAFT โ€” POCKET ๋ผ์ธ. ์˜จ๋””๋ฐ”์ด์Šค, ํ•œ๊ธ€ ์™„๋ฒฝ ๋ Œ๋”๋ง."
 };
 let EN={};
 function snapshotEN(){
 document.querySelectorAll('[data-i18n]').forEach(el=>EN[el.getAttribute('data-i18n')]=el.innerHTML);
 document.querySelectorAll('[data-i18n-ph]').forEach(el=>EN['__ph_'+el.getAttribute('data-i18n-ph')]=el.getAttribute('placeholder'));
 }
 function setLang(l){
 document.getElementById('lang-en').classList.toggle('on',l==='en');
 document.getElementById('lang-ko').classList.toggle('on',l==='ko');
 document.documentElement.lang=l==='ko'?'ko':'en';
 document.querySelectorAll('[data-i18n]').forEach(el=>{
 const k=el.getAttribute('data-i18n'); const v=l==='ko'?KO[k]:EN[k]; if(v!=null) el.innerHTML=v;
 });
 document.querySelectorAll('[data-i18n-ph]').forEach(el=>{
 const k=el.getAttribute('data-i18n-ph');
 el.placeholder = l==='ko' ? (KO[k]||el.placeholder) : (EN['__ph_'+k]||el.placeholder);
 });
 }
 /* ---------- reveal on scroll ---------- */
 const io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}}),{threshold:.14});
 document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
 /* ---------- live generate (calls the hosted demo API; method stays server-side) ---------- */
 const SPACE="https://final-bench-pocket-image.hf.space";
 async function doGen(ev){
 ev.preventDefault();
 const btn=document.getElementById('genBtn'), spin=document.getElementById('spin'),
 status=document.getElementById('status'), img=document.getElementById('resultImg'),
 demo=document.getElementById('demoPoster');
 const text=document.getElementById('ktext').value, prompt=document.getElementById('prompt').value,
 style=document.getElementById('style').value;
 if(!text.trim() && !prompt.trim()){ flash(status,(document.documentElement.lang==='ko')?"๋ฌธ๊ตฌ ๋˜๋Š” ํ”„๋กฌํ”„ํŠธ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”":"Enter a prompt or Korean text"); return false; }
 btn.disabled=true; spin.classList.add('on'); status.style.display='none';
 try{
 const r=await fetch(SPACE+"/gradio_api/call/generate",{method:"POST",headers:{"Content-Type":"application/json"},
 body:JSON.stringify({data:[text,prompt,style,30,Math.floor(1+Math.random()*99998)]})});
 if(!r.ok) throw new Error("submit "+r.status);
 const {event_id}=await r.json();
 const s=await fetch(SPACE+"/gradio_api/call/generate/"+event_id);
 const reader=s.body.getReader(), dec=new TextDecoder(); let buf="",out=null;
 while(true){const {done,value}=await reader.read(); if(done)break; buf+=dec.decode(value,{stream:true});}
 buf.split("\n").forEach(line=>{ if(line.startsWith("data:")){ try{ const j=JSON.parse(line.slice(5).trim());
 if(Array.isArray(j)&&j[0]&&(j[0].url||typeof j[0]==="string")) out=j; }catch(e){} }});
 if(out){ const it=out[0]; img.src=it.url||it; img.style.display='block'; demo.style.display='none'; }
 else throw new Error("no output");
 }catch(err){
 flash(status,(document.documentElement.lang==='ko')?"๋ฐ๋ชจ ์ค€๋น„ ์ค‘์ผ ์ˆ˜ ์žˆ์–ด์š” โ€” ๋ผ์ด๋ธŒ ๋ฐ๋ชจ์—์„œ ๋‹ค์‹œ ์‹œ๋„ํ•˜์„ธ์š” โ†—":"Demo may be waking up โ€” try the live demo โ†—");
 }finally{ btn.disabled=false; spin.classList.remove('on'); }
 return false;
 }
 function flash(el,msg){el.textContent=msg;el.style.display='block';setTimeout(()=>el.style.display='none',6000);}
 snapshotEN();
</script>
</body>
</html>