AI動画を確認するとき、冒頭のサムネイルだけでは、途中の顔の向きや動きは判断できません。入力に使った画像と、ダウンロードした動画を同じ画面で見られると、一つの出力を具体的に確認しやすくなります。
開示：この記事はBulin47.websiteの運営者向けにAIの支援を使って作成しました。以下はブラウザー標準機能を使ったローカル確認用のサンプルであり、生成モデルの性能テストや、同サイトの内部実装の紹介ではありません。
ファイル選択とアップロードを分ける
このサンプルの役割は、手元にある二つのファイルを表示することだけです。写真から動画を生成する機能はありません。ファイル選択後にURL.createObjectURL()で参照用のURLを作り、画像と動画のsrcに設定します。サーバーへの送信処理は含めません。
生成前の写真チェックと、生成後の動画レビューも別の段階です。たとえばBulin47の一枚写真から始める動画ワークフローでは、固定された赤いドアのダンスを作る前に写真を確認します。ここで作る画面は、その後にダウンロードしたファイルを自分で見るためのものです。
一つのHTMLとして保存する
以下をreview.htmlとして保存し、ブラウザーで開きます。自分の写真、またはこの用途への同意を得た成人の写真と、その写真を使って作成した動画を選びます。
<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>画像と動画の確認</title>
<style>
body { max-width: 960px; margin: 2rem auto; padding: 0 1rem;
font-family: system-ui, sans-serif; }
.review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem; }
label { display: block; margin-bottom: 1rem; }
img, video { display: block; max-width: 100%; max-height: 65vh; }
[hidden] { display: none; }
@media (max-width: 640px) { .review { grid-template-columns: 1fr; } }
</style>
<h1>入力画像と出力動画を確認する</h1>
<p>このページのコードにはファイルのアップロード処理はありません。</p>
<div class="review">
<section>
<h2>入力画像</h2>
<label>画像を選択 <input id="photo" type="file" accept="image/*"></label>
<img id="photoView" alt="選択した入力画像" hidden>
</section>
<section>
<h2>出力動画</h2>
<label>動画を選択 <input id="clip" type="file" accept="video/*"></label>
<video id="clipView" controls playsinline hidden></video>
</section>
</div>
<script>
for (const [inputId, viewId] of [["photo", "photoView"], ["clip", "clipView"]]) {
const input = document.getElementById(inputId);
const view = document.getElementById(viewId);
let previousUrl;
input.addEventListener("change", () => {
if (previousUrl) URL.revokeObjectURL(previousUrl);
const file = input.files[0];
view.hidden = !file;
if (!file) {
view.removeAttribute("src");
return;
}
previousUrl = URL.createObjectURL(file);
view.src = previousUrl;
});
}
</script>
</html>
ファイルを選び直す際は、前のオブジェクトURLを解放しています。動画はcontrols付きで表示し、勝手には再生しません。読み込み可能な動画形式は利用するブラウザーとファイルによって異なるため、再生できないファイルを生成品質の問題と決めつけないでください。
画面を作った後に確認すること
まず動画を最初から最後まで再生します。その後、顔の向きが大きく変わる場面、手が顔に重なる場面、最後のカットを確認します。静止画と似ているかだけでなく、投稿全体として意図が伝わるかを判断します。
音声は、実際に投稿する編集版で聞き直します。別のアプリで音源や字幕を追加する場合、このローカル画面での確認だけでは、その最終版のタイミングや表示位置までは確かめられません。
このサンプルは二つのファイルを並べるだけなので、定量的な顔類似度やモデル間の優劣は測定しません。比較記事にするなら、同じ条件で何を測定したかを別途定義する必要があります。
一つの具体的な出力から始める
固定されたBulin 47風の赤いドアのダンスを作りたい場合は、Bulin47の動画作成ガイドで手順を確認し、同意のある写真と現在表示される生成条件を使って進められます。同サイトは独立したファンメイドのサービスであり、アーティストの公式サービスではありません。写真チェックは無料ですが、動画生成はクレジットを使います。
先に「この動画を何に使うか」を決めておけば、ローカルの確認画面も、必要な判断を助ける小さな道具として使えます。