photocal
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
index.ts
https://halffullheart--ad4bbbf89caa11f0ad170224a6c84d84.web.val.run
A mobile-optimized app that extracts event information from photos of flyers and posters using AI.
- 📱 Mobile-optimized photo upload (camera or gallery)
- 🖼️ Automatic image resizing for storage efficiency
- 🤖 AI-powered title and date extraction from flyers/posters using OpenAI Vision
- 📅 Calendar event generation (.ics file download)
- 💾 Photo storage and viewing with blob storage
- Upload: Take a photo or upload an image of an event flyer/poster
- AI Analysis: OpenAI Vision API extracts the event title and date
- Review: View the extracted information along with your photo
- Calendar: Download an .ics file to add the event to your calendar
├── backend/
│ ├── index.ts # Main Hono server with HTTP trigger
│ ├── routes/
│ │ ├── upload.ts # Photo upload and AI processing
│ │ └── calendar.ts # ICS file generation
│ └── utils/
│ ├── image.ts # Image processing utilities
│ └── ai.ts # OpenAI Vision integration
├── frontend/
│ ├── index.html # Main HTML template
│ ├── index.tsx # Frontend React app entry
│ ├── components/
│ │ ├── App.tsx # Main app component
│ │ ├── UploadForm.tsx # Photo upload with drag/drop
│ │ └── EventDisplay.tsx # Event details and calendar download
│ └── style.css # Mobile-optimized styles
└── shared/
└── types.ts # Shared TypeScript interfaces
- Frontend: React 18 with TypeScript, TailwindCSS for styling
- Backend: Hono framework with Val Town blob storage
- AI: OpenAI GPT-4 Vision for image analysis
- Mobile: Optimized for iOS/Android with camera capture support
- Calendar: Standard .ics file format for universal compatibility
POST /api/upload
- Upload and analyze photoGET /api/photo/:id
- Serve stored photosPOST /api/calendar/download
- Generate .ics calendar file
- Open the app on your mobile device
- Tap the upload area to take a photo or select from gallery
- Wait for AI analysis (usually 3-5 seconds)
- Review the extracted event title and date
- Tap "Add to Calendar" to download the .ics file
- Open the downloaded file with your calendar app
- The app automatically resizes large images on the client side
- Photos are stored using Val Town's blob storage
- AI extraction uses OpenAI's vision model with structured JSON output
- Calendar files include the photo URL in the event description
- Touch-friendly interface with 44px minimum touch targets
- Camera capture support with
capture="environment"
attribute - Drag and drop support for desktop browsers
- Responsive design that works on all screen sizes
- Loading states and error handling for poor network conditions