This course will teach you how to build AI-powered apps with the ChatGPT, Dall-E and GPT-4 APIs. Go here to try the interactive browser-version: https://scrimba.com/learn/buildaiapps

✏️ This course was created by Tom Chant, a teacher at Scrimba. If you have any feedback to Tom, please reach out to him on Twitter here:
https://twitter.com/tpchant

Also, follow Scrimba on YouTube here: https://www.youtube.com/c/Scrimba

We recommend that you learn basic HTML, CSS, and JavaScript before taking this course. Here are two free courses that will get you up to speed:
🔗 HTML & CSS: https://scrimba.com/learn/htmlandcss
🔗 JavaScript: https://scrimba.com/learn/learnjavascript

⭐️ Code ⭐️ 
🔗 Download via Scrimba: https://scrimba.com/learn/buildaiapps

💫 Links mentioned in course:
🔗 GPT-4 waiting list: https://scrimba.com/links/gpt4-waitlist-openai
🔗 OpenAI Home: https://scrimba.com/links/openai
🔗 OpenAI Docs: https://scrimba.com/links/openai-docs-intro
🔗 OpenAI Completions endpoint docs: https://scrimba.com/links/openai-completions-docs
🔗 GPTTools.com model comparison: https://scrimba.com/links/open-ai-comparison-tool
🔗 OpenAI Playground: https://scrimba.com/links/open-ai-playground
🔗 Dall-E: https://scrimba.com/links/dall-e-openai
🔗 OpenAI endpoint compatibility table: https://scrimba.com/links/chatgpt-endpoint-compatibility
🔗 GPT-4 Chatbot conversation object format: https://scrimba.com/links/chatgpt-object-format
🔗 Data used to fine-tune We-Wingit Chatbot: https://scrimba.com/links/we-wingit-data-csv
🔗 Firebase home: https://scrimba.com/links/firebase-home
🔗 Firebase .val() method: https://scrimba.com/links/firebase-val-method
🔗 Object.values MDN: https://scrimba.com/links/object-dot-values
🔗 Netlify: https://scrimba.com/links/netlify-home

⭐️ Contents ⭐️
0:00:00 Introduction
0:01:19 Course Intro
0:04:56 MoviePitch intro
0:07:53 The Boilerplate
0:11:26 Getting an OpenAI API Key
0:13:32 Getting info for fetch request
0:15:14 Building an OpenAI fetch request
0:20:23 The first AI fetch request
0:26:41 Models
0:30:18 Tools
0:34:03 Refactor to use dependency l - env variable
0:38:11 Refactor to use dependency ll - The dependency
0:41:07 Refactor to use dependency lll - update fetchReply
0:44:40 Take out of Scrimba
0:46:45 Personalising the message
0:53:04 Tokens
0:57:09 fetchSynopsis
1:03:44 Aside - few shot approach
1:10:45 Aside - few shot approach ll
1:13:42 Refactor fetchSynopsis
1:21:00 Architecture
1:23:23 Title and Temperature
1:31:52 Reaching for the stars
1:37:52 Aside - createImage
1:46:56 fetchImagePrompt
1:54:21 Displaying the image and finishing off the UX
2:03:16 OutroKnowItAll: GPT-4 Chatbox2:06:47 KnowItAll Intro
2:09:40 Starter Code
2:13:10 Aside: How ChatGPT models work for chatbots
2:18:24 Conversation and instructions
2:20:21 Add user input to conversation array
2:23:06 The createChatCompletion endpoint
2:24:38 The model and object
2:28:46 Render the output, update the array
2:33:37 Aside: Theory: Frequency and presence penalties
2:37:07 presence_penalty practice
2:38:36 frequency_penalty practice
2:44:54 The chatbot’s personality
2:47:06 Firebase Intro
2:48:27 Firebase Account and database set up
2:50:43 Firebase dependency and database set up
2:55:53 Push method and instructions object
2:58:33 Update fetch Reply
3:02:24 Update fetchReply 2
3:04:49 Update the database
3:07:19 Render the conversation from the DB
3:12:02 The “start over” button
3:15:20 OutroWe-Wingit: Fine-tuned chatbot3:17:28 Intro to fine-tuning
3:20:04 Convert the Chatbot to We-Wingit
3:22:15 An Overview of the AI
3:23:52 Data for fine-tuning
3:26:34 The data we’re using
3:30:05 CLI 1 - Setting up the environment
3:33:03 CLI 2 - Data Preparation Tool
3:37:03 CLI 3 - Tuning the model
3:38:55 Updating the JS 1
3:41:33 Updating the JS 2
3:44:15 Updating the JS 3
3:47:01 The Separator
3:52:32 Aside - Stop Sequence
3:55:50 Adding the stop sequence
4:00:36 n_epochs
4:07:24 Intro to deployment
4:09:46 Download and GitHub
4:12:07 Netlify sign-up
4:13:56 Add Netlify env var
4:15:54 Netlify CLI
4:17:30 Netlify serverless function 1
4:19:52 Update fetchReply
4:24:28 Serverless function 2
4:27:30 Serverless function 3
4:29:21 Serverless function 4
4:32:32 Outro

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

