\n \n\n",[18,67],"a1a45074-3f96-11f0-a651-76b3cceeab13",["D",1748857663788],[18,100],"pulls","branches",1,"forks","envVars",{"_207":26,"_209":26},"connections",{"_207":26,"_208":26},"count","unfilledCount","emptyCount",{"_36":302,"_13":301,"_65":294,"_46":-5,"_38":39,"_174":303,"_175":24,"_40":304,"_42":26,"_68":101,"_177":-5,"_69":30,"_178":-5,"_230":305,"_17":306},{"_36":292,"_13":293,"_65":114,"_46":294,"_38":39,"_174":295,"_175":24,"_40":296,"_42":201,"_68":297,"_177":298,"_69":30,"_178":-5,"_230":299,"_17":300},{"_36":173,"_13":18,"_65":102,"_46":-5,"_38":39,"_174":43,"_175":24,"_40":289,"_42":26,"_68":101,"_177":-5,"_69":30,"_178":-5,"_230":290,"_17":291},{"_36":196,"_13":100,"_65":99,"_46":102,"_38":39,"_174":94,"_175":24,"_40":286,"_42":26,"_68":101,"_177":-5,"_69":30,"_178":-5,"_230":287,"_17":288},{"_36":279,"_13":280,"_65":281,"_46":99,"_38":39,"_174":94,"_175":24,"_40":282,"_42":26,"_68":91,"_177":283,"_69":30,"_178":-5,"_230":284,"_17":285},{"_36":271,"_13":272,"_65":273,"_46":99,"_38":39,"_174":274,"_175":24,"_40":275,"_42":26,"_68":91,"_177":276,"_69":30,"_178":-5,"_230":277,"_17":278},{"_36":263,"_13":264,"_65":265,"_46":99,"_38":39,"_174":266,"_175":24,"_40":267,"_42":26,"_68":91,"_177":268,"_69":30,"_178":-5,"_230":269,"_17":270},{"_36":192,"_13":67,"_65":66,"_46":102,"_38":39,"_174":43,"_175":24,"_40":260,"_42":26,"_68":21,"_177":194,"_69":30,"_178":-5,"_230":261,"_17":262},{"_36":188,"_13":90,"_65":89,"_46":102,"_38":39,"_174":84,"_175":24,"_40":257,"_42":26,"_68":91,"_177":190,"_69":30,"_178":-5,"_230":258,"_17":259},{"_36":184,"_13":81,"_65":80,"_46":102,"_38":39,"_174":75,"_175":24,"_40":254,"_42":26,"_68":21,"_177":186,"_69":30,"_178":-5,"_230":255,"_17":256},{"_36":250,"_13":249,"_65":243,"_46":-5,"_38":39,"_174":244,"_175":24,"_40":251,"_42":26,"_68":101,"_177":-5,"_69":30,"_178":-5,"_230":252,"_17":253},{"_36":240,"_13":241,"_65":242,"_46":243,"_38":39,"_174":244,"_175":24,"_40":245,"_42":26,"_68":91,"_177":246,"_69":30,"_178":-5,"_230":247,"_17":248},{"_36":233,"_13":234,"_65":235,"_46":-5,"_38":39,"_174":138,"_175":24,"_40":236,"_42":201,"_68":21,"_177":237,"_69":30,"_178":-5,"_230":238,"_17":239},{"_36":224,"_13":225,"_65":226,"_46":-5,"_38":39,"_174":227,"_175":24,"_40":228,"_42":201,"_68":91,"_177":229,"_69":30,"_178":-5,"_230":231,"_17":232},"3fcc3812-3f96-11f0-b4b5-76b3cceeab13","main.tsx","2f4d2f5a-3f96-11f0-beaa-76b3cceeab13",2,["D",1748857499639],"create an app that lets me order food in jos","children",[],[225],"cd6b6f9e-3f96-11f0-9e8e-76b3cceeab13","README.md","8230f0f8-3f96-11f0-9d48-76b3cceeab13",["D",1748857737237],"# 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 (automatically configured in Val Town)\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",[],[234],"852a5da8-3f96-11f0-9ee7-76b3cceeab13","types.ts","852a5e7a-3f96-11f0-9ee7-76b3cceeab13","2fb19089-5a60-4af7-8dd2-00d9139e1630",4,["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}",[],[249,241],"shared","852a6a00-3f96-11f0-9ee7-76b3cceeab13",["D",1748857616020],[221],[249],["D",1748857649438],[],[18,81],["D",1748857653693],[],[18,90],["D",1748857640064],[],[18,67],"c29972b4-3f96-11f0-9ddb-76b3cceeab13","ImageGenerator.tsx","c2997390-3f96-11f0-9ddb-76b3cceeab13",11,["D",1748857719083],"/** @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 type { ImageGenerationRequest, ImageGenerationResponse } from \"../../shared/types.ts\";\n\ninterface GeneratedImage {\n id: string;\n prompt: string;\n url: string;\n timestamp: Date;\n}\n\nexport default function ImageGenerator() {\n const [prompt, setPrompt] = useState('');\n const [size, setSize] = useState<'256x256' | '512x512' | '1024x1024'>('1024x1024');\n const [isGenerating, setIsGenerating] = useState(false);\n const [generatedImages, setGeneratedImages] = useState([]);\n const [error, setError] = useState(null);\n\n const generateImage = async () => {\n if (!prompt.trim() || isGenerating) return;\n\n setIsGenerating(true);\n setError(null);\n\n try {\n const request: ImageGenerationRequest = {\n prompt: prompt.trim(),\n size: size\n };\n\n const response = await fetch('/api/generate-image', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(request),\n });\n\n const data: ImageGenerationResponse = await response.json();\n\n if (data.success) {\n const newImage: GeneratedImage = {\n id: Date.now().toString(),\n prompt: prompt.trim(),\n url: data.imageUrl,\n timestamp: new Date()\n };\n setGeneratedImages(prev => [newImage, ...prev]);\n setPrompt('');\n } else {\n setError(data.error || 'Failed to generate image');\n }\n } catch (error) {\n console.error('Error generating image:', error);\n setError('Failed to generate image. Please try again.');\n } finally {\n setIsGenerating(false);\n }\n };\n\n const handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n generateImage();\n }\n };\n\n const clearImages = () => {\n setGeneratedImages([]);\n setError(null);\n };\n\n const downloadImage = async (imageUrl: string, prompt: string) => {\n try {\n const response = await fetch(imageUrl);\n const blob = await response.blob();\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `ai-generated-${prompt.slice(0, 30).replace(/[^a-zA-Z0-9]/g, '-')}.png`;\n document.body.appendChild(a);\n a.click();\n window.URL.revokeObjectURL(url);\n document.body.removeChild(a);\n } catch (error) {\n console.error('Error downloading image:', error);\n }\n };\n\n return (\n

