user: Can you set up a webgl demo for me? I'd like an example of a basic webgl shader. Make sure the output is available in index.html, but you can install any packages necessary.
Tool Request: call_WDR2ivBTbVjtYs4pywc1R2Fk - create_file
{"file_name":"index.html","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Basic WebGL Shader Demo</title>\n <style>\n body, html { margin: 0; padding: 0; overflow: hidden; }\n canvas { display: block; }\n </style>\n</head>\n<body>\n <canvas id=\"glcanvas\" width=\"640\" height=\"480\"></canvas>\n <script src=\"main.js\"></script>\n</body>\n</html>"}
Tool Response:

File created at ./index.html

Tool Request: call_OkwDATrPOg8AbTXivnz3ZEKa - create_file
{"file_name":"index.html","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Basic WebGL Shader Demo</title>\n <style>\n body, html { margin: 0; padding: 0; overflow: hidden; }\n canvas { display: block; width: 100vw; height: 100vh; }\n </style>\n</head>\n<body>\n <canvas id=\"glcanvas\"></canvas>\n <!-- glMatrix library for matrix operations -->\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js\"></script>\n <script src=\"main.js\"></script>\n</body>\n</html>"}
Tool Response:

File created at ./index.html

Tool Request: call_bGe0oC9j5RracLrL9Q0b71hl - create_file
{"file_name":"main.js","content":"// main.js\n(function() {\n // Vertex shader program\n const vsSource = `#version 300 es\n in vec4 aVertexPosition;\n uniform mat4 uModelViewMatrix;\n void main(void) {\n gl_Position = uModelViewMatrix * aVertexPosition;\n }\n `;\n\n // Fragment shader program\n const fsSource = `#version 300 es\n precision highp float;\n out vec4 fragColor;\n void main(void) {\n fragColor = vec4(0.2, 0.6, 0.8, 1.0);\n }\n `;\n\n // Initialize WebGL context\n const canvas = document.getElementById('glcanvas');\n const gl = canvas.getContext('webgl2');\n if (!gl) {\n alert('WebGL 2 not available, falling back on WebGL.');\n gl = canvas.getContext('webgl');\n }\n if (!gl) {\n alert('Your browser does not support WebGL.');\n return;\n }\n\n // Compile shader\n function loadShader(type, source) {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n console.error('Could not compile shader:', info);\n gl.deleteShader(shader);\n return null;\n }\n return shader;\n }\n\n // Create shader program\n function initShaderProgram(vsSource, fsSource) {\n const vertexShader = loadShader(gl.VERTEX_SHADER, vsSource);\n const fragmentShader = loadShader(gl.FRAGMENT_SHADER, fsSource);\n\n const shaderProgram = gl.createProgram();\n gl.attachShader(shaderProgram, vertexShader);\n gl.attachShader(shaderProgram, fragmentShader);\n gl.linkProgram(shaderProgram);\n\n if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {\n console.error('Unable to initialize the shader program:', gl.getProgramInfoLog(shaderProgram));\n return null;\n }\n return shaderProgram;\n }\n\n const shaderProgram = initShaderProgram(vsSource, fsSource);\n const programInfo = {\n program: shaderProgram,\n attribLocations: {\n vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),\n },\n uniformLocations: {\n modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),\n },\n };\n\n // Triangle positions\n const positions = [\n 0.0, 0.5,\n -0.5, -0.5,\n 0.5, -0.5,\n ];\n\n // Create buffer\n const positionBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);\n\n let then = 0;\n let rotation = 0;\n\n function render(now) {\n now *= 0.001; // convert to seconds\n const deltaTime = now - then;\n then = now;\n\n rotation += deltaTime;\n\n drawScene(gl, programInfo, positionBuffer, rotation);\n requestAnimationFrame(render);\n }\n requestAnimationFrame(render);\n\n function drawScene(gl, programInfo, buffer, rotation) {\n gl.clearColor(0.0, 0.0, 0.0, 1.0);\n gl.clearDepth(1.0);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n gl.useProgram(programInfo.program);\n\n // Bind position buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);\n gl.vertexAttribPointer(\n programInfo.attribLocations.vertexPosition,\n 2, // num components\n gl.FLOAT,\n false,\n 0,\n 0\n );\n\n // Set the matrix\n let modelViewMatrix = mat4.create();\n mat4.rotateZ(modelViewMatrix, modelViewMatrix, rotation);\n\n gl.uniformMatrix4fv(\n programInfo.uniformLocations.modelViewMatrix,\n false,\n modelViewMatrix\n );\n\n gl.drawArrays(gl.TRIANGLES, 0, 3);\n }\n})();\n"}
Tool Response:

File created at ./main.js

Tool Request: call_gi6vkz4wg76ek5WYULyeQ7ak - task_complete
{}