${html}

\n \n \n \n `);\n});\n\n// --- API ENDPOINTS ---\napp.get(\"/api/content\", async (c) => {\n const result = await sqlite.execute(\n \"SELECT * FROM val_social_content ORDER BY created_at DESC LIMIT 20\",\n );\n return c.json(result.rows);\n});\n\napp.post(\"/api/generate\", async (c) => {\n const { prompt, username } = await c.req.json();\n\n // Logic: In a real app, we'd verify the user's token balance here.\n const completion = await openai.chat.completions.create({\n messages: [{\n role: \"system\",\n content:\n \"You are a creative coder. Output ONLY a standalone HTML file with Tailwind CSS and JS to solve the user's request. No explanations.\",\n }, {\n role: \"user\",\n content: prompt,\n }],\n model: \"gpt-4o-mini\",\n });\n\n const code = completion.choices[0].message.content;\n\n await sqlite.execute(\n \"INSERT INTO val_social_content (author, prompt, code) VALUES (?, ?, ?)\",\n [username, prompt, code],\n );\n\n return c.json({ success: true });\n});\n\napp.post(\"/api/vote\", async (c) => {\n const { id } = await c.req.json();\n await sqlite.execute(\n \"UPDATE val_social_content SET votes = votes + 1 WHERE id = ?\",\n [id],\n );\n return c.json({ success: true });\n});\n\n// --- FRONTEND COMPONENT ---\nfunction App() {\n const [content, setContent] = useState([]);\n const [prompt, setPrompt] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [user, setUser] = useState(\n \"Anonymous_\" + Math.floor(Math.random() * 1000),\n );\n\n useEffect(() => {\n fetchContent();\n }, []);\n\n const fetchContent = async () => {\n const res = await fetch(\"/api/content\");\n const data = await res.json();\n setContent(data);\n };\n\n const handleGenerate = async () => {\n setLoading(true);\n await fetch(\"/api/generate\", {\n method: \"POST\",\n body: JSON.stringify({ prompt, username: user }),\n });\n setPrompt(\"\");\n setLoading(false);\n fetchContent();\n };\n\n const upvote = async (id) => {\n await fetch(\"/api/vote\", {\n method: \"POST\",\n body: JSON.stringify({ id }),\n });\n fetchContent();\n };\n\n return (\n

\n Socio-AI Commons\n

\n Economics of Shared Intelligence\n

\n User: {user}\n

\n Daily Tokens: 50 / 50\n

\n\n

Generate New Artifact

\n setPrompt(e.target.value)}\n />\n \n {loading ? \"Generating (Cost: 10 Tokens)...\" : \"Generate Artifact\"}\n \n

\n\n

\n {content.map((item) => (\n \n

\n {item[1]}\n \n shared a prompt\n \n

\n upvote(item[0])}\n className=\"flex items-center space-x-2 bg-white border px-3 py-1 rounded-full hover:bg-pink-50 hover:border-pink-200 transition\"\n >\n ❤️\n {item[4]}\n \n

\n \"{item[2]}\"\n

\n \n

\n {\n const win = window.open();\n win.document.write(item[3]);\n }}\n className=\"bg-white/80 backdrop-blur text-xs px-2 py-1 rounded border shadow-sm\"\n >\n Fullscreen\n \n

\n ))}\n

\n \n );\n}\n\n// Hydrate client-side\nif (typeof document !== \"undefined\") {\n const { createRoot } = await import(\"https://esm.sh/react-dom/client\");\n createRoot(document.getElementById(\"root\")).render();\n}\n\nexport default app.fetch;","deleted","label",[99],"permalink","https://www.val.town/x/ziggyware/untitled-6295/code/new-file-5787.ts","extension","actionData","errors"]