대조 가로축을 동시성(9%만 공개)에서 모델 크기(100% 공개)로 교체 — 남의 기록이 실제로 찍히도록

index.html

@@ -206,6 +206,7 @@ svg{display:block; max-width:100%; height:auto}
 
 .board{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:20px;margin-top:30px;align-items:start}
 .bpanel .f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
+.bpanel .f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
 .bpanel select,.bpanel input{width:100%;padding:10px 12px;border:1px solid var(--line2);
   background:var(--surface);color:var(--ink);font:inherit;font-size:14px;border-radius:0}
 .bpanel select:focus,.bpanel input:focus{outline:2px solid var(--blue);outline-offset:-2px}
@@ -615,9 +616,11 @@ table.brank tr.mine td{font-weight:600}
     <div class="panel bpanel">
       <div class="field"><label for="bGpu">쓰시는 GPU</label>
         <select id="bGpu"></select></div>
-      <div class="f2">
+      <div class="f3">
         <div class="field"><label for="bQ">양자화</label><select id="bQ"></select></div>
-        <div class="field"><label for="bAct">활성 파라미터 (십억)</label>
+        <div class="field"><label for="bTot">모델 크기 (십억)</label>
+          <input id="bTot" type="number" value="35" min="0.1" step="0.1"></div>
+        <div class="field"><label for="bAct">그중 활성 (십억)</label>
           <input id="bAct" type="number" value="3" min="0.1" step="0.1"></div>
       </div>
       <div class="f2">
@@ -662,7 +665,7 @@ table.brank tr.mine td{font-weight:600}
   <div class="note" id="bNote"><p>GPU를 고르면 계산합니다.</p></div>
 
   <div class="tw"><table class="brank">
-    <thead><tr><th>#</th><th>모델</th><th>잰 곳</th><th class="n">동시</th>
+    <thead><tr><th>#</th><th>모델</th><th>잰 곳</th><th class="n">크기</th>
       <th class="n">GPU당 tok/s</th><th>등급</th></tr></thead>
     <tbody id="bTop"></tbody>
   </table></div>
