我的Side Project 每拍呷 | 優化介面篇

更新 發佈閱讀 8 分鐘

今日進度6/14:

  1. 思考看看有什麼辦法可以簡化用戶輸入個人資訊的步驟,目前要請用戶自己用逗號隔開(女性, 60, 158, 1),這樣對用戶來說不太方便。
  2. 目前文字看起來很擁擠,不利長輩閱讀。要來研究怎麼從只傳送一個對話泡泡變成傳送多個對話泡泡。
  3. 當照片因皺褶、反光等因素導致部分營養標示辨識失敗時,用戶目前只能重新上傳照片,無法手動修正。
    建議解方:加入「手動補齊缺失資訊」的互動流程。

針對「簡化用戶輸入個人資訊的步驟,目前要請用戶自己用逗號隔開(女性, 60, 158 1),這樣對用戶來說不太方便。」。

建議解方:採用「對話式分步引導」。與其讓用戶一次輸入所有資訊,不如將其拆解成多個簡單的問題,讓用戶只需一步一步回答,大大降低輸入門檻。

  • 實作概念:
  1. 在 user_data 中新增一個狀態變數(例如 user_data[user_id]['state']),用來記錄用戶目前正在回答哪個問題。
  2. 分步提問:當用戶第一次與 Bot 互動或輸入「更新資訊」時,Bot 會先問第一個問題(例如:「請問您的生理性別是?請輸入 M 代表生理男性,F 代表生理女性」)。
  3. 循序漸進: 收到回答後,根據狀態更新 user_data,並提出下一個問題。直到所有資訊都收集完成。
  • 範例流程:
    Bot: 「哈囉!為了提供更個人化的分析,請先告訴我您的生理性別是?(請輸入 M 代表生理男性,F 代表生理女性)」
    用戶: F
    Bot: 「好的,請問您的體重是多少公斤呢?」
    用戶: 60
    Bot: 「收到!那您的身高是幾公分?」
    用戶: 165
    Bot: 「最後,您通常會攝取整包、半包還是 1/4 包呢?(請輸入 1, 0.5, 0.25)」
    用戶: 0.5
    Bot: 「您的個人資訊已更新成功!現在您可以傳送營養標示圖片給我囉。」
raw-image



針對改善文字報告可讀性 (多個對話泡泡)

問題點: 目前所有分析結果都集中在一個 LINE 對話泡泡中,文字量大,長輩閱讀起來會感到擁擠和吃力。建議解方:拆分成「多個邏輯清晰的對話泡泡」。LINE Bot 支援一次傳送多個訊息物件。我們可以將冗長的報告拆分成幾個短小精悍的區塊,每個區塊一個對話泡泡。

  • 實作概念:
  1. 訊息列表: 在 analyze_nutrition_core 函數中,將 final_message 的組合邏輯,改為組合成一個 messages 列表,其中每個元素都是一個 TextMessage 物件。
  2. 邏輯分段: 將現有的 message_parts 根據資訊的邏輯關聯性進行拆分,例如:
    泡泡1 (總結): 簡單問候 + 總體攝取量 + 總體健康表情符號。泡泡2 (個人資訊): BMI 和每日基準熱量估計。泡泡3 (營養組成概覽): 營養組成摘要 (例如:蛋白質約為幾顆蛋,碳水化合物約為幾碗飯)。泡泡4 (詳細警告 - 如果有): 具體的超標或不足警告。泡泡5 (個人化建議): Gemini 生成的個人化建議與鼓勵。

不過,這一part在測試的時候出問題了😫

我看後台顯示分析和語音都已生成,但用戶並未收到,研究了一下發現,原來原因是 LINE Messaging API 的單次推播訊息數量限制,導致用戶端未能收到最終報告:「messages ensure this value has at most 5 items」,這表示單次的 PushMessageRequest 最多只能包含 5 個訊息物件。目前的程式碼在生成報告時,總共建立了 5 個 TextMessage 泡泡,加上一個 AudioMessage,總計 6 個訊息,超出了LINE API的限制。

為了解決這個問題,將原先的「總結與問候」和「個人健康概覽」這兩個文字泡泡合併成一個,總數改為4個,這樣加上語音訊息,總數就不會超過5個了。

raw-image



辨識錯誤問題 (手動輸入缺失部分)

