繼 BlueXplore 海洋公民資料庫與 AI 生物圖像辨識後，我們再度協助 BlueTrend 藍色脈動承接桃園市政府的藻礁生態保育專案，希望讓潛水攝影師上岸後，直接在 LINE 裡把拍攝到的藻礁照片傳進海洋生物資料庫內，讓一般民眾可以更便利的貢獻桃園藻礁生態的紀錄。
這是一次完整的 LINE 官方帳號串接：我們在一個 LINE 官方帳號裡做了四件事：網站會員綁定、步驟式拍照上傳、GPS 位置選擇、AI 圖像辨識。攝影師從頭到尾不用開電腦，走在岸邊就能透過手機把當天的紀錄上傳完成。
為什麼要把上傳功能搬進 LINE
BlueTrend 藍色脈動專精海洋資料庫與 AI 辨識，這次承接的是桃園市政府的桃園藻礁保育計畫。他們的網站本來就有一套讓海洋攝影愛好者上傳照片的功能，這套系統的緣起我在當潛水攝影師遇上生物科學家寫過——潛水愛好者拍了漂亮的海洋生物卻不知道是什麼物種，照片就這樣躺在硬碟裡；另一頭研究員缺照片做研究，因為研究員很少自己下水。網站平台把這兩端接了起來。
問題是，攝影師的使用情境很特別。他們拍完照的當下人在海邊、在船上、在潮間帶，手上只有一支手機，滿身是海水。要他們回家、開電腦、登入網站、一張張上傳，中間隔了太多步驟，很多紀錄就這樣拖著拖著沒了。
我們想：既然大家本來就在用 LINE，那把上傳流程搬進 LINE 官方帳號，攝影師拍完照隨手就能傳，把工具放到使用者已經在用的地方，比要他們多裝一個 App、多記一組帳密，門檻低太多了。
功能一：LINE 帳號綁定，讓 LINE 使用者對上網站會員
第一個要解決的是身份，照片傳上來，系統要知道是誰傳的，才能標註貢獻者、才能在稀有物種被發現時通知本人，可是 LINE 的使用者身份跟網站的會員資料是兩套系統，得先把它們綁在一起。
我們用 LIFF（LINE Front-end Framework）做綁定頁面。攝影師在 LINE 裡面的圖文選單點擊「前往綁定」，會開啟一個 LIFF 網頁，透過 LINE Login 拿到使用者的 id_token，後端再拿這個 token 去 LINE 的 API 取得使用者的 email 與基本資料。
拿到 email 之後，比對網站既有的 WooCommerce 會員：對得上就直接綁定，對不上就自動建一個 customer 角色的帳號，並把 LINE 的 user ID 存進使用者的 meta 欄位。
這裡有個容易踩的坑：LINE 使用者不一定願意授權 email，或者根本沒綁 email，我們的處理方式是，拿不到 email 時就用 LINE 的內部 ID 組一個 xxx@line.com 當備援信箱。這個「長輩不給 email」的情境我另外寫過一篇踩坑紀錄，還因此牽出一個 CVE 漏洞，有興趣可以看LINE 登入沒給 Email 怎麼辦。
綁定完成後，攝影師之後回到 LINE 就是已登入網站會員狀態，不用再輸入任何帳密。
功能二：步驟式圖片上傳，把一張表單拆成一問一答
上傳一張有研究價值的照片，需要的資訊不只圖檔，物種名稱、拍攝國家地區、精確位置等等都要完整填寫才會有研究價值。如果把這些欄位一次攤在網頁表單上，在手機上填會是一場災難。所以我們把整張表單拆成一問一答的對話流程，每一步 LINE 都會回一則訊息，並用 Quick Reply 按鈕給選項。
像拍攝年份，我們直接列出 2018 到 2025 的按鈕；拍攝深度則給「潮間帶」「海面上」「1~5m」「5~10m」這種現成選項，攝影師用手指點就好，不用打字。
流程的狀態靠 transient 加 user meta 記著，攝影師答到第幾題、每一題答了什麼，系統都存著，中途想放棄，輸入「stop」就能中止；體長跟水溫這種必須是數字的欄位，我們加了驗證，填了非數字會擋下來請他重填。
照片本身則走 Uploadcare 這個 CDN。攝影師傳進 LINE 的圖，後端用 LINE 的 content API 抓下原圖，再轉存到 Uploadcare，換回一個穩定的 CDN 網址。這樣做的好處是，後面的 AI 辨識、資料庫入庫，都能直接用這個網址取圖，不用擔心 LINE 的圖檔連結會過期。
功能三：GPS 位置選擇，從國家一路縮到地圖上的一個點
位置是這個資料庫最重要的欄位之一。研究員要知道這隻生物在台灣的哪一片海域出現，經緯度差一點，研究價值就差很多。
我們把位置選擇設計成三層漏斗：先選國家，再選地區，最後開地圖挑一個精確的點。國家和地區的選項不是寫死的，是即時打資料庫的 API 撈出來的，選了國家才會帶出對應的地區清單。到了最後一步，Quick Reply 會給一個「開啟地圖」按鈕，點下去開啟一個 LIFF 地圖頁，並把該地區的中心經緯度先帶進去，攝影師在地圖上拖曳、放大，點下實際的拍攝位置。
選完之後，回傳的字串長這樣：拍攝位置：某某海岸 (24.123, 121.456)。後端用一段正規表達式把地址、緯度、經度拆出來分別入庫，這樣一來，資料庫拿到的不只是一個地名，而是可以直接畫在地圖上、可以做空間分析的座標。
功能四：AI 圖像辨識，讓機器人先猜猜這是什麼物種
這是整個案子最有意思的一段。BlueTrend 藍色脈動本來就有海洋生物的 AI 辨識模型，我們要做的是把它接進 LINE 的上傳流程裡。
當攝影師選好照片分類，如果那個分類剛好有訓練過辨識模型，機器人就會問：「你選擇的物種有提供 AI 辨識功能，是否要辨識？（需要約 10~15 秒）」。攝影師點「好的」，會開啟一個 LIFF 頁，在瀏覽器裡直接跑 TensorFlow.js，載入 Google Vertex AI 匯出的模型，對剛剛那張照片做分類。
辨識是在使用者的手機瀏覽器端跑的，不佔伺服器資源。模型跑完會回傳幾個候選物種和信心度，我們只留信心度超過 35% 的結果，再把模型輸出的標籤對回中文物種名。攝影師看到辨識結果，可以確認「猜對了」或「都不是」，這個回饋會一起存進資料庫，變成日後模型再訓練的養分。
這個 AI 角色取名叫「布魯」，猜對時它會說「布魯猜對了！」，猜錯就說「布魯會再多學習的！」。除了辨識，布魯也串接了客服機器人，攝影師在上傳流程外隨便問話，它能回答海洋生物相關的問題，答不出來的還會自動寄信通知管理員去補資料。
這個案例對想做 LINE 應用的你意味著什麼
把一個原本綁在網站上的複雜流程，完整搬進 LINE，而且比在網站上更好用。攝影師少了「回家開電腦」這一步，紀錄的回收率就上來了；資料庫拿到的是帶座標、帶 AI 預辨識的結構化資料，研究員省下大量整理工。
很多人以為 LINE 官方帳號串接就是自動回覆、發發優惠券。但只要願意接 Messaging API 跟 LIFF，它可以是一套完整的資料收集系統、可以綁會員、可以叫用 AI 模型、可以做地圖互動，門檻沒有想像中高，關鍵是先想清楚使用者到底在什麼情境下用它。
如果你手上也有一個「使用者其實都在用 LINE，但流程卡在網站上」的問題，不管是預約、回報、資料收集還是客製化的 AI 應用，都歡迎來聊聊。把工具放到使用者已經在的地方，往往是投資報酬率最高的一步。