前言
這應該會是一連串文章的第一篇，分享一下小弟這一年來開發 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/
Top comments (0)