Dall.E API と XR技術

Dall.E API と XR技術 2023/05 ChatGPT研究会 第8弾・OpenAI社 Dall.E API + XR技術！ takabrz1 Takahiro Miyaura

Microsoft MVP for Mixed Reality 2018-2023 某会社でSE(アプリケーション領域のアーキテクト的なお仕事なはず）＝ XRは趣味です（貢献領域：Mixed Reality） 宮浦 恭弘 (Miyaura Takahiro) ◼ XR系コミュニティ（大阪駆動開発やHolomagicians)に生息 ◼ HoloLens日本販売してからxR系技術に取組む ◼XR技術とそれに関連する技術も大好きです ◼ 新しい技術や、MRに使えそうな技術を調べる 技術Tips : https://qiita.com/miyaura https://zenn.dev/miyaura @takabrz1 ※よかったらこれを機にお知り合いになってください

• https://qiita.com/miyaura
• https://zenn.dev/miyaura

今回で第8弾 OpenAI社 Dall.E API + XR技術 2023/5/22 Copyright © 2023 Takahiro Miyaura 3

正直ベースですが今回は 「Dall.Eを使ってやって遊んでみた」です 今回の使い方が有用なユースケースですね！とはいかないかも。 2023/5/22 Copyright © 2023 Takahiro Miyaura 4

それがこちら 紹介は のちほど！ 2023/5/22 Copyright © 2023 Takahiro Miyaura 5

目次 ○ Generative AIとXRの話(せっかくなので) ○ Dall.Eについて ○ 概要 ○ OpenAI API（Create Image） ○ XR技術とDall.Eを組み合わせてみる ○ 概要＋環境（開発/言語等） ○ OpenAIで利用できるDall.E系のAPIの実装 ○ ○ ○ Create Image Create Image Edit Create Image Variation ○ おまけ ○ まとめ ※練習たびに詳細度が安定せず時間が短くなったり長くなったりしていたのでおおむね30-40分目標で話します。 2023/5/22 Copyright © 2023 Takahiro Miyaura 6

目次 ○ Generative AIとXRの話(せっかくなので) ○ Dall.Eについて ○ 概要 ○ OpenAI API（Create Image） ○ XR技術とDall.Eを組み合わせてみる ○ 概要＋環境（開発/言語等） ○ OpenAIで利用できるDall.E系のAPIの実装 ○ ○ ○ Create Image Create Image Edit Create Image Variations ○ おまけ ○ まとめ ※練習たびに詳細度が安定せず時間が短くなったり長くなったりしていたのでおおむね30-40分目標で話します。 2023/5/22 Copyright © 2023 Takahiro Miyaura 7

Generative(問わずかも) AI とXR技術 関連性が高い技術の組合せ 2023/5/22 Copyright © 2023 Takahiro Miyaura 8

Generative(問わずかも) AI とXR技術 XR技術ではAIや機械学習の話がよく出てくる XR技術を実現するベース(ともいえる) ○インタラクション ○ハンドトラッキング ○音声入力 2023/5/22 ○空間認識 ○SLAMによる自己位置推定 ○現実空間をスキャンし空間の特徴を把握 ○空間特徴が一致するで座標を推定 Copyright © 2023 Takahiro Miyaura 9

Generative(問わずかも) AI とXR技術 XR技術ではAIや機械学習の話がよく出てくる いくつか事例 その1 ○映画「The Matrix」コンテンツの技術デモ ✓Unreal Engine 5の様々なAI技術を活用 ✓ 例：パラメータで多種多様なキャラクターを生成(MetaHuman) ✓ その他、カークラッシュや街、交通等多くがAIによるシミュレーションで生成 ✓ https://www.unrealengine.com/ja/blog/introducing-the-matrix-awakens-an-unreal-engine-5-experience ○Peridot(Niantic) ✓Nianticの先日日本でもローンチされたペット育成要素の歩きゲーム ✓AR技術を常時使う (ためにスマホがフル稼働→熱い！バッテリをもりもり消費) ✓人, 動物, 木々, 土, 人工物, 池などを分類しそれに応じたコンテンツを実現 2023/5/22 Copyright © 2023 Takahiro Miyaura 10

