Day15. 用 Flask 規劃 AI 營養顧問的專案架構 Ep .3：給 AI 顧問穿新衣～打造人性化的首頁 UI（index.html）

17th鐵人賽

楊舒安

2025-09-29 00:06:41

60 瀏覽

分享至

首頁（index.html）是使用者與 AI 營養顧問互動的第一道門檻，也是整個健康數據服務的重心。設計良好友善的首頁不僅能降低新手操作壓力，更能拉近用戶與技術的距離。

本日重點

規劃 AI 營養顧問首頁 UI/UX 的設計思路
介紹 Flask 專案模板結構與 HTML/CSS 整合方式
使用 Jinja2 搭配動態資料渲染首頁介面
實例：打造 index.html，強化用戶體驗的關鍵細節
提升首頁互動性與易用性的技巧分享

一、首頁不只是一個進入頁，是讓 AI 營養顧問成為貼心助手的第一步。

1. 昨天的 Google Fit 專案架構

AI_Nutri_Project/
├── main.py              # Flask 應用程式主程式
└── credentials.json     # Google OAuth 憑證

2. 今天的設計流程示意圖

(圖片由 Perplexity 協助生成)

3. 細節規劃

QA 式互動流程
首頁包含「目標提問」、「飲食上傳」兩大區塊，鼓勵用戶用自然語言（例如：「想知道今天晚餐的熱量」）或直接用圖片告訴 AI 需求
友善設計
採 Bootstrap 風格美化表單、按鈕和引導介面
串接 AI API 的規劃
資料填完後，將資訊送往 Flask 後端與 AI 模型，讓後端統一處理健康資料、圖像分析和回饋
可再繼續擴充功能

二、開工！！

1. 加入 index.html

AI_Nutri_Project/  
├── main.py    
├── credentials.json  
└── index.html

2. 實作

初期介面設計：

模擬一位親切、專業的營養顧問（不讓使用者填寫一大堆表單，而是用 「問答」 或 「步驟引導」 的方式收集資訊）：
    * 使用 Bootstrap-like 結構來實現。
    * 將所有輸入集中在一個引導式頁面。

預計要完成的介面功能：

    * 連接並獲取 Google Fit 資料。（已完成）
    * 首頁/輸入頁 (Index)：文字輸入欄位和圖片上傳。（未完成）
    * 串接 AI API： 綜合分析使用者提供的資訊。（未完成）

step 1. 編輯 index.html

* 美化 Google Fit 驗證連結：

step 2. 增加文字輸入欄位和圖片上傳

在表單(form) 內增加兩個 div 區塊

        <div class="card-input">
          <h2>1. 您的目標或疑問？</h2>
          <div class="input-group">
            <label for="user_goal"
              >請告訴我 (例如：我想知道這餐熱量/我想在三個月內減重 5
              公斤)</label
            >
            <textarea
              id="user_goal"
              name="user_goal"
              rows="3"
              required
            ></textarea>
          </div>
        </div>

        <div class="card-input">
          <h2>2. 上傳食物圖片</h2>
          <div class="upload-area">
            <input
              type="file"
              id="food_image"
              name="food_image"
              accept="image/*"
              style="display: none"
              required
            />
            <label for="food_image" style="cursor: pointer">
              📸 上傳圖片 (午餐/晚餐等)
            </label>
          </div>
        </div>