輸入你的API_KEY 開始設計你的ChatGPT

日期：

簡易問答系統 - 輸入 API_KEY

請先輸入你的 API_KEY

問答系統

回答：

教學檔案

1. HTML 文件基本結構

html

複製

<!DOCTYPE html>

<html lang="zh-Hant">

<head>

  <meta charset="UTF-8">

  <title>簡易問答系統</title>

</head>

<body>

  ...

</body>

</html>


  • <!DOCTYPE html>
    宣告文件型別為 HTML5。

  • <html lang="zh-Hant">
    設定語言屬性為「繁體中文」，讓瀏覽器知道頁面內容的語言。

  • <head> 區塊
    包含文件的元資料，如字符編碼（UTF-8）與標題（簡易問答系統）。

  • <body> 區塊
    包含網頁的主要內容與互動元件。

2. 使用者介面元素

html

複製

<h1>問答系統</h1>

<input type="text" id="question" placeholder="請輸入問題" style="width:300px;">

<button onclick="ask()">送出</button>

<p>回答：<span id="answer"></span></p>


  • <h1>問答系統</h1>
    顯示頁面的標題。

  • <input type="text" id="question" placeholder="請輸入問題" style="width:300px;">
    建立一個文字輸入框：

    • id="question"：方便後續透過 JavaScript 取得使用者輸入的內容。

    • placeholder="請輸入問題"：在輸入框內顯示提示文字。

    • style="width:300px;"：設定輸入框的寬度。

  • <button onclick="ask()">送出</button>
    按鈕元件，點擊時會觸發 JavaScript 函式 ask()，用以處理問題並呼叫 API。

  • <p>回答：<span id="answer"></span></p>
    用於顯示 API 回傳的回答：

    • <span id="answer">：透過這個區域將回應動態插入頁面上。

3. JavaScript 程式碼

所有主要的邏輯皆在 <script> 標籤內實作，以下逐段解說：

3.1 定義 API 金鑰

js

複製

const API_KEY = "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";


  • 說明：
    宣告一個常數 API_KEY，裡面存放您提供的 API 金鑰，用於授權 API 呼叫。

3.2 定義非同步函式 ask()

js

複製

async function ask() {

  const question = document.getElementById("question").value;

  try {

    const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {

      method: "POST",

      headers: {

        "Authorization": "Bearer " + API_KEY,

        "Content-Type": "application/json"

      },

      body: JSON.stringify({

        model: "DeepSeek-R1-Distill-Llama-70b",

        messages: [

          { role: "system", content: "請以繁體中文回答所有對話內容。" },

          { role: "user", content: question }

        ],

        temperature: 0.7,

        max_tokens: 2048

      })

    });

    const data = await response.json();

    const answer = data.choices[0].message.content;

    document.getElementById("answer").innerText = answer;

  } catch (error) {

    document.getElementById("answer").innerText = "發生錯誤：" + error.message;

  }

}


  • 非同步函式 ask()
    使用 async 關鍵字定義，表示函式內部有非同步操作（例如呼叫 API 時會使用 await）。

取得使用者輸入
js
複製
const question = document.getElementById("question").value;

  • 從頁面上取得 ID 為 "question" 的輸入框內容，即使用者提出的問題。

呼叫 API
js
複製
const response = await fetch("https://api.groq.com/openai/v1/chat/completions", { ... });

  • 使用 Fetch API 呼叫指定的端點，設定如下：

    • method: "POST" 表示以 POST 方法送出請求。

    • headers:

      • "Authorization": 搭配 "Bearer " 與 API_KEY 用於身份驗證。

      • "Content-Type": "application/json"，告知伺服器傳送的內容格式為 JSON。

    • body:

      • 使用 JSON.stringify 將物件轉成 JSON 字串，內容包括：

        • model: 指定使用的模型名稱。

        • messages: 傳送一組對話訊息，包含：

          • 系統訊息（role 為 "system"）告知 API 必須以繁體中文回答。

          • 使用者訊息（role 為 "user"）包含使用者輸入的問題。

        • temperature: 控制回應的隨機性，數值越高則回答變化越大。

        • max_tokens: 限制回傳內容的長度。

處理 API 回傳資料
js
複製
const data = await response.json();

const answer = data.choices[0].message.content;

  • 先使用 response.json() 解析回傳的 JSON 資料，然後從結果中提取出回答文字（通常存放在 choices[0].message.content 中）。

更新頁面顯示
js
複製
document.getElementById("answer").innerText = answer;

  • 將取得的回答文字設定到 ID 為 "answer" 的 <span> 元素中，顯示在網頁上。

  • 錯誤處理
    使用 try...catch 區塊捕捉任何呼叫 API 時可能發生的錯誤，若有錯誤則顯示錯誤訊息。

4. 整體流程

  1. 使用者輸入問題：
    在輸入框中輸入文字後，按下「送出」按鈕。

  2. 呼叫 ask() 函式：
    按鈕的 onclick 屬性觸發 ask()，該函式取得輸入內容，並呼叫 API。

  3. 與 API 溝通：
    利用 Fetch API 發送 POST 請求，帶有模型、訊息與其他參數。

  4. 解析與顯示回應：
    API 回應後，程式解析回傳的 JSON，將回答文字顯示在頁面上；若發生錯誤則顯示錯誤訊息。

這份程式碼即是一個最小範例，展示了如何使用 HTML 與 JavaScript 來實作一個簡單的問答系統，並透過 API 金鑰與後端 API 進行對話。您可以在此基礎上進一步擴充功能或調整介面。