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