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",[18,68],"pulls","branches",1,"forks","envVars",{"_199":26,"_201":26},"connections",{"_199":26,"_200":26},"count","unfilledCount","emptyCount",{"_37":178,"_13":18,"_66":106,"_47":-5,"_39":40,"_179":44,"_180":24,"_41":226,"_43":26,"_69":107,"_182":-5,"_70":30,"_183":-5,"_213":227,"_17":228},{"_37":186,"_13":68,"_66":67,"_47":106,"_39":40,"_179":100,"_180":24,"_41":223,"_43":188,"_69":21,"_182":189,"_70":30,"_183":-5,"_213":224,"_17":225},{"_37":216,"_13":217,"_66":218,"_47":-5,"_39":40,"_179":143,"_180":24,"_41":219,"_43":188,"_69":21,"_182":220,"_70":30,"_183":-5,"_213":221,"_17":222},{"_37":206,"_13":207,"_66":119,"_47":-5,"_39":40,"_179":208,"_180":24,"_41":209,"_43":210,"_69":211,"_182":212,"_70":30,"_183":-5,"_213":214,"_17":215},"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",[],[207],"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",[],[217],["D",1747383859162],[],[18,68],["D",1747383402451],[203],[18],["D",1747383260076],{"_11":12,"_156":73},{"_11":12,"_152":-5,"_72":73,"_31":71,"_153":154,"_155":30},{"_43":143,"_13":16,"_37":40,"_144":109,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":14,"_151":12},"ctx",{"_56":-5,"_175":266,"_267":268,"_269":270,"_271":30,"_272":30,"_273":30,"_274":24,"_275":-5,"_276":-7,"_277":-7,"_278":26,"_279":30,"_280":30,"_281":-5,"_282":30,"_283":30,"_284":30,"_285":-5},"ENV",{"_237":238,"_239":240,"_241":16,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5a709144666c9e69e88140f015c586412f0fd8d3","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