[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_259":260,"_261":262},"routes/_app.x.$handle.$name",{"_102":101,"_32":51,"_110":92,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_21":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":25,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_49":50,"_32":51,"_37":52,"_53":-5,"_54":25,"_55":56,"_57":56,"_58":-5,"_59":-5,"_18":60,"_61":62,"_63":64,"_65":64,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",9,"changes",[19,20],"aiChatInfo","userId",{"_21":42,"_23":-7,"_24":25,"_26":25,"_27":43,"_29":43},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":-5,"_37":38,"_39":14,"_40":41,"_24":25},"previous","deleted",false,"deletedHere","path","frontend/components","latestPath","fileId","f33af080-5fa0-4a4b-938a-1f2cc33358bc","name","components","fileType","directory","content","createdAt",["D",1748857663788],"branchVersion","branchId","2f4b7340-3f96-11f0-beaa-76b3cceeab13",{"_30":44,"_32":45,"_34":46,"_36":47,"_37":48,"_39":14,"_40":41,"_24":25},"frontend/components/App.tsx","a1a42c34-3f96-11f0-a651-76b3cceeab13","App.tsx","script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport ChatInterface from \"./ChatInterface.tsx\";\nimport ImageGenerator from \"./ImageGenerator.tsx\";\n\ntype TabType = 'chat' | 'image';\n\nexport default function App() {\n const [activeTab, setActiveTab] = useState('chat');\n\n return (\n

\n {/* Header */}\n

\n 🤖 AI Tool\n

\n Your intelligent assistant for questions and image generation\n

\n\n {/* Tab Navigation */}\n

\n setActiveTab('chat')}\n className={`px-6 py-3 rounded-md font-medium transition-all duration-200 ${\n activeTab === 'chat'\n ? 'bg-blue-500 text-white shadow-md'\n : 'text-gray-600 hover:text-blue-500'\n }`}\n >\n 💬 Chat Assistant\n \n setActiveTab('image')}\n className={`px-6 py-3 rounded-md font-medium transition-all duration-200 ${\n activeTab === 'image'\n ? 'bg-blue-500 text-white shadow-md'\n : 'text-gray-600 hover:text-blue-500'\n }`}\n >\n 🎨 Image Generator\n \n

\n\n {/* Content */}\n

\n {activeTab === 'chat' && }\n {activeTab === 'image' && }\n

