https://blazskufca.com/tags/llms/Recent content in LLMs on Blaž ŠkufcaHugoen-usSat, 01 Aug 2026 00:00:00 +0000https://blazskufca.com/projects/llm-minesweeper/Sat, 01 Aug 2026 00:00:00 +0000https://blazskufca.com/projects/llm-minesweeper/<style> .pz{position:relative;width:100%;max-width:820px;margin:1.5rem auto 0.4rem;border:1px solid rgba(128,128,128,.3);border-radius:8px;overflow:hidden;background:#1e1e1e;} .pz img{display:block;width:100%;height:100%;object-fit:contain;cursor:grab;} .pz img:active{cursor:grabbing;} .pz-hint{max-width:820px;margin:0 auto 1.5rem;text-align:center;font-size:12px;font-family:monospace;opacity:.5;} /* Large diagrams break out wider than the text column so there's less panning. */ .pz.wide{max-width:none;width:min(1240px,94vw);left:50%;transform:translateX(-50%);} .pz.wide + .pz-hint{max-width:none;width:min(1240px,94vw);position:relative;left:50%;transform:translateX(-50%);margin:0 0 1.5rem;} /* Fullscreen button + fullscreen layout (fills the screen so big graphs are actually inspectable). */ .pz-fs{position:absolute;top:8px;right:8px;z-index:5;padding:2px 8px;font:12px/1 monospace;color:#ddd;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);border-radius:4px;cursor:pointer;opacity:.55;} .pz-fs:hover{opacity:1;} /* !important because the box carries an inline height (fallback + JS aspect fit). */ .pz:fullscreen{width:100vw!important;height:100vh!important;max-width:none!important;left:0;transform:none;border:0;border-radius:0;background:#1e1e1e;} .pz:fullscreen img{height:100%;} .vid{max-width:820px;margin:1.5rem auto;} .vid video{display:block;width:100%;height:auto;background:#000;} .vid-speed{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:8px;font:12px/1 monospace;} .vid-speed span{opacity:.5;} .vid-speed button{padding:4px 10px;font:12px/1 monospace;color:#ddd;background:#1a1a1a;border:1px solid #444;border-radius:6px;cursor:pointer;} .vid-speed button:hover{background:#2a2a2a;} .vid-speed button[aria-pressed="true"]{background:#ddd;color:#111;border-color:#ddd;} /* The theme gives tables min-width:400px, which pushes the whole page wide on a phone. Let them shrink to the column and scroll only if the content demands it. */ @media (max-width:684px){ .post-content table{display:block;min-width:0;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:.8em;} .post-content table th,.post-content table td{padding:8px 10px;} .post-content table code{word-break:break-word;} /* The per-box inline max-width:800px is wider than a phone, and the .wide breakout would push past the viewport — keep both inside the column. */ .pz{max-width:100%!important;} .pz.wide,.pz.wide + .pz-hint{width:100%;max-width:100%;left:auto;transform:none;margin-left:0;margin-right:0;} } </style> <script src="https://cdn.jsdelivr.net/npm/panzoom@9.4.3/dist/panzoom.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { var coarse = window.matchMedia && window.matchMedia('(pointer: coarse)').matches; function addFullscreenButton(box, onChange) { var btn = document.createElement('button'); btn.className = 'pz-fs'; btn.type = 'button'; btn.textContent = '⛶ fullscreen'; btn.addEventListener('click', function (e) { e.stopPropagation(); if (document.fullscreenElement === box) { document.exitFullscreen(); } else if (box.requestFullscreen) { box.requestFullscreen(); } }); box.appendChild(btn); document.addEventListener('fullscreenchange', function () { btn.textContent = (document.fullscreenElement === box) ? '⛶ exit' : '⛶ fullscreen'; if (onChange) { onChange(); } }); } // The inline height on each box is only a pre-JS fallback. These SVGs range // from 4:1 wide to 1:2 tall, so a fixed 300px box letterboxes some and squeezes // others into an unreadable sliver. Once the image reports its natural size, // give the box that aspect ratio, clamped so nothing gets tiny or fills the screen. function fitBox(box, img) { if (document.fullscreenElement === box) { box.style.height = ''; return; } if (!img.naturalWidth || !img.naturalHeight) return; var ideal = box.clientWidth * img.naturalHeight / img.naturalWidth; var max = Math.min(window.innerHeight * 0.7, 900); box.style.height = Math.round(Math.min(Math.max(ideal, 160), max)) + 'px'; } var fitted = []; window.addEventListener('resize', function () { fitted.forEach(function (p) { fitBox(p.box, p.img); }); }); document.addEventListener('fullscreenchange', function () { fitted.forEach(function (p) { fitBox(p.box, p.img); }); }); document.querySelectorAll('.pz').forEach(function (box) { var img = box.querySelector('img'); if (!img) return; fitted.push({ box: box, img: img }); if (img.complete) { fitBox(box, img); } img.addEventListener('load', function () { fitBox(box, img); }); var hint = box.nextElementSibling; // Mobile / touch (or no library): tap to open the full SVG, keep native page scroll intact. if (coarse || !window.panzoom) { img.style.cursor = 'zoom-in'; box.addEventListener('click', function () { window.open(img.src, '_blank', 'noopener'); }); if (hint && hint.classList.contains('pz-hint')) hint.textContent = 'tap to open full-size'; return; } // Desktop / mouse: inline scroll-zoom + drag-pan. The whole graph is visible at rest // (object-fit: contain); minZoom 1 keeps that as the zoomed-out floor, and you zoom in from there. box.style.touchAction = 'none'; var pz = panzoom(img, { maxZoom: 30, minZoom: 1, bounds: true, boundsPadding: 0.05 }); img.addEventListener('dblclick', function () { pz.moveTo(0, 0); pz.zoomAbs(0, 0, 1); }); addFullscreenButton(box, function () { pz.moveTo(0, 0); pz.zoomAbs(0, 0, 1); }); }); }); document.addEventListener('DOMContentLoaded', function () { document.querySelectorAll('.vid').forEach(function (box) { var video = box.querySelector('video'); var bar = box.querySelector('.vid-speed'); if (!video || !bar) return; // The file on disk is already sped up 2x, so labels are real-time // multiples and the playbackRate we actually set is half the label. // Cheaper to decode than asking the browser for the full speed-up. var buttons = [1, 2, 4, 8].map(function (label) { var btn = document.createElement('button'); btn.type = 'button'; btn.textContent = label + '×'; btn.addEventListener('click', function () { video.playbackRate = label / 2; }); bar.appendChild(btn); return { btn: btn, rate: label / 2 }; }); // Driven off ratechange so the buttons also track the browser's own // speed menu, which Firefox hides in the right-click menu. function sync() { buttons.forEach(function (b) { b.btn.setAttribute('aria-pressed', b.rate === video.playbackRate ? 'true' : 'false'); }); } video.addEventListener('ratechange', sync); // Default to 4x real time. Reapplied on loadedmetadata because some // browsers reset playbackRate when the element loads its source. function applyDefault() { video.playbackRate = 2; sync(); } video.addEventListener('loadedmetadata', applyDefault); applyDefault(); }); }); </script> <h1 id="intro">Intro</h1> <p>Every office job in the 90s came with Minesweeper. Not as a perk — as a pressure valve. You compiled something, you waited, you cleared a 9x9, you went back to work.</p>