Image Generator

\n {generatedImages.length > 0 && (\n \n Clear Images\n \n )}\n

\n\n {/* Input Section */}\n

\n \n Image Description\n \n setPrompt(e.target.value)}\n onKeyPress={handleKeyPress}\n placeholder=\"Describe the image you want to generate... (Press Enter to generate)\"\n className=\"w-full p-3 border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500\"\n rows={3}\n disabled={isGenerating}\n />\n

\n\n

\n \n Image Size\n \n setSize(e.target.value as any)}\n className=\"w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n disabled={isGenerating}\n >\n \n \n \n \n

\n \n {isGenerating ? '🎨 Generating...' : '🎨 Generate'}\n \n

\n\n {/* Error Display */}\n {error && (\n

❌ {error}

\n )}\n\n {/* Loading State */}\n {isGenerating && (\n

🎨

Creating your image...

\n )}\n\n {/* Generated Images */}\n

\n {generatedImages.length === 0 && !isGenerating ? (\n

🖼️

No images generated yet. Describe an image to get started!

\n ) : (\n

\n {generatedImages.map((image) => (\n

\"{image.prompt}\"

\n Generated on {image.timestamp.toLocaleString()}\n

\n \n

\n downloadImage(image.url, image.prompt)}\n className=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 px-4 py-2 bg-white text-gray-800 rounded-lg shadow-md hover:bg-gray-100\"\n >\n 📥 Download\n \n

\n ))}\n

\n )}\n

