{"id":9573,"date":"2025-08-19T07:38:21","date_gmt":"2025-08-19T07:38:21","guid":{"rendered":"https:\/\/dev.sparxitsolutions.com\/blog\/?p=9573"},"modified":"2026-04-20T11:09:06","modified_gmt":"2026-04-20T11:09:06","slug":"test-post","status":"publish","type":"post","link":"https:\/\/dev.sparxitsolutions.com\/blog\/test-post\/","title":{"rendered":"test post"},"content":{"rendered":"<style>\n.paiW{all:revert;display:block;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Arial,sans-serif;font-size:14px;line-height:1.5;color:#111827;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:24px;max-width:720px;margin:0 auto 24px;}\n.paiW *{all:revert;box-sizing:border-box;font-family:inherit;}\n.paiW p,.paiW span,.paiW div,.paiW label{display:revert;margin:0;padding:0;}\n\n.paiHint{display:block!important;font-size:13px!important;color:#6b7280!important;margin-bottom:20px!important;}\n\n.paiSeqWrap{text-align:center!important;display:block!important;margin-bottom:4px!important;}\n.paiSeqLbl{display:block!important;font-size:10px!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#94a3b8!important;margin-bottom:10px!important;}\n\n.paiToks{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;gap:8px!important;margin-bottom:8px!important;}\n\n.paiTok{\n  all:unset!important;\n  display:inline-flex!important;align-items:center!important;justify-content:center!important;\n  min-width:58px!important;height:40px!important;padding:0 14px!important;\n  border-radius:8px!important;font-size:13.5px!important;font-weight:500!important;\n  cursor:pointer!important;\n  background:#EEEDFE!important;color:#3C3489!important;\n  border:1.5px solid #a5b4fc!important;\n  transition:transform .15s,box-shadow .15s!important;\n  user-select:none!important;-webkit-user-select:none!important;\n  box-sizing:border-box!important;\n}\n.paiTok:hover{transform:translateY(-2px)!important;box-shadow:0 4px 10px rgba(83,74,183,.2)!important;}\n.paiTok.on{background:#FEF3C7!important;color:#92400e!important;border:2px solid #F59E0B!important;}\n\n.paiArrow{font-size:20px!important;color:#9ca3af!important;display:inline-flex!important;align-items:center!important;padding:0 4px!important;line-height:1!important;}\n\n.paiMBox{\n  all:unset!important;\n  display:inline-flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;\n  background:#d1fae5!important;border:1.5px solid #6ee7b7!important;border-radius:10px!important;\n  padding:6px 18px!important;min-width:120px!important;height:48px!important;\n  box-sizing:border-box!important;\n}\n.paiMBox s1{display:block!important;font-size:13px!important;font-weight:600!important;color:#065f46!important;}\n.paiMBox s2{display:block!important;font-size:11px!important;color:#059669!important;}\n\n.paiMeta{display:block!important;text-align:center!important;font-size:11px!important;color:#9ca3af!important;margin:8px 0 14px!important;}\n.paiDivider{display:block!important;height:1px!important;background:#e5e7eb!important;margin:0 0 16px!important;}\n\n.paiFormulaWrap{display:block!important;text-align:center!important;margin-bottom:20px!important;}\n.paiFormulaLbl{display:block!important;font-size:10px!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#94a3b8!important;margin-bottom:6px!important;}\n.paiFormulaVal{position: static !important;display:block!important;font-size:13px!important;color:#1e293b!important;font-family:ui-monospace,\"Courier New\",monospace!important;font-weight:500!important;}\n\n.paiGrid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-bottom:12px!important;}\n@media(max-width:500px){.paiGrid{grid-template-columns:1fr!important;}}\n\n.paiCard{display:block!important;background:#f8fafc!important;border-radius:10px!important;padding:14px 16px!important;border:1px solid #e2e8f0!important;}\n.paiCardLbl{display:block!important;font-size:10px!important;font-weight:700!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#94a3b8!important;margin-bottom:10px!important;}\n\n.paiLogRow{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:3px 0!important;}\n.paiLogW{font-size:12.5px!important;font-weight:600!important;color:#1e293b!important;}\n.paiLogZ{font-size:11.5px!important;color:#64748b!important;font-family:ui-monospace,monospace!important;}\n\n.paiBarRow{display:flex!important;align-items:center!important;gap:8px!important;margin:5px 0!important;}\n.paiBarLbl{min-width:36px!important;font-size:12px!important;font-weight:600!important;color:#1e293b!important;}\n.paiBarTrack{flex:1!important;height:13px!important;background:#e2e8f0!important;border-radius:4px!important;overflow:hidden!important;display:block!important;}\n.paiBarFill{height:100%!important;border-radius:4px!important;display:block!important;transition:width .35s cubic-bezier(.4,0,.2,1)!important;}\n.paiBarVal{min-width:36px!important;text-align:right!important;font-size:11px!important;color:#64748b!important;}\n\n.paiEmpty{display:block!important;font-size:12px!important;color:#94a3b8!important;font-style:italic!important;}\n\n.paiTempLbl{display:block!important;font-size:10px!important;font-weight:700!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#94a3b8!important;margin-bottom:12px!important;}\n.paiTempRow{display:flex!important;align-items:center!important;gap:12px!important;margin-bottom:12px!important;}\n.paiTempRow label{all:unset!important;font-size:13px!important;color:#374151!important;white-space:nowrap!important;min-width:90px!important;display:inline!important;}\n.paiTempRow input[type=range]{all:unset!important;-webkit-appearance:auto!important;appearance:auto!important;flex:1!important;height:4px!important;cursor:pointer!important;accent-color:#6366f1!important;display:inline-block!important;vertical-align:middle!important;}\n.paiTval{position: static !important;font-size:14px!important;font-weight:700!important;color:#1e293b!important;min-width:30px!important;text-align:right!important;}\n\n.paiSampleRow{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;font-size:13px!important;color:#374151!important;}\n.paiPill{position: static !important;display:inline-block!important;padding:3px 14px!important;border-radius:20px!important;font-size:12px!important;font-weight:600!important;background:#eff6ff!important;color:#1d4ed8!important;border:1px solid #bfdbfe!important;}\n.paiHintTxt{position: static !important;font-size:11px!important;color:#94a3b8!important;font-style:italic!important;}\n<\/style>\n\n<div class=\"paiW\">\n\n  <span class=\"paiHint\">Click a token below to see how the model assigns probabilities to each possible next word.<\/span>\n\n  <div class=\"paiSeqWrap\">\n    <span class=\"paiSeqLbl\">Input Sequence<\/span>\n    <div class=\"paiToks\">\n      <span class=\"paiTok\" id=\"pt-the\"  onclick=\"pS('the')\">the<\/span>\n      <span class=\"paiTok\" id=\"pt-cat\"  onclick=\"pS('cat')\">cat<\/span>\n      <span class=\"paiTok\" id=\"pt-sat\"  onclick=\"pS('sat')\">sat<\/span>\n      <span class=\"paiTok\" id=\"pt-on\"   onclick=\"pS('on')\">on<\/span>\n      <span class=\"paiTok on\" id=\"pt-the2\" onclick=\"pS('the2')\">the<\/span>\n      <span class=\"paiArrow\">\u2192<\/span>\n      <div class=\"paiMBox\">\n        <s1>Model layers<\/s1>\n        <s2>P(next | context)<\/s2>\n      <\/div>\n    <\/div>\n    <span class=\"paiMeta\">Amber = query token &nbsp;\u00b7&nbsp; Purple = context<\/span>\n  <\/div>\n\n  <span class=\"paiDivider\"><\/span>\n\n  <div class=\"paiFormulaWrap\">\n    <span class=\"paiFormulaLbl\">What formula is active?<\/span>\n    <span class=\"paiFormulaVal\" id=\"pFormula\">P(w\u209c | w\u2081,\u2026,w\u209c\u208b\u2081) \u2014 select a token above<\/span>\n  <\/div>\n\n  <div class=\"paiGrid\">\n    <div class=\"paiCard\">\n      <span class=\"paiCardLbl\">Logits (raw scores)<\/span>\n      <div id=\"pLogits\"><span class=\"paiEmpty\">Select a token to see scores<\/span><\/div>\n    <\/div>\n    <div class=\"paiCard\">\n      <span class=\"paiCardLbl\">Softmax \u2192 Probabilities<\/span>\n      <div id=\"pBars\"><span class=\"paiEmpty\">Select a token to see distribution<\/span><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"paiCard\">\n    <span class=\"paiTempLbl\">Temperature &amp; Sampling<\/span>\n    <div class=\"paiTempRow\">\n      <label>Temperature<\/label>\n      <input type=\"range\" min=\"1\" max=\"20\" value=\"7\" step=\"1\" id=\"pSlider\" oninput=\"pTF(this.value)\">\n      <span class=\"paiTval\" id=\"pTval\">0.7<\/span>\n    <\/div>\n    <div class=\"paiSampleRow\">\n      <span>Sampled token:<\/span>\n      <span class=\"paiPill\" id=\"pOut\">\u2014<\/span>\n      <span class=\"paiHintTxt\" id=\"pHint\"><\/span>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<script>\n(function(){\nvar D={\n  the:{f:'P(w\u2082 | \"the\") \u2014 predicting after first token',l:[{w:'cat',z:3.1},{w:'dog',z:2.4},{w:'man',z:1.8},{w:'old',z:0.9},{w:'big',z:0.2}]},\n  cat:{f:'P(w\u2083 | \"the cat\") \u2014 predicting after two tokens',l:[{w:'sat',z:4.2},{w:'is',z:2.1},{w:'ran',z:1.4},{w:'and',z:0.6},{w:'had',z:0.1}]},\n  sat:{f:'P(w\u2084 | \"the cat sat\") \u2014 three tokens of context',l:[{w:'on',z:4.8},{w:'down',z:2.3},{w:'by',z:1.1},{w:'near',z:0.5},{w:'here',z:0.1}]},\n  on:{f:'P(w\u2085 | \"the cat sat on\") \u2014 four tokens',l:[{w:'the',z:5.1},{w:'a',z:3.2},{w:'my',z:1.6},{w:'its',z:0.7},{w:'her',z:0.3}]},\n  the2:{f:'P(w\u2086 | \"the cat sat on the\") \u2014 full context',l:[{w:'mat',z:5.8},{w:'floor',z:3.1},{w:'chair',z:1.9},{w:'roof',z:0.8},{w:'table',z:0.4}]}\n};\nvar BC=['#6366f1','#10b981','#f59e0b','#94a3b8','#cbd5e1'];\nvar cur=null,temp=0.7;\nfunction sm(ls,t){var s=ls.map(function(z){return z\/t;}),mx=Math.max.apply(null,s),ex=s.map(function(z){return Math.exp(z-mx);}),su=ex.reduce(function(a,b){return a+b;},0);return ex.map(function(e){return e\/su;});}\nfunction sp(ws,ps){var r=Math.random(),c=0;for(var i=0;i<ps.length;i++){c+=ps[i];if(r<=c)return ws[i];}return ws[ws.length-1];}\nfunction rb(){\n  if(!cur)return;\n  var ps=sm(cur.map(function(l){return l.z;}),temp);\n  document.getElementById('pBars').innerHTML=cur.map(function(l,i){\n    var p=(ps[i]*100).toFixed(1);\n    return '<div class=\"paiBarRow\"><span class=\"paiBarLbl\">'+l.w+'<\/span><div class=\"paiBarTrack\"><div class=\"paiBarFill\" style=\"width:'+p+'%;background:'+BC[i]+';\"><\/div><\/div><span class=\"paiBarVal\">'+p+'%<\/span><\/div>';\n  }).join('');\n  document.getElementById('pOut').textContent=sp(cur.map(function(l){return l.w;}),ps);\n}\nwindow.pS=function(id){\n  var d=D[id];if(!d)return;\n  cur=d.l;\n  document.getElementById('pFormula').textContent=d.f;\n  document.getElementById('pLogits').innerHTML=d.l.map(function(l){\n    return '<div class=\"paiLogRow\"><span class=\"paiLogW\">'+l.w+'<\/span><span class=\"paiLogZ\">z = '+l.z.toFixed(1)+'<\/span><\/div>';\n  }).join('');\n  rb();\n  ['the','cat','sat','on','the2'].forEach(function(t){\n    var e=document.getElementById('pt-'+t);\n    if(e){t===id?e.classList.add('on'):e.classList.remove('on');}\n  });\n};\nwindow.pTF=function(v){\n  temp=parseFloat(v)\/10;\n  document.getElementById('pTval').textContent=temp.toFixed(1);\n  document.getElementById('pHint').textContent=temp<0.5?'Deterministic \u2014 top token almost certain':temp>1.2?'Creative \u2014 flat distribution':'Balanced';\n  rb();\n};\npS('the2');\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.sparxitsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/9573"}],"collection":[{"href":"https:\/\/dev.sparxitsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.sparxitsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.sparxitsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.sparxitsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=9573"}],"version-history":[{"count":4,"href":"https:\/\/dev.sparxitsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/9573\/revisions"}],"predecessor-version":[{"id":9580,"href":"https:\/\/dev.sparxitsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/9573\/revisions\/9580"}],"wp:attachment":[{"href":"https:\/\/dev.sparxitsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=9573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.sparxitsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=9573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.sparxitsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=9573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}