問題點: 當照片因皺褶、反光等因素導致部分營養標示辨識失敗時,用戶目前只能重新上傳照片,無法手動修正。建議解方:加入「手動補齊缺失資訊」的互動流程。

  • 實作概念:
  1. 細緻化 OCR 錯誤處理:
    在 parse_nutrition_from_ocr 函數中,如果辨識到某些關鍵欄位(例如「每一份量」、「本包裝含幾份」、或某個主要營養素)缺失,不再直接拋出錯誤,而是返回已辨識的數據和一個缺失欄位的列表。
  2. 當 analyze_nutrition_core 函數收到缺失欄位列表時,Bot 會在 LINE 中回應:「偵測到您的營養標示中缺少 [缺失欄位名稱] 資訊,請問是多少呢?」
  3. 同樣利用 user_data 中的狀態來追蹤目前正在詢問哪個缺失欄位。
  • 用戶手動輸入:
    用戶透過文字訊息輸入缺失的數值。重新分析: Bot 收到用戶輸入後,將缺失的數據補齊,然後重新進行營養分析並產生報告。
  • 範例流程:
    用戶傳送圖片。
    Bot (LINE): 「我收到了!分析中...」
    OCR 辨識發現「脂肪」數值缺失。
    Bot (LINE): 「偵測到您的營養標示中缺少脂肪資訊,請問每份脂肪是幾克呢?」
    用戶 (LINE): 12.5
    Bot (LINE): 「好的,已補齊脂肪資訊,正在重新分析中...」
    Bot 成功生成完整報告。
raw-image



