ShaderCoder

Runtime error

App Files Files Community

Vipitis commited on Jul 11, 2023

Commit

3f8d823

1 Parent(s): 2d141af

utils package for html and tree

Browse files

Files changed (4) hide show

app.py +83 -317
utils/__init__.py +7 -0
utils/html_utils.py +230 -0
tree_utils.py → utils/tree_utils.py +5 -5

app.py CHANGED Viewed

@@ -6,235 +6,10 @@ import numpy as np
 import torch
 from threading import Thread
-from tree_utils import _parse_functions, _get_docstrings, _grab_before_comments, _line_chr2char
 PIPE = None
-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>
-\nblank 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="420" srcdoc=\'{script}\' allowfullscreen></iframe>"""
 intro_text = """
 # Welcome to the interactive shadercoding demo.
 This gives you access to a filtered version of the [Shadertoys](https://huggingface.co/datasets/Vipitis/Shadertoys) dataset, only shaders that consist of a single pass are available.
@@ -423,7 +198,7 @@ def _combine_generation_kwargs(temperature, max_new_tokens, top_p, repetition_pe
     gen_kwargs["repetition_penalty"] = repetition_penalty
     return gen_kwargs
-def alter_body(old_code, func_id, funcs_list: list, prompt, temperature, max_new_tokens, top_p, repetition_penalty, pipeline=PIPE):
     """
     Replaces the body of a function with a generated one.
     Args:
