Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTMLファイルひとつでOpenAI APIを使いこなす
Search
徳和貴成
July 28, 2024
Technology
0
330
HTMLファイルひとつでOpenAI APIを使いこなす
徳和貴成
July 28, 2024
Tweet
Share
More Decks by 徳和貴成
See All by 徳和貴成
3分AIプログラミング 「ゼロから構築!OpenAI APIを使ったWebアプリケーション」
tokuwa
0
110
Other Decks in Technology
See All in Technology
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
240
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
170
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
150
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
370
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
110
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
2025年夏 コーディングエージェントを統べる者
nwiizo
0
140
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
450
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
240
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
74
5k
GraphQLとの向き合い方2022年版
quramy
49
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
GitHub's CSS Performance
jonrohan
1032
460k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Making Projects Easy
brettharned
117
6.4k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Into the Great Unknown - MozCon
thekraken
40
2k
Transcript
HTMLファイルひとつで OpenAI API を 使いこなす!!
徳和 貴成 (とくわ たかなり) CDLE名古屋 リーダー PROFILE ➢ CDLE名古屋を立ち上げ100人を超えるグループに。 ➢
AI・人工知能 EXPO、東京AI祭など数々のイベントに登壇。 CDLE(Community of Deep Learning Evangelists) とは、 G検定・E資格の合格者のみが参加できる、 8万人を超える日本最大級のAIコミュニティとなります。 ディープラーニングを「使える人」と「作れる人」が 学び、繋がり、使うことが出来る場であり、 メンバーはディープラーニングの社会実装の エバンジェリスト(伝道師)でもあります。 の方からやってきました!
生成AI の進化!! 素晴らしい時代の到来!! あんな夢、こんな夢が!!
…なかなか実現できません… どうして…
生成AIで夢をかなえられるツール!? たとえば… GPTs
複雑なことを指示すると うまく動いてくれない… プロンプト だけじゃむり!
生成AIで夢をかなえられるツール!? たとえば… ディファイというローコードツール
複雑な処理が行えるけど 画面インターフェース がイマイチ… ゲームとか 作りたいのに!!
便利に使うなら、 リッチなUIが欲しい!! 文字入力 画像入力 音声入力 画像表示 音楽を流す 読み上げ リアルタイム処理 カメラ入力
3D処理 見やすい画面デザイン 動画表示 マウス操作
WEBアプリなら 全て実現可能!! やったね!!
ライブラリも充実!! Phaser.js・・・リアルタイムの2D処理 Babylon.js・・・3Dがサクサクうごく! フェイザー バビロンジェーエス ゲームなんかも ラクラク!!
でも作るのがすごく面倒… フロントエンド(ブラウザ) … JavaScript バックエンド(クラウド?) … Python? 2種類もプログラム 書かなきゃダメなの?
さらに、皆に遊んでもらうためには インターネットに公開しなくてはいけない AWS、GCPなどのクラウド環境が必要 さらにそこでOpenAIのAPIを呼ぶことになる
それら費用は全て貴方が 払わなくてはなりません!! 私が稼いで 貢がないとなの!?
ホームページみたいに HTMLファイルひとつで 動かせればいいのに!!
できま す!!
• HTMLファイルのみで生成AIを利用したWebアプリが 実行できる! • APIキーは入力方式なので、使う人がお金を払う! • ローカルPC上で動かすことが出来、特別なアプリケーショ ンのインストールは不要! • 画像などのファイルアップロードも出来る!
• 普通のホームページサービスでインターネット公開可能! とっても簡単、だね!!
実装例!! 【チャットモンスターバトル】 2枚のモンスター画像を元に、AIが強さを自動 判定、その結果を元にモンスターを戦わせる ゲーム 【モンスター占い】 Webブラウザーのカメラで自分の顔写真を撮 影、その画像を元に、あなたがどのようなモン スターなのかを占い、その姿を画像生成する
ローカルで動く仕組み Webサーバー (インストール不要) html ファイル編集 HTTP通信 HTTPS通信 OpenAI APIキー入力 プログラミング
注意・問題点 ➢ プログラムソースが基本公開となる (難読化で対応) ➢ 悪意を持ったWebアプリを実行するとOpenAIのAPIキーの漏洩 につながる (信用できるWebアプリ以外動かさない) ➢ 生成した画像の編集が出来ないなど、セキュリティの制限がある
(一度ダウンロードして再アップロードなど)
ローカルで動く仕組みの進化版!!(予定) Webサーバー (インストール不要) html HTTP通信 HTTPS通信 簡易アプリケーション サーバー (インストール不要) リバースプロキシー
の仕組み OpenAI APIキー入力
ぜひ!面白いWebアプリを 作成して共有しよう!!
詳細の手順はこちら!! https://note.com/t_tokuwa/n/n99cda8413fd8