在 这个 计 划 基 础 课 中 你 会 学 习 如何 建 立 ai - 支 援 的 应 用 软 件 与 chat gptd olly 和 gpt 4 的 ap i tom  ch ant 创 建 了 这个 课 程 tom 是 一个 前 线 发 展 家 和 课 程 创 建 者 与 s cri mb

a 大家好 免 费 的 c ode c amp 人 们 欢 迎 来 到 这个 互 动 课 程 在 这里 你 将 要 建 立 创 建 ai - 支 援 的 应 用 软 件 使 用 一些 不 过 几 个 月 前 看 似 不 可能 的 功 能 我们 会 从 最

基本 的 开始 各位 c amp ers 歡迎 來到 這個 互 動 課 程 你們 將 要 建 立 一些 令 人 驚 嘆 的 ai - 支 援 應 用 程 式 連 幾 個 月 前 都 沒有 發 生

過 的 功 能 我們 會 從 最 基本 的 開始 所以 你們 不 需要 任 何 之前 的 知 識 關 於 open ai  api 事 實 上 這 次 課 的 唯 一 要 求 就是 基本 的 v an illa  javascript 和 一些 奇 妙 性 這 次 課 的 特別 之 處 就是 它 是 項 目 基 礎 而且 有 很多 挑 戰 這 意 味 著 你 會 在 鍵 盤 上 寫 上 文 字 並 在 整 個 課 程 中 挑 战 如果你 在 想 如何 在 设 计 上 手 写 文 章 别 担 心 我们 已经 帮 你 解 决 了 在 s cri mb a 的 互 动 版 本 你可以 停 止 视 频 复 制 文 档 然后 在 你的 网 页 上 连 续 运 行 项 目 或者 如果你 喜欢 你可以 在 网 上 下 载 文 档 从 那 些 项

连 续 运 行 项 目 链 接 在 下面 的 描 述 中 哦 我们 先

最 后 的 事情 如果你 喜欢 这个 课 程 请 在 这里 点 个 赞 这 会 非常 感 谢 如果 您 想 联 系 我 请 在 我的 推 特 上 与 我 联 系 我的 名 字 是 tp ch art 好的 让 我们 开始 吧

 d ali  and  gp t - 4 welcome  to  building

 ai  apps  with  chat gpt  d ali  and  gp t - 4 i  am  super  excited  to  bring  you  this  course on  the  technology  everybody  is  talking  about we  are  going  to  study  how  to  use  the  open ai  api we  will  be  using  various  open ai  models including  the  latest  gp t - 4  model we  will  be  looking  at  prompt

 engineering 我们 将 研 究 如何 使 用 open ai  api 我们 将 使 用 各 种 open ai 模 型 包括 最 新 的 gpt - 4

模 型 我们 将 研 究 提 示 工 程 我们 将 建 立 聊 天 机 我们 将 精 心 设 计 一个 模 型 在 我们 的 资 料 上 当然 一 路 上 将 有 更 多 的 挑 战 我 需要 说 一 句 快 速 的话 我们 将 在 这个 课 程 中 使 用 gpt - 4  api 的 第二 项 项 目 目前 有 一个 等 待 名 单 可以 使 用 ap i 不 疑 在 近 日 这个 等 待 名 单 将 上 线 ap i 将 为 每 个 人

提 供 ap i  in  the  second  project  in  this  course now  at  present  there  is  a  waiting  list  to  get  your  hands  on  the  api no  doubt  in  the  near  future  the  wait  list  will  go and  the  api  will  be  available  to

 everybody but  for  now  while  the  wait  list  exists why  not  click  on  this  screen  shot which  will  take  you  through  to  the  sign  up  page and  you  can  join  the  waiting  list  there  if  it  still  exists ok  so  what  are  we  going  to  build 在 等 待 清 單 還 存 在

不 妨 點 擊 這 張 畫 面 這 會 帶 您 到 登 入 頁 面 您 可以 在 那 裡 加入 等 待 清 單 如果 它 還 存 在 。 好 我們 要 怎麼 建 造 呢

我們 會 先 利 用 開 放 ai 的 能 力 創 造 人 類 標 準 的 言 語 和 圖 像 來 建 造 這個 酷 炫 的 電 影 音 樂 應 用 程 式 將 一個 一 句 话 的 概 念 转 为 一个 全 片 幅 的 电 影 接 着 我们 会 利 用 gpt - 4 模 式 来 创 造 一个 叫 做  know  it  all  的

