2024-07-25

使用 Netlify、OpenAI、Svelte 建立聊天機器人網站

光輝咖碼06 mins
ai generated, chatgpt, chatbot

歡迎來到令人興奮的聊天機器人世界！ 在人工智能逐漸滲透到我們生活方方面面的時代，聊天機器人已成為現代企業的必備品。 在本文中，我們將指導您使用 Netlify 和 OpenAI 搭配 Svelte 構建您自己的聊天機器人網站。

“The best way to predict the future is to invent it.”

為什麼選擇 Netlify 和 OpenAI？

在開始這場聊天機器人建設的冒險之前，您可能會問自己：為什麼要選擇 Netlify 和 OpenAI？答案很簡單：因為這兩個平台提供了一個非常強大和靈活的工具組，讓您能夠快速和容易地創建先進的聊天機器人網站。

Netlify 的優勢

  1. 簡單性：Netlify 提供了一個極其用戶友好的界面，即使是初學者也能快速上手。
  2. 自動化部署：每當您更新您的程式碼，Netlify 會自動部署更新，這樣您就不必手動進行任何操作。
  3. 高性能：Netlify 提供的全球 CDN 網路確保您的應用程序能夠高速運行。

OpenAI 的優勢

  1. 語言模型：GPT（Generative Pre-trained Transformer）是一種非常先進的語言模型，能夠進行複雜的自然語言處理任務。
  2. API 支持：OpenAI 提供了易於使用的 API，使您能夠輕鬆地將其整合到您的應用程序中。
  3. 社群支持：由於其廣泛的使用，您將能夠找到大量的教程和社群支持。

為什麼使用這兩者搭配

Netlify 和 OpenAI 的結合為您提供了一個全面的解決方案，讓您可以專注於創建出色的用戶體驗，而不是擔心後端服務和機器學習模型的細節。

簡單來說就是不用擔心如何實現人工智慧，或者擔心如何規劃架設網站，只需專心設計網頁和串接 OpenAI API 就好。

設置您的開發環境

在開發任何軟體項目之前，一個合適的開發環境至關重要，一個良好的開發環境能夠讓您專心於創造，而不是解決技術問題。

“好的開始是成功的一半。”

安裝 Node.js 和 NPM

node 是必須的。

brew install node

pnpm 新潮用一下。

brew install pnpm

我們將使用 node 技術開發整個範例。

安裝 Netlify CLI

這將使您能更方便地與 Netlify 進行互動。

pnpm install netlify-cli -g

安裝編輯器

brew install --cask visual-studio-code

任何程式碼編輯器都可以。

Netlify Function 簡介

在我們開始探索如何使用 OpenAI 建造聊天機器人之前，先了解一下什麼是 Netlify Function，Netlify Function 為你提供了一個執行 Server Side JavaScript 程式的環境，讓你不需要擔心設定和管理整個後端伺服器。

“簡單性是複雜性的最終級別。”

什麼是 Netlify Function？

Netlify Function 實際上是建立在 AWS Lambda 之上的，這意味著你可以在 Netlify 中直接運行服務器端 JavaScript 代碼，這些 Function 可以在本地開發，也可以直接在 Netlify 平台上開發和部署。

為什麼選擇 Netlify Function？

  1. 簡單性：無需設置和管理服務器。
  2. 靈活性：與各種前端框架和庫完美集成。
  3. 成本效益：僅需為實際使用時間付費，無需長期費用。

如何建立你的第一個 Netlify Function？

安裝 Netlify CLI：

如果你還沒有安裝，請按照第二章的步驟進行

CLI 範例～創建一個新的 Netlify 函數：

在專案根目錄中新建目錄 netlify 目錄，在 netlify 目錄中新建 functions 目錄，然後新增程式 hello-world.js 或 ts 文件。

import type { Handler, HandlerEvent, HandlerContext } from "@netlify/functions";

const handler: Handler = async (event: HandlerEvent, context: HandlerContext) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello World" }),
  };
};

export { handler };

這將會創建一個名為 hello-world 的 Netlify Function。

CLI 範例～在本地進行測試：

netlify dev

然後就可以在瀏覽器中訪問 http://localhost:8888/.netlify/functions/hello-world 並看到 “Hello, World!”。

部署到 Netlify：

netlify deploy

這樣，你的函數就會被部署到 Netlify 的服務器上。

OpenAI GPT 簡介

在進一步深入到如何結合 Netlify 和 OpenAI 來建造聊天機器人之前，我們首先要了解一下 OpenAI 的 GPT（生成預訓練變換器）是什麼。