• https://www.unrealengine.com/ja/blog/introducing-the-matrix-awakens-an-unreal-engine-5-experience

Generative(問わずかも) AI とXR技術 XR技術ではAIや機械学習の話がよく出てくる いくつか事例 その2 ○フォトグラメトリ ✓ 写真から3Dモデルを生成する技術 ✓ 物体を様々な角度から撮影しその情報を統合して立体化 ✓ 情報があるほど品質とデータ量が爆増 ✓ 撮影スキルも重要なため自動化のための3Dスキャン装置も発達 ○Luma AI ✓ 機械学習で動画ファイルから3Dモデルを作成 ○Lightship（NianticのARプラットフォーム） ✓Scanning Frameworkと呼ばれる空間スキャン用の機能がプレビューで公開 ✓NianticはLightship VPSという現実空間との位置合わせに必要な情報を上記の仕 組みで管理 2023/5/22 Copyright © 2023 Takahiro Miyaura 11

様々な人たちが取り組んでいる 先日のコミュニティイベントでも https://www.docswell.com/s/Tks_Yoshinaga/5VV14X-chatgpt https://speakerdeck.com/1ftseabass/ai-meeting-20230510 AR 福岡のTakashi YoshinagaさんがChatGPTで A-FRAMEというWebXR技術に使う言語を使っ て文字から立体物(立方体など)を空間に生成 田中正吾さんはChatGPTで文章からUnity 使ったXRコンテンツで立体物(立方体など) を空間に生成 新しい技術なので検証を兼ねた色々な試みが様々な方面で進んでいる この辺りがGenerative AI と XRの面白いところ 2023/5/22 Copyright © 2023 Takahiro Miyaura 12

• https://www.docswell.com/s/Tks_Yoshinaga/5VV14X-chatgpt
• https://speakerdeck.com/1ftseabass/ai-meeting-20230510

なお、今週ある Microsoft Build 2023で… Metaverse Meets Generative AI: Opportunities & Challenges Ahead https://build.microsoft.com/en-US/sessions/5f28e727-f447-48af-b853-dc6d96a7b635?source=sessions 2023/05/25 5:30 AM - 6:00 AM (日本時間ですよ！) 概要 Consider the intersection of the Metaverse and Generative AI. Together, we'll uncover and demonstrate practical ways to maximize the benefits of immersive experiences, virtual objects, and dynamic avatars in a rapidly evolving digital landscape. Engage with other leading minds and unveil opportunities, challenges, and societal impact. メタバースとジェネレーティブAIのつながりを考える。 急速に進化するデジタル環境の中で、没入型体験、 バーチャルオブジェクト、ダイナミックアバターの利 点を最大限に引き出す実践的な方法を、共に発見し、 実証します。他の先進的な研究者たちと交流し、機会、 課題、社会的影響を明らかにします。 2023/5/22 Copyright © 2023 Takahiro Miyaura 13

• https://build.microsoft.com/en-US/sessions/5f28e727-f447-48af-b853-dc6d96a7b635?source=sessions

私も混ざりたいｗ ということで今回に至る。 2023/5/22 Copyright © 2023 Takahiro Miyaura 14

目次 ○ Generative AIとXRの話(せっかくなので) ○ Dall.Eについて ○ 概要 ○ OpenAI API（Create Image） ○ XR技術とDall.Eを組み合わせてみる ○ 概要＋環境（開発/言語等） ○ OpenAIで利用できるDall.E系のAPIの実装 ○ ○ ○ Create Image Create Image Edit Create Image Variation ○ おまけ ○ まとめ ※練習たびに詳細度が安定せず時間が短くなったり長くなったりしていたのでおおむね30-40分目標で話します。 2023/5/22 Copyright © 2023 Takahiro Miyaura 15

Dall.Eについて 2023/5/22 Copyright © 2023 Takahiro Miyaura 16

