TikTok-Style Video Feed Generator

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

• Convert any URL into a video using Veo AI
• Fetch markdown content and screenshots from URLs
• Generate AI summaries using Gemini API
• TikTok-style scrolling feed with scroll-snap
• Auto-play videos when scrolled into view
• Audio controls with mute/unmute toggle
• Admin interface for prompt management
• Configurable video generation prompts (no redeploy required)
• Video re-processing with updated prompts
• Version tracking for reprocessed videos
• HackerNews integration - Automated cron job to generate videos for top stories

├── 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
• POST /api/videos/poll - Poll for processing video updates

• GET /api/admin/prompt - Get current default video prompt
• PUT /api/admin/prompt - Update default video prompt
• GET /api/admin/videos - Get all videos for admin management
• POST /api/admin/reprocess - Reprocess selected videos with new prompt

• GEMINI_API_KEY - Google Gemini API key for summaries (required)
• ADMIN_PASSWORD - Password for admin interface access (required for admin features)
• VEO_API_KEY - Veo API key for video generation (optional - currently using placeholder)

1. Get a Gemini API key from Google AI Studio
2. Add the GEMINI_API_KEY environment variable in Val Town
3. The Veo integration is currently a placeholder - you'll need to implement the actual Veo API calls
4. The application uses external services:
   • https://markdownify.val.run/ for converting web pages to markdown
   • https://screenshot.val.run/ for taking page screenshots

1. Enter URLs in the input form
2. Videos are generated automatically using:
   • Markdown content from the URL
   • Screenshot of the page
   • AI-generated summary
   • Configurable video generation prompt
3. Scroll through the TikTok-style feed to view videos

1. Navigate to /admin in your browser
2. Enter the admin password (set via ADMIN_PASSWORD environment variable)
3. Edit the default video generation prompt
4. Select videos to reprocess with the updated prompt
5. Track video versions and regenerations

• Prompt Editor: Edit the default video generation prompt without redeploying
• Video Selector: Choose specific videos or all videos to reprocess
• Version Tracking: Each reprocessed video creates a new version while preserving the original
• Bulk Operations: Reprocess multiple videos at once with the updated prompt

• 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-flash-latest",
    contents: summaryPrompt,
  });
  const summary = result.text;

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

Create a funky, engaging video overview of this web page content.
Make it visually interesting with dynamic transitions, colorful graphics, and modern design elements.
The video should be vertical (9:16 aspect ratio) like a TikTok video.
Include text overlays highlighting key points from the summary.
Use the screenshot as a reference for the original page design but make it more dynamic and engaging.
Keep it under 30 seconds and make it scroll-friendly for social media.

This project includes an automated cron job that fetches top HackerNews stories and generates videos for them.

• Runs every hour automatically
• Processes top 10 stories (configurable)
• Only processes external URLs (skips Ask HN, Show HN text posts)
• Prevents duplicates - never processes the same URL twice
• Uses your default video generation prompt
• Cost-controlled with configurable limits

For detailed setup instructions, see HACKERNEWS_CRON_SETUP.md

Quick Start:

1. Upload hackernews-cron.ts to Val.Town as a new Val
2. Set the BASE_URL environment variable to your deployed application URL
3. Schedule the Val to run every hour (0 * * * *)
4. Adjust TOP_STORIES_LIMIT in the code to control how many stories to process

The cron job will automatically:

• Fetch the latest HackerNews top stories
• Filter for new URLs not already in your database
• Trigger video generation for each new URL
• Log detailed processing results

Videos generated by the cron job appear in your feed just like manually submitted URLs.