Part 6：網頁介面

建立 AI 對話網頁介面

實作步驟教學

使用鍵盤 ← → 或點擊下方按鈕切換投影片

前後端分離架構

前端
HTML + CSS + JS

⟷

後端
Flask + Python

⟷

AI 服務
OpenAI API

前端負責

顯示介面
處理使用者互動
發送/接收資料

後端負責

處理業務邏輯
管理 API Key
呼叫 AI API

前後端透過 API 端點（/chat）溝通，各司其職，易於維護！

步驟 1：了解 Flask 資料夾結構

Flask 有特定的資料夾結構規範：

📁 2.5_美化介面/階段一_HTML介面結構/
├── 📄 app.py (Flask 主程式)
├── 📄 .env (API Key)
├── 📁 templates/ (HTML 模板)
│ └── 📄 index.html
└── 📁 static/ (靜態檔案)
└── 📄 style.css (可選)

templates 資料夾

放置 HTML 範本檔案，Flask 會自動在這裡尋找

static 資料夾

放置 CSS、JavaScript、圖片等靜態檔案

步驟 2：建立必要的資料夾

1開啟 CMD，進入專案資料夾

cd D:\自己架設AI_零基礎到大師\CH2_地端與雲端串接概念\AI_Projects\2.5_美化介面\階段一_HTML介面結構

2建立 templates 資料夾

mkdir templates

3建立 static 資料夾（可選）

mkdir static

現在你的專案資料夾應該有 templates 和 static 兩個子資料夾！

步驟 3：了解 HTML 檔案結構

index.html 包含三個主要部分：

1. HTML 結構

定義網頁的骨架
- 標題區域
- 對話顯示區域
- 輸入區域

2. CSS 樣式

讓網頁美觀
- 漸層背景
- 訊息泡泡
- 按鈕效果

3. JavaScript 邏輯

處理互動功能
- 發送訊息
- 顯示回應
- 呼叫 API

這三個部分都寫在同一個 index.html 檔案中，方便管理！

步驟 4：HTML 基本結構

在 templates 資料夾中建立 index.html：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>AI 對話助手</title>
    <style>
        /* CSS 樣式放這裡 */
    </style>
</head>
<body>
    <div class="container">
        <!-- 標題區域 -->
        <!-- 對話區域 -->
        <!-- 輸入區域 -->
    </div>
    <script>
        // JavaScript 放這裡
    </script>
</body>
</html>
            

步驟 5：標題區域 HTML

<!-- 標題區域 -->
<div class="header">
    <h1>🤖 AI 對話助手</h1>
    <p>由 OpenAI GPT 驅動</p>
</div>
            

對應的 CSS 樣式

.header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 20px;
    border-radius: 20px 20px 0 0;
    text-align: center;
}
            

linear-gradient 創造漸層背景，讓標題區域更有質感！

步驟 6：對話區域 HTML

<!-- 對話記錄顯示區域 -->
<div class="chat-box" id="chatBox">
    <div class="message ai">
        <div class="message-content">
            你好！我是 AI 助手，有什麼可以幫助你的嗎？
        </div>
    </div>
</div>
            

chat-box

對話容器，用來顯示所有訊息，設定為可捲動

message ai / message user

區分 AI 訊息（靠左）和使用者訊息（靠右）

步驟 7：訊息樣式 CSS

/* 使用者訊息：靠右、藍色 */
.message.user {
    justify-content: flex-end;
}
.message.user .message-content {
    background: #667eea;
    color: white;
}

/* AI 訊息：靠左、白色 */
.message.ai .message-content {
    background: white;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
            

這種設計讓對話看起來像常見的即時通訊軟體！

步驟 8：輸入區域 HTML

<!-- 訊息輸入區域 -->
<div class="input-area">
    <div class="input-group">
        <input
            type="text"
            id="messageInput"
            placeholder="輸入你的訊息..."
        />
        <button id="sendButton">發送</button>
    </div>
</div>
            

重要元素

id="messageInput" - JavaScript 會用來取得輸入內容
id="sendButton" - JavaScript 會監聽點擊事件
placeholder - 提示使用者可以輸入什麼

步驟 9：JavaScript 核心邏輯

// 取得 DOM 元素
const chatBox = document.getElementById('chatBox');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');

// 監聽發送按鈕點擊
sendButton.addEventListener('click', sendMessage);

// 監聽 Enter 鍵
messageInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        sendMessage();
    }
});
            

使用者可以點擊按鈕或按 Enter 鍵發送訊息！

步驟 10：sendMessage 函數

async function sendMessage() {
    const message = messageInput.value.trim();
    if (!message) return;  // 空訊息不處理

    addMessage(message, 'user');  // 顯示使用者訊息
    messageInput.value = '';       // 清空輸入框

    sendButton.disabled = true;
    sendButton.textContent = '思考中...';

    try {
        const response = await fetch('/chat', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ message: message })
        });
        // ... 處理回應
    } catch (error) { ... }
}
            

步驟 11：addMessage 函數

function addMessage(text, sender) {
    // 建立訊息容器
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${sender}`;

    // 建立訊息內容
    const contentDiv = document.createElement('div');
    contentDiv.className = 'message-content';
    contentDiv.textContent = text;

    // 組裝並加入到聊天框
    messageDiv.appendChild(contentDiv);
    chatBox.appendChild(messageDiv);

    // 自動捲動到最新訊息
    chatBox.scrollTop = chatBox.scrollHeight;
}
            

這個函數負責動態建立 HTML 元素，將新訊息加入畫面！

完整介面預覽

完成的 AI 對話介面

介面特色

漸層色標題區域
對話泡泡樣式（使用者藍色、AI 白色）
圓角輸入框和發送按鈕
自動捲動到最新訊息

Part 6 重點回顧

本單元學到的技能

理解前後端分離架構
Flask 的資料夾結構（templates、static）
HTML 結構：header、chat-box、input-area
CSS 樣式：漸層背景、訊息泡泡
JavaScript：DOM 操作、事件監聽、fetch API

檔案清單

templates/index.html
包含 HTML + CSS + JavaScript

下一步

Part 7 將學習如何
修改 Flask 來提供網頁

下一單元：Part 7 前後端串接

← 返回課程首頁