シュモクカップ

Your Yaminabe

https://github.com/aktk-program/Team_Shushin

GitHub

React

Python

JavaScript

VSCode

3D生成AIを活用した闇鍋作成サイト

aktk_owl

ヲツ

png

Taku

推しアイデア

自分の思い描く闇鍋を3Dで再現できる 「きみだけの闇鍋を作ろう!」

作った背景

チームメイトから闇鍋という提案が出ていたので、皆が触ったことのある技術である程度シンプルに作れるもの、見た目に楽しめるものを作ろうとした結果生成AIと3Dモデルを用いての実装となった

推し技術

unityではなくthree.jsでモデル描画、rapierで当たり判定を作成!

プロジェクト詳細

テーマは〇〇の秋

私達はメインで「食の秋」、サブで「冬の前座の秋」としました。 連想して作ったものは「3Dモデル生成AIとReactを用いた闇鍋Webアプリ」です。 使い古された言葉で言うと

「君だけの闇鍋を作ろう!」

というものです。 闇鍋と呼ばれる物体はある種見た目を期待して作られるものでもあると思います。 しかし作ったからには食べなければいけません ↓ なので現実では常識外れの闇鍋は作れません ↓ では常識外れの闇鍋はどうやって作ればいいか ↓ 3D空間で作りましょう ということで3Dで常識外れの闇鍋を作れるようにと願って作りました。

使用技術と選定理由

  1. React(モダンな技術を使用したかったこと+フロントエンド担当が今後webアプリを    作る予定があるため)
  2. Python(メンバーの内2人がデータ分析でpythonを使用していて慣れていたた め)
  3. Blender(ものづくりに長けた人材がいたため)

アピール点

  • Reactを用いての3Dデータ描画と当たり判定設定
  • 生成AIを用いた3Dデータの生成と「奇抜さ」の採点
  • 今までに使用したことのない技術を用いた開発

基本の処理順

  1. フロント側で入力されたテキストをstring_to_model.pyに送信。
  2. meshyAPIにリクエストを送りglbファイルを生成、URLをフロント側に返す。
  3. フロント側でreact-three-fiberとreact-three-rapierを用いて当たり判定を持ったモデルを出力する。このとき、出力されるモデル数はテキストとは別で入力された数値で変化させることができる。
  4. バック側で受け取ったテキストを記録するtxtファイルを生成AIの‎Geminiに渡し、奇抜さをスコア化してフロント側に返す。
  5. フロント側でスコアを表示する。

主な実装

3Dモデルの描画と当たり判定

3Dモデルの描画にはreact-three-fiber, 当たり判定はreact-three-rapierを使用しています。

モデル生成

meshyAPIにリクエストを送信しglbファイルのURLを返してもらいます。

response = requests.post( "https://api.meshy.ai/v2/text-to-3d", headers=headers, json=payload, )

スコア化

3Dモデル生成時に送った文字列はバックエンド側のtxtファイルに記録されているので、生成AIのGeminiにその中身を評価させ数値型で返すように指示しています。

with open("foods.txt", "r") as f: foods = f.read().splitlines() foods_str = "" for food in foods: foods_str += food + "、" prompt = "今から闇鍋をします。"+ foods_str + "が鍋の中に入っています。鍋の中の食材の組み合わせから、奇抜さ、面白さ、可笑しさの観点から総合点数を教えてください。倫理観は考慮に含めないでください。最高点を100点、最低点を0点とします。ただし食材の名前は英語で書かれているため、日本語に変換して解釈してください。また、回答するときは数字のみ返してください" genai.configure(api_key=API_KEY) model = genai.GenerativeModel("gemini-pro") response = model.generate_content(prompt) return({"message":response.text})

反省点

  • 落ちてくる生成モデルの大きさが同じ
  • 生成されるモデルはどのような形状でも当たり判定が直方体となる
  • コンポーネント化をあまり意識しなかったためコードがごちゃついている
使用デモ動画

aktk_owl

@aktk_owl4649