Upload 3 files

src/app.py

@@ -0,0 +1,154 @@
+import streamlit as st
+import json
+from pathlib import Path
+
+st.set_page_config(page_title="Shader + Comments JSON", layout="wide")
+
+st.title("🌀 Shader + Comments (Hugging Face Ready)")
+
+# -------------------------------
+# Use /data folder for persistent storage
+# -------------------------------
+DATA_DIR = Path("./data")
+DATA_DIR.mkdir(exist_ok=True)
+COMMENTS_FILE = DATA_DIR / "comments.json"
+
+# Load existing comments
+if COMMENTS_FILE.exists():
+    with open(COMMENTS_FILE, "r") as f:
+        comments = json.load(f)
+else:
+    comments = []
+
+# -------------------------------
+# Determine current shader
+# -------------------------------
+shader_code_default = """
+precision mediump float;
+uniform vec2 iResolution;
+uniform float iTime;
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    vec2 uv = fragCoord / iResolution.xy;
+    vec3 col = 0.5 + 0.5*cos(iTime + uv.xyx + vec3(0,2,4));
+    fragColor = vec4(col,1.0);
+}
+void main() { mainImage(gl_FragColor, gl_FragCoord.xy); }
+"""
+
+latest_shader = shader_code_default
+for c in reversed(comments):
+    if c.get("type") == "shader":
+        latest_shader = c["content"]
+        break
+
+# -------------------------------
+# Shader editor
+# -------------------------------
+shader_code = st.text_area("Shader Code (GLSL Fragment Shader)", latest_shader, height=250)
+
+# -------------------------------
+# WebGL Canvas
+# -------------------------------
+html_code = f"""
+<canvas id="glcanvas" width="800" height="500"></canvas>
+<script>
+const canvas = document.getElementById('glcanvas');
+const gl = canvas.getContext('webgl');
+if (!gl) {{
+  alert('WebGL not supported');
+}}
+
+const vertCode = `
+attribute vec4 a_position;
+void main() {{
+  gl_Position = a_position;
+}}
+`;
+
+const fragCode = `{shader_code}`;
+
+function createShader(gl, type, source) {{
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {{
+    alert(gl.getShaderInfoLog(shader));
+  }}
+  return shader;
+}}
+
+const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertCode);
+const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragCode);
+
+const program = gl.createProgram();
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+gl.linkProgram(program);
+gl.useProgram(program);
+
+const positionBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+  -1, -1, 1, -1, -1, 1,
+  -1, 1, 1, -1, 1, 1
+]), gl.STATIC_DRAW);
+
+const positionLoc = gl.getAttribLocation(program, "a_position");
+gl.enableVertexAttribArray(positionLoc);
+gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
+
+const iResolution = gl.getUniformLocation(program, "iResolution");
+const iTime = gl.getUniformLocation(program, "iTime");
+
+function render(time) {{
+  gl.uniform2f(iResolution, canvas.width, canvas.height);
+  gl.uniform1f(iTime, time * 0.001);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  requestAnimationFrame(render);
+}}
+
+requestAnimationFrame(render);
+</script>
+"""
+
+st.components.v1.html(html_code, height=520)
+
+# -------------------------------
+# Comments Section
+# -------------------------------
+st.markdown("---")
+st.subheader("💬 Comments / Add New Shader")
+
+comment_type = st.radio("Type", ["Normal Comment", "New Shader"])
+
+with st.form("comment_form", clear_on_submit=True):
+    user_name = st.text_input("Your name", "")
+    user_content = st.text_area("Content", "", height=80)
+    submitted = st.form_submit_button("Submit")
+
+    if submitted and user_content.strip():
+        new_comment = {
+            "name": user_name or "Anonymous",
+            "content": user_content,
+            "type": "shader" if comment_type == "New Shader" else "comment"
+        }
+        comments.append(new_comment)
+
+        # Save to JSON in /data folder
+        with open(COMMENTS_FILE, "w") as f:
+            json.dump(comments, f, indent=2)
+
+        st.success("Saved!")
+
+        # If it's a shader, update editor immediately
+        if new_comment["type"] == "shader":
+            st.experimental_rerun()
+
+# Display all comments
+for c in reversed(comments):
+    if c["type"] == "shader":
+        st.markdown(f"**{c['name']} added a new shader:**")
+        st.code(c["content"], language="glsl")
+    else:
+        st.markdown(f"**{c['name']}**: {c['content']}")

src/data/comments.json

@@ -0,0 +1,12 @@
+[
+  {
+    "name": "Testing",
+    "content": "Comments",
+    "type": "comment"
+  },
+  {
+    "name": "More",
+    "content": "Commentators",
+    "type": "comment"
+  }
+]

