• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
halffullheart

halffullheart

photocal

Public
Like
photocal
Home
Code
4
backend
3
frontend
4
shared
1
README.md
Branches
1
Pull requests
Remixes
History
Environment variables
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.
Sign up now
Code
/
Code
/
Search
index.ts
https://halffullheart--ad4bbbf89caa11f0ad170224a6c84d84.web.val.run
README.md

Event Extractor App

A mobile-optimized app that extracts event information from photos of flyers and posters using AI.

Features

  • 📱 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

How It Works

  1. Upload: Take a photo or upload an image of an event flyer/poster
  2. AI Analysis: OpenAI Vision API extracts the event title and date
  3. Review: View the extracted information along with your photo
  4. Calendar: Download an .ics file to add the event to your calendar

Project Structure

├── 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

Technical Details

  • 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

API Endpoints

  • POST /api/upload - Upload and analyze photo
  • GET /api/photo/:id - Serve stored photos
  • POST /api/calendar/download - Generate .ics calendar file

Usage Instructions

For Users:

  1. Open the app on your mobile device
  2. Tap the upload area to take a photo or select from gallery
  3. Wait for AI analysis (usually 3-5 seconds)
  4. Review the extracted event title and date
  5. Tap "Add to Calendar" to download the .ics file
  6. Open the downloaded file with your calendar app

For Developers:

  • 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

Mobile Optimization

  • 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
HTTP
  • index.ts
    halffullheart--ad…84.web.val.run
Code
backendfrontendsharedREADME.md
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
ExploreDocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.