Event Extractor

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_261":262,"_263":264},"routes/_app.x.$handle.$name",{"_100":99,"_32":49,"_108":90,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_21":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":25,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_47":48,"_32":49,"_37":50,"_51":-5,"_52":25,"_53":54,"_55":54,"_56":-5,"_57":-5,"_18":58,"_59":60,"_61":62,"_63":62,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",8,"changes",[19,20],"aiChatInfo","userId",{"_21":42,"_23":-7,"_24":25,"_26":25,"_27":43,"_29":43},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":21,"_35":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous","deleted",false,"deletedHere","path","frontend/index.html","latestPath","fileId","b5ba27de-9caa-11f0-975e-0224a6c84d84","name","index.html","fileType","content","\n\n\n \n \n Event Extractor\n \n \n \n \n\n\n

\n \n\n","createdAt",["D",1759091745567],"branchVersion","branchId","a36f93ee-9ca9-11f0-a12e-0224a6c84d84",{"_30":44,"_32":43,"_34":45,"_35":-5,"_37":46,"_39":14,"_40":41,"_24":25},"frontend","543c874c-b61a-42f9-bb22-1d20809564a8","directory",["D",1759091745567],"id","a36f3fe8-9ca9-11f0-a12e-0224a6c84d84","photocal",["D",1759091285382],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","cea41dc4-b4c3-4a38-8ee6-ee9b5960fda2","pinnedFileId","ad4bbbf8-9caa-11f0-ad17-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","dbeafde9-66b9-4cff-8625-2da1195a1c5d","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":58,"_104":105,"_106":25},"branch",{"_13":89,"_32":90,"_47":41,"_91":48,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":49,"_98":99},"isOwned",20,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","halffullheart","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaGQyZVFDeXM0U3YzNkpjdHpudnBqcHRtOGQifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_32":49,"_37":257,"_51":-5,"_52":25,"_53":54,"_55":54,"_56":-5,"_57":-5,"_18":58,"_59":60,"_61":62,"_63":62,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":258,"_84":259,"_86":260,"_88":25},"tree",[169,177,179,181],"files",[169,170,171,172,173,174,175,176,177,178,179,180,181],"counts",{"_159":66,"_160":138,"_161":66,"_162":163,"_164":165},"contents",[130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_47":153,"_32":154,"_30":155,"_137":-5,"_40":41,"_39":156,"_139":62,"_37":157,"_13":66,"_34":45,"_35":-5,"_24":25,"_142":-5,"_27":158},{"_47":150,"_32":43,"_30":44,"_137":-5,"_40":41,"_39":14,"_139":62,"_37":151,"_13":66,"_34":45,"_35":-5,"_24":25,"_142":-5,"_27":152},{"_47":144,"_32":145,"_30":146,"_137":-5,"_40":41,"_39":147,"_139":62,"_37":148,"_13":66,"_34":45,"_35":-5,"_24":25,"_142":-5,"_27":149},{"_47":134,"_32":135,"_30":136,"_137":-5,"_40":41,"_39":138,"_139":25,"_37":140,"_13":66,"_34":21,"_35":141,"_24":25,"_142":-5,"_27":143},"7d7857e2-9caa-11f0-9259-0224a6c84d84","README.md","7d7858aa-9caa-11f0-9259-0224a6c84d84","parentId",1,"latest",["D",1759091651182],"# Event Extractor App\n\nA mobile-optimized app that extracts event information from photos of flyers and posters.\n\n## Features\n\n- Mobile-optimized photo upload (camera or gallery)\n- Automatic image resizing for storage efficiency\n- AI-powered title and date extraction from flyers/posters\n- Calendar event generation (.ics file download)\n- Photo storage and viewing\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main Hono server\n│ ├── routes/\n│ │ ├── upload.ts # Photo upload and processing\n│ │ ├── calendar.ts # ICS file generation\n│ │ └── static.ts # Static file serving\n│ └── utils/\n│ ├── image.ts # Image processing utilities\n│ └── ai.ts # AI analysis utilities\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend React app\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── UploadForm.tsx # Photo upload form\n│ │ └── EventDisplay.tsx # Event details display\n│ └── style.css # Custom styles\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Usage\n\n1. Open the app on mobile\n2. Take a photo or upload an image of a flyer/poster\n3. Wait for AI analysis to extract title and date\n4. Review the extracted information\n5. Tap \"Add to Calendar\" to download the .ics file","label",[135],"806a49f6-9caa-11f0-a6b2-0224a6c84d84","shared","c4306f65-0021-4a8a-96b8-9ddc64a048fd",2,["D",1759091656118],[145],"b5ba3490-9caa-11f0-975e-0224a6c84d84",["D",1759091745567],[43],"87f8cddc-9caa-11f0-99aa-0224a6c84d84","backend","cc64b794-b9c7-44ca-b584-0d039686f47a",3,["D",1759091668796],[154],"pulls","branches","forks","envVars",{"_166":66,"_168":66},"connections",{"_166":66,"_167":66},"count","unfilledCount","emptyCount",{"_47":153,"_32":154,"_30":155,"_137":-5,"_40":41,"_39":156,"_139":62,"_37":254,"_13":66,"_34":45,"_35":-5,"_24":25,"_142":-5,"_183":255,"_27":256},{"_47":250,"_32":241,"_30":235,"_137":155,"_40":41,"_39":236,"_139":62,"_37":251,"_13":66,"_34":45,"_35":-5,"_24":25,"_142":-5,"_183":252,"_27":253},{"_47":242,"_32":243,"_30":244,"_137":235,"_40":41,"_39":245,"_139":62,"_37":246,"_13":66,"_34":190,"_35":247,"_24":25,"_142":-5,"_183":248,"_27":249},{"_47":232,"_32":233,"_30":234,"_137":235,"_40":41,"_39":236,"_139":25,"_37":237,"_13":66,"_34":190,"_35":238,"_24":25,"_142":-5,"_183":239,"_27":240},{"_47":228,"_32":219,"_30":214,"_137":155,"_40":41,"_39":156,"_139":62,"_37":229,"_13":66,"_34":45,"_35":-5,"_24":25,"_142":-5,"_183":230,"_27":231},{"_47":220,"_32":221,"_30":222,"_137":214,"_40":41,"_39":223,"_139":62,"_37":224,"_13":66,"_34":190,"_35":225,"_24":25,"_142":-5,"_183":226,"_27":227},{"_47":211,"_32":212,"_30":213,"_137":214,"_40":41,"_39":156,"_139":25,"_37":215,"_13":66,"_34":190,"_35":216,"_24":25,"_142":-5,"_183":217,"_27":218},{"_47":204,"_32":205,"_30":60,"_137":155,"_40":41,"_39":206,"_139":25,"_37":207,"_13":66,"_34":190,"_35":208,"_24":25,"_142":-5,"_183":209,"_27":210},{"_47":150,"_32":43,"_30":44,"_137":-5,"_40":41,"_39":14,"_139":62,"_37":201,"_13":66,"_34":45,"_35":-5,"_24":25,"_142":-5,"_183":202,"_27":203},{"_47":197,"_32":33,"_30":31,"_137":44,"_40":41,"_39":14,"_139":62,"_37":198,"_13":66,"_34":21,"_35":36,"_24":25,"_142":-5,"_183":199,"_27":200},{"_47":144,"_32":145,"_30":146,"_137":-5,"_40":41,"_39":147,"_139":62,"_37":194,"_13":66,"_34":45,"_35":-5,"_24":25,"_142":-5,"_183":195,"_27":196},{"_47":186,"_32":187,"_30":188,"_137":146,"_40":41,"_39":147,"_139":62,"_37":189,"_13":66,"_34":190,"_35":191,"_24":25,"_142":-5,"_183":192,"_27":193},{"_47":134,"_32":135,"_30":136,"_137":-5,"_40":41,"_39":138,"_139":25,"_37":182,"_13":66,"_34":21,"_35":141,"_24":25,"_142":-5,"_183":184,"_27":185},["D",1759091651182],"children",[],[135],"806a4276-9caa-11f0-a6b2-0224a6c84d84","types.ts","806a432a-9caa-11f0-a6b2-0224a6c84d84",["D",1759091656118],"script","export interface ExtractedEvent {\n title: string;\n date: string; // ISO date string\n photoUrl: string;\n photoId: string;\n}\n\nexport interface UploadResponse {\n success: boolean;\n event?: ExtractedEvent;\n error?: string;\n}\n\nexport interface CalendarEvent {\n title: string;\n date: string;\n photoUrl: string;\n}",[],[145,187],["D",1759091656118],[180],[145],"b5ba273e-9caa-11f0-975e-0224a6c84d84",["D",1759091745567],[],[43,33],["D",1759091745567],[178],[43],"ad4bbb3a-9caa-11f0-ad17-0224a6c84d84","index.ts",7,["D",1759091731423],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport upload from \"./routes/upload.ts\";\nimport calendar from \"./routes/calendar.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// API routes\napp.route(\"/api/upload\", upload);\napp.route(\"/api/calendar\", calendar);\napp.route(\"/api\", upload); // Also serve photos at /api/photo/:id\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\nexport default app.fetch;",[],[154,205],"87f8c49a-9caa-11f0-99aa-0224a6c84d84","image.ts","87f8c558-9caa-11f0-99aa-0224a6c84d84","823a2978-450c-4904-b2d1-17c4f4a68ef8",["D",1759091668796],"/**\n * Resize image to maximum dimensions while maintaining aspect ratio\n */\nexport function resizeImage(file: File, maxWidth: number = 1200, maxHeight: number = 1200): Promise {\n return new Promise((resolve) => {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d')!;\n const img = new Image();\n \n img.onload = () => {\n // Calculate new dimensions\n let { width, height } = img;\n \n if (width > maxWidth || height > maxHeight) {\n const ratio = Math.min(maxWidth / width, maxHeight / height);\n width *= ratio;\n height *= ratio;\n }\n \n // Set canvas size and draw resized image\n canvas.width = width;\n canvas.height = height;\n ctx.drawImage(img, 0, 0, width, height);\n \n // Convert to blob\n canvas.toBlob((blob) => {\n resolve(blob!);\n }, 'image/jpeg', 0.8);\n };\n \n img.src = URL.createObjectURL(file);\n });\n}\n\n/**\n * Convert file to base64 for AI analysis\n */\nexport function fileToBase64(file: File): Promise {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => {\n const base64 = (reader.result as string).split(',')[1];\n resolve(base64);\n };\n reader.onerror = reject;\n reader.readAsDataURL(file);\n });\n}",[],[154,219,212],"utils","8fb94c36-9caa-11f0-a38f-0224a6c84d84","ai.ts","8fb94cea-9caa-11f0-a38f-0224a6c84d84",4,["D",1759091681809],"import { OpenAI } from \"https://esm.town/v/std/openai\";\n\nexport interface EventExtraction {\n title: string | null;\n date: string | null; // ISO date string\n confidence: number;\n}\n\n/**\n * Extract event title and date from image using OpenAI Vision\n */\nexport async function extractEventFromImage(base64Image: string): Promise {\n const openai = new OpenAI();\n \n try {\n const response = await openai.chat.completions.create({\n model: \"gpt-4o-mini\",\n messages: [\n {\n role: \"user\",\n content: [\n {\n type: \"text\",\n text: `Analyze this image of a flyer or poster and extract the event information. \n \n Please provide:\n 1. The main title/name of the event\n 2. The date of the event (convert to ISO format YYYY-MM-DD if possible)\n \n Respond with a JSON object in this exact format:\n {\n \"title\": \"Event Title Here\",\n \"date\": \"2024-01-15\",\n \"confidence\": 0.9\n }\n \n If you cannot find clear title or date information, set those fields to null.\n Set confidence between 0-1 based on how clear the information is.`\n },\n {\n type: \"image_url\",\n image_url: {\n url: `data:image/jpeg;base64,${base64Image}`\n }\n }\n ]\n }\n ],\n max_tokens: 300,\n temperature: 0.1\n });\n\n const content = response.choices[0]?.message?.content;\n if (!content) {\n throw new Error(\"No response from OpenAI\");\n }\n\n // Parse JSON response\n const parsed = JSON.parse(content) as EventExtraction;\n \n // Validate the response structure\n if (typeof parsed.title !== 'string' && parsed.title !== null) {\n parsed.title = null;\n }\n if (typeof parsed.date !== 'string' && parsed.date !== null) {\n parsed.date = null;\n }\n if (typeof parsed.confidence !== 'number') {\n parsed.confidence = 0.5;\n }\n\n return parsed;\n } catch (error) {\n console.error(\"Error extracting event from image:\", error);\n return {\n title: null,\n date: null,\n confidence: 0\n };\n }\n}",[],[154,219,221],"87f8d07a-9caa-11f0-99aa-0224a6c84d84",["D",1759091668796],[174,175],[154,219],"9eb35592-9caa-11f0-8f29-0224a6c84d84","upload.ts","9eb35632-9caa-11f0-8f29-0224a6c84d84","b61931ff-d8b7-4ae8-85dd-c239dd8abd0a",5,["D",1759091706931],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { extractEventFromImage } from \"../utils/ai.ts\";\nimport type { UploadResponse, ExtractedEvent } from \"../../shared/types.ts\";\n\nconst upload = new Hono();\n\nupload.post(\"/\", async (c) => {\n try {\n const formData = await c.req.formData();\n const file = formData.get(\"photo\") as File;\n \n if (!file) {\n return c.json({ \n success: false, \n error: \"No photo uploaded\" \n }, 400);\n }\n\n // Validate file type\n if (!file.type.startsWith(\"image/\")) {\n return c.json({ \n success: false, \n error: \"File must be an image\" \n }, 400);\n }\n\n // Generate unique ID for this photo\n const photoId = `photo_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n \n // Convert to base64 for AI analysis\n const arrayBuffer = await file.arrayBuffer();\n const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));\n \n // Store the original image\n await blob.set(photoId, arrayBuffer);\n \n // Extract event information using AI\n const extraction = await extractEventFromImage(base64);\n \n if (!extraction.title || !extraction.date) {\n return c.json({\n success: false,\n error: \"Could not extract event title and date from the image. Please make sure the image shows a clear flyer or poster with event information.\"\n }, 400);\n }\n\n const photoUrl = `${new URL(c.req.url).origin}/api/photo/${photoId}`;\n \n const event: ExtractedEvent = {\n title: extraction.title,\n date: extraction.date,\n photoUrl,\n photoId\n };\n\n return c.json({\n success: true,\n event\n });\n\n } catch (error) {\n console.error(\"Upload error:\", error);\n return c.json({ \n success: false, \n error: \"Failed to process image\" \n }, 500);\n }\n});\n\n// Serve uploaded photos\nupload.get(\"/photo/:id\", async (c) => {\n const photoId = c.req.param(\"id\");\n \n try {\n const imageData = await blob.get(photoId);\n if (!imageData) {\n return c.notFound();\n }\n\n return new Response(imageData, {\n headers: {\n \"Content-Type\": \"image/jpeg\",\n \"Cache-Control\": \"public, max-age=31536000\"\n }\n });\n } catch (error) {\n console.error(\"Error serving photo:\", error);\n return c.notFound();\n }\n});\n\nexport default upload;",[],[154,241,233],"routes","a87f3780-9caa-11f0-9ad5-0224a6c84d84","calendar.ts","a87f3870-9caa-11f0-9ad5-0224a6c84d84",6,["D",1759091723368],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport type { CalendarEvent } from \"../../shared/types.ts\";\n\nconst calendar = new Hono();\n\n/**\n * Generate ICS file content for calendar event\n */\nfunction generateICS(event: CalendarEvent): string {\n const now = new Date();\n const eventDate = new Date(event.date);\n \n // Format dates for ICS (YYYYMMDDTHHMMSSZ)\n const formatDate = (date: Date) => {\n return date.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';\n };\n \n const dtStamp = formatDate(now);\n const dtStart = formatDate(eventDate);\n const uid = `event-${Date.now()}@eventextractor.val.town`;\n \n const icsContent = [\n 'BEGIN:VCALENDAR',\n 'VERSION:2.0',\n 'PRODID:-//Event Extractor//Event Extractor App//EN',\n 'BEGIN:VEVENT',\n `UID:${uid}`,\n `DTSTAMP:${dtStamp}`,\n `DTSTART:${dtStart}`,\n `SUMMARY:${event.title}`,\n `DESCRIPTION:Event extracted from flyer. View photo: ${event.photoUrl}`,\n `URL:${event.photoUrl}`,\n 'STATUS:TENTATIVE',\n 'END:VEVENT',\n 'END:VCALENDAR'\n ].join('\\r\\n');\n \n return icsContent;\n}\n\ncalendar.post(\"/download\", async (c) => {\n try {\n const eventData = await c.req.json() as CalendarEvent;\n \n if (!eventData.title || !eventData.date) {\n return c.json({ error: \"Missing required event data\" }, 400);\n }\n\n const icsContent = generateICS(eventData);\n const filename = `${eventData.title.replace(/[^a-zA-Z0-9]/g, '_')}.ics`;\n \n return new Response(icsContent, {\n headers: {\n 'Content-Type': 'text/calendar; charset=utf-8',\n 'Content-Disposition': `attachment; filename=\"${filename}\"`,\n 'Cache-Control': 'no-cache'\n }\n });\n \n } catch (error) {\n console.error(\"Calendar generation error:\", error);\n return c.json({ error: \"Failed to generate calendar file\" }, 500);\n }\n});\n\nexport default calendar;",[],[154,241,243],"9eb364e2-9caa-11f0-8f29-0224a6c84d84",["D",1759091706931],[171,172],[154,241],["D",1759091668796],[170,173,176],[154],["D",1759091285382],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":58,"_104":105,"_106":25},{"_13":89,"_32":90,"_47":41,"_91":48,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":49,"_98":99},"ctx",{"_82":-5,"_127":294,"_295":296,"_297":298,"_299":25,"_300":25,"_301":25,"_302":62,"_303":-5,"_304":-7,"_305":-7,"_306":66,"_307":25,"_308":25,"_309":-5,"_310":25,"_311":25,"_312":25,"_313":-5},"ENV",{"_265":266,"_267":268,"_269":90,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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 · v8