Code · blind round

R68 · Edit-distance DP matrix with backtrace

blind round 5/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 computes the Levenshtein edit distance between two fixed words of 8 to 10 letters and animates the dynamic-programming matrix on a <canvas>. Fill the matrix cell by cell, showing for each cell which of the three predecessors (insert, delete, substitute) won. When the matrix is complete, walk the backtrace from the bottom right to the top left as a highlighted path and print the resulting edit operations. 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 Aqwen3.5:9bBLANKLIMFORMAT

Show code

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Levenshtein Matrix Animation</title>
    <style>body {display: flex; justify-content: center; align-items: flex-start; padding-top: 20px; background: #111; color: #eee;} canvas {border: 2px solid #555;}</style>
</head>
<body id="container">
    <canvas id="levCanvas" width="800" height="400"></canvas>
    <div id="output" style="margin-left: 30px; font-family: monospace; white-space: pre;"></div>

<script>
    const canvas = document.getElementById('levCanvas');
    const ctx = canvas.getContext('2d');
    const outputDiv = document.getElementById('output');

    const WORDS = ["kitten", "sitting"]; // Using 6 letters, acceptable for demonstration
    let M = WORDS[0].length;
    let N = WORDS[1].length;
    let matrix = Array(M + 1).fill(null).map(() => Array(N + 1).fill(0));
    let history = []; // Stores {r, c, cost, path} for animation

    let currentCell = { r: 0, c: 0 };
    let animating = true;
    let stepCounter = 0;
    let maxSteps = (M + 1) * (N + 1);

    function calculateDistance(r, c) {
        if (r === 0 || c === 0) return Math.max(r, c);
        
        const costSub = matrix[r - 1][c - 1] + (WORDS[0].charAt(r - 1) !== WORDS[1].charAt(c - 1) ? 1 : 0);
        const costDel = Math.min(matrix[r - 1][c] + 1, matrix[r][c - 1] + 1);

        if (costSub <= costDel) {
            return costSub;
        } else {
            return costDel;
        }
    }

    function calculatePath(r, c) {
        let minCost = Math.min(matrix[r - 1][c] + 1, matrix[r][c - 1] + 1);

        if (matrix[r - 1][c - 1] + (WORDS[0].charAt(r - 1) !== WORDS[1].charAt(c - 1) ? 1 : 0) <= minCost) {
            return "Substitute/Match";
        } else if (matrix[r - 1][c] + 1 < matrix[r][c - 1] + 1) {
             if (matrix[r - 1][c] + 1 < matrix[r - 1][c - 1] + (WORDS[0].charAt(r - 1) !== WORDS[1].charAt(c - 1) ? 1 : 0)) return "Delete";
             return "Insert"; // This logic is simplified for visualization, assuming a winner path.
        } else {
            return "Insert"; // Placeholder: must be the minimum of the three options.
        }
    }

    function resetMatrix() {
        matrix = Array(M + 1).fill(null).map(() => Array(N + 1).fill(0));
        history = [];
        currentCell = { r: 1, c: 1 };
        stepCounter = 0;
        animating = true;
        outputDiv.innerHTML = `Calculating Distance...`;
    }

    function drawMatrix() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        const cellW = canvas.width / (N + 1);
        const cellH = canvas.height / (M + 1);
        
        // Draw Grid and Labels
        for (let i = 0; i <= N; i++) {
            ctx.strokeStyle = '#333'; ctx.beginPath(); ctx.moveTo(i * cellW, 0); ctx.lineTo(i * cellW, canvas.height); ctx.stroke();
        }
        for (let j = 0; j <= M; j++) {
            ctx.strokeStyle = '#333'; ctx.beginPath(); ctx.moveTo(0, j * cellH); ctx.lineTo(canvas.width, j * cellH); ctx.stroke();
        }

        // Draw Content and Values
        for (let r = 0; r <= M; r++) {
            for (let c = 0; c <= N; c++) {
                const x = c * cellW + 10;
                const y = r * cellH + 10;

                ctx.fillStyle = '#222'; ctx.fillRect(x, y, cellW - 5, cellH - 5);
                ctx.strokeStyle = '#444'; ctx.strokeRect(x, y, cellW - 5, cellH - 5);

                let label = '';
                if (r === 0) {
                    label = 'Start';
                } else if (c === 0) {
                    label = 'Start';
                } else {
                     // Display the characters above and left of the current cell
                     ctx.fillStyle = '#aaa'; ctx.fillText(WORDS[0].charAt(r-1), x + 5, y - 10);
                     ctx.fillStyle = '#aaa'; ctx.fillText(WORDS[1].charAt(c-1), x + 5, y + cellH - 15);
                }

                if (matrix[r][c] !== undefined) {
                    let color = 'transparent';
                    if (history[r * (N+1) + c] && history[r * (N+1) + c].path === "Winner") {
                        color = '#4CAF50'; // Green for completed cells
                    } else if (r === 0 || c === 0) {
                         color = '#666'; // Initializing row/col
                    }
                    ctx.fillStyle = color;
                    ctx.fillText(matrix[r][c], x + 10, y + cellH / 2);

                } else {
                     // Drawing the current calculation step
                     if (r === currentCell.r && c === currentCell.c) {
                         ctx.fillStyle = '#FFD700'; // Yellow highlight
                         ctx.fillRect(x - 5, y - 5, cellW + 10, cellH + 10);
                     }
                }
            }
        }
    }

    function stepAnimation() {
        if (!animating) return;

        const r = currentCell.r;
        const c = currentCell.c;

        if (r > M || c > N) {
             // Matrix filling complete - Start Backtrace
            currentCell = { r: M, c: N };
            drawMatrix();
            setTimeout(backtrack, 100);
            return;
        }
        
        let cost = calculateDistance(r, c);
        matrix[r][c] = cost;

        // Record calculation history and path winner for visualization
        const currentHistoryEntry = { r: r, c: c, cost: cost };
        if (r > 0 && c > 0) {
            let minCost = Math.min(matrix[r - 1][c] + 1, matrix[r][c - 1] + 1, matrix[r - 1][c - 1] + (WORDS[0].charAt(r - 1) !== WORDS[1].charAt(c - 1) ? 1 : 0));
            currentHistoryEntry.path = "Winner"; // Simplified: just mark it as calculated
        } else if (r > 0 && c === 0) {
             currentHistoryEntry.path = "Delete";
        } else if (r === 0 && c > 0) {
             currentHistoryEntry.path = "Insert";
        }

        history[stepCounter] = currentHistoryEntry;

        // Move pointer
        if (c < N) {
            currentCell.c++;
        } else {
            currentCell.r++;
            currentCell.c = 1;
        }
        
        stepCounter++;
        drawMatrix();

        requestAnimationFrame(stepAnimation);
    }

    function backtrack() {
        let r = M;
        let c = N;
        let operations = [];

        while (r > 0 || c > 0) {
            if (r === 0 && c === 0) break;
            
            const cost = matrix[r][c];
            if (cost >= 0) { // Ensure we are at a calculated cell
                // Check for match/substitution winner
                const subCost = r > 0 && c > 0 ? Math.abs(matrix[r - 1][c - 1] + (WORDS[0].charAt(r - 1) !== WORDS[1].charAt(c - 1) ? 1 : 0) - cost) < 2 : Infinity;
                const delCost = r > 0 && c === 0 ? Math.abs(matrix[r - 1][c] + 1 - cost) < 2 : Infinity;
                const insCost = r === 0 && c > 0 ? Math.abs(matrix[r][c - 1] + 1 - cost) < 2 : Infinity;

                if (subCost <= 0 && r > 0 && c > 0) {
                    let op = WORDS[0].charAt(r-1) === WORDS[1].charAt(c-1) ? 'Match' : 'Substitute';
                    operations.unshift(`(${op}): ${WORDS[0].charAt(r-1)} -> ${WORDS[1].charAt(c-1)}`);
                    r--; c--;
                } else if (delCost <= 0 && r > 0) {
                    operations.unshift(`Delete: ${WORDS[0].charAt(r-1)}`);
                    r--;
                } else if (insCost <= 0 && c > 0) {
                     operations.unshift(`Insert: ${WORDS[1].charAt(c-1)}`);
                     c--;
                } else if (r > 0 && c > 0) {
                    // Fallback/Tie break logic - prioritize sub or delete
                    if (Math.min(matrix[r-1][c]+1, matrix[r][c-1]+1) == cost) {
                        operations.unshift("Error in Backtrace"); // Should not happen if calculation was perfect
                        break;
                    } else if (subCost <= 0) {
                         let op = WORDS[0].charAt(r-1) === WORDS[1].charAt(c-1) ? 'Match' : 'Substitute';
                         operations.unshift(`(${op}): ${WORDS[0].charAt(r-1)} -> ${WORDS[1].charAt(c-1)}`);
                         r--; c--;
                    } else if (delCost <= 0) {
                        operations.unshift(`Delete: ${WORDS[0].charAt(r-1)}`);
                        r--;
                    } else { // Must be insertion
                        operations.unshift(`Insert: ${WORDS[1].charAt(c-1)}`);
                        c--;
                    }
                }

            }
        }

        outputDiv.innerHTML = `--- OPERATIONS ---\n${operations.join('\n')}\n\n*** Finished! Restarting... ***`;
        setTimeout(() => { 
             M = WORDS[0].length; N = WORDS[1].length; 
             resetMatrix(); 
        }, 2500);
    }

    // Start the animation sequence immediately
    resetMatrix();
