A web application that converts URLs into TikTok-style videos using AI-generated summaries and screenshots.

• NEVER USE: https://esm.sh/@google/generative-ai@0.1.3
• ALWAYS USE: https://esm.sh/@google/genai
• Correct Import: import { GoogleGenAI } from "https://esm.sh/@google/genai";
• Correct Initialization:

  const genAI = new GoogleGenAI({
    apiKey: Deno.env.get('GEMINI_API_KEY') || ''
  });

• Correct API Call:

  const result = await genAI.models.generateContent({
    model: "gemini-2.0-flash-exp",
    contents: summaryPrompt
  });
  const summary = result.text;

• Markdown Service: https://markdownifyurl.val.run/?url=${encodeURIComponent(url)}
• Screenshot Service: https://screenshot.val.run/?url=${encodeURIComponent(url)}

• Convert any URL into a video using Veo AI
• Fetch markdown content and screenshots from URLs using markdownifyurl.val.run
• Generate AI summaries using Gemini API
• TikTok-style scrolling feed with scroll-snap
• Customizable video generation prompts

├── backend/
│   ├── index.ts           # Main Hono server
│   ├── routes/
│   │   ├── videos.ts      # Video generation endpoints
│   │   └── static.ts      # Static file serving
│   └── database/
│       ├── migrations.ts  # SQLite schema
│       └── queries.ts     # Database operations
├── frontend/
│   ├── index.html         # Main HTML template
│   ├── index.tsx          # React app entry point
│   ├── components/
│   │   ├── App.tsx        # Main app component
│   │   ├── VideoFeed.tsx  # TikTok-style feed
│   │   ├── VideoCard.tsx  # Individual video component
│   │   └── URLInput.tsx   # URL input form
│   └── style.css          # Custom styles
└── shared/
    ├── types.ts           # Shared TypeScript types
    └── utils.ts           # Shared utility functions

• POST /api/videos/generate - Generate video from URL
• GET /api/videos - Get all generated videos
• GET /api/videos/:id - Get specific video
• DELETE /api/videos/:id - Delete video

• GEMINI_API_KEY - Google Gemini API key for summaries (using @google/genai package)
  • Required for: AI summary generation
  • Used with: gemini-2.0-flash-exp model
  • API: genAI.models.generateContent()
• VEO_API_KEY - Veo API key for video generation (if required)

• Uses SQLite with table name changes for schema updates
• Video records include: id, url, title, summary, screenshotUrl, videoUrl, status, prompt, error, createdAt, updatedAt

1. Markdown Extraction: markdownifyurl.val.run service
2. Screenshot Capture: screenshot.val.run service
3. AI Summary: Google Gemini via @google/genai package
4. Video Generation: Veo API (placeholder implementation)
5. Database Storage: SQLite with status tracking

• Failed markdown fetch: Check URL accessibility
• AI generation errors: Verify GEMINI_API_KEY and model availability
• Database errors: Check table schema and migrations

1. Enter URLs in the input form
2. Videos are generated automatically using:
   • Markdown content from the URL via markdownifyurl.val.run
   • Screenshot of the page via screenshot.val.run
   • AI-generated summary using Gemini (@google/genai package)
   • Custom video generation prompt
3. Scroll through the TikTok-style feed
4. Customize video prompts in the settings

• Cause: Using wrong import package
• Solution: Use import { GoogleGenAI } from "https://esm.sh/@google/genai";
• Never use: @google/generative-ai@0.1.3

• Cause: Wrong markdown service URL
• Solution: Use https://markdownifyurl.val.run/?url=${encodeURIComponent(url)}
• Not: markdownify.val.run

• Cause: Using deprecated model name
• Solution: Use gemini-2.0-flash-exp model
• Not: gemini-pro

• processing: Video is being generated
• completed: Video generation successful
• failed: Check error field for details

To test video generation:

curl -X POST https://your-app.web.val.run/api/videos/generate \
  -H "Content-Type: application/json" \
  -d '{"url": "https://www.google.com", "prompt": "Create a test video"}'

Check status:

curl https://your-app.web.val.run/api/videos