Dall.Eについて 超概要 一言でいえば、文章や画像で画像をつくる技術 https://platform.openai.com/docs/guides/images/introduction ○画像生成 ○ Promptに応じた画像を作成 ○ 元画像に似た雰囲気の画像を生成 ○画像編集 ○ Promptで一部 または 全部の画像を編集 ○ 一部の場合はマスク画像を用意 2023/5/22 Copyright © 2023 Takahiro Miyaura 17

• https://platform.openai.com/docs/guides/images/introduction

Dall.Eについて OpenAI API 気になるお値段は… 生成, 編集, バリエーションの3種類が提供 https://platform.openai.com/docs/api-reference/images Resolution Price 1024×1024 $0.020 / image 512×512 $0.018 / image 256×256 $0.016 / image 現在はβ版 Create Image ○ 画像生成 Create Image Edit ○ 画像編集 Create Image Variation ○ 元画像に似た画像生成 ○ Prompt書いてお願いする ○ 画像の一部 or 全部を編集 ○ 元画像を渡す ○ Prompt書いてお願いする ○ 一部編集の場合はマスク 画像が必要 いずれも一般的なAPIを呼び出せば使える 2023/5/22 Copyright © 2023 Takahiro Miyaura 19

• https://platform.openai.com/docs/api-reference/images

Dall.Eについて OpenAI API 3つのAPIの共通的な仕様※()内はパラメータ名 ○生成数(n) ○ 1リクエストでお願いする画像数 ○画像サイズ(size) ○ 以下からチョイス ○ 256x256 ○ 512x512 ○ 1024x1024 ○応答の画像形式 (response_format) ○ 以下からチョイス ○ Url ○ Base64 2023/5/22 Copyright © 2023 Takahiro Miyaura 20

Dall.Eについて OpenAI API 3つのAPIの共通的な仕様※()内はパラメータ名 ○生成数(n) ○ 1リクエストでお願いする画像数 ○画像サイズ(size) ○ 以下からチョイス ○ 256x256 ○ 512x512 ○ 1024x1024 ○応答の画像形式 (response_format) URL形式の場合 Base64形式の場合 生成画像の格納先URLが返却 生成画像がbase64エンコードで返却 Base64→バイナリ変換後画像で扱える …, "data“ : [ { "url“ : "https://..." }, { "url“ : "https://..." } ] … ○ 以下からチョイス ○ Url ○ Base64 2023/5/22 …, "data“ : [ { “b64_json“ : " iVBOR..." }, { " b64_json“ : " iVBOR..." } ], … コンテンツ次第で使い分ける？ 今回はURL形式使いました Copyright © 2023 Takahiro Miyaura 21

目次 ○ Generative AIとXRの話(せっかくなので) ○ Dall.Eについて ○ 概要 ○ OpenAI API（Create Image） ○ XR技術とDall.Eを組み合わせてみる ○ 概要＋環境（開発/言語等） ○ OpenAIで利用できるDall.E系のAPIの実装 ○ ○ ○ Create Image Create Image Edit Create Image Variation ○ おまけ ○ まとめ ※練習たびに詳細度が安定せず時間が短くなったり長くなったりしていたのでおおむね30-40分目標で話します。 2023/5/22 Copyright © 2023 Takahiro Miyaura 22

XR技術とDall.Eを組み合わせてみる 概要＋環境（開発/言語等） わざわざトリッキーなことに。。。 Azure Storage? ○ URL形式の場合格納 ○ 時限式で消失 ⑥リクエスト ⑦画像取得 ③格納 OpenAI(Dall.E) ②Prompt,画像 ①Prompt,画像 XRで何かする ○ Unityで開発 ○ UIはMRTKで開発 ⑤画像URL Azure Function ○ Node.jsで作った ○ OpenAI API毎に作成 ○ リクエスト/応答の加工 Open AI API ○ 画像を作ってくれる ④画像URL openAIのSDK使っていないw コードは公開したいと思ってます。どこかで記事投稿(ZennやQiita)する予定 2023/5/22 Copyright © 2023 Takahiro Miyaura 23

XR技術とDall.Eを組み合わせてみる OpenAIで利用できるDall.E系のAPIの実装 現実空間に自由に画像を出せるコンテンツ ○ ○ ○ プロンプトや画像をもとに空間に画像を配置 画像編集やバリエーションで作成すると親子関係が可視化 本当はHoloLens 2でその景色を撮影して加工するといった話も入れる予定だった 手元に表示されるコンソール 2023/5/22 空間に表示されている様子 Copyright © 2023 Takahiro Miyaura 24

Create Image プロンプトで画像を生成 2023/5/22 Copyright © 2023 Takahiro Miyaura 25

XR技術とDall.Eを組み合わせてみる OpenAIで利用できるDall.E系のAPIの実装 - Create Image プロンプトから画像生成する リクエスト(Json)◆:必須 ◆ Prompt : プロンプト ○ n : 生成数(1-10) ○ size : 生成画像サイズ ○256x256, 512x512, 1024x1024 ○ response_format : フォーマット ○url, b64_json ○ User : ログ等に使用 一般的なWeb APIの呼び出し方法で実装可 ○ リクエスト ○ Postで投げる ○ 認証はリクエストヘッダに[API Key]を設定 ○ レスポンスはresponse_format次第 ○ b64_jsonはBase64で画像データが来る ○ レスポンス(Json) ○ created : タイムスタンプ ○ data : 画像情報(配列) ○ url（response_format→url) ○ b64_json（response_format→b64_json) 2023/5/22 (データ量が多くなる) urlはurlが返ってくる ○ ○ クラウドストレージに格納される 寿命はリクエスト投げてから約2時間 こんな使い方かな？ ➢ 生成後の画像を選別後何かする→URL形式 ➢ 全部の画像を何かに使う→b64_json形式 Copyright © 2023 Takahiro Miyaura 26