GPT，即 Generative Pre-trained Transformer，是 OpenAI 開發的語言模型。 它的架構由多個層和數百萬個參數組成，使其能夠生成通常與人類編寫的文本難以區分的文本。

GPT 設計用來理解和生成自然語言，它被訓練來預測文本序列中的下一個詞，因此非常適合用於聊天機器人、自動寫作、翻譯等。

GPT 可以用於各種不同的應用場景，從簡單的自動回覆，到複雜的敘述生成。

GPT 的版本歷史

  • GPT-1: 首次推出，展示了生成模型的潛力。
  • GPT-2: 提供了更好的表現和更大的模型規模。
  • GPT-3: 具有 1750 億個參數，能執行多種語言任務。
  • GPT-4: 目前最先進的版本，需要付費訂閱才能使用。

ChatGPT 和 OpenAI API 在某些方面有重疊，但也有明顯的不同。

ChatGPT

  1. 使用場景: 通常用於對話型的應用。
  2. 使用介面: 使用網頁互動，不需要經過 API。
  3. 自由度: 是預先設置好的，針對特定對話場景進行最佳化。
  4. 多功能性: 專為對話和文本生成而設計，但不一定有 API 版本的所有功能。

OpenAI API

  1. 使用場景: 更廣泛，不僅限於對話應用，可用於摘要、寫作輔助、代碼生成等。
  2. 使用介面: 通過 RESTful API 接口進行訪問，需要程式開發技能。
  3. 自由度: 高度可定制，可以根據特定需求調整模型參數。
  4. 成本: 按照使用的請求次數和其他因素來計費。
  5. 多功能性: 設計為多用途模型，能夠執行多種不同類型的語言任務。

總之，如果您專注於建立對話型應用，ChatGPT 可能是更適合的選擇。如果您需要更廣泛或高度定制的語言模型應用，則 OpenAI API 會是更好的選項。

如何使用 OpenAI API？

ChatGPT 是網頁介面的聊天機器人，我們要開發自己的聊天機器人需要使用 OpenAI 提供的 API。

註冊 OpenAI API：

訪問 OpenAI 官網，並申請 API 密鑰。

安裝 SDK：

兩種方式，1. 可以使用 node library

pnpm install openai

2. 或者使用 axios 直接呼叫 OpenAI RESTful API 介面

pnpm install axios

本篇文章使用 axios 為範例。

使用 Svelte 建立您的聊天機器人網站（前端）

在前幾章中，我們簡單介紹了 Netlify 和 OpenAI 的基本概念。現在，我們將進一步探討如何實際建立一個以這兩個工具為基礎的聊天機器人，本章將主要集中在前端的建構。

在上一章中，我們成功地建立了聊天機器人的後端。現在，讓我們使用 Svelte 這個創新的前端框架，專注於開發前端。Svelte 會將元件編譯為高效的原生 JavaScript。

我們選擇使用 Svelte，因為它簡單，性能出色，並且與其他前端框架相比，需要更少的樣板代碼。

設置 Svelte 應用

如果您還沒有安裝 Svelte，您可以使用以下命令進行安裝：

pnpm create svelte@latest netlify-openai

進入到程式目錄：

cd netlify-openai

然後安裝依賴函示庫：

pnpm install
執行結果

打開 visual code 開始編碼

code .

code . 表示使用 visual studio code 開啟目前這個目錄，當作專案.

輸入下列 command 啟動本機開發 SERVER.

netlify dev

設計聊天界面

這時您可以開始設計聊天界面，結構化您的 Svelte 元件。

<!-- TypeScript Script 部分 -->
<script lang="ts">
  // 初始化一個儲存訊息的字串陣列
  let messages: string[] = [];
  // 初始化一個儲存使用者輸入的字串變數
  let userInput: string = "";

  // 定義一個非同步函數用於處理與後端的通信
  async function sendMessage(userInput: string) {
    // 透過 fetch API 發起 POST 請求到 Netlify 函數
    const response = await fetch("/.netlify/functions/chatbot", {
      method: "POST",
      body: userInput,
    });
    // 將回應解析為 JSON 格式
    const data = await response.json();
    // 將回應加到訊息陣列
    messages.push(data.reply);
    // 用於觸發 Svelte 的重新渲染
    messages = [...messages];
  }
</script>