src/streamlit_app.py

@@ -1,40 +1,154 @@
-import altair as alt
-import numpy as np
-import pandas as pd
-import streamlit as st
-
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+import streamlit as st
+import json
+from pathlib import Path
+
+st.set_page_config(page_title="Shader + Comments JSON", layout="wide")
+
+st.title("🌀 Shader + Comments (Hugging Face Ready)")
+
+# -------------------------------
+# Use /data folder for persistent storage
+# -------------------------------
+DATA_DIR = Path("./data")
+DATA_DIR.mkdir(exist_ok=True)
+COMMENTS_FILE = DATA_DIR / "comments.json"
+
+# Load existing comments
+if COMMENTS_FILE.exists():
+    with open(COMMENTS_FILE, "r") as f:
+        comments = json.load(f)
+else:
+    comments = []
+
+# -------------------------------
+# Determine current shader
+# -------------------------------
+shader_code_default = """
+precision mediump float;
+uniform vec2 iResolution;
+uniform float iTime;
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    vec2 uv = fragCoord / iResolution.xy;
+    vec3 col = 0.5 + 0.5*cos(iTime + uv.xyx + vec3(0,2,4));
+    fragColor = vec4(col,1.0);
+}
+void main() { mainImage(gl_FragColor, gl_FragCoord.xy); }
+"""
+
+latest_shader = shader_code_default
+for c in reversed(comments):
+    if c.get("type") == "shader":
+        latest_shader = c["content"]
+        break
+
+# -------------------------------
+# Shader editor
+# -------------------------------
+shader_code = st.text_area("Shader Code (GLSL Fragment Shader)", latest_shader, height=250)
+
+# -------------------------------
+# WebGL Canvas
+# -------------------------------
+html_code = f"""
+<canvas id="glcanvas" width="800" height="500"></canvas>
+<script>
+const canvas = document.getElementById('glcanvas');
+const gl = canvas.getContext('webgl');
+if (!gl) {{
+  alert('WebGL not supported');
+}}
+
+const vertCode = `
+attribute vec4 a_position;
+void main() {{
+  gl_Position = a_position;
+}}
+`;
+
+const fragCode = `{shader_code}`;
+
+function createShader(gl, type, source) {{
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {{
+    alert(gl.getShaderInfoLog(shader));
+  }}
+  return shader;
+}}
+
+const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertCode);
+const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragCode);
+
+const program = gl.createProgram();
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+gl.linkProgram(program);
+gl.useProgram(program);
+
+const positionBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+  -1, -1, 1, -1, -1, 1,
+  -1, 1, 1, -1, 1, 1
+]), gl.STATIC_DRAW);
+
+const positionLoc = gl.getAttribLocation(program, "a_position");
+gl.enableVertexAttribArray(positionLoc);
+gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
+
+const iResolution = gl.getUniformLocation(program, "iResolution");
+const iTime = gl.getUniformLocation(program, "iTime");
+
+function render(time) {{
+  gl.uniform2f(iResolution, canvas.width, canvas.height);
+  gl.uniform1f(iTime, time * 0.001);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  requestAnimationFrame(render);
+}}
+
+requestAnimationFrame(render);
+</script>
+"""
+
+st.components.v1.html(html_code, height=520)
+
+# -------------------------------
+# Comments Section
+# -------------------------------
+st.markdown("---")
+st.subheader("💬 Comments / Add New Shader")
+
+comment_type = st.radio("Type", ["Normal Comment", "New Shader"])
+
+with st.form("comment_form", clear_on_submit=True):
+    user_name = st.text_input("Your name", "")
+    user_content = st.text_area("Content", "", height=80)
+    submitted = st.form_submit_button("Submit")
+
+    if submitted and user_content.strip():
+        new_comment = {
+            "name": user_name or "Anonymous",
+            "content": user_content,
+            "type": "shader" if comment_type == "New Shader" else "comment"
+        }
+        comments.append(new_comment)
+
+        # Save to JSON in /data folder
+        with open(COMMENTS_FILE, "w") as f:
+            json.dump(comments, f, indent=2)
+
+        st.success("Saved!")
+
+        # If it's a shader, update editor immediately
+        if new_comment["type"] == "shader":
+            st.experimental_rerun()
+
+# Display all comments
+for c in reversed(comments):
+    if c["type"] == "shader":
+        st.markdown(f"**{c['name']} added a new shader:**")
+        st.code(c["content"], language="glsl")
+    else:
+        st.markdown(f"**{c['name']}**: {c['content']}")