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}",[172,92,90],"b0262546-3f96-11f0-acda-76b3cceeab13",["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}",[172,92,81],"a1a42b08-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}",[172,92,66],"pulls","branches",1,"forks","envVars",{"_196":26,"_198":26},"connections",{"_196":26,"_197":26},"count","unfilledCount","emptyCount",{"_35":293,"_13":292,"_64":285,"_45":-5,"_37":38,"_166":294,"_167":24,"_39":295,"_41":26,"_67":93,"_169":-5,"_69":30,"_170":-5,"_219":296,"_17":297},{"_35":283,"_13":284,"_64":105,"_45":285,"_37":38,"_166":286,"_167":24,"_39":287,"_41":190,"_67":288,"_169":289,"_69":30,"_170":-5,"_219":290,"_17":291},{"_35":279,"_13":172,"_64":165,"_45":-5,"_37":38,"_166":262,"_167":24,"_39":280,"_41":26,"_67":93,"_169":-5,"_69":30,"_170":-5,"_219":281,"_17":282},{"_35":164,"_13":92,"_64":91,"_45":165,"_37":38,"_166":42,"_167":24,"_39":276,"_41":26,"_67":93,"_169":-5,"_69":30,"_170":-5,"_219":277,"_17":278},{"_35":184,"_13":66,"_64":65,"_45":91,"_37":38,"_166":42,"_167":24,"_39":273,"_41":26,"_67":68,"_169":186,"_69":30,"_170":-5,"_219":274,"_17":275},{"_35":180,"_13":81,"_64":80,"_45":91,"_37":38,"_166":75,"_167":24,"_39":270,"_41":26,"_67":68,"_169":182,"_69":30,"_170":-5,"_219":271,"_17":272},{"_35":176,"_13":90,"_64":89,"_45":91,"_37":38,"_166":84,"_167":24,"_39":267,"_41":26,"_67":68,"_169":178,"_69":30,"_170":-5,"_219":268,"_17":269},{"_35":259,"_13":260,"_64":261,"_45":165,"_37":38,"_166":262,"_167":24,"_39":263,"_41":26,"_67":21,"_169":264,"_69":30,"_170":-5,"_219":265,"_17":266},{"_35":251,"_13":252,"_64":253,"_45":165,"_37":38,"_166":254,"_167":24,"_39":255,"_41":26,"_67":68,"_169":256,"_69":30,"_170":-5,"_219":257,"_17":258},{"_35":243,"_13":244,"_64":245,"_45":165,"_37":38,"_166":246,"_167":24,"_39":247,"_41":26,"_67":21,"_169":248,"_69":30,"_170":-5,"_219":249,"_17":250},{"_35":239,"_13":238,"_64":232,"_45":-5,"_37":38,"_166":233,"_167":24,"_39":240,"_41":26,"_67":93,"_169":-5,"_69":30,"_170":-5,"_219":241,"_17":242},{"_35":229,"_13":230,"_64":231,"_45":232,"_37":38,"_166":233,"_167":24,"_39":234,"_41":26,"_67":68,"_169":235,"_69":30,"_170":-5,"_219":236,"_17":237},{"_35":222,"_13":223,"_64":224,"_45":-5,"_37":38,"_166":129,"_167":24,"_39":225,"_41":190,"_67":21,"_169":226,"_69":30,"_170":-5,"_219":227,"_17":228},{"_35":213,"_13":214,"_64":215,"_45":-5,"_37":38,"_166":216,"_167":24,"_39":217,"_41":190,"_67":68,"_169":218,"_69":30,"_170":-5,"_219":220,"_17":221},"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",[],[214],"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",[],[223],"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}",[],[238,230],"shared","852a6a00-3f96-11f0-9ee7-76b3cceeab13",["D",1748857616020],[210],[238],"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}",[],[172,244],"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();",[],[172,252],"937f77f8-3f96-11f0-8fce-76b3cceeab13","index.html","937f78ca-3f96-11f0-8fce-76b3cceeab13",6,["D",1748857640064],"\n\n\n \n \n AI Tool - Chat & Image Generation\n \n \n \n\n\n

\n \n\n",[],[172,260],["D",1748857719083],[],[172,92,90],["D",1748857688134],[],[172,92,81],["D",1748857663788],[],[172,92,66],["D",1748857663788],[203,204,205],[172,92],"937f83a6-3f96-11f0-8fce-76b3cceeab13",["D",1748857640064],[202,206,207,208],[172],"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;",[],[292,284],"backend","8fd5ac1c-3f96-11f0-980e-76b3cceeab13",5,["D",1748857633920],[200],[292],["D",1748857471956],{"_11":12,"_142":72},{"_11":12,"_138":-5,"_71":72,"_31":70,"_139":140,"_141":30},{"_41":129,"_13":16,"_35":38,"_130":95,"_131":-5,"_132":-5,"_133":-5,"_134":-5,"_135":-5,"_136":14,"_137":12},"ctx",{"_54":-5,"_161":335,"_336":337,"_338":339,"_340":30,"_341":30,"_342":30,"_343":24,"_344":-5,"_345":-7,"_346":-7,"_347":26,"_348":30,"_349":30,"_350":-5,"_351":30,"_352":30,"_353":30,"_354":-5},"ENV",{"_306":307,"_308":309,"_310":16,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334},"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 · components