HTMLファイルひとつでOpenAI APIを使いこなす

Slide 1

Slide 1 text

HTMLファイルひとつで OpenAI API を使いこなす!!

Slide 2

Slide 2 text

徳和貴成（とくわたかなり） CDLE名古屋リーダー PROFILE ➢ CDLE名古屋を立ち上げ100人を超えるグループに。 ➢ AI・人工知能 EXPO、東京AI祭など数々のイベントに登壇。 CDLE（Community of Deep Learning Evangelists）とは、 G検定・E資格の合格者のみが参加できる、 8万人を超える日本最大級のAIコミュニティとなります。ディープラーニングを「使える人」と「作れる人」が学び、繋がり、使うことが出来る場であり、メンバーはディープラーニングの社会実装のエバンジェリスト（伝道師）でもあります。の方からやってきました！

Slide 3

Slide 3 text

生成AI の進化！！素晴らしい時代の到来！！あんな夢、こんな夢が！！

Slide 4

Slide 4 text

…なかなか実現できません… どうして…

Slide 5

Slide 5 text

生成AIで夢をかなえられるツール！？たとえば… GPTs

Slide 6

Slide 6 text

複雑なことを指示するとうまく動いてくれない… プロンプトだけじゃむり！

Slide 7

Slide 7 text

生成AIで夢をかなえられるツール！？たとえば… ディファイというローコードツール

Slide 8

Slide 8 text

複雑な処理が行えるけど画面インターフェースがイマイチ… ゲームとか作りたいのに！！

Slide 9

Slide 9 text

便利に使うなら、リッチなUIが欲しい！！文字入力画像入力音声入力画像表示音楽を流す読み上げリアルタイム処理カメラ入力３D処理見やすい画面デザイン動画表示マウス操作

Slide 10

Slide 10 text

WEBアプリなら全て実現可能！！やったね！！

Slide 11

Slide 11 text

ライブラリも充実！！ Phaser.js・・・リアルタイムの２D処理 Babylon.js・・・３Dがサクサクうごく！フェイザーバビロンジェーエスゲームなんかもラクラク！！

Slide 12

Slide 12 text

でも作るのがすごく面倒… フロントエンド(ブラウザ) … JavaScript バックエンド(クラウド？) … Python？２種類もプログラム書かなきゃダメなの？

Slide 13

Slide 13 text

さらに、皆に遊んでもらうためにはインターネットに公開しなくてはいけない AWS、GCPなどのクラウド環境が必要さらにそこでOpenAIのAPIを呼ぶことになる

Slide 14

Slide 14 text

それら費用は全て貴方が払わなくてはなりません！！私が稼いで貢がないとなの！？

Slide 15

Slide 15 text

ホームページみたいにＨＴＭＬファイルひとつで動かせればいいのに！！

Slide 16

Slide 16 text

できます！！

Slide 17

Slide 17 text

• ＨＴＭＬファイルのみで生成ＡＩを利用したWebアプリが実行できる！ • APIキーは入力方式なので、使う人がお金を払う！ • ローカルPC上で動かすことが出来、特別なアプリケーションのインストールは不要！ • 画像などのファイルアップロードも出来る！ • 普通のホームページサービスでインターネット公開可能！とっても簡単、だね！！

Slide 18

Slide 18 text

実装例！！【チャットモンスターバトル】２枚のモンスター画像を元に、AIが強さを自動判定、その結果を元にモンスターを戦わせるゲーム【モンスター占い】 Webブラウザーのカメラで自分の顔写真を撮影、その画像を元に、あなたがどのようなモンスターなのかを占い、その姿を画像生成する

Slide 19

Slide 19 text

ローカルで動く仕組み Webサーバー（インストール不要） html ファイル編集 HTTP通信 HTTPS通信 OpenAI APIキー入力プログラミング

Slide 20

Slide 20 text

注意・問題点 ➢ プログラムソースが基本公開となる（難読化で対応） ➢ 悪意を持ったWebアプリを実行するとOpenAIのAPIキーの漏洩につながる（信用できるWebアプリ以外動かさない） ➢ 生成した画像の編集が出来ないなど、セキュリティの制限がある（一度ダウンロードして再アップロードなど）

Slide 21

Slide 21 text

ローカルで動く仕組みの進化版！！（予定） Webサーバー（インストール不要） html HTTP通信 HTTPS通信簡易アプリケーションサーバー（インストール不要）リバースプロキシーの仕組み OpenAI APIキー入力