机 我们 还 会 利 用 谷 歌 的  firebase 应 用 应 用 应 用 使 用 者 可以 继 续 聊 天 与 聊 天 机 交 流 并 在 更 新

的 时间 内 把它 重 新 设 置 to  create  an  ask  me  anything  chat bot  called  know it all and  we 'll  use  a  google  firebase  database so  the  user  can  persist  the  conversation  they  have  with  the  chat bot and  pick  it  up

 at  a  later  date  after  refreshing  the  browser last ly  we 're  going  to  stay  with  the  chat bot  concept but  under  the  hood  everything  will  be  different we  will  enter  the  world  of  fine

t uning this  is  where  we  upload  our  own  dataset and  we  create  a  chat bot  that  can  answer  specific  questions

我们 会 进 入 细 节 的 世界 这 就是 我们 在 上 传 自己 的 数 据 库 然后 我们 会 创 建 一个 聊 天 机 可以

回 答 具 体 的 问题 从 自己 的 数 据 这 一 技 巧 是 非常 重要 的 如果 你想 使 用 聊 天 机 为 了 具 体 的 目 的 例 如 与 您 的 公 司 进 行 客 户 服 务 问题 与 此 同 时 我们 也 会 学 习 一个 非常 有 趣 的 技 巧 就是 您 在 使 用 sec ret  keys 的 ap i 时 我们 会 在 net l ify 上 开 发 一个 秘 密 钥 匙 让 您 可以 在 分享 您 的 项 目 时 不 担 心 钥 匙 被 破 坏 这 解 决 了 我们 在 用 秘 密 钥 匙 的 ap i 在 前 端 项 目 上 的 问题 现在 我们 的 课 堂 没有 太 多 的 要 求 我们 会 用 v an illa 的 j ava script 我 相信 您 有 足 够 的 了 解 这 些 j ava script 并 不是 非常 复 杂 in  front

- end  projects now  there  are  not  too  many  prere quis ites  for  this  course we 're  going  to  be  working  in  vanilla  javascript and  i 'll  assume  you  have  a

 reasonable  knowledge  of  it now  the  javascript  in  this  isn 't  very  complicated  for  the  most  part as  long  as  you  understand  the  basics  of  a  fetch  request you 'll  be  absolutely  fine and  if  you 're  rusty  on  fetch  requests don 't  worry  at  all we 'll  actually  go  through  it  all  step  by  step and  i  don 't  think  you 'll  have  a  problem a part  from  that we 'll  be  focusing  fully  on  the  ai and  working  through

 it 你 會 完全 沒 問題 如果你 對 於 盜 用 要 求 很 不 熟 悉 別 擔 心

我們 會 一 步 一 步 地 解 決 問題

你 不會 有 任 何 問題 除 此 之 外 我們 會 專 注 於 ai 一 步 一 步 地

我的 名 字 是 tom  ch ant 我 會 是 你 這 堂 課 的 教 練 你可以 找 到 我 在 tw itter 我的 帳 號 是 t p chant 總 是 很好 聽 聽 你 對 這個 課 程 的 感 受 現在 在 你 開始 之前 你 為什麼 不 去 s cri mb a 的 d isc ord 平 台 去 今天 的 i  will 頻道 讓 社 群 知道 你 正 在 開始 這個 課 程 學 習 是 更 有 趣 和 更 有 效 率 的 所以 不 妨 與 其 他 學 生 一起 交 流 在 d isc ord 平 台 上 互 相 鼓 勵 並 幫 助 彼 此 然後 不 再 多 說 了 我們 直接 進 入 第一個

年 t erry  ross io 和 bill  mars ili 賣 出 了 d enz el  washington 電 影 《 d é jà  vu 》 的 權 利 為 了 一 筆 5 億 美元 的 新 紀 錄 並 且 在 全 球 上 漲 超 過 180 億 美元 你們 有 想 過 要 把

《 d é jà  vu 》 變 得 更 大 、 更

大 、 更 大 嗎 我 相信 你們 一定 有 但 我 相信 你們 不會 因為 我 相信 你們 不會 因為 我 相信 你們 不會 因為 我 相信 你們 不會 bill  mars ili  sold  the  rights  to  the  den zel  washington  film  de ja  vu for  a  record  breaking

5  million and  it  went  on  to  gross  more  than  $ 180  million  worldwide have  you  ever  dreamed  of  making  it  big  in  the  movies coming  up  with  that  one  idea  that  will  make  you  rich be yond  your  wild est  dreams well  the  most  successful  projects  start  with  one  single  idea but  once  you 've  had  that  idea  you  need  to  work  with  it 在 電 影 裡