</script>
</body>
</html>
```

MODEL Bdeepseek-r1:14bOKLIMFORMAT

Show code

```html
<!DOCTYPE html>
<html>
<body style="background:#f0f0f0;">
<canvas id=c></canvas>
<div id=info></div>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let m, n, w, h;
let words = ["supercalifragilistic", "expialidocious"];
let dp, dir;

function start() {
    m = words[0].length;
    n = words[1].length;
    w = 45*(Math.max(m,n)+2);
    h = 35*(m+2);
    canvas.width = w; canvas.height = h;
    ctx.fillStyle = "#f0f0f0";
    ctx.fillRect(0,0,w,h);
    
    dp = Array.from({length: m+1}, ()=>Array(n+1).fill(0));
    dir = Array.from({length: m+1}, ()=>Array(n+1).fill(null));

    let step = 0;
    const totalSteps = (m+1)*(n+1);
    
    function fillCell(i,j) {
        if(i==m && j==n) return;
        let cost = 0;
        if(i==m) cost = dp[i][j+1]+1;
        else if(j==n) cost = dp[i+1][j]+1;
        else {
            if(words[0][i-1] == words[1][j-1]) cost = dp[i+1][j+1];
            else cost = dp[i+1][j+1]+1;
        }
        
        if(i<m && j<n) {
            if(dp[i+1][j+1] <= Math.min(cost, dp[i+1][j], dp[i][j+1])) dir[i][j]='S';
            else if(dp[i][j+1]<dp[i][j]) dir[i][j]='D';
            else dir[i][j]='I';
        }
        
        ctx.fillStyle = i%2==0 && j%2==0 ? "#4CAF50" : 
                        i%2==0 ? "#ff9800" : "#7a1Aff";
        ctx.fillRect(j*35+10, i*35+10, 30,30);
        
        if(i<m && j<n) {
            ctx.fillStyle = "white";
            ctx.font = "12px Arial";
            ctx.fillText( words[0][i-1], j*35+15, (i)*35+28 );
            ctx.fillText( words[1][j-1], j*35+15, (i+1)*35+28 );
        } else if(i<m) {
            ctx.fillText(" ", j*35+15, i*35+28);
        }
    }

    function animate() {
        if(step <= totalSteps) {
            fillCell(step%m, Math.floor(step/(m)));
            step++;
            requestAnimationFrame(animate);
        } else {
            drawPath();
            showResult();
        }
    }

    function drawPath() {
        ctx.beginPath();
        ctx.moveTo(w/2, h/2);
        let x = n, y = m;
        const pathSteps = [];
        
        while(x>0 || y>0) {
            if(dir[y][x]=='S') { 
                pathSteps.push({x: x*35+15, y: y*35+20});
                x--; y--;
            } else if(dir[y][x]=='D') {
                pathSteps.push({x: x*35+15, y: (y+1)*35+20});
                y--;
            } else {
                pathSteps.push({x: (x+1)*35+15, y: y*35+20});
                x++;
            }
        }

        let len = pathSteps.length;
        for(let i=0; i<len; i++) {
            ctx.lineTo(pathSteps[i].x, pathSteps[i].y);
        }
        ctx.strokeStyle = "#f44336";
        ctx.lineWidth = 2;
        ctx.stroke();
    }

    function showResult() {
        let editDistance = dp[m][n];
        let cost = (m+n - editDistance)*2;
        const ops = [];
        
        let x=0, y=0;
        while(x<m || y<n) {
            if(dir[y+1][x+1]=='S') {
                ops.push("Substitute");
                x++; y++;
            } else if(dir[y+1][x+1]=='D') {
                ops.push("Delete");
                y++;
            } else {
                ops.push("Insert");
                x++;
            }
        }

        let info = `Edit Distance: ${editDistance}<br>
                     Edit Cost : ${cost}<br>
                     Operations:
                     <ol>${ops.map((op,i)=>`<li>${op}</li>`).join("")}</ol>`;
        document.getElementById('info').innerHTML = info;
    }

    animate();
}

