給前端的簡單 AI 教學 - 1. 連接 OpenAI
Tags: openai, frontend
Published: 2023-12-11 14:41:11

## 前言
這應該會是一連串文章的第一篇，分享一下小弟這一年來開發 LLM 相關應用程式的一些知識跟心得。整個系列會帶過以下內容：
- 如何使用 `OpenAI`
- 簡單的 `prompt` 知識
- `function_call`
- 簡單帶一下 `Langchain`
- 如何讓 LLM 根據公司的文件回應
- 可以怎麼使用 [`Browser AI`](https://courageous-manatee-a625e9.netlify.app/) 套件與前端框架進行整合

------------------------------------------

## 主題
這篇文章要講很～簡單的東西，就是把 OpenAI 的 API 接起來，大約十分鐘就可以做完。以下是兩個大步驟：
1. 取得 API KEY
2. 在網頁打 Request

### A. 取得 OpenAI API KEY

#### 1. 到 **OpenAI** 註冊一個帳號
https://platform.openai.com/docs/introduction

你應該畫面會在右上角看到 **sign up**，點下去就會進入註冊流程。跟著註冊流程建立帳號就行了。
![OpenAI - sign up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rj244vizgzoewz2kbcox.png)

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

![OpenAI - free tier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9y54igfsttinxgtp8r7.png)

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

![OpenAI - free tier usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2vbug0jogtjjif6w0jh.png)

#### 3. 取得 API key
到左側點擊 "API keys"，會進入下圖中的頁面

![OpenAI - api key page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n944obnjk2fnqiabkb4r.png)

要建立 API key，要先做手機驗證，點擊下圖中的按鈕，跟著步驟進行即可
![OpenAI - verify phone number button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onuce42z5o500ziijlrw.png)

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

![OpenAI - create new secret key button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0caxkituw57xkxm4drik.png)

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


![OpenAI - Enter new secret key name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ynpg9dhsq06gylk0t1o.png)

![OpenAI - Copy new secret key value](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odi3fxoo8sam1jxer49l.png)

有了 API key 之後，就可以開始打 API 啦～

### B. 在網頁中呼叫 gpt
準備好 API key 之後，接著要來呼叫最常用的 `chatCompletion` API 

建立一個 html 文件，然後使用以下的程式碼：（記得把 你的 API key 放到變數裡面）

```html
<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 按鈕，等一下下，你應該會看到以下的回應，就表示成功接起來了～

![Chat completion API result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hb30ajoir1o5pxjcths.png)

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

```ts
{
  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 的規格跟說明文件，有興趣的話可以再研究看看

- [OpenAI - Text generation](https://platform.openai.com/docs/guides/text-generation)

- [OpenAI - Create chat completion](https://platform.openai.com/docs/api-reference/chat/create)

------------------------------------------

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