Sora 2 Local Playground

A web-based playground to interact with OpenAI's Sora 2 models for creating videos.

• 🎬 Video Creation Mode: Generate new videos from text prompts using Sora 2 or Sora 2 Pro.

• 🎨 Video Remix Mode: Make targeted changes to existing videos with new prompts.

• ⚙️ Full API Parameter Control: Access and adjust all relevant parameters supported by the Sora 2 API directly through the UI (model selection, resolution, duration, optional input reference for first frame).

• 🔄 Multi-Video Queuing: Queue multiple videos for generation simultaneously - create as many videos as you want while others are processing.

• 📜 Detailed History & Cost Tracking:

  • View a comprehensive history of all your video generations and remixes.
  • See the parameters used for each request (model, resolution, duration, prompt).
  • Get detailed cost breakdowns ($USD) for each video. (hint: click the $ amount on the video)
  • Real-time progress tracking for videos currently being generated.
  • Click any prompt to copy the full text.
  • View total historical API cost.
  • Delete individual videos from history (removes from local storage and OpenAI servers).
  • Failed requests are tracked separately with error messages and excluded from cost calculations.

• 🎥 Video Output Panel: View generated videos with built-in player controls, progress slider, and playback controls.
• 🚀 Send to Remix: Quickly send any completed video (including remixes) to the remix form for further modifications.
• 📥 Video Download: Download generated videos directly to your device.
• 💾 Storage: Supports two modes via NEXT_PUBLIC_FILE_STORAGE_MODE:
  • Filesystem (default): Videos saved to ./generated-videos on the server (includes video, thumbnail, and spritesheet).
  • IndexedDB: Videos saved directly in the browser's IndexedDB (ideal for serverless deployments like Vercel).
  • Video history metadata is always saved in the browser's local storage.
  • Active job IDs are persisted - resume polling automatically after page refresh.

🚨 CAUTION: If you deploy from main or master branch, your Vercel deployment will be publicly available to anyone who has the URL. Deploying from other branches will require users to be logged into Vercel (on your team) to access the preview build. 🚨

You can deploy your own instance of this playground to Vercel with one click:

You will be prompted to enter your OPENAI_API_KEY and APP_PASSWORD during the deployment setup. For Vercel deployments, it's required to set NEXT_PUBLIC_FILE_STORAGE_MODE to indexeddb.

Note: If NEXT_PUBLIC_FILE_STORAGE_MODE is not set, the application will automatically detect if it's running on Vercel and default to indexeddb mode. Otherwise (e.g., running locally), it defaults to fs mode. You can always explicitly set the variable to fs or indexeddb to override this automatic behavior.

Follow these steps to get the playground running locally.

• Node.js (Version 20 or later required)
• npm, yarn, pnpm, or bun

You need an OpenAI API key to use this application.

⚠️ Your OpenAI Organization needs access to Sora 2 API - This is currently in limited beta. Check OpenAI's documentation for availability.

1. If you don't have a .env.local file, create one.

2. Add your OpenAI API key to the .env.local file:

   OPENAI_API_KEY=your_openai_api_key_here

   Important: Keep your API key secret. The .env.local file is included in .gitignore by default to prevent accidental commits.

For environments where the filesystem is read-only or ephemeral (like Vercel serverless functions), you can configure the application to store generated videos directly in the browser's IndexedDB using Dexie.js.

Set the following environment variable in your .env.local file or directly in your hosting provider's UI (like Vercel):

When this variable is set to indexeddb:

• The server API downloads videos from OpenAI and streams them to the client.
• The client-side application stores the video blob (and thumbnail) in IndexedDB.
• Videos are served directly from the browser's storage using Blob URLs.

If this variable is not set or has any other value, the application defaults to the standard behavior of saving videos to the ./generated-videos directory on the server's filesystem (includes {id}_video.mp4, {id}_thumbnail.webp, and {id}_spritesheet.jpg).

Note: If NEXT_PUBLIC_FILE_STORAGE_MODE is not set, the application will automatically detect if it's running on Vercel and default to indexeddb mode. Otherwise (e.g., running locally), it defaults to fs mode. You can always explicitly set the variable to fs or indexeddb to override this automatic behavior.

If you need to use an OpenAI-compatible API endpoint (e.g., a local model server or a different provider), you can specify its base URL using the OPENAI_API_BASE_URL environment variable in your .env.local file:

If OPENAI_API_BASE_URL is not set, the application will default to the standard OpenAI API endpoint.

When APP_PASSWORD is set, the frontend will prompt you for a password to authenticate requests.

Navigate to the project directory in your terminal and install the necessary packages:

Start the Next.js development server:

Open http://localhost:3000 in your web browser. You should now be able to use the Sora 2 Playground!

Contributions are welcome! Issues and feature requests, not as much welcome but I'll think about it.

MIT