Slide 1

Slide 1 text

MS Tech CAMP #24 はじめてのアプリ制作 〜ChatGPTのようなアプリを作ってみよう〜

Slide 2

Slide 2 text

東京都立大学大学院 情報科学域 2023年10月〜 MLSAとして活動 〜2023年8月 IDEACTIVE JAPAN PROJECT 学生アンバサダー https://x.com/y_a_m_a_y_a ハッカソンが好き! はじめての人むけのイベントをしたい! 来月やります!

Slide 3

Slide 3 text

18:10〜 | オープニング 18:20〜 | 本日の説明・紹介 19:20〜 | アプリをデプロイ 20:20〜 | カスタマイズしたことを共有 休憩 10 mins TODAY’S PROGRAM プログラムの 流れ 18:30〜 | アプリ作成 19:50〜 | 独自でカスタマイズ 〜19:10 | 20:40〜 | クロージング

Slide 4

Slide 4 text

3ChatGPTアプリの 作成

Slide 5

Slide 5 text

͸͡ΊͯͷਓͰ΋ΞΠσΞΛܗʹͰ͖Δ DIBU(15Λ࢖ͬͨϋϯζΦϯ Πϕϯτ໨త ͸͡Ίͯͷਓ͕DIBU(15Λ׆༻ͯ͠࡞Δ͜ͱɾಈ͘͜ͱͷָ͠͞ΛຯΘ͏ʂ $IBU(15ʹ࠷ॳͷίʔσΟϯάΛͯ͠΋Β͍ɺमਖ਼ͯ͠ϓϩτλΠϓΛ࡞੒͢Δɻ 本イベントの資料は IDEACTIVE JAPAN PROJECTにて 開催したイベント資料を 更新したものです

Slide 6

Slide 6 text

ここがわかる! 1. ChatGPTを使ったサイト作成! 1. ChatGPTみたいなアプリを作成 2. 自分でオリジナルのサイトを作れる・調べられる 1. Azureを使ってWEB上にサイトを公開! 初心者向けのイベント! (一部実際の運用としては良くない部分もありますが、初心者向けのイベントなので わかりやすさや工数の少なさを優先しています)

Slide 7

Slide 7 text

Ø )5.-ͱ͸ɺ)ZQFS5FYU.BSLVQ-BOHVBHFͷུͰɺ΢ΣϒϖʔδΛ࡞੒͢ ΔͨΊͷݴޠͷҰͭͰ͢ɻ ΢Σϒϖʔδͷߏ଄Λఆٛ͢Δͷʹ࢖ΘΕɺςΩετɺը૾ɺϦϯΫɺ ϘλϯͳͲͷཁૉΛ௥Ճ͢Δ͜ͱ͕Ͱ͖·͢ɻ )5.-ͱ͸ʁ

Slide 8

Slide 8 text

Ø $44ͱ͸ɺ$BTDBEJOH4UZMF4IFFUTͷུ Ͱɺ΢ΣϒϖʔδΛσβΠϯ͢ΔͨΊͷݴޠ ͷҰͭͰ͢ɻ )5.-͕จॻͷߏ଄Λఆٛ͢Δͷʹର͠ɺ $44͸ݟͨ໨΍ελΠϧΛఆٛ͢Δͷʹ ࢖ΘΕ·͢ɻ ྫ͑͹ɺจࣈͷ৭΍ϑΥϯτɺഎܠ৭ɺ ഑ஔͳͲΛࢦఆ͢Δ͜ͱ͕Ͱ͖·͢ɻ $44ͱ͸ʁ

Slide 9

Slide 9 text

