[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_200":201,"_202":203},"routes/_app.x.$handle.$name",{"_95":94,"_31":44,"_103":85,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":24,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",5,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/app.js","latestPath","fileId","2aa7eb48-3307-11f0-9743-569c3dd06744","name","app.js","fileType","script","content","// Import Three.js from the global scope\nconst THREE = window.THREE;\n\n// Initialize project info\nconst projectInfo = window.__PROJECT_INFO__ || { url: \"#\" };\ndocument.getElementById(\"view-source\").href = projectInfo.url;\n\n// DOM Elements\nconst questionForm = document.getElementById(\"question-form\");\nconst questionInput = document.getElementById(\"question-input\");\nconst chatMessages = document.getElementById(\"chat-messages\");\nconst thinkingIndicator = document.getElementById(\"thinking\");\nconst avatarContainer = document.getElementById(\"avatar-container\");\nconst avatarLoading = document.getElementById(\"avatar-loading\");\n\n// 3D Scene Variables\nlet scene, camera, renderer, model, mixer, clock;\nlet isAvatarTalking = false;\nlet animationTimeout;\n\n// Initialize 3D Scene\ninitScene();\n\n// Event Listeners\nquestionForm.addEventListener(\"submit\", handleQuestionSubmit);\n\n// Functions\nasync function handleQuestionSubmit(e) {\n e.preventDefault();\n \n const question = questionInput.value.trim();\n if (!question) return;\n \n // Add user message to chat\n addMessageToChat(\"user\", question);\n \n // Clear input\n questionInput.value = \"\";\n \n // Show thinking indicator\n thinkingIndicator.classList.remove(\"hidden\");\n \n try {\n // Send question to API\n const response = await fetch(\"/api/ask\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ question }),\n });\n \n if (!response.ok) {\n throw new Error(\"Failed to get response\");\n }\n \n const data = await response.json();\n \n // Hide thinking indicator\n thinkingIndicator.classList.add(\"hidden\");\n \n // Add AI response to chat\n addMessageToChat(\"teacher\", data.answer);\n \n // Animate the avatar talking\n animateAvatarTalking();\n } catch (error) {\n console.error(\"Error:\", error);\n thinkingIndicator.classList.add(\"hidden\");\n addMessageToChat(\"teacher\", \"Sorry, I encountered an error while processing your question. Please try again.\");\n }\n}\n\nfunction addMessageToChat(role, text) {\n const messageDiv = document.createElement(\"div\");\n messageDiv.className = `chat-message ${role}`;\n \n const avatarEmoji = role === \"teacher\" ? \"👩‍🏫\" : \"👤\";\n \n messageDiv.innerHTML = `\n

\n ${avatarEmoji}\n

${text}

\n `;\n \n chatMessages.appendChild(messageDiv);\n \n // Scroll to bottom\n chatMessages.scrollTop = chatMessages.scrollHeight;\n}\n\nfunction initScene() {\n // Create scene\n scene = new THREE.Scene();\n scene.background = new THREE.Color(0xf0f0f0);\n \n // Create camera\n camera = new THREE.PerspectiveCamera(\n 45,\n avatarContainer.clientWidth / avatarContainer.clientHeight,\n 0.1,\n 1000\n );\n camera.position.set(0, 1.5, 4);\n camera.lookAt(0, 1, 0);\n \n // Create renderer\n renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(avatarContainer.clientWidth, avatarContainer.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n renderer.shadowMap.enabled = true;\n \n // Remove loading indicator and append renderer\n avatarLoading.remove();\n avatarContainer.appendChild(renderer.domElement);\n \n // Add lights\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\n scene.add(ambientLight);\n \n const directionalLight = new THREE.DirectionalLight(0xffffff, 1);\n directionalLight.position.set(1, 2, 3);\n directionalLight.castShadow = true;\n scene.add(directionalLight);\n \n // Create a simple avatar (a colorful 3D head)\n createSimpleAvatar();\n \n // Initialize animation clock\n clock = new THREE.Clock();\n \n // Start animation loop\n animate();\n \n // Handle window resize\n window.addEventListener(\"resize\", onWindowResize);\n}\n\nfunction createSimpleAvatar() {\n // Create a group to hold the avatar parts\n model = new THREE.Group();\n \n // Create head\n const headGeometry = new THREE.SphereGeometry(1, 32, 32);\n const headMaterial = new THREE.MeshStandardMaterial({ \n color: 0xffcc88,\n roughness: 0.7,\n metalness: 0.1\n });\n const head = new THREE.Mesh(headGeometry, headMaterial);\n model.add(head);\n \n // Create eyes\n const eyeGeometry = new THREE.SphereGeometry(0.15, 16, 16);\n const eyeMaterial = new THREE.MeshStandardMaterial({ color: 0x222222 });\n \n const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial);\n leftEye.position.set(-0.3, 0.1, 0.9);\n model.add(leftEye);\n \n const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial);\n rightEye.position.set(0.3, 0.1, 0.9);\n model.add(rightEye);\n \n // Create mouth (will be animated)\n const mouthGeometry = new THREE.BoxGeometry(0.5, 0.1, 0.1);\n const mouthMaterial = new THREE.MeshStandardMaterial({ color: 0x992222 });\n const mouth = new THREE.Mesh(mouthGeometry, mouthMaterial);\n mouth.position.set(0, -0.5, 0.9);\n mouth.name = \"mouth\"; // For reference in animation\n model.add(mouth);\n \n // Add glasses\n const glassesFrameGeometry = new THREE.TorusGeometry(0.2, 0.04, 16, 32, Math.PI * 2);\n const glassesFrameMaterial = new THREE.MeshStandardMaterial({ color: 0x222222 });\n \n const leftGlasses = new THREE.Mesh(glassesFrameGeometry, glassesFrameMaterial);\n leftGlasses.position.set(-0.3, 0.1, 0.95);\n leftGlasses.rotation.x = Math.PI / 2;\n model.add(leftGlasses);\n \n const rightGlasses = new THREE.Mesh(glassesFrameGeometry, glassesFrameMaterial);\n rightGlasses.position.set(0.3, 0.1, 0.95);\n rightGlasses.rotation.x = Math.PI / 2;\n model.add(rightGlasses);\n \n const bridgeGeometry = new THREE.BoxGeometry(0.3, 0.05, 0.05);\n const bridge = new THREE.Mesh(bridgeGeometry, glassesFrameMaterial);\n bridge.position.set(0, 0.1, 0.95);\n model.add(bridge);\n \n // Add hair\n const hairGeometry = new THREE.SphereGeometry(1.05, 32, 32, 0, Math.PI * 2, 0, Math.PI / 2);\n const hairMaterial = new THREE.MeshStandardMaterial({ \n color: 0x8B4513,\n roughness: 1,\n metalness: 0\n });\n const hair = new THREE.Mesh(hairGeometry, hairMaterial);\n hair.position.set(0, 0.1, 0);\n hair.rotation.x = Math.PI * 0.1;\n model.add(hair);\n \n // Add to scene\n scene.add(model);\n}\n\nfunction animateAvatarTalking() {\n // Clear any existing animation timeout\n if (animationTimeout) {\n clearTimeout(animationTimeout);\n }\n \n isAvatarTalking = true;\n \n // Set timeout to stop talking after 3 seconds\n animationTimeout = setTimeout(() => {\n isAvatarTalking = false;\n }, 3000);\n}\n\nfunction animate() {\n requestAnimationFrame(animate);\n \n const delta = clock.getDelta();\n \n // Animate the mouth if talking\n if (isAvatarTalking) {\n const mouth = model.getObjectByName(\"mouth\");\n if (mouth) {\n // Simple talking animation - open and close mouth\n mouth.scale.y = 1 + Math.sin(Date.now() * 0.01) * 1.5;\n }\n }\n \n // Gentle head movement\n if (model) {\n model.rotation.y = Math.sin(Date.now() * 0.001) * 0.1;\n model.position.y = Math.sin(Date.now() * 0.0015) * 0.05;\n }\n \n renderer.render(scene, camera);\n}\n\nfunction onWindowResize() {\n camera.aspect = avatarContainer.clientWidth / avatarContainer.clientHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(avatarContainer.clientWidth, avatarContainer.clientHeight);\n}","createdAt",["D",1747476632187],"branchVersion","branchId","bd7305d0-3306-11f0-85ec-569c3dd06744","id","bd72b3f0-3306-11f0-85ec-569c3dd06744","Teach",["D",1747476448969],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","b09cab60-322d-11f0-850d-c3fec8914ba3","pinnedFileId","06c464ae-3307-11f0-a591-569c3dd06744","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","e03e7ce1-b11a-4ee2-bd8e-7d7c1055c4b6","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},"branch",{"_13":84,"_31":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"isOwned",22,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","Problewk","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4QWFEU1VJSEJ3WHQ5b0JNbjd0YlpDbm9FTyJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":196,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":197,"_79":198,"_81":199,"_83":24},"tree",[161,165,166],"files",[161,162,163,164,165,166],"counts",{"_151":61,"_152":140,"_153":61,"_154":155,"_156":157},"contents",[125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":144,"_31":145,"_29":146,"_130":-5,"_40":41,"_39":147,"_132":57,"_37":148,"_13":61,"_33":149,"_35":-5,"_23":24,"_135":-5,"_26":150},{"_42":137,"_31":138,"_29":139,"_130":-5,"_40":41,"_39":140,"_132":24,"_37":141,"_13":61,"_33":20,"_35":142,"_23":24,"_135":-5,"_26":143},{"_42":128,"_31":129,"_29":55,"_130":-5,"_40":41,"_39":131,"_132":24,"_37":133,"_13":61,"_33":34,"_35":134,"_23":24,"_135":-5,"_26":136},"06c463e6-3307-11f0-a591-569c3dd06744","index.ts","parentId",2,"latest",["D",1747476571972],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main page\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Get project info for view source link\n const projectInfo = parseProject(import.meta.url);\n \n // Inject project info\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\n// API endpoint for AI responses\napp.post(\"/api/ask\", async c => {\n try {\n const body = await c.req.json();\n const { question } = body;\n \n if (!question) {\n return c.json({ error: \"Question is required\" }, 400);\n }\n \n const openai = new OpenAI();\n const completion = await openai.chat.completions.create({\n messages: [\n { \n role: \"system\", \n content: \"You are a helpful, educational AI teacher. Provide clear, concise, and accurate information. Keep responses educational and suitable for students. Include examples where appropriate.\" \n },\n { role: \"user\", content: question }\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 500,\n });\n \n return c.json({ \n answer: completion.choices[0].message.content \n });\n } catch (error) {\n console.error(\"Error processing request:\", error);\n return c.json({ error: \"Failed to process your question\" }, 500);\n }\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;","label",[129],"fea2b2c6-3306-11f0-ad17-569c3dd06744","README.md","fea2b384-3306-11f0-ad17-569c3dd06744",1,["D",1747476558330],"# Digital 3D AI-Powered Teacher\n\nThis Val Town project creates an interactive 3D AI-powered teacher that can answer educational questions.\n\n## Features\n\n- 3D avatar representation using Three.js\n- AI-powered responses using OpenAI's API\n- Interactive chat interface\n- Educational content delivery\n\n## Project Structure\n\n- `index.ts` - Main HTTP entry point\n- `frontend/` - Frontend assets and components\n - `index.html` - Main HTML template\n - `app.js` - Frontend JavaScript\n - `style.css` - Styling\n- `shared/` - Shared utilities and types\n\n## How to Use\n\n1. Visit the application URL\n2. Ask educational questions in the chat interface\n3. The 3D teacher avatar will respond with AI-generated educational content\n\n## Technologies Used\n\n- Three.js for 3D rendering\n- OpenAI API for AI responses\n- Tailwind CSS for styling",[138],"109f7252-3307-11f0-b87d-569c3dd06744","frontend","7bce36a6-aa6b-471d-bd6f-35c5ed4443e3",3,["D",1747476588508],"directory",[145],"pulls","branches","forks","envVars",{"_158":61,"_160":61},"connections",{"_158":61,"_159":61},"count","unfilledCount","emptyCount",{"_42":144,"_31":145,"_29":146,"_130":-5,"_40":41,"_39":147,"_132":57,"_37":193,"_13":61,"_33":149,"_35":-5,"_23":24,"_135":-5,"_168":194,"_26":195},{"_42":189,"_31":32,"_29":30,"_130":146,"_40":41,"_39":14,"_132":24,"_37":190,"_13":61,"_33":34,"_35":36,"_23":24,"_135":-5,"_168":191,"_26":192},{"_42":182,"_31":183,"_29":184,"_130":146,"_40":41,"_39":147,"_132":24,"_37":185,"_13":61,"_33":20,"_35":186,"_23":24,"_135":-5,"_168":187,"_26":188},{"_42":174,"_31":175,"_29":176,"_130":146,"_40":41,"_39":177,"_132":24,"_37":178,"_13":61,"_33":20,"_35":179,"_23":24,"_135":-5,"_168":180,"_26":181},{"_42":137,"_31":138,"_29":139,"_130":-5,"_40":41,"_39":140,"_132":24,"_37":171,"_13":61,"_33":20,"_35":142,"_23":24,"_135":-5,"_168":172,"_26":173},{"_42":128,"_31":129,"_29":55,"_130":-5,"_40":41,"_39":131,"_132":24,"_37":167,"_13":61,"_33":34,"_35":134,"_23":24,"_135":-5,"_168":169,"_26":170},["D",1747476571972],"children",[],[129],["D",1747476558330],[],[138],"1444cfec-3307-11f0-9adf-569c3dd06744","style.css","1444d096-3307-11f0-9adf-569c3dd06744",4,["D",1747476594623],"/* Custom styles for the Digital 3D AI Teacher */\n\n/* Chat message styling */\n.chat-message {\n margin-bottom: 1rem;\n max-width: 80%;\n}\n\n.chat-message.teacher {\n align-self: flex-start;\n margin-right: auto;\n}\n\n.chat-message.user {\n align-self: flex-end;\n margin-left: auto;\n text-align: right;\n}\n\n.chat-message.user .message {\n background-color: #e0f2fe;\n}\n\n#chat-messages {\n display: flex;\n flex-direction: column;\n}\n\n/* Animation delays for thinking dots */\n.delay-75 {\n animation-delay: 0.75s;\n}\n\n.delay-150 {\n animation-delay: 0.15s;\n}\n\n.delay-300 {\n animation-delay: 0.3s;\n}\n\n/* 3D avatar container */\n#avatar-container {\n position: relative;\n overflow: hidden;\n}\n\n/* Ensure canvas is responsive */\ncanvas {\n width: 100% !important;\n height: 100% !important;\n display: block;\n}",[],[145,175],"109f67da-3307-11f0-b87d-569c3dd06744","index.html","109f687a-3307-11f0-b87d-569c3dd06744",["D",1747476588508],"\n\n\n \n \n Digital 3D AI Teacher\n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

Digital 3D AI Teacher

Ask any educational question and get an AI-powered response

\n \n

\n \n \n

\n 👩‍🏫\n

Hello! I'm your AI teacher. Ask me any educational question, and I'll do my best to help you learn!

\n \n

\n Thinking\n .\n .\n .\n

\n \n \n

\n \n \n \n\n",[],[145,183],"2aa7ea6c-3307-11f0-9743-569c3dd06744",["D",1747476632187],[],[145,32],["D",1747476588508],[162,163,164],[145],["D",1747476448969],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},{"_13":84,"_31":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"ctx",{"_77":-5,"_122":233,"_234":235,"_236":237,"_238":24,"_239":24,"_240":24,"_241":57,"_242":-5,"_243":-7,"_244":-7,"_245":61,"_246":24,"_247":24,"_248":-5,"_249":24,"_250":24,"_251":24,"_252":-5},"ENV",{"_204":205,"_206":207,"_208":85,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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"]

Diff · v5