Spaces:

Vipitis
/

ShaderCoder

Runtime error

App Files Files Community

Vipitis commited on Jun 5, 2023

Commit

9d03b07

•

1 Parent(s): 4e064ff

working iframe preview

Browse files

Files changed (1) hide show

app.py +232 -2

app.py CHANGED Viewed

@@ -132,6 +132,232 @@ class ShadertoyCustom(Shadertoy):
         self._canvas.request_draw(self._draw_frame)
         self._fun_fn()
 text = """
 # Welcome to the interactive shadercoding demo.
 ## (WIP), you can try and explore the dataset a bit right now. (frames are rendered on the fly, not part of the dataset(yet))
@@ -150,6 +376,7 @@ If I find an efficient way, the shaders might run in real time and be interactiv
  - [] generate whole shaders (via prompts?)
  - [] accordion with generation parameters (as pipeline_kwargs?)
 """
 passes_dataset = datasets.load_dataset("Vipitis/Shadertoys")
 single_passes = passes_dataset.filter(lambda x: not x["has_inputs"] and x["num_passes"] == 1) #could also include shaders with no extra functions.
 all_single_passes = datasets.concatenate_datasets([single_passes["train"], single_passes["test"]])
@@ -167,6 +394,7 @@ async def get_image(code, time= 0.0, resolution=(512, 420)):
     tree = parser.parse(bytes(code, "utf8"))
     if tree.root_node.has_error:
         print("ERROR in the tree, aborting.")
         return None
     shader = ShadertoyCustom(code, resolution, OffscreenCanvas, run_offscreen) #pass offscreen canvas here.
     shader._uniform_data["time"] = time #set any time you want
@@ -312,7 +540,7 @@ def alter_body(old_code, func_id, funcs_list, pipeline=PIPE):
     generated_body = first_gened_func.child_by_field_name("body").text.decode()
     print(f"{generated_body=}")
     altered_code = old_code[:body_start_idx] + generated_body + old_code[body_end_idx:]
-    return altered_code
 def add_history(func_id, orig_rtn, gened_rtn, history):
     # is this a list? or a JSON dict?
@@ -347,6 +575,7 @@ with gr.Blocks() as site:
         with gr.Column():
             source_embed = gr.HTML('<iframe width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/WsBcWV?gui=true&t=0&paused=true&muted=true" allowfullscreen></iframe>', label="How this shader originally renders")
             rendered_frame = gr.Image(shape=(512, 420), label=f"rendered frame preview", type="pil") #colors are messed up?
         sample_code = gr.Code(label="Current Code (will update changes you generate)", language=None)
     sample_pass = gr.State(value={})
@@ -359,10 +588,11 @@ with gr.Blocks() as site:
     sample_idx.release(fn=grab_sample, inputs=[sample_idx], outputs=[sample_pass, sample_code, source_embed])
     # sample_idx.release(fn=list_dropdown, inputs=[sample_code], outputs=[funcs, func_dropdown]) #use multiple event handles to call other functions! seems to not work really well. always messes up
     gen_return_button.click(fn=alter_return, inputs=[sample_code, time_slider, pipe], outputs=[sample_code])
-    gen_func_button.click(fn=alter_body, inputs=[sample_code, func_dropdown, funcs, pipe], outputs=[sample_code])
     # run_button.click(fn=add_history, inputs=[time_slider, sample_pass, sample_code, hist_state], outputs=[history_table, hist_state])
     # sample_idx.release(fn=construct_embed, inputs=[sample_idx], outputs=[source_embed]) #twice to make have different outputs?
     sample_code.change(fn=list_dropdown, inputs=[sample_code], outputs=[funcs, func_dropdown]) # to update this after generation, so spans aren't messed up
     time_slider.release(fn=lambda code, time: asyncio.run(get_image(code, time)), inputs=[sample_code, time_slider], outputs=rendered_frame)
     render_button.click(fn=lambda code: asyncio.run(get_image(code)), inputs=[sample_code], outputs=rendered_frame)
     # run_button.click(fn=print, inputs=[model_cp, sample_idx], outputs=output)

         self._canvas.request_draw(self._draw_frame)
         self._fun_fn()
