---
title: Dall.E API と XR技術
tags:  #mixed reality #hololens #xr #azure #openai  
author: [Miyaura](https://www.docswell.com/user/m-taka596)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/GJ5Y5Q6XJ4.jpg?width=480
description: ChatGPT研究会 第8弾・OpenAI社 Dall.E API + XR技術！ (https://algyan.connpass.com/event/278599/) 登壇資料。DALL.EAPIの使い方の紹介。XR技術として活用する例としてテクスチャとして画像を表示や、空間認識と組み合わせ現実の壁に画像を出すといった検証で得た気づきなどを紹介
published: May 22, 23
canonical: https://www.docswell.com/s/m-taka596/KYW13R-ALGYAN-DALLE-XR-20230522
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/GJ5Y5Q6XJ4.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/9E2GNPMQER.jpg)

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
※よかったらこれを機にお知り合いになってください


# Page. 3

![Page Image](https://bcdn.docswell.com/page/D7YVP5XY7M.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/VENM5N1RJ8.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/Y79NYR5Z73.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/G78K6W6YJD.jpg)

目次
○ 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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/L7LZ9N99ER.jpg)

目次
○ 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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/4EMVZXZVEW.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/PER26N6W79.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/P7XDMNMVJX.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/37KXGNG5JD.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/LJ35NVN175.jpg)

様々な人たちが取り組んでいる
先日のコミュニティイベントでも
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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/8JDDW8WKJG.jpg)

なお、今週ある
Microsoft Build 2023で…
Metaverse Meets Generative AI: Opportunities &amp; 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&#039;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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/VEPX9893J8.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/27VLMNMNEQ.jpg)

目次
○ 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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/5JGXGKG57L.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/47Q8XNXLEP.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/KE426G6571.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/L71MVDV2JG.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/G7W3LYL272.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/4JZVMXM473.jpg)

目次
○ 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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/YE65N4NGJV.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/GE5Y5Q5XE4.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/972GNPNQ7R.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/DJYVP5PYJM.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/V7NM5N5RE8.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/YJ9NYRYZJ3.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/GJ8K6WKYED.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/LJLZ9NZ97R.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/47MVZXVV7W.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/P7R26N2WJ9.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/PJXDMNDVEX.jpg)

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&lt;ImageObjectManager&gt;();
Material newMaterial = Instantiate(imageObjectManager.ImageRenderer.sharedMaterial);
newMaterial.mainTexture = texture;
imageObjectManager.ImageRenderer.sharedMaterial = newMaterial;
2023/5/22
Copyright © 2023 Takahiro Miyaura
33


# Page. 33

![Page Image](https://bcdn.docswell.com/page/3JKXGNX5ED.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/LE35NV51J5.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/8EDDW8DKEG.jpg)

目次
○ 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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/V7PX98X3E8.jpg)

まとめ
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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/2JVLMNLN7Q.jpg)

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


