FlyCut Caption - AI-Powered Video Subtitle Editing Tool

<div align="center">

A powerful AI-driven video subtitle editing tool focused on intelligent subtitle generation, bilingual editing, smart blank cutting, and hard-burn export.

English | 中文

</div>

✨ Features

🎯 Core Features

• 🎤 Intelligent Speech Recognition: High-precision ASR with Whisper (browser) and FunASR (desktop/Tauri), word-level timestamps
• 🌐 Bilingual Subtitles: Primary + secondary tracks, AI translation (e.g. Chinese ↔ English), dual-track editing
• ✂️ Visual Subtitle Editing: Select, delete, restore segments; word-level mark/delete modes
• ⚡ Smart Cut Blank: One-click detect and remove silent gaps to tighten the cut
• 🎬 Real-time Preview: Player synced with timeline; preview mode skips deleted segments
• 🎨 Subtitle Style Customization: Fonts, colors, presets, dual-track layout
• 📤 Multi-format Export: SRT / JSON subtitles, clip-only video, or hard-burn dual subtitles into the video
• 🧪 Sample Video: One-click load a cloud sample to try the full pipeline

🔧 Technical Features

• ⚡ Modern Tech Stack: React 19 + TypeScript + Vite + Tailwind CSS 4 + Tauri
• 🧠 Local AI Processing: Browser models via Transformers.js; desktop FunASR sidecar for higher quality
• 🎯 Web Workers / Sidecars: ASR and encoding stay off the UI thread
• 📱 Responsive Design: Modern workstation UI adapted to different screen sizes
• 🎪 Component Architecture: Modular design, easy to maintain and extend

🚀 Quick Start

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Installation Steps

1. Clone the project

git clone https://github.com/x007xyz/flycut-caption.git
cd flycut-caption

2. Install dependencies

pnpm install

3. Start development server

pnpm dev

4. Open browser

http://localhost:5173

Build for Production

# Build project
pnpm build

# Preview build result
pnpm preview

📋 User Guide

1. Upload Video Files

• Supported formats: MP4, WebM, AVI, MOV
• Supported audio: MP3, WAV, OGG
• Drag and drop files, pick a local file, or click Use sample video to try instantly

2. Generate Subtitles

• Choose ASR engine / model and recognition language
• Click start recognition; AI generates timestamped subtitles in the background
• Desktop builds can use FunASR for higher accuracy on longer clips

3. Edit Subtitles & Translate

• Dual tracks: Primary + secondary (bilingual) list and timeline
• AI translation: Translate the full track (e.g. Deepseek → English)
• Select / delete: Segment-level or word-level mark & remove
• History: Undo / redo supported

4. Smart Cut Blank

• Click Smart Cut Blank to detect long silences and mark them for removal
• Timeline shows kept (green) vs removed (red) regions
• Preview mode plays only kept segments so you can judge the cut before export

5. Video Preview

• Preview mode: Automatically skip deleted segments to preview final result
• Keyboard shortcuts:
  • Space: Play/Pause
  • ←/→: Rewind/Fast forward 5 seconds
  • Shift + ←/→: Rewind/Fast forward 10 seconds
  • ↑/↓: Adjust volume
  • M: Mute/Unmute
  • F: Fullscreen

6. Subtitle Styling

• Font settings: Font size, weight, color, presets
• Dual layout: Primary / secondary track styles independently
• Background style: Background color, transparency, border
• Real-time preview: WYSIWYG style adjustment on the player

7. Export Results

• Subtitle export: SRT, JSON, and other subtitle formats
• Video export:
  • Keep only non-deleted segments (smart cut applied)
  • Optional hard-burn of dual subtitles into the video
  • Hardware-accelerated encode on desktop when available

🌐 Internationalization Design

FlyCut Caption adopts componentized internationalization design, supporting flexible language pack management and real-time language switching. The component can automatically sync external language changes with internal UI components.

Built-in Language Packs

import { FlyCutCaption, zhCN, enUS } from '@flycut/caption-react'

// Use built-in Chinese language pack
<FlyCutCaption
  config={{ language: 'zh' }}
  locale={zhCN}
/>

// Use built-in English language pack
<FlyCutCaption
  config={{ language: 'en' }}
  locale={enUS}
/>

Custom Language Packs

import { FlyCutCaption, type FlyCutCaptionLocale } from '@flycut/caption-react'

