Spaces:
Runtime error
Runtime error
| import gradio as gr | |
| _HTML = """ | |
| <html> | |
| <body> | |
| <canvas id="canvas" width="500" height="500"></canvas> | |
| <script id="vertex" type="x-shader/x-vertex"> | |
| #version 300 es | |
| in vec4 vertexPosition; | |
| void main() { | |
| gl_Position = vertexPosition; | |
| } | |
| </script> | |
| <script id="fragment" type="x-shader/x-fragment"> | |
| #version 300 es | |
| precision highp float; | |
| uniform vec2 canvasSize; | |
| uniform float time; | |
| out vec4 fragColor; | |
| void main() { | |
| vec2 coord = gl_FragCoord.xy/canvasSize.xy; | |
| coord = 2.*coord - 1.; | |
| float scale = (sin(time) + 1.)/2.; | |
| coord /= scale; | |
| if (abs(coord.x) < 1. && abs(coord.y) < 1.) { | |
| coord = (coord + 1.)/2.; | |
| fragColor = vec4(coord.x, coord.y, 1.-coord.x, 1); | |
| } else { | |
| fragColor = vec4(1,1,1,1); | |
| } | |
| } | |
| </script> | |
| <script> | |
| const canvas = document.getElementById("canvas"); | |
| const vertexCode = document.getElementById("vertex").textContent; | |
| const fragmentCode = document.getElementById("fragment").textContent; | |
| const gl = canvas.getContext("webgl2"); | |
| if (!gl) throw "WebGL2 not supported"; | |
| function createShader(shaderType, sourceCode) { | |
| const shader = gl.createShader(shaderType); | |
| gl.shaderSource(shader, sourceCode.trim()); | |
| gl.compileShader(shader); | |
| if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { | |
| throw gl.getShaderInfoLog(shader); | |
| } | |
| return shader; | |
| } | |
| const program = gl.createProgram(); | |
| gl.attachShader(program, createShader(gl.VERTEX_SHADER, vertexCode)); | |
| gl.attachShader(program, createShader(gl.FRAGMENT_SHADER, fragmentCode)); | |
| gl.linkProgram(program); | |
| if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { | |
| throw gl.getProgramInfoLog(program); | |
| } | |
| gl.useProgram(program); | |
| const vertices = [ | |
| [-1, -1], | |
| [1, -1], | |
| [-1, 1], | |
| [1, 1], | |
| ]; | |
| const vertexData = new Float32Array(vertices.flat()); | |
| gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); | |
| gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW); | |
| const vertexPosition = gl.getAttribLocation(program, "vertexPosition"); | |
| gl.enableVertexAttribArray(vertexPosition); | |
| gl.vertexAttribPointer(vertexPosition, 2, gl.FLOAT, false, 0, 0); | |
| const canvasSizeUniform = gl.getUniformLocation(program, 'canvasSize'); | |
| gl.uniform2f(canvasSizeUniform, canvas.width, canvas.height); | |
| const timeUniform = gl.getUniformLocation(program, 'time'); | |
| function draw() { | |
| gl.uniform1f(timeUniform, performance.now() / 1000); | |
| gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length); | |
| requestAnimationFrame(draw); | |
| } | |
| draw(); | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| HTML = """ | |
| """ | |
| def webgl(): | |
| return ("" + HTML + "") | |
| demo = gr.Interface( | |
| webgl, | |
| None, | |
| ["html"], | |
| ) | |
| demo.launch() | |