\n );\n}",["D",1748857663788],"id","2f4b3286-3f96-11f0-beaa-76b3cceeab13","untitled-5321",["D",1748857471956],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","16eccca0-3f95-11f0-ad5b-814c56c8abb0","pinnedFileId","8fd5a2bc-3f96-11f0-980e-76b3cceeab13","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","d0af734c-162b-413f-ab5d-d85f6c3fb438","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_102":101,"_109":105},"org",{"_102":101,"_103":-5,"_104":105,"_18":60,"_106":107,"_108":25},"branch",{"_13":91,"_32":92,"_49":41,"_93":50,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":51,"_100":101},"isOwned",13,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","Lyte","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4d2xObDJLVHFLclU5S3g2UkhQdEN2U0N4dCJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_32":51,"_37":255,"_53":-5,"_54":25,"_55":56,"_57":56,"_58":-5,"_59":-5,"_18":60,"_61":62,"_63":64,"_65":64,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":256,"_86":257,"_88":258,"_90":25},"tree",[183,185,191,193,194],"files",[183,184,185,186,187,188,189,190,191,192,193,194],"counts",{"_173":68,"_174":144,"_175":68,"_176":177,"_178":179},"contents",[132,133,134,135,136],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_49":167,"_32":168,"_30":169,"_140":-5,"_40":41,"_39":170,"_142":64,"_37":171,"_13":68,"_34":35,"_36":-5,"_24":25,"_146":-5,"_27":172},{"_49":161,"_32":162,"_30":163,"_140":-5,"_40":41,"_39":164,"_142":64,"_37":165,"_13":68,"_34":35,"_36":-5,"_24":25,"_146":-5,"_27":166},{"_49":155,"_32":156,"_30":157,"_140":-5,"_40":41,"_39":158,"_142":64,"_37":159,"_13":68,"_34":35,"_36":-5,"_24":25,"_146":-5,"_27":160},{"_49":148,"_32":149,"_30":150,"_140":-5,"_40":41,"_39":151,"_142":25,"_37":152,"_13":68,"_34":21,"_36":153,"_24":25,"_146":-5,"_27":154},{"_49":137,"_32":138,"_30":139,"_140":-5,"_40":41,"_39":141,"_142":64,"_37":143,"_13":144,"_34":46,"_36":145,"_24":25,"_146":-5,"_27":147},"3fcc3812-3f96-11f0-b4b5-76b3cceeab13","main.tsx","2f4d2f5a-3f96-11f0-beaa-76b3cceeab13","parentId",2,"latest",["D",1748857499639],1,"create an app that lets me order food in jos","label",[138],"8230f01c-3f96-11f0-9d48-76b3cceeab13","README.md","8230f0f8-3f96-11f0-9d48-76b3cceeab13",3,["D",1748857611029],"# AI Tool App\n\nA comprehensive AI assistant that can answer questions and generate images.\n\n## Features\n\n- **Chat Interface**: Ask questions and get AI-powered responses using GPT-4\n- **Image Generation**: Generate images from text descriptions using AI\n- **Real-time Interface**: Clean, responsive UI with real-time interactions\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main Hono server with API routes\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── ChatInterface.tsx # Chat component for Q&A\n│ │ └── ImageGenerator.tsx # Image generation component\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ └── style.css # Custom styles\n└── shared/\n └── types.ts # Shared TypeScript types\n\n```\n\n## API Endpoints\n\n- `GET /` - Serves the main application\n- `POST /api/chat` - Handles chat/question requests\n- `POST /api/generate-image` - Handles image generation requests\n\n## Environment Variables\n\n- `OPENAI_API_KEY` - Required for OpenAI API access\n\n## Usage\n\n1. Navigate to the app URL\n2. Use the chat interface to ask questions\n3. Use the image generator to create images from descriptions\n4. Switch between modes using the tab interface",[149],"852a6a00-3f96-11f0-9ee7-76b3cceeab13","shared","2fb19089-5a60-4af7-8dd2-00d9139e1630",4,["D",1748857616020],[156],"937f83a6-3f96-11f0-8fce-76b3cceeab13","frontend","ef6790e0-7911-4b68-b221-e2aef4d55878",6,["D",1748857640064],[162],"8fd5ac1c-3f96-11f0-980e-76b3cceeab13","backend","8aa794b1-1ed2-4f95-a45f-cd1acbffd480",5,["D",1748857633920],[168],"pulls","branches","forks","envVars",{"_180":68,"_182":68},"connections",{"_180":68,"_181":68},"count","unfilledCount","emptyCount",{"_49":167,"_32":168,"_30":169,"_140":-5,"_40":41,"_39":170,"_142":64,"_37":252,"_13":68,"_34":35,"_36":-5,"_24":25,"_146":-5,"_196":253,"_27":254},{"_49":246,"_32":247,"_30":62,"_140":169,"_40":41,"_39":170,"_142":25,"_37":248,"_13":68,"_34":46,"_36":249,"_24":25,"_146":-5,"_196":250,"_27":251},{"_49":161,"_32":162,"_30":163,"_140":-5,"_40":41,"_39":164,"_142":64,"_37":243,"_13":68,"_34":35,"_36":-5,"_24":25,"_146":-5,"_196":244,"_27":245},{"_49":239,"_32":33,"_30":31,"_140":163,"_40":41,"_39":14,"_142":64,"_37":240,"_13":68,"_34":35,"_36":-5,"_24":25,"_146":-5,"_196":241,"_27":242},{"_49":235,"_32":45,"_30":44,"_140":31,"_40":41,"_39":14,"_142":64,"_37":236,"_13":68,"_34":46,"_36":47,"_24":25,"_146":-5,"_196":237,"_27":238},{"_49":228,"_32":229,"_30":230,"_140":163,"_40":41,"_39":164,"_142":64,"_37":231,"_13":68,"_34":21,"_36":232,"_24":25,"_146":-5,"_196":233,"_27":234},{"_49":220,"_32":221,"_30":222,"_140":163,"_40":41,"_39":223,"_142":64,"_37":224,"_13":68,"_34":46,"_36":225,"_24":25,"_146":-5,"_196":226,"_27":227},{"_49":212,"_32":213,"_30":214,"_140":163,"_40":41,"_39":215,"_142":64,"_37":216,"_13":68,"_34":21,"_36":217,"_24":25,"_146":-5,"_196":218,"_27":219},{"_49":155,"_32":156,"_30":157,"_140":-5,"_40":41,"_39":158,"_142":64,"_37":209,"_13":68,"_34":35,"_36":-5,"_24":25,"_146":-5,"_196":210,"_27":211},{"_49":202,"_32":203,"_30":204,"_140":157,"_40":41,"_39":158,"_142":64,"_37":205,"_13":68,"_34":46,"_36":206,"_24":25,"_146":-5,"_196":207,"_27":208},{"_49":148,"_32":149,"_30":150,"_140":-5,"_40":41,"_39":151,"_142":25,"_37":199,"_13":68,"_34":21,"_36":153,"_24":25,"_146":-5,"_196":200,"_27":201},{"_49":137,"_32":138,"_30":139,"_140":-5,"_40":41,"_39":141,"_142":64,"_37":195,"_13":144,"_34":46,"_36":145,"_24":25,"_146":-5,"_196":197,"_27":198},["D",1748857499639],"children",[],[138],["D",1748857611029],[],[149],"852a5da8-3f96-11f0-9ee7-76b3cceeab13","types.ts","852a5e7a-3f96-11f0-9ee7-76b3cceeab13",["D",1748857616020],"// Shared types for the AI Tool App\n\nexport interface ChatMessage {\n id: string;\n role: 'user' | 'assistant';\n content: string;\n timestamp: Date;\n}\n\nexport interface ChatRequest {\n message: string;\n history?: ChatMessage[];\n}\n\nexport interface ChatResponse {\n message: string;\n success: boolean;\n error?: string;\n}\n\nexport interface ImageGenerationRequest {\n prompt: string;\n size?: '256x256' | '512x512' | '1024x1024';\n}\n\nexport interface ImageGenerationResponse {\n imageUrl: string;\n success: boolean;\n error?: string;\n}",[],[156,203],["D",1748857616020],[192],[156],"99159652-3f96-11f0-9a81-76b3cceeab13","style.css","99159706-3f96-11f0-9a81-76b3cceeab13",7,["D",1748857649438],"/* Custom styles for AI Tool App */\n\n.chat-container {\n height: 60vh;\n overflow-y: auto;\n}\n\n.chat-message {\n animation: fadeIn 0.3s ease-in;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.loading-dots {\n display: inline-block;\n}\n\n.loading-dots::after {\n content: '';\n animation: dots 1.5s infinite;\n}\n\n@keyframes dots {\n 0%, 20% { content: ''; }\n 40% { content: '.'; }\n 60% { content: '..'; }\n 80%, 100% { content: '...'; }\n}\n\n.image-container {\n max-height: 70vh;\n overflow-y: auto;\n}\n\n.generated-image {\n animation: imageLoad 0.5s ease-in;\n}\n\n@keyframes imageLoad {\n from { opacity: 0; transform: scale(0.9); }\n to { opacity: 1; transform: scale(1); }\n}\n\n/* Scrollbar styling */\n.chat-container::-webkit-scrollbar,\n.image-container::-webkit-scrollbar {\n width: 6px;\n}\n\n.chat-container::-webkit-scrollbar-track,\n.image-container::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 3px;\n}\n\n.chat-container::-webkit-scrollbar-thumb,\n.image-container::-webkit-scrollbar-thumb {\n background: #c1c1c1;\n border-radius: 3px;\n}\n\n.chat-container::-webkit-scrollbar-thumb:hover,\n.image-container::-webkit-scrollbar-thumb:hover {\n background: #a1a1a1;\n}",[],[162,213],"9b9f3428-3f96-11f0-b6d2-76b3cceeab13","index.tsx","9b9f34e6-3f96-11f0-b6d2-76b3cceeab13",8,["D",1748857653693],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[162,221],"937f77f8-3f96-11f0-8fce-76b3cceeab13","index.html","937f78ca-3f96-11f0-8fce-76b3cceeab13",["D",1748857640064],"\n\n\n \n \n AI Tool - Chat & Image Generation\n \n \n \n\n\n

