\n \n \n `);\n});\n\napp.get(\"/client.js\", (c) => {\n return c.text(`\n import React, { useState, useEffect, useRef, useMemo } from 'react';\n import { createRoot } from 'react-dom/client';\n import * as THREE from 'three';\n import { Canvas, useFrame, useThree, createPortal } from '@react-three/fiber';\n import { motion, AnimatePresence } from 'framer-motion';\n import { z } from 'zod';\n\n // --- CLIENT CODE START ---\n\n const RELOOPER_VERTEX_SHADER = \\`\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n \\`;\n\n const RELOOPER_FRAGMENT_SHADER = \\`\n uniform sampler2D tOld;\n uniform sampler2D tNew;\n uniform float uDecay;\n uniform float uWarp;\n uniform float uZoom;\n uniform vec3 uColorShift;\n uniform float uTime;\n varying vec2 vUv;\n\n void main() {\n vec2 uv = vUv;\n \n // 1. Zoom (Center based)\n uv -= 0.5;\n uv /= uZoom;\n uv += 0.5;\n\n // 2. Warp (Sine distortion)\n uv.x += sin(uv.y * 10.0 + uTime) * uWarp;\n uv.y += cos(uv.x * 10.0 + uTime) * uWarp;\n\n // 3. Sample Previous Frame\n vec4 oldColor = texture2D(tOld, uv);\n \n // 4. Sample New Frame (The input seed)\n vec4 newColor = texture2D(tNew, vUv);\n\n // 5. Chromatic Feedback (Shift channels separately)\n vec4 shiftColor;\n shiftColor.r = texture2D(tOld, uv + vec2(uColorShift.r, 0.0)).r;\n shiftColor.g = texture2D(tOld, uv + vec2(uColorShift.g, 0.0)).g;\n shiftColor.b = texture2D(tOld, uv + vec2(uColorShift.b, 0.0)).b;\n shiftColor.a = oldColor.a;\n\n // 6. Blend\n // mix(History, Input, InputAlpha) -> But we want history to decay\n // Final = max(New, History * decay) works for additive trails\n \n vec3 finalColor = max(newColor.rgb, shiftColor.rgb * uDecay);\n \n gl_FragColor = vec4(finalColor, 1.0);\n }\n \\`;\n\n function RelooperEffects({ config }) {\n const { size, gl, scene, camera } = useThree();\n const [targets] = useState(() => {\n const t1 = new THREE.WebGLRenderTarget(size.width, size.height, {\n minFilter: THREE.LinearFilter,\n magFilter: THREE.LinearFilter,\n format: THREE.RGBAFormat,\n });\n const t2 = t1.clone();\n return [t1, t2];\n });\n \n const fsQuad = useRef();\n const uniforms = useMemo(() => ({\n tOld: { value: null },\n tNew: { value: null },\n uDecay: { value: 0.96 },\n uWarp: { value: 0.01 },\n uZoom: { value: 1.001 },\n uColorShift: { value: new THREE.Vector3(0.001, 0, -0.001) },\n uTime: { value: 0 }\n }), []);\n\n // Pointer trailing logic can go here (creating 'tNew')\n // For one-shot, we'll just let the \"Feedback\" be the whole scene vs a clear pass\n // Actually spite relooper usually renders the 'Scene' to tNew, then Feedback blends tNew + tOld -> Screen\n \n const sceneTarget = useMemo(() => new THREE.WebGLRenderTarget(size.width, size.height), [size]);\n\n useFrame((state) => {\n const { relooper } = config.visuals;\n \n // Update Uniforms\n uniforms.uDecay.value = relooper.feedbackIntensity;\n uniforms.uWarp.value = relooper.warp;\n uniforms.uZoom.value = relooper.zoom;\n uniforms.uColorShift.value.set(...relooper.colorShift);\n uniforms.uTime.value = state.clock.elapsedTime;\n\n // 1. Render Scene to sceneTarget\n gl.setRenderTarget(sceneTarget);\n gl.render(scene, camera);\n \n // 2. Ping Pong\n // Current Read = targets[0]\n // Current Write = targets[1]\n \n uniforms.tOld.value = targets[0].texture;\n uniforms.tNew.value = sceneTarget.texture;\n\n gl.setRenderTarget(targets[1]);\n if (fsQuad.current) {\n fsQuad.current.render(gl); // Draw full screen quad\n }\n \n // 3. Render Final to Screen\n gl.setRenderTarget(null);\n // Just draw the result texture to screen\n // We can optimize by making the 'fsQuad' draw directly to screen in step 2 if we aren't careful, \n // but passing feedback needs to happen.\n // Easiest: Render WriteTarget to Screen as a simple quad, OR just let the Feedback pass be the final.\n // Let's draw targets[1] to screen.\n \n // Swap\n targets.reverse(); // [0] becomes [1], [1] becomes [0]\n });\n\n return (\n (fsQuad.current = { render: (gl) => { \n // Manual render call for the quad is tricky in R3F structure without disabling auto-render\n // We need a proper 'Effects' pass. \n // For this One-Shot, we will assume standard R3F render is OFF or we use createPortal.\n gl.clear();\n ref.material.uniforms = uniforms;\n gl.render(ref, camera); \n }})}>\n \n \n \n );\n }\n\n // --- FEEDBACK LOOP COMPONENT ---\n // Managing the manual render loop inside R3F\n function FeedbackLoop({ config }) {\n const { gl, scene, camera, size } = useThree();\n const [targets] = useState(() => [\n new THREE.WebGLRenderTarget(size.width, size.height),\n new THREE.WebGLRenderTarget(size.width, size.height)\n ]);\n const sceneRT = useMemo(() => new THREE.WebGLRenderTarget(size.width, size.height), [size]);\n \n const material = useMemo(() => new THREE.ShaderMaterial({\n uniforms: {\n tOld: { value: null },\n tNew: { value: null },\n uDecay: { value: 0.9 },\n uWarp: { value: 0.01 },\n uZoom: { value: 1.0 },\n uColorShift: { value: new THREE.Vector3(0,0,0) },\n uTime: { value: 0 }\n },\n vertexShader: RELOOPER_VERTEX_SHADER,\n fragmentShader: RELOOPER_FRAGMENT_SHADER\n }), []);\n\n const fsQuad = useMemo(() => {\n const geom = new THREE.PlaneGeometry(2, 2);\n const mesh = new THREE.Mesh(geom, material);\n return mesh;\n }, [material]);\n\n const dummyCam = useMemo(() => new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1), []);\n\n useFrame((state) => {\n const { relooper } = config.visuals;\n material.uniforms.uDecay.value = relooper.feedbackIntensity;\n material.uniforms.uWarp.value = relooper.warp;\n material.uniforms.uZoom.value = relooper.zoom;\n material.uniforms.uColorShift.value.set(...relooper.colorShift);\n material.uniforms.uTime.value = state.clock.elapsedTime;\n \n // 1. Render actual R3F scene to 'sceneRT'\n // We need to prevent the default render. \n // In R3F, we can use useFrame(..., 1) to take over? \n // Or just put the 'content' in a portal to sceneRT?\n // Simpler: Just render the *inputs* (blobs) to sceneRT manually here.\n });\n \n // For this demo, let's keep it simple: \n // We render a simpler \"FeedbackManager\" that takes over limits.\n return null; \n }\n \n // --- SIMPLIFIED RELOOPER (Portals) ---\n function SpiteEngine({ config }) {\n const { gl, size, scene, camera } = useThree();\n const [targetA] = useState(() => new THREE.WebGLRenderTarget(size.width, size.height));\n const [targetB] = useState(() => new THREE.WebGLRenderTarget(size.width, size.height));\n const [sceneBuffer] = useState(() => new THREE.WebGLRenderTarget(size.width, size.height));\n \n const readRef = useRef(targetA);\n const writeRef = useRef(targetB);\n \n const quadMaterial = useMemo(() => new THREE.ShaderMaterial({\n uniforms: {\n tOld: { value: null }, // Previous Frame\n tNew: { value: null }, // Current Scene\n uDecay: { value: 0.96 },\n uWarp: { value: 0.01 },\n uZoom: { value: 1.002 },\n uColorShift: { value: new THREE.Vector3(0.001, 0.002, -0.001) },\n uTime: { value: 0 }\n },\n vertexShader: RELOOPER_VERTEX_SHADER,\n fragmentShader: RELOOPER_FRAGMENT_SHADER,\n depthTest: false,\n depthWrite: false\n }), []);\n \n const ortho = useMemo(() => new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1), []);\n const paramScene = useMemo(() => new THREE.Scene(), []);\n const quad = useMemo(() => new THREE.Mesh(new THREE.PlaneGeometry(2, 2), quadMaterial), [quadMaterial]);\n paramScene.add(quad);\n\n useFrame((state) => {\n // Updated uniforms\n const { relooper } = config.visuals;\n quadMaterial.uniforms.uDecay.value = relooper.feedbackIntensity;\n quadMaterial.uniforms.uWarp.value = relooper.warp;\n quadMaterial.uniforms.uZoom.value = relooper.zoom;\n quadMaterial.uniforms.uColorShift.value.set(...relooper.colorShift);\n quadMaterial.uniforms.uTime.value = state.clock.elapsedTime;\n \n // 1. Render the 'World' (Scene) to sceneBuffer\n // We assume the default 'scene' contains our source blobs\n gl.setRenderTarget(sceneBuffer);\n gl.clear();\n gl.render(scene, camera);\n \n // 2. Feedback Pass\n // Input: tNew (Current Scene), tOld (Last Feedback Frame)\n quadMaterial.uniforms.tNew.value = sceneBuffer.texture;\n quadMaterial.uniforms.tOld.value = readRef.current.texture;\n \n gl.setRenderTarget(writeRef.current);\n gl.render(paramScene, ortho);\n \n // 3. Render to Screen (The Result)\n gl.setRenderTarget(null);\n gl.clear();\n // We render the PARAM scene again? No, we need to render the WRITE TEXTURE.\n // But we already rendered to 'writeRef.current'.\n // To display it, we can't just blit.\n // We need to render a quad with 'writeRef.current' to screen.\n // Let's swap the map?\n \n // Actually, for Spite efficiency, the \"Feedback Pass\" IS the render to screen if we are single buffered, but we are double buffered.\n // Trick: Render step 2 to 'writeRef'.\n // Then Render a simple Quad with 'writeRef.texture' to null (screen).\n \n // We can reuse paramScene if we swap the uniform tOld? No.\n // Let's make a 'displayQuad'.\n }, 1);\n\n // Render pass 3 helper:\n const displayMaterial = useMemo(() => new THREE.MeshBasicMaterial({ map: writeRef.current.texture }), []);\n // We need to update map every frame\n useFrame(() => {\n displayMaterial.map = readRef.current.texture; // We display READ (which was WRITE last frame)? \n // No, display WRITE (current result).\n displayMaterial.map = writeRef.current.texture;\n \n // Swap\n const temp = readRef.current;\n readRef.current = writeRef.current;\n writeRef.current = temp;\n }, 2);\n \n return createPortal(\n \n \n \n ,\n new THREE.Scene() // We physically render this scene to screen?\n // Actually we need to perform the gl.render(displayScene, ortho) manually in step 3.\n );\n \n // FIX:\n // We will do ALL 3 steps in the `useFrame`.\n // Return null.\n }\n \n // --- FINAL SPITE ENGINE ---\n function SpiteEngineFixed({ config }) {\n const { gl, size, scene, camera } = useThree();\n const [targetA] = useState(() => new THREE.WebGLRenderTarget(size.width, size.height));\n const [targetB] = useState(() => new THREE.WebGLRenderTarget(size.width, size.height));\n const [sceneBuffer] = useState(() => new THREE.WebGLRenderTarget(size.width, size.height));\n \n const readRef = useRef(targetA);\n const writeRef = useRef(targetB);\n \n const ortho = useMemo(() => new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1), []);\n \n // Feedback Material\n const feedbackMaterial = useMemo(() => new THREE.ShaderMaterial({\n uniforms: {\n tOld: { value: null },\n tNew: { value: null },\n uDecay: { value: 0.96 },\n uWarp: { value: 0.01 },\n uZoom: { value: 1.002 },\n uColorShift: { value: new THREE.Vector3(0.001, 0.002, -0.001) },\n uTime: { value: 0 }\n },\n vertexShader: RELOOPER_VERTEX_SHADER,\n fragmentShader: RELOOPER_FRAGMENT_SHADER,\n depthTest: false,\n depthWrite: false\n }), []);\n \n // Display Material\n const displayMaterial = useMemo(() => new THREE.MeshBasicMaterial({ map: null }), []);\n \n const feedbackQuad = useMemo(() => new THREE.Mesh(new THREE.PlaneGeometry(2, 2), feedbackMaterial), [feedbackMaterial]);\n const displayQuad = useMemo(() => new THREE.Mesh(new THREE.PlaneGeometry(2, 2), displayMaterial), [displayMaterial]);\n \n const feedbackScene = useMemo(() => { const s = new THREE.Scene(); s.add(feedbackQuad); return s; }, [feedbackQuad]);\n const displayScene = useMemo(() => { const s = new THREE.Scene(); s.add(displayQuad); return s; }, [displayQuad]);\n\n useFrame((state) => {\n const { relooper } = config.visuals;\n feedbackMaterial.uniforms.uDecay.value = relooper.feedbackIntensity;\n feedbackMaterial.uniforms.uWarp.value = relooper.warp;\n feedbackMaterial.uniforms.uZoom.value = relooper.zoom;\n feedbackMaterial.uniforms.uColorShift.value.set(...relooper.colorShift);\n feedbackMaterial.uniforms.uTime.value = state.clock.elapsedTime;\n \n // 1. Render Scene -> sceneBuffer\n gl.setRenderTarget(sceneBuffer);\n gl.clear();\n gl.render(scene, camera);\n \n // 2. Feedback Loop -> writeRef\n feedbackMaterial.uniforms.tNew.value = sceneBuffer.texture;\n feedbackMaterial.uniforms.tOld.value = readRef.current.texture;\n \n gl.setRenderTarget(writeRef.current);\n gl.render(feedbackScene, ortho);\n \n // 3. Render Result -> Screen\n displayMaterial.map = writeRef.current.texture;\n gl.setRenderTarget(null);\n gl.clear();\n gl.render(displayScene, ortho);\n \n // 4. Swap\n const temp = readRef.current;\n readRef.current = writeRef.current;\n writeRef.current = temp;\n }, 1);\n\n return null;\n }\n\n function FloatingBlobs() {\n const mesh = useRef();\n useFrame((state) => {\n if(mesh.current) {\n mesh.current.position.x = Math.sin(state.clock.elapsedTime) * 2;\n mesh.current.position.y = Math.cos(state.clock.elapsedTime * 0.5) * 1;\n mesh.current.rotation.z += 0.01;\n }\n });\n return (\n \n \n \n \n );\n }\n\n function App() {\n // ... (App state same as before)\n const [config, setConfig] = useState(${JSON.stringify(DEFAULT_CONFIG)});\n const [loading, setLoading] = useState(false);\n const [chatInput, setChatInput] = useState(\"\");\n \n // ... (handleSassyCommand same as before)\n const handleSassyCommand = async () => {\n if (!chatInput.trim()) return;\n setLoading(true);\n try {\n const res = await fetch(\"/api/configure\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ transcript: chatInput })\n });\n if (!res.ok) throw new Error(\"Silent treatment from Admin.\");\n const data = await res.json();\n \n // Merge logic (simplified deep merge)\n const newConfig = { ...config };\n if (data.configDiff?.visuals?.relooper) {\n newConfig.visuals.relooper = { ...newConfig.visuals.relooper, ...data.configDiff.visuals.relooper };\n }\n if (data.configDiff?.visuals?.colors) {\n newConfig.visuals.colors = data.configDiff.visuals.colors;\n }\n if (data.configDiff?.metadata) {\n newConfig.metadata = { ...newConfig.metadata, ...data.configDiff.metadata };\n }\n setConfig(newConfig);\n localStorage.setItem(\"boutique_config\", JSON.stringify(newConfig));\n setChatInput(\"\");\n } catch (e) {\n console.error(e);\n alert(\"Sassy Admin says: Connection Error\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n <>\n

