Armory Control Panel

Your design, your control. Use hand gestures to pilot your creation.

Initializing...

Point: Move Arm

Hand Openness: Control Gripper

Peace Sign (Hold): Toggle Precision Mode

Thumbs Up (Hold): Save Position

Hand Customizer

\n Fluid Color\n \n

\n Add Accessories\n

\n \n \n \n \n

Speed100%

Gesture: None

Mode: Manual

\n \n \n \n

✨ Welcome to Armory ✨

Describe the robotic arm you want to build. Our AI design assistant will forge a unique theme for your creation.

\n \n

Your Arm is Forged!

Your custom Armory design is ready. Grant camera access to take control with your hand.

\n \n

\n \n\n`;\n}\n\n// --- BACKEND ROUTING & API LOGIC ---\nconst app = new Hono();\n\napp.post(\"/generate-design\", async (c) => {\n try {\n const body = await c.req.json();\n const description = body.description;\n\n if (\n !description || typeof description !== \"string\" ||\n description.trim().length < 5\n ) {\n return c.json({ error: \"A valid, descriptive prompt is required.\" }, 400);\n }\n\n // @ts-ignore\n const openai = new OpenAI();\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n { role: \"system\", content: DESIGN_GENERATOR_PROMPT },\n {\n role: \"user\",\n content:\n `Forge a robotic arm design based on this description: \"${description}\"`,\n },\n ],\n response_format: { type: \"json_object\" },\n });\n\n const content = completion.choices[0].message.content;\n\n try {\n const parsedContent = JSON.parse(content);\n if (\n !parsedContent.armProfile || !parsedContent.materials ||\n !parsedContent.uiMod\n ) {\n throw new Error(\"AI returned an incomplete design structure.\");\n }\n return c.json(parsedContent);\n } catch (parseError) {\n console.error(\n \"AI Response Parse Error:\",\n parseError,\n \"Content:\",\n content,\n );\n return c.json({\n error: \"The AI returned a malformed design. Please try again.\",\n }, 500);\n }\n } catch (error) {\n console.error(\"OpenAI API Error:\", error);\n return c.json({\n error: \"An error occurred while communicating with the AI designer.\",\n }, 500);\n }\n});\n\napp.get(\"*\", (c) => {\n const url = new URL(c.req.url);\n const sourceUrl = `https://${url.hostname}${\n url.pathname.endsWith(\"/\") ? url.pathname : url.pathname + \"/\"\n }`;\n return c.html(generateHtml(sourceUrl));\n});\n\nexport default app.fetch;","label","children",[70],"contentHash","c7dc0398ae32dfd79e0fa7a9390f4ca005e6e51ac6bc40454dbfc22a20f353e4","3b85b6aa-a983-11f0-bd1b-0224a6c84d84","93acc844-a976-11f0-b5a1-0224a6c84d84",["D",1760504155277],7,"// @ts-ignore\nimport { OpenAI } from \"https://esm.town/v/std/openai?v=4\";\n// --- TYPE DEFINITIONS ---\ninterface Keyframe {\n position: { x: number; y: number; z: number };\n gripper: number; // 0 (closed) to 1 (open)\n duration: number; // in milliseconds\n}\ninterface Choreography {\n reasoning: string;\n keyframes: Keyframe[];\n}\n// --- AI BEHAVIORAL GUIDELINES & PROMPT ENGINEERING ---\nconst GENERATION_STYLE_GUIDE =\n \"As the Robotics Choreographer AI, you must adopt the persona of a meticulous and disciplined robotics engineer. Your analysis should be articulated with precise, technical language. Avoid any colloquialisms, speculative phrasing, or subjective commentary. The objective is to produce a sequence of operations that is logical, efficient, and grounded in the provided system constraints, as if composed by a human expert in kinematics and motion planning.\";\nconst CHOREOGRAPHER_PROMPT = `\nYou are an expert Robotics Choreographer AI. Your task is to translate a high-level user goal into a precise sequence of keyframes for a 6-axis robotic arm.\nScene Context & Constraints:\nThe arm's base is at the world origin (0, 0, 0).\nThe arm's reachable workspace is approximately a hemisphere centered at (0, 80, 0) with a radius of 150 units. Avoid targets outside this zone.\nThere are two static objects in the scene:A 'gem' located at position { x: 50, y: 15, z: 50 }.\nA 'pedestal' located at position { x: -60, y: 30, z: 40 }.\nTo securely grip the 'gem', the gripper must be fully closed (gripper: 0) and positioned slightly above it at { x: 50, y: 25, z: 50 } before descending.\nTo place the 'gem' on the 'pedestal', the gripper should move to { x: -60, y: 40, z: 40 } before opening (gripper: 1).\nDefine a \"safe\" height for transitional movements as any position with y > 80 to avoid collisions.\nOutput Specification:\nYou MUST respond ONLY with a single, minified JSON object conforming to the Choreography interface.\nThe root object must have two keys: \"reasoning\" and \"keyframes\".\n\"reasoning\": A string providing a brief, technical justification for the chosen motion plan.\n\"keyframes\": An array of Keyframe objects.Each Keyframe requires \"position\" (x, y, z), \"gripper\" (a float from 0.0 to 1.0), and \"duration\" (in milliseconds).\nThe first keyframe should always move the arm to a safe, neutral starting position.\nThe sequence must be logical. For example, to pick up an object, the arm must first move above it with an open gripper, descend, close the gripper, and then ascend.\n${GENERATION_STYLE_GUIDE}\n`;\n// --- HTML & FRONTEND ---\nfunction generateHtml(sourceUrl: string) {\n const baseUrl = sourceUrl.endsWith(\"/\") ? sourceUrl : `${sourceUrl}/`;\n return `\n AI & Gesture Robotic Arm \n\n \n

