Update app.py

app.py

@@ -19,14 +19,14 @@ model = genai.GenerativeModel('gemini-2.5-flash')
 # 建立我們的虛擬藥妝資料庫 (Mock Database)
 fake_database = {
     "CeraVe適樂膚 長效潤澤修護霜 340g": [
-        {"store": "屈臣氏", "name": "CeraVe適樂膚 長效潤澤修護霜 340g", "price": "619","link": "https://www.watsons.com.tw/cerave-cerave%E9%81%A9%E6%A8%82%E8%86%9A%E9%95%B7%E6%95%88%E6%BD%A4%E6%BE%A4%E4%BF%AE%E8%AD%B7%E9%9C%9C-340g/p/BP_153671"},
-        {"store": "康是美", "name": "CeraVe適樂膚 長效潤澤修護霜 340g", "price": "619", "link": "https://shop.cosmed.com.tw/SalePage/Index/6414249"},
-        {"store": "寶雅", "name": "CeraVe適樂膚 長效潤澤修護霜 340g", "price": "619","link": "https://www.poyabuy.com.tw/SalePage/Index/10104261"}
+        {"store": "屈臣氏", "name": "CeraVe適樂膚 長效潤澤修護霜 340g", "price": "619","link": "https://www.watsons.com.tw/cerave-cerave%E9%81%A9%E6%A8%82%E8%86%9A%E9%95%B7%E6%95%88%E6%BD%A4%E6%BE%A4%E4%BF%AE%E8%AD%B7%E9%9C%9C-340g/p/BP_153671","image": "https://img.91app.com/webapi/imagesV3/Original/SalePage/10104261/0/639160140536830000?v=1"},
+        {"store": "康是美", "name": "CeraVe適樂膚 長效潤澤修護霜 340g", "price": "619", "link": "https://shop.cosmed.com.tw/SalePage/Index/6414249","image": "https://img.91app.com/webapi/imagesV3/Original/SalePage/10104261/0/639160140536830000?v=1"},
+        {"store": "寶雅", "name": "CeraVe適樂膚 長效潤澤修護霜 340g", "price": "619","link": "https://www.poyabuy.com.tw/SalePage/Index/10104261","image": "https://img.91app.com/webapi/imagesV3/Original/SalePage/10104261/0/639160140536830000?v=1"}
     ],
     "Avene 雅漾舒護活泉水150ml": [
-        {"store": "屈臣氏", "name": "Avene 雅漾舒護活泉水150ml", "price": "299","discount": "🔥限時67折", "link": "https://www.watsons.com.tw/avene-%E9%9B%85%E6%BC%BE-%E9%9B%85%E6%BC%BE%E8%88%92%E8%AD%B7%E6%B4%BB%E6%B3%89%E6%B0%B4150ml/p/BP_291419"},
-        {"store": "康是美", "name": "Avene 雅漾舒護活泉水150ml", "price": "299","discount": "🔥限時67折", "link": "https://shop.cosmed.com.tw/SalePage/Index/5767522"},
-        {"store": "寶雅", "name": "Avene 雅漾舒護活泉水150ml", "price": "450", "link": "https://www.poyabuy.com.tw/SalePage/Index/9929185"}
+        {"store": "屈臣氏", "name": "Avene 雅漾舒護活泉水150ml", "price": "299","discount": "🔥限時67折", "link": "https://www.watsons.com.tw/avene-%E9%9B%85%E6%BC%BE-%E9%9B%85%E6%BC%BE%E8%88%92%E8%AD%B7%E6%B4%BB%E6%B3%89%E6%B0%B4150ml/p/BP_291419","image": "https://img.91app.com/webapi/imagesV3/Original/SalePage/9929185/0/639160572853670000?v=1"},
+        {"store": "康是美", "name": "Avene 雅漾舒護活泉水150ml", "price": "299","discount": "🔥限時67折", "link": "https://shop.cosmed.com.tw/SalePage/Index/5767522"},"image": "https://img.91app.com/webapi/imagesV3/Original/SalePage/9929185/0/639160572853670000?v=1",
+        {"store": "寶雅", "name": "Avene 雅漾舒護活泉水150ml", "price": "450", "link": "https://www.poyabuy.com.tw/SalePage/Index/9929185","image": "https://img.91app.com/webapi/imagesV3/Original/SalePage/9929185/0/639160572853670000?v=1"}
     ]
 }
 
@@ -109,81 +109,90 @@ def handle_image(event):
             
             # --- 第 4 步：將資料塞進橫向圖卡 (不管哪條路線，最後都會來到這裡) ---
             # --- 第 4 步：將資料塞進橫向圖卡 ---
+            # --- 第 4 步：將資料塞進 Toyota 風格的旗艦版圖卡 ---
+           # --- 第 4 步：將資料塞進 Toyota 風格的旗艦版圖卡 ---
             bubbles = []
             for item in data_list:
                 
