北京
一個開發者用周末時間，給2026年世界杯做了個直播儀表盤。不是概念圖，不是demo視頻，是直接能打開用的網頁。這個叫PassionPulse的項目，把實時比分、淘汰賽對陣、球迷熱情熱力圖，還有谷歌Gemini生成的AI解說和ElevenLabs的語音播報，一股腦塞了進去。前端原生HTML/CSS/JS，后端跑在Netlify Functions上，純純的“無服務”架構。就因為DEV社區搞了個“Passion Edition”周末挑戰賽，這哥們直接把觀賽體驗給“預制”了。
我們挑幾個把“熱情”倆字寫在代碼里的功能來看看。
1. 實時比賽面板，連分鐘追蹤都做了
進入頁面就是當前四分之一決賽的實時對陣卡片。比分、比賽進行到第幾分鐘、本場高光，全在卡片上跳動。這個實時數據不是偽造的，而是從worldcup26.ir這個開放API拉下來的。你甚至能感受到開發者故意讓卡片有直播動畫，就是要讓你覺得自己在看轉播。
2. 淘汰賽對陣圖，帶發光動畫的那種
從四分之一決賽到最終決賽，一張可點擊的淘汰賽路線圖全部展開。決賽場地標著MetLife Stadium，每場正在進行的比賽都有發光指示器。這套交互做得很克制，沒有花里胡哨的3D，但每個節點的動效都在提醒你——這才是球迷該看的東西。
3. 全球球迷熱情熱力圖，拿鼠標就能掃一遍
一個canvas渲染的世界地圖上，散布著代表球迷熱情的點。從布宜諾斯艾利斯到倫敦，從奧斯陸到拉巴特，懸停上去就能看到對應球隊的信息和熱情強度。這相當于一個實時的“球迷分布與情緒感知層”，而且數據是活的。沒有長篇大論的分析，但你一眼就能看出哪里的球迷正燒得最旺。
4. AI虛擬評論員，加一句語音播報
整件事最“離譜”的地方：它讓AI當解說。實時比分拉回來之后，系統不是直接展示，而是先把數據喂給Google Gemini，讓它變成一句帶著運動解說腔的高光點評。然后，這句AI生成的評論再丟給ElevenLabs轉成語音。也就是說，你打開這個面板，不光能看到比分和熱點，還能聽到一段為你那場比賽定制的一兩句話解說。不是預錄素材，是實時的。
技術實現上，整個后端就一個Node.js文件，跑在Netlify的無服務器函數里。它干三件事：從API拿原始數據，用本地JSON文件做元數據匹配（把比賽ID映射出球隊旗幟、顏色這些靜態信息），再把比分傳給Gemini生成解說詞，最后調用ElevenLabs做文本轉語音。這種“輕量級流水線”的好處是，外部API掛掉的時候，起碼你的球隊logo和配色還在，頁面不至于崩成光桿。
一個周末挑戰賽的產物，把實時數據、AI生成內容和語音交互全串了起來。官方App都還沒動靜，野生的AI世界杯觀賽伙伴已經能點開就用了。
特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