Create Image Edit プロンプトと元画像で画像を生成 2023/5/22 Copyright © 2023 Takahiro Miyaura 27

XR技術とDall.Eを組み合わせてみる OpenAIで利用できるDall.E系のAPIの実装 - Create Image Edit プロンプト,元画像をベースに画像加工する リクエスト(Form)◆:必須 ◆ Image : 元画像(ファイル) ○ Mask : マスク画像(ファイル) ◆ Prompt : プロンプト ○ n : 生成数(1-10) ○ size : 生成画像サイズ ○256x256, 512x512, 1024x1024 ○ response_format : フォーマット ○url, b64_json ○ User : ログ等に使用 画像の送信については注意が必要 ○ リクエスト ○ Create Image の話に加えて・・・ ○ 画像形式はファイルとして送る必要がある ○ フォームデータとして送る ※OpenAIのライブラリではBufferオブジェクトでOK ○ レスポンスはresponse_format次第 ○ Create Imageと一緒なので省略 レスポンス(Json) ○ created : タイムスタンプ ○ data : 画像情報(配列) ○ url（response_format→url) ○ b64_json（response_format→b64_json) 2023/5/22 Copyright © 2023 Takahiro Miyaura 28

XR技術とDall.Eを組み合わせてみる OpenAIで利用できるDall.E系のAPIの実装 - Create Image Edit 元画像の一部を修正する場合はマスク画像が必要 Prompt:緑 奥に続く道が見える 森林 編集元画像 2023/5/22 白抜きのところは透過です 変更部分をくりぬいたマスク Copyright © 2023 Takahiro Miyaura Prompt:道に鳥を追加 得られた結果 29

Create Image Variations 元画像のバリエーションを作成 2023/5/22 Copyright © 2023 Takahiro Miyaura 30

