[AI ] 搭飛機開發者VibeCoding魔戒中土互動地圖

看板C_Chat (希洽)作者Zaious (洛杉磯之王)時間2小時前 (2026/04/15 22:37)推噓3(3推 0噓 2→)

留言5則, 4人參與討論串1/1

搭飛機太無聊，開發者用「vibe coding」打造出托爾金《魔戒》的互動式中土地圖 https://www.techbang.com/posts/128749-ai-vibe-coding-plane-middle-earth-map 一名開發者在橫越美國的班機上，趁著美國航空提供的免費機上 Wi-Fi，用 AI 輔助程式設計的方式，把《魔戒》與《哈比人》世界的地理資訊做成了一張全功能互動地圖，並公開發布在網路上。這件事在知名科技論壇 Hacker News 上迅速引發熱烈討論，截至發稿時已累積逾兩百則留言回應。從經濟艙座位誕生的中土地圖這個專案由開發者 Fraser Marlow 製作，作品名稱為「Middle-earth Interactive Map 」，目前部署於 Google Firebase 的靜態網站服務，網址為 https://middle-earth-interactive-map.web.app/，任何人都可以免費瀏覽使用。 Marlow 在文章中描述，他長期奔波於美國東西兩岸，在機上有大量的空閒時間。他利用美國航空提供的免費 Wi-Fi，以「vibe coding」的方式，與大型語言模型反覆對話，逐步把整個專案建立起來。他也坦言，AI 對托爾金作品的了解程度令他驚艷：「LLM 對托爾金著作的了解量相當可觀，能夠深入挖掘許多細節，讓這個過程非常有趣。」互動式地圖功能一覽打開地圖後，使用者可以在一張高解析度的中土世界全圖上自由縮放與拖曳瀏覽。地圖的互動功能相當豐富，主要包括以下幾個面向：旅程路線追蹤：可疊加顯示多位主要角色的旅行路線，包含魔戒遠征隊全體成員（佛羅多、亞拉岡、波羅莫、梅里與皮膚、甘道夫、咕魯）、以及哈比人之旅的比爾博路線，路線以彩色虛線繪製，視覺上一目了然。事件標記系統：地圖上分類標記了來自《精靈寶鑽》（Silmarillion）、《哈比人》、《魔戒》三部曲（魔戒現身、雙城奇謀、王者再臨）以及附錄的重要地點與事件，共涵蓋超過百個標記點，點選後可查看事件說明與相關人物。時間軸頁面：另有一個獨立的 Timeline（時間軸）頁面，以時序方式列出整個傳說年代記的事件，並可點選直接飛往地圖上對應的位置。距離測量工具：開啟「Measure distance」功能後，在地圖上點選任意兩點，即可換算出兩地之間的英里與里格（leagues）距離。衛星視圖：地圖另提供一個概念性的「衛星視圖」（Satellite view），由 Stable Diffusion 的 img2img（圖像轉圖像）功能生成，雖然目前效果仍屬粗略，例如海洋呈現出過於乾燥的視覺效果，但已引起不少網友的興趣與討論。技術架構：地圖圖磚與 Leaflet.js 這張地圖的運作原理，其實和你平常用 Google 地圖的方式非常相似。當你在 Google 地圖上拉近鏡頭，畫面不會整張重新載入，而是會依照你看的區域，即時拼出一小塊一小塊的圖片，這種技術叫做「地圖圖磚」。Marlow 在這個專案中也採用了同樣的做法：他先把一張巨大的中土世界全圖，預先切割成數百張小方塊圖片，並依照不同的縮放程度分別準備好對應的版本。這樣一來，無論你拉近看魔多火山口的細節，還是拉遠看整個中土的輪廓，地圖都能快速回應，不會因為載入一整張超大圖片而卡頓。呈現這些圖磚的框架，是一套叫做 Leaflet.js 的開源函式庫。你可以把它想成是製作互動地圖的「樂高底板」，它處理所有拖曳、縮放、標記點擊等互動邏輯，開發者只需要把圖片素材和資料填進去就好。這套工具被廣泛用於各種網路地圖應用，算是業界相當成熟的選擇。至於概念性的「衛星視圖」，Marlow 則是借助了 AI 圖像生成工具 Stable Diffusion，讓它根據原始地圖去推測「如果從衛星角度看中土會是什麼樣子」，再自動生成對應的圖片。目前成果仍很粗糙，海洋看起來像沙漠，部分山脈的質感也不夠自然，但這個方向本身已引起不少網友的興趣。整個專案的程式碼已完整公開於 GitHub（ https://github.com/frasermarlow/middle-earth-map），有興趣的開發者可以自行參考或延伸。旅程路徑的平滑化處理另外，地圖上的旅程路線並非直線折線，而是透過 Catmull-Rom spline 插值算法生成的平滑曲線。程式碼中設有距離門檻，僅在相鄰兩點距離超過一定像素時才啟動插值，避免在近距離點之間產生不自然的曲線迴圈。這個細節讓地圖上的旅程路徑更貼近手繪風格，視覺上更加自然。論壇上的熱烈討論這個專案發布後，在 Hacker News 上引發多個方向的討論。有網友指出，目前地圖使用的是第三紀元（Third Age）的版本，這對於標注第一紀元的精靈寶鑽事件來說，在地理上存在一定的誤差，因為第一紀元結束後，貝勒爾蘭（ Beleriand）地區已沉入大海，根本無法在現有地圖上定位。Marlow 也坦承這是一個限制，並表示若能找到合適的原始素材，不排除未來製作分紀元的版本。部分托爾金考據派指出了幾處地標位置的誤差，例如西力斯昂哥（Cirith Ungol，即《王者再臨》中佛羅多被囚禁之處）與日落之窗（Henneth Annûn，法拉墨的藏身地）的座標標記偏北偏東，與書中描述不符。Marlow 表示已記錄下來，將陸續修正。另有一些網友對「vibe coding」方式的使用帶著複雜的情感。有人認為，原本以為開發者是懷抱對托爾金的熱情、親自鑽研每一處細節，但得知是 AI 生成後，那份感覺稍微打了折扣。Marlow 的回應是：「我完全理解。但實際上，我建造這張地圖正是為了親自探索托爾金的傳說年代記，因為我對它深深著迷。這是我分享所學的方式，整個過程我也學到了很多。」 --- 感覺這個題材(紀錄地圖)能玩的東西很多耶，有沒有人要做個金庸或什麼的版本啊，那種世界觀地圖超大的奇幻作品感覺都能來玩個一輪 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.161.94.204 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/C_Chat/M.1776263822.A.E50.html