iT邦幫忙

2025 iThome 鐵人賽

DAY 16
0
AI & Data

AI 營養師 + Web3 數位健康護照系列 第 16

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

  • 分享至 

  • xImage
  •  

一個簡單明瞭的結果頁,能讓用戶持續回報飲食,願意接受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. 標題&結論

https://ithelp.ithome.com.tw/upload/images/20250928/20129220CXsuTWPcLD.jpg

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>
  • 頁面預覽


https://ithelp.ithome.com.tw/upload/images/20250928/20129220ctiLrSmN9u.jpg


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>
  • 頁面預覽


https://ithelp.ithome.com.tw/upload/images/20250928/20129220rOzmTQ55vC.jpg


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>
  • 頁面預覽


https://ithelp.ithome.com.tw/upload/images/20250928/20129220DRNUwhWVcm.jpg


之後會再依照專案的需求,追加必要的功能,例如:儲存資料、查詢資料...等等
可參閱:


三、延伸閱讀


上一篇
Day15. 用 Flask 規劃 AI 營養顧問的專案架構 Ep .3:給 AI 顧問穿新衣~打造人性化的首頁 UI(index.html)
下一篇
Day17. 用 Flask 規劃 AI 營養顧問的專案架構 Ep .5:Flask + HTML = Jinja2?
系列文
AI 營養師 + Web3 數位健康護照35
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言