CAD Designer

Loading OpenSCAD WASM...

\n\n \n \n\n`;\n}\n","children",[],[84],"8ade7e54-050d-11f1-9350-42dde27851f2","main.ts","30ddae08-0507-11f1-a8ee-42dde27851f2",11,["D",1770569114763],"http","/**\n * CAD Designer — main HTTP server\n * \n * Serves the viewer page, design API, and proxied OpenSCAD WASM files.\n * See README.md for the visual feedback workflow.\n */\n\nimport { Hono } from \"npm:hono@4\";\nimport { getDesign, listDesigns } from \"./designs/index.ts\";\nimport { viewerHTML } from \"./viewer.ts\";\n\nconst app = new Hono();\n\n// === WASM Proxy ===\n// Proxy OpenSCAD WASM files from GitHub releases with correct Content-Types.\n// This avoids all CDN/CORS/import issues by serving from same origin.\n\nconst WASM_RELEASE = \"https://github.com/openscad/openscad-wasm/releases/download/2022.03.20\";\nconst WASM_CACHE = new Map();\n\nconst MIME_TYPES: Record = {\n \".js\": \"application/javascript\",\n \".wasm\": \"application/wasm\",\n \".data\": \"application/octet-stream\",\n};\n\napp.get(\"/wasm/:filename\", async (c) => {\n const filename = c.req.param(\"filename\");\n \n // Only allow known files\n const allowed = [\n \"openscad.js\", \"openscad.wasm.js\", \"openscad.wasm\", \n \"openscad.fonts.js\", \"openscad.mcad.js\", \"openscad.wasm.data\"\n ];\n if (!allowed.includes(filename)) {\n return c.text(\"Not found\", 404);\n }\n\n const ext = filename.substring(filename.lastIndexOf(\".\"));\n const contentType = MIME_TYPES[ext] || \"application/octet-stream\";\n\n // Check in-memory cache\n if (WASM_CACHE.has(filename)) {\n const cached = WASM_CACHE.get(filename)!;\n return new Response(cached.data, {\n headers: {\n \"Content-Type\": cached.type,\n \"Cache-Control\": \"public, max-age=604800\", // 1 week\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n }\n\n try {\n const resp = await fetch(`${WASM_RELEASE}/${filename}`, { redirect: \"follow\" });\n if (!resp.ok) {\n return c.text(`Failed to fetch ${filename}: ${resp.status}`, 502);\n }\n\n const data = await resp.arrayBuffer();\n \n // Cache small files (< 2MB) in memory\n if (data.byteLength < 2 * 1024 * 1024) {\n WASM_CACHE.set(filename, { data, type: contentType });\n }\n\n return new Response(data, {\n headers: {\n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=604800\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n } catch (e) {\n return c.text(`Proxy error: ${e}`, 502);\n }\n});\n\n// === API ===\n\napp.get(\"/api/designs\", (c) => {\n return c.json(listDesigns());\n});\n\napp.get(\"/api/designs/:id\", (c) => {\n const design = getDesign(c.req.param(\"id\"));\n if (!design) return c.json({ error: \"not found\" }, 404);\n return c.json(design);\n});\n\n// === Pages ===\n\napp.get(\"/\", (c) => {\n return c.html(viewerHTML());\n});\n\nexport default app.fetch;\n",[],[94],"6bea9cea-0507-11f1-805e-42dde27851f2","README.md","6bea9d80-0507-11f1-805e-42dde27851f2",["D",1770566485857],"# CAD Designer — Visual Feedback 3D Design Tool\n\n## What This Is\n\nA tool for LLMs (specifically Claude on claude.ai) to design 3D printable models using **OpenSCAD** with a **visual feedback loop**. The key insight: LLMs can't do spatial reasoning blind. They need to render → see → fix → repeat.\n\n## The Visual Feedback Loop (CRITICAL)\n\nThis is the core workflow that makes LLM-driven CAD actually work. Without it, you're guessing and will get geometry wrong every time.\n\n### Prerequisites (Claude's Linux computer)\n\nThese tools are available in Claude's container environment:\n\n```bash\n# Install OpenSCAD (may already be installed)\napt-get update && apt-get install -y openscad xvfb\n\n# Verify\nxvfb-run -a openscad --version\n```\n\n### The Loop\n\n```\n1. WRITE → Create/edit a .scad file\n2. RENDER → xvfb-run -a openscad -o render.png --imgsize=800,600 \\\n --camera=200,200,150,0,0,40 model.scad\n3. VIEW → Use the `view` tool on render.png — YOU CAN SEE THE IMAGE\n4. ASSESS → What's wrong? Too flat? Wrong orientation? Missing features?\n5. FIX → Edit the .scad file\n6. GOTO 2\n```\n\n### Camera Tips\n\nThe `--camera` flag takes: `eyeX,eyeY,eyeZ,centerX,centerY,centerZ`\n\n```bash\n# Isometric (best for first look)\n--camera=200,200,150,0,0,40\n\n# Front view\n--camera=0,250,40,0,0,40\n\n# Top down \n--camera=0,1,300,0,0,30\n\n# Bottom up (to see underside)\n--camera=0,1,-300,0,0,20\n\n# Orthographic projection (engineering drawings)\n--camera=100,0,40,0,0,40 --projection=o\n```\n\nIf the model is too big/small in frame, adjust the eye distance (first 3 numbers).\n\n### Cross-Section Trick\n\nTo see internal geometry (cavities, bores, channels), cut the model in half:\n\n```openscad\ndifference() {\n // Your full model here\n my_model();\n \n // Cut away half (adjust plane as needed)\n translate([0, -200, -10]) cube([400, 400, 200]); // removes Y > 0\n}\n```\n\nThen render from the cut side to see inside.\n\n### Multi-Angle Verification\n\nAlways render at least 3 views:\n- **Isometric** — overall shape check\n- **Front/Side** — proportions, symmetry\n- **Cross-section** — internal geometry verification\n\n```bash\nxvfb-run -a openscad -o iso.png --imgsize=800,600 --camera=200,200,150,0,0,40 model.scad\nxvfb-run -a openscad -o front.png --imgsize=800,600 --camera=0,250,40,0,0,40 model.scad\nxvfb-run -a openscad -o section.png --imgsize=800,600 --camera=200,0,40,0,0,40 section.scad\n```\n\n## Why OpenSCAD (Not JSCAD)\n\n- **CLI rendering**: `openscad -o file.png` works headless with xvfb. JSCAD has no CLI renderer.\n- **Visual feedback**: The whole point is render → view → fix. JSCAD can only output geometry data, not images.\n- **Simpler syntax**: OpenSCAD's declarative style is easier for LLMs than JSCAD's imperative JS.\n- **Cross-sections**: OpenSCAD's `difference()` with a cutting plane lets you see inside models.\n- **Well-documented**: OpenSCAD has extensive docs and examples the LLM already knows.\n\n## OpenSCAD Cheat Sheet\n\n```openscad\n// Primitives\ncube([x, y, z]); // box\ncube([x, y, z], center=true); // centered box\ncylinder(r=10, h=20); // cylinder\ncylinder(r1=10, r2=5, h=20); // cone/taper\nsphere(r=10); // sphere\n\n// Transforms\ntranslate([x, y, z]) child();\nrotate([rx, ry, rz]) child();\nscale([sx, sy, sz]) child();\n\n// Booleans (THE KEY OPERATIONS)\nunion() { a(); b(); } // combine\ndifference() { a(); b(); } // a minus b\nintersection() { a(); b(); } // overlap only\n\n// Hull (convex hull — great for organic shapes)\nhull() { a(); b(); }\n\n// Loops\nfor (i = [0:4]) translate([i*10, 0, 0]) cube(5);\n\n// Modules (reusable parts)\nmodule my_part(size=10) {\n difference() {\n cube(size);\n sphere(r=size*0.6);\n }\n}\n\n// Resolution\n$fn = 64; // smooth curves (put at top of file)\n```\n\n## Common Pitfalls for LLMs\n\n1. **Threads on the outside**: When making internal threads (female), you SUBTRACT rings slightly larger than the bore. The grooves go INTO the wall, not out.\n\n2. **Orientation confusion**: Always define your Z-axis convention upfront. For 3D printing: Z = up, build plate is Z=0.\n\n3. **Forgetting to look**: ALWAYS render and view before declaring something done. You WILL get geometry wrong on the first try.\n\n4. **Camera too close**: Start with eye distances of 200+. If you see a wall of color, zoom out.\n\n5. **Flat chambers**: If you want a cone/pyramid shape, make sure height > base radius. Otherwise it looks like a disc.\n\n6. **Overcomplicating**: Start with the simplest possible shape. A manifold is just cylinders entering a hollow cone. Don't add channels, hulls, and complex merging unless actually needed.\n\n## Val Structure\n\n```\nmain.ts — HTTP server: viewer page + design API\ndesigns/ — OpenSCAD design files \n bottleSplitter.scad — 3-way bottle manifold\nREADME.md — This file (YOU ARE HERE)\n```\n\n## Design API\n\n```\nGET / → viewer page (Three.js + OpenSCAD WASM)\nGET /api/designs → list all designs\nGET /api/designs/:id → get design SCAD code \nPOST /api/designs/:id → save design { name, scad }\n```\n\n## Research Background\n\nThis approach is based on CADCodeVerify (ICLR 2025) which showed that LLMs need visual feedback loops for CAD:\n- Render the model\n- Vision model inspects the render \n- Provides corrective feedback\n- Iterate until correct\n\nOur implementation uses OpenSCAD CLI + xvfb for rendering and Claude's `view` tool for visual inspection. It's the same principle, just using tools already available in the environment.\n\n## For the Next Claude\n\nIf you're picking this up:\n\n1. **Install first**: `apt-get install -y openscad xvfb` (may already be there)\n2. **Test the loop**: Write a cube.scad, render it, view it. Make sure you can see images.\n3. **Read the designs/**: See what exists already\n4. **Iterate visually**: Never commit a design you haven't rendered and viewed from multiple angles\n5. **Cross-section complex parts**: If there's internal geometry, cut it open and look inside\n6. **Keep it simple**: Most printable objects are just cylinders, cubes, and cones with boolean operations\n",[],[103],["D",1770566495410],[112,113,114],[19],{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":70,"_47":48,"_49":121,"_17":72,"_52":24,"_53":73,"_55":56,"_57":-5,"_90":122,"_18":123},{"_36":59,"_13":60,"_39":61,"_41":42,"_43":44,"_45":62,"_47":48,"_49":118,"_17":64,"_52":24,"_53":65,"_55":56,"_57":-5,"_90":119,"_18":120},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":115,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_90":116,"_18":117},["D",1771093018540],[],[19,38],["D",1771093047382],[],[19,60],["D",1770568204937],[],[19,68],"0d59a1da-0507-11f1-87d4-42dde27851f2",["D",1770566327207],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Visual-feedback CAD design using OpenSCAD","imageUrl","userId","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_178":174},"org",{"_11":12,"_171":172,"_173":174,"_134":135,"_175":176,"_177":56},"branch",{"_17":62,"_13":16,"_36":44,"_163":124,"_164":-5,"_165":-5,"_166":-5,"_167":-5,"_168":-5,"_169":14,"_170":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789563599&sig=6d4d4bc45e131131f67274a1f94308a04e903573252e7f03fdbea160d142eca1","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":124,"_13":14,"_49":235,"_126":-5,"_127":56,"_128":129,"_130":129,"_131":132,"_133":-5,"_134":135,"_136":-5,"_137":56,"_138":-5,"_139":-5,"_140":51,"_141":142,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":148,"_149":148,"_150":151,"_152":151,"_153":151,"_154":148,"_155":148,"_156":236,"_158":237,"_160":238,"_162":56},[214,218,219,220],"files",[214,215,216,217,218,219,220],"counts",{"_205":51,"_206":72,"_207":51,"_32":208,"_209":210},[199,200,201],{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":64,"_47":48,"_49":76,"_17":51,"_52":77,"_53":-5,"_55":56,"_57":-5,"_18":198},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":70,"_47":48,"_49":71,"_17":72,"_52":24,"_53":73,"_55":56,"_57":-5,"_18":204},{"_36":59,"_13":60,"_39":61,"_41":42,"_43":44,"_45":62,"_47":48,"_49":63,"_17":64,"_52":24,"_53":65,"_55":56,"_57":-5,"_18":203},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_18":202},[19,38],[19,60],[19,68],"pulls","branches","forks",{"_211":51,"_213":51},"connections",{"_211":51,"_212":51},"count","unfilledCount","emptyCount",{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":64,"_47":48,"_49":109,"_17":51,"_52":77,"_53":-5,"_55":56,"_57":-5,"_90":233,"_18":234},{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":70,"_47":48,"_49":121,"_17":72,"_52":24,"_53":73,"_55":56,"_57":-5,"_90":231,"_18":232},{"_36":59,"_13":60,"_39":61,"_41":42,"_43":44,"_45":62,"_47":48,"_49":118,"_17":64,"_52":24,"_53":65,"_55":56,"_57":-5,"_90":229,"_18":230},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":115,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_90":227,"_18":228},{"_36":102,"_13":103,"_39":104,"_41":-5,"_43":44,"_45":88,"_47":48,"_49":105,"_17":51,"_52":24,"_53":106,"_55":56,"_57":-5,"_90":225,"_18":226},{"_36":93,"_13":94,"_39":95,"_41":-5,"_43":44,"_45":96,"_47":48,"_49":97,"_17":88,"_52":98,"_53":99,"_55":56,"_57":-5,"_90":223,"_18":224},{"_36":83,"_13":84,"_39":85,"_41":-5,"_43":44,"_45":86,"_47":48,"_49":87,"_17":88,"_52":24,"_53":89,"_55":56,"_57":-5,"_90":221,"_18":222},[],[84],[],[94],[],[103],[],[19,38],[],[19,60],[],[19,68],[215,216,217],[19],["D",1770566327207],{"_11":12,"_178":174},{"_11":12,"_171":172,"_173":174,"_134":135,"_175":176,"_177":56},{"_17":62,"_13":16,"_36":44,"_163":124,"_164":-5,"_165":-5,"_166":-5,"_167":-5,"_168":-5,"_169":14,"_170":12},"ctx",{"_156":-5,"_195":272,"_273":274,"_275":276,"_277":56,"_278":56,"_279":56,"_280":48,"_281":-5,"_282":-7,"_283":-7,"_284":51,"_285":56,"_286":56,"_287":-5,"_288":56,"_289":56,"_290":56,"_291":-5},"ENV",{"_243":244,"_245":246,"_247":16,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","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","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

◆ CAD DESIGNER OpenSCAD