---
# System prepended metadata

title: 第五週 - OpenAI 搭配 Vercel 主機，打造個人 AI 工具
tags: [軟體工程師體驗營 - 2023]

---

---
tags: 軟體工程師體驗營 - 2023
---
# 第五週 - OpenAI 搭配 Vercel 主機，打造個人 AI 工具
## 開課提醒
1. 錄影！！！
2. 不需報到
3. 講解[主線任務](https://rpg.hexschool.com/training/35/task)

## AI 工具講解
製作 AI 工具並上傳，即可以在自己的 AI 工具王的網站看到大家上傳的作品
![](https://hackmd.io/_uploads/SyWMBjEIh.png)



AI 工具的主題發想範圍：
目前有提供六種服務，問答服務、虛擬客服、生活應用、程式知識、翻譯助手、行銷文案

## 步驟一：
### 1-1 ChatGPT
https://chat.openai.com/

目標：註冊帳號並拿到 API KEY
1. **了解 ChatGPT 收款機制**
    
    https://openai.com/pricing
    
    ![](https://hackmd.io/_uploads/SyXFhG78n.png)


    以下僅供參考：
    一個 token 可以是一個字母、一個數字、一個標點符號或一個空格。可以使用 [token 計算機](https://platform.openai.com/tokenizer)算出**大約**會使用到 token 量。
    
    以 Chatgpt-3.5-turbo Model 來說，每個 API 請求的價格是以每千個 token 為單位計算的，所以 1000 個 token 的價錢是 0.002 美金
    
    **結論：文本長度越長，需要支付的費用就越多**
    
2. **ChatGPT 官網註冊帳號**
    
    https://openai.com/blog/chatgpt
    
    ![](https://hackmd.io/_uploads/rk4s3fQ8n.png)

    
3. **綁定信用卡**
    
    Billing > [Overview](https://platform.openai.com/account/billing/overview)
    
> 注意：信用卡需有開通國外交易功能，請自行確認所屬銀行是否有預設開通

<img src="https://hackmd.io/_uploads/SkPEaMQL3.png" width="300"/>





    
4. **限制使用量**
    
    Billing > [Usage Limits](https://platform.openai.com/account/billing/limits)
    
    **Hard limit → 當你一個月達到這個價格(美金)使用限制，後續的 request 都會被拒絕**
    
    **Soft Limit** → **當你一個月達到這個價格(美金)使用限制，會發送一封 Email 提醒你**
    
5. **查看目前使用量**
    
    [Usage](https://platform.openai.com/account/usage)
    
6. **申請 API keys**
    
    [API keys](https://platform.openai.com/account/api-keys)
    
![](https://hackmd.io/_uploads/Hkb6-QmIh.png)


### 1-2 專案下載步驟

目標：下載寫好的專案並修改成自己的 AI 工具主題
注意：電腦需先安裝 Node，可以參考 [Node - V8、Node.js 介紹](https://courses.hexschool.com/courses/2038127/lectures/46158017) 影音章節

**1. 下載[專案](https://github.com/hexschool/2023-engineer-camp-ai-template)**
Code -> Download ZIP
<img src="https://hackmd.io/_uploads/SkAZAf783.png" width="200"/>


**2. 運行專案，確認專案沒問題**
```bash
npm i 
```
> 跑完之後，專案資料夾內會多出 node_modules 資料夾
```bash
npm start 
```
> 開啟 [http://localhost:3000/](http://localhost:3000/) 查看是否有畫面
> Ctrl+C 可以終止運行

**3. 修改成自己的 AI 工具主題**
- 在專案內建立 .env 檔案，內容請複製 .env.example
    ```bash
    OPENAI_API_KEY= # 你申請的 API KEY
    OPENAI_MAX_TOKENS= # 回應的最大 Token 數量
    OPENAI_CONTENT= # 這個 AI 的角色描述，詠唱詞
   ``` 
- 修改切版 (views/index.ejs)
> 請不要動到 form 與 button 標籤內容

## 中場休息
[證書與獎品領取](https://hackmd.io/c9fJhsj4QfmAe4otGvUqCw?view)

### 1-3 Vercel
- 將專案上傳至自己的 GitHub 的儲存庫做版控
- 部署至 [Vercel](https://vercel.com/dashboard) 主機

## 步驟二：
### 六角作品系統
將作品上傳到[六角作品系統](https://2023-engineer-camp.zeabur.app/)，通過審核後即可以把作品呈現在 AI 工具王網站
    



## 補充同學提問：
- [Mac 終端機美化教學文章](https://israynotarray.com/other/20200123/1105303313/)
- 每日任務：到 6/2（五）截止