\n\n

AI & Gesture Arm Control

Control with gestures or command the AI.

Initializing...

AI Choreographer

\n \n

Grip0%

Speed100%

Mode: Manual

\n \n \n

\n\n

\n \n \n

\n\n\n

✨ AI & Gesture Controlled Robotic Arm ✨

This demo uses your webcam for real-time hand tracking. Please grant camera permissions to begin.

\n \n

\n\n\n `;\n}\nexport default async function(req: Request) {\n const url = new URL(req.url);\n const action = url.searchParams.get(\"action\");\n if (req.method === \"POST\" && action === \"choreograph\") {\n try {\n const openai = new OpenAI();\n const body = await req.json();\n const goal = body.goal;\n if (!goal || typeof goal !== \"string\" || goal.trim().length === 0) {\n return new Response(JSON.stringify({ error: \"A valid goal is required.\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n const messages = [{ role: \"system\", content: CHOREOGRAPHER_PROMPT }, {\n role: \"user\",\n content: `User Goal: \"${goal}\"`,\n }];\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: messages,\n temperature: 0.5,\n response_format: { type: \"json_object\" },\n });\n const rawContent = completion.choices[0].message.content;\n let parsedContent: Choreography;\n try {\n parsedContent = JSON.parse(rawContent);\n if (\n !parsedContent.reasoning || !Array.isArray(parsedContent.keyframes)\n || parsedContent.keyframes.length === 0\n ) {\n throw new Error(\"AI returned an incomplete or invalid choreography structure.\");\n }\n }\n catch (parseError) {\n console.error(\"AI Response Parse Error:\", parseError);\n return new Response(JSON.stringify({ error: \"AI failed to generate a valid plan.\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n return new Response(JSON.stringify(parsedContent), { headers: { \"Content-Type\": \"application/json\" } });\n }\n catch (error) {\n console.error(\"AI Choreographer Error:\", error);\n return new Response(JSON.stringify({ error: error.message || \"An internal error occurred.\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n return new Response(generateHtml(url.href), { headers: { \"Content-Type\": \"text/html\" } });\n}",[70],"79f549cb18773bc7eb52e7460fd3a3e19fa030282f5bc69bdd9e27dd7029781f",["D",1760591965905],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","0199b749-1e1c-7399-b093-a7ba99382572","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","0199b749-1e1c-7399-b093-a97ac9fff69e","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_136":132},"org",{"_11":12,"_130":-5,"_131":132,"_104":105,"_133":134,"_135":48},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzMzZm1qMllGY2JhQmhhWFYwVXVvQ05aT2tJciJ9","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":58,"_13":14,"_34":181,"_46":-5,"_100":48,"_49":50,"_101":50,"_102":-5,"_103":-5,"_104":105,"_106":77,"_107":26,"_108":26,"_109":-5,"_110":22,"_53":111,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":117,"_118":117,"_119":120,"_121":120,"_122":120,"_123":117,"_124":117,"_125":182,"_127":183,"_129":184,"_47":48},"tree",[178],"files",[178],"counts",{"_168":22,"_169":20,"_170":22,"_171":172,"_173":174},"contents",[165],"file","upstreamProject",{"_32":39,"_13":14,"_102":-5,"_103":-5,"_49":50,"_125":163},"upstreamBranch",{"_32":33,"_34":161,"_36":162,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1760498719711],["D",1760504155277],{"_11":52,"_136":164},"https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzMySEFWaDMxNUQzTGRXZmdqRGRxZVhBT0pqcyJ9",{"_32":75,"_13":70,"_76":77,"_78":-5,"_79":57,"_80":56,"_81":26,"_34":166,"_40":20,"_83":84,"_85":86,"_64":48,"_87":-5,"_69":167},["D",1760591975788],[70],"pulls","branches","forks","envVars",{"_175":22,"_177":22},"connections",{"_175":22,"_176":22},"count","unfilledCount","emptyCount",{"_32":75,"_13":70,"_76":77,"_78":-5,"_79":57,"_80":56,"_81":26,"_34":82,"_40":20,"_83":84,"_85":86,"_64":48,"_87":-5,"_88":179,"_69":180},[],[70],["D",1760591965905],{"_11":12,"_136":132},{"_11":12,"_130":-5,"_131":132,"_104":105,"_133":134,"_135":48},{"_40":56,"_13":16,"_32":57,"_38":58,"_42":33,"_43":41,"_59":50,"_60":39,"_61":54,"_55":14,"_51":12},"ctx",{"_125":-5,"_158":218,"_219":220,"_221":222,"_223":48,"_224":48,"_225":48,"_226":26,"_227":-5,"_228":-7,"_229":-7,"_230":22,"_231":48,"_232":48,"_233":-5,"_234":48,"_235":48,"_236":48,"_237":-5},"ENV",{"_189":190,"_191":192,"_193":16,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217},"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"]

Compare

Mergevolt/mainintorealtime/main

Hmain.ts+642-260