你 能 夠 想 到 一個 能 夠 讓 你 超 越 你的 幻 想 的 主 題 最 成 功 的 項 目 一 開始 就 只有 一個 主 題 但 當 你 想 到 這個 主 題 後 你 需要 跟 著 它

一起 工作 思 考 它 花 上 小時 在 晚 上 工作 才 能 把它 變 成 一個 市 場 性 的 東西 或者 你 能 夠 做 到 的 如果 你可以 用 一個 簡單 的 想 法 只 用 一 句 話 讓 開 放 ai 的 大 語 言 模 式 為 你 做 剩 下 的 工作 那 以前 是 科 學 史 現在 是 科 學 事 實 這是 一 部 電 影 的 片 段 外 面 的 設 計 非常 簡單 我們 把 一個 單 句 的 構 思 放 在 電 影 裡 我們 點 擊 發 送 這 就是 我們 要 做 的 我們 坐 下來 等 待 10 秒 或 15 秒 然後 我們 得 到 的是 開 發 ai 做 了 它 所 做 的 事 就是 製 作 一個 好 電 影 我們 得 到 一些 作 品 作 為 蓋 面 一個 好 題 目 還有 一 張 明 星 的 名 單 最 重要 的是 我們 得 到 的 都是 這個 概 念 帶 給 我們 這個 主 題 的 想 法 這 都是 開 發 ai 帶 給 我們的 力 量 我們 會 用 開 放 ai 的 ap i 我們 會 用 模 型 來 理 解 圖 標 的 元 素 我們 會 學 習 製 作 標 題 如何 調 整 標 題 來 得 到 結果 以及 如何 利 用 例 子 來 訓 練 模 型 我們 會 從 文 字 上 抽 取 資 訊 並 且 從 文 字 上 生 成 圖 片 最後 我們 會 有 一個 很 好的 基 礎

and  how  we  can  use  examples  to  train  the  model we 'll  be  looking  at  extracting  information  from  texts and  also  generating  images  just  with  words and  by

 the  end  of  all  that we 'll  have  a  great  foundation in  how  to  use  open ai  in  front - end  projects now  i  want  to  give  you  a  warning as  we  build  this  project the  api  key  for  open ai will  be  sat  there  on  the  front  end and  that  means  it 's  visible any body  could  go  in  through  dev t ools to  the  network  tab and  they  could  steal  your  api  key now  while  you 're  developing  locally that  is  fine but  don 't  share  your  project with  an  api  key or  publish  it  to  github with out  ignoring  the  api  key because  that  will  compromise  the  api  key now  later  in

 this  course 你 需要 用 你的 ap i 钥 匙 现在 你 在 本 地 发 展 这 也 没 问题 但是 不要 分享 你的 项 目 与 一个 ap i 钥 匙 一起 或者 发 布 给 g it hub 不 过 不 认 为 ap i

钥 匙 因为 这 会 妨 碍 ap i 钥 匙 现在 在 这 次 课 后 但 不 在 这 项 目 中 我们 将 来 看看 如何 在 网 络 上 安全 地 存 储 ap i 钥 匙 在 没有 人 能 看到 的 网 络 上 但 在 此 期 间 请 注意 你 所 做 的 事情 与 你的 ap i 钥 匙 有 关 好 当 你 准 备 好了 让 我们 跳 进 去 查 看 我 等 你 所 要 的 的 ht ml 和 c ss 讓 我們 看看 我們 已經 有 的 密 碼 然後 我們 就 直接 進 入 ai 在 ind ex ht ml 裡面 沒有 什麼 特別 奇怪 或 不 一 般 的 東西 我 帶 了 幾 個  google 文 字 我們 有  play f air 和  pop p ins 然後 在 身 體 下面 我們 有 一個  header 範 部 它 有 一個  movie  p itch 標 誌 你可以 看到 的 然後 下面 有 一個  main 範 部 它 分 成 兩 個 範 部 這個 第一 個 範 圍 是 關 於 設 置 的 那 就是 我們 現在 所 看到 的 所有 東西 这 一 部分 是 关 于 设 置 的 这 就是 所有 的 东 西 你可以 看到 的 所以 这 就是 我们 收 集 用 户 的 想 法 用 这 条 文 件 区 域 并 与 电 影 老 板 互 动 你可以 看到 我们 这里 有 他的 说 话 泡 沫 有 这 种 比 较 狠 毒 的 表 达 我们 在 h t ml 上 已经 硬