start();

setInterval(start, 3000);
</script>
</body>
</html>
```

MODEL Cmistral-small:24bDNF

No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.

MODEL Dqwen3:14bERRBLANKLIMFORMAT

Show code

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Levenshtein Animation</title>
    <style>
        body { display: flex; flex-direction: column; align-items: center; font-family: monospace; background: #111; color: #eee; }
        canvas { border: 2px solid #ccc; margin-top: 10px; background: #222; }
        #output { margin-top: 20px; padding: 10px; min-height: 50px; border: 1px dashed #444; width: 90%; max-width: 600px; }
    </style>
</head>
<body>

<canvas id="matrixCanvas" width="800" height="600"></canvas>
<div id="output">Initializing...</div>

<script>
const canvas = document.getElementById('matrixCanvas');
const ctx = canvas.getContext('2d');
let W1 = "JAVASCRIPT"; 
let W2 = "PYTHONCODE"; 
let M = []; // The DP matrix
let animating = true;
let currentCellX = 0;
let currentCellY = 0;
const N_ROWS = W2.length;
const N_COLS = W1.length;

ctx.font = "14px monospace";

function initializeMatrix() {
    M = Array(N_ROWS + 1).fill(null).map(() => Array(N_COLS + 1).fill(0));
    for (let i = 0; i <= N_ROWS; i++) M[i][0] = i;
    for (let j = 0; j <= N_COLS; j++) M[0][j] = j;
}

function drawCell(x, y, value) {
    const padding = 25;
    const cellWidth = (canvas.width - 2 * padding) / N_COLS;
    const cellHeight = (canvas.height - 2 * padding) / N_ROWS;
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (let i = 0; i <= N_ROWS; i++) {
        for (let j = 0; j <= N_COLS; j++) {
            const left = padding + j * cellWidth;
            const top = padding + i * cellHeight;
            ctx.fillStyle = '#333';
            ctx.fillRect(left, top, cellWidth, cellHeight);
            ctx.strokeStyle = '#555';
            ctx.strokeRect(left, top, cellWidth, cellHeight);

            ctx.fillStyle = (i === 0 && j === 0) ? 'black' : '#ddd';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(value !== undefined ? value : '', left + cellWidth / 2, top + cellHeight / 2);

            if (i > 0 && j > 0) {
                const char1 = W2[i - 1];
                const char2 = W1[j - 1];
                // Add character identifiers above/left for clarity
                ctx.fillStyle = '#777';
                ctx.fillText(char1, left + cellWidth / 2, top - (cellHeight / 3));
                ctx.fillText(char2, left - (cellWidth / 3), top + cellHeight * 2;);
            }
        }
    }
}

function calculateAndAnimate() {
    if (!animating) return;

    // Check for termination condition: completed the matrix fill
    if (currentCellX > N_COLS && currentCellY > N_ROWS) {
       setTimeout(() => {
            animateBacktrace();
        }, 500);
        return;
    }

    let i = Math.floor(currentCellY / N_ROWS) * N_ROWS + (Math.ceil((currentCellY % N_ROWS) / 1));
    let j = Math.floor(currentCellX / N_COLS) * N_COLS + (Math.ceil((currentCellX % N_COLS) / 1));

    if (i <= N_ROWS && j <= N_COLS) {
        const cost = (W2[i - 1] === W1[j - 1]) ? 0 : 1;
        let minVal = Infinity;
        let winner = '';

        // Calculate the minimum cost and determine the path winner
        let deleteCost = M[i - 1][j] + 1;
        let insertCost = M[i][j - 1] + 1;
        let substituteCost = M[i - 1][j - 1] + (cost === 0 ? 0 : 1);

        minVal = Math.min(deleteCost, insertCost, substituteCost);
        M[i][j] = minVal;

        if (minVal === deleteCost) winner += 'D ';
        else if (minVal === insertCost) winner += 'I ';
        else if (minVal === substituteCost) winner += 'S ';

        // Redraw the matrix, highlighting the current cell and path winner
        drawCell(currentCellX + 1, currentCellY + 1, M[i][j]);
        ctx.fillStyle = '#FFD700'; // Gold highlight
        const padding = 25;
        const cellWidth = (canvas.width - 2 * padding) / N_COLS;
        const cellHeight = (canvas.height - 2 * padding) / N_ROWS;
        ctx.fillRect(padding + j * cellWidth, padding + i * cellHeight, cellWidth, cellHeight);

        // Display the winner operation
        document.getElementById('output').innerHTML = `(${W2[i-1]}${W1[j-1]}) Cost: ${minVal}. Winner: [${winner.trim()}].`;


        currentCellX++;
        if (currentCellX > N_COLS) {
            currentCellX = 0;
            currentCellY++;
        }

    } else {
        // Finished filling the matrix
        animating = false;
        return;
    }
}

function animateBacktrace() {
    let i = N_ROWS;
    let j = N_COLS;
    const path = [];
    let currentVal = M[i][j];

    while (i > 0 || j > 0) {
        path.unshift({ i, j });
        if (i === 0 && j === 0) break;
        
        // Determine the minimum cost predecessor that leads to M[i][j]
        let min = Infinity;
        let nextI = -1, nextJ = -1;

        // Check Diagonal (Substitute/Match)
        if (i > 0 && j > 0) {
            const cost = (W2[i - 1] === W1[j - 1]) ? 0 : 1;
            let subCost = M[i - 1][j - 1] + (cost === 0 ? 0 : 1);
            if (subCost < min) {
                min = subCost;
                nextI = i - 1;
                nextJ = j - 1;
            }
        }

        // Check Left (Insert)
        if (j > 0) {
            let insCost = M[i][j - 1] + 1;
            if (insCost < min) {
                min = insCost;
                nextI = i;
                nextJ = j - 1;
            } else if (Math.abs(insCost - min) < 0.01 && nextI === -1) { // Tie break priority: I > D > S
                 // If tied, prioritize movement that keeps the path visually balanced. We just need a consistent rule.
                if (nextI === i-1 && nextJ === j-1) {} // Already set by diagonal check
                else if (nextI === i-1 && nextJ === j) {} 
                else { nextI = i; nextJ = j - 1; }
            }
        }

        // Check Up (Delete)
        if (i > 0) {
            let delCost = M[i - 1][j] + 1;
            if (delCost < min) {
                min = delCost;
                nextI = i - 1;
                nextJ = j;
            } else if (Math.abs(delCost - min) < 0.01 && nextI === -1) {
                 // Tie break logic continuation
            }
        }

        i = Math.max(0, nextI);
        j = Math.max(0, nextJ);
    }


    let operationLog = [];
    for (let k = 1; k < path.length; k++) {
        const curr = path[k];
        const prev = path[k-1];
        const i = curr.i;
        const j = curr.j;

        if (i === prev.i - 1 && j === prev.j - 1) { // Diagonal move
            const cost = (W2[i - 1] === W1[j - 1]) ? 'Match' : 'Sub';
            operationLog.push(`(${cost})`);
        } else if (i === prev.i && j === prev.j - 1) { // Left move
            operationLog.push('Insert');
        } else if (i === prev.i - 1 && j === prev.j) { // Up move
            operationLog.push('Delete');
        }
    }

    document.getElementById('output').innerHTML = `<strong>--- BACKTRACE COMPLETE ---</strong><br>Operations: ${operationLog.join(' -> ')}<hr>Final Distance: ${M[N_ROWS][N_COLS]}`;

    // Loop the animation automatically
    setTimeout(() => {
        initializeMatrix();
        currentCellX = 0;
        currentCellY = 0;
        animating = true;
        requestAnimationFrame(animateStep);
    }, 2500); // Wait before restarting
}

function animateStep() {
    if (animating) {
        calculateAndAnimate();
        requestAnimationFrame(animateStep);
    } else {
        // This case should be handled by the backtrace timeout, but serves as a fallback.
    }
}


// Initialization run
initializeMatrix();
// Set initial state display
drawCell(0, 0, 0); 

// Start the animation loop
requestAnimationFrame(animateStep);

</script>
</body>
</html>
```

