Maze generator & solver · llama-3.1-8b-instruct
No runnable output Cost / run $0.0002 Runtime 6.9s
Prompt for this run
Build a maze generator and solver visualization on a canvas. Use HTML, CSS, and JavaScript as needed. Write it to `index.html` in the current working directory using your file tools. Inline your own CSS and JavaScript. Do not use external assets, CDNs, or network requests. No third-party libraries are provided. Required behavior: - Generate a 25 by 15 cell rectangular maze using randomized recursive backtracking. All cells must be reachable, with exactly one simple path between any pair of cells. - Use the upper-left cell as Start and lower-right as Finish. Draw cell walls clearly and animate generation so carving progress is visible. - After generation finishes, animate either BFS or A-star exploring the maze, then highlight the complete path from Start to Finish. The path must cross only open passages. - Provide New Maze and Replay Solver. New Maze cancels the previous animation and generates a fresh maze; Replay Solver uses the existing maze without changing its walls. - Mark start, finish, exploration, and solution with distinguishable styles and a short legend. Verify: Inspect maze-carving progress and request New Maze while animation is active. Check that the new generation replaces the previous view cleanly. If the solver starts during inspection, check that its visible steps follow open passages.
This one-shot run produced no runnable artifact.
Upstream error from Groq: Failed to call a function. Please adjust your prompt. See 'failed_generation' for more details.
The transcript below shows what the model did — read it to see why the one shot fell short.
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.
RUN
METRICS
Transcript · 6 messages
Build a maze generator and solver visualization on a canvas. Use HTML, CSS, and JavaScript as needed. Write it to `index.html` in the current working directory using your file tools. Inline your own CSS and JavaScript. Do not use external assets, CDNs, or network requests. No third-party libraries are provided. Required behavior: - Generate a 25 by 15 cell rectangular maze using randomized recursive backtracking. All cells must be reachable, with exactly one simple path between any pair of cells. - Use the upper-left cell as Start and lower-right as Finish. Draw cell walls clearly and animate generation so carving progress is visible. - After generation finishes, animate either BFS or A-star exploring the maze, then highlight the complete path from Start to Finish. The path must cross only open passages. - Provide New Maze and Replay Solver. New Maze cancels the previous animation and generates a fresh maze; Replay Solver uses the existing maze without changing its walls. - Mark start, finish, exploration, and solution with distinguishable styles and a short legend. Verify: Inspect maze-carving progress and request New Maze while animation is active. Check that the new generation replaces the previous view cleanly. If the solver starts during inspection, check that its visible steps follow open passages.
<write> { "path": "index.html", "content": "<html><head><title>Maze Generator and Solver</title><style> /* Style the maze */ .maze { border: 1px solid black; display: inline-block; } .cell { height: 20px; width: 20px; border: 1px solid gray; display: inline-block; } .wall { background-color: black; } .path { background-color: blue; } /* Style the solver */ #solver { position: absolute; top: 50px; left: 50px; font-size: 24px; } </style></head><body><canvas id='canvas' width='300' height='450'></canvas> <button onclick=\"newMaze()\">New Maze</button> <button onclick=\"replaySolver()\">Replay Solver</button> <div id=\"solver\"></div><script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 300; canvas.height = 450; // Maze generation let maze = {}; let start = {x: 0, y: 0}; let finish = {x: 24, y: 14}; let stack = []; function random() { return Math.random() > 0.5; } function carve(x, y, w, h) { if (w == 1 || h == 1) return; // Only need to carve if w>1 and h>1 let wall = random() ? 'right' : 'bottom'; ctx.fillStyle = 'black'; ctx.fillRect(x, y, 20, h); if (wall == 'right') { stack.push({x: x + 20, y: y, w: 20, h: h}); for (let i = x + 20; i < x + 21; i++) { ctx.fillRect(i, y, 1, h); } } else if (wall == 'bottom') { stack.push({x: x, y: y + 20, w: w, h: 20}); for (let i = y + 20; i < y + 21; i++) { ctx.fillRect(x, i, w, 1); } } carve(stack[stack.length - 1].x, stack[stack.length - 1].y, stack[stack.length - 1].w, stack[stack.length - 1].h); } function renderMaze() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let y = 0; y < 15; y++) { for (let x = 0; x < 25; x++) { let wall = random() ? 'right' : 'bottom'; let rect; if (wall == 'right') { rect = {x: x * 20, y: y * 20, w: 20, h: 20}; ctx.fillStyle = 'black'; ctx.fillRect(rect.x, rect.y, 1, rect.h); // wall } else if (wall == 'bottom') { rect = {x: x * 20, y: y * 20, w: 20, h: 20}; ctx.fillStyle = 'black'; ctx.fillRect(rect.x, rect.y, rect.w, 1); // wall } else { ctx.fillStyle = 'white'; ctx.fillRect(rect.x, rect.y, rect.w, rect.h); // cell } } } ctx.fillStyle = 'red'; ctx.fillRect(start.x * 20, start.y * 20, 20, 20); // start ctx.fillStyle = 'green'; ctx.fillRect(finish.x * 20, finish.y * 20, 20, 20); // finish } function generateMaze() { maze = {'start': {'x': 0, 'y': 0}, 'finish': {'x': 24, 'y': 14}}; for (let i = 0; i < 25; i++) { stack = []; for (let j = 0; j < 15; j++) { if (j == 0) { stack.push({'x': i*20, 'y': j*20, 'w': 20, 'h': 1}); renderMaze(); canvas.requestAnimationFrame(generateMaze); return; } else { if (i == 0 && j > 0) { stack[stack.length - 1].w = 20; } carve(stack[stack.length - 1].x, stack[stack.length - 1].y, stack[stack.length - 1].w, 1); carve(stack[stack.length - 1].x, stack[stack.length - 1].y + 1, 1, 20); stack.push({x: stack[stack.length - 1].x, y: stack[stack.length - 1].y + 20, w: 20, h: 20}); renderMaze(); canvas.requestAnimationFrame(generateMaze); } } stack = []; } } // BFS solver let visited = []; function bfs(x, y) { let queue = [[x, y]]; visited.push([x, y]); while (queue.length > 0) { let [currentX, currentY] = queue.shift(); if (currentX == finish.x && currentY == finish.y) { ctx.fillStyle = 'blue'; ctx.fillRect(0, 0, canvas.width, canvas.height); for (let y = 0; y < 15; y++) { for (let x = 0; x < 25; x++) { if (visited.indexOf([x, y]) > -1) { ctx.fillStyle = 'white'; ctx.fillRect(x * 20, y * 20, 20, 20); } } } visited.forEach(([x, y]) => { ctx.fillStyle = 'blue'; ctx.fillRect(x * 20, y * 20, 20, 20); }); ctx.fillStyle = 'red'; ctx.fillRect(start.x * 20, start.y * 20, 20, 20); ctx.fillStyle = 'green'; ctx.fillRect(finish.x * 20, finish.y * 20, 20, 20); return true; } for (let dx = -1; dx <= 1; dx++) { for (let dy = -1; dy <= 1; dy++) { if (dx == 0 && dy == 0) continue; let nextX = currentX + dx; let nextY = currentY + dy; if (nextX > 0 && nextX < 25 && nextY > 0 && nextY < 15 && maze[nextX + ',' + nextY] == false) { queue.push([nextX, nextY]); visited.push([nextX, nextY]); } } } } } // Event listeners canvas.addEventListener('click', (e) => { let rect = canvas.getBoundingClientRect(); let x = e.clientX - rect.left; let y = e.clientY - rect.top; let cellX = Math.floor(x / 20); let cellY = Math.floor(y / 20); if (cellX >= 0 && cellX < 25 && cellY >= 0 && cellY < 15 && cellX != start.x && cellY != start.y && cellX != finish.x && cellY != finish.y) { ctx.fillStyle = 'white'; ctx.fillRect(cellX * 20, cellY * 20, 20, 20); } }); newMaze(); generateMaze(); let solver = document.getElementById('solver'); let solverInterval = setInterval(() => { // Run BFS solver let foundSolution = bfs(start.x, start.y); if (foundSolution) { clearInterval(solverInterval); } }, 10); </script></body></html>" }</write>
{"action":"reload","toY":150}{"action":"inspect","x":100,"y":300}agent produced no index.html
agent produced no index.html