-                # --- 這裡用來判斷要不要顯示折扣標籤 ---
-                discount_box = []
-                # 只有當資料庫裡的 discount 不是空字串時，才生出這塊紅色的標籤
-                if item.get("discount"): 
-                    discount_box = [
+                # 如果是 AI 估價，可能不會有圖片，我們給一張預設的漂亮漸層圖防呆
+                image_url = item.get("image", "https://via.placeholder.com/600x400/eeeeee/999999?text=Image+Not+Found")
+                
+                # 建立中間的「規格表」 (像 Toyota 顯示全長全寬那樣)
+                specs_box = {
+                    "type": "box",
+                    "layout": "vertical",
+                    "spacing": "sm",
+                    "margin": "lg",
+                    "contents": [
+                        # 第一列：通路
+                        {
+                            "type": "box",
+                            "layout": "horizontal",
+                            "contents": [
+                                {"type": "text", "text": "販售通路", "size": "md", "color": "#8c8c8c", "flex": 1},
+                                {"type": "text", "text": item["store"], "size": "md", "color": "#111111", "weight": "bold", "flex": 2}
+                            ]
+                        },
+                        # 第二列：價格
                         {
                             "type": "box",
-                            "layout": "baseline",
-                            "spacing": "sm",
+                            "layout": "horizontal",
                             "contents": [
-                                {
-                                    "type": "text",
-                                    "text": item["discount"],
-                                    "color": "#ffffff",
-                                    "size": "xs",
-                                    "weight": "bold",
-                                    "margin": "sm"
-                                }
-                            ],
-                            "backgroundColor": "#ff3b30", # 紅色底
-                            "cornerRadius": "md",
-                            "paddingAll": "2px",
-                            "paddingStart": "8px",
-                            "paddingEnd": "8px",
-                            "margin": "sm"
+                                {"type": "text", "text": price_tag, "size": "md", "color": "#8c8c8c", "flex": 1},
+                                {"type": "text", "text": f"${item['price']}", "size": "md", "color": "#111111", "weight": "bold", "flex": 2}
+                            ]
                         }
                     ]
+                }
 
-                # 這是原本卡片的身體內容，我們把剛剛可能生出來的折扣標籤塞進去
-                card_contents = [
-                    {"type": "text", "text": item["store"], "weight": "bold", "color": "#1DB446", "size": "md"},
-                    {"type": "text", "text": item["name"], "weight": "bold", "size": "lg", "margin": "md", "wrap": True},
-                ]
-                
-                # 把折扣標籤接在商品名稱後面
-                card_contents.extend(discount_box) 
-                
-                # 補上最後的價格線
-                card_contents.extend([
-                    {"type": "separator", "margin": "lg"},
-                    {
-                        "type": "box",
-                        "layout": "horizontal",
-                        "margin": "md",
-                        "contents": [
-                            {"type": "text", "text": price_tag, "size": "sm", "color": "#555555"},
-                            {"type": "text", "text": f"${item['price']}", "size": "lg", "color": "#111111", "align": "end", "weight": "bold"}
-                        ]
-                    }
-                ])
-
-                # 組裝最終的卡片
+                # 如果有折扣，完美融入規格表的第三列
+                if item.get("discount"):
+                    specs_box["contents"].append(
+                        {
+                            "type": "box",
+                            "layout": "horizontal",
+                            "contents": [
+                                {"type": "text", "text": "獨家優惠", "size": "md", "color": "#8c8c8c", "flex": 1},
+                                {"type": "text", "text": item["discount"], "size": "md", "color": "#ff3b30", "weight": "bold", "flex": 2}
+                            ]
+                        }
+                    )
+
+                # 組裝最終的百萬級卡片
                 card = {
                   "type": "bubble",
+                  "size": "mega",  # 設定跟 Toyota 一樣的寬版大卡片
+                  "hero": {
+                    "type": "image",
+                    "url": image_url,
+                    "size": "full",
+                    "aspectRatio": "4:3", # 調整成最適合保養品展示的比例
+                    "aspectMode": "fit",  # 確保瓶身完整顯示不被裁切
+                    "backgroundColor": "#FFFFFF"
+                  },
                   "body": {
                     "type": "box",
                     "layout": "vertical",
-                    "contents": card_contents
+                    "contents": [
+                      # 標題：超大粗體商品名 (像 Toyota 的 bZ4X)
+                      {"type": "text", "text": item["name"], "weight": "bold", "size": "xl", "wrap": True},
+                      # 塞入剛剛做好的規格表
+                      specs_box
+                    ]
                   },
                   "footer": {
                     "type": "box",
                     "layout": "vertical",
                     "contents": [
+                      # 底部黑底白字的大按鈕
                       {
                         "type": "button",
                         "style": "primary",
-                        "color": "#1DB446",
-                        "height": "sm",
+                        "color": "#000000", # Toyota 經典純黑
+                        "height": "md",
                         "action": {
                           "type": "uri",
                           "label": "前往商家購買",
-                          # 這裡改用資料庫裡設定的專屬網址��(如果沒設定，就預設用 Google 搜尋)
                           "uri": item.get("link", f"https://www.google.com/search?q={item['store']}+{item['name']}")
                         }
                       }
@@ -191,6 +200,7 @@ def handle_image(event):
                   }
                 }
                 bubbles.append(card)
+
             
             # --- 第 5 步：打包發送圖卡 ---
             flex_message = FlexSendMessage.new_from_json_dict({
@@ -201,16 +211,17 @@ def handle_image(event):
                     "contents": bubbles
                 }
             })
-            
             line_bot_api.push_message(user_id, flex_message)
             del user_states[user_id]
-            
         except Exception as e:
             line_bot_api.push_message(
                 user_id,
                 TextSendMessage(text=f"❌ 哎呀！精靈遇到了一點問題。錯誤原因：\n{e}")
             )
 
+
+
+
 # ================= 3. 多輪對話核心邏輯 =================
 @handler.add(MessageEvent, message=TextMessage)
 def handle_message(event):