2f:T1137,class Interface { constructor(width) { this.isVisible = true; this.canvas = document.createElement('canvas'); d3.select(this.canvas).call(d3.zoom() .scaleExtent([0.1, 8]) .on("zoom", ({transform}) => {this.transform = transform})); this.transform = d3.zoomIdentity; this.width = Math.round(width); this.height = Math.round(this.width * 0.4); this.dpi = window.devicePixelRatio; this.canvas.width = Math.round(this.width * this.dpi); this.canvas.height = Math.round(this.height * this.dpi); this.canvas.style.width = this.width + 'px'; this.canvas.addEventListener('mousemove', this.onMouseMove); this.canvas.addEventListener('click', this.onClick); document.addEventListener('keydown', this.onKeyDown); this.root = new TokenNode(this, null, '', 1, true); this.mouseX = -1; this.mouseY = -1; this.demoMode = true; this.requestReady = true; this.lastCreated = null; this.nodeCreated = false; this.screenBbox = [0, 0, this.width, this.height]; this.tick(); } onKeyDown = e => { if (!this.isVisible) return; if (e.key === 'Enter') { this.demoMode = true; }; } onMouseMove = e => { const canvasBbox = this.canvas.getBoundingClientRect(); const [x0, y0, w, h] = this.screenBbox; this.mouseX = x0 + w * (e.clientX - canvasBbox.left) / this.width; this.mouseY = y0 + h * (e.clientY - canvasBbox.top) / this.height; } onClick = e => { if (!TokenNode.hovered) return; const {parent} = TokenNode.hovered; if (!parent) return; for (const child of parent.allChildren) { if (!child.isVisible) { child.isVisible = true; this.demoMode = false; this.lastCreated = child; break; } } } onRequestReady = () => { if (!this.isVisible) return; const source = TokenNode.hovered || this.root; const fetchTokensLimit = 100; function getTargetTokenNode(source) { let target = source; let i = 0; for (; i this.screenBbox[3]) { this.demoMode = false; } const maxInvisible = this.root.findMaxInvisible(); if (maxInvisible) { maxInvisible.isVisible = true; this.lastCreated = maxInvisible; this.nodeCreated = true; } } if (target === null) { this.requestReady = true; } else { target.loadState = 'LOADING'; const prefix = target.prefix.join(''); // console.log(prefix); this.requestReady = false; mockGptRequest(prefix, response => { target.allChildren = response.map(([prob, token], tokenNum) => { return new TokenNode(this, target, token, prob, tokenNum === 0); }); target.loadState = 'LOADED'; this.nodeCreated = true; this.requestReady = true; }); } } tick = () => { if (this.isVisible) { window.requestAnimationFrame(() => this.tick()); } this.screenBbox = [ -this.transform.x / this.transform.k, -this.transform.y / this.transform.k, this.width / this.transform.k, this.height / this.transform.k, ]; this.canvas.style.cursor = TokenNode.hovered ? 'pointer' : 'default'; this.root.tick(); this.root.setBbox(); if (this.requestReady) { this.onRequestReady(); if (this.nodeCreated) { this.root.tick(); this.nodeCreated = false; } } const ctx = this.canvas.getContext('2d'); ctx.save(); ctx.scale(this.dpi, this.dpi); ctx.clearRect(0, 0, this.width, this.height); ctx.translate(this.transform.x, this.transform.y); ctx.scale(this.transform.k, this.transform.k); // ctx.strokeStyle = 'black'; // ctx.lineWidth = 10; // ctx.strokeRect(...this.screenBbox); this.root.draw(ctx); // ctx.fillStyle = 'gray'; // ctx.fillRect(this.mouseX - 5, this.mouseY - 5, 10, 10); ctx.restore(); } }30:T12fb,class TokenNode { static hovered = null; static nodesVPad = 5; constructor(int, parent, token, prob=1, isVisible=false) { this.int = int; this.prob = prob; this.dx = 20; this.dy = 20; this.isVisible = isVisible; this.parent = parent; this.token = token; this.fontSize = 20; this.tokenWidth = token.length * this.fontSize * 0.6; this.tokenHeight = this.fontSize * 1.2; this.fullHeight = this.tokenHeight; this.linesPadLeft = 0; this.prefix = []; this.level = 0; let cur = this; while (cur.parent) { this.level += 1; this.prefix.unshift(cur.token); cur = cur.parent; } this.allChildren = null; this.loadState = 'NOT_LOADED'; } forEachVisibleChild(fun) { if (!this.allChildren) return; let childNum = 0; return this.allChildren.forEach(child => { if (!child.isVisible) return; fun(child, childNum); childNum += 1; }); } tick() { if (this.parent === null) TokenNode.hovered = null; this.childrenCount = 0; this.forEachVisibleChild(child => { this.childrenCount += 1; }); let targetLinesPadLeft = 20; if (this.childrenCount <= 1) { targetLinesPadLeft = 0; } this.linesPadLeft = this.linesPadLeft * 0.9 + targetLinesPadLeft * 0.1; this.forEachVisibleChild(child => { child.tick(); }); this.fullHeight = -TokenNode.nodesVPad; this.forEachVisibleChild(child => { child.dx = this.tokenWidth + this.linesPadLeft; child.dy = TokenNode.nodesVPad + this.fullHeight; child.setBbox(); const childHovered = isPtInRect([this.int.mouseX, this.int.mouseY], child.tokenBbox); if (childHovered) { TokenNode.hovered = child; } this.fullHeight += TokenNode.nodesVPad + child.fullHeight; }); this.fullHeight = Math.max( this.fullHeight, this.tokenHeight, ); } setBbox() { let x0 = 0, y0 = 0, cur = this; while (true) { x0 += cur.dx; y0 += cur.dy; cur = cur.parent; if (!cur) break; } this.tokenBbox = [x0, y0, this.tokenWidth, this.tokenHeight]; } isInScreen() { if (!this.tokenBbox) return false; return isRectInsideRect(this.tokenBbox, this.int.screenBbox); } findMaxInvisible() { let maxProb = 0; let maxProbNode = null; if (!this.isVisible && (this.parent === null || this.parent.isInScreen())) { maxProb = this.prob; maxProbNode = this; } if (!this.allChildren) return maxProbNode; for (const child of this.allChildren) { const curMax = child.findMaxInvisible(); if (curMax && curMax.prob > maxProb) { maxProb = curMax.prob; maxProbNode = curMax; } } return maxProbNode; } drawToken(ctx) { ctx.strokeStyle = TokenNode.hovered === this ? 'black' : 'lightgray'; ctx.lineWidth = 1; ctx.beginPath(); ctx.roundRect(0, 0, this.tokenWidth, this.tokenHeight, this.fontSize * 0.2); ctx.stroke(); ctx.fillStyle = 'black'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.font = `bold ${this.fontSize}px JetBrains Mono, monospace`; ctx.fillText(this.token, this.tokenWidth / 2, this.tokenHeight / 2); if (TokenNode.hovered && TokenNode.hovered.parent === this.parent) { ctx.strokeStyle = 'white'; ctx.lineWidth = 3; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.textAlign = 'right'; ctx.fillStyle = 'orange'; const text = (this.prob * 100).toFixed(2) + '%'; ctx.fillStyle = 'black'; const labelWidth = this.fontSize * text.length * 0.6; ctx.fillRect(-labelWidth - 5, 0, labelWidth, this.tokenHeight); ctx.fillStyle = 'white'; ctx.fillText(text, -5, this.tokenHeight / 2); } } drawLines(ctx) { if (this.linesPadLeft < 1) return; const initY = this.tokenHeight / 2; let curY = initY; ctx.strokeStyle = 'gray'; const midX = this.tokenWidth + this.linesPadLeft / 2; this.forEachVisibleChild((child, childNum) => { ctx.beginPath(); ctx.moveTo(this.tokenWidth, initY); if (childNum >= 1) { ctx.bezierCurveTo( midX, initY, midX, initY, midX, this.tokenHeight, ); ctx.lineTo(midX, curY - this.tokenHeight / 2); ctx.bezierCurveTo( midX, curY, midX, curY, this.tokenWidth + this.linesPadLeft, curY, ); } else { ctx.lineTo(this.tokenWidth + this.linesPadLeft, curY); } ctx.stroke(); curY += TokenNode.nodesVPad + child.fullHeight; }); } draw(ctx) { ctx.save(); ctx.translate(this.dx, this.dy); this.drawToken(ctx); this.drawLines(ctx); this.forEachVisibleChild(child => { child.draw(ctx); }); ctx.restore(); } }31:[] 2d:{"title":"GPT tree","cells":[{"id":0,"value":"# GPT tree","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"function mockGptRequest(prefix, callback) {\n function generateStr() {\n let res = '';\n const charCount = Math.random() * 10;\n for (let i=0; i n / sum);\n const res = probs.map(prob => [prob, generateStr()]);\n setTimeout(() => callback(res), 100);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"mockGptRequest('hello', console.log)","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"function tokenDiv(token) {\n const res = document.createElement('div');\n res.style.display = 'inline-block';\n res.style.outline = '1px solid transparent';\n res.style.cursor = 'pointer';\n res.style.whiteSpace = 'pre';\n res.style.fontFamily = 'JetBrains Mono, monospace';\n res.style.fontSize = '20px';\n res.style.fontWeight = 'bold';\n res.onmouseenter = () => {\n res.style.outline = '1px solid black';\n res.style.background = '#f8f8f8';\n };\n res.onmouseleave = () => {\n res.style.outline = '1px solid transparent';\n res.style.background = 'transparent';\n };\n res.innerText = token;\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"html`` || html`${tokenDiv('Hello')}${tokenDiv(' world!')}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"function isPtInRect([x, y], [x0, y0, w, h]) {\n return x0 <= x && x <= x0 + w && y0 <= y && y <= y0 + h;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"function isRectInsideRect([x0a, y0a, wa, ha], [x0b, y0b, wb, hb]) {\n const x1a = x0a + wa;\n const y1a = y0a + ha;\n const x1b = x0b + wb;\n const y1b = y0b + hb;\n return x0b <= x0a && x1a <= x1b && y0b <= y0a && y1a <= y1b;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"{\n const int = new Interface(width);\n invalidation.then(() => int.isVisible = false);\n return int.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}