ComfyUI 表情編集UI｜Next.js自作UIの実例紹介
ComfyUIの画面を使わずに、自分のアプリから表情編集機能を呼び出したいと考えている人に向けた記事です。著者は前回記事でComfyUI-AdvancedLivePortraitを通常のPythonスクリプトとして動かせるようにしており、今回はそれをNext.js製の自作フロントエンドから操作する構成を紹介しています。どのような画面構成で、何をバックエンドに任せているのかが分かります。
この記事は、著者が前回の記事でComfyUI-AdvancedLivePortraitをComfyUIのWebUIに依存せず、通常のPythonスクリプトとして実行できるようにした成果を踏まえたものです。WebUIから離れて動かせるようになったことで、自分で作ったフロントエンドからこの表情編集機能を使ってみたい、というのが今回の出発点になっています。
構成はNext.js（App Router）のフロントエンドとPythonのバックエンドに分かれています。フロントエンドはM2 Macで動かし、バックエンドはUbuntu＋RTX3060のPCのほか、Google Colabでも動作確認済みと書かれています。ブラウザから人物画像をアップロードし、スライダーや数値入力で表情や構図を変化させ、プレビュー画像は右クリックで保存できる、という使い方が紹介されています。
実装面では、顔検出モデルの読み込みなど時間のかかる処理を画像アップロード時に先に済ませる初期化用APIと、パラメータ変更時に呼ばれる編集用APIの2つに分けて高速化を図っています。また、スライダー操作中にリクエストが連続して送られすぎないよう、操作が止まってから200ms後に一度だけ送るデバウンス処理を入れている点も説明されています。
記事の手順の流れ
- Next.js（pnpm）とPythonが使える環境を用意する
- 公開されているリポジトリをクローンまたはダウンロードする
- フロントエンドにバックエンドサーバーのURLを設定する
- フロントエンドの依存パッケージを導入してビルドする
- バックエンドをローカルPCまたはGoogle Colab（ngrok経由）で起動する
- ブラウザから画像をアップロードし、スライダーで表情を編集して保存する
記事は著者の方がZennに公開されているものです。当社は内容を転載していません。上のリンクから元記事が開きます。
試す前に要る前提
この記事は、ComfyUIのWebUI上でComfyUI-AdvancedLivePortraitを動かす方法ではなく、著者が前回の記事でPythonスクリプト化した成果物を前提にしています。GPUが使えるPCかGoogle Colabのどちらかが必要で、Colabを使う場合はngrokのアクセストークンを事前に取得しておく必要があると記事中に書かれています。
つまずきやすい点
フロントエンドとバックエンドを別々のマシンで動かす想定のため、バックエンド側のプライベートIPアドレスを調べて設定ファイルに記載する作業が必要です。Google Colabを使う場合はサーバーのURLが実行後でないと分からないため、いったん仮の値を設定しておき、実行後に差し替える、という記事特有の手順を踏む点も見落としやすいところです。
公開から時間がたって変わっている可能性
記事は2024年9月11日の公開で、Google Colab無料版の利用に関する注意も当時の状況を踏まえた記載になっています。Next.jsやpnpm、ComfyUI-AdvancedLivePortrait本体のバージョン、Colabの利用規約は変わる可能性があるため、試す前に各公式リポジトリやColabの最新の案内を確認することをおすすめします。
ComfyUI とは
画像・動画生成のモデルを、ノードをつないで組み立てるGUIです。生成の手順そのものを保存して再利用できます。
ComfyUI を実務で使うための情報
ComfyUI の他のテーマ
よくある質問
読んだうえで、自分でやるか任せるか
OSSは「入れる」より「日本語で運用に乗せる」ほうが手間です。記事のとおりに進めて詰まったら、そこから先は任せてください。
