DEV Community

Cover image for 給前端的簡單 AI 教學 - 1. 連接 OpenAI
shunnNet
shunnNet

Posted on • Updated on

給前端的簡單 AI 教學 - 1. 連接 OpenAI

前言

這應該會是一連串文章的第一篇,分享一下小弟這一年來開發 LLM 相關應用程式的一些知識跟心得。整個系列會帶過以下內容:

  • 如何使用 OpenAI
  • 簡單的 prompt 知識
  • function_call
  • 簡單帶一下 Langchain
  • 如何讓 LLM 根據公司的文件回應
  • 可以怎麼使用 Browser AI 套件與前端框架進行整合

主題

這篇文章要講很~簡單的東西,就是把 OpenAI 的 API 接起來,大約十分鐘就可以做完。以下是兩個大步驟:

  1. 取得 API KEY
  2. 在網頁打 Request

A. 取得 OpenAI API KEY

1. 到 OpenAI 註冊一個帳號

https://platform.openai.com/docs/introduction

你應該畫面會在右上角看到 sign up,點下去就會進入註冊流程。跟著註冊流程建立帳號就行了。
OpenAI - sign up

2. 確認額度

註冊完後,會回到文件的畫面,你可以點擊左方的 settings > Limits,然後滾動到最下方,會看到下面有一段文字。這段文字是說,你現在是免費方案,要用到 5 美金之後才會開始付費。只是摸一摸的話這金額很足夠的。

OpenAI - free tier

你也可以到左邊點擊 Usage 確認你的使用量:

OpenAI - free tier usage

3. 取得 API key

到左側點擊 "API keys",會進入下圖中的頁面

OpenAI - api key page

要建立 API key,要先做手機驗證,點擊下圖中的按鈕,跟著步驟進行即可
OpenAI - verify phone number button

手機驗證完之後,然後點擊 "Create new secret key"

OpenAI - create new secret key button

這邊稍微要注意一下:

  1. 首先會需要輸入一個名稱,取個簡單的名稱就好
  2. 送出名字後,在同一個彈窗會出現 API KEY。把 Key 複製下來,藏好不要給別人知道。
  3. 如果你不小心把這個彈窗關掉,又沒有複製到 Key 的話,就把現有的 Key 刪掉,重新建一個 Key 就行。

OpenAI - Enter new secret key name

OpenAI - Copy new secret key value

有了 API key 之後,就可以開始打 API 啦~

B. 在網頁中呼叫 gpt

準備好 API key 之後,接著要來呼叫最常用的 chatCompletion API

建立一個 html 文件,然後使用以下的程式碼:(記得把 你的 API key 放到變數裡面)

<body>
  <button id="ask">Ask</button>

  <script>
    const my_openai_key='Paste your key here'

    const chatCompletion=() => {
      fetch("https://api.openai.com/v1/chat/completions",{
        method: "POST",
        headers: {
          "Authorization": "Bearer "+my_openai_key,
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          model: "gpt-3.5-turbo",
          messages: [
            {role: "user",content: "Hello ChatGPT"}
          ]
        })
      })
        .then(response => response.json())
        .then(res => {
          alert(
            res.choices[0].message.content
          )
        })

    }
    document.getElementById("ask").addEventListener("click",chatCompletion);
  </script>
</body>

Enter fullscreen mode Exit fullscreen mode

然後打開這個 html,點擊 Ask 按鈕,等一下下,你應該會看到以下的回應,就表示成功接起來了~

Chat completion API result

如果你想要進一步對話,就把 AI 的回應複製下來,然後加到 messages 陣列中,然後加上你的訊息,像以下這樣:

{
  body: JSON.stringify({
     model: "gpt-3.5-turbo",
     messages: [
       {role: "user",content: "Hello ChatGPT"},

       // Put ai response here like this
       {role: "assistant",content: "Hello, how can I assist you today?"},

       // Then add user response here
       {role: "user",content: "I just want to say hi"},
     ]
  })
}
Enter fullscreen mode Exit fullscreen mode

然後再點擊一次 Ask 按鈕,你就會看到他回應新的內容。


那麼這篇文章先到這邊

下一篇文章會來說一下,怎麼讓 OpenAI gpt 做出你要的回應


Reference

這是我們剛剛呼叫的 chatCompletion API 的規格跟說明文件,有興趣的話可以再研究看看


Advertisment - Browser AI

Use Browser AI to help you build an LLM powered website!
https://courageous-manatee-a625e9.netlify.app/

Top comments (0)