[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_164":165,"_166":167},"routes/_app.x.$handle.$name",{"_94":93,"_32":45,"_102":84,"_27":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":25,"_117":118,"_119":120,"_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":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",6,"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","a74f0b8c-eaf3-11f0-aa3f-42dde27851f2","name","fileType","http","content","export default async function(req: Request): Promise {\n if (req.method === 'GET') {\n // Return a simple upload form for testing\n const html = `\n\n\n\n Image Processor - Add Wumbo Box\n \n\n\n

🖼️ Image Processor

Upload an image and I'll add a \"wumbo\" box in the center!

\n \n

\n \n \n\n`;\n \n return new Response(html, {\n headers: { 'Content-Type': 'text/html' }\n });\n }\n\n if (req.method !== 'POST') {\n return new Response('Method not allowed', { status: 405 });\n }\n\n try {\n // Get the uploaded image from form data\n const formData = await req.formData();\n const imageFile = formData.get('image') as File;\n \n if (!imageFile) {\n return new Response('No image file provided', { status: 400 });\n }\n\n // Check if it's an image\n if (!imageFile.type.startsWith('image/')) {\n return new Response('Invalid file type. Please upload an image.', { status: 400 });\n }\n\n // For now, let's use a simple approach with HTML5 Canvas via a data URL\n // This will work for basic image processing\n const imageBuffer = await imageFile.arrayBuffer();\n const imageBase64 = btoa(String.fromCharCode(...new Uint8Array(imageBuffer)));\n const imageMimeType = imageFile.type;\n \n // Create an HTML page that processes the image and returns it\n const processingHtml = `\n\n\n\n \n\n\n

\n \n\n`;\n\n return new Response(processingHtml, {\n headers: { 'Content-Type': 'text/html' }\n });\n\n } catch (error) {\n console.error('Error processing image:', error);\n return new Response(`Error processing image: ${error.message}`, { status: 500 });\n }\n}","export default async function(req: Request): Promise {\n if (req.method === 'GET') {\n // Return a simple upload form for testing\n const html = `\n\n\n\n Image Processor - Add Wumbo Box\n \n\n\n

🖼️ Image Processor

Upload an image and I'll add a \"wumbo\" box in the center!

\n \n

\n \n \n\n`;\n \n return new Response(html, {\n headers: { 'Content-Type': 'text/html' }\n });\n }\n\n if (req.method === 'POST' && new URL(req.url).pathname === '/process') {\n try {\n // Get the uploaded image from form data\n const formData = await req.formData();\n const imageFile = formData.get('image') as File;\n \n if (!imageFile) {\n return new Response('No image file provided', { status: 400 });\n }\n\n // Check if it's an image\n if (!imageFile.type.startsWith('image/')) {\n return new Response('Invalid file type. Please upload an image.', { status: 400 });\n }\n\n // Process the image using canvas in a way that works with Val Town\n const imageBuffer = await imageFile.arrayBuffer();\n const imageBase64 = btoa(String.fromCharCode(...new Uint8Array(imageBuffer)));\n const imageMimeType = imageFile.type;\n \n // Use the Canvas API via a self-contained HTML processor\n const canvasProcessor = \\`\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n const img = new Image();\n \n return new Promise((resolve, reject) => {\n img.onload = function() {\n try {\n // Set canvas size to match image\n canvas.width = img.width;\n canvas.height = img.height;\n \n // Draw the original image\n ctx.drawImage(img, 0, 0);\n \n // Calculate center position and box dimensions\n const centerX = canvas.width / 2;\n const centerY = canvas.height / 2;\n const boxWidth = Math.min(250, canvas.width * 0.4);\n const boxHeight = Math.min(100, canvas.height * 0.2);\n const boxX = centerX - boxWidth / 2;\n const boxY = centerY - boxHeight / 2;\n \n // Draw the box background with shadow\n ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';\n ctx.shadowBlur = 10;\n ctx.shadowOffsetX = 3;\n ctx.shadowOffsetY = 3;\n \n ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';\n ctx.fillRect(boxX, boxY, boxWidth, boxHeight);\n \n // Reset shadow for border\n ctx.shadowColor = 'transparent';\n ctx.shadowBlur = 0;\n ctx.shadowOffsetX = 0;\n ctx.shadowOffsetY = 0;\n \n // Draw box border\n ctx.strokeStyle = '#2c3e50';\n ctx.lineWidth = 3;\n ctx.strokeRect(boxX, boxY, boxWidth, boxHeight);\n \n // Draw \"wumbo\" text\n ctx.fillStyle = '#2c3e50';\n const fontSize = Math.min(36, boxWidth / 5.5);\n ctx.font = \\\\\\`bold \\\\\\${fontSize}px 'Arial Black', Arial, sans-serif\\\\\\`;\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillText('wumbo', centerX, centerY);\n \n // Convert to base64\n const result = canvas.toDataURL('image/png');\n resolve(result);\n } catch (error) {\n reject(error);\n }\n };\n \n img.onerror = () => reject(new Error('Failed to load image'));\n img.src = 'data:\\${imageMimeType};base64,\\${imageBase64}';\n });\n \\`;\n\n // Since we can't directly use canvas on the server, we'll return a data URL\n // that the client can process. But for a true server-side solution, \n // let's create a simpler approach using SVG overlay\n \n const svgOverlay = \\`\n \n \\`;\n\n // For now, let's return an HTML page that processes the image client-side\n // and automatically downloads the result\n const processingPage = \\`\n\n\n\n \n Processing...\n\n\n

🔄 Processing your image...

The processed image will download automatically.

\n \n\n\n \\`;\n\n return new Response(processingPage, {\n headers: { 'Content-Type': 'text/html' }\n });\n\n } catch (error) {\n console.error('Error processing image:', error);\n return new Response(\\`Error processing image: \\${error.message}\\`, { status: 500 });\n }\n }\n\n return new Response('Method not allowed', { status: 405 });\n}","createdAt",["D",1767699413749],"branchVersion","branchId","470aafec-eaf3-11f0-8cfb-42dde27851f2","id","470a624e-eaf3-11f0-8cfb-42dde27851f2","untitled-1613",["D",1767699103826],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","aac664db-41b8-44ac-9096-5c383df47893","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","7d032f21-4bfa-4a2f-a6cc-137161edd322","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},"branch",{"_13":83,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"isOwned",11,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","kevin","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJUZ0pQN2FCcTViRk5tWWZSOWpDamRLbWd3VC5qcGVnIn0","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":160,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":161,"_78":162,"_80":163,"_82":25},"tree",[151,152],"files",[151,152],"counts",{"_141":60,"_142":131,"_143":60,"_144":145,"_146":147},"contents",[125,126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":137,"_32":28,"_30":31,"_130":-5,"_41":42,"_40":14,"_132":25,"_38":138,"_13":139,"_33":34,"_35":37,"_24":25,"_135":-5,"_27":140},{"_43":127,"_32":128,"_30":129,"_130":-5,"_41":42,"_40":131,"_132":120,"_38":133,"_13":60,"_33":134,"_35":103,"_24":25,"_135":-5,"_27":136},"470c9dfc-eaf3-11f0-8cfb-42dde27851f2","main.ts","470c9e7e-eaf3-11f0-8cfb-42dde27851f2","parentId",1,"latest",["D",1767699103838],"script","label",[128],"ffc591b4-eaf3-11f0-9fea-42dde27851f2",["D",1767699413749],4,[28],"pulls","branches","forks","envVars",{"_148":60,"_150":60},"connections",{"_148":60,"_149":60},"count","unfilledCount","emptyCount",{"_43":137,"_32":28,"_30":31,"_130":-5,"_41":42,"_40":14,"_132":25,"_38":157,"_13":139,"_33":34,"_35":37,"_24":25,"_135":-5,"_154":158,"_27":159},{"_43":127,"_32":128,"_30":129,"_130":-5,"_41":42,"_40":131,"_132":120,"_38":153,"_13":60,"_33":134,"_35":103,"_24":25,"_135":-5,"_154":155,"_27":156},["D",1767699103838],"children",[],[128],["D",1767699413749],[],[28],["D",1767699103826],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},{"_13":83,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"ctx",{"_76":-5,"_122":197,"_198":199,"_200":201,"_202":25,"_203":25,"_204":25,"_205":120,"_206":-5,"_207":-7,"_208":-7,"_209":60,"_210":25,"_211":25,"_212":-5,"_213":25,"_214":25,"_215":25,"_216":-5},"ENV",{"_168":169,"_170":171,"_172":84,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · v6