我们 在 这里 这 部分 是 为 了 输 出 这是 我们 会 在 ai 制 作 的 组 件 上 展 示 组 件 的 结 果 目前 我们 不能 在 小 软 件 上 看到 这个 部分 因为 如果 我们 看一下 c ss 它 是 设 置 为 没有 的 所以 我们 会 在 准 备 时 提 供 这个 采 访 接 着 就是  css 了 这里 有 很多 种 类 型 不 可能 有 什么 新 或 奇怪 的 东 西 但 不要 担 心 随 时 可以 停 止 和 自己 熟 悉 老 实 说 我们 不会 在 课 程 过 去 时 那么 多 的 介 绍 我们 只 会 在 需要 的时候 再 次 地 介 绍 在  index js 上 我們 已經 有 了 一 小 部分 的  javascript 我 已經 掌 握 了 我們 已經 在 工作 的 三 個 元 素 我們 有 了  text  area 我們 已經 在 這裡 看到 了 設 定 輸 入 容 器 那 是  text  area 和 按 钮 的 容 器 我们 还 掌 握 了 电 影 老 板 的 文 字 这 就是 在 这 里 的 语 言 泡 沫 现在 我们 有 一个 活 动 听 众 他 在 这个 按 钮

这个 按 钮 当 他 详 细 观 察 到 按 钮 时 他 会 做 几 件 事 首先 他 会 检 查 一下 有 没有 任 何 东 西 在 这 里 的 文 字 区 域 如果 没有 的话 他 就 做 不了 如果 有 的话 他 会 替 换 这个 文 字 区 域 和 这个 按 钮 与 一个 load ing  g if 我们 现在 正 在 从 图 片 夹 里 带 进 来 它 还 会 更 新 这个 语 言 泡 沫 來 一些 新 的 文 字 這 其實 是 硬 碟 進 入 了  javascript 這 其實 是 你 會 看到 的 最後 一 部分 人 類 寫 作 文 字 從 此 以 後 我們 主 要 會 用  ai 生 產 的 文 字 我們 把 文 字 中 的 東西 放 進 去 看看 它 是 否 正

在 運 作 所以 這是 我 一個 句 子 的

想 法 在 電 影 中 一個 邪 惡 的 天 才 想 要 對 付  ai 只有 一個 勇 敢 的 滑 鼠 可以 阻 止 他 我们 按 下 s end 一 旦 我们 做 到 我们 就 会 看到 一个 svg 在 运 行 中 通 知 用 户 说 明 有 事 发 生 我們 也 更 新 了 語 音 泡 沫 請 稍 等 一 會 讓 我的 數 位 智 慧 腦 來 消 化 好 現在 一 切 都 正 在 進 行 正 常 的 運 作 我們 現在 需要 開始 應 用 ai 我們 需要 得 到 ai 的 回 應 但 在 我們 進 入 ai 的 神 秘 世界 之前 我們 需要 先 談 談 更 多 的 複 雜 事 項 例 如 我們 如何 從 應 用 程 式 中 獲 得 ai 的 ap i 這 就是 我們 如何 獲 得 這些 能 力 接下來 我們 來 看看 我們 獲 得 開 啟 ai  api 的 鍵 這 代 表 了 簽 名 你 不 如 前 往 開 啟 ai 的 專 頁 這 頁 是 一個 可以 點 擊 的 連 結 你 只 要 點 擊 這個 畫 面 就會 直接 帶 你

到 那 裡 open ai  api  key and  that  means  signing  up so  why  don 't  you  head  over  to  the  open ai  homepage and  this  slide  is  actually  a  click able  link so  if  you  just  click  on  the  screenshot it  will  take  you

 straight  there now  when  you 're  there just  pause  for  a  moment  to  check  out some  of  these  really  beautiful  images that  they 've  created  with  their  d ali  image  generation  model and  we  will  be  looking  at  image  generation  later  in  this  course now  once  you 've  feast ed  your  eyes  on  the

 pictures 在 这里 我们 可以 看到 一些 非常 漂亮 的 图 片 他们 用 d al i 图 形 模 式 制 作 的 图 片 我们 将 在 这 次 课 程

中 看 一 看 图 形 当 你 看 完 图 片 后 转 到 说 明 ap i 的 位 置 然后 你 需要 点 击 订 阅 然后 你 可以 选 择 订 阅 方 式 然后 你 需要 确 认 你的 电 话 号 码 当 你 进 入 了 桌 面 上

從 這裡 你 需要 去 登 入 然後 你可以 選 擇 你的 登 入 方 式 然後 你 需要 確 認 電 話 號 碼 現在 你 進 入

