マジカルミライ2024プログラミングコンテストに参戦してみた
初音ミク「マジカルミライ 2024」プログラミング・コンテストに、moomindaniとべりんぐで一緒に参戦してみました。
開発したリリックアプリは大変嬉しいことに入選となりました。
リリックアプリとは楽曲の歌詞を表示するアプリでして、今回のマジカルミライ2024の受賞曲が課題曲になってます。
2024/8/14現在はミクナビアプリ（要会員登録）経由で一般投票受付中です。8/20まで正午まで。
ぜひ遊んでみて、気に入ったら投票していただけたら大変嬉しいです。
エントリーNo.6: Rhyme Traveler - ライムトラベラー
2024/09/02追記
受賞作品が 8/30 のマジカルミライ東京会場で発表されました。残念ながら受賞を逃しましたが、とても楽しかったのでまた来年も挑戦したい！
投票してくださった方、応援してくださった方、ありがとうございました！
全部終わりましたので、本日 GitHub リポジトリを公開しました。興味のある方いたらソースコードも見ていただければ嬉しいです。
https://github.com/moomindani/ai-lyrics-visualizer
この記事では、この応募作品のリリックアプリ「Rhyme Traveler - ライムトラベラー」について技術解説をします。
初音ミク「マジカルミライ 2024」プログラミング・コンテストとは
『初音ミク「マジカルミライ」』は、初音ミクたちバーチャル・シンガーの3DCGライブと、創作の楽しさを体感できる企画展を併催したイベントです。
初音ミク「マジカルミライ 2024」プログラミング・コンテストはマジカルミライ 2024の一環で開催されているプログラミングコンテストです。
このプログラミングコンテストでは、『初音ミク「マジカルミライ 2024」楽曲コンテスト』の受賞作品にあわせて歌詞などの映像演出が魅力的に動くWebアプリケーション（リリックアプリ）を開発します。
主な応募条件は以下の通りです。
- TextAlive App APIを利用します。
- HTTPサーバ上に設置するだけで動作する静的アプリケーションのみとします（PHP、Ruby、Node.jsなどを利用した動的なレスポンスを返すサーバアプリケーションは不可）
応募作品概要
「Rhyme Traveler - ライムトラベラー」は歌詞の意味を解析し、その内容に合わせたリリックビデオを生成するリリックアプリです。歌詞のリリックやライムが生み出す情景を旅する意味を込めて名付けられました。TextAliveのApp APIを使用しています。
ちなみに上のデモ動画は編集済みで、画面上部に解説文をつけてます。
本アプリは 初音ミク「マジカルミライ 2024」プログラミング・コンテストの課題曲 6曲のいずれにも対応しています。以下が課題曲ごとのデモです。こちらは編集なしです。
また、実は "高度な設定" を活用することで Songle に音楽地図、TextAlive App APIに歌詞情報が登録された任意の曲に対応しています。
例えば、「ブレス・ユア・ブレス by 和田たけあき feat. 初音ミク」を再生したいときは、楽曲 URLに「https://www.youtube.com/watch?v=a-Nf3QUFkOU」と入力すると再生できます。これは、この楽曲 URL が Songle に登録されているためです。この URL は Youtube に限らず、ニコニコ動画などでも動作します。
余談ですが、先日ニコニコ動画が復活した際に、すぐニコニコ動画の楽曲 URL で動作確認しましたが、ばっちり動作しました。復旧に関わった多くの方の尽力に心から感謝します。
この作品のアプローチ
今回、このプログラミングコンテストに応募するにあたって、コンテストの雰囲気を知るために過去の受賞作品を数年分遡って拝見しました。とても面白いアプリが多くて楽しく遊ばせていただきました。
ここで得た気づきが3点あります。
ひとつ目は、過去の応募作品は概ね以下のどちらかに分類できる点です。
- 楽曲と歌詞をインタラクティブな動画にする
- 楽曲と歌詞を使ってゲームにする
ふたつ目は、演出を特定の楽曲に向けて作り込んだ作品が多い点です。
特に、演出面に秀でた作品ほど特定の楽曲のテーマ性、ビジュアルに特化した作品になっている傾向があると感じました。
みっつ目は、楽曲や、楽曲の展開に合わせて、演出が大きく変化するような作品が比較的少ない点です。
これらの背景を踏まえて、過去の受賞作品との差別化を意識しつつ、以下の 3つの方針を立てました
- 特定の楽曲のためだけに作り込むのではなく、任意の楽曲に対応する。コンテンツ作成ではなく、メカニズム開発に注力する。
- 選択した楽曲に合わせて見た目が大きく変わる作品にする。
- 楽曲の展開に合わせて演出が大きく変化するようにする。
加えて、2024年にプログラミングコンテストに取り組むのであれば今ホットな技術を使いたいということで AI/LLM を活用したいと考えました。
一方で、LLM を映像や画像などのコンテンツの自動生成に使うことは広く試みられていますが、何か他の用途で LLM ならではの活用方法を考えました。
TextAlive App API には歌詞以外にもビートやサビなどの楽曲地図を表すメタデータが含まれます。この楽曲地図を LLM で補強することで楽曲の展開に合わせた新しい映像表現が可能になるのではと考え、以下の方針を加えました。
- AI/LLM の技術を、コンテンツ生成には使わずに、楽曲の解析に活用する。
また、一般投票があることがわかっていたので、以下の方針も加えました。
- ユーザーに特別な環境を要求しない。モバイルでも動作するようにする。
これらの 5つの方針を踏まえて出来上がったのが、「Rhyme Traveler - ライムトラベラー -」になります。
ポイント
まず、TextAlive API により取得した楽曲情報（音楽地図）から以下の情報を抽出して、演出に活用します。
- 歌詞
- ビート
- サビ
加えて、歌詞を AI/LLM によって解析して、以下の情報を抽出して、演出に活用します。
- フォント
- 配色パターン
- 繰り返しパターン (リフレイン)
- 特定の意味をもつワード (初音ミクとマジカルミライのコンテクストをもとに、"メロディ" と "未来" を扱います。)
- キーフレーズ
「マジカルミライ 2024」プログラミング・コンテストの課題曲 6曲については、あらかじめ解析済みのデータを登録してあります。
上級者向けの機能として、Songle 上で登録されている楽曲の URL を入力し、任意の曲を演出できます。Open AI の API キーをお持ちの場合はそのキーを入力することで、GPT-4o を使って曲を解析します。そうでない場合、ご利用の端末と Web ブラウザが WebGPU に対応している場合、WebLLM 経由で Llama 3 を使って曲を解析します。この部分については後ほど詳しく解説します。
課題曲 6曲については事前に解析したデータを使用するため、WebGPU や Open AIの API キーがない環境でも再生できます。
アーキテクチャ
アプリのアーキテクチャを図にすると以下のようになります。
RhymeTraveler アプリ自体は JavaScript で開発されていて、Web ブラウザ上で動作します。
- TextAlive API で楽曲情報を取得する。
- 解析済みの楽曲情報があればそれを使う。
- OpenAI API キーがあれば GTP-4o で楽曲情報を解析する。
- OpenAI API キーがなければ WebLLM 経由で Llama 3 で楽曲情報を解析する。
WebLLM でも GPT-4o でも全く同じプロンプトを使用しています。Llama 3 との相性を考慮して英語で記述しています。
配色パターンを取得するプロンプトの例:
Read this lyrics: <lyrics>歌詞がここに入る</lyrics>
I am working on visualizing this lyrics as a video. Analyze this lyrics, identifying the best color that fits the context of the lyrics, and return the color code in hexadecimal format.
Return four color codes; main color, base color, accent color, effect color with relevant tags.
Main color is used as a background color. For main color, use the tag "mainColor" e.g. <mainColor>#00aa88</mainColor>.
Base color is also used as a background color. For base color, use the tag "baseColor" e.g. <baseColor>#0066cc</baseColor>.
Accent colors are bold, high-contrast hues used sparingly for emphasis, standing out prominently against base/main colors. For accent color, use the tag "accentColor" e.g. <accentColor>#e12885</accentColor>.
Effect colors, used for frequent effects, are noticeable but more subdued than accent colors when overlaid on base/main colors. For effect color, use the tag "effectColor" e.g. <effectColor>#ffcc00</effectColor>.
例えば、砂の惑星 feat 初音ミク / ハチ を解析すると、砂っぽい配色パターンになりました。
WebLLM
WebLLMは、LLM を Web ブラウザ上で直接実行することを可能にするフレームワークです。
この技術の中核には WebGPU があり、ブラウザ内で GPU の計算能力を活用することで、高速な推論を実現しています。
初音ミク「マジカルミライ 2024」プログラミング・コンテストではサーバーサイドのプログラムの動作が認められていませんが、WebLLM を使うことで、ユーザーはサーバーサイドの処理を介さずに、プライバシーを保ちながらブラウザ上で直接 Llama 3、Mistral、Phi 3 などの LLM を利用できます。
ただし、現時点では WebGPL を使用できる環境がほぼ PC 上の Google Chrome に限られ、Firefox 等では明示的な設定変更が必要になったり、モバイル環境で動作しない点に注意が必要です。
ちなみに、プログラミングコンテスト締切後に Llama 3.1 がリリースされました。将来的にはこちらを活用することで性能改善ができそうです。
OpenAI GPT-4o
既にご存知の方が多いと思いますが、GPT-4o は OpenAI 社のプロダクトで、チャットだけでなく API を介して LLM を利用できます。
あらかじめ契約しておくと API キーが払い出され、このキーを使ってプログラマブルな活用が可能です。
主に、OpenAI の API キーを既にお持ちの上級者の方や、モバイル環境で任意の楽曲を再生したい方を意図してこちらに対応しました。
その他の LLM
実は当初 Anthropic Claude を API 経由で利用することも検討したのですが、Claude API のCORS 制約により断念しました。
ただ、Issue 上にもあるように Anthropic 社も既に課題を認識しているとのことですので、将来的に解決される可能性があります。
2024/08/26追記
Anthropic TypeScript API Library version 0.27.0 (2024/08/21のアップデート) にて CORS 対応したとのことです。詳細は CHANGELOG をご覧ください。
キャッシュ
楽曲URLをキーに２段階のキャッシュを挟んでいます。
1段階目のキャッシュは 「マジカルミライ 2024」プログラミング・コンテストの課題曲 6曲分のキャッシュです。これは解析済みのデータをスクリプト上で保持しています。これは WebGPL が使えない環境かつ OpenAI の API キーをお持ちでない方もいらっしゃる・・・というか大多数がそうだと思いますので、そういった大多数のユーザにも気軽に楽しめるように用意したものです。
2段階目のキャッシュは Web ブラウザのローカルストレージにあります。WebLLM/GPT-4o で解析したデータは XML 形式でローカルストレージに保存され、2回目以降同じ楽曲URLが与えられた場合は解析済みのデータを再利用します。再度新規で楽曲を解析したい場合は、キャッシュクリアしてローカルストレージを空にします。このキャッシュ層により、同じ曲を再生する度にLLMによる解析を待つことになる問題を解決しています。
キャッシュにない楽曲URLが与えられた場合のみ、WebLLM/GPT-4o での解析をスタートする作りにすることで、ユーザー体験を向上しています。
MV
MV 動画部分は JavaScript 3D ライブラリ Three.js によって描画した背景の上に、歌詞を CSS でオーバレイ表示しています。
何をやっているか、概要を以下に説明します。
- 画面奥方向に向かって進んでいく印象にするために、すべてのオブジェクトは手前に向かって移動します。
- TextAlive App API で取得した楽曲のビート情報をもとに、画面中央のサークルと光線をビートと同期したタイミングで出力しています。
- 歌詞にメロディを彷彿とさせるワードが出てきた時は、3D で描画した音符オブジェクトを飛ばしています。(このスクショだとちょっとわかりづらいけど、ちっちゃい音符がいくつか飛んでます)
- 歌詞に未来を彷彿とさせるワードが出てきた時は、画面奥に 3D パーティクルで描画したそのワードを描画しています。
- サビ前には演出を盛り上げるために大量のレンズフレアのエフェクトを出しています。
- サビ中は光線の数を普段の100倍にしています。
- 歌詞の1フレーズ内に繰り返しパターン（例: "何千回も何万回も"）が出てきたときは、縦書きで表示しています。
- 歌詞の中心的な内容を意味するキーフレーズが出てきた時は、ブラーをかけつつ大きくゆっくり表示しています。
ユーザーインターフェース
ユーザーインタフェースは、アプリの雰囲気を壊さずシンプルに情報を伝達することを心がけて実装しました。
例えば、WebLLM や GPT-4o を使った任意楽曲再生は、高度な設定としてデフォルトでは非表示にすることで、画面全体をシンプルに保ちました。
このあたりの細かい動作についても ?アイコンから説明するようにしました。
コントロールバーは画面上部に表示しています。
操作していないときは自動的に隠れるようにしました。
このアプリは PC、タブレット、モバイルのいずれにも対応しています。
縦向きで表示しようとするとメッセージを出して横向きにするように促したりしました。
予想通りではありますが、PC、タブレット、モバイルのいずれで表示してもレイアウトが大きく崩れないようにいろいろ調整するのがかなり難航しました...が、結果的には大体の環境ではうまく表示可能にできたと思います。
Mac, Windows, iPad, iPhone, Android の Google Chrome, Firefox, Safari で動作確認済みです。
開発における LLM の活用
このように、LLM は「Rhyme Traveler - ライムトラベラー」の中核をなす技術となっていますが、それとは別に開発プロセスにおいても LLM はとても大きな力となってくれました。
今回開発に携わった moomindani、べりんぐは両方とも、どちらかというとバックエンド技術を得意とするエンジニアで、フロントエンドやデザインなどには残念ながら強みがあまりありませんでした。
このため、開発時には CSS や JavaScript、特に Three.js について Claude 3.5 Sonnet とその新機能 Artifacts によるソースコード開発支援にかなり助けられました。
プロンプトに「cssとhtmlとjavascriptで、three.jsを使って、未来の動画背景を実装してください。」と書いてちょっと条件を足すだけで 3D 空間にパーティクルを描画するソースコードが出来上がってすぐプレビューされるのはライフチェンジングな体験でした...。
上で説明した MV の Three.js の実装は、こうやって推薦されたソースコードをいろいろ調整して出来上がったものです。
まとめ
初音ミク「マジカルミライ 2024」プログラミング・コンテストに参戦したお話でした。
普段仕事で書いているプログラムとは全然違うアプリを開発できて新鮮でした。
あと、開発中にはテストやデバッグ含めて『初音ミク「マジカルミライ 2024」楽曲コンテスト』の受賞作品6曲を数百回と繰り返し聴きましたが、全部好きになりました。ボカロPの方々は本当にすごい...!これも、マジカルミライのプログラミングコンテストならではの楽しさがありますね。
ソースコードの GitHub リポジトリはコンテスト終了後に公開する予定です。
まだ一般投票期間中ですし、一般投票でこの作品がどのくらい受け入れられるかは全くもってわからないのですが、私たちを含めて多くの方が楽しみにしているマジカルミライ2024の企画展に自分の作品が展示されることは大変感慨深いです。
東京会場に遊びに行こうと思うので楽しみにしています。
早くもまた来年もやりたい！
Discussion