\n \n\n",[],[162,229],"a1a42b08-3f96-11f0-a651-76b3cceeab13",["D",1748857663788],[],[162,33,45],"a1a45074-3f96-11f0-a651-76b3cceeab13",["D",1748857663788],[187],[162,33],["D",1748857640064],[186,188,189,190],[162],"8fd5a226-3f96-11f0-980e-76b3cceeab13","index.ts",["D",1748857633920],"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 type { ChatRequest, ChatResponse, ImageGenerationRequest, ImageGenerationResponse } from \"../shared/types.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\nconst openai = new OpenAI();\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// Serve main page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Chat API endpoint\napp.post(\"/api/chat\", async c => {\n try {\n const body: ChatRequest = await c.req.json();\n \n if (!body.message?.trim()) {\n return c.json({\n message: \"\",\n success: false,\n error: \"Message is required\"\n }, 400);\n }\n\n // Build conversation history for context\n const messages: any[] = [];\n \n // Add system message\n messages.push({\n role: \"system\",\n content: \"You are a helpful AI assistant. Provide clear, accurate, and helpful responses to user questions.\"\n });\n \n // Add conversation history if provided\n if (body.history && body.history.length > 0) {\n // Only include last 10 messages to avoid token limits\n const recentHistory = body.history.slice(-10);\n for (const msg of recentHistory) {\n messages.push({\n role: msg.role,\n content: msg.content\n });\n }\n }\n \n // Add current message\n messages.push({\n role: \"user\",\n content: body.message\n });\n\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o-mini\",\n messages: messages,\n max_tokens: 1000,\n temperature: 0.7,\n });\n\n const response = completion.choices[0]?.message?.content || \"I'm sorry, I couldn't generate a response.\";\n\n return c.json({\n message: response,\n success: true\n });\n\n } catch (error) {\n console.error(\"Chat API error:\", error);\n return c.json({\n message: \"\",\n success: false,\n error: \"Failed to process your request. Please try again.\"\n }, 500);\n }\n});\n\n// Image generation API endpoint\napp.post(\"/api/generate-image\", async c => {\n try {\n const body: ImageGenerationRequest = await c.req.json();\n \n if (!body.prompt?.trim()) {\n return c.json({\n imageUrl: \"\",\n success: false,\n error: \"Prompt is required\"\n }, 400);\n }\n\n const response = await openai.images.generate({\n model: \"dall-e-3\",\n prompt: body.prompt,\n size: body.size || \"1024x1024\",\n quality: \"standard\",\n n: 1,\n });\n\n const imageUrl = response.data[0]?.url;\n \n if (!imageUrl) {\n throw new Error(\"No image URL returned from OpenAI\");\n }\n\n return c.json({\n imageUrl: imageUrl,\n success: true\n });\n\n } catch (error) {\n console.error(\"Image generation error:\", error);\n return c.json({\n imageUrl: \"\",\n success: false,\n error: \"Failed to generate image. Please try again with a different prompt.\"\n }, 500);\n }\n});\n\nexport default app.fetch;",[],[168,247],["D",1748857633920],[184],[168],["D",1748857471956],{"_102":101,"_109":105},{"_102":101,"_103":-5,"_104":105,"_18":60,"_106":107,"_108":25},{"_13":91,"_32":92,"_49":41,"_93":50,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":51,"_100":101},"ctx",{"_84":-5,"_129":292,"_293":294,"_295":296,"_297":25,"_298":25,"_299":25,"_300":64,"_301":-5,"_302":-7,"_303":-7,"_304":68,"_305":25,"_306":25,"_307":-5,"_308":25,"_309":25,"_310":25,"_311":-5},"ENV",{"_263":264,"_265":266,"_267":92,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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 · v9