後 從 桌 面 上 你可以 點 擊 你的 a v atar 然後 選 擇 view  api  keys 現在 他們 只 會 顯 示 你 ap i  key 一次 當 它 是 第一 次 生 成 的 之後 它 就會 被 暗 示 成 這個 樣 子 所以 記得 要 在 你 得 到 時 在 安全 的 地方 複 製 和 複 製 但 如果你 失 去了 不要 擔 心 從 這裡 你可以 刪 除 它 然後 得 到 新 的 就 像 所有 ap i 鍵 一樣 記得 要 保 持 秘 密 在 我們 在 建 造 這個 項 目 中 你 会 看到 我的 ap i 钥 匙 但 请 保 证 当 这 段 录 音 发 布 时 我 会 把它 删 除 。 好的 这是 ap i 钥 匙 。 现在 我们 在 这里 我们 说 一 句 快 速 的话 关 于 资 金 。 如果 我们 在 这里 点 击 使 用 它 将 带 我们 到 一个 页 面 在 这里 我们 可以 看到 我們 剩 下 多少 信 用 在 錄 影 的 時間 當 你 簽 名 時 你 會 得 到 一些 免 費 信 用 我 得 到了 18 美元 信 用 這 已經 是 三 個 月 的 合 法 信 用 看 起來 我 已經 差不多 完成 了 但是 我 已經 是 一個 重 用 戶 所以 你 會 發現 你 得 到 的 免 費 信 用 會 給 你 很 長 的 時間 當 信 用 被 廢 除 或 使 用 後 它 會 成 為 一個 付 款 的 模 式 請 查 看 該 網 站 的 最 新 資 訊 好 現在 我們 來 取 得 ap i 鍵 並 建 立 我們的 第一 次 申 請 當 你 準備 好 我們 就 開始 吧 現在 我們 有 了 ap i 鍵 我們 可以 開始 使 用 ap i 但 在 我們 完成 第一 次 申 請 之前 我們 需要 一個 ap i 終 點 現在 我們 可以

使 用  api 了 但 我們 需要 先 完成 第一 次 的  f etch

要 求 我們 需要  api 終 點 我們 回 到  open ai 網 站 然後 點 擊 到  doc s 這 頁 是 可以 點 擊 的 連 結 它 會 帶 你 到 那 裡 現在  open ai 網 站 是 蠻 複 雜 的 在 第一 頁 上 你

只 需要 在 这里 点 击 到 d oc s 这 条 是 一个 可以 点 击 的 链 接 它 就 会 带 你 到 那 里 现在 open ai

的 d oc s 都 很 了 解 在 第一 个 页 面 上 它 告诉 我们 完成 的 结 局 在 我们 ap i 的 中 心 这 听 起 来 很有 趣 完成 的 结 局 我们 要 检 查 一下 但 在 我们 做 这 件 事 之前 你 可能 会 问 什么 是 完成 完成 是 open ai 的 常 用 词 比如 说 你想 要 一些 信 息 比如 说 你想 知道 月 球 上 的 第一 个 人 是 谁 我们 把 这个 问题 发 给 open ai 透 過 ap i 它 會 思 考 一下 並 回 覆 一個 完成 這個 完成 當然 是 尼 爾 · 阿 姆 斯 特 朗 在 open ai 的 世界 完成 是 一個 回 應 從 ap i 來 的 達 到 你的 要 求 好 我們 來 點 擊 完成 的 終 點 範 圍 在 d oc s 這裡 我們 會 得 到 很多 資 訊 以及 一些 文

可以 在 这 里 看到 一些 例 子 每 个 例 子 都 在  node js  php 和  cur l 中 但是 我想 专 注 的是 这个 我们 有 完 整 的  api 结 果 在 这里 这 告诉 我们 我们 可以 使 用  post 方 式 現在 我們 有 了 這個 資 訊 我們 回 到  index js 然後 我 會 把它 儲 存 在 一個  const 叫  ur l 在 下 一個  sc rim 我們 開始 寫 一個  f etch 要 求 我們 開始 這個  api 要 求 先 把  f etch 要 求 的 生 肖 放 出來 我們 需要  f etch 然後 我們 打 開 空 格 然後 我們 輸 入 完成 的 終 點 我們 把 這個 儲 存 在 這裡 作 為  ur l 让 我们 开始 这个 ap i

召 唤 通 过 放 置 拆 除 要 求 的 生 物 骨 头 所以 我们 需要 拆 除 然后 我们 打 开 格 子 然后 我们 转 入 完成 的 结 局 然后 我们 这里

保 存 了 这个 作 为 ur l 现在 我们 需要 一个 物 件 而 在 这个 物 件 中  我 们 需要 方 法 头 顶 和 身 体 如果 我们 重 新 检 查 桌 子 我们 知道 方 法 是 发 送 它 告诉 我们 这 在 结 局 旁 边

在 这个 物 件 里 我们 需要 一个 m et hod h ead ers b ody 如果 我们 再 检 查 d oc s 我们 知道 这个 m et hod 是 p ost 它 在 这 旁 边

告诉 我们 d oc s 并 没有 给 我们 一 个 j ava script 的 f etch re quest 但 它 们 给 了 我们 一个 c ur l 的 例 子 我们 可以 适 应 它 所以 我们 来 看 一 看 我们 的 h ead ers 需要 一个 内 容 的 app lic ation j son 我们 也 需要 一个 ap

