この記事は SecHack365 Advent Calendar 2024 の 9 日目の記事です。

SecHack365'24 開発駆動コース仲山ゼミトレーニーの @newt239 です。有志トレーニー（&アシスタント）によるアドカレということで、今年度 SecHack365 で開発している UI コンポーネントライブラリ「Ginga UI」についての話をしようと思います。

これはなに？

文章で説明するより見てもらったほうが早いと思うので、まずは以下のツイートをご覧ください。

私のポートフォリオサイト上に実装した「LLM に配色を生成させる機能」のデモ映像です。この機能は以下のページにアクセスすることで、誰でもサクッとお試しいただけます。

簡単にしくみを説明すると、ユーザーから入力されたキーワードをバックエンドに渡し、OpenAI の API へ、キーワードに合ったカラーコードを生成するよう指示を出しています。

以下はフロントエンドのリポジトリです。それぞれの Vue コンポーネントで CSS を確認すると、色を指定する箇所では CSS 変数を利用して指定していることが分かると思います。

バックエンドとして稼働させている API サーバーは以下のリポジトリで、Hono で実装しています。src/routes/ai/index.tsが本機能に関わる部分で、Cloudflare D1 でリクエストを記録し、24 時間あたりのリクエスト回数に制限をかけています。プロンプトではユーザーからのキーワードに合う色を考え、与えた CSS 変数の値を HEX 形式で考えるように指示を出しています。レスポンスは OpenAI の Structured Output を利用し、期待するフォーマットをあらかじめリクエストに含めています。

Generative UI という考え方

生成 AI x UI というアプローチは最近の流行りですが、この文脈の話を探っているとよく「Generative UI」というキーワードを目にします。Vercel による 2023 年 10 月の記事「Announcing v0: Generative UI」では、Generative UI という用語を「フロントエンド開発のベストプラクティスと生成 AI の可能性の融合」と説明していますが、私個人的にはこの言葉はより広い意味を持つべきだと考えていて、「AI による UI への干渉」全般を指すもの、というくらいの括りで使うのがちょうどよいのではないかと思っています。

v0 は入力されたプロンプトに適した Web フロントエンドのコードを生成し、対話形式で改善していくことができるサービスですが、近年類似のサービスは増えており、2024 年 10 月に StackBlitz が発表した Bolt.new や、同月末に Github が発表した GitHub Spark など、大手が相次いでリリースを行っています。

SecHack365 で作っているもの

上記したような実装は、開発者がどの部分でどの CSS 変数を使うか、いくつ変数を用意するか等を十分に吟味する必要があり、大規模なウェブサイトで取り入れるのは現実的ではありません。

Ginga UI はこれらの問題を考えることなく、AI によるテーマ生成を簡単に実装することができる UI コンポーネントライブラリを目指しています。

Ginga UI が目指すもの

この UI コンポーネントライブラリが目指しているのは「ユーザーに新たな体験を届ける」という点です。

前述した v0 などのサービスは「開発者をサポートする」という点に主軸が置かれていますが、私はレイアウトなどの情報設計は AI に任せるべきではないと考えているため、このライブラリはそれらとはターゲットが異なります。

活用例として、長文投稿サイト等の UGC (User Generated Contents) が主となる Web サイトや、個人のブログサイトへの導入が考えられます。

文章のテイストや著者の嗜好に応じて、ページごとにデザインが異なる Web ページを表示することで、没入感の高い体験をユーザーが得られるはず、と考えています。

進捗

風呂敷を広げるだけ広げて夢物語を語っていますが実際はそう単純なものではなく、実用に足るものに至るまでまだいくつかの課題が残っています。

例として、「2, 3 色で表現することが難しいキーワードにどう対応するのか」という問題があります。「虹」というキーワードを視認性を損なわずに表現するのは困難です。また、「哲学」のような抽象的なキーワードが入力された場合、適切な表現方法を決めるのも難しい問題だと言えるでしょう。私個人としてはある程度「AI のランダム性」に任せたいという気持ちがあるため、あまりプロンプトを長くして縛るようなことはしたくないですが、コントラストの確保など、視認性に関わる部分についてはある程度制限をかける必要はあると考えています。これについては、例えばコントラストを計算した結果が一定値を下回った場合再生成させる、といった方法が考えられます。

他にもいろいろ考えていることはあるんですが、自分の中で結論が出ていないものも多いというのと、まだ修了まで時間があるので、この記事ではここまでにしておきます。3 月上旬に SecHack365 の成果発表会があり、私以外にも面白いものを作っているトレーニーが大勢いるので、ぜひお越しただければと思います。

むすびにかえて

現在すでに npm レジストリからインストールすることが可能ですが、まだ実用に足る段階には達していないため、導入は今しばらくお待ちください。

以下のリポジトリで開発を行っているので、興味を持っていただけた方がいましたらぜひ star をポチっとつけてもらえると喜びます。