Anthropic Shader Generator & Editor

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nfunction renderShader(canvas: HTMLCanvasElement, fragmentShaderSource: string, time: number) {\n const gl = canvas.getContext(\"webgl\");\n if (!gl) {\n console.error(\"WebGL not supported\");\n return;\n }\n\n const vertexShaderSource = `\n attribute vec4 a_position;\n void main() {\n gl_Position = a_position;\n }\n `;\n\n function createShader(gl: WebGLRenderingContext, type: number, source: string) {\n const shader = gl.createShader(type);\n if (!shader) return null;\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n console.error(gl.getShaderInfoLog(shader));\n gl.deleteShader(shader);\n return null;\n }\n return shader;\n }\n\n const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);\n const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);\n\n if (!vertexShader || !fragmentShader) {\n console.error(\"Error creating shaders\");\n return;\n }\n\n const program = gl.createProgram();\n if (!program) {\n console.error(\"Error creating program\");\n return;\n }\n\n gl.attachShader(program, vertexShader);\n gl.attachShader(program, fragmentShader);\n gl.linkProgram(program);\n\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n console.error(gl.getProgramInfoLog(program));\n return;\n }\n\n const timeUniformLocation = gl.getUniformLocation(program, \"u_time\");\n gl.uniform1f(timeUniformLocation, time);\n\n const positionAttributeLocation = gl.getAttribLocation(program, \"a_position\");\n const positionBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\n\n const positions = [\n -1,\n -1,\n 1,\n -1,\n -1,\n 1,\n 1,\n 1,\n ];\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);\n\n gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n gl.useProgram(program);\n gl.enableVertexAttribArray(positionAttributeLocation);\n gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\n\n gl.vertexAttribPointer(\n positionAttributeLocation,\n 2,\n gl.FLOAT,\n false,\n 0,\n 0,\n );\n\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n}\n\nfunction extractGLSLCode(text: string): string {\n const glslMatch = text.match(/```glsl\\n([\\s\\S]*?)\\n```/);\n return glslMatch\n ? glslMatch[1].trim()\n : text.trim();\n}\n\nexport default async function server(req: Request): Promise {\n if (req.method === \"POST\") {\n const anthropic = new Anthropic();\n const { prompt, currentCode } = await req.json();\n\n const messages = [\n { role: \"user\", content: \"Create a red to blue gradient shader.\" },\n {\n role: \"assistant\",\n content:\n \"```glsl\\nprecision mediump float;\\n\\nvoid main() {\\n vec2 uv = gl_FragCoord.xy / 400.0;\\n gl_FragColor = vec4(1.0 - uv.x, 0.0, uv.x, 1.0);\\n}\\n```\",\n },\n { role: \"user\", content: \"Make a circular pattern shader.\" },\n {\n role: \"assistant\",\n content:\n \"```glsl\\nprecision mediump float;\\n\\nvoid main() {\\n vec2 uv = (gl_FragCoord.xy - 200.0) / 200.0;\\n float dist = length(uv);\\n gl_FragColor = vec4(vec3(sin(dist * 10.0) * 0.5 + 0.5), 1.0);\\n}\\n```\",\n },\n { role: \"user\", content: prompt },\n ];\n\n if (currentCode) {\n messages.push({ role: \"user\", content: \"Modify this code:\\n\" + currentCode });\n }\n\n const startTime = Date.now();\n const completion = await anthropic.messages.create({\n messages,\n model: \"claude-3-5-haiku-20241022\",\n max_tokens: 8000,\n system:\n \"You are a GLSL shader expert. Generate fragment shaders for a 400x400 canvas. Use gl_FragCoord.xy for coordinates and gl_FragColor for output. Always use float literals (1.0) not integers (1). Use u_time for animation, which is a uniform float representing elapsed time in seconds. Wrap code in ```glsl fences.\",\n });\n const endTime = Date.now();\n const timeInSeconds = (endTime - startTime) / 1000;\n const totalTokens = completion.usage.output_tokens;\n\n const code = extractGLSLCode(completion.content[0].text);\n\n return new Response(\n JSON.stringify({\n code,\n performance: {\n tokensPerSecond: totalTokens / timeInSeconds,\n totalTokens,\n time: timeInSeconds,\n },\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(\n `\n \n \n \n Anthropic Shader Generator & Editor\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n body {\n margin: 0;\n padding: 20px;\n font-family: system-ui, sans-serif;\n background: #1a1a1a;\n color: #fff;\n }\n \n .container {\n display: flex;\n flex-direction: column;\n height: 100vh;\n gap: 20px;\n }\n \n .title {\n margin: 0;\n font-size: 1.5rem;\n font-weight: 900;\n text-align: center;\n }\n \n .prompt-form {\n display: flex;\n gap: 10px;\n }\n \n .prompt-input {\n flex: 1;\n padding: 10px;\n border: 1px solid #444;\n border-radius: 4px;\n background: #2a2a2a;\n color: #fff;\n }\n \n button {\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n background: #4a4a4a;\n color: #fff;\n cursor: pointer;\n }\n \n button:disabled {\n opacity: 0.7;\n cursor: not-allowed;\n }\n \n .performance {\n display: flex;\n gap: 20px;\n justify-content: center;\n font-family: monospace;\n background: #2a2a2a;\n padding: 10px;\n border-radius: 4px;\n }\n \n .content {\n display: flex;\n gap: 20px;\n flex: 1;\n min-height: 0;\n }\n \n .code-section {\n flex: 1;\n overflow: hidden;\n background: #2a2a2a;\n border-radius: 4px;\n }\n \n .code-editor {\n width: 100%;\n height: 100%;\n padding: 10px;\n border: none;\n background: #2a2a2a;\n color: #fff;\n font-family: monospace;\n font-size: 14px;\n resize: none;\n outline: none;\n }\n \n .preview-section {\n flex: 1;\n background: #2a2a2a;\n border-radius: 4px;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n canvas {\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n }\n`;","deleted","label",[98],"permalink","https://www.val.town/x/stevekrouse/seamlessBlushSwallow/code/main.tsx","extension","actionData","errors"]