CH10 本地 AI 模型與對話平台

Part 3: 自建網頁對話平台

用 HTML、CSS、JavaScript 打造專屬 AI 對話介面

HTML 結構 CSS 美化 Ollama API 完整功能

為什麼要自建網頁介面？

Ollama GUI 的限制

只能在安裝 Ollama 的電腦使用
無法客製化介面樣式
無法整合到現有系統
無法分享給其他人使用

自建網頁的優勢

跨裝置：任何瀏覽器都能使用
客製化：完全掌控設計與功能
易分享：團隊成員直接使用
擴充性：輕鬆加入新功能

本單元目標：建立一個美觀、功能完整的 AI 對話網頁，串接 Ollama API。

步驟 1：建立專案資料夾

建立資料夾

                            Windows
                            C:\AI_Projects\local-ai-chat
                        

                            macOS / Linux
                            ~/AI_Projects/local-ai-chat
                        

專案結構

local-ai-chat/
index.html ← 主要檔案

我們將所有程式碼（HTML、CSS、JS）整合在單一檔案中，方便管理與部署。

優點：單一檔案即可運行，不需要額外的伺服器或套件，直接用瀏覽器開啟即可。

步驟 2：理解 HTML 結構

網頁由四個主要區塊組成：

1. 標題區 (Header)

<div class="chat-header">
  本地 AI 對話平台
</div>

顯示平台名稱與品牌識別

2. 模型選擇器

<select id="model-select">
  <option value="llama3">Llama 3</option>
  <option value="mistral">Mistral</option>
</select>

讓使用者切換不同 AI 模型

3. 對話區 (Messages)

<div class="chat-messages">
  <!-- 對話記錄在這裡 -->
</div>

顯示使用者與 AI 的對話

4. 輸入區 (Input)

<input type="text" id="chat-input">
<button id="send-button">發送</button>

使用者輸入問題的地方

步驟 3：CSS 美化設計

漸層背景

body {
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 100%
  );
}

圓角卡片

.chat-container {
  border-radius: 20px;
  box-shadow: 0 20px 60px
    rgba(0,0,0,0.3);
}

訊息氣泡

/* 使用者訊息 - 右側藍紫色 */
.message.user .message-content {
  background: linear-gradient(...);
  color: white;
}

/* AI 訊息 - 左側白色 */
.message.assistant .message-content {
  background: white;
  border: 1px solid #e0e0e0;
}

設計原則：使用者訊息靠右、AI 訊息靠左，用顏色區分，讓對話一目了然。

步驟 4：JavaScript 串接 Ollama API

API 端點

http://localhost:11434/api/generate

核心程式碼

// 呼叫 Ollama API
const response = await fetch('http://localhost:11434/api/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        model: 'llama3',      // 使用的模型
        prompt: '你好',        // 使用者輸入
        stream: false         // 不使用串流（等完整回應）
    })
});

const data = await response.json();
console.log(data.response);  // AI 的回答

對話流程解析

1

使用者輸入

在輸入框輸入問題，按下「發送」

2

顯示訊息

使用者訊息顯示在右側，顯示載入動畫

3

呼叫 API

將問題傳送給 Ollama，等待 AI 處理

4

顯示回應

AI 回答顯示在左側，自動捲動

async function sendMessage() {
    const message = chatInput.value.trim();
    if (!message) return;

    addMessage('user', message);       // 步驟 2
    chatInput.value = '';
    loadingIndicator.classList.add('active');

    const response = await fetch(...);  // 步驟 3
    const data = await response.json();

    addMessage('assistant', data.response);  // 步驟 4
}

步驟 5：錯誤處理機制

良好的錯誤處理讓使用者知道問題出在哪裡：

try {
    const response = await fetch(OLLAMA_API, { ... });

    if (!response.ok) {
        throw new Error(`API 錯誤: ${response.status}`);
    }

    const data = await response.json();
    addMessage('assistant', data.response);

} catch (error) {
    showError(`發生錯誤: ${error.message}
        請確認：
        1. Ollama 已經啟動
        2. 已下載選擇的模型
        3. 瀏覽器可以連接 localhost:11434`);
}

常見錯誤原因：

Ollama 沒有啟動
選擇的模型沒有下載
瀏覽器 CORS 限制（需用 HTTP Server）

步驟 6：啟動並測試

1確認 Ollama 運行中

檢查系統匣圖示，或瀏覽器開啟 http://localhost:11434

2啟動 HTTP 伺服器

                    終端機
                    cd C:\AI_Projects\local-ai-chat
                

                    終端機
                    python -m http.server 8080
                

3開啟瀏覽器

                    網址
                    http://localhost:8080/index.html
                

為什麼需要 HTTP Server？
瀏覽器的安全機制（CORS）限制直接開啟本地檔案無法呼叫 API。用 HTTP Server 啟動可以解決這個問題。

完成效果展示

網頁介面

對話測試

測試你的對話平台

測試 1：基本對話

你好，請用繁體中文自我介紹

確認 AI 能正常回應中文

測試 2：程式碼生成

請用 Python 寫一個計算質數的函數

確認程式碼格式正確顯示

測試 3：切換模型

選擇不同模型（如 Mistral），觀察回答風格差異

測試 4：錯誤處理

關閉 Ollama 後發送訊息，確認錯誤提示正常顯示

功能擴展建議

功能	說明	難度
對話記錄儲存	使用 localStorage 保存對話，下次開啟可繼續	簡單
串流回應	設定 `stream: true`，讓文字逐字顯示	中等
匯出對話	將對話記錄匯出為 TXT 或 JSON 檔案	簡單
語音輸入	使用 Web Speech API 實現語音轉文字	中等
系統提示詞	加入可編輯的 System Prompt 設定 AI 角色	簡單

Part 3 總結

恭喜！你已經建立了一個完整的網頁版 AI 對話平台。

已完成

建立 HTML 網頁結構
使用 CSS 美化介面
用 JavaScript 串接 API
實作錯誤處理機制
完成對話功能測試

核心技術

fetch() 非同步 API 呼叫
Ollama REST API
DOM 操作與事件監聽
CSS Flexbox 版面設計

下一步

在 Part 4，我們將深入了解系統架構與模型選擇策略，學會如何根據需求選擇最適合的模型。

你的專屬 AI 對話平台已經完成！
可以分享給團隊使用，或作為其他專案的基礎繼續擴展。