Update README.md

README.md

@@ -1,175 +0,0 @@
----
-tags:
-- text-generation-inference
----
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-<title>OneDecision-VisionGuard-9B-SFT workflow</title>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@500&display=swap">
-<style>
-:root{--page:#e6e6e6;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
-@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--page:#000}}
-:root[data-theme="dark"]{--page:#000}
-html{scroll-padding-top:env(safe-area-inset-top,0px)}
-*{box-sizing:border-box}
-body{margin:0;padding:16px;background:var(--page);font-family:"Space Grotesk",system-ui,sans-serif}
-#wrap{position:relative;width:100%;max-width:1280px;margin:0 auto;overflow:hidden;border-radius:28px}
-#stage{--bg:#000;--bx:#0b0b0b;--ln:#262626;--mut:#7d7d7d;--safe:#3ddc97;--bad:#ff5a6a;
-position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;background:var(--bg);color:#f2f2f2;overflow:hidden}
-.bx{position:absolute;background:var(--bx);border:1px solid var(--ln);border-radius:28px;overflow:hidden}
-.t{position:absolute;left:24px;top:20px;font-size:18px;font-weight:500;color:var(--mut)}
-.img{position:absolute;inset:0;background-size:cover;background-position:center}
-.img.blur{filter:blur(36px);transform:scale(1.4)}
-.pic,.tok{position:absolute;left:90px;top:176px;width:240px;height:240px;border-radius:20px;overflow:hidden;background:#161616}
-.pic{transition:opacity .5s}
-.tok{z-index:5;opacity:0;border:1px solid var(--ln)}
-#head{left:40px;top:32px;height:60px;padding:0 26px;display:flex;align-items:center;gap:14px;border-radius:999px;white-space:nowrap;font-size:26px;font-weight:700;letter-spacing:-.3px}
-#model .nm{position:absolute;left:24px;top:20px;display:flex;gap:12px;align-items:center}
-#model .nm b{display:block;font-size:22px;line-height:1.1}
-#model .nm span{display:block;font-size:14px;color:var(--mut);margin-top:3px}
-.scan{position:absolute;left:24px;right:24px;top:190px;height:3px;border-radius:3px;background:#fff;opacity:0}
-#model.scanning .scan{opacity:.9;animation:sc 1s ease-in-out infinite alternate}
-@keyframes sc{from{top:196px}to{top:340px}}
-@media (prefers-reduced-motion:reduce){#model.scanning .scan{animation:none;top:270px}}
-.chip{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);padding:7px 20px;border-radius:999px;font-size:16px;font-weight:700;background:#1a1a1a;color:var(--mut);white-space:nowrap}
-.chip.run{background:#fff;color:#000}.chip.safe{background:var(--safe);color:#04170e}.chip.bad{background:var(--bad);color:#2a0409}
-.hd{position:absolute;left:24px;right:24px;top:18px;display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700}
-.hd small{font-size:14px;font-weight:500;color:var(--mut)}
-.hd i{margin-left:auto;font-style:normal}
-#pass .hd{color:var(--safe)}#dump .hd{color:var(--bad)}
-.cap{position:absolute;right:24px;bottom:24px;font-size:15px;color:var(--mut);white-space:nowrap}
-.minis{position:absolute;left:20px;bottom:20px;display:flex;gap:12px}
-.mini{position:relative;width:64px;height:64px;border-radius:16px;overflow:hidden;border:1px solid var(--ln);animation:pop .35s}
-@keyframes pop{from{transform:scale(.6);opacity:0}}
-svg.fl{position:absolute;left:0;top:0;width:1280px;height:720px;pointer-events:none}
-.pa{stroke:var(--ln);fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:5 8}
-.pa.on{animation:fl .8s linear infinite;stroke:#fff}.pa.on.s{stroke:var(--safe)}.pa.on.b{stroke:var(--bad)}
-@keyframes fl{to{stroke-dashoffset:-13}}
-#json{position:absolute;left:24px;top:58px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:16px;line-height:1.5;white-space:pre;color:#cfcfcf}
-#json b{font-weight:500}.g{color:var(--safe)}.r{color:var(--bad)}
-#why{position:absolute;left:310px;right:24px;top:58px;font-size:17px;line-height:1.5;color:#e6e6e6;opacity:0;transition:opacity .5s}
-#why.show{opacity:1}#why small{display:block;color:var(--mut);font-size:14px;margin-bottom:6px}
-.th{position:absolute;top:84px;width:64px;height:64px;border-radius:16px;overflow:hidden;border:2px solid var(--ln);cursor:pointer;padding:0;background:#161616}
-.th.act{border-color:#fff}
-.th:focus-visible{outline:3px solid #fff;outline-offset:3px}
-</style>
-</head>
-<body>
-<div id="wrap">
-<div id="stage">
-  <div class="bx" id="head">
-    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.800" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.400 9.400 8 11 4.600-1.600 8-6 8-11V5z"/><circle cx="12" cy="11" r="2.500"/></svg>
-    OneDecision-VisionGuard-9B-SFT
-  </div>
-
-  <svg class="fl" viewBox="0 0 1280 720">
-    <path id="p1" class="pa" d="M380 296H460"/>
-    <path id="p2" class="pa" d="M760 296C800 296 800 195 840 195"/>
-    <path id="p3" class="pa" d="M760 296C800 296 800 365 840 365"/>
-  </svg>
-
-  <div class="bx" style="left:40px;top:120px;width:340px;height:320px"><div class="t">Input</div></div>
-  <div class="pic" id="inCard"><div class="img" id="inImg"></div></div>
-
-  <div class="bx" id="model" style="left:460px;top:120px;width:300px;height:320px">
-    <div class="nm">
-      <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.800" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.400 9.400 8 11 4.600-1.600 8-6 8-11V5z"/><circle cx="12" cy="11" r="2.500"/></svg>
-      <div><b>VisionGuard</b><span>9B parameters, SFT</span></div>
-    </div>
-    <div class="scan"></div>
-    <div class="chip" id="chip">Waiting</div>
-  </div>
-
-  <div class="bx" id="pass" style="left:840px;top:120px;width:400px;height:150px;border-color:#1f6b4b">
-    <div class="hd"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.200" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9.500"/><path d="m7.500 12.500 3 3 6-6.500"/></svg>Passed <small>safe = 1</small><i id="pc">0</i></div>
-    <div class="minis" id="pm"></div><div class="cap">Released downstream</div>
-  </div>
-  <div class="bx" id="dump" style="left:840px;top:290px;width:400px;height:150px;border-color:#7a2a33">
-    <div class="hd"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.200" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M9 7V4h6v3M6.500 7l1 13h9l1-13M10 11v6M14 11v6"/></svg>Dumped <small>nsfw = 1</small><i id="dc">0</i></div>
-    <div class="minis" id="dm"></div><div class="cap">Blocked and discarded</div>
-  </div>
-
-  <div class="tok" id="tok"><div class="img" id="tokImg"></div></div>
-
-  <div class="bx" style="left:40px;top:470px;width:340px;height:200px"><div class="t">Examples</div><div id="ths"></div></div>
-
-  <div class="bx" style="left:460px;top:470px;width:780px;height:200px">
-    <div class="t">Model output</div>
-    <div id="json"></div>
-    <div id="why"><small>Reasoning</small><span id="rs"></span></div>
-  </div>
-</div>
-</div>
-
-<script>
-const B='https://cdn-uploads.huggingface.co/production/uploads/65bb837dbfb878f46c77de4c/';
-const S=[
-{u:B+'BruPdRkcmco3HUoTQLd9v.jpeg',nsfw:0,g:'linear-gradient(135deg,#7a2a22,#b88a2e 55%,#141414)',r:'Fully armored superhero in a combat scene. No nudity, no suggestive posing.'},
-{u:B+'LHoPgdJUuuNVXRpdAGwZf.jpeg',nsfw:1,g:'linear-gradient(135deg,#8a6a7e,#5b4670 60%,#141414)',r:'Revealing lingerie and a sexually suggestive pose.'},
-{u:B+'64bLutLTC6HUlvAyiFKLH.jpeg',nsfw:0,g:'linear-gradient(135deg,#6f86ad,#3a5278 60%,#141414)',r:'Casual button-down shirt with full coverage and a neutral expression.'},
-{u:B+'yLwGYwcg7UfZSnXbYFWZh.jpeg',nsfw:1,g:'linear-gradient(135deg,#a07c6c,#7a4658 60%,#141414)',r:'Revealing lingerie and an alluring pose.'}
-];
-const $=id=>document.getElementById(id),sleep=ms=>new Promise(r=>setTimeout(r,ms));
-const fill=(el,s)=>{el.style.backgroundImage=`url("${s.u}"),${s.g}`;el.classList.toggle('blur',!!s.nsfw)};
-const wrap=$('wrap'),st=$('stage'),tok=$('tok'),model=$('model'),chip=$('chip');
-function fit(){const k=wrap.clientWidth/1280;st.style.transform=`scale(${k})`;wrap.style.height=720*k+'px'}
-new ResizeObserver(fit).observe(wrap);fit();
-document.querySelectorAll('#pass,#dump').forEach(e=>e.style.height='150px');
-
-const ths=S.map((s,i)=>{const b=document.createElement('button');b.className='th';b.style.left=24+i*76+'px';
- b.setAttribute('aria-label','Run example '+(i+1));b.innerHTML='<div class="img"></div>';fill(b.firstChild,s);
- b.onclick=()=>play(i,true);$('ths').appendChild(b);return b});
-
-let run=0,n={p:0,d:0};
-const setChip=(t,c)=>{chip.textContent=t;chip.className='chip '+c};
-const paths=[$('p1'),$('p2'),$('p3')];
-function clearBoxes(){n={p:0,d:0};$('pm').innerHTML='';$('dm').innerHTML='';$('pc').textContent=0;$('dc').textContent=0}
-function addMini(box,s,bad){const m=document.createElement('div');m.className='mini';m.innerHTML='<div class="img"></div>';
- if(bad)m.style.borderColor='#7a2a33';fill(m.firstChild,s);$(box).appendChild(m)}
-
-async function play(i,fresh){
-  const id=++run,s=S[i],ok=()=>id===run,safe=!s.nsfw;
-  if(fresh)clearBoxes();
-  ths.forEach((t,k)=>t.classList.toggle('act',k===i));
-  fill($('inImg'),s);$('inCard').style.opacity=1;
-  tok.style.transition='none';tok.style.opacity=0;tok.style.transform='none';
-  paths.forEach(p=>p.setAttribute('class','pa'));
-  model.classList.remove('scanning');setChip('Waiting','');
-  $('json').innerHTML='';$('why').classList.remove('show');
-  await sleep(800);if(!ok())return;
-
-  fill($('tokImg'),s);void tok.offsetWidth;
-  tok.style.transition='transform .9s cubic-bezier(.6,0,.3,1),opacity .4s';tok.style.opacity=1;
-  paths[0].setAttribute('class','pa on');$('inCard').style.opacity=.25;
-  tok.style.transform='translate(400px,0) scale(.42)';
-  await sleep(1000);if(!ok())return;
-
-  model.classList.add('scanning');setChip('Analyzing','run');
-  await sleep(1600);if(!ok())return;
-  model.classList.remove('scanning');
-  setChip(safe?'Safe':'NSFW',safe?'safe':'bad');
-  paths[safe?1:2].setAttribute('class','pa on '+(safe?'s':'b'));
-
-  const a=s.nsfw?'r':'g',z=safe?'g':'r';
-  const L=[`  "is_nsfw": <b class="${a}">${!!s.nsfw}</b>,`,`  "nsfw": <b class="${a}">${s.nsfw}</b>,`,`  "safe": <b class="${z}">${1-s.nsfw}</b>`];
-  let h='{\n';$('json').innerHTML=h;
-  for(const l of L){await sleep(240);if(!ok())return;h+=l+'\n';$('json').innerHTML=h}
-  $('json').innerHTML=h+'}';
-  $('rs').textContent=s.r;$('why').classList.add('show');
-  await sleep(900);if(!ok())return;
-
-  const k=safe?n.p:n.d,cx=892+76*k,cy=safe?218:388;
-  tok.style.transform=`translate(${cx-210}px,${cy-296}px) scale(.267)`;
-  await sleep(1000);if(!ok())return;
-  addMini(safe?'pm':'dm',s,!safe);tok.style.opacity=0;
-  if(safe){n.p++;$('pc').textContent=n.p}else{n.d++;$('dc').textContent=n.d}
-  await sleep(2000);if(!ok())return;
-  const nx=(i+1)%S.length;play(nx,nx===0);
-}
-play(0,true);
-</script>
-</body>
-</html>