RanFeng/clipsketch-ai has 1,877 GitHub stars and 244 forks. GitHot measured 0 stars in 24 hours and -1 in 7 days. Last checked 2026-11-11 14:50 UTC. Last push 2026-01-14.
将视频瞬间转化为手绘故事 Turn Video Moments into Hand-Drawn Stories
計測したスター増加
- 24時間
- 0
- 7日間
- -1
- 15日間
- 更新が遅れています
- 1か月
- 更新が遅れています
期間ごとの純増数です。期間は重複しており、日別の値ではありません。未計測の値は空欄です。スター数は注目度の指標であり、品質の保証ではありません。
README.ja.md
オリジナルClipSketch AI
動画の瞬間を手描きの物語へ
Turn Video Moments into Hand-Drawn Stories
[機能] • [クイックスタート] • [ユーザーガイド] • [技術スタック]
📖 プロジェクト紹介
ClipSketch AI は、動画クリエイター、ソーシャルメディア運用者、二次創作愛好家のために設計された全工程対応の生産性向上ツールです。
単なる動画プレーヤーではなく、AI駆動のコンテンツ制作ワークベンチです。BilibiliやXiaohongshu（小紅書）の動画リンクを解析し、フレーム単位で正確にハイライトシーンをタグ付けできます。Google Geminiの最新マルチモーダルモデルを統合し、これらの瞬間をワンクリックで美しい手描き風ストーリーボードに変換し、ソーシャルメディアに適したバズるキャプションを自動生成します。
🖥️ 画面プレビュー
✨ 主な機能
🎥 強力な動画キャプチャ
- マルチソースインポート: Bilibili および Xiaohongshu の共有リンク解析に対応（短縮リンクやテキスト混在も可）。
- HD再生: 縦型動画（9:16）およびワイドスクリーン動画向けに最適化されたアダプティブレイアウト。
- 精密操作: キーボードショートカット対応（スペースで再生/一時停止、矢印キーでコマ送り/スマートステップ調整）。
🏷️ フレームタグ付けシステム
- ミリ秒単位の記録: すべての決定的な瞬間を正確に捉えます。
- ショートカット打刻:
Tキーを押すだけで素早くタグ付け。 - データエクスポート: タイムラインタグをTXT形式でエクスポート、またはタグ付けされたフレームをZIP画像パックとしてエクスポート可能。
🎨 AIアートスタジオ (Powered by Gemini)
- スマートドローイング:
gemini-3-pro-image-previewモデルを使用し、複数のタグ付けフレームを一貫した可愛い手描き風ストーリーボードに統合。 - ソーシャルコピー生成: 視覚的内容に基づき、
gemini-3-pro-previewを使用して 3つの異なるスタイル の投稿文を自動生成（エモーショナルストーリー型、実用チュートリアル型、インパクト型）。 - キャラクター統合: カスタムキャラクター/アバターをアップロードすると、AIが自動的にシーンに融合させます。
- カバー画像生成: 選定したキャプションと元の映像に基づいて、高品質な縦型動画カバーを生成。
- 一括リファイン: 分割パネルの一括生成と最適化をサポート（コスト削減のためのBatch API設定が可能）。
📱 マルチプラットフォーム対応
- レスポンシブデザイン: PCワイドスクリーン、iPadタブレット、スマホの縦画面操作に完全対応。
- モバイル最適化: スマホでは自動的に上下レイアウトに切り替わり、操作性が向上。
🚀 クイックスタート
前提条件
- Node.js (v18以上)
- 有効な Google Gemini API Key
インストールと実行
リポジトリのクローン
git clone https://github.com/RanFeng/clipsketch-ai.git cd clipsketch-ai依存関係のインストール
npm install環境変数の設定 ルートディレクトリに
.env.localファイルを作成し、APIキーを入力します：GEMINI_API_KEY=your_api_key_here開発サーバーの起動
npm run devアプリへのアクセス ブラウザで
http://localhost:3000を開きます。
Docker デプロイ
docker run -d --restart=always --name clipsketch-ai -p 3000:3000 earisty/clipsketch-ai:latest
📚 ユーザーガイド
- 動画のインポート:
- Bilibili または Xiaohongshu の共有リンクをコピーします。
- ホーム画面の入力ボックスに貼り付け、「動画をインポート」をクリックします。
- 素材のタグ付け:
スペースで再生制御、←/→で進行調整。- 素晴らしいシーンを見つけたら、Tag ボタンをクリックするか
Tキーを押します。
- AIスタジオへ:
- タグ付け完了後、右側リスト下部の 「次へ：AI 作画」 をクリックします。
- コンテンツ制作:
- 右上に Gemini API Key を貼り付けます（環境変数未設定の場合）。
- クリエイティブ分析: AIが動画のステップを分析。
- 画面生成: 手描きストーリーボードを生成、カスタムキャラクターの融合も可能。
- パネル精修: 各コマを高解像度で再描画（一括モード対応）。
- コピー＆カバー: ソーシャルメディア用コピーと、それに合ったカバー画像を生成。
- エクスポートと共有:
- 生成されたストーリーボード画像、カバー、または全素材をダウンロード。
- 気に入ったキャプションをワンクリックでコピー。
🛠️ 技術スタック
- コアフレームワーク: React 19, TypeScript
- スタイル: Tailwind CSS
- アイコン: Lucide React
- AI SDK: Google GenAI SDK (
@google/genai) - ツール: JSZip (圧縮ダウンロード), Canvas API (スクリーンショット)
- ストレージ: IndexedDB (ローカル状態永続化)
⚠️ 注意事項
- API権限: AI作画機能を使用するには、API Keyが
gemini-3-pro-image-previewモデルにアクセスできる権限を持っている必要があります。403エラーが発生した場合は、Google Cloudプロジェクトの設定を確認してください。 - クロスオリジン: 外部動画の再生とスクリーンショットに対応するため、特定のプロキシ戦略と
referrerPolicy="no-referrer"を使用しています。
📄 ライセンス
MIT License © 2024 ClipSketch AI