GenAI 驅動網站現代化

課程概述

很多企業的官網體驗都老了：搜尋還停在關鍵字匹配、推薦系統太陽春、客戶互動還靠一頁靜態 FAQ。這堂課要談的，是怎麼用 GenAI 幫既有網站加上智慧。不用大改重寫，一步一步把核心功能升級，把使用者滿意度跟轉換率拉上來。

你將學到

• 設計漸進式的網站 AI 現代化路線圖
• 整合語義搜尋取代傳統關鍵字搜尋
• 運用 Gemini 建構對話式產品導覽助手
• 使用 Firebase 與 Cloud Run 搭建 AI 功能的後端架構

核心概念

漸進式 AI 現代化策略

一次砍掉整站重做風險太高，建議分階段來。第一階段：智慧搜尋升級，用語義搜尋取代關鍵字搜尋，這也是使用者最有感的改善。第二階段：對話式互動，加個 AI 聊天助手處理常見問題，幫客服分擔壓力。第三階段：個人化體驗，依使用者行為動態推薦內容。第四階段：內容自動生成，讓系統自動產出產品描述、SEO 文案這類東西。

語義搜尋的整合模式

傳統搜尋引擎靠倒排索引去比對關鍵字，碰到同義詞或語意相近的查詢就很吃力。語義搜尋則是用 Embedding 把查詢跟文件都轉成向量，再靠向量相似度找出最相關的結果。要在既有網站接上語義搜尋，通常三件事就夠：幫內容建好 Embedding 索引、在搜尋 API 裡加上語義搜尋邏輯、前端再把搜尋結果的呈現方式調一下。

對話式助手的前端整合

要在網站裡塞一個 AI 對話助手，有幾個設計點要先想清楚：觸發方式（浮動按鈕還是頁面內嵌）、上下文注入（把當前頁面的內容丟進 Prompt，回答才會準）、回退機制（AI 答不出來時轉接真人客服），還有數據追蹤（把對話記下來，之後拿來持續改善）。架構上最常見的搭法，就是前端交給 Firebase Hosting，AI 後端交給 Cloud Run。

成效衡量指標

AI 現代化做得好不好，要看業務指標說話：搜尋結果點擊率（CTR）有沒有上去、使用者從搜尋走到轉換的路徑有沒有變短、AI 助手自己解決掉問題的比例（Containment Rate），還有使用者滿意度分數（CSAT）。建議上線前先把基線指標訂清楚，上線後再持續用 A/B 測試比較不同的 AI 策略。

實作重點

• 用 Vertex AI Search 為既有網站內容建立語義搜尋索引
• 建構一個對話式助手的後端，整合 Gemini 與網站內容做為知識來源
• 使用 Firebase Hosting 部署含有 AI 對話元件的前端頁面
• 設計 A/B 測試方案，比較傳統搜尋與語義搜尋的使用者體驗差異

Lab 導讀

Lab 連結：Website Modernization with Generative AI on Google Cloud — Google Cloud Skills Boost

這個 Lab 拿一個電商網站當案例，帶你一步步加上 AI 功能。做的時候特別留意架構的分層：前端怎麼跟 AI 後端溝通、AI 後端又怎麼去調用 Vertex AI。做完 Lab 之後，不妨想想同一套模式怎麼搬到你自己的網站或應用上。

延伸學習

• 建構 GenAI 應用 — GenAI 應用的完整建構流程
• Gemini + Streamlit 開發 GenAI App — 快速原型開發的替代方案
• Gemini 開發者指南 — Gemini API 的進階功能