yuyuanweb/ai-picture-editor

一言でまとめ

これは教学型フルスタックプロジェクトです：ユーザーが自然言語で一文を入力すると（例：「背景をビーチに変えて」）、AIが自動的に画像編集のステップを計画し、21種類の内蔵編集ツールを呼び出してプロ級の画像編集を完了します——画像生成から切り抜き、色調補正、部分編集、レイヤー分割まで全て自動で行われます。

何を解決するか

従来の画像編集ソフトでは、ユーザーが手動でボタンを探し、パラメータを調整する必要があります。このプロジェクトでは、一文を言うだけで複雑な画像編集操作を完了でき、AIエージェントが意図の理解、ステップの計画、ツールの呼び出しと実行を担当し、最後にキャンバス上でリアルタイムに結果を表示します。

コア機能（8大モジュール）

1. AIテキストからの画像生成——プロンプトを入力すると、4枚の候補画像が生成され（4分割表示）、生成進捗はSSEでリアルタイムにプッシュされます。

2. プロ級キャンバスエディタ——react-konvaベースで、ズーム、パン、レイヤー管理、元に戻す/やり直し、編集前後比較スライダーをサポート。

3. 自然言語駆動の画像編集——コア機能：AIがユーザーの指示を分析し、ステップを自動計画してツールを実行します。

4. 21種類の編集ツール——ワンクリック切り抜き（rembg）、11種類の色調パラメータ（明るさ/コントラスト/彩度/色温度など）、切り抜き/反転/拡大縮小/回転/移動、AI背景置換、AI拡張、超解像度拡大。UIボタンとAIエージェントは同じツールレジストリを共有します。

5. スマート領域選択——SAM（Segment Anything Model）のポイント選択機能を統合し、クリック一つで任意のオブジェクトを選択；ブラシ塗りつぶしモードもサポート。最初のクリックでembeddingを計算し、以降のクリックはdecoderのみ実行、応答はミリ秒単位です。

6. 部分精密編集——選択領域に基づいて部分消去（AI inpaintで消して背景を自動補完）と部分置換（プロンプトで何に変えるかを記述し、選択領域のみ変更）を行います。

7. レイヤー分割と独立操作——意味的に主体レイヤー+背景レイヤーに分割し、OCR文字レイヤーもオプション；各レイヤーは独立して拡大縮小/色調補正/移動が可能。任意のオブジェクトをクリックして独立レイヤーに昇格させることもでき、背景は自動修復されます。レイヤーデータはJSONBで永続化されます。

8. マルチステップ計画と人機協調——複雑な要求時、AIは構造化JSON計画（依存関係を含む）を出力し、サーバー側でツール存在性検証、パラメータ合法性チェック、依存補完、循環検出を行い、トポロジカルソートで実行します。ユーザーは計画カードで実行確認、単一ステップの再試行、以降のキャンセルが可能です。

技術アーキテクチャ

• フロントエンド：React 19 + Konva（Canvasエンジン）、シングルページアプリ
• バックエンド：Python FastAPI、レイヤー化（ルーティング層/ビジネスサービス層/データアクセス層）
• AI部分：LangChainで計画モデルとツール署名を接続；LangGraphでエージェント計画のオーケストレーション；ToolRegistryで全編集ツールを一元管理
• 非同期タスク：時間のかかるタスク（画像生成、切り抜き、拡張）はARQ非同期キューで独立したWorkerに渡され、結果はRedis Pub/Sub + SSEでフロントエンドにリアルタイムプッシュ
• データストレージ：PostgreSQL（ビジネスデータ）、Redis（キャッシュとメッセージ）、MinIO（画像リソース）

実行方法

Docker、Python 3.13、Node.js 18+が必要です。ミドルウェア起動 → バックエンド（uvicorn + ARQ Worker）→ フロントエンド（npm run dev）。AIサービスはオプションで阿里雲百煉APIキーを使用（mockモードで全フローを無料で実行可能）。テストはmockで大規模言語モデル呼び出しを分離し、APIクォータを消費しません。デプロイはDockerマルチステージビルド + compose profileを使用。

重要な注意

これは有料教学プロジェクトであり、READMEには完全なテキストチュートリアル、履歴書の書き方、面接問題の解答、質疑応答サービスが付属していると明記されており、「编程导航」メンバーシップに参加することで完全なチュートリアル資料を取得できます。コア価値はAIエージェントのフルスタック開発方法（一般的な方法論）を学ぶことにあり、単なるコード自体ではありません。