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

前言

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

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

主題

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

取得 API KEY
在網頁打 Request

A. 取得 OpenAI API KEY

1. 到 OpenAI 註冊一個帳號

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

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

2. 確認額度

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

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

3. 取得 API key

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

要建立 API key，要先做手機驗證，點擊下圖中的按鈕，跟著步驟進行即可

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

這邊稍微要注意一下：

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

有了 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>

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

如果你想要進一步對話，就把 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"},
     ]
  })
}

然後再點擊一次 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/

Blog