Day16. 用 Flask 規劃 AI 營養顧問的專案架構 Ep .4：結果與分析頁面（result.html）

17th鐵人賽

楊舒安

2025-09-30 00:06:30

62 瀏覽

分享至

一個簡單明瞭的結果頁，能讓用戶持續回報飲食，願意接受AI建議。

傳統的分析結果往往仰賴 Office 類工具或複雜報表，大量欄位和密密麻麻的數據，容易讓新手用戶感到無所適從，不知從何開始改善自己的飲食與健康。

人性化的健康 AI 分析頁設計，重點在於「資訊濃縮」與「視覺化」：用可愛的圖表、簡單的總結和明確的行動建議，讓每一位用戶不需要醫學或營養背景，也能一眼看懂重點、快速讀取個人健康趨勢，進而產生積極改變生活的動力。

本日重點

Flask 專案中結果與分析頁面的設計邏輯
Jinja2 動態渲染分析數據與報表介面
如何將 AI 推論結果、健康建議以友善的方式呈現
分析頁的互動元素、視覺化方法與 UX 強化技巧
實作範例：串接數據到模板、回饋給使用者

一、設計理念

分層設計 (Layered Layout)

1. 將摘要置頂 (Top Summary - 總結)

AI 總結：用一句話總結分析結果。例：「您的午餐營養均衡，但熱量略高於您的減重目標。」
核心指標：顯示當餐攝入的總熱量 (Calories) 和營養素比例 (蛋白質/脂肪/碳水化合物) 的圖表。

2. 結果選擇區 (Action/Output Selector)

使用分頁 (Tabs) 或卡片按鈕 (Pill-shaped Buttons) 讓使用者選擇回覆類型。
必選項目 (點選切換)：
- 食物營養及熱量分析 (The Deep Dive)
- 今日飲食建議 (Meal Plan Suggestion)
- 生活方式調整建議 (Lifestyle Advice)

3. 核心內容區 (Gemini's Response)

食物營養及熱量分析：
- 列表：列出圖片中的食物，並顯示估計份量和估計熱量。
- 數據比對：將當餐數據與 Google Fit 的每日消耗熱量 (或設定的目標) 進行比對。
飲食建議/生活方式調整：
- 項目符號 (Bullet Points)：使用簡潔的點列清單，清楚地給出可操作的建議 (Actionable Steps)。
- 語氣：使用鼓勵、支持和非評判性的語氣。

二、開始動手

1. 新增一個 UI 模板 (templates/)，將昨天的 index.html 以及今天的 results.html 檔案移入資料夾。

先將 main.py 檔名改成 app.py（避免之後產生不必要的困擾）

預計今天完工後的專案架構圖：

AI_Nutri_Project/
├── app.py                # Flask 應用程式主程式
├── credentials.json      # Google OAuth 憑證
└── templates/
    ├── index.html        # 輸入/首頁 UI
    └── results.html      # 分析結果 UI

2. 編輯 results.html

step 1. 標題&結論

step 2. 加入食物營養及熱量分析功能

 <div class="tabs">
        <button class="tab-btn active" onclick="showTab('analysis')">
          食物營養及熱量分析
        </button>      
      </div>
      <div id="analysis" class="tab-content active">
        <h2>這裡會顯示分析的食材</h2>      
      </div>

頁面預覽

step 3. 增加項目說明

  <table class="data-table">
          <thead>
            <tr>
              <th>項目</th>
              <th>詳細說明</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1.</td>
              <td></td>
            </tr>
            <tr>
              <td>2.</td>
              <td></td>
            </tr>
          </tbody>
        </table>

頁面預覽

step 4. 增加飲食建議tab

  <button class="tab-btn" onclick="showTab('advice')">飲食建議</button>
  <div id="advice" class="tab-content">
        <h2>這裡會顯示飲食建議的結論</h2>
        <ul>
          <li>1.</li>
          <li>2.</li>         
        </ul>
      </div>