\n );\n}",[],[18,100,264],"b0262546-3f96-11f0-acda-76b3cceeab13","ChatInterface.tsx","b026260e-3f96-11f0-acda-76b3cceeab13",10,["D",1748857688134],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { ChatMessage, ChatRequest, ChatResponse } from \"../../shared/types.ts\";\n\nexport default function ChatInterface() {\n const [messages, setMessages] = useState([]);\n const [inputMessage, setInputMessage] = useState('');\n const [isLoading, setIsLoading] = useState(false);\n const chatContainerRef = useRef(null);\n\n // Auto-scroll to bottom when new messages are added\n useEffect(() => {\n if (chatContainerRef.current) {\n chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;\n }\n }, [messages]);\n\n const sendMessage = async () => {\n if (!inputMessage.trim() || isLoading) return;\n\n const userMessage: ChatMessage = {\n id: Date.now().toString(),\n role: 'user',\n content: inputMessage.trim(),\n timestamp: new Date()\n };\n\n setMessages(prev => [...prev, userMessage]);\n setInputMessage('');\n setIsLoading(true);\n\n try {\n const request: ChatRequest = {\n message: userMessage.content,\n history: messages\n };\n\n const response = await fetch('/api/chat', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(request),\n });\n\n const data: ChatResponse = await response.json();\n\n if (data.success) {\n const assistantMessage: ChatMessage = {\n id: (Date.now() + 1).toString(),\n role: 'assistant',\n content: data.message,\n timestamp: new Date()\n };\n setMessages(prev => [...prev, assistantMessage]);\n } else {\n throw new Error(data.error || 'Failed to get response');\n }\n } catch (error) {\n console.error('Error sending message:', error);\n const errorMessage: ChatMessage = {\n id: (Date.now() + 1).toString(),\n role: 'assistant',\n content: 'Sorry, I encountered an error. Please try again.',\n timestamp: new Date()\n };\n setMessages(prev => [...prev, errorMessage]);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n sendMessage();\n }\n };\n\n const clearChat = () => {\n setMessages([]);\n };\n\n return (\n

Chat Assistant

\n {messages.length > 0 && (\n \n Clear Chat\n \n )}\n

\n\n {/* Chat Messages */}\n

\n {messages.length === 0 ? (\n

💭

Start a conversation! Ask me anything.

\n ) : (\n

\n {messages.map((message) => (\n \n \n

{message.content}

\n {message.timestamp.toLocaleTimeString()}\n

\n ))}\n {isLoading && (\n

\n Thinking\n

\n )}\n

\n )}\n \n\n {/* Input Area */}\n

\n setInputMessage(e.target.value)}\n onKeyPress={handleKeyPress}\n placeholder=\"Type your message here... (Press Enter to send)\"\n className=\"flex-1 p-3 border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500\"\n rows={2}\n disabled={isLoading}\n />\n \n {isLoading ? '⏳' : '📤'}\n \n

\n \n );\n}",[],[18,100,272],"a1a42b08-3f96-11f0-a651-76b3cceeab13","App.tsx","a1a42c34-3f96-11f0-a651-76b3cceeab13",["D",1748857663788],"/** @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}",[],[18,100,280],["D",1748857663788],[214,215,216],[18,100],["D",1748857640064],[213,217,218,219],[18],"c486e00c-3f96-11f0-848b-76b3cceeab13","index.ts","8aa794b1-1ed2-4f95-a45f-cd1acbffd480",12,["D",1748857722315],"http","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;",[],[301,293],"backend","8fd5ac1c-3f96-11f0-980e-76b3cceeab13",5,["D",1748857633920],[211],[301],["D",1748857471956],{"_11":12,"_151":72},{"_11":12,"_147":-5,"_71":72,"_31":70,"_148":149,"_150":30},{"_42":138,"_13":16,"_36":39,"_139":104,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":14,"_146":12},"ctx",{"_55":-5,"_170":344,"_345":346,"_347":348,"_349":30,"_350":30,"_351":30,"_352":24,"_353":-5,"_354":-7,"_355":-7,"_356":26,"_357":30,"_358":30,"_359":-5,"_360":30,"_361":30,"_362":30,"_363":-5},"ENV",{"_315":316,"_317":318,"_319":16,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343},"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"]

History · frontend