[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"tool-x007xyz--flycut-caption":3,"similar-x007xyz--flycut-caption":70},{"id":4,"github_repo":5,"name":6,"description_en":7,"description_zh":8,"ai_summary_zh":9,"readme_en":10,"readme_zh":11,"quickstart_zh":12,"use_case_zh":13,"hero_image_url":14,"owner_login":15,"owner_name":16,"owner_avatar_url":17,"owner_bio":16,"owner_company":16,"owner_location":16,"owner_email":16,"owner_twitter":16,"owner_website":16,"owner_url":18,"languages":19,"stars":39,"forks":40,"last_commit_at":41,"license":42,"difficulty_score":43,"env_os":44,"env_gpu":45,"env_ram":44,"env_deps":46,"category_tags":56,"github_topics":16,"view_count":59,"oss_zip_url":16,"oss_zip_packed_at":16,"status":60,"created_at":61,"updated_at":62,"faqs":63,"releases":69},1545,"x007xyz\u002Fflycut-caption","flycut-caption","A complete video subtitle editing React component with AI-powered speech recognition and visual editing capabilities.","FlyCut Caption 是一款基于 React 构建的开源视频字幕编辑组件，旨在通过 AI 技术简化视频字幕的生成、编辑与剪辑流程。它主要解决了传统字幕制作中语音转写耗时久、时间轴对齐困难以及预览修改不便等痛点，让用户能在浏览器中一站式完成从识别到导出的全过程。\n\n这款工具非常适合前端开发者集成到自己的视频应用中，同时也适合需要高效处理多语言字幕的内容创作者、设计师及研究人员使用。其核心亮点在于集成了 Whisper 模型实现高精度的本地化语音识别，支持中、英等多种语言，且利用 Web Workers 技术在后台运行 AI 任务，确保界面操作流畅不卡顿。\n\nFlyCut Caption 提供了直观的可视化编辑界面，用户可轻松选取、删除或合并字幕片段，并实时预览带有字幕的视频效果，甚至能直接剪掉多余片段导出精简后的视频。此外，它还支持自定义字幕样式、多格式导出（SRT\u002FJSON\u002F视频）以及完善的国际化设计。凭借现代化的技术栈（React 19 + TypeScript + Vite），FlyCut Caption 不仅功能强大，更具备优秀的可扩展性与响应式体验，是打造智能视频编辑功","FlyCut Caption 是一款基于 React 构建的开源视频字幕编辑组件，旨在通过 AI 技术简化视频字幕的生成、编辑与剪辑流程。它主要解决了传统字幕制作中语音转写耗时久、时间轴对齐困难以及预览修改不便等痛点，让用户能在浏览器中一站式完成从识别到导出的全过程。\n\n这款工具非常适合前端开发者集成到自己的视频应用中，同时也适合需要高效处理多语言字幕的内容创作者、设计师及研究人员使用。其核心亮点在于集成了 Whisper 模型实现高精度的本地化语音识别，支持中、英等多种语言，且利用 Web Workers 技术在后台运行 AI 任务，确保界面操作流畅不卡顿。\n\nFlyCut Caption 提供了直观的可视化编辑界面，用户可轻松选取、删除或合并字幕片段，并实时预览带有字幕的视频效果，甚至能直接剪掉多余片段导出精简后的视频。此外，它还支持自定义字幕样式、多格式导出（SRT\u002FJSON\u002F视频）以及完善的国际化设计。凭借现代化的技术栈（React 19 + TypeScript + Vite），FlyCut Caption 不仅功能强大，更具备优秀的可扩展性与响应式体验，是打造智能视频编辑功能的理想选择。","# FlyCut Caption - AI-Powered Video Subtitle Editing Tool\n\n\u003Cdiv align=\"center\">\n\n![FlyCut Caption](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fx007xyz_flycut-caption_readme_273897b3818a.png)\n\nA powerful AI-driven video subtitle editing tool focused on intelligent subtitle generation, editing, and video clipping.\n\n[English](README.md) | [中文](README.zh.md)\n\n\u003C\u002Fdiv>\n\n## ✨ Features\n\n### 🎯 Core Features\n- **🎤 Intelligent Speech Recognition**: High-precision speech-to-text based on Whisper model, supporting multiple languages\n- **✂️ Visual Subtitle Editing**: Intuitive subtitle segment selection and deletion interface\n- **🎬 Real-time Video Preview**: Video player synchronized with subtitles, supporting interval playback\n- **📤 Multi-format Export**: Support for SRT, JSON subtitle formats and video file export\n- **🎨 Subtitle Style Customization**: Custom subtitle fonts, colors, positions and other styles\n- **🌐 Internationalization Support**: Componentized internationalization design, supporting Chinese, English, and custom language packs (such as Japanese examples)\n\n### 🔧 Technical Features\n- **⚡ Modern Tech Stack**: React 19 + TypeScript + Vite + Tailwind CSS\n- **🧠 Local AI Processing**: Using Hugging Face Transformers.js to run AI models locally in the browser\n- **🎯 Web Workers**: ASR processing runs in background threads without blocking the main interface\n- **📱 Responsive Design**: Modern interface adapted to different screen sizes\n- **🎪 Component Architecture**: Modular design, easy to maintain and extend\n\n## 🚀 Quick Start\n\n### Prerequisites\n- Node.js 18+\n- pnpm (recommended) or npm\n\n### Installation Steps\n\n1. **Clone the project**\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fx007xyz\u002Fflycut-caption.git\ncd flycut-caption\n```\n\n2. **Install dependencies**\n```bash\npnpm install\n```\n\n3. **Start development server**\n```bash\npnpm dev\n```\n\n4. **Open browser**\n```\nhttp:\u002F\u002Flocalhost:5173\n```\n\n### Build for Production\n```bash\n# Build project\npnpm build\n\n# Preview build result\npnpm preview\n```\n\n## 📋 User Guide\n\n### 1. Upload Video Files\n- Supported formats: MP4, WebM, AVI, MOV\n- Supported audio: MP3, WAV, OGG\n- Drag and drop files to upload area or click to select files\n\n![File Upload Interface](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fx007xyz_flycut-caption_readme_fa67680e03cb.png)\n\nAfter uploading, enter the ASR configuration interface:\n\n![ASR Setup Interface](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fx007xyz_flycut-caption_readme_b2395102748c.png)\n\n### 2. Generate Subtitles\n- Select recognition language (supports Chinese, English and other languages)\n- Click start recognition, AI will automatically generate timestamped subtitles\n- Recognition process runs in background without affecting interface operations\n\n![ASR Processing Interface](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fx007xyz_flycut-caption_readme_7a4c4f1c3215.png)\n\n### 3. Edit Subtitles\n- **Select segments**: Choose subtitle segments to delete from the list\n- **Batch operations**: Support select all, batch delete, undo delete operations\n- **Real-time preview**: Click subtitle segments to jump to corresponding time points\n- **History records**: Support undo\u002Fredo operations\n\n![Subtitle Editing Interface](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fx007xyz_flycut-caption_readme_273897b3818a.png)\n\n### 4. Video Preview\n- **Preview mode**: Automatically skip deleted segments to preview final result\n- **Keyboard shortcuts**:\n  - `Space`: Play\u002FPause\n  - `←\u002F→`: Rewind\u002FFast forward 5 seconds\n  - `Shift + ←\u002F→`: Rewind\u002FFast forward 10 seconds\n  - `↑\u002F↓`: Adjust volume\n  - `M`: Mute\u002FUnmute\n  - `F`: Fullscreen\n\n### 5. Subtitle Styling\n- **Font settings**: Font size, weight, color\n- **Position adjustment**: Subtitle display position, alignment\n- **Background style**: Background color, transparency, border\n- **Real-time preview**: WYSIWYG style adjustment\n\n### 6. Export Results\n- **Subtitle export**: SRT format (universal subtitle format), JSON format\n- **Video export**:\n  - Keep only non-deleted segments\n  - Option to burn subtitles into video\n  - Support different quality settings\n  - Multiple format outputs\n\n## 🌐 Internationalization Design\n\nFlyCut 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.\n\n### Built-in Language Packs\n\n```tsx\nimport { FlyCutCaption, zhCN, enUS } from '@flycut\u002Fcaption-react'\n\n\u002F\u002F Use built-in Chinese language pack\n\u003CFlyCutCaption\n  config={{ language: 'zh' }}\n  locale={zhCN}\n\u002F>\n\n\u002F\u002F Use built-in English language pack\n\u003CFlyCutCaption\n  config={{ language: 'en' }}\n  locale={enUS}\n\u002F>\n```\n\n### Custom Language Packs\n\n```tsx\nimport { FlyCutCaption, type FlyCutCaptionLocale } from '@flycut\u002Fcaption-react'\n\n\u002F\u002F Create custom language pack (Japanese example)\nconst customJaJP: FlyCutCaptionLocale = {\n  common: {\n    loading: '読み込み中...',\n    error: 'エラー',\n    success: '成功',\n    confirm: '確認',\n    cancel: 'キャンセル',\n    ok: 'OK',\n    \u002F\u002F ... more common translations\n  },\n  components: {\n    fileUpload: {\n      dragDropText: 'ビデオファイルをここにドラッグするか、クリックして選択',\n      selectFile: 'ファイルを選択',\n      supportedFormats: 'サポート形式：',\n      \u002F\u002F ... more component translations\n    },\n    subtitleEditor: {\n      title: '字幕エディター',\n      addSubtitle: '字幕を追加',\n      deleteSelected: '選択項目を削除',\n      \u002F\u002F ... more editor translations\n    },\n    \u002F\u002F ... other component translations\n  },\n  messages: {\n    fileUpload: {\n      uploadSuccess: 'ファイルアップロード成功',\n      uploadFailed: 'ファイルアップロード失敗',\n      \u002F\u002F ... more message translations\n    },\n    \u002F\u002F ... other message translations\n  }\n}\n\n\u002F\u002F Use custom language pack\n\u003CFlyCutCaption\n  config={{ language: 'ja' }}\n  locale={customJaJP}\n\u002F>\n```\n\n### Componentized Language Switching\n\nThe new componentized approach provides better language synchronization between external controls and internal components:\n\n```tsx\nimport { useState } from 'react'\nimport { FlyCutCaption, zhCN, enUS, type FlyCutCaptionLocale } from '@flycut\u002Fcaption-react'\n\nfunction App() {\n  const [currentLanguage, setCurrentLanguage] = useState('zh')\n  const [currentLocale, setCurrentLocale] = useState\u003CFlyCutCaptionLocale | undefined>(undefined)\n\n  const handleLanguageChange = (language: string) => {\n    console.log('Language switched to:', language)\n    setCurrentLanguage(language)\n\n    \u002F\u002F Set corresponding language pack based on language\n    switch (language) {\n      case 'zh':\n      case 'zh-CN':\n        setCurrentLocale(zhCN)\n        break\n      case 'en':\n      case 'en-US':\n        setCurrentLocale(enUS)\n        break\n      case 'ja':\n      case 'ja-JP':\n        setCurrentLocale(customJaJP) \u002F\u002F Custom Japanese pack\n        break\n      default:\n        setCurrentLocale(undefined) \u002F\u002F Use default language pack\n    }\n  }\n\n  return (\n    \u003Cdiv className=\"min-h-screen bg-background\">\n      \u003Cdiv className=\"container mx-auto py-8\">\n        \u003Ch1 className=\"text-3xl font-bold text-center mb-8\">\n          FlyCut Caption Internationalization Demo\n        \u003C\u002Fh1>\n\n        {\u002F* External Language Controls *\u002F}\n        \u003Cdiv className=\"mb-8 text-center space-y-4\">\n          \u003Cdiv>\n            \u003Ch2 className=\"text-xl font-semibold mb-4\">Language Switcher\u003C\u002Fh2>\n            \u003Cdiv className=\"flex justify-center gap-4\">\n              \u003Cbutton\n                className={`px-4 py-2 rounded ${currentLanguage === 'zh' ? 'bg-primary text-primary-foreground' : 'bg-secondary'}`}\n                onClick={() => handleLanguageChange('zh')}\n              >\n                中文 (Built-in)\n              \u003C\u002Fbutton>\n              \u003Cbutton\n                className={`px-4 py-2 rounded ${currentLanguage === 'en' ? 'bg-primary text-primary-foreground' : 'bg-secondary'}`}\n                onClick={() => handleLanguageChange('en')}\n              >\n                English (Built-in)\n              \u003C\u002Fbutton>\n              \u003Cbutton\n                className={`px-4 py-2 rounded ${currentLanguage === 'ja' ? 'bg-primary text-primary-foreground' : 'bg-secondary'}`}\n                onClick={() => handleLanguageChange('ja')}\n              >\n                日本語 (Custom)\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n\n          \u003Cdiv className=\"bg-muted p-4 rounded-lg\">\n            \u003Cp className=\"text-sm\">\n              \u003Cstrong>Current Language:\u003C\u002Fstrong> {currentLanguage}\n            \u003C\u002Fp>\n            \u003Cp className=\"text-sm\">\n              \u003Cstrong>Language Pack Type:\u003C\u002Fstrong> {currentLocale ? 'Custom Language Pack' : 'Built-in Language Pack'}\n            \u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n\n        {\u002F* FlyCut Caption Component *\u002F}\n        \u003Cdiv className=\"border rounded-lg p-4\">\n          \u003Ch2 className=\"text-xl font-semibold mb-4\">FlyCut Caption Component\u003C\u002Fh2>\n          \u003CFlyCutCaption\n            config={{\n              theme: 'auto',\n              language: currentLanguage,\n              enableThemeToggle: true,\n              enableLanguageSelector: true  \u002F\u002F Internal language selector will sync with external changes\n            }}\n            locale={currentLocale}\n            onLanguageChange={handleLanguageChange}  \u002F\u002F Sync internal changes back to external state\n            onError={(error) => {\n              console.error('Component error:', error)\n            }}\n            onProgress={(stage, progress) => {\n              console.log(`Progress: ${stage} - ${progress}%`)\n            }}\n          \u002F>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Available Language Packs\n\n| Language | Import | Description |\n|----------|---------|-------------|\n| Chinese (Simplified) | `zhCN` | 简体中文 |\n| English (US) | `enUS` | English (United States) |\n| Default | `defaultLocale` | Same as `zhCN` |\n\n### Language Pack API\n\n```tsx\n\u002F\u002F Import language pack utilities\nimport { LocaleProvider, useLocale, useTranslation } from '@flycut\u002Fcaption-react'\n\n\u002F\u002F Use LocaleProvider for nested components\n\u003CLocaleProvider language=\"zh\" locale={zhCN}>\n  \u003CYourComponent \u002F>\n\u003C\u002FLocaleProvider>\n\n\u002F\u002F Access language pack context\nconst { t, setLanguage, registerLocale } = useLocale()\n\n\u002F\u002F Register custom language pack\nregisterLocale('fr', frenchLocale)\n\n\u002F\u002F Programmatic language switching\nsetLanguage('fr')\n```\n\n📚 **Detailed internationalization guide**: See [INTERNATIONALIZATION.md](.\u002FINTERNATIONALIZATION.md) for complete documentation on language packs, custom localization and advanced i18n features.\n\n## 📚 Usage Guide\n\n### 1. Installation & Setup\n\n```bash\n# Install package\nnpm install @flycut\u002Fcaption-react\n\n# TypeScript projects don't need additional type packages\n# Type definitions are included\n```\n\n### 2. Import Styles\n\nThe component requires CSS styles to work properly:\n\n```tsx\nimport '@flycut\u002Fcaption-react\u002Fstyles'\n\u002F\u002F or specific CSS file\nimport '@flycut\u002Fcaption-react\u002Fdist\u002Fcaption-react.css'\n```\n\n### 3. Basic Integration\n\n```tsx\nimport { FlyCutCaption } from '@flycut\u002Fcaption-react'\nimport '@flycut\u002Fcaption-react\u002Fstyles'\n\nfunction VideoEditor() {\n  return (\n    \u003Cdiv className=\"video-editor-container\">\n      \u003CFlyCutCaption \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### 4. Event Handling\n\n```tsx\nimport { FlyCutCaption } from '@flycut\u002Fcaption-react'\n\nfunction VideoEditorWithEvents() {\n  const handleFileSelected = (file: File) => {\n    console.log('Selected file:', file.name, file.size)\n  }\n\n  const handleSubtitleGenerated = (subtitles: SubtitleChunk[]) => {\n    console.log('Generated subtitles:', subtitles.length)\n    \u002F\u002F Save subtitles to backend\n    saveSubtitles(subtitles)\n  }\n\n  const handleVideoProcessed = (blob: Blob, filename: string) => {\n    \u002F\u002F Handle processed video\n    const url = URL.createObjectURL(blob)\n    \u002F\u002F Download or upload to server\n    downloadFile(url, filename)\n  }\n\n  const handleError = (error: Error) => {\n    \u002F\u002F Handle errors gracefully\n    console.error('FlyCut Caption error:', error)\n    showErrorNotification(error.message)\n  }\n\n  return (\n    \u003CFlyCutCaption\n      onFileSelected={handleFileSelected}\n      onSubtitleGenerated={handleSubtitleGenerated}\n      onVideoProcessed={handleVideoProcessed}\n      onError={handleError}\n    \u002F>\n  )\n}\n```\n\n### 5. Configuration Options\n\n```tsx\nimport { FlyCutCaption } from '@flycut\u002Fcaption-react'\n\nfunction ConfiguredEditor() {\n  const config = {\n    \u002F\u002F Theme settings\n    theme: 'dark' as const,\n\n    \u002F\u002F Language settings\n    language: 'zh-CN',\n    asrLanguage: 'zh',\n\n    \u002F\u002F Feature toggles\n    enableDragDrop: true,\n    enableExport: true,\n    enableVideoProcessing: true,\n    enableThemeToggle: true,\n    enableLanguageSelector: true,\n\n    \u002F\u002F File constraints\n    maxFileSize: 1000, \u002F\u002F 1GB\n    supportedFormats: ['mp4', 'webm', 'mov']\n  }\n\n  return (\n    \u003CFlyCutCaption config={config} \u002F>\n  )\n}\n```\n\n### 6. Custom Styling\n\n```tsx\nimport { FlyCutCaption } from '@flycut\u002Fcaption-react'\nimport '.\u002Fcustom-styles.css'\n\nfunction StyledEditor() {\n  return (\n    \u003CFlyCutCaption\n      className=\"my-custom-editor\"\n      style={{\n        borderRadius: '8px',\n        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'\n      }}\n    \u002F>\n  )\n}\n```\n\n```css\n\u002F* custom-styles.css *\u002F\n.my-custom-editor {\n  --flycut-primary: #10b981;\n  --flycut-border-radius: 12px;\n}\n\n.my-custom-editor .subtitle-item {\n  border-radius: var(--flycut-border-radius);\n}\n```\n\n## 📖 API Reference\n\n### FlyCutCaptionProps\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `className` | `string` | `undefined` | Custom CSS class name |\n| `style` | `CSSProperties` | `undefined` | Custom inline styles |\n| `config` | `FlyCutCaptionConfig` | `defaultConfig` | Component configuration |\n| `locale` | `FlyCutCaptionLocale` | `undefined` | Custom language pack |\n| `onReady` | `() => void` | `undefined` | Called when component is ready |\n| `onFileSelected` | `(file: File) => void` | `undefined` | Called when a file is selected |\n| `onSubtitleGenerated` | `(subtitles: SubtitleChunk[]) => void` | `undefined` | Called when subtitles are generated |\n| `onSubtitleChanged` | `(subtitles: SubtitleChunk[]) => void` | `undefined` | Called when subtitles are changed |\n| `onVideoProcessed` | `(blob: Blob, filename: string) => void` | `undefined` | Called when video processing is complete |\n| `onExportComplete` | `(blob: Blob, filename: string) => void` | `undefined` | Called when export is complete |\n| `onError` | `(error: Error) => void` | `undefined` | Called when an error occurs |\n| `onProgress` | `(stage: string, progress: number) => void` | `undefined` | Called to report progress updates |\n| `onLanguageChange` | `(language: string) => void` | `undefined` | Called when language changes |\n\n### FlyCutCaptionConfig\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `theme` | `'light' \\| 'dark' \\| 'auto'` | `'auto'` | Theme mode |\n| `language` | `string` | `'zh-CN'` | Interface language |\n| `asrLanguage` | `string` | `'auto'` | ASR recognition language |\n| `enableDragDrop` | `boolean` | `true` | Enable drag and drop file upload |\n| `enableExport` | `boolean` | `true` | Enable export functionality |\n| `enableVideoProcessing` | `boolean` | `true` | Enable video processing functionality |\n| `enableThemeToggle` | `boolean` | `true` | Enable theme toggle button |\n| `enableLanguageSelector` | `boolean` | `true` | Enable language selector |\n| `maxFileSize` | `number` | `500` | Maximum file size in MB |\n| `supportedFormats` | `string[]` | `['mp4', 'webm', 'avi', 'mov', 'mp3', 'wav', 'ogg']` | Supported file formats |\n\n## 🎨 Styling\n\nThe component comes with built-in styles that you need to import:\n\n```tsx\nimport '@flycut\u002Fcaption-react\u002Fstyles'\n```\n\nYou can also customize the appearance by:\n\n1. **CSS Custom Properties**: Override CSS variables for colors and spacing\n2. **Custom CSS Classes**: Use the `className` prop to apply custom styles\n3. **Theme Configuration**: Use the `theme` config option for light\u002Fdark modes\n\n### CSS Variables\n\n```css\n:root {\n  --flycut-primary: #3b82f6;\n  --flycut-background: #ffffff;\n  --flycut-foreground: #1f2937;\n  --flycut-muted: #f3f4f6;\n  --flycut-border: #e5e7eb;\n}\n\n.dark {\n  --flycut-background: #111827;\n  --flycut-foreground: #f9fafb;\n  --flycut-muted: #374151;\n  --flycut-border: #4b5563;\n}\n```\n\n## 🏗️ Project Architecture\n\n### Tech Stack\n- **Frontend Framework**: React 19 with Hooks\n- **Type Checking**: TypeScript 5.8\n- **Build Tool**: Vite 7.1\n- **Styling Solution**: Tailwind CSS 4.1 + Shadcn\u002Fui\n- **State Management**: Zustand + React Context\n- **AI Model**: Hugging Face Transformers.js\n- **Video Processing**: WebAV\n- **Internationalization**: react-i18next\n\n### Project Structure\n```\nsrc\u002F\n├── components\u002F          # UI Components\n│   ├── FileUpload\u002F     # File upload component\n│   ├── VideoPlayer\u002F    # Video player\n│   ├── SubtitleEditor\u002F # Subtitle editor\n│   ├── ProcessingPanel\u002F # Processing panel\n│   ├── ExportPanel\u002F    # Export panel\n│   └── ui\u002F             # Basic UI components\n├── hooks\u002F              # Custom Hooks\n├── services\u002F           # Business service layer\n│   ├── asrService.ts   # ASR speech recognition service\n│   └── UnifiedVideoProcessor.ts # Video processing service\n├── stores\u002F             # State management\n│   ├── appStore.ts     # Application global state\n│   ├── historyStore.ts # Subtitle history records\n│   └── themeStore.ts   # Theme state\n├── types\u002F              # TypeScript type definitions\n├── utils\u002F              # Utility functions\n├── workers\u002F            # Web Workers\n│   └── asrWorker.ts    # ASR processing worker thread\n└── locales\u002F            # Internationalization files\n```\n\n### Core Modules\n\n#### ASR Speech Recognition\n- Local speech recognition based on Whisper model\n- Web Workers background processing without blocking main thread\n- Support multiple languages and audio formats\n- Generate precise word-level timestamps\n\n#### Subtitle Editor\n- Visual subtitle segment management\n- Support batch selection and operations\n- Real-time video playback position synchronization\n- History records and undo\u002Fredo functionality\n\n#### Video Processing\n- Local video processing based on WebAV\n- Support interval clipping and merging\n- Subtitle burn-in functionality\n- Multiple output formats and quality options\n\n## 🛠️ Development Guide\n\n### Development Commands\n```bash\n# Start development server\npnpm dev\n\n# Type checking\npnpm run typecheck\n\n# Code linting\npnpm lint\n\n# Build project\npnpm build\n\n# Preview build\npnpm preview\n```\n\n### Adding New Components\nProject uses Shadcn\u002Fui component library:\n```bash\npnpm dlx shadcn@latest add \u003Ccomponent-name>\n```\n\n### Code Standards\n- TypeScript strict mode\n- ESLint + React related rules\n- Functional components + Hooks\n- Componentized and modular design\n\n## 🎬 Video Processing\n\nThe component supports various video processing features:\n\n### Supported Formats\n\n- **Video**: MP4, WebM, AVI, MOV\n- **Audio**: MP3, WAV, OGG\n\n### Processing Options\n\n- **Quality**: Low, Medium, High\n- **Format**: MP4, WebM\n- **Subtitle Processing**: Burn-in, Separate file\n- **Audio Preservation**: Enabled by default\n\n## 📱 Browser Support\n\n- **Chrome** 88+\n- **Firefox** 78+\n- **Safari** 14+\n- **Edge** 88+\n\n## 💡 Examples & Best Practices\n\n### Complete React Application\n\n```tsx\nimport React, { useState, useCallback } from 'react'\nimport { FlyCutCaption, zhCN, enUS, type FlyCutCaptionLocale } from '@flycut\u002Fcaption-react'\nimport '@flycut\u002Fcaption-react\u002Fstyles'\n\nfunction VideoEditorApp() {\n  const [language, setLanguage] = useState\u003C'zh' | 'en'>('zh')\n  const [subtitles, setSubtitles] = useState([])\n  const [isProcessing, setIsProcessing] = useState(false)\n\n  const locale = language === 'zh' ? zhCN : enUS\n\n  const handleLanguageChange = useCallback((newLang: string) => {\n    setLanguage(newLang as 'zh' | 'en')\n  }, [])\n\n  const handleSubtitleGenerated = useCallback((newSubtitles) => {\n    setSubtitles(newSubtitles)\n    \u002F\u002F Auto-save to local storage\n    localStorage.setItem('flycut-subtitles', JSON.stringify(newSubtitles))\n  }, [])\n\n  const handleProgress = useCallback((stage: string, progress: number) => {\n    setIsProcessing(progress \u003C 100)\n  }, [])\n\n  return (\n    \u003Cdiv className=\"min-h-screen bg-gray-50\">\n      \u003Cheader className=\"bg-white shadow-sm\">\n        \u003Cdiv className=\"max-w-7xl mx-auto px-4 py-4\">\n          \u003Cdiv className=\"flex justify-between items-center\">\n            \u003Ch1 className=\"text-2xl font-bold\">Video Editor\u003C\u002Fh1>\n            \u003Cdiv className=\"flex gap-2\">\n              \u003Cbutton\n                onClick={() => handleLanguageChange('zh')}\n                className={language === 'zh' ? 'btn-primary' : 'btn-secondary'}\n              >\n                中文\n              \u003C\u002Fbutton>\n              \u003Cbutton\n                onClick={() => handleLanguageChange('en')}\n                className={language === 'en' ? 'btn-primary' : 'btn-secondary'}\n              >\n                English\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fheader>\n\n      \u003Cmain className=\"max-w-7xl mx-auto px-4 py-8\">\n        \u003Cdiv className=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n          \u003CFlyCutCaption\n            config={{\n              theme: 'auto',\n              language,\n              enableDragDrop: true,\n              enableExport: true,\n              maxFileSize: 1000\n            }}\n            locale={locale}\n            onLanguageChange={handleLanguageChange}\n            onSubtitleGenerated={handleSubtitleGenerated}\n            onProgress={handleProgress}\n            onError={(error) => {\n              console.error('Error:', error)\n              \u002F\u002F Show user-friendly error message\n              alert('An error occurred during processing, please try again')\n            }}\n          \u002F>\n        \u003C\u002Fdiv>\n\n        {isProcessing && (\n          \u003Cdiv className=\"mt-4 text-center\">\n            \u003Cdiv className=\"inline-flex items-center px-4 py-2 bg-blue-100 rounded-lg\">\n              \u003Cdiv className=\"animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 mr-2\">\u003C\u002Fdiv>\n              Processing, please wait...\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        )}\n\n        {subtitles.length > 0 && (\n          \u003Cdiv className=\"mt-8 bg-white rounded-lg shadow p-6\">\n            \u003Ch2 className=\"text-lg font-semibold mb-4\">Generated Subtitles ({subtitles.length} items)\u003C\u002Fh2>\n            \u003Cdiv className=\"text-sm text-gray-600\">\n              Subtitles have been automatically saved to local storage\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        )}\n      \u003C\u002Fmain>\n    \u003C\u002Fdiv>\n  )\n}\n\nexport default VideoEditorApp\n```\n\n### Next.js Integration\n\n```tsx\n\u002F\u002F pages\u002Feditor.tsx\nimport dynamic from 'next\u002Fdynamic'\nimport { useState } from 'react'\n\n\u002F\u002F Dynamically import to avoid SSR issues\nconst FlyCutCaption = dynamic(\n  () => import('@flycut\u002Fcaption-react').then(mod => mod.FlyCutCaption),\n  { ssr: false }\n)\n\nexport default function EditorPage() {\n  return (\n    \u003Cdiv style={{ height: '100vh' }}>\n      \u003CFlyCutCaption\n        config={{\n          theme: 'auto',\n          language: 'zh'\n        }}\n        onVideoProcessed={(blob, filename) => {\n          \u002F\u002F Handle video processing result\n          const url = URL.createObjectURL(blob)\n          window.open(url, '_blank')\n        }}\n      \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Best Practices\n\n1. **Always import styles**: The component requires CSS to work properly\n2. **Handle errors gracefully**: Implement proper error boundaries and user feedback\n3. **Optimize for performance**: Use dynamic imports for SSR applications\n4. **Provide user feedback**: Show loading states and progress indicators\n5. **Responsive design**: Ensure your container has appropriate height\u002Fwidth\n6. **Accessibility**: The component includes ARIA labels and keyboard navigation\n7. **Memory management**: Clean up blob URLs when components unmount\n\n## 🔧 Development\n\n### Prerequisites\n\n- Node.js 18+\n- pnpm 8+\n\n### Setup\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fx007xyz\u002Fflycut-caption.git\ncd flycut-caption\npnpm install\n```\n\n### Development\n\n```bash\n# Start development server\npnpm dev\n\n# Build library\npnpm run build:lib\n\n# Build demo\npnpm run build:demo\n\n# Lint code\npnpm lint\n\n# Run test app\ncd test-app && pnpm dev\n```\n\n## 🤝 Contributing\n\nWe welcome contributions of all kinds!\n\n### How to Contribute\n1. Fork this project\n2. Create feature branch (`git checkout -b feature\u002FAmazingFeature`)\n3. Commit changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to branch (`git push origin feature\u002FAmazingFeature`)\n5. Create Pull Request\n\n### Contribution Types\n- 🐛 Bug fixes\n- ✨ New feature development\n- 📝 Documentation improvements\n- 🎨 UI\u002FUX optimizations\n- ⚡ Performance optimizations\n- 🌐 Internationalization translations\n\n## 📝 License\n\nThis project is licensed under the MIT License with additional terms:\n\n- ✅ **Allowed**: Personal, educational, commercial use\n- ✅ **Allowed**: Modification, distribution, creating derivative works\n- ❌ **Prohibited**: Removing or modifying logos, watermarks, brand elements in the software interface\n- ❌ **Prohibited**: Hiding or tampering with attribution statements\n\nTo remove brand elements, please contact FlyCut Team for explicit written permission.\n\nSee [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- [Hugging Face](https:\u002F\u002Fhuggingface.co\u002F) - Excellent Transformers.js library\n- [OpenAI Whisper](https:\u002F\u002Fopenai.com\u002Fresearch\u002Fwhisper) - Powerful speech recognition model\n- [Shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com\u002F) - Elegant UI component library\n- [WebAV](https:\u002F\u002Fgithub.com\u002Fhughfenghen\u002FWebAV) - Powerful web audio\u002Fvideo processing library\n\n## 📞 Support\n\n- 📧 Email: x007xyzabc@gmail.com\n- 🐛 Issues: [GitHub Issues](https:\u002F\u002Fgithub.com\u002Fx007xyz\u002Fflycut-caption\u002Fissues)\n- 📖 Documentation: [API Docs](https:\u002F\u002Fflycut.dev\u002Fdocs)\n\n---\n\n\u003Cdiv align=\"center\">\n\n**If this project helps you, please give us a ⭐ Star!**\n\nMade with ❤️ by FlyCut Team\n\n\u003C\u002Fdiv>\n\n","# FlyCut Caption - 基于AI的视频字幕编辑工具\n\n\u003Cdiv align=\"center\">\n\n![FlyCut Caption](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fx007xyz_flycut-caption_readme_273897b3818a.png)\n\n一款强大的AI驱动视频字幕编辑工具，专注于智能字幕生成、编辑和视频剪辑。\n\n[English](README.md) | [中文](README.zh.md)\n\n\u003C\u002Fdiv>\n\n## ✨ 功能\n\n### 🎯 核心功能\n- **🎤 智能语音识别**: 基于Whisper模型的高精度语音转文字，支持多种语言\n- **✂️ 可视化字幕编辑**: 直观的字幕片段选择与删除界面\n- **🎬 实时视频预览**: 与字幕同步的视频播放器，支持间隔播放\n- **📤 多格式导出**: 支持SRT、JSON字幕格式及视频文件导出\n- **🎨 字幕样式自定义**: 自定义字幕字体、颜色、位置等样式\n- **🌐 国际化支持**: 组件化国际化设计，支持中文、英文以及自定义语言包（如日语示例）\n\n### 🔧 技术特性\n- **⚡ 现代技术栈**: React 19 + TypeScript + Vite + Tailwind CSS\n- **🧠 本地AI处理**: 使用Hugging Face Transformers.js在浏览器端本地运行AI模型\n- **🎯 Web Workers**: ASR处理在后台线程中运行，不会阻塞主界面\n- **📱 响应式设计**: 现代化界面适配不同屏幕尺寸\n- **🎪 组件化架构**: 模块化设计，易于维护和扩展\n\n## 🚀 快速开始\n\n### 前置条件\n- Node.js 18+\n- pnpm（推荐）或 npm\n\n### 安装步骤\n\n1. **克隆项目**\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fx007xyz\u002Fflycut-caption.git\ncd flycut-caption\n```\n\n2. **安装依赖**\n```bash\npnpm install\n```\n\n3. **启动开发服务器**\n```bash\npnpm dev\n```\n\n4. **打开浏览器**\n```\nhttp:\u002F\u002Flocalhost:5173\n```\n\n### 生产环境构建\n```bash\n# 构建项目\npnpm build\n\n# 预览构建结果\npnpm preview\n```\n\n## 📋 用户指南\n\n### 1. 上传视频文件\n- 支持格式：MP4、WebM、AVI、MOV\n- 支持音频：MP3、WAV、OGG\n- 将文件拖拽至上传区域或点击选择文件\n\n![文件上传界面](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fx007xyz_flycut-caption_readme_fa67680e03cb.png)\n\n上传完成后，进入ASR配置界面：\n\n![ASR设置界面](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fx007xyz_flycut-caption_readme_b2395102748c.png)\n\n### 2. 生成字幕\n- 选择识别语言（支持中文、英文及其他语言）\n- 点击开始识别，AI将自动生成功能时间戳的字幕\n- 识别过程在后台运行，不影响界面操作\n\n![ASR处理界面](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fx007xyz_flycut-caption_readme_7a4c4f1c3215.png)\n\n### 3. 编辑字幕\n- **选择片段**: 从列表中选择要删除的字幕片段\n- **批量操作**: 支持全选、批量删除、撤销删除等操作\n- **实时预览**: 点击字幕片段可跳转到对应时间点\n- **历史记录**: 支持撤销\u002F重做操作\n\n![字幕编辑界面](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fx007xyz_flycut-caption_readme_273897b3818a.png)\n\n### 4. 视频预览\n- **预览模式**: 自动跳过已删除的片段以预览最终效果\n- **快捷键**:\n  - `Space`: 播放\u002F暂停\n  - `←\u002F→`: 倒退\u002F快进5秒\n  - `Shift + ←\u002F→`: 倒退\u002F快进10秒\n  - `↑\u002F↓`: 调节音量\n  - `M`: 静音\u002F取消静音\n  - `F`: 全屏\n\n### 5. 字幕样式\n- **字体设置**: 字体大小、粗细、颜色\n- **位置调整**: 字幕显示位置、对齐方式\n- **背景样式**: 背景颜色、透明度、边框\n- **实时预览**: 所见即所得的样式调整\n\n### 6. 导出结果\n- **字幕导出**: SRT格式（通用字幕格式）、JSON格式\n- **视频导出**:\n  - 仅保留未删除的片段\n  - 可选择将字幕内嵌至视频\n  - 支持不同质量设置\n  - 多种格式输出\n\n## 🌐 国际化设计\n\nFlyCut Caption采用组件化国际化设计，支持灵活的语言包管理和实时语言切换。该组件能够自动同步外部语言变化与内部UI组件。\n\n### 内置语言包\n\n```tsx\nimport { FlyCutCaption, zhCN, enUS } from '@flycut\u002Fcaption-react'\n\n\u002F\u002F 使用内置中文语言包\n\u003CFlyCutCaption\n  config={{ language: 'zh' }}\n  locale={zhCN}\n\u002F>\n\n\u002F\u002F 使用内置英文语言包\n\u003CFlyCutCaption\n  config={{ language: 'en' }}\n  locale={enUS}\n\u002F>\n```\n\n### 自定义语言包\n\n```tsx\nimport { FlyCutCaption, type FlyCutCaptionLocale } from '@flycut\u002Fcaption-react'\n\n\u002F\u002F 创建自定义语言包（日语示例）\nconst customJaJP: FlyCutCaptionLocale = {\n  common: {\n    loading: '読み込み中...',\n    error: 'エラー',\n    success: '成功',\n    confirm: '確認',\n    cancel: 'キャンセル',\n    ok: 'OK',\n    \u002F\u002F ... 更多常用翻译\n  },\n  components: {\n    fileUpload: {\n      dragDropText: 'ビデオファイルをここにドラッグするか、クリックして選択',\n      selectFile: 'ファイルを選択',\n      supportedFormats: 'サポート形式：',\n      \u002F\u002F ... 更多组件翻译\n    },\n    subtitleEditor: {\n      title: '字幕エディター',\n      addSubtitle: '字幕を追加',\n      deleteSelected: '選択項目を削除',\n      \u002F\u002F ... 更多编辑器翻译\n    },\n    \u002F\u002F ... 其他组件翻译\n  },\n  messages: {\n    fileUpload: {\n      uploadSuccess: 'ファイルアップロード成功',\n      uploadFailed: 'ファイルアップロード失敗',\n      \u002F\u002F ... 更多消息翻译\n    },\n    \u002F\u002F ... 其他消息翻译\n  }\n}\n\n\u002F\u002F 使用自定义语言包\n\u003CFlyCutCaption\n  config={{ language: 'ja' }}\n  locale={customJaJP}\n\u002F>\n```\n\n### 组件化语言切换\n\n新的组件化方法在外置控件与内部组件之间实现了更好的语言同步：\n\n```tsx\nimport { useState } from 'react'\nimport { FlyCutCaption, zhCN, enUS, type FlyCutCaptionLocale } from '@flycut\u002Fcaption-react'\n\nfunction App() {\n  const [currentLanguage, setCurrentLanguage] = useState('zh')\n  const [currentLocale, setCurrentLocale] = useState\u003CFlyCutCaptionLocale | undefined>(undefined)\n\n  const handleLanguageChange = (language: string) => {\n    console.log('Language switched to:', language)\n    setCurrentLanguage(language)\n\n    \u002F\u002F Set corresponding language pack based on language\n    switch (language) {\n      case 'zh':\n      case 'zh-CN':\n        setCurrentLocale(zhCN)\n        break\n      case 'en':\n      case 'en-US':\n        setCurrentLocale(enUS)\n        break\n      case 'ja':\n      case 'ja-JP':\n        setCurrentLocale(customJaJP) \u002F\u002F Custom Japanese pack\n        break\n      default:\n        setCurrentLocale(undefined) \u002F\u002F Use default language pack\n    }\n  }\n\n  return (\n    \u003Cdiv className=\"min-h-screen bg-background\">\n      \u003Cdiv className=\"container mx-auto py-8\">\n        \u003Ch1 className=\"text-3xl font-bold text-center mb-8\">\n          FlyCut Caption 国际化演示\n        \u003C\u002Fh1>\n\n        {\u002F* External Language Controls *\u002F}\n        \u003Cdiv className=\"mb-8 text-center space-y-4\">\n          \u003Cdiv>\n            \u003Ch2 className=\"text-xl font-semibold mb-4\">语言切换器\u003C\u002Fh2>\n            \u003Cdiv className=\"flex justify-center gap-4\">\n              \u003Cbutton\n                className={`px-4 py-2 rounded ${currentLanguage === 'zh' ? 'bg-primary text-primary-foreground' : 'bg-secondary'}`}\n                onClick={() => handleLanguageChange('zh')}\n              >\n                中文 (内置)\n              \u003C\u002Fbutton>\n              \u003Cbutton\n                className={`px-4 py-2 rounded ${currentLanguage === 'en' ? 'bg-primary text-primary-foreground' : 'bg-secondary'}`}\n                onClick={() => handleLanguageChange('en')}\n              >\n                English (内置)\n              \u003C\u002Fbutton>\n              \u003Cbutton\n                className={`px-4 py-2 rounded ${currentLanguage === 'ja' ? 'bg-primary text-primary-foreground' : 'bg-secondary'}`}\n                onClick={() => handleLanguageChange('ja')}\n              >\n                日本語 (自定义)\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n\n          \u003Cdiv className=\"bg-muted p-4 rounded-lg\">\n            \u003Cp className=\"text-sm\">\n              \u003Cstrong>当前语言：\u003C\u002Fstrong> {currentLanguage}\n            \u003C\u002Fp>\n            \u003Cp className=\"text-sm\">\n              \u003Cstrong>语言包类型：\u003C\u002Fstrong> {currentLocale ? '自定义语言包' : '内置语言包'}\n            \u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n\n        {\u002F* FlyCut Caption Component *\u002F}\n        \u003Cdiv className=\"border rounded-lg p-4\">\n          \u003Ch2 className=\"text-xl font-semibold mb-4\">FlyCut Caption 组件\u003C\u002Fh2>\n          \u003CFlyCutCaption\n            config={{\n              theme: 'auto',\n              language: currentLanguage,\n              enableThemeToggle: true,\n              enableLanguageSelector: true  \u002F\u002F Internal language selector will sync with external changes\n            }}\n            locale={currentLocale}\n            onLanguageChange={handleLanguageChange}  \u002F\u002F Sync internal changes back to external state\n            onError={(error) => {\n              console.error('Component error:', error)\n            }}\n            onProgress={(stage, progress) => {\n              console.log(`Progress: ${stage} - ${progress}%`)\n            }}\n          \u002F>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### 可用语言包\n\n| 语言       | 导入           | 描述               |\n|------------|----------------|--------------------|\n| 中文（简体） | `zhCN`         | 简体中文           |\n| 英语（美国） | `enUS`         | English (United States) |\n| 默认       | `defaultLocale` | 与 `zhCN` 相同     |\n\n### 语言包 API\n\n```tsx\n\u002F\u002F Import language pack utilities\nimport { LocaleProvider, useLocale, useTranslation } from '@flycut\u002Fcaption-react'\n\n\u002F\u002F Use LocaleProvider for nested components\n\u003CLocaleProvider language=\"zh\" locale={zhCN}>\n  \u003CYourComponent \u002F>\n\u003C\u002FLocaleProvider>\n\n\u002F\u002F Access language pack context\nconst { t, setLanguage, registerLocale } = useLocale()\n\n\u002F\u002F Register custom language pack\nregisterLocale('fr', frenchLocale)\n\n\u002F\u002F Programmatic language switching\nsetLanguage('fr')\n```\n\n📚 **详细国际化指南**：请参阅 [INTERNATIONALIZATION.md](.\u002FINTERNATIONALIZATION.md)，了解关于语言包、自定义本地化及高级 i18n 功能的完整文档。\n\n## 📚 使用指南\n\n### 1. 安装与设置\n\n```bash\n# Install package\nnpm install @flycut\u002Fcaption-react\n\n# TypeScript projects don't need additional type packages\n# Type definitions are included\n```\n\n### 2. 导入样式\n\n该组件需要 CSS 样式才能正常工作：\n\n```tsx\nimport '@flycut\u002Fcaption-react\u002Fstyles'\n\u002F\u002F or specific CSS file\nimport '@flycut\u002Fcaption-react\u002Fdist\u002Fcaption-react.css'\n```\n\n### 3. 基本集成\n\n```tsx\nimport { FlyCutCaption } from '@flycut\u002Fcaption-react'\nimport '@flycut\u002Fcaption-react\u002Fstyles'\n\nfunction VideoEditor() {\n  return (\n    \u003Cdiv className=\"video-editor-container\">\n      \u003CFlyCutCaption \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### 4. 事件处理\n\n```tsx\nimport { FlyCutCaption } from '@flycut\u002Fcaption-react'\n\nfunction VideoEditorWithEvents() {\n  const handleFileSelected = (file: File) => {\n    console.log('Selected file:', file.name, file.size)\n  }\n\n  const handleSubtitleGenerated = (subtitles: SubtitleChunk[]) => {\n    console.log('Generated subtitles:', subtitles.length)\n    \u002F\u002F Save subtitles to backend\n    saveSubtitles(subtitles)\n  }\n\n  const handleVideoProcessed = (blob: Blob, filename: string) => {\n    \u002F\u002F Handle processed video\n    const url = URL.createObjectURL(blob)\n    \u002F\u002F Download or upload to server\n    downloadFile(url, filename)\n  }\n\n  const handleError = (error: Error) => {\n    \u002F\u002F Handle errors gracefully\n    console.error('FlyCut Caption error:', error)\n    showErrorNotification(error.message)\n  }\n\n  return (\n    \u003CFlyCutCaption\n      onFileSelected={handleFileSelected}\n      onSubtitleGenerated={handleSubtitleGenerated}\n      onVideoProcessed={handleVideoProcessed}\n      onError={handleError}\n    \u002F>\n  )\n}\n```\n\n### 5. 配置选项\n\n```tsx\nimport { FlyCutCaption } from '@flycut\u002Fcaption-react'\n\nfunction ConfiguredEditor() {\n  const config = {\n    \u002F\u002F Theme settings\n    theme: 'dark' as const,\n\n    \u002F\u002F Language settings\n    language: 'zh-CN',\n    asrLanguage: 'zh',\n\n    \u002F\u002F Feature toggles\n    enableDragDrop: true,\n    enableExport: true,\n    enableVideoProcessing: true,\n    enableThemeToggle: true,\n    enableLanguageSelector: true,\n\n    \u002F\u002F File constraints\n    maxFileSize: 1000, \u002F\u002F 1GB\n    supportedFormats: ['mp4', 'webm', 'mov']\n  }\n\n  return (\n    \u003CFlyCutCaption config={config} \u002F>\n  )\n}\n```\n\n### 6. 自定义样式\n\n```tsx\nimport { FlyCutCaption } from '@flycut\u002Fcaption-react'\nimport '.\u002Fcustom-styles.css'\n\nfunction StyledEditor() {\n  return (\n    \u003CFlyCutCaption\n      className=\"my-custom-editor\"\n      style={{\n        borderRadius: '8px',\n        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'\n      }}\n    \u002F>\n  )\n}\n```\n\n```css\n\u002F* custom-styles.css *\u002F\n.my-custom-editor {\n  --flycut-primary: #10b981;\n  --flycut-border-radius: 12px;\n}\n\n.my-custom-editor .subtitle-item {\n  border-radius: var(--flycut-border-radius);\n}\n```\n\n## 📖 API 参考\n\n### FlyCutCaptionProps\n\n| 属性 | 类型 | 默认值 | 描述 |\n|----------|------|---------|-------------|\n| `className` | `string` | `undefined` | 自定义 CSS 类名 |\n| `style` | `CSSProperties` | `undefined` | 自定义内联样式 |\n| `config` | `FlyCutCaptionConfig` | `defaultConfig` | 组件配置 |\n| `locale` | `FlyCutCaptionLocale` | `undefined` | 自定义语言包 |\n| `onReady` | `() => void` | `undefined` | 组件准备就绪时调用 |\n| `onFileSelected` | `(file: File) => void` | `undefined` | 文件选择时调用 |\n| `onSubtitleGenerated` | `(subtitles: SubtitleChunk[]) => void` | `undefined` | 字幕生成时调用 |\n| `onSubtitleChanged` | `(subtitles: SubtitleChunk[]) => void` | `undefined` | 字幕更改时调用 |\n| `onVideoProcessed` | `(blob: Blob, filename: string) => void` | `undefined` | 视频处理完成时调用 |\n| `onExportComplete` | `(blob: Blob, filename: string) => void` | `undefined` | 导出完成时调用 |\n| `onError` | `(error: Error) => void` | `undefined` | 发生错误时调用 |\n| `onProgress` | `(stage: string, progress: number) => void` | `undefined` | 进度更新时调用 |\n| `onLanguageChange` | `(language: string) => void` | `undefined` | 语言切换时调用 |\n\n### FlyCutCaptionConfig\n\n| 属性 | 类型 | 默认值 | 描述 |\n|----------|------|---------|-------------|\n| `theme` | `'light' \\| 'dark' \\| 'auto'` | `'auto'` | 主题模式 |\n| `language` | `string` | `'zh-CN'` | 界面语言 |\n| `asrLanguage` | `string` | `'auto'` | ASR 识别语言 |\n| `enableDragDrop` | `boolean` | `true` | 启用拖放上传文件功能 |\n| `enableExport` | `boolean` | `true` | 启用导出功能 |\n| `enableVideoProcessing` | `boolean` | `true` | 启用视频处理功能 |\n| `enableThemeToggle` | `boolean` | `true` | 启用主题切换按钮 |\n| `enableLanguageSelector` | `boolean` | `true` | 启用语言选择器 |\n| `maxFileSize` | `number` | `500` | 最大文件大小，单位为 MB |\n| `supportedFormats` | `string[]` | `['mp4', 'webm', 'avi', 'mov', 'mp3', 'wav', 'ogg']` | 支持的文件格式 |\n\n## 🎨 样式\n\n该组件自带内置样式，需导入：\n\n```tsx\nimport '@flycut\u002Fcaption-react\u002Fstyles'\n```\n\n您还可以通过以下方式自定义外观：\n\n1. **CSS 自定义属性**：覆盖颜色和间距的 CSS 变量\n2. **自定义 CSS 类**：使用 `className` 属性应用自定义样式\n3. **主题配置**：使用 `theme` 配置选项设置浅色\u002F深色模式\n\n### CSS 变量\n\n```css\n:root {\n  --flycut-primary: #3b82f6;\n  --flycut-background: #ffffff;\n  --flycut-foreground: #1f2937;\n  --flycut-muted: #f3f4f6;\n  --flycut-border: #e5e7eb;\n}\n\n.dark {\n  --flycut-background: #111827;\n  --flycut-foreground: #f9fafb;\n  --flycut-muted: #374151;\n  --flycut-border: #4b5563;\n}\n```\n\n## 🏗️ 项目架构\n\n### 技术栈\n- **前端框架**：React 19（带 Hooks）\n- **类型检查**：TypeScript 5.8\n- **构建工具**：Vite 7.1\n- **样式解决方案**：Tailwind CSS 4.1 + Shadcn\u002Fui\n- **状态管理**：Zustand + React Context\n- **AI 模型**：Hugging Face Transformers.js\n- **视频处理**：WebAV\n- **国际化**：react-i18next\n\n### 项目结构\n```\nsrc\u002F\n├── components\u002F          # UI 组件\n│   ├── FileUpload\u002F     # 文件上传组件\n│   ├── VideoPlayer\u002F    # 视频播放器\n│   ├── SubtitleEditor\u002F # 字幕编辑器\n│   ├── ProcessingPanel\u002F # 处理面板\n│   ├── ExportPanel\u002F    # 导出面板\n│   └── ui\u002F             # 基础 UI 组件\n├── hooks\u002F              # 自定义 Hooks\n├── services\u002F           # 业务服务层\n│   ├── asrService.ts   # ASR 语音识别服务\n│   └── UnifiedVideoProcessor.ts # 视频处理服务\n├── stores\u002F             # 状态管理\n│   ├── appStore.ts     # 应用程序全局状态\n│   ├── historyStore.ts # 字幕历史记录\n│   └── themeStore.ts   # 主题状态\n├── types\u002F              # TypeScript 类型定义\n├── utils\u002F              # 工具函数\n├── workers\u002F            # Web Workers\n│   └── asrWorker.ts    # ASR 处理工作线程\n└── locales\u002F            # 国际化文件\n```\n\n### 核心模块\n\n#### ASR 语音识别\n- 基于 Whisper 模型的本地语音识别\n- 使用 Web Workers 在后台处理，不阻塞主线程\n- 支持多种语言和音频格式\n- 生成精确的词级时间戳\n\n#### 字幕编辑器\n- 可视化的字幕片段管理\n- 支持批量选择和操作\n- 实时同步视频播放位置\n- 提供历史记录及撤销\u002F重做功能\n\n#### 视频处理\n- 基于 WebAV 的本地视频处理\n- 支持区间剪辑和合并\n- 字幕嵌入功能\n- 多种输出格式和质量选项\n\n## 🛠️ 开发指南\n\n### 开发命令\n```bash\n# 启动开发服务器\npnpm dev\n\n# 类型检查\npnpm run typecheck\n\n# 代码检查\npnpm lint\n\n# 构建项目\npnpm build\n\n# 预览构建\npnpm preview\n```\n\n### 添加新组件\n项目使用 Shadcn\u002Fui 组件库：\n```bash\npnpm dlx shadcn@latest add \u003Ccomponent-name>\n```\n\n### 代码规范\n- TypeScript 严格模式\n- ESLint + React 相关规则\n- 函数式组件 + Hooks\n- 组件化和模块化设计\n\n## 🎬 视频处理\n\n该组件支持多种视频处理功能：\n\n### 支持的格式\n\n- **视频**：MP4、WebM、AVI、MOV\n- **音频**：MP3、WAV、OGG\n\n### 处理选项\n\n- **质量**：低、中、高\n- **格式**：MP4、WebM\n- **字幕处理**：嵌入或单独文件\n- **音频保留**：默认启用\n\n## 💡 示例与最佳实践\n\n### 完整的 React 应用程序\n\n```tsx\nimport React, { useState, useCallback } from 'react'\nimport { FlyCutCaption, zhCN, enUS, type FlyCutCaptionLocale } from '@flycut\u002Fcaption-react'\nimport '@flycut\u002Fcaption-react\u002Fstyles'\n\nfunction VideoEditorApp() {\n  const [language, setLanguage] = useState\u003C'zh' | 'en'>('zh')\n  const [subtitles, setSubtitles] = useState([])\n  const [isProcessing, setIsProcessing] = useState(false)\n\n  const locale = language === 'zh' ? zhCN : enUS\n\n  const handleLanguageChange = useCallback((newLang: string) => {\n    setLanguage(newLang as 'zh' | 'en')\n  }, [])\n\n  const handleSubtitleGenerated = useCallback((newSubtitles) => {\n    setSubtitles(newSubtitles)\n    \u002F\u002F 自动保存到本地存储\n    localStorage.setItem('flycut-subtitles', JSON.stringify(newSubtitles))\n  }, [])\n\n  const handleProgress = useCallback((stage: string, progress: number) => {\n    setIsProcessing(progress \u003C 100)\n  }, [])\n\n  return (\n    \u003Cdiv className=\"min-h-screen bg-gray-50\">\n      \u003Cheader className=\"bg-white shadow-sm\">\n        \u003Cdiv className=\"max-w-7xl mx-auto px-4 py-4\">\n          \u003Cdiv className=\"flex justify-between items-center\">\n            \u003Ch1 className=\"text-2xl font-bold\">视频编辑器\u003C\u002Fh1>\n            \u003Cdiv className=\"flex gap-2\">\n              \u003Cbutton\n                onClick={() => handleLanguageChange('zh')}\n                className={language === 'zh' ? 'btn-primary' : 'btn-secondary'}\n              >\n                中文\n              \u003C\u002Fbutton>\n              \u003Cbutton\n                onClick={() => handleLanguageChange('en')}\n                className={language === 'en' ? 'btn-primary' : 'btn-secondary'}\n              >\n                英文\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fheader>\n\n      \u003Cmain className=\"max-w-7xl mx-auto px-4 py-8\">\n        \u003Cdiv className=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n          \u003CFlyCutCaption\n            config={{\n              theme: 'auto',\n              language,\n              enableDragDrop: true,\n              enableExport: true,\n              maxFileSize: 1000\n            }}\n            locale={locale}\n            onLanguageChange={handleLanguageChange}\n            onSubtitleGenerated={handleSubtitleGenerated}\n            onProgress={handleProgress}\n            onError={(error) => {\n              console.error('Error:', error)\n              \u002F\u002F 显示友好的错误提示\n              alert('处理过程中发生错误，请重试')\n            }}\n          \u002F>\n        \u003C\u002Fdiv>\n\n        {isProcessing && (\n          \u003Cdiv className=\"mt-4 text-center\">\n            \u003Cdiv className=\"inline-flex items-center px-4 py-2 bg-blue-100 rounded-lg\">\n              \u003Cdiv className=\"animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 mr-2\">\u003C\u002Fdiv>\n              处理中，请稍候...\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        )}\n\n        {subtitles.length > 0 && (\n          \u003Cdiv className=\"mt-8 bg-white rounded-lg shadow p-6\">\n            \u003Ch2 className=\"text-lg font-semibold mb-4\">生成的字幕（{subtitles.length} 条）\u003C\u002Fh2>\n            \u003Cdiv className=\"text-sm text-gray-600\">\n              字幕已自动保存到本地存储\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        )}\n      \u003C\u002Fmain>\n    \u003C\u002Fdiv>\n  )\n}\n\nexport default VideoEditorApp\n```\n\n### Next.js 集成\n\n```tsx\n\u002F\u002F pages\u002Feditor.tsx\nimport dynamic from 'next\u002Fdynamic'\nimport { useState } from 'react'\n\n\u002F\u002F 动态导入以避免 SSR 问题\nconst FlyCutCaption = dynamic(\n  () => import('@flycut\u002Fcaption-react').then(mod => mod.FlyCutCaption),\n  { ssr: false }\n)\n\nexport default function EditorPage() {\n  return (\n    \u003Cdiv style={{ height: '100vh' }}>\n      \u003CFlyCutCaption\n        config={{\n          theme: 'auto',\n          language: 'zh'\n        }}\n        onVideoProcessed={(blob, filename) => {\n          \u002F\u002F 处理视频处理结果\n          const url = URL.createObjectURL(blob)\n          window.open(url, '_blank')\n        }}\n      \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### 最佳实践\n\n1. **始终导入样式**：组件需要 CSS 才能正常工作。\n2. **优雅地处理错误**：实现适当的错误边界和用户反馈。\n3. **优化性能**：在 SSR 应用中使用动态导入。\n4. **提供用户反馈**：显示加载状态和进度指示器。\n5. **响应式设计**：确保容器具有合适的高度\u002F宽度。\n6. **可访问性**：组件包含 ARIA 标签和键盘导航功能。\n7. **内存管理**：在组件卸载时清理 Blob URL。\n\n## 🔧 开发\n\n### 先决条件\n\n- Node.js 18+\n- pnpm 8+\n\n### 设置\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fx007xyz\u002Fflycut-caption.git\ncd flycut-caption\npnpm install\n```\n\n### 开发\n\n```bash\n# 启动开发服务器\npnpm dev\n\n# 构建库\npnpm run build:lib\n\n# 构建演示\npnpm run build:demo\n\n# 检查代码风格\npnpm lint\n\n# 运行测试应用\ncd test-app && pnpm dev\n```\n\n## 🤝 贡献\n\n我们欢迎各种形式的贡献！\n\n### 如何贡献\n1. 分支本项目。\n2. 创建特性分支 (`git checkout -b feature\u002FAmazingFeature`)。\n3. 提交更改 (`git commit -m '添加一些 AmazingFeature'`)。\n4. 推送到分支 (`git push origin feature\u002FAmazingFeature`)。\n5. 创建拉取请求。\n\n### 贡献类型\n- 🐛 修复 bug。\n- ✨ 新功能开发。\n- 📝 文档改进。\n- 🎨 UI\u002FUX 优化。\n- ⚡ 性能优化。\n- 🌐 国际化翻译。\n\n## 📝 许可证\n\n本项目采用 MIT 许可证，并附加以下条款：\n\n- ✅ **允许**：个人、教育、商业用途。\n- ✅ **允许**：修改、分发、创建衍生作品。\n- ❌ **禁止**：移除或修改软件界面中的标志、水印、品牌元素。\n- ❌ **禁止**：隐藏或篡改署名声明。\n\n如需移除品牌元素，请联系 FlyCut 团队以获得明确的书面许可。\n\n详情请参阅 [LICENSE](LICENSE) 文件。\n\n## 🙏 致谢\n\n- [Hugging Face](https:\u002F\u002Fhuggingface.co\u002F) - 优秀的 Transformers.js 库。\n- [OpenAI Whisper](https:\u002F\u002Fopenai.com\u002Fresearch\u002Fwhisper) - 强大的语音识别模型。\n- [Shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com\u002F) - 优雅的 UI 组件库。\n- [WebAV](https:\u002F\u002Fgithub.com\u002Fhughfenghen\u002FWebAV) - 强大的 Web 音频\u002F视频处理库。\n\n## 📞 支持\n\n- 📧 邮箱：x007xyzabc@gmail.com\n- 🐛 问题：[GitHub Issues](https:\u002F\u002Fgithub.com\u002Fx007xyz\u002Fflycut-caption\u002Fissues)\n- 📖 文档：[API 文档](https:\u002F\u002Fflycut.dev\u002Fdocs)\n\n---\n\n\u003Cdiv align=\"center\">\n\n**如果这个项目对您有帮助，请给我们一颗⭐ Star！**\n\n由 FlyCut 团队用心打造。\n\n\u003C\u002Fdiv>","# FlyCut Caption 快速上手指南\n\nFlyCut Caption 是一款基于 AI 的视频字幕编辑工具，支持智能语音识别、可视化字幕剪辑及视频导出。它利用浏览器本地的 AI 模型（Transformers.js）进行处理，无需上传视频到服务器，保护隐私且响应迅速。\n\n## 环境准备\n\n在开始之前，请确保您的开发环境满足以下要求：\n\n- **Node.js**: 版本 18 或更高\n- **包管理器**: 推荐使用 `pnpm`，也可使用 `npm`\n- **浏览器**: 现代浏览器（Chrome, Edge, Firefox 等），需支持 Web Workers\n\n> **国内加速建议**：如果安装依赖速度较慢，可配置国内镜像源。\n> - pnpm: `pnpm config set registry https:\u002F\u002Fregistry.npmmirror.com`\n> - npm: `npm config set registry https:\u002F\u002Fregistry.npmmirror.com`\n\n## 安装步骤\n\n### 方式一：源码运行（适合开发与贡献）\n\n1. **克隆项目**\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002Fx007xyz\u002Fflycut-caption.git\n   cd flycut-caption\n   ```\n\n2. **安装依赖**\n   ```bash\n   pnpm install\n   ```\n\n3. **启动开发服务器**\n   ```bash\n   pnpm dev\n   ```\n\n4. **访问应用**\n   打开浏览器访问 `http:\u002F\u002Flocalhost:5173`\n\n### 方式二：作为组件集成（适合 React 项目）\n\n如果您希望在现有的 React 项目中使用该工具：\n\n1. **安装依赖包**\n   ```bash\n   npm install @flycut\u002Fcaption-react\n   # 或\n   pnpm add @flycut\u002Fcaption-react\n   ```\n\n2. **引入样式**\n   在入口文件或组件中引入必要的 CSS：\n   ```tsx\n   import '@flycut\u002Fcaption-react\u002Fstyles'\n   ```\n\n## 基本使用\n\n### 场景 A：直接使用开源项目界面\n\n启动开发服务器后，您将进入主界面，操作流程如下：\n\n1. **上传视频**\n   - 支持格式：MP4, WebM, AVI, MOV (视频); MP3, WAV, OGG (音频)\n   - 拖拽文件至上传区或点击选择文件。\n\n2. **生成字幕**\n   - 进入 ASR 配置界面，选择识别语言（支持中文、英文等）。\n   - 点击“开始识别”，AI 将在后台线程自动生成分段字幕，不阻塞界面操作。\n\n3. **编辑与预览**\n   - **剪辑**：选中不需要的字幕片段进行删除，支持批量操作和撤销。\n   - **预览**：播放视频时会自动跳过已删除的片段，实时预览最终效果。\n   - **快捷键**：空格（播放\u002F暂停）、←\u002F→（快进\u002F退 5 秒）、F（全屏）。\n\n4. **导出结果**\n   - 支持导出 SRT\u002FJSON 字幕文件。\n   - 支持导出处理后的视频（仅保留未删除片段，可选烧录字幕）。\n\n### 场景 B：在 React 项目中集成组件\n\n最简单的集成代码如下：\n\n```tsx\nimport { FlyCutCaption } from '@flycut\u002Fcaption-react'\nimport '@flycut\u002Fcaption-react\u002Fstyles'\n\nfunction VideoEditor() {\n  return (\n    \u003Cdiv className=\"video-editor-container\" style={{ height: '800px' }}>\n      {\u002F* 直接使用默认配置 *\u002F}\n      \u003CFlyCutCaption \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n\nexport default VideoEditor\n```\n\n**进阶：监听事件与自定义配置**\n\n您可以监听文件选择、字幕生成完成等事件，以便与后端交互：\n\n```tsx\nimport { FlyCutCaption } from '@flycut\u002Fcaption-react'\n\nfunction AdvancedEditor() {\n  const handleSubtitleGenerated = (subtitles) => {\n    console.log('字幕已生成:', subtitles.length)\n    \u002F\u002F 在此处保存字幕到后端\n  }\n\n  const handleVideoProcessed = (blob, filename) => {\n    \u002F\u002F 处理导出的视频流\n    const url = URL.createObjectURL(blob)\n    console.log('视频处理完成，下载链接:', url)\n  }\n\n  return (\n    \u003CFlyCutCaption\n      config={{\n        language: 'zh', \u002F\u002F 设置默认语言\n        theme: 'auto',  \u002F\u002F 自动跟随系统主题\n      }}\n      onSubtitleGenerated={handleSubtitleGenerated}\n      onVideoProcessed={handleVideoProcessed}\n      onError={(error) => console.error('发生错误:', error)}\n    \u002F>\n  )\n}\n```\n\n通过以上步骤，您即可快速体验或利用 FlyCut Caption 强大的本地 AI 字幕编辑能力。","某短视频创作者需要快速将一段 20 分钟的英文访谈视频剪辑成带中文字幕的精华片段，用于发布到社交媒体平台。\n\n### 没有 flycut-caption 时\n- **流程割裂效率低**：必须先在外部软件生成字幕，再导入剪辑软件对齐时间轴，最后导出视频，反复切换工具耗时极长。\n- **人工校对成本高**：自动生成的字幕错误需手动逐行修改时间戳和文本，缺乏可视化的波形或分段辅助，极易出错。\n- **预览反馈滞后**：无法实时预览删除片段后的视频连贯性，往往要等到最终渲染完成才发现节奏不对，返工率高。\n- **样式调整繁琐**：修改字幕字体、颜色或位置需要重新设置参数并再次渲染，无法做到“所见即所得”的即时调整。\n- **本地隐私担忧**：使用在线转录服务需上传原始视频素材，存在数据泄露风险，且受网络带宽限制处理速度慢。\n\n### 使用 flycut-caption 后\n- **一站式闭环操作**：直接在浏览器上传视频，利用内置 Whisper 模型本地生成字幕并同步剪辑，无需切换任何外部应用。\n- **可视化精准编辑**：通过直观的时间轴界面批量选中并删除冗余片段，支持撤销重做，字幕与视频帧毫秒级精准对齐。\n- **实时跳过预览**：开启预览模式后，播放器自动跳过已标记删除的片段，创作者可立即确认剪辑节奏和叙事流畅度。\n- **样式即时定制**：拖拽调整字幕位置、颜色和背景，修改效果实时反映在视频画面上，导出前即可确定最终视觉效果。\n- **安全本地计算**：基于 Transformers.js 在浏览器本地运行 AI 模型，素材无需上传云端，既保护隐私又避免了网络延迟。\n\nflycut-caption 通过将 AI 识别、可视化剪辑与实时渲染融合于浏览器端，把原本数小时的视频字幕制作流程压缩至分钟级，极大提升了内容创作效率。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fx007xyz_flycut-caption_273897b3.png","x007xyz",null,"https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fx007xyz_07e22482.jpg","https:\u002F\u002Fgithub.com\u002Fx007xyz",[20,24,28,32,36],{"name":21,"color":22,"percentage":23},"TypeScript","#3178c6",95.9,{"name":25,"color":26,"percentage":27},"Python","#3572A5",2.8,{"name":29,"color":30,"percentage":31},"CSS","#663399",1.1,{"name":33,"color":34,"percentage":35},"JavaScript","#f1e05a",0.1,{"name":37,"color":38,"percentage":35},"HTML","#e34c26",1445,200,"2026-04-04T13:55:59","NOASSERTION",2,"未说明","不需要独立 GPU（基于浏览器端 Transformers.js 运行，利用本地计算资源）",{"notes":47,"python":48,"dependencies":49},"该工具为纯前端应用，无需安装 Python 环境。AI 语音识别模型通过 Transformers.js 在浏览器本地运行，利用 Web Workers 避免阻塞界面。主要依赖 Node.js 18+ 及 pnpm\u002Fnpm 包管理器进行开发和构建。","不需要",[50,51,52,21,53,54,55],"Node.js 18+","pnpm 或 npm","React 19","Vite","Tailwind CSS","Hugging Face Transformers.js",[57,58],"音频","视频",4,"ready","2026-03-27T02:49:30.150509","2026-04-06T07:04:52.864537",[64],{"id":65,"question_zh":66,"answer_zh":67,"source_url":68},6966,"模型加载失败，是否需要使用网络代理（翻墙）？","是的，该项目使用的模型托管在 Hugging Face 上，在中国大陆地区直接访问通常受限。如果遇到模型加载失败的问题，通常需要配置网络代理（翻墙）才能正常下载和加载模型。","https:\u002F\u002Fgithub.com\u002Fx007xyz\u002Fflycut-caption\u002Fissues\u002F3",[],[71,86,95,103,111,119],{"id":72,"name":73,"github_repo":74,"description_zh":75,"stars":76,"difficulty_score":43,"last_commit_at":77,"category_tags":78,"status":60},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[79,80,58,81,82,83,84,85,57],"图像","数据工具","插件","Agent","其他","语言模型","开发框架",{"id":87,"name":88,"github_repo":89,"description_zh":90,"stars":91,"difficulty_score":92,"last_commit_at":93,"category_tags":94,"status":60},4128,"GPT-SoVITS","RVC-Boss\u002FGPT-SoVITS","GPT-SoVITS 是一款强大的开源语音合成与声音克隆工具，旨在让用户仅需极少量的音频数据即可训练出高质量的个性化语音模型。它核心解决了传统语音合成技术依赖海量录音数据、门槛高且成本大的痛点，实现了“零样本”和“少样本”的快速建模：用户只需提供 5 秒参考音频即可即时生成语音，或使用 1 分钟数据进行微调，从而获得高度逼真且相似度极佳的声音效果。\n\n该工具特别适合内容创作者、独立开发者、研究人员以及希望为角色配音的普通用户使用。其内置的友好 WebUI 界面集成了人声伴奏分离、自动数据集切片、中文语音识别及文本标注等辅助功能，极大地降低了数据准备和模型训练的技术门槛，让非专业人士也能轻松上手。\n\n在技术亮点方面，GPT-SoVITS 不仅支持中、英、日、韩、粤语等多语言跨语种合成，还具备卓越的推理速度，在主流显卡上可实现实时甚至超实时的生成效率。无论是需要快速制作视频配音，还是进行多语言语音交互研究，GPT-SoVITS 都能以极低的数据成本提供专业级的语音合成体验。",56375,3,"2026-04-05T22:15:46",[57],{"id":96,"name":97,"github_repo":98,"description_zh":99,"stars":100,"difficulty_score":92,"last_commit_at":101,"category_tags":102,"status":60},3833,"MoneyPrinterTurbo","harry0703\u002FMoneyPrinterTurbo","MoneyPrinterTurbo 是一款利用 AI 大模型技术，帮助用户一键生成高清短视频的开源工具。只需输入一个视频主题或关键词，它就能全自动完成从文案创作、素材匹配、字幕合成到背景音乐搭配的全过程，最终输出完整的竖屏或横屏短视频。\n\n这款工具主要解决了传统视频制作流程繁琐、门槛高以及素材版权复杂等痛点。无论是需要快速产出内容的自媒体创作者，还是希望尝试视频生成的普通用户，无需具备专业的剪辑技能或昂贵的硬件配置（普通电脑即可运行），都能轻松上手。同时，其清晰的 MVC 架构和对多种主流大模型（如 DeepSeek、Moonshot、通义千问等）的广泛支持，也使其成为开发者进行二次开发或技术研究的理想底座。\n\nMoneyPrinterTurbo 的独特亮点在于其高度的灵活性与本地化友好性。它不仅支持中英文双语及多种语音合成，允许用户精细调整字幕样式和画面比例，还特别优化了国内网络环境下的模型接入方案，让用户无需依赖 VPN 即可使用高性能国产大模型。此外，工具提供批量生成模式，可一次性产出多个版本供用户择优，极大地提升了内容创作的效率与质量。",54991,"2026-04-05T12:23:02",[85,84,82,58,79],{"id":104,"name":105,"github_repo":106,"description_zh":107,"stars":108,"difficulty_score":43,"last_commit_at":109,"category_tags":110,"status":60},2179,"oh-my-openagent","code-yeongyu\u002Foh-my-openagent","oh-my-openagent（简称 omo）是一款强大的开源智能体编排框架，前身名为 oh-my-opencode。它致力于打破单一模型供应商的生态壁垒，解决开发者在构建 AI 应用时面临的“厂商锁定”难题。不同于仅依赖特定模型的封闭方案，omo 倡导开放市场理念，支持灵活调度多种主流大模型：利用 Claude、Kimi 或 GLM 进行任务编排，调用 GPT 处理复杂推理，借助 Minimax 提升响应速度，或发挥 Gemini 的创意优势。\n\n这款工具特别适合希望摆脱平台限制、追求极致性能与成本平衡的开发者及研究人员使用。通过统一接口，用户可以轻松组合不同模型的长处，构建更高效、更具适应性的智能体系统。其独特的技术亮点在于“全模型兼容”架构，让用户不再受制于某一家公司的策略变动或定价调整，真正实现对前沿模型资源的自由驾驭。无论是构建自动化编码助手，还是开发多步骤任务处理流程，oh-my-openagent 都能提供灵活且稳健的基础设施支持，助力用户在快速演进的 AI 生态中保持技术主动权。",48371,"2026-04-05T11:36:18",[58,84,85,79,82],{"id":112,"name":113,"github_repo":114,"description_zh":115,"stars":116,"difficulty_score":92,"last_commit_at":117,"category_tags":118,"status":60},2863,"TTS","coqui-ai\u002FTTS","🐸TTS 是一款功能强大的深度学习文本转语音（Text-to-Speech）开源库，旨在将文字自然流畅地转化为逼真的人声。它解决了传统语音合成技术中声音机械生硬、多语言支持不足以及定制门槛高等痛点，让高质量的语音生成变得触手可及。\n\n无论是希望快速集成语音功能的开发者，还是致力于探索前沿算法的研究人员，亦或是需要定制专属声音的数据科学家，🐸TTS 都能提供得力支持。它不仅预置了覆盖全球 1100 多种语言的训练模型，让用户能够即刻上手，还提供了完善的工具链，支持用户利用自有数据训练新模型或对现有模型进行微调，轻松实现特定风格的声音克隆。\n\n在技术亮点方面，🐸TTS 表现卓越。其最新的 ⓍTTSv2 模型支持 16 种语言，并在整体性能上大幅提升，实现了低于 200 毫秒的超低延迟流式输出，极大提升了实时交互体验。此外，它还无缝集成了 🐶Bark、🐢Tortoise 等社区热门模型，并支持调用上千个 Fairseq 模型，展现了极强的兼容性与扩展性。配合丰富的数据集分析与整理工具，🐸TTS 已成为科研与生产环境中备受信赖的语音合成解决方案。",44971,"2026-04-03T14:47:02",[57,85,79],{"id":120,"name":121,"github_repo":122,"description_zh":123,"stars":124,"difficulty_score":92,"last_commit_at":125,"category_tags":126,"status":60},2375,"LocalAI","mudler\u002FLocalAI","LocalAI 是一款开源的本地人工智能引擎，旨在让用户在任意硬件上轻松运行各类 AI 模型，包括大语言模型、图像生成、语音识别及视频处理等。它的核心优势在于彻底打破了高性能计算的门槛，无需昂贵的专用 GPU，仅凭普通 CPU 或常见的消费级显卡（如 NVIDIA、AMD、Intel 及 Apple Silicon）即可部署和运行复杂的 AI 任务。\n\n对于担心数据隐私的用户而言，LocalAI 提供了“隐私优先”的解决方案，确保所有数据处理均在本地基础设施内完成，无需上传至云端。同时，它完美兼容 OpenAI、Anthropic 等主流 API 接口，这意味着开发者可以无缝迁移现有应用，直接利用本地资源替代云服务，既降低了成本又提升了可控性。\n\nLocalAI 内置了超过 35 种后端支持（如 llama.cpp、vLLM、Whisper 等），并集成了自主 AI 代理、工具调用及检索增强生成（RAG）等高级功能，且具备多用户管理与权限控制能力。无论是希望保护敏感数据的企业开发者、进行算法实验的研究人员，还是想要在个人电脑上体验最新 AI 技术的极客玩家，都能通过 LocalAI 获",44782,"2026-04-02T22:14:26",[79,57,84,82,85,80,81]]