[{"_1":2,"_167":-5,"_168":-5},"loaderData",{"_3":4,"_91":92,"_154":155,"_166":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","fa80b67e1f763bfb4b247c3f5ca4f0b0730f3f5c","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","API_URL","https://api.val.town","WORKER_FINGERPRINT","799d99f2805306c2714a7cfefbeae178","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_93":94,"_95":96,"_94":97,"_149":-5,"_150":-5,"_151":152,"_127":128,"_135":136,"_100":101,"_98":99,"_117":-7,"_50":51,"_153":26},"type","val","author","02bea313-4abc-475e-987f-68da0b110d85",{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":-5,"_107":108,"_109":110,"_111":26,"_112":110,"_113":114,"_115":116,"_117":90,"_118":26,"_119":31,"_120":31,"_121":31,"_122":31,"_123":31,"_124":31,"_125":-5,"_20":126,"_131":-5,"_132":-7,"_133":134,"_135":136,"_137":138},"name","NeuralCanvas","valNameId","9c23cb22-e553-11ef-98bb-e6cdfca9ef9f","parentFolderId","isOwned","privacy","public","readme","valType","http","currentVersion","4cd8bf72-e554-11ef-a455-e6cdfca9ef9f","legacyPrivate","id","code","import App from 'https://esm.town/v/@username/NeuralCanvas/App';\nimport styles from 'https://esm.town/v/@username/NeuralCanvas/styles';\nimport { handleApiRequest } from 'https://esm.town/v/@username/NeuralCanvas/api';\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n \n if (url.pathname.startsWith('/api/')) {\n return handleApiRequest(request);\n }\n\n return new Response(`\n \n \n NeuralCanvas - AI-Generated Art Marketplace\n \n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}","createdAt",["D",1738933570092],"version","currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_127":128,"_129":130},"handle","toowired","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybVFtNXJXM05Ocm9OTzZPRzczcjdvWldMNHUifQ","forkedVal","interval","slug","toowired/NeuralCanvas","description","An interactive, runnable TypeScript val by toowired","versions",[139,142,146],{"_117":90,"_140":-5,"_115":141,"_112":110},"prId",["D",1738933570092],{"_117":143,"_140":-5,"_115":144,"_112":145},1,["D",1738933377627],"da2331d8-e553-11ef-9275-e6cdfca9ef9f",{"_117":31,"_140":-5,"_115":147,"_112":148},["D",1738933273636],"9c26e6c2-e553-11ef-98bb-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":156,"_157":158,"_94":159},"single","redirect","/v/toowired/NeuralCanvas/versions",{"_112":148,"_113":160,"_117":31,"_115":161,"_162":99,"_100":101,"_107":108,"_127":128,"_11":96,"_163":-5,"_164":-5,"_165":-5,"_153":26,"_133":134},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { motion } from \"https://esm.sh/framer-motion@10.12.16?deps=react@18.2.0\";\n\nfunction App() {\n const [products, setProducts] = useState([]);\n const [cart, setCart] = useState([]);\n const [view, setView] = useState('gallery');\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n fetchProducts();\n }, []);\n\n const fetchProducts = async () => {\n setLoading(true);\n try {\n const response = await fetch('/api/products');\n const data = await response.json();\n setProducts(data);\n } catch (error) {\n console.error(\"Failed to fetch products:\", error);\n }\n setLoading(false);\n };\n\n const addToCart = (product) => {\n setCart([...cart, product]);\n };\n\n const removeFromCart = (productId) => {\n setCart(cart.filter(item => item.id !== productId));\n };\n\n const submitCommission = async (event) => {\n event.preventDefault();\n // Implement commission submission logic here\n };\n\n return (\n

AI Art Gallery

\n \n

\n\n {view === 'gallery' && (\n \n

Featured Artwork

\n {products.length > 0 && (\n \n

{products[0].title}

{products[0].price}

\n \n \n )}\n

\n {loading ? (\n

\n ) : (\n products.slice(1).map(product => (\n \n

{product.title}

{product.price}

\n \n \n ))\n )}\n

\n \n )}\n\n {view === 'cart' && (\n \n

Your Cart

\n {cart.map(item => (\n

{item.title}

{item.price}

\n \n

\n ))}\n \n \n )}\n\n {view === 'commission' && (\n \n

Request a Custom Commission

\n \n \n

\n            <button type=\"submit\">Submit Request</button>\n          </form>\n        </motion.div>\n      )}\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const SCHEMA_VERSION = 1\n  const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_products_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      title TEXT NOT NULL,\n      description TEXT,\n      price REAL NOT NULL,\n      imageUrl TEXT NOT NULL,\n      type TEXT NOT NULL\n    )\n  `);\n\n  if (request.method === 'GET' && request.url.endsWith('/api/products')) {\n    const products = await sqlite.execute(`SELECT * FROM ${KEY}_products_${SCHEMA_VERSION}`);\n    return new Response(JSON.stringify(products.rows), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>AI Art Gallery</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `,\n  {\n    headers: {\n      \"content-type\": \"text/html\",\n    },\n  });\n}\n\nconst css = `\n:root {\n  --bg-color: #121212;\n  --text-color: #ffffff;\n  --accent-color: #bb86fc;\n  --secondary-color: #03dac6;\n}\n\nbody {\n  margin: 0;\n  font-family: 'Inter', sans-serif;\n  background-color: var(--bg-color);\n  color: var(--text-color);\n}\n\n.app {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 2rem;\n}\n\nheader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 2rem;\n}\n\nh1 {\n  font-size: 2.5rem;\n  color: var(--accent-color);\n}\n\nnav button {\n  background: none;\n  border: none;\n  color: var(--text-color);\n  font-size: 1rem;\n  cursor: pointer;\n  margin-left: 1rem;\n  transition: color 0.3s ease;\n}\n\nnav button:hover {\n  color: var(--accent-color);\n}\n\n.hero {\n  margin-bottom: 3rem;\n}\n\n.featured-product {\n  background-color: rgba(255, 255, 255, 0.05);\n  border-radius: 10px;\n  padding: 2rem;\n  text-align: center;\n}\n\n.featured-product img {\n  max-width: 100%;\n  border-radius: 5px;\n}\n\n.masonry-gallery {\n  column-count: 3;\n  column-gap: 1rem;\n}\n\n@media (max-width: 900px) {\n  .masonry-gallery {\n    column-count: 2;\n  }\n}\n\n@media (max-width: 600px) {\n  .masonry-gallery {\n    column-count: 1;\n  }\n}\n\n.product-card {\n  break-inside: avoid;\n  margin-bottom: 1rem;\n  background-color: rgba(255, 255, 255, 0.05);\n  border-radius: 10px;\n  padding: 1rem;\n}\n\n.product-card img {\n  width: 100%;\n  border-radius: 5px;\n}\n\nbutton {\n  background-color: var(--accent-color);\n  color: var(--bg-color);\n  border: none;\n  padding: 0.5rem 1rem;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n  background-color: var(--secondary-color);\n}\n\n.cart-item {\n  display: flex;\n  align-items: center;\n  margin-bottom: 1rem;\n  background-color: rgba(255, 255, 255, 0.05);\n  border-radius: 10px;\n  padding: 1rem;\n}\n\n.cart-item img {\n  width: 100px;\n  height: 100px;\n  object-fit: cover;\n  border-radius: 5px;\n  margin-right: 1rem;\n}\n\n.checkout-button {\n  display: block;\n  width: 100%;\n  padding: 1rem;\n  font-size: 1.2rem;\n  margin-top: 2rem;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n}\n\ninput, textarea {\n  margin-bottom: 1rem;\n  padding: 0.5rem;\n  border-radius: 5px;\n  border: 1px solid var(--accent-color);\n  background-color: rgba(255, 255, 255, 0.1);\n  color: var(--text-color);\n}\n\ntextarea {\n  min-height: 150px;\n}\n`;",["D",1738933273636],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]
</article></body></html>

NeuralCanvas

Version 0