@@ -879,77 +882,69 @@ ${msg}`);
   $('sendMsg').textContent = '메일 창이 열립니다. 열리지 않으면 contact@quantid.ai 로 보내주십시오.';
 });
 
-/* ===== 09 · 대조 — 업계 395건 위에 귀사 위치 ===== */
+/* ===== 09 · 대조 — 업계 기록 위에 지금 설정 찍기 ===== */
 (function(){
   var B=null, $b=function(i){return document.getElementById(i)};
-  var W=560,H=400, L=58,R=14,T=18,Bm=44;          /* plot 여백 */
+  var W=560,H=400, L=58,R=14,T=18,Bm=44;
   var FX=function(n){return n.toLocaleString('ko-KR')};
 
-  fetch('board.json').then(function(r){return r.json()}).then(function(d){
-    B=d; init();
-  }).catch(function(e){
-    $b('bNote').innerHTML='<p>대조 자료를 불러오지 못했습니다.</p>';
-  });
+  fetch('board.json').then(function(r){return r.json()}).then(function(d){B=d; init();})
+    .catch(function(){ $b('bNote').innerHTML='<p>대조 자료를 불러오지 못했습니다.</p>'; });
 
   function init(){
     var gs=Object.keys(B.hw).filter(function(k){
-      return B.records.some(function(r){return r.g===k});
-    }).sort();
-    $b('bGpu').innerHTML='<option value="">— 고르십시오 —</option>'+gs.map(function(k){
+      return B.records.some(function(r){return r.g===k}); }).sort();
+    $b('bGpu').innerHTML=gs.map(function(k){
       var n=B.records.filter(function(r){return r.g===k}).length;
-      return '<option value="'+k+'">'+k+' ('+n+'건)</option>';
-    }).join('');
-    var best=gs.slice().sort(function(a,b){return B.records.filter(function(r){return r.g===b}).length-B.records.filter(function(r){return r.g===a}).length})[0];
-    $b('bGpu').value = best;
+      return '<option value="'+k+'">'+k+' ('+n+'건)</option>'; }).join('');
+    $b('bGpu').value=gs.slice().sort(function(a,b){
+      return B.records.filter(function(r){return r.g===b}).length
+           - B.records.filter(function(r){return r.g===a}).length; })[0];
 
-    var qs=Object.keys(B.bpp);
-    $b('bQ').innerHTML=qs.map(function(q){
-      return '<option value="'+q+'"'+(q==='FP8'?' selected':'')+'>'+q+'</option>';
-    }).join('');
+    $b('bQ').innerHTML=Object.keys(B.bpp).map(function(q){
+      return '<option value="'+q+'"'+(q==='FP8'?' selected':'')+'>'+q+'</option>'; }).join('');
 
-    $b('bMeta').textContent='· 레코드 '+B.records.length+'건 · 가속기 '+Object.keys(B.hw).length+'종 · 기준일 '+B.updated;
+    var withC=B.records.filter(function(r){return r.c}).length;
+    $b('bMeta').textContent='· 기록 '+B.records.length+'건 · GPU '+Object.keys(B.hw).length+'종 · 기준일 '+B.updated;
     $b('bSrc').textContent='전력은 제조사가 적어둔 정격이라 실제 쓰는 양보다 넉넉하게 잡힙니다. CPU와 냉각은 안 들어갔습니다. '+
       '클라우드 값은 '+(B.src.price_by||[]).join(' · ')+'가 '+B.src.as_of+'에 내건 정가고, 약정하면 이보다 쌉니다. '+
-      '둘 다 견적이 아니라 서로 견주는 잣대로 봐주십시오.';
+      '동시 사용자 수는 '+B.records.length+'건 가운데 '+withC+'건만 공개돼 있어(MLPerf는 배치 크기를 안 밝힙니다) '+
+      '가로축은 모두가 밝힌 모델 크기로 잡았습니다. 둘 다 견적이 아니라 서로 견주는 잣대로 봐주십시오.';
 
-    ['bGpu','bQ','bAct','bCon','bGn','bMon','bOut','bKwh'].forEach(function(id){
-      $b(id).addEventListener('input', calc);
-      $b(id).addEventListener('change', calc);
-    });
+    ['bGpu','bQ','bTot','bAct','bCon','bGn','bMon','bOut','bKwh'].forEach(function(id){
+      var e=$b(id); if(!e) return;
+      e.addEventListener('input', calc); e.addEventListener('change', calc); });
     calc();
   }
 
-  /* 물리 상한: 디코드 1스텝은 활성 가중치를 한 번 읽는다
-     tok/s ≤ 동시성 × 대역폭 ÷ 활성바이트 */
+  /* 물리 상한 — 디코드 한 스텝은 활성 가중치를 한 번 읽는다 */
   function ceil(hw, actB, q, con){
     if(!hw||!hw.bw||!actB) return null;
-    var bytes = actB*1e9*(B.bpp[q]||1);
-    return con * (hw.bw*1e12) / bytes;
+    return con*(hw.bw*1e12)/(actB*1e9*(B.bpp[q]||1));
   }
 
   function calc(){
     var g=$b('bGpu').value; if(!g||!B) return;
     var hw=B.hw[g], q=$b('bQ').value,
-        act=+$b('bAct').value||1, con=+$b('bCon').value||1,
-        gn=Math.max(1,+$b('bGn').value||1),
-        mon=+$b('bMon').value||1, out=+$b('bOut').value||1,
-        kwh=+$b('bKwh').value||0;
+        tot=+$b('bTot').value||1, act=+$b('bAct').value||1,
+        con=+$b('bCon').value||1, mon=+$b('bMon').value||1,
+        out=+$b('bOut').value||1, kwh=+$b('bKwh').value||0;
 
     var peers=B.records.filter(function(r){return r.g===g});
-    var cap = ceil(hw, act, q, con);
+    var cap=ceil(hw, act, q, con);
 
-    /* 같은 가속기·비슷한 동시성의 실측 중앙값을 귀사 예상 처리량으로 쓴다 */
-    var near=peers.filter(function(r){return r.c && r.c>=con/4 && r.c<=con*4});
-    var basis = near.length? near : peers;
-    var med=null;
+    /* 비슷한 크기 모델의 실측에 견준다 */
+    var near=peers.filter(function(r){return r.tb && r.tb>=tot/2.5 && r.tb<=tot*2.5});
+    var basis=near.length>=3?near:peers;
+    var est=null;
     if(basis.length){
       var a=basis.map(function(r){return r.pg}).sort(function(x,y){return x-y});
-      med=a[Math.floor(a.length/2)];
+      est=a[Math.floor(a.length/2)];
     }
-    var est = med;
-    if(est && cap) est=Math.min(est, cap);       /* 물리 상한을 넘지 않게 */
+    var cut=false;
+    if(est&&cap&&est>cap){ est=cap; cut=true; }
 
-    draw(peers, g, cap, con, est);
+    draw(peers, cap, tot, est);
 
     if(!est){
       $b('bNote').innerHTML='<p>이 GPU는 기록이 모자라서 추정하지 않겠습니다. 없는 숫자를 지어내는 것보다 낫습니다.</p>';
@@ -957,95 +952,85 @@ ${msg}`);
       return;
     }
 
