\n \n\n",[],[211,221],"c29972b4-3f96-11f0-9ddb-76b3cceeab13","ImageGenerator.tsx","c2997390-3f96-11f0-9ddb-76b3cceeab13","f33af080-5fa0-4a4b-938a-1f2cc33358bc",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}",[],[211,237,229],"components","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}",[],[211,237,239],"a1a42b08-3f96-11f0-a651-76b3cceeab13","App.tsx","a1a42c34-3f96-11f0-a651-76b3cceeab13",9,["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}",[],[211,237,247],"a1a45074-3f96-11f0-a651-76b3cceeab13",["D",1748857663788],[170,171,172],[211,237],"937f83a6-3f96-11f0-8fce-76b3cceeab13",["D",1748857640064],[169,173,174,175],[211],"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;",[],[271,263],"backend","8fd5ac1c-3f96-11f0-980e-76b3cceeab13",5,["D",1748857633920],[167],[271],["D",1748857471956],{"_11":12,"_121":70},{"_11":12,"_117":-5,"_69":70,"_31":68,"_118":119,"_120":30},{"_39":108,"_13":16,"_33":36,"_109":74,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":14,"_116":12},"ctx",{"_52":-5,"_140":314,"_315":316,"_317":318,"_319":30,"_320":30,"_321":30,"_322":24,"_323":-5,"_324":-7,"_325":-7,"_326":26,"_327":30,"_328":30,"_329":-5,"_330":30,"_331":30,"_332":30,"_333":-5},"ENV",{"_285":286,"_287":288,"_289":16,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313},"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 · shared