XR技術とDall.Eを組み合わせてみる OpenAIで利用できるDall.E系のAPIの実装 - Create Image Variations 元画像をベースに似た雰囲気の画像を生成する リクエスト(Form)◆:必須 ◆ Image : 元画像(ファイル) ○ n : 生成数(1-10) ○ size : 生成画像サイズ ○256x256, 512x512, 1024x1024 ○ response_format : フォーマット ○url, b64_json ○ User : ログ等に使用 画像の送信については注意が必要 ○ リクエスト ○ Create Image / Create Image Edit の話と同じ ○ 画像形式はファイルとして送る必要がある ○ フォームデータとして送る ※OpenAIのライブラリではBufferオブジェクトでOK ○ レスポンスはresponse_format次第 ○ Create Imageと一緒なので省略 レスポンス(Json) ○ created : タイムスタンプ ○ data : 画像情報(配列) ○ url（response_format→url) ○ b64_json（response_format→b64_json) 2023/5/22 Copyright © 2023 Takahiro Miyaura 31

Unityでの実装(おまけ) 2023/5/22 Copyright © 2023 Takahiro Miyaura 32

Unityでの実装(おまけ) Httpリクエスト周り普段のでOK 画像を空間に出すときはMaterialは複製して使う 意図しない変更を招く ○ Unity Editor上で行うマテリアルの変更は永続的 ○ 実行中に変更しても設定が戻らない （Inspector上の設定値はもとに戻るがマテリアルはそうはいかないらしく、何度がデータを壊した） コードの抜粋 var instantiate = Instantiate(ImageGameObject); instantiate.transform.position = Camera.main.transform.position + Camera.main.transform.forward; instantiate.transform.rotation = Quaternion.LookRotation(Camera.main.transform.forward, Vector3.up); var imageObjectManager = instantiate.GetComponent<ImageObjectManager>(); Material newMaterial = Instantiate(imageObjectManager.ImageRenderer.sharedMaterial); newMaterial.mainTexture = texture; imageObjectManager.ImageRenderer.sharedMaterial = newMaterial; 2023/5/22 Copyright © 2023 Takahiro Miyaura 33

(本当の)Omake 2023/5/22 Copyright © 2023 Takahiro Miyaura 34

空間認識を活用して壁面を変える 空間認識で壁,天井,床等を検出し表面にメッシュ(画像)を張る ○ ○ DALL.Eで作成した画像をテクスチャーとしてはめ込む プロンプトを調整して壁材、床材に特化した画像生成できれば、装飾やプロトタイピングっぽくなる？ Meta Quest Proでも面白いかも 2023/5/22 Copyright © 2023 Takahiro Miyaura 35

目次 ○ Generative AIとXRの話(せっかくなので) ○ Dall.Eについて ○ 概要 ○ OpenAI API（Create Image） ○ XR技術とDall.Eを組み合わせてみる ○ 概要＋環境（開発/言語等） ○ OpenAIで利用できるDall.E系のAPIの実装 ○ ○ ○ Create Image Create Image Edit Create Image Variation ○ おまけ ○ まとめ ※練習たびに詳細度が安定せず時間が短くなったり長くなったりしていたのでおおむね30-40分目標で話します。 2023/5/22 Copyright © 2023 Takahiro Miyaura 36

まとめ DALL.E APIとXR技術を組み合わせ ○Generative AIとXR技術の相性はよい ○XR技術を形作る機能もAIや機械学習の恩恵を受けている → 製造コスト減、現実のコピー等 ○映像制作やゲーム等様々なコンテンツで活用 ○生成系は主に3Dモデルでの需要は高い（特にこちらが盛り上がってる印象） ○DALL.E ○プロンプトや画像をもとに、文脈はよく似た雰囲気の画像を生成加工ができる ○現在DALL.E用のAPIはβ版 ○画像を加工しながら使いこなすにはマスク画像はハードル高そうだ ○XR技術とDall.Eを組み合わせてみる ○空間に生成状態（派生具合とか）を見られるのは面白かったです。 ○プロトタイピング的なコンテンツでテクスチャを柔軟にしたい場合に頼るいった使い方？ 2023/5/22 Copyright © 2023 Takahiro Miyaura 37

大阪駆動開発 関西を中心に、IT系のおもしろそうなことを 楽しんでやるコミュニティ