Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>FigMirror 风格盲评</title> | |
| <style> | |
| :root{ | |
| --bg:#eef1f6; --panel:#fff; --ink:#182031; --dim:#6b7688; --line:#e3e7ef; --letterbox:#eef2f7; | |
| --a:#2563eb; --a-soft:#e8f0fe; --b:#7c3aed; --b-soft:#f1eafe; --good:#0fa356; --warn:#e0902f; | |
| --shadow:0 1px 2px rgba(20,30,50,.06),0 6px 20px rgba(20,30,50,.07); --hdr:48px; | |
| } | |
| *{box-sizing:border-box} | |
| html,body{height:100%;margin:0;overflow:hidden} | |
| body{background:var(--bg);color:var(--ink); | |
| font:14px/1.5 system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif} | |
| button{font:inherit;color:inherit;cursor:pointer} | |
| .app{height:100vh;height:100dvh;display:grid; | |
| grid-template-rows:var(--hdr) clamp(92px,20vh,210px) minmax(0,1fr) auto;overflow:hidden} | |
| /* header */ | |
| .topbar{display:flex;align-items:center;gap:14px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line)} | |
| .brand{font-weight:750;font-size:15px;white-space:nowrap} | |
| .brand span{color:var(--a)} | |
| .rater{font-size:12px;font-weight:700;color:#fff;background:var(--a);border-radius:20px;padding:2px 10px;white-space:nowrap} | |
| .prog{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px;max-width:560px;margin:0 auto} | |
| .prog .t{font-size:12px;color:var(--dim);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} | |
| .prog .t b{color:var(--ink)} | |
| .prog .bar{height:6px;border-radius:20px;background:#e2e7f0;overflow:hidden} | |
| .prog .bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a),#7c85f5);transition:width .25s} | |
| .sync{font-size:11.5px;white-space:nowrap;color:var(--dim)} | |
| .sync .ok{color:var(--good);font-weight:700} | |
| .sync .wait{color:var(--warn);font-weight:700} | |
| .hbtn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px;font-size:12px} | |
| .hbtn:hover{background:#f7fafe;border-color:#c7cfdc} | |
| /* reference */ | |
| .refband{position:relative;background:var(--panel);border-bottom:1px solid var(--line)} | |
| .refband img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px 8px 6px;cursor:zoom-in} | |
| .reftag{position:absolute;top:7px;left:14px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.1em; | |
| color:var(--a);background:var(--a-soft);border-radius:20px;padding:2px 9px;pointer-events:none} | |
| .refhint{position:absolute;top:7px;right:14px;z-index:2;font-size:11px;color:var(--dim);pointer-events:none} | |
| /* candidates */ | |
| .stage{min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); | |
| grid-template-rows:minmax(0,1fr);gap:12px;padding:10px 12px} | |
| .cand{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--letterbox); | |
| border:2px solid var(--line);border-radius:13px;cursor:zoom-in} | |
| .cand img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px;display:block} | |
| .cand .badge{position:absolute;top:9px;left:9px;z-index:2;width:28px;height:28px;border-radius:8px; | |
| display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;box-shadow:0 2px 6px rgba(20,30,50,.2)} | |
| #cardA .badge{background:var(--a)} #cardB .badge{background:var(--b)} | |
| .cand .chosen{position:absolute;top:9px;right:9px;z-index:2;display:none;font-size:11px;font-weight:700;color:#fff; | |
| background:var(--good);border-radius:20px;padding:3px 9px} | |
| #cardA.win{border-color:var(--a);box-shadow:0 0 0 3px var(--a-soft)} | |
| #cardB.win{border-color:var(--b);box-shadow:0 0 0 3px var(--b-soft)} | |
| .cand.win .chosen{display:block} | |
| /* vote bar */ | |
| .votebar{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 12px; | |
| background:var(--panel);border-top:1px solid var(--line)} | |
| .nav{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 14px; | |
| font-size:13px;font-weight:600;color:var(--dim)} | |
| .nav:hover:not(:disabled){background:#f7fafe;border-color:#c7cfdc;color:var(--ink)} | |
| .nav:disabled{opacity:.4;cursor:default} | |
| .choice{border:2px solid;border-radius:12px;padding:11px 14px;font-size:14.5px;font-weight:800; | |
| display:inline-flex;align-items:center;gap:8px;white-space:nowrap} | |
| .choice kbd{font:700 10.5px/1 ui-monospace,Menlo,monospace;padding:2px 5px;border-radius:5px;background:rgba(20,30,50,.07);color:var(--dim)} | |
| .cA{color:var(--a);border-color:var(--a);background:#fff;flex:0 1 240px} .cA:hover{background:var(--a-soft)} | |
| .cA.on{background:var(--a);color:#fff} .cA.on kbd{background:rgba(255,255,255,.25);color:#fff} | |
| .cB{color:var(--b);border-color:var(--b);background:#fff;flex:0 1 240px} .cB:hover{background:var(--b-soft)} | |
| .cB.on{background:var(--b);color:#fff} .cB.on kbd{background:rgba(255,255,255,.25);color:#fff} | |
| .cMid{color:var(--dim);border-color:var(--line);background:#fff;font-weight:700;font-size:13px} | |
| .cMid:hover{background:#f4f6fa;border-color:#c7cfdc} .cMid.on{background:#3a4557;color:#fff;border-color:#3a4557} | |
| .cMid.on kbd{background:rgba(255,255,255,.22);color:#fff} | |
| /* overlays */ | |
| .overlay{position:fixed;inset:0;z-index:60;background:rgba(238,241,246,.97);display:grid;place-items:center;padding:22px} | |
| .panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);max-width:520px;padding:30px 34px;text-align:center} | |
| .panel h1{font-size:22px;margin:0 0 6px} .panel h1 span{color:var(--a)} | |
| .panel p{color:#3f475a;margin:8px 0;font-size:14.5px} | |
| .go{margin-top:16px;border:0;border-radius:12px;background:var(--a);color:#fff;font-weight:750;font-size:15px;padding:12px 30px} | |
| .go:hover{background:#1e57d6} | |
| .rules{text-align:left;background:#f6f9fc;border:1px solid var(--line);border-radius:11px;padding:12px 16px;margin:14px 0 0} | |
| .rules li{margin:4px 0;color:#3f475a;font-size:13.5px} | |
| .raters{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap} | |
| .raters a{border:1px solid var(--line);border-radius:10px;padding:10px 16px;font-weight:700;color:var(--a);text-decoration:none} | |
| .raters a:hover{background:var(--a-soft)} | |
| .hidden{display:none!important} | |
| /* lightbox */ | |
| .lb{position:fixed;inset:0;z-index:80;background:#0b0f16;display:none;flex-direction:column} | |
| .lb.on{display:flex} | |
| .lbtop{display:flex;align-items:center;gap:10px;padding:10px 14px;color:#dfe6f2} | |
| .lbtop .t{font-size:12.5px;color:#aeb8ca} .lbtop .sp{flex:1} | |
| .lbbtn{border:1px solid #3a4459;background:#1b2334;color:#dfe6f2;border-radius:8px;height:34px;padding:0 12px;font-size:13px} | |
| .lbbtn:hover{background:#242e44} | |
| .lbstage{flex:1;min-height:0;overflow:hidden;position:relative;cursor:grab} | |
| .lbstage.drag{cursor:grabbing} | |
| .lbstage img{position:absolute;left:50%;top:50%;max-width:94vw;max-height:82vh;object-fit:contain; | |
| transform:translate(-50%,-50%);transform-origin:center;user-select:none;-webkit-user-drag:none} | |
| @media(max-width:820px){.stage{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.votebar{flex-wrap:wrap}} | |
| </style> | |
| </head> | |
| <body> | |
| <!-- landing (no valid rater) --> | |
| <div class="overlay" id="landing"> | |
| <div class="panel"> | |
| <h1><span>FigMirror</span> 风格盲评</h1> | |
| <p>请打开分配给你的链接(带 <code>?rater=编号</code>)。或直接选你的编号:</p> | |
| <div class="raters" id="raterLinks"></div> | |
| <p style="margin-top:14px;font-size:12.5px;color:#8a93a3">编号是我发给每个人的,别人和你的题目不完全一样。</p> | |
| </div> | |
| </div> | |
| <!-- start --> | |
| <div class="overlay hidden" id="start"> | |
| <div class="panel"> | |
| <h1><span>FigMirror</span> 风格盲评 · <span id="startRater"></span></h1> | |
| <p>顶上是<b>参考图</b>,下面 A / B 两张。选<b>哪张更好地复刻了参考图的风格</b>——配色、字体、间距、布局。</p> | |
| <ul class="rules"> | |
| <li>只看<b>风格像不像参考图</b>,别管数字对不对,也别管单看谁更好看。</li> | |
| <li>实在难分就点<b>「差不多」</b>;这一对看不了就<b>「跳过」</b>。</li> | |
| <li><b>点任意图片放大</b>看细节。快捷键:<b>1</b>=A,<b>2</b>=B,<b>3</b>=差不多,<b>4</b>=跳过,<b>←/→</b>翻页。</li> | |
| <li>进度自动保存,可随时关掉、下次接着标。</li> | |
| </ul> | |
| <button class="go" id="btnStart">开始标注</button> | |
| </div> | |
| </div> | |
| <!-- done --> | |
| <div class="overlay hidden" id="done"> | |
| <div class="panel"> | |
| <h1>你的题标完了 🎉</h1> | |
| <p id="doneMsg"></p> | |
| <button class="go" id="btnReview">回去检查</button> | |
| <div style="margin-top:10px"><button class="hbtn" id="btnExport2">导出我的结果(备份)</button></div> | |
| </div> | |
| </div> | |
| <div class="app"> | |
| <div class="topbar"> | |
| <div class="brand"><span>FigMirror</span> 盲评</div> | |
| <div class="rater" id="raterTag">—</div> | |
| <div class="prog"> | |
| <div class="t">第 <b id="pIdx">1</b> / <b id="pTot">0</b> · 已评 <b id="pDone">0</b></div> | |
| <div class="bar"><i id="barFill"></i></div> | |
| </div> | |
| <div class="sync" id="syncUI">…</div> | |
| <button class="hbtn" id="btnExport">导出</button> | |
| </div> | |
| <div class="refband"> | |
| <div class="reftag">参考图 REFERENCE</div> | |
| <div class="refhint">点图放大 🔍</div> | |
| <img id="refImg" alt="reference"> | |
| </div> | |
| <div class="stage"> | |
| <div class="cand" id="cardA"><div class="badge">A</div><div class="chosen">✓ 已选</div><img id="imgA" alt="A"></div> | |
| <div class="cand" id="cardB"><div class="badge">B</div><div class="chosen">✓ 已选</div><img id="imgB" alt="B"></div> | |
| </div> | |
| <div class="votebar"> | |
| <button class="nav" id="btnPrev">← 上一张</button> | |
| <button class="choice cA" id="btnA">A 更好 <kbd>1</kbd></button> | |
| <button class="choice cMid" id="btnTie">差不多 <kbd>3</kbd></button> | |
| <button class="choice cMid" id="btnSkip">跳过 <kbd>4</kbd></button> | |
| <button class="choice cB" id="btnB">B 更好 <kbd>2</kbd></button> | |
| <button class="nav" id="btnNext">下一张 →</button> | |
| </div> | |
| </div> | |
| <!-- lightbox --> | |
| <div class="lb" id="lb"> | |
| <div class="lbtop"><span class="t" id="lbTitle"></span><span class="sp"></span> | |
| <button class="lbbtn" id="lbOut">−</button><button class="lbbtn" id="lbFit">适应</button> | |
| <button class="lbbtn" id="lbIn">＋</button><button class="lbbtn" id="lbClose">✕ 关闭</button> | |
| </div> | |
| <div class="lbstage" id="lbStage"><img id="lbImg" alt="zoom"></div> | |
| </div> | |
| <script src="manifest.js"></script> | |
| <script> | |
| const $ = id => document.getElementById(id); | |
| const A = window.ARENA || {pairs:[],assignment:{}}; | |
| const byId = {}; A.pairs.forEach(p => byId[p.id] = p); | |
| // Central collector endpoint (Google Apps Script Web App URL). Empty => local-only | |
| // (votes still saved in the browser + exportable); set to enable auto-collection. | |
| const COLLECT_URL = "https://script.google.com/macros/s/AKfycbzDYgGaW43lpzWaFMlBXfWvnz7KmL_XRUFKdFPtA020u00QCb9dESHVnnHodrlh07mNYg/exec"; | |
| // ---- rater resolution ---- | |
| const params = new URLSearchParams(location.search); | |
| let rater = params.get('rater'); | |
| const N_RATERS = A.n_raters || 5; | |
| const validRater = (rater && /^[1-9][0-9]*$/.test(rater) && +rater>=1 && +rater<=N_RATERS) ? +rater : null; | |
| const zoom = { | |
| scale:1,tx:0,ty:0,drag:false,sx:0,sy:0, | |
| open(src,title){ $('lbImg').src=src; $('lbTitle').textContent=title+' · 滚轮缩放 · 拖动平移'; this.fit(); $('lb').classList.add('on'); }, | |
| close(){ $('lb').classList.remove('on'); }, | |
| isOpen(){ return $('lb').classList.contains('on'); }, | |
| apply(){ $('lbImg').style.transform=`translate(calc(-50% + ${this.tx}px),calc(-50% + ${this.ty}px)) scale(${this.scale})`; }, | |
| fit(){ this.scale=1;this.tx=0;this.ty=0;this.apply(); }, | |
| by(f){ this.scale=Math.min(9,Math.max(1,this.scale*f)); if(this.scale===1){this.tx=0;this.ty=0;} this.apply(); }, | |
| init(){ | |
| const s=$('lbStage'); | |
| s.addEventListener('wheel',e=>{e.preventDefault();const r=s.getBoundingClientRect(); | |
| const cx=e.clientX-(r.left+r.width/2),cy=e.clientY-(r.top+r.height/2); | |
| const f=e.deltaY<0?1.18:1/1.18,ns=Math.min(9,Math.max(1,this.scale*f)),k=ns/this.scale; | |
| this.tx=cx-k*(cx-this.tx);this.ty=cy-k*(cy-this.ty);this.scale=ns; | |
| if(ns===1){this.tx=0;this.ty=0;}this.apply();},{passive:false}); | |
| s.addEventListener('mousedown',e=>{this.drag=true;this.sx=e.clientX-this.tx;this.sy=e.clientY-this.ty;s.classList.add('drag');}); | |
| window.addEventListener('mousemove',e=>{if(this.drag){this.tx=e.clientX-this.sx;this.ty=e.clientY-this.sy;this.apply();}}); | |
| window.addEventListener('mouseup',()=>{this.drag=false;s.classList.remove('drag');}); | |
| s.addEventListener('click',e=>{if(e.target===s)this.close();}); | |
| $('lbIn').onclick=()=>this.by(1.3); $('lbOut').onclick=()=>this.by(1/1.3); | |
| $('lbFit').onclick=()=>this.fit(); $('lbClose').onclick=()=>this.close(); | |
| } | |
| }; | |
| const app = { | |
| rater:validRater, pairs:[], idx:0, votes:{}, KEY:'', | |
| cur(){ return this.pairs[this.idx]; }, | |
| boot(){ | |
| zoom.init(); | |
| if(!this.rater){ | |
| const box=$('raterLinks'); | |
| for(let i=1;i<=N_RATERS;i++){ const a=document.createElement('a'); a.href='?rater='+i; a.textContent='编号 '+i; box.appendChild(a); } | |
| return; // stay on landing | |
| } | |
| $('landing').classList.add('hidden'); | |
| this.KEY='arena_votes_r'+this.rater; | |
| try{ this.votes=JSON.parse(localStorage.getItem(this.KEY))||{}; }catch(e){ this.votes={}; } | |
| const ids=(A.assignment&&A.assignment[this.rater])||A.pairs.map(p=>p.id); | |
| this.pairs=ids.map(id=>byId[id]).filter(Boolean); | |
| $('pTot').textContent=this.pairs.length; | |
| $('raterTag').textContent='编号 '+this.rater; | |
| $('startRater').textContent='编号 '+this.rater; | |
| // resume at first unjudged | |
| const fu=this.pairs.findIndex(p=>!this.votes[p.id]); | |
| this.idx=fu===-1?0:fu; | |
| $('start').classList.remove('hidden'); | |
| $('btnStart').onclick=()=>{ $('start').classList.add('hidden'); this.render(); }; | |
| $('btnReview').onclick=()=>{ $('done').classList.add('hidden'); this.idx=0; this.render(); }; | |
| $('btnA').onclick=()=>this.vote('A'); $('btnB').onclick=()=>this.vote('B'); | |
| $('btnTie').onclick=()=>this.vote('tie'); $('btnSkip').onclick=()=>this.vote('skip'); | |
| $('btnPrev').onclick=()=>this.go(-1); $('btnNext').onclick=()=>this.go(1); | |
| $('btnExport').onclick=()=>this.export(); $('btnExport2').onclick=()=>this.export(); | |
| $('cardA').onclick=()=>zoom.open(this.cur().A.img,'A'); $('cardB').onclick=()=>zoom.open(this.cur().B.img,'B'); | |
| $('refImg').onclick=()=>zoom.open(this.cur().ref,'参考图'); | |
| document.addEventListener('keydown',e=>{ | |
| if(zoom.isOpen()){ if(e.key==='Escape')zoom.close(); else if(e.key==='+'||e.key==='=')zoom.by(1.3); | |
| else if(e.key==='-')zoom.by(1/1.3); else if(e.key==='0')zoom.fit(); return; } | |
| if(!$('start').classList.contains('hidden')||!$('done').classList.contains('hidden')) return; | |
| if(e.key==='1')this.vote('A'); else if(e.key==='2')this.vote('B'); | |
| else if(e.key==='3')this.vote('tie'); else if(e.key==='4')this.vote('skip'); | |
| else if(e.key==='ArrowLeft')this.go(-1); else if(e.key==='ArrowRight')this.go(1); | |
| }); | |
| this.render(); this.syncLoop(); | |
| setInterval(()=>this.syncLoop(), 5000); | |
| }, | |
| render(){ | |
| const p=this.cur(); if(!p)return; | |
| $('refImg').src=p.ref; $('imgA').src=p.A.img; $('imgB').src=p.B.img; | |
| $('pIdx').textContent=this.idx+1; | |
| const done=Object.keys(this.votes).length; | |
| $('pDone').textContent=done; | |
| $('barFill').style.width=(done/this.pairs.length*100)+'%'; | |
| $('btnPrev').disabled=this.idx===0; $('btnNext').disabled=this.idx===this.pairs.length-1; | |
| const c=this.votes[p.id]?this.votes[p.id].choice:null; | |
| $('cardA').classList.toggle('win',c==='A'); | |
| $('cardB').classList.toggle('win',c==='B'); | |
| $('btnA').classList.toggle('on',c==='A'); | |
| $('btnB').classList.toggle('on',c==='B'); | |
| $('btnTie').classList.toggle('on',c==='tie'); | |
| $('btnSkip').classList.toggle('on',c==='skip'); | |
| this.syncUI(); | |
| }, | |
| uuid(){ return 'v'+Date.now().toString(36)+Math.floor(performance.now()*1000).toString(36); }, | |
| vote(choice){ | |
| const p=this.cur(); const fresh=!this.votes[p.id]; | |
| const rec={ rater:this.rater, pair_id:p.id, figure_id:p.figure_id, | |
| A_method:p.A.method, B_method:p.B.method, choice, | |
| winner_method: choice==='A'?p.A.method : choice==='B'?p.B.method : null, | |
| uuid:(this.votes[p.id]&&this.votes[p.id].uuid)||this.uuid(), | |
| ts:new Date().toISOString(), synced:false }; | |
| this.votes[p.id]=rec; this.save(); this.render(); this.post(rec); | |
| if(fresh) setTimeout(()=>this.advance(),260); | |
| }, | |
| advance(){ | |
| const nxt=this.pairs.findIndex((p,i)=>i>this.idx && !this.votes[p.id]); | |
| if(nxt!==-1){ this.idx=nxt; this.render(); } | |
| else if(this.idx<this.pairs.length-1){ this.idx++; this.render(); } | |
| else if(Object.keys(this.votes).length>=this.pairs.length){ this.finish(); } | |
| }, | |
| go(d){ const n=this.idx+d; if(n>=0&&n<this.pairs.length){ this.idx=n; this.render(); } }, | |
| finish(){ $('doneMsg').textContent=`你(编号 ${this.rater})一共标了 ${Object.keys(this.votes).length} 对,已自动保存并上传。辛苦!`; $('done').classList.remove('hidden'); }, | |
| save(){ localStorage.setItem(this.KEY, JSON.stringify(this.votes)); }, | |
| async post(rec){ | |
| if(!COLLECT_URL) return; // local-only until a collector URL is set | |
| try{ | |
| const {synced, ...payload}=rec; | |
| // no-cors: Apps Script gives an opaque cross-origin response we can't read; a | |
| // resolved fetch means the request was delivered. The script dedups by | |
| // rater+pair_id, so a retry never double-counts. | |
| await fetch(COLLECT_URL,{method:'POST',mode:'no-cors',body:JSON.stringify(payload)}); | |
| rec.synced=true; this.save(); this.syncUI(); | |
| }catch(e){ /* real network failure -> stays unsynced, retried by syncLoop */ } | |
| }, | |
| syncLoop(){ if(!COLLECT_URL){ this.syncUI(); return; } for(const id in this.votes){ if(!this.votes[id].synced) this.post(this.votes[id]); } this.syncUI(); }, | |
| syncUI(){ | |
| if(!COLLECT_URL){ $('syncUI').innerHTML='<span class="ok">✓ 本地已保存</span>'; return; } | |
| const pend=Object.values(this.votes).filter(v=>!v.synced).length; | |
| $('syncUI').innerHTML = pend===0 ? '<span class="ok">✓ 已全部保存</span>' : `<span class="wait">⟳ 待上传 ${pend}</span>`; | |
| }, | |
| export(){ | |
| const rows=Object.values(this.votes).map(({synced,...r})=>r); | |
| const blob=new Blob([JSON.stringify({rater:this.rater,n:rows.length,votes:rows},null,2)],{type:'application/json'}); | |
| const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download=`arena_rater${this.rater}.json`; a.click(); | |
| }, | |
| }; | |
| app.boot(); | |
| window.app=app; window.zoom=zoom; | |
| </script> | |
| </body> | |
| </html> | |