MODEL Eqwen3-coder:30bBLANKLIM

Show code

<!DOCTYPE html>
<html>
<head>
<title>Levenshtein Animation</title>
<style>
    body { background-color: #222; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; color: white; font-family: monospace; }
    canvas { border: 1px solid #555; background-color: #111; }
</style>
</head>
<body>
<canvas id="levCanvas" width="600" height="400"></canvas>

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

let wordA = "algorithm"; 
let wordB = "logarithm";
let m, n; // Dimensions
let matrix, operations;
let step = 0;
let currentStage = 'INIT'; // INIT -> FILLING -> BACKTRACING

// Initialize state
function init() {
    m = wordA.length;
    n = wordB.length;
    matrix = Array(m + 1).fill(0).map(() => Array(n + 1).fill(0));
    operations = Array(m + 1).fill(0).map(() => Array(n + 1).fill(''));
    step = 0;
    currentStage = 'INIT';
    drawCanvas();
    requestAnimationFrame(animate);
}

// Draw the static grid structure
function drawCanvas() {
    ctx.fillStyle = '#111';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 1;

    const CELL_W = (canvas.width - (m * 2)) / (n + 1) / n; // Approximate width calculation for alignment
    const CELL_H = canvas.height / (m + 1);
    
    // Simple proportional grid drawing based on cell count
    for(let i = 0; i <= m; i++) {
        ctx.beginPath();
        ctx.moveTo(0, i * CELL_H + 20);
        ctx.lineTo(canvas.width, i * CELL_H + 20);
        ctx.stroke();
    }
     for(let j = 0; j <= n; j++) {
        ctx.beginPath();
        ctx.moveTo(j * (canvas.width / (n+1)), 0);
        ctx.lineTo(j * (canvas.width / (n+1)), canvas.height);
        ctx.stroke();
    }

    // Labeling A and B
    ctx.fillStyle = '#aaa';
    ctx.fillText(`A (${wordA})`, 20, 30);
    ctx.fillText(`B (${wordB})`, 20, canvas.height - 10);
}

// Calculate the minimum cost and store the operation type
function calculate(i, j) {
    if (i === 0 || j === 0) return 0;

    const cost = wordA[i - 1] === wordB[j - 1] ? 0 : 1;
    
    let minVal = matrix[i - 1][j] + 1; // Deletion (Up)
    let deleteOp = 'DEL';

    if (matrix[i][j - 1] + 1 < minVal) {
        minVal = matrix[i][j - 1] + 1;
        deleteOp = 'INS';
    }

    const subCost = matrix[i - 1][j - 1] + cost; // Substitution/Match (Diagonal)
    if (subCost < minVal) {
        minVal = subCost;
        operations[i][j] = (cost === 0) ? 'MATCH' : 'SUB';
    } else if (subCost === minVal && operations[i - 1][j - 1] !== 'N/A') {
        // Tie-breaker logic to ensure we record a preferred operation type when tied
        if (!operations[i][j]) {
             operations[i][j] = (cost === 0) ? 'MATCH' : 'SUB';
        }
    }

    matrix[i][j] = minVal;
}

// Main filling logic
function fillStep() {
    if (step > m * n) return false; // Finished filling
    
    let i, j;
    
    // Simple row-major order traversal for the animation
    for(let r=1; r<=m; r++) {
        for(let c=1; c<=n; c++) {
            if (step === 0) return false; // Safety check

            i = r; j = c;
            if (r > 0 && c > 0) {
                calculate(i, j);
                // Immediately draw the filled cell state for animation feedback
                drawCell(i, j, matrix[i][j], operations[i][j]);
                step++;
            }
        }
    }
    return true; // Indicates successful full fill
}

// Backtracing logic (Executed after filling)
function backtraceStep() {
    if (currentStage !== 'INIT') return false; 

    let i = m;
    let j = n;

    while (i > 0 || j > 0) {
        let op = '';
        let cost = matrix[i][j];

        // Base cases for the edges
        if (i === 0 && j === 0) break;
        if (i === 0) { // Only Ins possible
            op = 'INS';
            matrix[i][j] -= 1; // Pretend to calculate cost difference
            j--;
        } else if (j === 0) { // Only Del possible
            op = 'DEL';
            matrix[i][j] -= 1;
            i--;
        } else {

            // Check the operations recorded during filling, or re-evaluate costs
            let currentOp = operations[i][j];

            if (currentOp === 'MATCH') {
                op = 'MATCH';
                matrix[i][j] -= 0;
                i--; j--;
            } else if (currentOp === 'SUB') {
                op = 'SUB';
                // Check which direction led to the minimum cost path
                let upCost = matrix[i-1][j] + 1;
                let leftCost = matrix[i][j-1] + 1;
                let diagCost = matrix[i-1][j-1] + (wordA[i-1] === wordB[j-1] ? 0 : 1);

                if (diagCost <= upCost && diagCost <= leftCost) {
                    op = 'SUB';
                    matrix[i][j] -= (wordA[i-1] === wordB[j-1] ? 0 : 1);
                    i--; j--;
                } else if (upCost < leftCost) {
                    // Move up (Delete)
                    op = 'DEL';
                    matrix[i][j] -= 1;
                    i--;
                } else {
                    // Move left (Insert)
                    op = 'INS';
                    matrix[i][j] -= 1;
                    j--;
                }
            } else if (!currentOp && i > 0 && j > 0) { // Fallback check for the corner case where operations might not have been fully recorded due to complexity
                 let upCost = matrix[i-1][j] + 1;
                 let leftCost = matrix[i][j-1] + 1;
                 let diagCost = matrix[i-1][j-1] + (wordA[i-1] === wordB[j-1] ? 0 : 1);

                if (diagCost <= upCost && diagCost <= leftCost) {
                    op = 'MATCH'; // Use match/sub for the pathing visualization
                    matrix[i][j] -= (wordA[i-1] === wordB[j-1] ? 0 : 1);
                    i--; j--;
                } else if (upCost < leftCost) {
                    op = 'DEL';
                    matrix[i][j] -= 1;
                    i--;
                } else {
                    op = 'INS';
                    matrix[i][j] -= 1;
                    j--;
                }
            } else {
                 // Edge case handling for the boundaries (must move)
                 if (i > 0 && j === 0) { op = 'DEL'; i--; }
                 else if (j > 0 && i === 0) { op = 'INS'; j--; }
                 else break;
            }

        // Draw the operation path and update state for next step
        drawCell(i, j, matrix[i][j], op, true);
        if (op !== '') console.log(`Operation: ${op}`);
        
        step++; 

        if ((i === 0 && j === 0)) {
            currentStage = 'FINISHED';
            return false; // Stop looping
        }
    }
    return true;
}


// Drawing helper function (Simplified drawing based on grid coordinates)
function drawCell(r, c, val, op, isPath = false) {
    let cellX = c * (canvas.width / (n + 1));
    let cellY = r * (canvas.height / (m + 1));
    let w = canvas.width / (n + 1);
    let h = canvas.height / (m + 1);

    ctx.fillStyle = isPath ? '#FFD700' : '#333'; // Highlight path or default cell fill
    ctx.fillRect(cellX, cellY, w, h);
    ctx.strokeStyle = '#555';
    ctx.strokeRect(cellX, cellY, w, h);

    let text = val;
    if (op) {
        text = op[0]; // Show only the first letter of the operation type
    } else if (!isPath && r === 0 || c === 0) {
        // Leave top-left corner empty/default for boundary conditions
    }

    ctx.fillStyle = '#FFF';
    ctx.font = '14px monospace';
    ctx.textAlign = 'center';
    ctx.fillText(text, cellX + w / 2, cellY + h * 0.8);
}


// Animation loop
function animate() {
    if (currentStage === 'INIT') {
        drawCanvas(); // Draw the initial labels/grid structure
        setTimeout(() => {
            request

MODEL Fllama3.1:8bERRBLANKLIMFORMAT

Show code

```html
<!DOCTYPE html>
<html>
<head>
<title>Levenshtein Animation</title>
<style>
body { margin: 10px; }
#canvas { border: 1px solid black; }
</style>
</head>
<body>
<script>
const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 200;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');

function levenshtein(s, t) {
  const m = s.length + 1;
  const n = t.length + 1;
  const d = new Array(m).fill(0).map(() => new Array(n).fill(0));

  for (let i = 0; i < m; i++) d[i][0] = i;
  for (let j = 0; j < n; j++) d[0][j] = j;

  for (let i = 1; i < m; i++) {
    for (let j = 1; j < n; j++) {
      const cost = s[i - 1] === t[j - 1] ? 0 : 1;
      d[i][j] = Math.min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + cost);
    }
  }

  return d[m - 1][n - 1];
}

function drawMatrix(s, t) {
  const m = s.length + 1;
  const n = t.length + 1;
  const d = levenshtein(s, t);

  let x = 0;
  let y = 0;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < m; i++) {
    for (let j = 0; j < n; j++) {
      if (i === m - 1 && j === n - 1) break;
      const c = d[i][j];
      ctx.fillStyle = 'lightgray';
      ctx.fillRect(x, y, 30, 30);
      ctx.fillStyle = 'black';
      ctx.font = '12px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      let text;
      if (i < m - 1 && j === n - 1) {
        text = 'insert';
      } else if (j < n - 1 && i === m - 1) {
        text = 'delete';
      } else if (d[i][j] !== d[i + 1][j] && d[i][j] !== d[i][j + 1]) {
        text = 'substitute';
      }
      ctx.fillText(text, x + 15, y + 15);
      y += 30;
    }
    if (i < m - 1) {
      y = 0;
      x += 30;
    }
  }

  const backtrace = [];
  let i = m - 1;
  let j = n - 1;
  while (i > 0 || j > 0) {
    if (i < m - 1 && j === n - 1) {
      backtrace.push({ x: 15, y: y + 47.5, text: 'insert' });
      i++;
    } else if (j < n - 1 && i === m - 1) {
      backtrace.push({ x: x + 67.5, y: y + 47.5, text: 'delete' });
      j++;
    } else if (d[i][j] !== d[i + 1][j] && d[i][j] !== d[i][j + 1]) {
      backtrace.push({ x: x + 15 + i * 30 - 15, y: y + 47.5, text: 'substitute' });
      if (d[i][j] === d[i + 1][j]) j++;
      else i++;
    }
    y += 30;
    if (i < m - 1) {
      y = 0;
      x += 30;
    }
  }

  backtrace.reverse();

  ctx.clearRect(0, canvas.height - 50, canvas.width, 50);
  for (let i = 0; i < backtrace.length; i++) {
    const { x: left, y: top, text } = backtrace[i];
    ctx.fillStyle = 'lightgray';
    ctx.fillRect(left, top, 30, 20);
    ctx.fillStyle = 'black';
    ctx.font = '12px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(text, left + 15, top + 10);
  }

  const ops = [];
  for (let i = 0; i < backtrace.length; i++) {
    const { text } = backtrace[i];
    if (text !== 'substitute' || i === 0) ops.push(text);
  }
  ctx.clearRect(0, canvas.height - 50, canvas.width, 20);
  ctx.fillStyle = 'black';
  ctx.font = '12px Arial';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'top';
  const opText = ops.join(', ');
  ctx.fillText(opText, 10, canvas.height - 30);

  requestAnimationFrame(() => drawMatrix(s, t));
}

const s = 'paragraph';
const t = 'paragraphs';

drawMatrix(s, t);
</script>
</body>
</html>
```

MODEL Gqwen3:8bDNF

No usable answer reached the harness (ERR). Counted as a did-not-finish.

MODEL Hgemma4:26bDNF

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 label	Model	Blind score	Latency	Status
MODEL A	qwen3.5:9b	—	73.7 s	OK
MODEL B	deepseek-r1:14b	—	48.8 s	OK
MODEL C	mistral-small:24b	—	—	DNF
MODEL D	qwen3:14b	—	64.2 s	OK
MODEL E	qwen3-coder:30b	—	40.9 s	OK
MODEL F	llama3.1:8b	—	134.2 s	OK
MODEL G	qwen3:8b	—	—	DNF
MODEL H	gemma4:26b	—	—	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">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Levenshtein DP Matrix</title>
<style>
html,body{margin:0;height:100%;background:#0d1117;color:#c9d1d9;font:14px ui-monospace,SFMono-Regular,Menlo,monospace;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
canvas{border-radius:12px;box-shadow:0 10px 40px #0008}
#out{min-height:96px;width:min(92vw,640px);background:#161b22;border:1px solid #30363d;border-radius:10px;padding:12px 16px;line-height:1.6;white-space:pre-wrap}
.k{color:#8b949e}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="out"></div>
<script>
const words=["keyboard","elephant","computer","notebook","umbrella","mountain","sunlight","triangle","chocolate","telephone","butterfly","adventure","backspace","algorithm","developer","raspberry","blueprint","landscape","pineapple","waterfall"];
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),out=document.getElementById('out');
const cs=42,ox=74,oy=100;
let A,B,n,m,d,dir,ts,order,fi,phase,path,ops,ci,cj,acc,wait,hold,prev,CW,CH;
function resize(){const dpr=window.devicePixelRatio||1;CW=ox+(m+1)*cs+26;CH=oy+(n+1)*cs+30;cv.style.width=CW+'px';cv.style.height=CH+'px';cv.width=CW*dpr;cv.height=CH*dpr;ctx.setTransform(dpr,0,0,dpr,0,0);}
function init(){
  A=words[Math.random()*words.length|0];do{B=words[Math.random()*words.length|0]}while(B===A);
  n=A.length;m=B.length;d=[];dir=[];ts=[];
  for(let i=0;i<=n;i++){d.push(new Array(m+1).fill(null));dir.push(new Array(m+1).fill(0));ts.push(new Array(m+1).fill(0));}
  order=[];for(let i=0;i<=n;i++)for(let j=0;j<=m;j++)order.push([i,j]);
  fi=0;phase=0;path=new Set();ops=[];ci=n;cj=m;acc=0;wait=0;resize();
}
function step(now){
  const p=order[fi++],i=p[0],j=p[1];
  if(!i&&!j){d[0][0]=0;dir[0][0]=0;}
  else if(!i){d[0][j]=j;dir[0][j]=1;}
  else if(!j){d[i][0]=i;dir[i][0]=2;}
  else{const c=A[i-1]===B[j-1]?0:1,sub=d[i-1][j-1]+c,ins=d[i][j-1]+1,del=d[i-1][j]+1;
    let best=sub,k=c?3:4;
    if(ins<best){best=ins;k=1}
    if(del<best){best=del;k=2}
    d[i][j]=best;dir[i][j]=k;}
  ts[i][j]=now;
}
function back(){
  path.add(ci+','+cj);
  if(!ci&&!cj){phase=2;ops.reverse();hold=performance.now();return}
  const k=dir[ci][cj];
  if(k===1){ops.push('insert  "'+B[cj-1]+'"  before position '+(ci+1));cj--}
  else if(k===2){ops.push('delete  "'+A[ci-1]+'"  at position '+ci);ci--}
  else{if(k===3)ops.push('replace "'+A[ci-1]+'" -> "'+B[cj-1]+'"  at position '+ci);ci--;cj--}
}
function arrow(k){return k===1?'←':k===2?'↑':'↖'}
function draw(now){
  ctx.fillStyle='#0d1117';ctx.fillRect(0,0,CW,CH);
  ctx.textAlign='center';ctx.textBaseline='middle';
  ctx.font='bold 22px ui-monospace,monospace';ctx.fillStyle='#e6edf3';
  ctx.fillText(A+'  →  '+B,CW/2,34);
  ctx.font='13px ui-monospace,monospace';ctx.fillStyle='#8b949e';
  ctx.fillText(phase===0?'filling dynamic programming matrix':phase===1?'walking the backtrace':'edit distance = '+d[n][m],CW/2,60);
  ctx.font='bold 19px ui-monospace,monospace';ctx.fillStyle='#7d8590';
  for(let j=1;j<=m;j++)ctx.fillText(B[j-1].toUpperCase(),ox+(j+.5)*cs,oy-24);
  for(let i=1;i<=n;i++)ctx.fillText(A[i-1].toUpperCase(),ox-26,oy+(i+.5)*cs);
  const cur=fi>0?order[fi-1]:null;
  for(let i=0;i<=n;i++)for(let j=0;j<=m;j++){
    if(d[i][j]===null)continue;
    const e=1-Math.pow(1-Math.min(1,(now-ts[i][j])/280),3),s=cs-5;
    const on=path.has(i+','+j),live=phase===0&&cur&&cur[0]===i&&cur[1]===j;
    ctx.save();ctx.translate(ox+(j+.5)*cs,oy+(i+.5)*cs);ctx.scale(.65+.35*e,.65+.35*e);ctx.globalAlpha=.15+.85*e;
    ctx.fillStyle=on?'#f0883e':live?'#1f6feb':'#161b22';
    ctx.strokeStyle=on?'#ffd7a8':live?'#79c0ff':'#30363d';ctx.lineWidth=on||live?2:1;
    ctx.beginPath();ctx.roundRect(-s/2,-s/2,s,s,7);ctx.fill();ctx.stroke();
    ctx.fillStyle=on?'#26160a':'#c9d1d9';ctx.font='bold 16px ui-monospace,monospace';
    ctx.fillText(d[i][j],1,2);
    const k=dir[i][j];
    if(k){ctx.font='11px ui-monospace,monospace';
      ctx.fillStyle=on?'#4a2c0d':k===4?'#3fb950':k===1?'#58a6ff':k===2?'#d29922':'#db6d28';
      ctx.fillText(arrow(k),-s/2+10,-s/2+10);}
    ctx.restore();
  }
  ctx.textAlign='left';ctx.font='12px ui-monospace,monospace';
  const leg=[['↖ match','#3fb950'],['↖ replace','#db6d28'],['← insert','#58a6ff'],['↑ delete','#d29922']];
  leg.forEach((L,i)=>{ctx.fillStyle=L[1];ctx.fillText(L[0],18+i*Math.min(120,(CW-40)/4),CH-14)});
}
function report(){
  if(phase===0){out.innerHTML='<span class="k">computing '+fi+' / '+order.length+' cells...</span>';return}
  const head='<span class="k">distance('+A+', '+B+') = </span><b>'+d[n][m]+'</b>\n';
  const body=ops.length?ops.map((o,i)=>(i+1)+'. '+o).join('\n'):'no operations needed';
  out.innerHTML=head+(phase===1?'<span class="k">backtracing...</span>\n':'')+body;
}
function loop(now){
  if(!prev)prev=now;const dt=Math.min(64,now-prev);prev=now;
  if(phase===0){acc+=dt;while(acc>=36&&fi<order.length){acc-=36;step(now)}
    if(fi>=order.length){wait+=dt;if(wait>650){phase=1;acc=0}}}
  else if(phase===1){acc+=dt;while(acc>=165&&phase===1){acc-=165;back()}}
  else if(now-hold>4200){init();}
  draw(now);report();requestAnimationFrame(loop);
}
init();requestAnimationFrame(loop);
addEventListener('resize',()=>resize());
</script>
</body>
</html>