どこかで、きっと、また。
基於 Nuxt.js 開發的 GPT 對話平台，支援 SSE 串接、逐字輸出、歷史紀錄與對話分享。
- ROLE
- 前端開發工程師
- CLIENT
- AI Client
- YEAR
- 2024
- STREAM
- SSE
- SHARE
- Public View
- UX
- Chat Flow
Overview專案概述
客戶需要一個方便使用自行 fine-tune AI 模型的平台，因此以前端互動與對話體驗為核心，規劃輸入框、逐字輸出、自動滾動與響應式版面。
前端採 Nuxt.js 與 Vue，與後端協作串接 OpenAI API，以 SSE 流式傳輸處理逐字回應，並加入對話儲存、歷史查詢、分享與評論流程。
TECH STACK使用技術
FEATURES產品功能
SSE 即時對話
歷史紀錄查詢
對話分享與評論
自動滾動與響應式介面
Screens產品畫面
01/ 04
對話Chat
My Contribution我負責的事
- 01完成整體 UI 規劃與互動邏輯設計，支援響應式與打字效果。
- 02整合 SSE 串流機制，實現逐字回應輸出與自動滾動。
- 03設計對話分享流程，實作複製連結與公開檢視邏輯。
- 04建立對話儲存與查詢 API 串接邏輯，支援歷史紀錄功能。
- 05與後端溝通 API 架構並協調 SSE 資料格式。
Problems & Decisions問題與決策
客戶希望能方便使用其自行 fine-tune 的 AI 模型，因此建立一個具備對話、儲存、分享功能的平台。我以 ChatGPT 為參考規劃版面，實作對話輸入框、逐字輸出、自動滾動與響應式設計。應客戶需求加入對話分享與評論功能，簡化操作流程。
CHALLENGES過程中處理的問題
- 01
處理對話過程中逐字回應與自動滾動的同步邏輯。Case 01
- 02
處理 SSE 串流資料格式、部分回應、完成狀態與打字動畫同步顯示。Case 01
- 03
處理連續對話過程中的狀態同步與捲動行為。Case 01
- 04
設計可分享的對話內容結構，並處理前端路由與檢視邏輯。
- 05
與後端溝通資料格式、API 回傳規格與錯誤處理方式。Case 01
CASE 01
SSE 對話串流狀態
- Finding
- 逐字輸出需要同時處理部分回應、完成狀態、錯誤狀態、連續對話與自動滾動。
- Decision
- 以前端串流狀態管理承接 SSE 事件，並和後端對齊資料格式、結束條件與錯誤回傳，讓 UI 反映對話進度。
- Result
- 介面可逐字顯示回應，並處理串流完成、錯誤與自動捲動。
NEXT PROJECT下一個專案
LINE LIFF 管理系統
LINE LIFF Management
LINE LIFF 前台與 React 後台管理系統。核心處理多群編 / 多公司登入選擇與切換流程，並整合 LIFF 登入、登出跳轉、資料刷新與 React 頁面狀態管理。
