在這次的鐵人賽中，我一路從撰寫網頁、串接語言模型、使用 Flask 架設後端，到最後把整個網頁美化完成，完成了一個端到端的專案流程。回頭來看這條路徑，其實是把「理論 → 實作 → 整合 → 用戶體驗」這幾個階段串在一起，是一次很有意義的全棧練習。

在這次鐵人賽中，我選擇了一條幾乎涵蓋前後端整合的路徑，過程中每一步都有收穫也有挑戰。以下就是我這幾個階段的學習心得與反思：

一、撰寫網頁（前端基礎構建）

我從最基礎的 HTML、CSS、JavaScript 開始撰寫前端畫面。這階段的重點在於：

UI 架構（按照設計稿或 Wireframe 決定結構）

元素定位與排版（Flexbox、Grid、盒模型）

互動邏輯（按鈕點擊、輸入欄位、畫面切換等）

與後端／API 通訊的思路準備（例如決定要用 fetch、Promise、非同步函式等）

在這階段，我就已經設想好：前端會把使用者輸入或問題送給後端／模型，再把模型的回應顯示回來。因此我在前端做好預備的 input / output 結構與畫面樣式。

二、串接語言模型 API

當前端架構做好後，下一步就是把 AI／語言模型串接進來。這部分實作中常見挑戰有：

API 憑證保護：不能把私鑰寫在前端，要由後端代為呼叫

請求格式與資料結構：如何包裝 prompt、參數、回傳格式等

錯誤／異常處理：網絡錯誤、API 速率限制、回傳非預期格式等

資料解析與前端顯示：把模型回傳內容（可能有多段文字、標點、HTML／Markdown 等）解析、格式化、顯示在頁面

這部分讓我理解了前端-後端分層設計的重要性，也讓我對非同步 JavaScript（Promise、async/await）與錯誤處理有了更深的體驗。

三、Flask 後端架設與 API 中介

在後端，我選擇 Flask 作為 Web 框架來搭建 API 中介。這階段的重點包括：

建立 Flask 路由，例如接收 POST /api/chat 的請求

從前端接收資料（JSON）、處理參數、呼叫語言模型 API

將模型回傳結果包裝成 JSON 回傳給前端

處理跨域（CORS）、安全性（驗證、限制請求頻率）、錯誤回傳格式等

部署在伺服器上：可能是 VPS、雲端主機、Heroku、Docker 容器等，並確保前端可以正確向該後端呼叫

透過這個階段，我實際把前端與模型／後端串接起來，讓整個系統能動起來，從用戶輸入 → 模型處理 → 回傳顯示，是一個完整流程。

四、美化網頁與使用者體驗優化

最後，我把重心放在前端界面的美化與使用者體驗（UX）上：

配色、字型、排版：讓介面看起來更整潔、專業

響應式設計：支援在不同螢幕尺寸（手機、平板、桌機）上的版面排版

顯示效果與互動：加入過渡動畫、滑動、 Loading 標示、錯誤提示等

頁面流暢性：減少不必要重繪、避免過多 DOM 操作，確保在資料回傳與顯示上使用者沒有明顯卡頓感