+def make_script(shader_code):
+    # code copied and fixed(escaping single quotes to double quotes!!!) from https://webglfundamentals.org/webgl/webgl-shadertoy.html
+    script = ("""
+<!-- Licensed under a BSD license. See license.html for license -->
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+<title>WebGL - Shadertoy</title>
+<link type="text/css" href="https://webglfundamentals.org/webgl/resources/webgl-tutorials.css" rel="stylesheet" />
+<style>
+.divcanvas {
+  position: relative;
+  display: inline-block;
+}
+canvas {
+  display: block;
+}
+.playpause {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  width: 100%;
+  height: 100%;
+  font-size: 60px;
+  justify-content: center;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.3);
+  transition: opacity 0.2s ease-in-out;
+}
+.playpausehide,
+.playpause:hover {
+  opacity: 0;
+}
+.iframe .divcanvas {
+  display: block;
+}
+</style>
+</head>
+<body>
+<div class="divcanvas">
+  <canvas id="canvas"></canvas>
+  <div class="playpause">▶</div>
+</div>
+blank canvas here indicates that some of the shadertoy specific functions are not yet supported with this implementation (like #define I believe). you can always copy and paste the code into a shadertoy.com window to try.
+</body>
+<!--
+for most samples webgl-utils only provides shader compiling/linking and
+canvas resizing because why clutter the examples with code thats the same in every sample.
+See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
+and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
+for webgl-utils, m3, m4, and webgl-lessons-ui.
+-->
+<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
+<script>
+"use strict";
+function main() {
+  // Get A WebGL context
+  /** @type {HTMLCanvasElement} */
+  const canvas = document.querySelector("#canvas");
+  const gl = canvas.getContext("webgl");
+  if (!gl) {
+    return;
+  }
+  const vs = `
+    // an attribute will receive data from a buffer
+    attribute vec4 a_position;
+    // all shaders have a main function
+    void main() {
+      // gl_Position is a special variable a vertex shader
+      // is responsible for setting
+      gl_Position = a_position;
+    }
+  `;
+  const fs = `
+    precision highp float;
+    uniform vec2 iResolution;
+    uniform vec2 iMouse;
+    uniform float iTime;
+    """ + shader_code + """
+    void main() {
+      mainImage(gl_FragColor, gl_FragCoord.xy);
+    }
+  `;
+  // setup GLSL program
+  const program = webglUtils.createProgramFromSources(gl, [vs, fs]);
+  // look up where the vertex data needs to go.
+  const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
+  // look up uniform locations
+  const resolutionLocation = gl.getUniformLocation(program, "iResolution");
+  const mouseLocation = gl.getUniformLocation(program, "iMouse");
+  const timeLocation = gl.getUniformLocation(program, "iTime");
+  // Create a buffer to put three 2d clip space points in
+  const positionBuffer = gl.createBuffer();
+  // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+  // fill it with a 2 triangles that cover clipspace
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+    -1, -1,  // first triangle
+     1, -1,
+    -1,  1,
+    -1,  1,  // second triangle
+     1, -1,
+     1,  1,
+  ]), gl.STATIC_DRAW);
+  const playpauseElem = document.querySelector(".playpause");
+  const inputElem = document.querySelector(".divcanvas");
+  inputElem.addEventListener("mouseover", requestFrame);
+  inputElem.addEventListener("mouseout", cancelFrame);
+  let mouseX = 0;
+  let mouseY = 0;
+  function setMousePosition(e) {
+    const rect = inputElem.getBoundingClientRect();
+    mouseX = e.clientX - rect.left;
+    mouseY = rect.height - (e.clientY - rect.top) - 1;  // bottom is 0 in WebGL
+  }
+  inputElem.addEventListener("mousemove", setMousePosition);
+  inputElem.addEventListener("touchstart", (e) => {
+    e.preventDefault();
+    playpauseElem.classList.add("playpausehide");
+    requestFrame();
+  }, {passive: false});
+  inputElem.addEventListener("touchmove", (e) => {
+    e.preventDefault();
+    setMousePosition(e.touches[0]);
+  }, {passive: false});
+  inputElem.addEventListener("touchend", (e) => {
+    e.preventDefault();
+    playpauseElem.classList.remove("playpausehide");
+    cancelFrame();
+  }, {passive: false});
+  let requestId;
+  function requestFrame() {
+    if (!requestId) {
+      requestId = requestAnimationFrame(render);
+    }
+  }
+  function cancelFrame() {
+    if (requestId) {
+      cancelAnimationFrame(requestId);
+      requestId = undefined;
+    }
+  }
+  let then = 0;
+  let time = 0;
+  function render(now) {
+    requestId = undefined;
+    now *= 0.001;  // convert to seconds
+    const elapsedTime = Math.min(now - then, 0.1);
+    time += elapsedTime;
+    then = now;
+    webglUtils.resizeCanvasToDisplaySize(gl.canvas);
+    // Tell WebGL how to convert from clip space to pixels
+    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+    // Tell it to use our program (pair of shaders)
+    gl.useProgram(program);
+    // Turn on the attribute
+    gl.enableVertexAttribArray(positionAttributeLocation);
+    // Bind the position buffer.
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
+    gl.vertexAttribPointer(
+        positionAttributeLocation,
+        2,          // 2 components per iteration
+        gl.FLOAT,   // the data is 32bit floats
+        false,      // dont normalize the data
+        0,          // 0 = move forward size * sizeof(type) each iteration to get the next position
+        0,          // start at the beginning of the buffer
+    );
+    gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height);
+    gl.uniform2f(mouseLocation, mouseX, mouseY);
+    gl.uniform1f(timeLocation, time);
+    gl.drawArrays(
+        gl.TRIANGLES,
+        0,     // offset
+        6,     // num vertices to process
+    );
+    requestFrame();
+  }
+  requestFrame();
+  requestAnimationFrame(cancelFrame);
+}
+main();
+</script>
+</html>
+""")
+    return script
+def make_iframe(shader_code): #keep a single function?
+     script = make_script(shader_code)
+     return f"""<iframe width="640" height="512" srcdoc=\'{script}\' allowfullscreen></iframe>"""
 text = """
 # Welcome to the interactive shadercoding demo.
 ## (WIP), you can try and explore the dataset a bit right now. (frames are rendered on the fly, not part of the dataset(yet))
  - [] generate whole shaders (via prompts?)
  - [] accordion with generation parameters (as pipeline_kwargs?)
 """
 passes_dataset = datasets.load_dataset("Vipitis/Shadertoys")
 single_passes = passes_dataset.filter(lambda x: not x["has_inputs"] and x["num_passes"] == 1) #could also include shaders with no extra functions.
 all_single_passes = datasets.concatenate_datasets([single_passes["train"], single_passes["test"]])
     tree = parser.parse(bytes(code, "utf8"))
     if tree.root_node.has_error:
         print("ERROR in the tree, aborting.")
