v0を使って我らが食神のメニューを必要以上にスタイリッシュにする
この記事は whywaita Advent Calendar 2023 24日目の記事です。
前日は MetaVariable さんの 型落ちゲーミングPCからはじめる自宅Kubernetes + GPU環境 でした。
さて、whywaitaさんといえば食神という、とある大学の準食堂とまで言われている有名な中華屋さんのメニューをデジタル化していることで定評があります。 今回はこのデータを今流行りの生成系AIを用い、メニューの可視性を向上させてみようという試みを実施します。
肝心のデータは ここ にありますので、まずはgit clone しましょう。 データは定番メニューと限定、日替わり定食などと別れているのでそれぞれ開いてみると以下の用になっているかと思います。以下はfixed.csvに格納されているメニューです。
id,name,price,category,day_start,day_end,can_weekday,description 1,麻婆豆腐,650,定食,,,,1番 2,豆腐のうま煮,650,定食,,,,2番 3,肉野菜炒め,650,定食,,,,3番 4,豚肉とザーサイの細切り炒め,650,定食,,,,4番 5,麻婆春雨,650,定食,,,,5番 6,かに玉子,650,定食,,,,6番 7,ニラ玉子,650,定食,,,,7番 8,玉ねぎと玉子炒め,650,定食,,,,8番 9,豚肉と玉ねぎの生姜焼き,780,定食,,,月,月曜11番 .....
はい。非常に美味しそうですね。食べたい。
私の母校も実はこのとある大学なのですが、当時はサークルのメンバーに誘われよく食神に赴いており、大体4番の豚肉とザーサイの細切り炒めを注文しておりました。付属のスープに春雨を入れる派でした。
データセットがそろったので、本題の加工に入っていきたいと思います。可視化の向上の定義をちゃんと話すと永遠と出来ると思いますので、今回は見た目の向上に限って言及していきます。
v0.devというのをご存知でしょうか？Next.jsの開発元のVercelが発表した生成系AIを用いた対話式のUI生成SaaSです。Tailwind CSSとShadcn UIをベースにコードを生成してくれるようです。 長らくWaitinglistに登録したまましばらく忘れていたのですが、先日めでたく『You now have access to v0 by Vercel』のメールと共に利用可能になったので、使っていきたいと思います。
v0を開くと以下のように入力欄と、今まで生成されたUIがタイル表示された画面に遷移すると思います。
UIを作ってもらうために、プロンプトを打つのですが、CSVからフードメニューのダッシュボードを作って欲しいので、まずは『csv datasource dashboard for cuisine menu』と入力してみました。
cuisineは郷土料理という意味が強いので厳密にはズレるのですが、まあ町中華は郷土料理みたいなものなので今回は良しとしましょう。
しばらく待つとUIが出来てました。1回に3パターン生成されるのがデフォルトのようです。ちょっとずつそれぞれのUIが出来てくるのはタイムラプスを見ているような感覚になりますね。
いくつか生成を試した所、面倒くさくなったまあ良いのではと思えるのが合ったので実際に利用してみようと思います。v0はあくまでNext.jsのコンポーネントとして出力してくれるのみなので、大元のプロジェクトが必要になります。ひとまずプロジェクトを作成しましょう。
プロジェクトを作成した後、v0でinitし、既存のプロジェクトでv0を利用出来るようにします。その後生成したコンポーネントを利用するため、v0 addを実施する必要があります。
以下コマンドでVercelプロジェクトをセットアップ出来ます。vercel init した際にどのフレームワークを利用するか聞かれますが、v0が現状Next.js対応のみなので、nextjsを選択しましょう。
$ npm install -g vercel $ vercel init
生成したコンポーネントの画面の右上部に code というボタンがあるのでクリックし、add コマンドを取得します。
以下のコマンドでコンポーネントを取得します。以下コマンドで私が今回生成し利用するコンポーネントを取得することが出来ます。
$ npx v0 add F3KMrbPfT1s
すると先程のコードが components 配下に、export function された状態で生成されます。これを適宜pagesディレクトリにページを作成し、コンポーネントを呼んであげましょう。
npm run dev すると、以下の用にページがレンダリングされました。
利用出来るようになったのはいいのですが、肝心のcsvを読みに行かなければなりません。csvを読みコンポーネントを生成する関数をつくります。 今回は認証もなく、ただデータを取りに行くだけなので、コンポーネント内部から直接httpリクエストを投げちゃいます。
無事コンポーネントが生成され、実データが反映出来ました。
本当は商品画像もほしい所ですが実データが手元にないので今回はno imageな画像で代替しています。
今回作成したコードはこちらのリポジトリに格納しています。絞り込み検索もつけたかったのですが、うまく行かず。うまく行ってないコードをbranch切って上げてありますので興味ある方は暇つぶしに是非(笑)
生成系AIによって我々の環境は大きく変わりました。今まで出来なかったことが出来るようになり、直面する課題はより高度になっていきます。ですが本質は変わらないので楽しんで適応できればとおもいます。
※私はNext.jsはおろかVercelもほぼ初めて(TypeScriptは新卒2年目以降書いてない浦島太郎)の状態なのですが、CopilotやCursorのGPT-4を使いつつ、対話し学習しながらこれを作成しました。本当強力な右腕&教育係みたいな感じで、出来なかったことが出来るようになるのは楽しいですね。この記事で本当に伝えたいことは生成系AIが自分の能力をExtendしてくれることの凄さかもしれません。
さて明日の whywaita Advent Calendar 2023 はいよいよ我らがwhywaitaさんです！！！