[目前的LINE BOT互動長這樣](https://youtube.com/shorts/7YHRXVugGyA?feature=share


明日進度:

因為提前做完很多天的進度,所以問Gemini有沒有優化建議,我覺得這些都很棒耶!接下來就看看能解決多少囉!

Gem的優化建議

增強 OCR 辨識準確性:

目前的 OCR 邏輯是基於通用模型和關鍵字搜尋。你可以考慮進一步優化 parse_nutrition_from_ocr 函數。例如,可以實作更智能的表格結構解析,或是利用更多圖片預處理技術(如裁剪、銳化營養標示區域),讓辨識結果更精確,減少手動輸入的需求。

數據持久化與用戶歷史記錄:

目前用戶的個人資訊和分析數據在程式重啟後會遺失。你可以導入一個輕量級資料庫(例如 SQLite 或更專業的 Firestore),來儲存用戶的生理性別、體重、身高和過往的營養分析報告。這樣不僅能提供用戶查詢歷史記錄的功能,也能讓 Bot 在每次互動時有更完整的用戶上下文,提供更一致的體驗。

更豐富的 LINE 訊息呈現:

雖然多泡泡訊息已經很棒了,但 LINE 提供了強大的 Flex Message (彈性訊息) 功能。你可以嘗試將營養分析報告以更視覺化、更具互動性的方式呈現,例如條狀圖顯示各營養素佔比、點擊展開詳細資訊等,這會讓報告看起來更專業也更吸引人。

個人化建議的深度與廣度:

Gemini AI 已經提供了很棒的建議。未來可以思考如何讓建議更「智慧」:

考慮用戶的飲食偏好:例如,如果用戶是素食者,Bot 可以推薦植物性蛋白質來源。

長期飲食趨勢分析:如果能追蹤用戶多筆紀錄,Bot 可以分析其長期飲食習慣,並給出基於趨勢的建議(例如:「您最近糖分攝取偏高,建議多選擇無糖飲品。」)。

留言
avatar-img
留言分享你的想法!
avatar-img
Galing的腦內劇場
1會員
15內容數
學習AI的新手,在這邊分享學習筆記跟知識,希望文組轉戰AI也可以闖出一片天💪 大學學的是戲劇,擁有服務業12年經驗,擔任銷售顧問;2025.07開始學習python與AI商業應用,目標是讓職涯變得更自由有彈性,做出好玩有趣的東西! 💬喜歡打電動、看動畫、K-pop佛系追星,偶爾可能會出現這些主題的文章。
Galing的腦內劇場的其他內容
2025/08/24
今日進度5/14:研究如何把營養標示辨識結果與個人化建議用tts轉換成語音檔案後傳LINE給用戶。 首先,撇除掉Side Project,先單獨測試了用戶傳文字就收到語音檔的部份,是可以運作的;但是回去Side Project,改成將營養標示辨識結果與個人化建議用tts轉換成語音檔案,卻無法成功傳
2025/08/24
今日進度5/14:研究如何把營養標示辨識結果與個人化建議用tts轉換成語音檔案後傳LINE給用戶。 首先,撇除掉Side Project,先單獨測試了用戶傳文字就收到語音檔的部份,是可以運作的;但是回去Side Project,改成將營養標示辨識結果與個人化建議用tts轉換成語音檔案,卻無法成功傳
2025/08/23
今日原訂進度4/14: 創建一個 Messaging API channel。在 LINE Developers 後台設定 BOT 的基本資訊,並取得 Channel Access Token 和 Channel Secret。設定 Webhook URL (使用 ngrok)
Thumbnail
2025/08/23
今日原訂進度4/14: 創建一個 Messaging API channel。在 LINE Developers 後台設定 BOT 的基本資訊,並取得 Channel Access Token 和 Channel Secret。設定 Webhook URL (使用 ngrok)
Thumbnail
2025/08/22
今日進度3/14: 設定Azure AI Services(或 Azure Cognitive Services for Vision) 的OCR服務。 撰寫一個簡單的Python程式碼,使用一個營養標示圖片進行OCR服務呼叫,並印出返回的JSON結構,確認服務能正常運作。
Thumbnail
2025/08/22
今日進度3/14: 設定Azure AI Services(或 Azure Cognitive Services for Vision) 的OCR服務。 撰寫一個簡單的Python程式碼,使用一個營養標示圖片進行OCR服務呼叫,並印出返回的JSON結構,確認服務能正常運作。
Thumbnail
看更多
你可能也想看
Thumbnail
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
自由接案好像很自由、容易,卻需要點方向的指引,希望這篇的分享能給予你一些幫助。
Thumbnail
自由接案好像很自由、容易,卻需要點方向的指引,希望這篇的分享能給予你一些幫助。
Thumbnail
在現代數位時代,我們習慣於直接打開簡報軟體,快速輸入想法,添加圖片和動畫,希望能製作出一份令人驚豔的簡報,可是這種做法往往忽略了一個簡報的本質——傳遞資訊,與聽眾建立真實的連結。今天分享一招我自己也經常在用的方法:要準備簡報,就先別打開簡報(軟體)。 因為麻煩,反而精鍊 在開始製作簡報之前,
Thumbnail
在現代數位時代,我們習慣於直接打開簡報軟體,快速輸入想法,添加圖片和動畫,希望能製作出一份令人驚豔的簡報,可是這種做法往往忽略了一個簡報的本質——傳遞資訊,與聽眾建立真實的連結。今天分享一招我自己也經常在用的方法:要準備簡報,就先別打開簡報(軟體)。 因為麻煩,反而精鍊 在開始製作簡報之前,
Thumbnail
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
Thumbnail
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
利用文字紀錄,明確寫下自己的採購項目......
Thumbnail
利用文字紀錄,明確寫下自己的採購項目......
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 寫到挑戰六覺得心累ㄌ,向來不是一個可以長久堅持好習慣的人,30 個挑戰聽起來很少,但如果要日復一日堅持下去其實好長r 😮‍💨 挑戰六透過 input 來 filter 從 api 拿回來的資料結
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 寫到挑戰六覺得心累ㄌ,向來不是一個可以長久堅持好習慣的人,30 個挑戰聽起來很少,但如果要日復一日堅持下去其實好長r 😮‍💨 挑戰六透過 input 來 filter 從 api 拿回來的資料結
Thumbnail
公告佈達看似簡單,但如何做好才是關鍵。 只有透過適時而有效的公告,才能確保重要訊息的及時傳達,促進員工的共識和配合 最終提升整體的運營效率,為企業持續發展注入動力!
Thumbnail
公告佈達看似簡單,但如何做好才是關鍵。 只有透過適時而有效的公告,才能確保重要訊息的及時傳達,促進員工的共識和配合 最終提升整體的運營效率,為企業持續發展注入動力!
Thumbnail
有時候工作信件上的來來往往百百種,但不外乎就是約會議時間、討論內容、回應問題或是向對方提出要求,這邊就列出一些模擬的情境跟相關信件做為參考。
Thumbnail
有時候工作信件上的來來往往百百種,但不外乎就是約會議時間、討論內容、回應問題或是向對方提出要求,這邊就列出一些模擬的情境跟相關信件做為參考。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News