-    /* 순위 — GPU당 처리량 기준 백분위 */
     var better=peers.filter(function(r){return r.pg>est}).length;
-    var pct=Math.max(1,Math.round((better+1)/peers.length*100));
-    $b('kRank').textContent='상위 '+pct+'%';
+    $b('kRank').textContent='상위 '+Math.max(1,Math.round((better+1)/peers.length*100))+'%';
     $b('kRankSub').textContent=g+' 기록 '+peers.length+'건 가운데';
 
-    /* 필요 장수 */
-    var needTok = mon*out;
-    var perGpuMonth = est*3600*24*30.4;
-    var need=Math.max(1, Math.ceil(needTok/perGpuMonth));
+    var needTok=mon*out, need=Math.max(1, Math.ceil(needTok/(est*3600*24*30.4)));
     $b('kGpu').textContent=FX(need)+'장';
     $b('kGpuSub').textContent='한 달 '+FX(Math.round(needTok/1e6))+'백만 토큰을 넘기려면';
 
-    /* 전력 */
-    if(hw.w){
-      var kW=need*hw.w/1000, mWh=kW*730;
+    if(hw.w){ var kW=need*hw.w/1000, mWh=kW*730;
       $b('kPow').textContent=FX(Math.round(mWh*kwh))+'원';
       $b('kPowSub').textContent=FX(Math.round(mWh))+' kWh · '+kW.toFixed(1)+' kW';
     } else { $b('kPow').textContent='—'; $b('kPowSub').textContent='이 GPU는 정격이 공개 안 됨'; }
 
-    /* 클라우드 */
-    if(hw.usd){
-      var usd=need*hw.usd*730;
+    if(hw.usd){ var usd=need*hw.usd*730;
       $b('kUsd').textContent=FX(Math.round(usd*1380/1e4))+'만원';
       $b('kUsdSub').textContent='$'+FX(Math.round(usd))+' · 환율 1,380원';
     } else { $b('kUsd').textContent='—'; $b('kUsdSub').textContent='공개된 시간당 단가가 없음'; }
 
-    var over = cap && med && med>cap;
+    var others=basis.filter(function(r){return !r.own}).length;
     $b('bNote').innerHTML='<p>이 설정이면 <strong>GPU 한 장에 초당 '+FX(Math.round(est))+'토큰</strong>쯤 나옵니다. '+
-      g+' 기록 '+basis.length+'건의 한가운데 값에서 뽑았고'+(over?', 물리적으로 불가능한 만큼은 잘라냈습니다':'')+'. '+
-      '<b>직접 잰 게 아니라 남의 기록에 견줘 본 값</b>이라, 모델이나 서버 설정이 다르면 달라집니다. '+
+      tot+'B 안팎 모델을 '+g+'에서 돌린 기록 '+basis.length+'건'+
+      (others?'(남이 잰 것 '+others+'건 포함)':'')+'의 한가운데 값입니다'+
+      (cut?'. 원래 중앙값은 물리적으로 불가능한 수준이라 상한까지 낮췄습니다':'')+'. '+
+      '<b>직접 잰 게 아니라 남의 기록에 견줘 본 값</b>이라 모델이나 서버 설정이 다르면 달라집니다. '+
       '도입 검토하실 때 쓰시는 장비에서 직접 재 드립니다.'+
       (cap?' 참고로 이 조합이 물리적으로 넘을 수 없는 선은 초당 '+FX(Math.round(cap))+'토큰입니다.':'')+'</p>';
 
-    var top=peers.slice().sort(function(a,b){return b.pg-a.pg}).slice(0,8);
-    $b('bTop').innerHTML=top.map(function(r,i){
-      return '<tr'+(r.own?' class="mine"':'')+'><td>'+(i+1)+'</td><td>'+(r.m||'—')+
-        '</td><td>'+(r.by||'—')+'</td><td class="n">'+(r.c||'—')+
-        '</td><td class="n">'+FX(r.pg)+'</td><td><span class="gr g-'+(r.gr||'')+'">'+(r.gr||'—')+'</span></td></tr>';
-    }).join('');
+    $b('bTop').innerHTML=peers.slice().sort(function(a,b){return b.pg-a.pg}).slice(0,8)
+      .map(function(r,i){
+        return '<tr'+(r.own?' class="mine"':'')+'><td>'+(i+1)+'</td><td>'+(r.m||'—')+
+          '</td><td>'+(r.by||'—')+'</td><td class="n">'+(r.tb?r.tb+'B':'—')+
+          '</td><td class="n">'+FX(r.pg)+'</td><td><span class="gr g-'+(r.gr||'')+'">'+(r.gr||'—')+'</span></td></tr>';
+      }).join('');
   }
 
-  function draw(peers, g, cap, con, est){
-    var xs=peers.map(function(r){return r.c||1}).concat([con]),
-        ys=peers.map(function(r){return r.pg}).concat(est?[est]:[]);
-    var x0=Math.max(1,Math.min.apply(null,xs)), x1=Math.max.apply(null,xs),
+  function draw(peers, cap, tot, est){
+    var pts=peers.filter(function(r){return r.tb});
+    var xs=pts.map(function(r){return r.tb}).concat([tot]),
+        ys=pts.map(function(r){return r.pg}).concat(est?[est]:[]);
+    if(!xs.length) { $b('plot').innerHTML=''; return; }
+    var x0=Math.max(.3,Math.min.apply(null,xs)), x1=Math.max.apply(null,xs),
         y0=Math.max(.5,Math.min.apply(null,ys)), y1=Math.max.apply(null,ys);
     x1=Math.max(x1,x0*2); y1=Math.max(y1,y0*2);
-    var lx=function(v){return L+(Math.log10(Math.max(v,x0))-Math.log10(x0))/(Math.log10(x1)-Math.log10(x0))*(W-L-R)},
-        ly=function(v){return H-Bm-(Math.log10(Math.max(v,y0))-Math.log10(y0))/(Math.log10(y1)-Math.log10(y0))*(H-T-Bm)};
+    var lx=function(v){return L+(Math.log10(Math.min(Math.max(v,x0),x1))-Math.log10(x0))/(Math.log10(x1)-Math.log10(x0))*(W-L-R)},
+        ly=function(v){return H-Bm-(Math.log10(Math.min(Math.max(v,y0),y1))-Math.log10(y0))/(Math.log10(y1)-Math.log10(y0))*(H-T-Bm)};
 
-    var s='<g font-family="IBM Plex Sans KR, sans-serif">';
-    /* 격자 */
-    for(var p=Math.ceil(Math.log10(y0)); p<=Math.floor(Math.log10(y1)); p++){
-      var yy=ly(Math.pow(10,p));
+    var s='<g font-family="IBM Plex Sans KR, sans-serif">', p;
+    for(p=Math.ceil(Math.log10(y0)); p<=Math.floor(Math.log10(y1)); p++){
+      var yy=ly(Math.pow(10,p)), lab=Math.pow(10,p);
       s+='<line x1="'+L+'" y1="'+yy+'" x2="'+(W-R)+'" y2="'+yy+'" stroke="#DCD6C9" stroke-dasharray="2 3"/>'+
          '<text x="'+(L-7)+'" y="'+(yy+4)+'" text-anchor="end" font-size="9.5" fill="#8A8F98">'+
-         (Math.pow(10,p)>=1000?(Math.pow(10,p)/1000)+'k':Math.pow(10,p))+'</text>';
+         (lab>=1000?(lab/1000)+'k':lab)+'</text>';
     }
-    for(var q2=Math.ceil(Math.log10(x0)); q2<=Math.floor(Math.log10(x1)); q2++){
-      var xx=lx(Math.pow(10,q2));
-      s+='<text x="'+xx+'" y="'+(H-Bm+16)+'" text-anchor="middle" font-size="9.5" fill="#8A8F98">'+Math.pow(10,q2)+'</text>';
+    for(p=Math.ceil(Math.log10(x0)); p<=Math.floor(Math.log10(x1)); p++){
+      var xx=lx(Math.pow(10,p));
+      s+='<text x="'+xx+'" y="'+(H-Bm+16)+'" text-anchor="middle" font-size="9.5" fill="#8A8F98">'+Math.pow(10,p)+'B</text>';
     }
     s+='<line x1="'+L+'" y1="'+(H-Bm)+'" x2="'+(W-R)+'" y2="'+(H-Bm)+'" stroke="#C4BCAB"/>'+
        '<line x1="'+L+'" y1="'+T+'" x2="'+L+'" y2="'+(H-Bm)+'" stroke="#C4BCAB"/>'+
-       '<text x="'+((W+L)/2)+'" y="'+(H-8)+'" text-anchor="middle" font-size="11" fill="#4A515C">동시 사용자 (로그)</text>'+
-       '<text x="14" y="'+((H-Bm+T)/2)+'" text-anchor="middle" font-size="11" fill="#4A515C" transform="rotate(-90 14 '+((H-Bm+T)/2)+')">GPU당 tok/s (로그)</text>';
+       '<text x="'+((W+L)/2)+'" y="'+(H-8)+'" text-anchor="middle" font-size="11" fill="#4A515C">모델 크기 · 총 파라미터 (로그)</text>'+
+       '<text x="14" y="'+((H-Bm+T)/2)+'" text-anchor="middle" font-size="11" fill="#4A515C" transform="rotate(-90 14 '+((H-Bm+T)/2)+')">GPU 한 장당 초당 토큰 (로그)</text>';
 
-    /* 물리 상한선 */
     if(cap){
-      var off = cap>y1, cy = off ? T+4 : ly(cap);
-      s+='<line x1="'+L+'" y1="'+cy+'" x2="'+(W-R)+'" y2="'+cy+'" stroke="#B0432C" stroke-width="1.6" stroke-dasharray="6 4" opacity="'+(off?'.45':'1')+'"/>'+
-         '<text x="'+(W-R-4)+'" y="'+(cy+(off?14:-6))+'" text-anchor="end" font-size="10" font-weight="700" fill="#B0432C">물리 상한 '+
-         FX(Math.round(cap))+(off?' (축 밖)':'')+'</text>';
+      var off=cap>y1, cy=off?T+4:ly(cap);
+      s+='<line x1="'+L+'" y1="'+cy+'" x2="'+(W-R)+'" y2="'+cy+'" stroke="#B0432C" stroke-width="1.6" stroke-dasharray="6 4" opacity="'+(off?'.4':'1')+'"/>'+
+         '<text x="'+(W-R-4)+'" y="'+(cy+(off?14:-6))+'" text-anchor="end" font-size="10" font-weight="700" fill="#B0432C">'+
+         '넘을 수 없는 선 '+FX(Math.round(cap))+(off?' (축 밖)':'')+'</text>';
     }
-    /* 남의 기록 */
-    peers.forEach(function(r){
-      if(!r.c) return;
-      s+='<circle cx="'+lx(r.c).toFixed(1)+'" cy="'+ly(r.pg).toFixed(1)+'" r="'+(r.own?4.4:3.1)+
-         '" fill="'+(r.own?'#3963CF':'#B8B0A0')+'" opacity="'+(r.own?'.95':'.55')+'"><title>'+
-         (r.m||'')+' · '+(r.by||'')+' · c'+r.c+' · '+FX(r.pg)+' tok/s/GPU · '+(r.gr||'')+'</title></circle>';
+    pts.forEach(function(r){
+      s+='<circle cx="'+lx(r.tb).toFixed(1)+'" cy="'+ly(r.pg).toFixed(1)+'" r="'+(r.own?4.6:3.2)+
+         '" fill="'+(r.own?'#3963CF':'#B8B0A0')+'" opacity="'+(r.own?'.95':'.5')+'"><title>'+
+         (r.m||'')+' · '+(r.by||'')+' · '+(r.tb||'?')+'B · '+FX(r.pg)+' tok/s/GPU · '+(r.gr||'')+'</title></circle>';
     });
-    /* 귀사 */
     if(est){
-      var px=lx(con), py=ly(est);
-      s+='<line x1="'+px+'" y1="'+T+'" x2="'+px+'" y2="'+(H-Bm)+'" stroke="#2A7A4F" stroke-dasharray="3 3" opacity=".5"/>'+
-         '<circle cx="'+px+'" cy="'+py+'" r="12" fill="#2A7A4F" opacity=".16"/>'+
+      var px=lx(tot), py=ly(est);
+      s+='<circle cx="'+px+'" cy="'+py+'" r="13" fill="#2A7A4F" opacity=".15"/>'+
          '<circle cx="'+px+'" cy="'+py+'" r="6" fill="#2A7A4F" stroke="#fff" stroke-width="2"/>'+
-         '<text x="'+(px+14)+'" y="'+(py-10)+'" font-size="11.5" font-weight="700" fill="#2A7A4F">귀사</text>';
+         '<text x="'+(px<W-90?px+14:px-14)+'" y="'+(py-11)+'" text-anchor="'+(px<W-90?'start':'end')+
+         '" font-size="11.5" font-weight="700" fill="#2A7A4F">지금 설정</text>';
     }
     $b('plot').innerHTML=s+'</g>';
   }