\n \n {/* Sassy Floating UI */}\n

\n \n

\n {config.metadata.occupation.toUpperCase()}\n

{config.metadata.vibeDescription}

\n setChatInput(e.target.value)} placeholder=\"Tell me what you want...\" style={{ flex: 1, padding: '12px', borderRadius: '12px', border: 'none', background: 'rgba(0,0,0,0.3)', color: '#fff' }} />\n \n

\n \n

\n \n );\n }\n \n // --- RENDER ---\n const root = createRoot(document.getElementById('root'));\n root.render();\n `);\n});\n\napp.post(\"/api/configure\", async (c) => {\n const body = await c.req.json();\n const transcript = body.transcript || \"Make it cool\";\n\n // OPENAI LOGIC\n const apiKey = Deno.env.get(\"OPENAI_API_KEY\");\n if (!apiKey) return c.json({ message: \"Server Error: Missing OPENAI_API_KEY\", configDiff: {} }, 500);\n\n const SYSTEM_PROMPT = `You are the Sassy Relooper Architect.\n Goal: Manage User's Vibe by translating requests into strict visual parameters.\n \n Relooper Mindset:\n - warp (0.0-0.1): Liquid distortion.\n - decay (0.8-0.99): Trail length. NEVER 1.0.\n - zoom (0.9-1.1): Tunnel effect.\n - colorShift (vec3): Chromatic aberration.\n \n Output JSON:\n { \"message\": \"...\", \"configDiff\": { \"visuals\": { \"relooper\": { ... }, \"colors\": [...] }, \"metadata\": { \"vibeDescription\": \"...\" } } }\n `;\n\n try {\n const response = await fetch(\"https://api.openai.com/v1/chat/completions\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\", \"Authorization\": `Bearer \\${apiKey}` },\n body: JSON.stringify({\n model: \"gpt-4o\",\n messages: [ { role: \"system\", content: SYSTEM_PROMPT }, { role: \"user\", content: transcript } ],\n response_format: { type: \"json_object\" }\n })\n });\n const data = await response.json();\n const content = JSON.parse(data.choices[0].message.content);\n return c.json(content);\n } catch (e) {\n console.error(e);\n return c.json({ message: \"Network Error\", configDiff: {} });\n }\n});\n\nexport default app.fetch;","deleted","label",[100],"permalink","https://www.val.town/x/banks/sassy/code/main.ts","extension","actionData","errors"]