Day-17 美化及優化網頁-2

2025 iThome 鐵人賽

DAY 17

生成式 AI

30天製作生成式AI的互動網頁專案系列第 17 篇

17th鐵人賽

max

2025-09-15 18:24:19

56 瀏覽

分享至

延續昨天的內容，我們已經完成了新版 PHI-4 問答介面的前端視覺優化與基本功能建立，今天我們將針對程式碼做更細部的解說，協助理解背後的邏輯與結構。

一、HTML 架構解析

頁首設定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PHI-4 網頁問答測試</title>

我們宣告這是一個 HTML5 網頁（），並設置語言為英文（lang="en"）。雖然主體是中文內容，但這樣設置有助於 SEO 與多語系切換。

主要內容區塊

<div class="container">
  <div class="form-section">...</div>
  <div class="response-section">...</div>
</div>

使用 Flexbox 將畫面區分為「提問區」與「回應區」，視覺上左右對稱、邏輯上清晰分明，也為之後擴充更多功能（如歷史紀錄、切換模型）提供空間。

二、CSS 美化與排版重點

新版的 CSS 設計明顯比過去更細緻，我們來看幾個重點：

背景與字體

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(to right, #e0ecff, #f5f9ff);
}

漸層背景讓整體視覺柔和、乾淨，同時搭配無襯線字體讓閱讀體驗更佳。

卡片式內容設計

.container {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

使用陰影與圓角製造「卡片式」的立體感，搭配中央排列（margin: auto），使用者能聚焦在互動介面本身。

響應式設計

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    align-items: stretch;
  }
}

當螢幕寬度小於 768px 時，介面自動垂直排列，適合手機與平板操作，實現真正的跨裝置體驗。

三、JavaScript 功能分析

核心邏輯為攔截表單送出事件，非同步發送使用者輸入至伺服器，並回傳顯示在畫面上。

初始清空輸入欄位

document.getElementById("Q").value = "";

確保重新載入頁面時不會殘留使用者上次輸入的資料。

表單事件監聽與 fetch 發送

form.addEventListener('submit', function (event) {
  event.preventDefault();
  ...
  fetch('/page1', {
    method: 'POST',
    body: formData
  })
  ...
});

event.preventDefault() 可阻止預設的表單送出行為，改以 fetch 非同步送出 FormData 給 /page1，等待伺服器回應。

顯示回應與錯誤處理

.then(data => {
  responseDiv.innerText = data;
  inputField.value = "";
})
.catch(error => {
  responseDiv.innerText = '錯誤：' + error;
  inputField.value = "";
});

伺服器回傳的內容會直接顯示在 #response 區塊中，若出現錯誤也會立即顯示錯誤訊息，增進除錯效率與使用者友善度。