$IBU(15ͷ࢖͍ํʢΞΧ΢ϯτ࡞੒ɾϩάΠϯฤʣ IUUQTDIBUPQFOBJDPNDIBU ʹΞΫηε MSアカウントあるいはGoogleアカウントを お持ちの場合、アカウントを新規作成せずとも そちらを使ってログインすることも可能です

Slide 10

Slide 10 text

アカウントへのログイン アカウントをまだ作成していない場合

Slide 11

Slide 11 text

IUUQTDPEFWJTVBMTUVEJPDPN ʹΞΫηε 74DPEFͷΠϯετʔϧ ೚ҙ ͋Δͱศརʂ

Slide 12

Slide 12 text

ϑϩʔνϟʔτ $IBU(15Ͱίʔυੜ੒ ϑΝΠϧͷ࡞੒ 74DPEFʹϖʔετ ϒϥ΢βͰදࣔ ׬੒ܗ

Slide 13

Slide 13 text

$IBU(15ʹϓϩάϥϛϯάͤͯ͞ΈΔ ෼

Slide 14

Slide 14 text

ʮJOEFYIUNMʯʮTUZMFDTTʯͱ͍͏ ໊લͷϑΝΠϧΛ࡞੒͢Δ ˞.BD͸ೋຊࢦΫϦοΫɺ8JOEPXT͸ӈΫϦοΫͰ ৽نσΟϨΫτϦΛ࡞ͬͯɺͦͷதʹ্هͷ)5.-ϑΝΠϧͱ $44ϑΝΠϧΛ࡞੒͢Δɻ ෼

Slide 15

Slide 15 text

$IBU(15Ͱੜ੒͞ΕͨίʔυΛίϐʔ ˠʮJOEFYIUNMʯʮTUZMFDTTʯʹϖʔετ ෼

Slide 16

Slide 16 text

ʮJOEFYIUNMʯΛϒϥ΢βʹυϥοάυϩοϓ ෼

Slide 17

Slide 17 text

4JavaScriptを書いて 動くようにしよう!

Slide 18

Slide 18 text

今回のアプリケーションは… ブラウザでの表示 Azure OpenAI Service こんにちは! 返答: こんにちは! どのようにお手伝いしましょうか? 今まで作ったところ 次作るところ

Slide 19

Slide 19 text

JavaScriptとは • Webブラウザ上で動作するプログラミング言語 • HTMLに動きを加えたり、処理の実行を行うことができる • Ex: 100 x 20を計算して など • よく聞くJavaとは違うもの… • 詳しい書き方は、MSLearnにわかりやすいドキュメントがあります! • h9ps://learn.microsoI.com/ja-jp/training/paths/web-development-101/

Slide 20

Slide 20 text

index.htmlを修正して作成してみよう Index.html内にで囲った部分を作ると 書くことができます。 中身に書くコードは次のスライドにて

Slide 21

Slide 21 text

JavaScriptを書いてみよう! ChatGPTに聞いてみよう! プロンプト例: <今まで書いたコードを載せる> このコードに、ボタンを押したらテキストを Azure OpenAI ServicesのAPIへリクエストを送り、 返答を受け取り表示するコードを書いて

Slide 22

Slide 22 text

document.getElementById('submit-btn').addEventListener('click', function() { var submitButton = document.getElementById('submit-btn'); var inputText = document.getElementById('input-text').value; var responseContainer = document.getElementById('response'); // ボタンを無効化し、ローディング中のテキストを表示 submitButton.disabled = true; submitButton.textContent = 'Loading...'; fetch('https://mlsa-openai.openai.azure.com/openai/deployments/mlsa-test/chat/completions?api-version=2023-07-01-preview', { method: 'POST', headers: { 'Content-Type': 'application/json', // 危険: APIキーが露出しています 'api-key': ‘<YOUR_API_KEY>' }, body: JSON.stringify({ messages: [{role: 'system', content: 'あなたはチャットbotです。日本語で返答して'}, {role: 'user', content: inputText}], max_tokens: 800, temperature: 0.7, frequency_penalty: 0, presence_penalty: 0, top_p: 0.95, stop: null }) }) .then(response => response.json()) .then(data => { // 応答からassistantのメッセージのみを抽出して表示 if (data.choices && data.choices.length > 0 && data.choices[0].message) { responseContainer.innerHTML = data.choices[0].message.content; } else { responseContainer.innerHTML = '応答が見つかりませんでした。'; } }) .catch(error => { console.error('Error:', error); }) .finally(() => { // ローディングが終了したら、ボタンを再度有効にし、テキストを元に戻す submitButton.disabled = false; submitButton.textContent = 'Submit'; }); }); コピー用

Slide 23

Slide 23 text

5GitHubの登録

Slide 24

Slide 24 text

GitHubとは… • コードのバージョン管理システム (厳密には、Gitがバージョン管理システムでGitHubは Gitを使えるプラットフォーム) • Azureでデプロイ(公開)する際に使用 • Microsoftの子会社 バージョン管理のイメージ コード書く コミット (保存する) コード書く コミット (保存する) コード書く 戻したい! も可能

Slide 25

Slide 25 text

GitHubへ登録 https://github.com/ へアクセス

Slide 26

Slide 26 text

6 GitHubへコードを コミット

Slide 27

Slide 27 text

リポジトリの作成 1. Newボタンを押す 2. 名前を入力・「Private」を選択 1. 今回APIキーを使っているので 必ずPrivateにしてください! ෼

Slide 28

Slide 28 text

コードをアップロード(コミット) 「uploading an existing file」を選択 ෼

Slide 29

Slide 29 text

作成したコードをドラッグ&ドロップ Commit changes をおす

Slide 30

Slide 30 text

ファイルが追加されていれば完了

Slide 31

Slide 31 text

7Azure for Students の登録

Slide 32

Slide 32 text

Azureとは…. • Microsoftが運営しているクラウドサービス • サーバーなどを貸してくれる できること(一例) • ボタンひとつでWordPressのデプロイ・公開 • WEBサイトのデプロイ・公開 • 自分専用のAIを作れる • 松屋の牛丼か判別するAIなど • 最新AIを使える • GPTのAPI・文字起こし・音声合成・翻訳など

Slide 33

Slide 33 text

WordPress環境を簡単に作成可能!

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Azure Custom Visionをつかえば可能︕ それぞれ 10~15枚程度で 学習が可能!

Slide 36

Slide 36 text

Azure for Studentsへの登録 https://azure.microsoft.com/ja-jp/free/studentsへ アクセス! 「無料で始める」から登録 以下のようなページが表示されたら完了!

Slide 37

Slide 37 text

8Azureへ作ったサイトを デプロイする

Slide 38

Slide 38 text

App Serviceを選択する 検索窓にAppと入れてApp Serviceを選択する

Slide 39

Slide 39 text

静的Webアプリを選択

Slide 40

Slide 40 text

Azure for Studentsを 選択 自由 (ex: <名前>-chatgpt) 自由 (ex: <名前>-chatgpt)

Slide 41

Slide 41 text

East Asiaを選択 GitHubを選択 先ほど作成した GitHubのリポジトリを選択 HTMLを選択

Slide 42

Slide 42 text

しばらく待つとAzure&サイトのデプロイ完了 5分ぐらいかかります

Slide 43

Slide 43 text

9サイトに パスワード認証を かけよう!

Slide 44

Slide 44 text

現在の状態だとセキュリティー的に危ない! APIキーが誰でもみれてしまう… 悪用されるかも….

Slide 45

Slide 45 text

一般的には、サーバーでの通信や認証をする ブラウザでの表示 Azure OpenAI Service こんにちは! 返答: こんにちは! どのようにお手伝 いしましょうか? 今回の仕組み ブラウザでの表示 サーバー 認証や制限を してアクセス Azure OpenAI Service 一般的な仕組み 発展的な 内容

Slide 46

Slide 46 text

今回はサイト自体にパスワードをつける

Slide 47

Slide 47 text

Freeから有料プランに変更 認証は油料プランのみ対応

Slide 48

Slide 48 text

構成より変更 「構成」より、パスワード保護を 「ステージングと運用の両方の 環境を保護」を選択 URLで適用されていることを確認

Slide 49

Slide 49 text

有料プランからからfreeに変更 設定後であれば、なぜかfreeプランでも認証使える

Slide 50

Slide 50 text

今後の発展的な内容

Slide 51

Slide 51 text

.4-FBSO ɾ "[VSFGPS4UVEFOUT ü .4-FBSO͸ϚΠΫϩιϑτެࣜͷ ϥʔχϯάπʔϧʢແྉʣ ü "[VSFGPS4UVEFOUT͸Ϋϥ΢υΛ υϧ෼ແྉͰ࢖͑Δ ü ιϑτ΢ΣΞΛແྉͰμ΢ϯϩʔυ ͢Δ͜ͱ͕Ͱ͖Δ

Slide 52

Slide 52 text

(JU)VC4UVEFOU%FWFMPQFS1BDL ü ϑϧͰ࢖͏ͱສԁҎ্ͷಛయ͕ ΋Β͑Δ ü υϝΠϯ೥ແྉ ϥΠϒ഑৴αʔϏε͕࢖͑ΔͳͲ https://education.github.com/pack

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

(JU)VC$PQJMPU ü "*͕ίʔυΛॻ͘ͷΛ ख఻ͬͯ͘ΕΔ ü ΍Γ͍ͨ͜ͱΛ೔ຊޠͰॻ͘ͱ ݴޠʹ߹ΘͤͯίʔυΛੜ੒ ü (JU)VC&EVDBUJPOΛਃ͠ࠐΉͱ ݄υϧֶ͕ੜ͸׬શແྉ

Slide 55

Slide 55 text

No content