@@ -457,19 +232,19 @@ def alter_body(old_code, func_id, funcs_list: list, prompt, temperature, max_new
         print("no pipeline found, loading default one")
         pipeline = _make_pipeline("Vipitis/santacoder-finetuned-Shadertoys-fine")
-    func_start_idx = _line_chr2char(old_code, func_node.start_point[0], func_node.start_point[1])
     identifier_str = func_node.child_by_field_name("type").text.decode() + " " + func_node.child_by_field_name("declarator").text.decode() #func_start_idx:body_start_idx?
     body_node = func_node.child_by_field_name("body")
-    body_start_idx = _line_chr2char(old_code, body_node.start_point[0], body_node.start_point[1])
-    body_end_idx = _line_chr2char(old_code, body_node.end_point[0], body_node.end_point[1])
     print(f"{old_code[body_start_idx:body_end_idx]=}")
     model_context = identifier_str # base case
     # add any comments at the beginning of the function to the model_context
     # second_child = func_node.child_by_field_name("body").children[1] #might error out?
-    docstring = _get_docstrings(func_node) #might be empty?
     if docstring:
         model_context = model_context + "\n" + docstring
-    model_context = _grab_before_comments(func_node) + model_context #prepend comments
     if prompt != "":
         model_context = f"//avialable functions: {','.join([n.child_by_field_name('declarator').text.decode() for n in funcs_list])}\n" + model_context #prepend available functions
         model_context = "//Title: " + prompt + "\n" + model_context #prepend user prompt/title
@@ -486,7 +261,7 @@ def alter_body(old_code, func_id, funcs_list: list, prompt, temperature, max_new
     print(f"{ctx_with_generation=}")
     try:
         #strip the body
-        first_gened_func = _parse_functions(ctx_with_generation)[0] # truncate generation to a single function?
     except IndexError:
         print("generation wasn't a full function.")
         altered_code = old_code[:func_start_idx] + model_context + generation + "//the generation didn't complete the function!\n" + old_code[body_end_idx:] #needs a newline to break out of the comment.
@@ -500,13 +275,8 @@ def alter_body(old_code, func_id, funcs_list: list, prompt, temperature, max_new
     yield altered_code, pipeline #yield once so it updates? -> works... gg but doesn't seem to do it for the dropdown
     return altered_code, pipeline #never gets used by the code block? maybe I need to yield it first? but works in the ov_notebook
-def add_history(func_id, orig_rtn, gened_rtn, history):
-    # is this a list? or a JSON dict?
-    history[func_id] =  (orig_rtn, gened_rtn)
-    return history, history
 def list_dropdown(in_code): #only used for auto update, not on sample pick?
-    funcs = _parse_functions(in_code)
     # print(f"updating drop down to:{func_identifiers=}")
     func_identifiers = [f"{idx:2d}: {n.child_by_field_name('declarator').text.decode()}" for idx, n in enumerate(funcs)]
@@ -514,83 +284,6 @@ def list_dropdown(in_code): #only used for auto update, not on sample pick?
     print(f"updating drop down to:{func_identifiers}")
     return funcs, gr.Dropdown.update(choices=func_identifiers)
-def construct_embed(source_url):
-    shader_id = source_url.split("/")[-1]
-    return f'<iframe width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/{shader_id}?gui=true&t=0&paused=true&muted=true" allowfullscreen></iframe>'
-with gr.Blocks() as site:
-    top_md = gr.Markdown(intro_text)
-    model_cp = gr.Textbox(value="Vipitis/santacoder-finetuned-Shadertoys-fine", label="Model Checkpoint (Enter to load!)", interactive=True)
-    sample_idx = gr.Slider(minimum=0, maximum=10513, value=3211, label="pick sample from dataset", step=1.0)
-    func_dropdown = gr.Dropdown(value=["0: edit the Code (or load a shader) to update this dropdown"], label="chose a function to modify") #breaks if I add a string in before that? #TODO: use type="index" to get int - always gives None?
-    prompt_text = gr.Textbox(value="the title used by the model has generation hint", label="prompt text", info="leave blank to skip", interactive=True)
-    with gr.Accordion("Advanced settings", open=False): # from: https://huggingface.co/spaces/bigcode/bigcode-playground/blob/main/app.py
-        with gr.Row():
-            column_1, column_2 = gr.Column(), gr.Column()
-            with column_1:
-                temperature = gr.Slider(
-                    label="Temperature",
-                    value=0.2, #start out at 0 to do greedy? or will there be an error?
-                    minimum=0.0,
-                    maximum=1.0,
-                    step=0.05,
-                    interactive=True,
-                    info="Higher values produce more diverse outputs",
-                )
-                max_new_tokens = gr.Slider(
-                    label="Max new tokens",
-                    value=265,
-                    minimum=0,
-                    maximum=2048, #this could be inferred from the model?
-                    step=32,
-                    interactive=True,
-                    info="The maximum numbers of new tokens",
-                )
-            with column_2:
-                top_p = gr.Slider(
-                    label="Top-p (nucleus sampling)",
-                    value=0.90,
-                    minimum=0.0,
-                    maximum=1,
-                    step=0.05,
-                    interactive=True,
-                    info="Higher values sample more low-probability tokens",
-                )
-                repetition_penalty = gr.Slider(
-                    label="Repetition penalty",
-                    value=1.2,
-                    minimum=1.0,
-                    maximum=2.0,
-                    step=0.05,
-                    interactive=True,
-                    info="Penalize repeated tokens",
-                )
-    with gr.Row():
-        gen_return_button = gr.Button("generate a alternate return statement", label="generate return", scale=0)
-        gen_func_button = gr.Button("generate an alternate function body", label="generate function", scale=1)
-    with gr.Row():
-        with gr.Column():
-            source_embed = gr.HTML('<iframe width="640" height="360" frameborder="0" src="" allowfullscreen></iframe>', label="How this shader originally renders")
-            our_embed = gr.HTML(label="glsl render of the current code")
-        sample_code = gr.Code(new_shadertoy_code, label="Current Code (will update changes you generate)", language=None)
-    bot_md = gr.Markdown(outro_text)
-    sample_pass = gr.State(value={})
-    pipe = gr.State(value=PIPE)
-    pipe.value=_make_pipeline("Vipitis/santacoder-finetuned-Shadertoys-fine") # set a default like this?
-    funcs = gr.State(value=[])
-    # funcs.value.append(list_dropdown(sample_code.value)[0]) #to circumvent the json issue?
-    # hist_state = gr.State(Value={})
-    # history_table = gr.JSON()
-    model_cp.submit(fn=_make_pipeline, inputs=[model_cp], outputs=[pipe]) # how can we trigger this on load?
-    sample_idx.release(fn=grab_sample, inputs=[sample_idx], outputs=[sample_pass, sample_code, prompt_text, source_embed]) #funcs here?
-    gen_return_button.click(fn=alter_return, inputs=[sample_code, func_dropdown, temperature, max_new_tokens, top_p, repetition_penalty, pipe], outputs=[sample_code])
-    gen_func_button.click(fn=alter_body, inputs=[sample_code, func_dropdown, funcs, prompt_text, temperature, max_new_tokens, top_p, repetition_penalty, pipe], outputs=[sample_code, pipe]).then(
-        fn=list_dropdown, inputs=[sample_code], outputs=[funcs, func_dropdown]
-    )
-    sample_code.change(fn=list_dropdown, inputs=[sample_code], outputs=[funcs, func_dropdown]).then(
-        fn=make_iframe, inputs=[sample_code], outputs=[our_embed])
 if __name__ == "__main__": #works on huggingface?
     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.
@@ -598,5 +291,78 @@ if __name__ == "__main__": #works on huggingface?
     all_single_passes = datasets.concatenate_datasets([single_passes["train"], single_passes["test"]])
     num_samples = len(all_single_passes)
     site.queue()
     site.launch()

 import torch
 from threading import Thread
+from utils.tree_utils import parse_functions, get_docstrings, grab_before_comments, line_chr2char
+from utils.html_utils import make_iframe, construct_embed
 PIPE = None
 intro_text = """
 # Welcome to the interactive shadercoding demo.
 This gives you access to a filtered version of the [Shadertoys](https://huggingface.co/datasets/Vipitis/Shadertoys) dataset, only shaders that consist of a single pass are available.
     gen_kwargs["repetition_penalty"] = repetition_penalty
     return gen_kwargs
+def alter_body(old_code, func_id, funcs_list: list, prompt="", temperature=0.2, max_new_tokens=512, top_p=.95, repetition_penalty=1.2, pipeline=PIPE):
     """
     Replaces the body of a function with a generated one.
     Args:
         print("no pipeline found, loading default one")
         pipeline = _make_pipeline("Vipitis/santacoder-finetuned-Shadertoys-fine")
+    func_start_idx = line_chr2char(old_code, func_node.start_point[0], func_node.start_point[1])
     identifier_str = func_node.child_by_field_name("type").text.decode() + " " + func_node.child_by_field_name("declarator").text.decode() #func_start_idx:body_start_idx?
     body_node = func_node.child_by_field_name("body")
+    body_start_idx = line_chr2char(old_code, body_node.start_point[0], body_node.start_point[1])
+    body_end_idx = line_chr2char(old_code, body_node.end_point[0], body_node.end_point[1])
     print(f"{old_code[body_start_idx:body_end_idx]=}")
     model_context = identifier_str # base case
     # add any comments at the beginning of the function to the model_context
     # second_child = func_node.child_by_field_name("body").children[1] #might error out?
+    docstring = get_docstrings(func_node) #might be empty?
     if docstring:
         model_context = model_context + "\n" + docstring
+    model_context = grab_before_comments(func_node) + model_context #prepend comments
     if prompt != "":
         model_context = f"//avialable functions: {','.join([n.child_by_field_name('declarator').text.decode() for n in funcs_list])}\n" + model_context #prepend available functions
         model_context = "//Title: " + prompt + "\n" + model_context #prepend user prompt/title
     print(f"{ctx_with_generation=}")
     try:
         #strip the body
+        first_gened_func = parse_functions(ctx_with_generation)[0] # truncate generation to a single function?
     except IndexError:
         print("generation wasn't a full function.")
         altered_code = old_code[:func_start_idx] + model_context + generation + "//the generation didn't complete the function!\n" + old_code[body_end_idx:] #needs a newline to break out of the comment.
     yield altered_code, pipeline #yield once so it updates? -> works... gg but doesn't seem to do it for the dropdown
     return altered_code, pipeline #never gets used by the code block? maybe I need to yield it first? but works in the ov_notebook
 def list_dropdown(in_code): #only used for auto update, not on sample pick?
+    funcs = parse_functions(in_code)
     # print(f"updating drop down to:{func_identifiers=}")
     func_identifiers = [f"{idx:2d}: {n.child_by_field_name('declarator').text.decode()}" for idx, n in enumerate(funcs)]
     print(f"updating drop down to:{func_identifiers}")
     return funcs, gr.Dropdown.update(choices=func_identifiers)
 if __name__ == "__main__": #works on huggingface?
     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"]])
     num_samples = len(all_single_passes)
+    with gr.Blocks() as site:
+        top_md = gr.Markdown(intro_text)
+        model_cp = gr.Textbox(value="Vipitis/santacoder-finetuned-Shadertoys-fine", label="Model Checkpoint (Enter to load!)", interactive=True)
+        sample_idx = gr.Slider(minimum=0, maximum=10513, value=3211, label="pick sample from dataset", step=1.0)
+        func_dropdown = gr.Dropdown(value=["0: edit the Code (or load a shader) to update this dropdown"], label="chose a function to modify") #breaks if I add a string in before that? #TODO: use type="index" to get int - always gives None?
+        prompt_text = gr.Textbox(value="the title used by the model has generation hint", label="prompt text", info="leave blank to skip", interactive=True)
+        with gr.Accordion("Advanced settings", open=False): # from: https://huggingface.co/spaces/bigcode/bigcode-playground/blob/main/app.py
+            with gr.Row():
+                column_1, column_2 = gr.Column(), gr.Column()
+                with column_1:
+                    temperature = gr.Slider(
+                        label="Temperature",
+                        value=0.2, #start out at 0 to do greedy? or will there be an error?
+                        minimum=0.0,
+                        maximum=1.0,
+                        step=0.05,
+                        interactive=True,
+                        info="Higher values produce more diverse outputs",
+                    )
+                    max_new_tokens = gr.Slider(
+                        label="Max new tokens",
+                        value=265,
+                        minimum=0,
+                        maximum=2048, #this could be inferred from the model?
+                        step=32,
+                        interactive=True,
+                        info="The maximum numbers of new tokens",
+                    )
+                with column_2:
+                    top_p = gr.Slider(
+                        label="Top-p (nucleus sampling)",
+                        value=0.90,
+                        minimum=0.0,
+                        maximum=1,
+                        step=0.05,
+                        interactive=True,
+                        info="Higher values sample more low-probability tokens",
+                    )
+                    repetition_penalty = gr.Slider(
+                        label="Repetition penalty",
+                        value=1.2,
+                        minimum=1.0,
+                        maximum=2.0,
+                        step=0.05,
+                        interactive=True,
+                        info="Penalize repeated tokens",
+                    )
+        with gr.Row():
+            gen_return_button = gr.Button("generate a alternate return statement", label="generate return", scale=0)
+            gen_func_button = gr.Button("generate an alternate function body", label="generate function", scale=1)
+        with gr.Row():
+            with gr.Column():
+                source_embed = gr.HTML('<iframe width="640" height="360" frameborder="0" src="" allowfullscreen></iframe>', label="How this shader originally renders")
+                our_embed = gr.HTML(label="glsl render of the current code")
+            sample_code = gr.Code(new_shadertoy_code, label="Current Code (will update changes you generate)", language=None)
+        bot_md = gr.Markdown(outro_text)
+        sample_pass = gr.State(value={})
+        pipe = gr.State(value=PIPE)
+        pipe.value=_make_pipeline("Vipitis/santacoder-finetuned-Shadertoys-fine") # set a default like this?
+        funcs = gr.State(value=[])
+        # funcs.value.append(list_dropdown(sample_code.value)[0]) #to circumvent the json issue?
+        # hist_state = gr.State(Value={})
+        # history_table = gr.JSON()
+        model_cp.submit(fn=_make_pipeline, inputs=[model_cp], outputs=[pipe]) # how can we trigger this on load?
+        sample_idx.release(fn=grab_sample, inputs=[sample_idx], outputs=[sample_pass, sample_code, prompt_text, source_embed]) #funcs here?
+        gen_return_button.click(fn=alter_return, inputs=[sample_code, func_dropdown, temperature, max_new_tokens, top_p, repetition_penalty, pipe], outputs=[sample_code])
+        gen_func_button.click(fn=alter_body, inputs=[sample_code, func_dropdown, funcs, prompt_text, temperature, max_new_tokens, top_p, repetition_penalty, pipe], outputs=[sample_code, pipe]).then(
+            fn=list_dropdown, inputs=[sample_code], outputs=[funcs, func_dropdown]
+        )
+        sample_code.change(fn=list_dropdown, inputs=[sample_code], outputs=[funcs, func_dropdown]).then(
+            fn=make_iframe, inputs=[sample_code], outputs=[our_embed])
     site.queue()
     site.launch()

utils/__init__.py ADDED Viewed

	@@ -0,0 +1,7 @@

+from .tree_utils import (parse_functions, get_docstrings, grab_before_comments, line_chr2char)
+from .html_utils import (make_iframe, make_script, construct_embed)
+tree_funcs = ["parse_functions", "get_docstrings", "grab_before_comments", "line_chr2char"]
+html_funcs = ["make_iframe", "make_script", "construct_embed"]
+__all__ = tree_funcs + html_funcs

utils/html_utils.py ADDED Viewed

	@@ -0,0 +1,230 @@

+def construct_embed(source_url):
+    shader_id = source_url.split("/")[-1]
+    return f'<iframe width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/{shader_id}?gui=true&t=0&paused=true&muted=true" allowfullscreen></iframe>'
+def make_iframe(shader_code): #keep a single function?
+     script = make_script(shader_code)
+     return f"""<iframe width="640" height="420" srcdoc=\'{script}\' allowfullscreen></iframe>"""
+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>
+\nblank 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

tree_utils.py → utils/tree_utils.py RENAMED Viewed

@@ -1,13 +1,13 @@
 import tree_sitter
 from tree_sitter import Language, Parser
-Language.build_library("./build/my-languages.so", ['tree-sitter-glsl'])
 GLSL_LANGUAGE = Language('./build/my-languages.so', 'glsl')
 parser = Parser()
 parser.set_language(GLSL_LANGUAGE)
-def _parse_functions(in_code):
     """
     returns all functions in the code as their actual nodes.
     includes any comment made directly after the function definition or diretly after #copilot trigger
@@ -18,7 +18,7 @@ def _parse_functions(in_code):
     return funcs
-def _get_docstrings(func_node):
     """
     returns the docstring of a function node
     """
@@ -31,7 +31,7 @@ def _get_docstrings(func_node):
     return docstring
-def _grab_before_comments(func_node):
     """
     returns the comments that happen just before a function node
     """
@@ -47,7 +47,7 @@ def _grab_before_comments(func_node):
             return precomment
     return precomment
-def _line_chr2char(text, line_idx, chr_idx):
     """
     returns the character index at the given line and character index.
     """

 import tree_sitter
 from tree_sitter import Language, Parser
+Language.build_library("./build/my-languages.so", ['../tree-sitter-glsl'])
 GLSL_LANGUAGE = Language('./build/my-languages.so', 'glsl')
 parser = Parser()
 parser.set_language(GLSL_LANGUAGE)
+def parse_functions(in_code):
     """
     returns all functions in the code as their actual nodes.
     includes any comment made directly after the function definition or diretly after #copilot trigger
     return funcs
+def get_docstrings(func_node):
     """
     returns the docstring of a function node
     """
     return docstring
+def grab_before_comments(func_node):
     """
     returns the comments that happen just before a function node
     """
             return precomment
     return precomment
+def line_chr2char(text, line_idx, chr_idx):
     """
     returns the character index at the given line and character index.
     """