<!-- HTML 標記部分 -->
<div id="chat-container">
  <div id="message-box">
    <!-- 遍歷訊息陣列，並將每個訊息顯示在 div 元素中 -->
    {#each messages as message}
      <div>{message}</div>
    {/each}
  </div>
  <!-- 使用者輸入框，使用 two-way binding 來綁定 userInput 變數 -->
  <input bind:value={userInput} id="user-input" type="text" />
  <!-- 發送按鈕，觸發 sendMessage 函數 -->
  <button
    on:click={() => {
      // 將使用者的輸入加到訊息陣列
      messages.push(userInput);
      // 發送使用者輸入到後端
      sendMessage(userInput);
    }}>發送</button
  >
</div>

<!-- CSS 樣式部分 -->
<style>
  /* 添加您的樣式在這裡 */
</style>

我們已經在我們的 Svelte 元件中結合了與 Netlify Function 後端溝通的功能。

您的 Svelte 應用應該能夠將用戶輸入發送到後端，接收回覆，然後顯示用戶的消息和聊天機器人的回覆。

建立您的聊天機器人網站（後端）

在這個階段，我們將使用 Netlify Functions 實現基本聊天功能。

設定 Netlify 函數

  1. 建立一個新的檔案夾名為 netlify，並在其中建立一個子檔案夾名為 functions。
  2. 在 functions 文件夾內，建立一個新的 JavaScript 檔案，比如 chatbot.ts。

實現基本功能

在 chatbot.ts 文件內，我們將設定一個簡單的函數來模擬聊天機器人的行為。

exports.handler = async function (event, context) {
  // 這裡將會是與 OpenAI 交互的代碼
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello, World!" })
  };
};

這樣就是最基本 Netlify Function 長的樣子。

整合 OpenAI API

接下來，我們會在這個 Netlify Function 中加入 OpenAI API 的呼叫。

// 引入 Netlify 函式所需的類型
import type { Handler, HandlerEvent, HandlerContext } from "@netlify/functions";

// 引入 axios 用於 API 請求
import axios from 'axios';

// 初始化你的 OpenAI API 密鑰
const YOUR_OPENAI_API_KEY: string = process.env.YOUR_OPENAI_API_KEY;

// 定義 Netlify 函式的處理程序
export const handler: Handler = async (event: HandlerEvent, context: HandlerContext) => {
  // 從請求中取得用戶的訊息（prompt）
  const prompt = event.body;

  // 使用 axios 進行 OpenAI API 請求
  const response = await axios.post(
    'https://api.openai.com/v1/chat/completions',
    {
      "model": "gpt-3.5-turbo", // 使用的模型
      "messages": [
        {
          "role": "system",
          "content": "You are a helpful assistant." // 系統訊息，用於初始化對話
        },
        {
          "role": "user",
          "content": prompt // 用戶的訊息
        }
      ]
    },
    {
      headers: {
        Authorization: `Bearer ${YOUR_OPENAI_API_KEY}`, // 設置授權頭
      },
      timeout: 20000 // 設置請求超時
    }
  );

  // 返回生成的回應和 HTTP 狀態碼
  return {
    statusCode: 200,
    body: JSON.stringify({ reply: response.data.choices[0].message.content }),
  };
};

環境變數

如果您的專案使用環境變數（比如 OpenAI 的 API 密鑰），您可以使用以下命令在 Netlify 上設置：

netlify env:set API_KEY your_openai_api_key

使用以下命令看看目前的環境變數

netlify env:list

“為什麼後端工程師不喜歡前端工作？因為他們不想對「外貌」負責！“

工程師冷笑話

看看目前的成果～

部署您的聊天機器人網站

使用 Netlify CLI 部署

Netlify CLI 是一個強大的工具，讓您可以直接從終端機控制您的 Netlify 專案。在使用之前，您需要先進行安裝。打開您的終端機，然後輸入：

pnpm install netlify-cli -g

安裝完成後，導航到您專案的目錄，然後執行：

netlify login

這個命令會打開一個瀏覽器視窗，要求獲取訪問您的 Netlify 帳戶的權限。登入後，返回終端機。

初始化您的 Netlify 專案

如果您還沒有將您的本地專案連接到 Netlify 專案，您可以使用以下命令來做：

netlify site:create

跟隨提示來創建一個新站點。

部署您的網站

現在，讓我們部署您的專案。簡單地執行：

netlify deploy

這個命令會將您的網站部署到一個草稿 URL 以供預覽。如果一切看起來都不錯，您可以然後執行：

netlify deploy --prod

這將會將您的變更推送到正式 URL。

更多 CLI 功能

Netlify CLI 還提供了其他很多有用的命令，比如 netlify functions:create 用於創建無伺服器函數，或者 netlify open 用來在您的預設網絡瀏覽器中打開您的 Netlify 網站。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Related Post