// Create custom language pack (Japanese example)
const customJaJP: FlyCutCaptionLocale = {
  common: {
    loading: '読み込み中...',
    error: 'エラー',
    success: '成功',
    confirm: '確認',
    cancel: 'キャンセル',
    ok: 'OK',
    // ... more common translations
  },
  components: {
    fileUpload: {
      dragDropText: 'ビデオファイルをここにドラッグするか、クリックして選択',
      selectFile: 'ファイルを選択',
      supportedFormats: 'サポート形式：',
      // ... more component translations
    },
    subtitleEditor: {
      title: '字幕エディター',
      addSubtitle: '字幕を追加',
      deleteSelected: '選択項目を削除',
      // ... more editor translations
    },
    // ... other component translations
  },
  messages: {
    fileUpload: {
      uploadSuccess: 'ファイルアップロード成功',
      uploadFailed: 'ファイルアップロード失敗',
      // ... more message translations
    },
    // ... other message translations
  }
}

// Use custom language pack
<FlyCutCaption
  config={{ language: 'ja' }}
  locale={customJaJP}
/>

Componentized Language Switching

The new componentized approach provides better language synchronization between external controls and internal components:

import { useState } from 'react'
import { FlyCutCaption, zhCN, enUS, type FlyCutCaptionLocale } from '@flycut/caption-react'

function App() {
  const [currentLanguage, setCurrentLanguage] = useState('zh')
  const [currentLocale, setCurrentLocale] = useState<FlyCutCaptionLocale | undefined>(undefined)

  const handleLanguageChange = (language: string) => {
    console.log('Language switched to:', language)
    setCurrentLanguage(language)

    // Set corresponding language pack based on language
    switch (language) {
      case 'zh':
      case 'zh-CN':
        setCurrentLocale(zhCN)
        break
      case 'en':
      case 'en-US':
        setCurrentLocale(enUS)
        break
      case 'ja':
      case 'ja-JP':
        setCurrentLocale(customJaJP) // Custom Japanese pack
        break
      default:
        setCurrentLocale(undefined) // Use default language pack
    }
  }

  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto py-8">
        <h1 className="text-3xl font-bold text-center mb-8">
          FlyCut Caption Internationalization Demo
        </h1>

        {/* External Language Controls */}
        <div className="mb-8 text-center space-y-4">
          <div>
            <h2 className="text-xl font-semibold mb-4">Language Switcher</h2>
            <div className="flex justify-center gap-4">
              <button
                className={`px-4 py-2 rounded ${currentLanguage === 'zh' ? 'bg-primary text-primary-foreground' : 'bg-secondary'}`}
                onClick={() => handleLanguageChange('zh')}
              >
                中文 (Built-in)
              </button>
              <button
                className={`px-4 py-2 rounded ${currentLanguage === 'en' ? 'bg-primary text-primary-foreground' : 'bg-secondary'}`}
                onClick={() => handleLanguageChange('en')}
              >
                English (Built-in)
              </button>
              <button
                className={`px-4 py-2 rounded ${currentLanguage === 'ja' ? 'bg-primary text-primary-foreground' : 'bg-secondary'}`}
                onClick={() => handleLanguageChange('ja')}
              >
                日本語 (Custom)
              </button>
            </div>
          </div>

          <div className="bg-muted p-4 rounded-lg">
            <p className="text-sm">
              <strong>Current Language:</strong> {currentLanguage}
            </p>
            <p className="text-sm">
              <strong>Language Pack Type:</strong> {currentLocale ? 'Custom Language Pack' : 'Built-in Language Pack'}
            </p>
          </div>
        </div>

        {/* FlyCut Caption Component */}
        <div className="border rounded-lg p-4">
          <h2 className="text-xl font-semibold mb-4">FlyCut Caption Component</h2>
          <FlyCutCaption
            config={{
              theme: 'auto',
              language: currentLanguage,
              enableThemeToggle: true,
              enableLanguageSelector: true  // Internal language selector will sync with external changes
            }}
            locale={currentLocale}
            onLanguageChange={handleLanguageChange}  // Sync internal changes back to external state
            onError={(error) => {
              console.error('Component error:', error)
            }}
            onProgress={(stage, progress) => {
              console.log(`Progress: ${stage} - ${progress}%`)
            }}
          />
        </div>
      </div>
    </div>
  )
}

Available Language Packs

| Language | Import | Description | |----------|---------|-------------| | Chinese (Simplified) | zhCN | 简体中文 | | English (US) | enUS | English (United States) | | Default | defaultLocale | Same as zhCN |

Language Pack API

// Import language pack utilities
import { LocaleProvider, useLocale, useTranslation } from '@flycut/caption-react'

// Use LocaleProvider for nested components
<Loca