a uth or ization  of  bear er 所以 我们 来 把 这 些 放 进 去 好 现在 我们 需要 一个 身 体 这 就是 我们 要 进 入 open ai 的 特 征 身 体 需要 一个 模 型 和 一个 提 示 所以 我 会

在 这里 添 加 身 体 然后 我 会 说 j son string ify 然后

来 转 移 一个 物 件 open ai  request  needs  a  model  and  a  prompt so  i 'll  come  down  here  and  add  the  body and  then  i 'm  going  to  say  j son string ify and  i 'll  pass  in  an  object  with  model  and

 prompt now  if  we  look  back  at  this  screenshot it  actually  gives  us  a  model  right  here text - da v inci - 00 3 我們 先 破 壞 這個 黃 金 的 規 則 然後 複 製 一個 我們 不 完全 明白 的 文 字 我們 還 沒有 討 論 開 放 ai 模 型 是什麼 或者 我們 還 沒有 提 供 什麼 選 項 但 我想 做 的是 把 這個 例 子 做 好 把 第一 次 ap i 要 求 放 到 我们 的 应 用 程 式 里 然后 我们 会 再 回 顾 和 谈 论 模 型 的 更 多 细 节 现在 请 注意 开 放 ai 有 很多 模 型 可以 使 用 今天 我们 会 使 用 这 一个 叫 做 text  da v inci  00 3 好 我 会 把 这个 放 在 这 里 好 我们 已经 有 模 式 了 现在 我们 需要 提 示 我们 在 这 一 课 中 会 讲 很多 提 示 但 现在 我们 需要 了 解 的是 在 之前 的 实 验 中 我们 看到 的 这个 例 子 我们 问 了 一个 问题 谁 是 第一 个 在 月 球 上 走 的人 我们 得 到了 一个 答 案 就是 尼 尔 · 阿 姆 斯 特 朗 提 示 就是 这个 部分 谁 是 第一 个 在 月 球 上 走 的人 提 示 就是 我们 问 的 任 何 问题 例 如 open ai  api  4 有 时候 提 示 很 简 单 com plet ion  neil  armstrong well

 the  prompt  is  this  part who  was  the  first  person  to  walk  on  the  moon the  prompt  is  whatever  we  ask  the  open ai  api  for now

 sometimes  prompts  are  really  really  simple  just  like  this and  sometimes  they  are  really  very  complex as  you  will  see  a  bit  later  in  this  course now  they  give  us  an  example  prompt  in  the  docs say  this  is  a  test which  to  be  honest  is  not  very  creative so  instead  of  using  that i 'm  going  to  ask  an  easy  but  real  world  question for  this  prompt i 'm  just  going  to  say what  is  the  capital  of  spain and  that  is  all  we  need  to  do  for  a  simple  prompt we  just  put  it  in  a  string ok  now  we  need  to  change  some  then s 我

只 要 说 这是 西 班 牙 的 首 都 这 就是 我们 需要 做 的 只 要 放 一个 文 字 现在 我们 需要 更 改 一些

then 我们 会 把 回 复 叫 上 j son 然后 我们 会 从 这个 回 复

出 数 据 然后 把它 们 连 接 到 网

络 好 我们 打 开 网 络 然后 我

会 点 击 保 存 我们 会 看到 一个 错 误 这 很 笨 这 只是 我的 部分 的 预 告 但 为什么 不 现在 停 止 看看 你 能 不能 够 解 锁 它 我 会 给 你 一些 提 示 来 看看 这个 图 片 好 你 看到 了 吗 我 其实 是 把 be are r 然后 是 ap i 键 我觉得 这 就是 在 造 成 问题 的 再 试 一 遍 我们 看到 了 我们 正 在 收 到 回 复 我 会 从 显 示 器 上 复 制 并 在 编 辑 器 上 复 制 这样 我们 就 能 看 得 更 清楚 我们 可以 看到 这是 一个 物 体 它 含 有 很多 数 据 我们 将 在 接 下 来 的 过 程 中 更 多 地 谈 论 这个 物 体 的 一些 特 性 但 现在 我们 只 需要 集 中 注意 到 一个 词 马 来 西 亚 因为 这 就 显 示 了 它 是 有 效 的 open ai 正 在 對 我們 說 話 它 也 知道 全 世界 的 一 切 好 知道 事 實 是 很 棒 但 我們 其實 是 對 情 緒 和 創 造 有 興 趣 所以 我 現在 要 稍 微 改 變 一些 東西 我們 刪 除 這個 我 会 把

这个 文 字 删 除 然后 我 会 改 变 我的 提 示 说 一些 更 有 情 感 的 东 西 我 会 说 五 个 字

