Overview › Code › R62
Code · blind round

R62 · Huffman tree from letter frequencies

blind round 4/8 local models answered

Answers below are anonymized and shuffled. Read, judge, pick a favourite — then scroll down and reveal the models.

The reveal also holds a frontier reference on the same task (Claude Opus 5) — kept out of sight here so it cannot steer your judgement.

Show task 
Create ONE self-contained HTML file (STRICT LIMIT: max 120 lines total) that builds a Huffman code from the letter frequencies of a fixed sample sentence and animates it on a <canvas>. Show the priority queue of nodes, merge the two smallest nodes one step at a time, and draw the growing binary tree with its frequency labels. When the tree is complete, walk it to display the code word of each letter plus the total bits before and after compression. Smooth requestAnimationFrame animation, NO user input, starts immediately and keeps running (restart with a fresh random instance when finished). No external libraries, no comments needed. Output ONLY the HTML file content, nothing else.

The answers — blind

Local models (Brain cluster) — identical prompt, anonymized order
MODEL Adeepseek-r1:14bERRBLANKFORMAT
Show code
```html
<!DOCTYPE html>
<html><head><title>Huffman Tree Animation</title></head><body style="margin:0;overflow:hidden;background:#f0f0f0;">
<canvas id="c" width=800 height=600></canvas>
<script>
let canvas=document.getElementById('c'), ctx=canvas.getContext('2d');
const sentence='The quick brown fox jumps over the lazy dog.';
const freq={};for(let c of sentence.toLowerCase())if(c.match(/[a-z]/))freq[c]=(freq[c]||0)+1;
const nodes=[];Object.entries(freq).forEach(([k,v])=>nodes.push({char:k,freq:v,left:null,right:null}));

function buildTree(nodes){
    while(nodes.length>1){
        nodes.sort((a,b)=>a.freq - b.freq);
        const left=nodes.shift();
        const right=nodes.shift();
        new Node({...{freq:left.freq+right.freq},left:right.right?right:{...right},right:left});
        nodes.push(new Node({freq:left.freq+right.freq,left,right}));
    }
}

function drawNodes(node,x,y,dx,dy){
    ctx.beginPath();ctx.arc(x,y,10,0,Math.PI*2);ctx.fillStyle='white';ctx.fill();
    if(!node.left&&!node.right){ctx.fillStyle='black';ctx.fillText(node.char.toUpperCase(),x-4,y+3)}
    else{const midX=x+(dx)/2;const midY=y+dy/2 -5;
        ctx.beginPath();ctx.moveTo(x,y);ctx.lineTo(midX,midY);
        drawNodes(node.left,midX-10, y+ dy/2,10, -dy/2);
        drawNodes(node.right,midX+10, y+ dy/2,10, -dy/2)}
}

function animate(tree){
    let time=0;let lastTime=time;
    function update(t){time+=t-lastTime;lastTime=t;
        ctx.clearRect(0,0,800,600);drawNodes(tree,400,300,150,Math.pow(2,-time/400));}
    requestAnimationFrame(update);
}

let tree=buildTree([...nodes]);animate(tree);

function Node(opts){return opts;}
</script>
</body></html>
```
MODEL Bmistral-small:24bDNF
No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.
MODEL Cqwen3:14bERRBLANKLIMFORMAT
Show code
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Huffman Coding Visualization</title>
    <style>
        body { font-family: monospace; background: #111; color: #eee; display: flex; flex-direction: column; align-items: center; margin: 0; padding-top: 20px; }
        #canvasContainer { border: 1px solid #333; margin-bottom: 20px; background: #000; }
        h2 { color: #4CAF50; }
    </style>
</head>
<body>

    <h2>Huffman Tree Construction</h2>
    <div id="canvasContainer">
        <canvas id="huffmanCanvas" width="900" height="600"></canvas>
    </div>

    <h3>Results</h3>
    <pre id="results"></pre>

    <script>
        const canvas = document.getElementById('huffmanCanvas');
        const ctx = canvas.getContext('2d');
        let animationFrameId;

        function setup(sentence) {
            const freq = {};
            for (const char of sentence) {
                freq[char] = (freq[char] || 0) + 1;
            }

            let nodes = Object.keys(freq).map(char => ({ char: char, freq: freq[char], left: null, right: null, parent: null }));
            nodes.forEach(node => node.isLeaf = true);

            // Initialize the priority queue (array)
            let pq = [...nodes];

            return { pq, initialNodes: nodes };
        }

        function buildTree(pq) {
            const treeNodes = [];
            while (pq.length > 1) {
                pq.sort((a, b) => a.freq - b.freq);
                let left = pq.shift();
                let right = pq.shift();

                let parent = { char: null, freq: left.freq + right.freq, left: left, right: right, isLeaf: false };
                parent.left.parent = parent;
                parent.right.parent = parent;

                treeNodes.push(parent);
                pq.push(parent);
            }
            return pq[0]; // The root
        }

        let state = {};

        function drawTree(root, nodesToDraw) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            if (!root) return;

            const spacingX = canvas.width / (nodesToDraw.length + 1) * 2.5;
            const levelHeight = 60;
            let currentY = 30;

            function drawNode(node, x, y, depth) {
                const isLeaf = node.isLeaf;
                const label = isLeaf ? `${node.char}:${node.freq}` : `(${node.freq})`;

                // Draw the box for the current node (conceptual representation)
                ctx.strokeStyle = '#4CAF50';
                ctx.fillStyle = 'rgba(76, 175, 80, 0.1)';
                ctx.fillRect(x - 30, y - 20, 60, 40);
                ctx.strokeRect(x - 30, y - 20, 60, 40);

                // Draw label
                ctx.fillStyle = '#fff';
                ctx.fillText(label, x - 25, y + 10);
                ctx.fillText(`(${node.freq})`, x - 30, y - 10);


                if (isLeaf) {
                    ctx.fillStyle = '#2196F3';
                    ctx.fillRect(x - 30, y - 20, 60, 40);
                    ctx.strokeRect(x - 30, y - 20, 60, 40);
                }

                // Recurse for children (simplified layout)
                if (node.left) {
                    drawNode(node.left, x - spacingX * 1.5, y + levelHeight, depth + 1);
                }
                if (node.right) {
                    drawNode(node.right, x + spacingX * 1.5, y + levelHeight, depth + 1);
                }
            }

            // Start drawing from a relative center point for visual effect
            drawNode(root, canvas.width / 2, 40, 0);
        }


        function animateStep() {
            if (!state.currentPQ || state.currentPQ.length <= 1) {
                finalize();
                return;
            }

            // Show the current PQ state and nodes being processed
            drawTree(state.currentPQ[0], [...state.currentPQ]);

            let left = state.currentPQ[0];
            let right = state.currentPQ[1];
            
            if (left && right) {
                let parent = { char: null, freq: left.freq + right.freq, left: left, right: right, isLeaf: false };
                
                // Perform the merge operation
                state.currentPQ.splice(0, 2); // Remove left and right
                state.currentPQ.push(parent);

                // Redraw to show the new parent node taking place
                drawTree(state.currentPQ[0], [...state.currentPQ]);
            }


            animationFrameId = requestAnimationFrame(animateStep);
        }
        
        function traverseAndCalculate(root) {
            const codes = {};
            let totalBits = 0;

            function dfs(node, code) {
                if (node.isLeaf) {
                    codes[node.char] = code || '0'; // Handle single letter case
                    totalBits += node.freq * (code ? code.length : 1);
                } else {
                    if (node.left) dfs(node.left, code + '0');
                    if (node.right) dfs(node.right, code + '1');
                }
            }

            dfs(root, '');
            return { codes: codes, totalBits: totalBits };
        }

        function finalize() {
            cancelAnimationFrame(animationFrameId);
            const root = state.finalRoot;
            if (!root) return;

            const result = traverseAndCalculate(root);
            let message = "<h2>Huffman Codes Generated:</h2>";
            message += "<pre>";
            for (const char in result.codes) {
                message += `${char}: ${result.codes[char]}\n`;
            }
            message += `</pre>`;
            message += `<p><strong>Total Bits Before Compression:</strong> N/A (Fixed Sample)</p>`;
            message += `<p><strong>Total Bits After Compression:</strong> ${result.totalBits}</p>`;

            document.getElementById('results').innerHTML = message;
        }


        function run() {
            const sampleSentence = "the quick brown fox jumps over the lazy dog";
            state = setup(sampleSentence);
            processAnimation();
        }

        function processAnimation() {
            let pq = [...state.initialNodes];
            let history = [];

            // Animation loop simulation (pop, merge, push)
            while (pq.length > 1) {
                history.push([...pq]); // Save state before merge
                
                pq.sort((a, b) => a.freq - b.freq);
                let left = pq.shift();
                let right = pq.shift();

                let parent = { char: null, freq: left.freq + right.freq, left: left, right: right, isLeaf: false };
                left.parent = parent;
                right.parent = parent;

                history.push(parent); // Save the new merged node
                pq.push(parent);
            }
            state.finalRoot = pq[0];
            
            // --- Animation Control ---
            let historyIndex = 0;
            function animate() {
                if (historyIndex < history.length) {
                    const currentPQState = history[historyIndex];
                    state.currentPQ = [...currentPQState];
                    drawTree(null, state.currentPQ); // Draw the conceptual PQ state
                    historyIndex++;
                    animationFrameId = requestAnimationFrame(animate);
                } else {
                    // Animation finished, transition to final drawing and results
                    cancelAnimationFrame(animationFrameId);
                    drawTree(state.finalRoot, [...state.currentPQ]); 
                    finalize();
                }
            }

            animate();
        }


        run();
    </script>
</body>
</html>
```
MODEL Dqwen3.5:9bSTATLIMFORMAT
Show code
```html
<!DOCTYPE html>
<html>
<head><style>body{background:#111;margin:0;display:flex;justify-content:center;align-items:center;height:100vh;}canvas{border:1px solid #333;background:#222;}</style></head><body><canvas id="huffmanCanvas"></canvas><script>
const canvas = document.getElementById('huffmanCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 900;
canvas.height = 600;

let F = "this is a fixed sample sentence for huffman coding visualization";
let nodeQueue, rootNode, stepCount = 0, maxSteps = 0;
let animationRunning = true;

function countFreq(text) {
    const freq = {};
    for (const char of text.toLowerCase()) {
        if (/[a-z]/.test(char)) {
            freq[char] = (freq[char] || 0) + 1;
        }
    }
    return freq;
}

function Node(freq, char = null, left = null, right = null) {
    this.freq = freq;
    this.char = char;
    this.left = left;
    this.right = right;
}

class MinPriorityQueue {
    constructor() { this.heap = []; }
    compare(a, b) { return a.freq - b.freq; }
    enqueue(node) { this.heap.push(node); this.heap.sort(this.compare); }
    dequeue() { return this.heap.shift(); }
    size() { return this.heap.length; }
}

function initializeHuffman() {
    const freqs = countFreq(F);
    let pq = new MinPriorityQueue();
    for (const char in freqs) {
        pq.enqueue(new Node(freqs[char], char));
    }

    nodeQueue = [...pq.heap];
    rootNode = null;
    stepCount = 0;
    maxSteps = 0;
    
    while (pq.size() > 1) {
        const a = pq.dequeue();
        const b = pq.dequeue();
        const merged = new Node(a.freq + b.freq, null, a, b);
        pq.enqueue(merged);
        rootNode = merged;
        stepCount++;
    }
    if (pq.size() === 1) {
        rootNode = pq.dequeue();
    }
}

function drawTree(node, x, y, depth, parentCode, drawnNodes = [], pathCoords = []) {
    ctx.save();
    let currentX = x;
    let currentY = y;

    if (node) {
        drawnNodes.push({ node: node, x: currentX, y: currentY, code: parentCode });
        pathCoords.push({x: currentX, y: currentY});

        let leftX = currentX - 150;
        let rightX = currentX + 150;

        if (node.left) {
            drawTree(node.left, leftX, currentY + 80, depth + 1, parentCode + '0', drawnNodes, pathCoords);
        }
        if (node.right) {
            drawTree(node.right, rightX, currentY + 80, depth + 1, parentCode + '1', drawnNodes, pathCoords);
        }

    }
    ctx.restore();
    return drawnNodes;
}

function drawVisualization() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (!rootNode) return;

    // Draw Queue Nodes
    const spacing = 120;
    let startX = 50;
    let yPos = 50;
    ctx.fillStyle = '#444';
    ctx.font = '16px monospace';

    ctx.fillText("Priority Queue:", startX, 30);

    nodeQueue.forEach((node, i) => {
        const x = startX + i * spacing;
        ctx.beginPath();
        ctx.arc(x, yPos, 25, 0, Math.PI * 2);
        ctx.fillStyle = '#333';
        ctx.fill();
        ctx.strokeStyle = '#666';
        ctx.stroke();

        let label = node.char ? `${node.char} (${node.freq})` : `(${node.freq})`;
        ctx.fillStyle = 'white';
        if (node.char) ctx.fillText(label, x - 20, yPos + 5);
        else ctx.fillText(`Freq: ${node.freq}`, x - 35, yPos + 5);
    });

    // Draw Tree Visualization
    const drawn = [];
    drawn.push(...drawTree(rootNode, canvas.width / 2, 30, 0, '', [], []));

    ctx.fillStyle = 'rgba(100, 100, 255, 0.8)';
    ctx.strokeStyle = '#666';
    drawn.forEach(({ node: n, x, y, code }) => {
        ctx.beginPath();
        ctx.arc(x, y, 20, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();

        let label = '';
        if (n.char) {
            label = `${n.char} (${n.freq})`;
            ctx.fillStyle = 'white';
            ctx.fillText(label, x - 35, y + 5);
        } else {
            label = `(${n.freq})`;
            ctx.fillStyle = '#ccc';
            ctx.fillText(label, x - 20, y + 5);
        }
    });

    // Draw Merge Step Indicator
    if (stepCount > 0) {
        const currentPop = nodeQueue[0];
        const currentPush = rootNode; // Simplified: assume the last merged node is the one available
        ctx.fillStyle = 'rgba(255, 165, 0, 0.2)';
        ctx.fillRect(30, canvas.height - 80, 200, 40);
        ctx.fillStyle = '#FFA500';
        ctx.fillText(`Merging step ${stepCount}/${maxSteps}...`, 30, canvas.height - 50);
    }
}

function displayResults(huffCode) {
    let totalBits = 0;
    for (const char in huffCode) {
        totalBits += huffCode[char].length;
    }
    
    ctx.fillStyle = 'white';
    ctx.font = '24px monospace';
    const resultText = `Huffman Codes: ${Object.entries(huffCode).map(([c, code]) => `${c}: ${code}`).join(' | ') || 'N/A'}`;
    ctx.fillText(resultText, 50, 100);

    ctx.font = '20px monospace';
    const bitsSaved = Math.round((F.length * 8 - totalBits) / 8);
    let resultMsg = `Total Bits (Compressed): ${totalBits} | Original Est: ${F.length * 8} | Saved: ${bitsSaved} bytes`;
    ctx.fillText(resultMsg, 50, 150);

    document.getElementById('huffmanCanvas').style.pointerEvents = 'none';
}

function animate() {
    if (!animationRunning) return;

    drawVisualization();

    setTimeout(() => {
        stepCount++;
        if (stepCount < maxSteps) {
            requestAnimationFrame(animate);
        } else if (rootNode && nodeQueue.length === 0) {
            // Completion: Build code map and display results
            const huffCode = {};
            function traverse(node, code) {
                if (node.char !== null) {
                    huffCode[node.char] = code || '0';
                } else if (node.left) {
                    traverse(node.left, code + '0');
                } else if (node.right) {
                    traverse(node.right, code + '1');
                }
            }
            traverse(rootNode, '');
            displayResults(huffCode);

            // Cycle: Reset and restart visualization after delay
            setTimeout(() => {
                initializeHuffman();
                requestAnimationFrame(animate);
            }, 2000);

        } else if (stepCount > 0 && !rootNode) {
             // Should not happen, but safety break
             animationRunning = false;
        }
    }, 100); // Animation speed control
}

initializeHuffman();
animate();
</script></body></html>
```
MODEL Eqwen3:8bDNF
No usable answer reached the harness (ERR). Counted as a did-not-finish.
MODEL Fqwen3-coder:30bBLANKLIMFORMAT
Show code
```html
<!DOCTYPE html>
<html>
<head><title>Huffman Visualization</title></head>
<body>
<canvas id="huffmanCanvas" width="800" height="600" style="border:1px solid #ccc; display:block; margin:20px auto;"></canvas>
<div id="info" style="text-align:center; font-family:monospace;"></div>

<script>
const canvas = document.getElementById('huffmanCanvas');
const ctx = canvas.getContext('2d');
let animationRunning = true;
let state = {
    frequencies: {},
    pq: [],
    treeRoot: null,
    stepCount: 0,
    maxSteps: 0,
    interval: 10, // ms per merge step
    animationTimeout: null
};

// --- Fixed Sample Sentence and Initialization ---
const SAMPLE_TEXT = "this is a test sentence for huffman coding visualization";

function getFrequencies(text) {
    let freq = {};
    for (const char of text.toLowerCase()) {
        if (char >= 'a' && char <= 'z') {
            freq[char] = (freq[char] || 0) + 1;
        }
    }
    return freq;
}

class Node { constructor(freq, char=null, left=null, right=null) { this.freq = freq; this.char = char; this.left = left; this.right = right; } }

function buildHuffmanTree(initialFreqs) {
    let pq = [];
    for (const [char, freq] of Object.entries(initialFreqs)) {
        pq.push(new Node(freq, char));
    }
    pq.sort((a, b) => a.freq - b.freq);

    while (pq.length > 1) {
        const left = pq.shift();
        const right = pq.shift();
        const parent = new Node(left.freq + right.freq, null, left, right);
        pq.push(parent);
        pq.sort((a, b) => a.freq - b.freq);
    }
    return { root: pq[0], nodes: JSON.parse(JSON.stringify(initialFreqs)) }; // Return copies for visualization state
}

// --- Visualization Logic ---

function drawTree(root, level = 0, x = 0, y = 50, charMap = {}) {
    if (!root) return;

    const NODE_SIZE = 20;
    const HORIZONTAL_SPACING = 60;
    let currentX = x;

    ctx.save();
    ctx.translate(currentX, y);

    // Draw Node Box and Frequency
    ctx.fillStyle = root.char ? '#4CAF50' : '#2196F3';
    ctx.fillRect(-NODE_SIZE/2, -NODE_SIZE/2, NODE_SIZE, NODE_SIZE);
    ctx.strokeStyle = '#333';
    ctx.strokeRect(-NODE_SIZE/2, -NODE_SIZE/2, NODE_SIZE, NODE_SIZE);

    ctx.fillStyle = '#000';
    ctx.font = '14px Arial';
    ctx.textAlign = 'center';
    ctx.fillText(root.char || `(${root.freq})`, 0, 5); // Label (Char or Frequency)
    ctx.fillText(`F:${root.freq}`, 0, 20);

    // Draw edges and recurse
    if (root.left && root.right) {
        const yNext = y + 100;
        drawTree(root.left, level + 1, x - HORIZONTAL_SPACING / 2, yNext, charMap);
        drawTree(root.right, level + 1, x + HORIZONTAL_SPACING / 2, yNext, charMap);
    }

    ctx.restore();
}

function drawMergingStep(pq) {
    const NODE_SIZE = 20;
    let currentX = 50;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#333';
    ctx.font = '14px Arial';
    ctx.textAlign = 'center';

    pq.forEach((node, i) => {
        const xPos = currentX + (i * 150);
        // Draw the node box and label
        ctx.fillStyle = '#2196F3';
        ctx.fillRect(xPos - NODE_SIZE/2, 10, NODE_SIZE, NODE_SIZE);
        ctx.strokeStyle = '#333';
        ctx.strokeRect(xPos - NODE_SIZE/2, 10, NODE_SIZE, NODE_SIZE);

        ctx.fillStyle = '#000';
        ctx.fillText(`F:${node.freq}`, xPos, 50);
    });
}

function drawFinalTree(root) {
    const CANVAS_WIDTH = canvas.width;
    const CANVAS_HEIGHT = canvas.height;

    ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    ctx.fillStyle = '#333';
    ctx.font = '14px Arial';
    ctx.textAlign = 'center';

    // Simple recursive drawing simulation (Top-down view)
    function drawNode(node, xOffset, yOffset, level) {
        const NODE_SIZE = 20;
        let xPos = CANVAS_WIDTH / 2 + xOffset;
        let yPos = yOffset + level * 80;

        // Draw the node box (showing char and frequency)
        ctx.fillStyle = '#4CAF50';
        ctx.fillRect(xPos - NODE_SIZE/2, yPos - NODE_SIZE/2, NODE_SIZE, NODE_SIZE);
        ctx.strokeStyle = '#333';
        ctx.strokeRect(xPos - NODE_SIZE/2, yPos - NODE_SIZE/2, NODE_SIZE, NODE_SIZE);

        let label = node.char ? `${node.char} (F:${node.freq})` : `(${node.freq})`;
        if (level > 0) {
             label += ' [Merge]';
        }
        ctx.fillStyle = '#000';
        ctx.fillText(label, xPos, yPos + 5);

        // Recurse left/right
        if (node.left && node.right) {
            drawNode(node.left, xOffset - 120, yOffset + 80, level + 1);
            drawNode(node.right, xOffset + 120, yOffset + 80, level + 1);
        }
    }

    // Start drawing from a fixed point (assuming the root represents the full text)
    drawNode(root, 0, 50, 0);
}

function calculateCodesAndStats(root) {
    let codes = {};
    let totalBits = 0;
    let weightedLength = 0;

    function traverse(node, code) {
        if (node.char !== null) {
            codes[node.char] = code || '0'; // Should be assigned correctly during traversal
            weightedLength += node.freq * (code ? code.length -1 : 1);
            totalBits += node.freq * (code ? code.length : 1);
        }

        if (node.left) traverse(node.left, (code || '') + '0');
        if (node.right) traverse(node.right, (code || '') + '1');
    }
    traverse(root, '');
    return { codes: codes, totalBits: Math.round(totalBits), weightedLength: Math.round(weightedLength) };
}

function displayResults(stats) {
    const infoDiv = document.getElementById('info');
    let resultHTML = `<h3>Huffman Coding Complete</h3>`;
    resultHTML += `<p><strong>Original Bits (Fixed 8-bit ASCII):</strong> ${SAMPLE_TEXT.length * 8} bits</p>`;
    resultHTML += `<p><strong>Encoded Bit Length:</strong> ${stats.totalBits} bits</p>`;
    resultHTML += `<p>Compression Ratio: ${(1 - stats.totalBits / (SAMPLE_TEXT.length * 8)).toFixed(2) * 100}% reduction.</p>`;

    // Display codes
    resultHTML += `<h4>Codebook:</h4><pre style="font-size:14px;">`;
    for (const char in stats.codes) {
        resultHTML += `${char}: ${stats.codes[char]}\n`;
    }
    resultHTML += `</pre>`;
    infoDiv.innerHTML = resultHTML;
}

// --- Animation Loop and State Management ---

function animateStep() {
    if (!animationRunning || state.stepCount > state.maxSteps) return;

    const pq = [...state.pq]; // Copy of the current PQ for drawing
    drawMergingStep(pq);
    
    state.stepCount++;
    setTimeout(() => {
        animateStep();
    }, state.interval);
}

function runVisualization() {
    // Reset State
    state = {
        frequencies: getFrequencies(SAMPLE_TEXT),
        pq: [],
        treeRoot: null,
        stepCount: 0,
        maxSteps: 0,
        animationTimeout: null,
        interval: 15 // Slower interval for viewing
    };

    // Step 1: Build Initial PQ (Visualization of initial nodes)
    const initialFreqs = state.frequencies;
    let tempPQ = [];
    for (const [char, freq] of Object.entries(initialFreqs)) {
        tempPQ.push(new Node(freq, char));
    }
    tempPQ.sort((a, b) => a.freq - b.freq);
    state.pq = tempPQ;

    // Step 2: Simulate Huffman Merging Process
    let currentNodes = [...tempPQ];
    let stepCounter = 0;

    while (currentNodes.length > 1) {
        const left = currentNodes.shift();
        const right = currentNodes.shift();
        const parent = new Node(left.freq + right.freq, null, left, right);
        currentNodes.push(parent);
        currentNodes.sort((a, b) => a.freq - b.freq);
        stepCounter++;

        // Record the state for visualization (The PQ before the merge happens next loop)
        state.pq = [...currentNodes]; 
    }

    state.treeRoot = currentNodes[0]; 
    state.maxSteps = stepCounter;

    // Start Animation
    animateStep();
}

function finishAnimation() {
    animationRunning = false;
    if (state.animationTimeout) clearTimeout(state.animationTimeout);

    // Final Drawing and Calculations
    drawFinalTree(state.treeRoot);
    const stats = calculateCodesAndStats(state.treeRoot);
    displayResults(stats);
}


// --- Execution Flow ---

window.onload = () => {
    runVisualization(); // Starts the animation sequence
};
</script>
</body>
</html>
```
MODEL Ggemma4:26bDNF
No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.
MODEL Hllama3.1:8bDNF
No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.
Reveal the models— compare the answers first, then open. Names, blind scores and latencies are hidden until you do.

Who wrote what

Blind labelModelBlind scoreLatencyStatus
MODEL A deepseek-r1:14b —20.3 sOK
MODEL B mistral-small:24b ——DNF
MODEL C qwen3:14b —35.4 sOK
MODEL D qwen3.5:9b —60.6 sOK
MODEL E qwen3:8b ——DNF
MODEL F qwen3-coder:30b —35.8 sOK
MODEL G gemma4:26b ——DNF
MODEL H llama3.1:8b ——DNF

Frontier reference — outside the blind field

These models answered the identical prompt outside the blind field. They are deliberately not scored and not part of the blind comparison — they are there so you can see where a frontier model lands on the same task.

Collected differently from the blind field: the local models run through a plain API harness, the frontier references through a context-free agent, one shot, no retries. Response times are therefore not comparable and are not shown. On two English tasks the reference answer came back in German — an artefact of that harness, flagged on the affected rounds.
Claude Opus 5frontier reference
Show code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Huffman Coding — Live Build</title>
<style>
html,body{margin:0;height:100%;background:#04060c;overflow:hidden;display:flex;align-items:center;justify-content:center}
canvas{max-width:100vw;max-height:100vh;display:block}
</style>
</head>
<body>
<canvas id="c" width="1200" height="760"></canvas>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),W=1200,H=760,BY=548,LH=52;
const SENTENCES=["huffman coding builds optimal prefix codes","the quick brown fox jumps over lazy dogs","entropy favours the shortest code words","mississippi banks and sweet bananas","a canvas grows one binary tree per second","abracadabra alakazam hocus pocus magic"];
const F=(s,w)=>(w||400)+" "+s+"px ui-monospace,Menlo,Consolas,monospace";
const ease=u=>u<0?0:u>1?1:(u<.5?4*u*u*u:1-Math.pow(-2*u+2,3)/2);
let S,q,all,pair,ph,t,pos,posA,posB,newId,root,codes,revealed,steps,letters;
function sortQ(){q.sort((a,b)=>a.f-b.f||a.id-b.id)}
function layout(rs){const P={};let i=0,tot=0;rs.forEach(r=>tot+=r.leaves);const L=72,R=W-72,sl=(R-L)/Math.max(tot,1);
const walk=n=>{if(!n.l)return P[n.id]={x:L+sl*(i+++.5),y:BY};const a=walk(n.l),b=walk(n.r);return P[n.id]={x:(a.x+b.x)/2,y:Math.min(a.y,b.y)-LH}};
rs.forEach(walk);return P}
function lerpP(A,B,u){const P={};for(const k in B)P[k]=A[k]?{x:A[k].x+(B[k].x-A[k].x)*u,y:A[k].y+(B[k].y-A[k].y)*u}:B[k];return P}
function nodesOf(){const o=[],w=n=>{if(n.l){w(n.l);w(n.r)}o.push(n)};q.forEach(w);return o}
function buildCodes(){codes=[];const rec=(n,c)=>{if(!n.l){codes.push({ch:n.ch,f:n.f,c:c||"0"});return}rec(n.l,c+"0");rec(n.r,c+"1")};rec(root,"");
codes.sort((a,b)=>a.c.length-b.c.length||(a.ch<b.ch?-1:1))}
function init(){S=SENTENCES[Math.random()*SENTENCES.length|0];const m=new Map();letters=0;
for(const ch of S.replace(/[^a-z]/g,"")){m.set(ch,(m.get(ch)||0)+1);letters++}
let uid=0;q=[...m].map(([ch,f])=>({id:uid++,ch:ch,f:f,leaves:1}));nextId=uid;all=q.length;steps=0;
sortQ();pos=layout(q);pair=[q[0],q[1]];ph="hl";t=0;root=null;codes=[];revealed=0;newId=-1}
let nextId=0,last=0;
function update(dt){t+=dt;
if(ph==="hl"&&t>.5){const[a,b]=pair;posA=pos;q=q.filter(n=>n!==a&&n!==b);
const p={id:nextId++,f:a.f+b.f,l:a,r:b,leaves:a.leaves+b.leaves};q.push(p);sortQ();posB=layout(q);newId=p.id;steps++;ph="mv";t=0}
else if(ph==="mv"&&t>.72){pos=posB;newId=-1;t=0;if(q.length<2){root=q[0];buildCodes();ph="codes"}else{pair=[q[0],q[1]];ph="hl"}}
else if(ph==="codes"){revealed=Math.min(codes.length,Math.floor(t/.26));if(t>codes.length*.26+3.6)init()}}
function pathSet(){const s=new Set();if(ph!=="codes"||!revealed)return s;let n=root;s.add(n.id);
for(const b of codes[revealed-1].c){if(!n.l)break;n=b==="0"?n.l:n.r;s.add(n.id)}return s}
function node(P,n,a,hot){const p=P[n.id];if(!p)return;const leaf=!n.l,r=leaf?19:14;g.globalAlpha=a;
const hue=leaf?(n.ch.charCodeAt(0)*37)%360:200;
if(hot){g.beginPath();g.arc(p.x,p.y,r+7+Math.sin(performance.now()/140)*2.5,0,7);g.fillStyle="hsla("+hue+",90%,60%,.22)";g.fill()}
g.beginPath();g.arc(p.x,p.y,r,0,7);g.fillStyle=leaf?"hsla("+hue+",70%,55%,.9)":"#0d1626";g.fill();
g.lineWidth=hot?2.5:1.4;g.strokeStyle=leaf?"hsla("+hue+",90%,78%,.95)":hot?"#ffd479":"#3d5b86";g.stroke();
g.textAlign="center";g.fillStyle=leaf?"#08111c":"#8fd4f0";g.font=F(leaf?17:12,700);g.fillText(leaf?n.ch.toUpperCase():n.f,p.x,p.y+(leaf?6:4));
if(leaf){g.fillStyle="#7f8fa8";g.font=F(12);g.fillText(n.f,p.x,p.y+r+15)}g.globalAlpha=1}
function render(){const gr=g.createLinearGradient(0,0,0,H);gr.addColorStop(0,"#0a1020");gr.addColorStop(1,"#04060c");g.fillStyle=gr;g.fillRect(0,0,W,H);
g.textAlign="left";g.fillStyle="#7ee8fa";g.font=F(23,700);g.fillText("HUFFMAN CODING",40,46);
g.fillStyle="#54637d";g.font=F(14);g.fillText('"'+S+'"   '+letters+" letters, "+all+" symbols",40,70);
g.textAlign="right";g.fillStyle="#9aa7bd";g.font=F(14);
g.fillText(ph==="codes"?"tree complete — walking for code words":"merge "+steps+" / "+(all-1)+"   queue: "+q.length+" nodes",W-40,46);
const u=ph==="mv"?ease(t/.72):1,P=ph==="mv"?lerpP(posA,posB,u):pos,hi=pathSet(),ns=nodesOf();
for(const n of ns){if(!n.l)continue;const a=P[n.id];if(!a)continue;const na=n.id===newId?u:1;
for(const[ch,bit]of[[n.l,"0"],[n.r,"1"]]){const b=P[ch.id];if(!b)continue;const on=hi.has(ch.id)&&hi.has(n.id);
g.globalAlpha=na;g.beginPath();g.moveTo(a.x,a.y);g.lineTo(b.x,b.y);g.strokeStyle=on?"#ffd479":"#26456b";g.lineWidth=on?3:1.6;g.stroke();
g.fillStyle=on?"#ffd479":"#3f6a99";g.font=F(11,700);g.textAlign="center";g.fillText(bit,(a.x+b.x)/2+(bit==="0"?-9:9),(a.y+b.y)/2+4);g.globalAlpha=1}}
const hot=ph==="hl"?new Set(pair.map(n=>n.id)):new Set();
for(const n of ns)node(P,n,n.id===newId?u:1,hot.has(n.id)||hi.has(n.id));
if(ph!=="codes"){g.textAlign="left";g.fillStyle="#4d5d75";g.font=F(12,700);g.fillText("PRIORITY QUEUE — smallest two merge next",40,632);
const n=q.length,w=Math.min(64,(W-80)/n-8);
q.forEach((nd,i)=>{const x=40+i*(w+8),y=648,on=ph==="hl"&&(nd===pair[0]||nd===pair[1]);
g.fillStyle=on?"rgba(255,212,121,.18)":"rgba(126,232,250,.07)";g.strokeStyle=on?"#ffd479":"#1e3550";
g.lineWidth=1.2;g.beginPath();g.roundRect(x,y,w,46,7);g.fill();g.stroke();g.textAlign="center";
g.fillStyle=nd.ch?"hsl("+(nd.ch.charCodeAt(0)*37)%360+",70%,68%)":"#6fa8d6";g.font=F(15,700);g.fillText(nd.ch?nd.ch.toUpperCase():"•",x+w/2,y+21);
g.fillStyle="#8b9ab2";g.font=F(12);g.fillText(nd.f,x+w/2,y+38)});
g.textAlign="left";g.fillStyle="#3d4a5e";g.font=F(12);g.fillText("building tree bottom-up: pop 2 smallest → merge → push back",40,724)}
else{g.textAlign="left";g.fillStyle="#4d5d75";g.font=F(12,700);g.fillText("CODE WORDS (prefix-free, read root → leaf)",40,626);
let bits=0;codes.forEach((c,i)=>{if(i>=revealed)return;bits+=c.f*c.c.length;const col=i/5|0,row=i%5,x=40+col*195,y=650+row*20;
g.fillStyle="hsl("+(c.ch.charCodeAt(0)*37)%360+",70%,66%)";g.font=F(14,700);g.fillText(c.ch.toUpperCase(),x,y);
g.fillStyle="#5f6f88";g.font=F(12);g.fillText("×"+c.f,x+18,y);g.fillStyle=i===revealed-1?"#ffd479":"#8fd4f0";g.font=F(13,700);g.fillText(c.c,x+56,y)});
const before=letters*8;g.textAlign="right";g.font=F(14,700);g.fillStyle="#6f8099";
g.fillText("fixed 8-bit: "+before+" bits",W-40,668);g.fillStyle="#7ee8fa";g.fillText("huffman: "+bits+" bits",W-40,690);
g.fillStyle="#8de08d";g.fillText("saved "+(revealed?Math.round((1-bits/before)*100):0)+"%   avg "+(revealed?(bits/letters).toFixed(2):"0.00")+" bits/letter",W-40,712);
if(revealed>=codes.length){g.fillStyle="#3d4a5e";g.font=F(12);g.fillText("restarting with a new sentence…",W-40,736)}}}
function frame(ts){const dt=Math.min(.05,(ts-last)/1000||0);last=ts;update(dt);render();requestAnimationFrame(frame)}
init();requestAnimationFrame(frame);
</script>
</body>
</html>