[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_186":187,"_188":189},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":57,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",14,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","index.ts","latestPath","fileId","0a60471a-322e-11f0-ae1e-569c3dd06744","name","fileType","http","content","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 background colors to cycle through\nconst BACKGROUND_COLORS = [\n \"soft blue gradient\",\n \"light green gradient\",\n \"pale purple gradient\",\n \"light orange gradient\",\n \"soft teal gradient\",\n \"light pink 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 simple backgrounds\nfunction generateImageURLs(textChunks: string[]): string[] {\n return textChunks.map((chunk, index) => {\n // Get a background color from the array (cycle through them)\n const colorIndex = index % BACKGROUND_COLORS.length;\n const backgroundColor = BACKGROUND_COLORS[colorIndex];\n \n // Create a simple background prompt\n const backgroundPrompt = `simple ${backgroundColor}, minimalist, clean design`;\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 simple, single-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}","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}","createdAt",["D",1747383823982],"branchVersion","branchId","c48a4182-322d-11f0-a753-569c3dd06744","id","c489fa42-322d-11f0-a753-569c3dd06744","Respec",["D",1747383260076],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","b09cab60-322d-11f0-850d-c3fec8914ba3","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","e03e7ce1-b11a-4ee2-bd8e-7d7c1055c4b6","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",16,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","Problewk","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4QWFEU1VJSEJ3WHQ5b0JNbjd0YlpDbm9FTyJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":182,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":183,"_79":184,"_81":185,"_83":25},"tree",[160,162,163],"files",[160,161,162,163],"counts",{"_149":61,"_150":151,"_152":61,"_153":154,"_155":156},"contents",[125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":143,"_32":144,"_30":145,"_129":-5,"_41":42,"_40":140,"_130":57,"_38":146,"_13":61,"_33":147,"_35":-5,"_24":25,"_133":-5,"_27":148},{"_43":135,"_32":136,"_30":137,"_129":-5,"_41":42,"_40":138,"_130":25,"_38":139,"_13":140,"_33":20,"_35":141,"_24":25,"_133":-5,"_27":142},{"_43":128,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_130":57,"_38":131,"_13":132,"_33":34,"_35":37,"_24":25,"_133":-5,"_27":134},"14a8cea8-322f-11f0-8bc4-569c3dd06744","parentId","latest",["D",1747383823982],5,"label",[28],"e72f3ba6-322e-11f0-b3bc-569c3dd06744","README.md","007503e4-322e-11f0-a8ac-569c3dd06744",13,["D",1747383747688],3,"# Simple Image Text Chat Bot\n\nA clean, minimalist chat bot that responds to your questions with text overlaid on simple, single-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 simple, clean background images\n- Uses a rotating set of pleasant, single-color gradient backgrounds\n- Automatically splits longer responses across multiple images\n- Clean, responsive chat interface\n- Optimized for fast loading and 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 simple, single-color background\n5. The images are displayed in the chat interface\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 simple 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 Simple Backgrounds\n\n- Faster loading times\n- Better text readability\n- Clean, minimalist aesthetic\n- Reduced visual distraction from the content\n- Consistent look and feel across all responses",[136],"1967f2bc-322e-11f0-a59b-569c3dd06744","frontend","901aa0d2-1e12-4fe9-b9c4-c6ca06fd2a9d",["D",1747383402451],"directory",[144],"pulls","branches",1,"forks","envVars",{"_157":61,"_159":61},"connections",{"_157":61,"_158":61},"count","unfilledCount","emptyCount",{"_43":143,"_32":144,"_30":145,"_129":-5,"_41":42,"_40":140,"_130":57,"_38":179,"_13":61,"_33":147,"_35":-5,"_24":25,"_133":-5,"_165":180,"_27":181},{"_43":171,"_32":172,"_30":173,"_129":145,"_41":42,"_40":174,"_130":25,"_38":175,"_13":140,"_33":20,"_35":176,"_24":25,"_133":-5,"_165":177,"_27":178},{"_43":135,"_32":136,"_30":137,"_129":-5,"_41":42,"_40":138,"_130":25,"_38":168,"_13":140,"_33":20,"_35":141,"_24":25,"_133":-5,"_165":169,"_27":170},{"_43":128,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_130":57,"_38":164,"_13":132,"_33":34,"_35":37,"_24":25,"_133":-5,"_165":166,"_27":167},["D",1747383823982],"children",[],[28],["D",1747383747688],[],[136],"e178bfac-322e-11f0-910d-569c3dd06744","index.html","1967e376-322e-11f0-a59b-569c3dd06744",12,["D",1747383738106],"\n\n\n \n \n Simple Image Text Chat Bot\n \n \n \n \n \n\n\n

Simple Image Text Chat Bot

Ask me anything and I'll respond with text on simple, clean images!

\n \n

\n 🤖\n

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

\n \n

\n \n \n

\n\n \n\n",[],[144,172],["D",1747383402451],[161],[144],["D",1747383260076],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":219,"_220":221,"_222":223,"_224":25,"_225":25,"_226":25,"_227":57,"_228":-5,"_229":-7,"_230":-7,"_231":61,"_232":25,"_233":25,"_234":-5,"_235":25,"_236":25,"_237":25,"_238":-5},"ENV",{"_190":191,"_192":193,"_194":85,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218},"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"]

Diff · v14