或 少 一些 的 声 音 都 很 友 善

会 在 这里 复 制 回 复 看 我们 的 回 复 我 在 这里 为 你 它 给 我们 的 态 度 这 很 酷 的是 现在 ai 就 像 是 人 类 一 样 在 对 我们 说 话 它 在 对 我们 说 话 时 心 情 或 至 少 是 c pu 感 受 情 绪 这 就是 我们

所 要 的 那 很 酷 的是 ai 現在 就 像 是 在 說 人 類 一樣 它 在 說 心 動 或 至 少 是 在 說 c pu 感

受 的 情 緒 那 就是 我們 所 要 的 好 我們 來 把 我們 手 上 的 東西 拿 出來 然後 把它 應 用 到 我們的 計 劃 我 還 沒 忘 記 我們 手 上 的 模 型 t ex  da  vin ci  00 3 it 's  still  shroud ed  in  mystery but  i  want  you  to  get  your  hands  on  the  keyboard start  getting  practice start  building  muscle  memory before  i  do  any  more  talking so  let 's  move  on  to  a  challenge  with  this  next ok  so  back  in  our  app we 've  got  an  event  listener  right  here

所以 我们 接 下 来 就 来 进 行 一个 挑 战 好 我们 在 应 用 程 式 里 我们 有 一个 活

动 听 听 器 它 在 按 钮 上 听 听 它 会 检 查 使 用 者 给 予 我们 什么 内 容 它 会 显 示 一个 上 传 信 息 并 更 新 我们 看到 的 语 言 泡

沫 在 這個 按 鈕 上 它 會 查 看 使 用 者 給 予 我們 任 何 輸 入 它 會 顯 示 一 段 載 入 訊

息 並 更 新 我們 所 看到 的 訊 息 泡 沫 我們 還 未 準備 完成 任 何 使 用 者 輸 入 的 訊 息 所以 我 現在 只 要 發 表 這個  if 如果 我 現在 儲 存 這個 這個 密 碼 應該 會 在 我們 按 下 這個 按 鈕 後 就 運 作 我們 就 拿 到 我們的 載 體 並 且 更 新 了 我們 所 輸 入 的 文 字 我們 現在 來 做 一個 ap i 呼 叫 讓 我們 可以 通 過 這個 呼 叫 來 回 應 我們的 用 戶 當然 之後 我們 會 再 次 重 新 計 算 使 ai 能 夠 回 應 我們 使 用 者 給 我們的 具 體 的 想 法 但 現在 我們 得 到 的 回 應 從 ai 是 很 簡單 的 所以 我 會 在 這裡 叫 一個 功 能 叫 做

交 給 你 了 這裡 有 一個 挑 戰 就是 要 完成 這個 功 能 我 會 把它 貼 在 這個 功 能 的 內 部 因為 這裡 是 我想 讓 你 寫 程 式

就是 這個 现在 是 你的 时间 了 这里 有 一个 挑 战 就是 完成 这个 功 能 我 会 在 这里 贴 上 这个 功 能 因为 这里 是 我要 你

写 上 的 所以 你的 挑 战 是 我要 你 做 一个 f etch  request 给 open ai  api 我 已經 把 所有 需要 的 資 料 放 在 這裡 所以 你 必 須 把 自己 的  api 鍵 放 在 這裡 這是 到 達 目 的 地 的  url 現在 提 示 應該 要 求 一個 無 超 過  5 個 字 的 熱 情 回 應 你 也 知道 怎麼 做 因為 在 上 一 期 的 實 驗 室 我們 做 了 同 樣 的 事情 就是 要 求 一個 同 情 的 回 應 現在 你 只 需要 登 录 完成 后 检 查 是 否 正 在 运 作 现在 在 开始 之前 我想 说 两 件 事 第一 如果 完成 后 的 结 果 并 不是 你想 要 的 或者 你 预 期 的 别 担 心 我们 将 会 多 講 一些 使 用 提 示 和 處 理 問題 的 問題 這個 挑 戰 的 目 的是 為 了 把 文 字 寫 得 正 確 所以 我們 能 夠 得 到 開 發 人 員 的 完成 第二 請 回 到 之前 的 試 驗 看看 我們 需要 的 文 字 但 不要 複 製 和 複 製 你 會 獲 得 很多 的 幫 助 寫 出來 手 工 這些 練 習 會 增 加 肌 肉 記 憶 並 提 升 你的 流 暢 度 好 現在 停 止 把 這個 挑 戰 解 決 我們 會 在 一 分鐘

內 再見 这 些 练 习 就 能 提 升 肌 肉 记 忆 和 提 升 你的 流 畅 好

See all freeCodeCamp.org transcripts on Youtube

Build AI Apps with ChatGPT, DALL-E, and GPT-4 – Full Course for Beginners