+        raise gr.Error("the code seems to have issues")
         return None
     shader = ShadertoyCustom(code, resolution, OffscreenCanvas, run_offscreen) #pass offscreen canvas here.
     shader._uniform_data["time"] = time #set any time you want
     generated_body = first_gened_func.child_by_field_name("body").text.decode()
     print(f"{generated_body=}")
     altered_code = old_code[:body_start_idx] + generated_body + old_code[body_end_idx:]
+    return altered_code, pipeline
 def add_history(func_id, orig_rtn, gened_rtn, history):
     # is this a list? or a JSON dict?
         with gr.Column():
             source_embed = gr.HTML('<iframe width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/WsBcWV?gui=true&t=0&paused=true&muted=true" allowfullscreen></iframe>', label="How this shader originally renders")
             rendered_frame = gr.Image(shape=(512, 420), label=f"rendered frame preview", type="pil") #colors are messed up?
+            our_embed = gr.HTML(label="glsl render of the current code")
         sample_code = gr.Code(label="Current Code (will update changes you generate)", language=None)
     sample_pass = gr.State(value={})
     sample_idx.release(fn=grab_sample, inputs=[sample_idx], outputs=[sample_pass, sample_code, source_embed])
     # sample_idx.release(fn=list_dropdown, inputs=[sample_code], outputs=[funcs, func_dropdown]) #use multiple event handles to call other functions! seems to not work really well. always messes up
     gen_return_button.click(fn=alter_return, inputs=[sample_code, time_slider, pipe], outputs=[sample_code])
+    gen_func_button.click(fn=alter_body, inputs=[sample_code, func_dropdown, funcs, pipe], outputs=[sample_code, pipe])
     # run_button.click(fn=add_history, inputs=[time_slider, sample_pass, sample_code, hist_state], outputs=[history_table, hist_state])
     # sample_idx.release(fn=construct_embed, inputs=[sample_idx], outputs=[source_embed]) #twice to make have different outputs?
     sample_code.change(fn=list_dropdown, inputs=[sample_code], outputs=[funcs, func_dropdown]) # to update this after generation, so spans aren't messed up
+    sample_code.change(fn=make_iframe, inputs=[sample_code], outputs=[our_embed]) #twice could cause issues, find better ways.
     time_slider.release(fn=lambda code, time: asyncio.run(get_image(code, time)), inputs=[sample_code, time_slider], outputs=rendered_frame)
     render_button.click(fn=lambda code: asyncio.run(get_image(code)), inputs=[sample_code], outputs=rendered_frame)
     # run_button.click(fn=print, inputs=[model_cp, sample_idx], outputs=output)