Solid Color Text Chat Bot

Ask me anything and I'll respond with text on solid-color backgrounds!

\n \n

\n 🤖\n

Hello! I'm your AI assistant. Ask me anything, and I'll respond with text on solid-color background images!

\n \n

\n \n \n

\n\n \n\n","label",[186,67],"frontend","pulls","branches",1,"forks","envVars",{"_195":26,"_197":26},"connections",{"_195":26,"_196":26},"count","unfilledCount","emptyCount",{"_36":222,"_13":186,"_65":177,"_46":-5,"_38":39,"_178":43,"_179":118,"_40":223,"_42":26,"_68":224,"_182":-5,"_69":24,"_184":-5,"_209":225,"_17":226},{"_36":176,"_13":67,"_65":66,"_46":177,"_38":39,"_178":99,"_179":118,"_40":219,"_42":181,"_68":21,"_182":183,"_69":24,"_184":-5,"_209":220,"_17":221},{"_36":212,"_13":213,"_65":214,"_46":-5,"_38":39,"_178":141,"_179":118,"_40":215,"_42":181,"_68":21,"_182":216,"_69":24,"_184":-5,"_209":217,"_17":218},{"_36":202,"_13":203,"_65":116,"_46":-5,"_38":39,"_178":204,"_179":118,"_40":205,"_42":206,"_68":207,"_182":208,"_69":24,"_184":-5,"_209":210,"_17":211},"14a8cea8-322f-11f0-8bc4-569c3dd06744","index.ts",14,["D",1747383823982],5,"http","import { OpenAI } from \"https://esm.town/v/std/openai\";\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n// Initialize OpenAI client\nconst openai = new OpenAI();\n\n// Constants\nconst MAX_CHARS_PER_IMAGE = 150; // Maximum characters per image\nconst IMAGE_BASE_URL = \"https://maxm-imggenurl.web.val.run/\";\n\n// Simple solid background colors\nconst BACKGROUND_COLORS = [\n \"solid light blue background, #e6f2ff, plain, no texture, no gradient\",\n \"solid light green background, #e6ffe6, plain, no texture, no gradient\",\n \"solid light purple background, #f2e6ff, plain, no texture, no gradient\",\n \"solid light yellow background, #ffffcc, plain, no texture, no gradient\",\n \"solid light pink background, #ffe6e6, plain, no texture, no gradient\",\n \"solid light cyan background, #e6ffff, plain, no texture, no gradient\"\n];\n\n// Function to split text into chunks for multiple images\nfunction splitTextIntoChunks(text: string, maxCharsPerChunk: number): string[] {\n const chunks: string[] = [];\n let remainingText = text;\n \n while (remainingText.length > 0) {\n // Find a good breaking point (end of sentence or space) within the limit\n let breakPoint = Math.min(maxCharsPerChunk, remainingText.length);\n \n if (breakPoint < remainingText.length) {\n // Try to find sentence end (.!?) within the limit\n const sentenceEnd = Math.max(\n remainingText.lastIndexOf('.', breakPoint),\n remainingText.lastIndexOf('!', breakPoint),\n remainingText.lastIndexOf('?', breakPoint)\n );\n \n if (sentenceEnd > 0 && sentenceEnd > breakPoint - 30) {\n // If we found a sentence end that's not too far from our limit\n breakPoint = sentenceEnd + 1;\n } else {\n // Otherwise try to break at a space\n const lastSpace = remainingText.lastIndexOf(' ', breakPoint);\n if (lastSpace > 0) {\n breakPoint = lastSpace + 1;\n }\n }\n }\n \n // Add this chunk and continue with the rest\n chunks.push(remainingText.substring(0, breakPoint).trim());\n remainingText = remainingText.substring(breakPoint).trim();\n }\n \n return chunks;\n}\n\n// Function to generate image URLs with text on solid color backgrounds\nfunction generateImageURLs(textChunks: string[]): string[] {\n // Use a single background color for all images\n const backgroundColor = BACKGROUND_COLORS[0];\n \n return textChunks.map((chunk) => {\n // Create a simple background prompt for a solid color\n const backgroundPrompt = backgroundColor;\n \n // Encode both the text and background prompt for the URL\n const encodedText = encodeURIComponent(chunk);\n const encodedPrompt = encodeURIComponent(backgroundPrompt);\n \n // Return the full URL with parameters\n return `${IMAGE_BASE_URL}${encodedPrompt}?text=${encodedText}`;\n });\n}\n\n// Handle HTTP requests\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n \n // Serve the chat interface for GET requests to the root\n if (req.method === \"GET\" && url.pathname === \"/\") {\n try {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n } catch (error) {\n console.error(\"Error serving frontend:\", error);\n return new Response(\"Error loading chat interface. Please try again later.\", {\n status: 500,\n });\n }\n }\n \n // Handle API requests for chat\n if (req.method === \"POST\" && url.pathname === \"/api/chat\") {\n try {\n const body = await req.json();\n const { message } = body;\n \n if (!message || typeof message !== \"string\") {\n return new Response(JSON.stringify({ error: \"Message is required\" }), {\n status: 400,\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n }\n \n // Get response from OpenAI\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o-mini\",\n messages: [\n {\n role: \"system\",\n content: \"You are a helpful assistant. Provide informative and educational responses. Your responses will be displayed as text on solid-color background images, so be concise but thorough.\"\n },\n {\n role: \"user\",\n content: message\n }\n ],\n max_tokens: 500,\n });\n \n const assistantMessage = completion.choices[0].message.content || \"I'm not sure how to respond to that.\";\n \n // Split the response into chunks for multiple images if needed\n const textChunks = splitTextIntoChunks(assistantMessage, MAX_CHARS_PER_IMAGE);\n \n // Generate image URLs with the text chunks\n const imageURLs = generateImageURLs(textChunks);\n \n return new Response(JSON.stringify({\n message: assistantMessage,\n imageURLs: imageURLs\n }), {\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n } catch (error) {\n console.error(\"Error processing chat:\", error);\n return new Response(JSON.stringify({ error: \"Failed to process your message\" }), {\n status: 500,\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n }\n }\n \n // Handle 404 for all other routes\n return new Response(\"Not Found\", { status: 404 });\n}","children",[],[203],"301d2a94-322f-11f0-b443-569c3dd06744","README.md","007503e4-322e-11f0-a8ac-569c3dd06744",["D",1747383870042],"# Solid Color Text Chat Bot\n\nA clean, minimalist chat bot that responds to your questions with text overlaid on solid-color background images. The number of images generated depends on the length of the response.\n\n## Features\n\n- Responds to questions with text overlaid on solid, single-color backgrounds\n- Uses a consistent light blue background for all images\n- Automatically splits longer responses across multiple images based on text length\n- Clean, responsive chat interface\n- Optimized for fast loading and maximum readability\n\n## How It Works\n\n1. The user submits a question or prompt\n2. The bot generates a response using OpenAI\n3. The response is split into appropriate chunks based on length\n4. Each chunk is rendered as text on a solid-color background\n5. The images are displayed in the chat interface with part indicators\n\n## Technical Implementation\n\n- **Text Generation**: Uses OpenAI's API to generate informative responses\n- **Text Splitting**: Intelligently splits text at natural breaking points (sentences, spaces)\n- **Image Generation**: Uses Val Town's image generation URL with explicit solid-color background prompts\n- **Frontend**: Responsive design with Tailwind CSS\n\n## Environment Variables\n\n- `OPENAI_API_KEY`: Your OpenAI API key (required)\n\n## Benefits of Solid-Color Backgrounds\n\n- Maximum text readability\n- Fastest possible loading times\n- Clean, professional appearance\n- Consistent look across all responses\n- Focus entirely on the content rather than the background",[],[213],["D",1747383859162],[],[186,67],"1967f2bc-322e-11f0-a59b-569c3dd06744",["D",1747383402451],"directory",[199],[186],["D",1747383260076],{"_11":12,"_154":72},{"_11":12,"_150":-5,"_71":72,"_30":70,"_151":152,"_153":24},{"_42":141,"_13":16,"_36":39,"_142":106,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":14,"_149":12},"ctx",{"_55":-5,"_173":264,"_265":266,"_267":268,"_269":24,"_270":24,"_271":24,"_272":118,"_273":-5,"_274":-7,"_275":-7,"_276":26,"_277":24,"_278":24,"_279":-5,"_280":24,"_281":24,"_282":24,"_283":-5},"ENV",{"_235":236,"_237":238,"_239":16,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263},"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 · index.html