生成系AIで画像を空間に生やしてみた

生成系AIで画像を空間に生やしてみた 2023/06 AIミーティング 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

生成系AIで画像を空間に生やしてみた とある場で 生成AI × XRで話をする機会があったのもので。 2023/06/14 Copyright © 2023 Takahiro Miyaura 3

それがこちら 紹介は のちほど！ 2023/06/14Copyright © 2023 Takahiro Miyaura 4

目次 Dall.EのOpenAI API使って画像の生成と可視化を試した遊んでいた話です ○ Dall.Eについて ○ 概要 ○ OpenAI API（Create Image） ○ XR技術とDall.Eを組み合わせてみる ○ 概要＋環境（開発/言語等） ○ OpenAIで利用できるDall.E系のAPIの実装 ○ ○ ○ Create Image Create Image Edit Create Image Variation ○ おまけ ○ まとめ 2023/06/14 Copyright © 2023 Takahiro Miyaura 5

目次 Dall.EのOpenAI API使って画像の生成と可視化を試した遊んでいた話です ○ Dall.Eについて ○ 概要 ○ OpenAI API（Create Image） ○ XR技術とDall.Eを組み合わせてみる ○ 概要＋環境（開発/言語等） ○ OpenAIで利用できるDall.E系のAPIの実装 ○ ○ ○ Create Image Create Image Edit Create Image Variation ○ おまけ ○ まとめ 2023/06/14 Copyright © 2023 Takahiro Miyaura 6

Dall.Eについて 2023/06/14 Copyright © 2023 Takahiro Miyaura 7

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

• 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/06/14 Copyright © 2023 Takahiro Miyaura 9

• 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/06/14 Copyright © 2023 Takahiro Miyaura 10

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/06/14 …, "data“ : [ { “b64_json“ : " iVBOR..." }, { " b64_json“ : " iVBOR..." } ], … コンテンツ次第で使い分ける？ 今回はURL形式使いました Copyright © 2023 Takahiro Miyaura 11

目次 Dall.EのOpenAI API使って画像の生成と可視化を試した遊んでいた話です ○ Dall.Eについて ○ 概要 ○ OpenAI API（Create Image） ○ XR技術とDall.Eを組み合わせてみる ○ 概要＋環境（開発/言語等） ○ OpenAIで利用できるDall.E系のAPIの実装 ○ ○ ○ Create Image Create Image Edit Create Image Variation ○ おまけ ○ まとめ 2023/06/14 Copyright © 2023 Takahiro Miyaura 12

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/06/14 Copyright © 2023 Takahiro Miyaura 13

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

Create Image プロンプトで画像を生成 2023/06/14 Copyright © 2023 Takahiro Miyaura 15

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/06/14 (データ量が多くなる) urlはurlが返ってくる ○ ○ クラウドストレージに格納される 寿命はリクエスト投げてから約2時間 こんな使い方かな？ ➢ 生成後の画像を選別後何かする→URL形式 ➢ 全部の画像を何かに使う→b64_json形式 Copyright © 2023 Takahiro Miyaura 16

Create Image Edit プロンプトと元画像で画像を生成 2023/06/14 Copyright © 2023 Takahiro Miyaura 17

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/06/14 Copyright © 2023 Takahiro Miyaura 18

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

Create Image Variations 元画像のバリエーションを作成 2023/06/14 Copyright © 2023 Takahiro Miyaura 20

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/06/14 Copyright © 2023 Takahiro Miyaura 21

Omake 2023/06/14 Copyright © 2023 Takahiro Miyaura 22

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

目次 Dall.EのOpenAI API使って画像の生成と可視化を試した遊んでいた話で すDall.Eについて ○ 概要 ○ OpenAI API（Create Image） ○ XR技術とDall.Eを組み合わせてみる ○ 概要＋環境（開発/言語等） ○ OpenAIで利用できるDall.E系のAPIの実装 ○ ○ ○ Create Image Create Image Edit Create Image Variation ○ おまけ ○ まとめ 2023/06/14 Copyright © 2023 Takahiro Miyaura 24

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

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