我用華為云碼道 CodeArts 做了個(gè)「地球心跳」33 項(xiàng)測(cè)試全綠把實(shí)時(shí)地震跑成一顆會(huì)跳的星球**一鍵開通華為云碼道 CodeArts 代碼智能體 **https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwatomgit1sourceaddmzntgwatomgithd作品介紹「地球心跳 / Terra Pulse」是一個(gè)純前端網(wǎng)頁它把 USGS 的全球?qū)崟r(shí)地震數(shù)據(jù)和 NOAA 的地磁指數(shù)翻譯成一顆會(huì)跳動(dòng)、能聽見、還能逐拍重放的星球。地震越密、磁暴越強(qiáng)它心跳就越快越重沒什么動(dòng)靜的時(shí)候會(huì)慢到 40 多像睡著了。整站零第三方運(yùn)行時(shí)依賴純 ESM Canvas Web Audioclone 下來npm run serve就能跑核心邏輯全部寫成純函數(shù)33 項(xiàng)自動(dòng)化測(cè)試全綠還配了一個(gè)聯(lián)網(wǎng)取證腳本能證明「同一份數(shù)據(jù)快照重放多少次節(jié)拍都一模一樣」。這也是我整個(gè)項(xiàng)目最想守住的一條底線畫面可以好看但每一處好看都得能追溯到一條真實(shí)記錄。一、為什么做「地球心跳」而不是又一個(gè)炫酷地球刷到過不少「實(shí)時(shí)數(shù)據(jù)可視化」的地球轉(zhuǎn)得花里胡哨配個(gè)暗色背景加幾圈光暈看著挺唬人。我手賤扒過其中兩個(gè)的源碼結(jié)果挺無語——數(shù)據(jù)全是寫死的假數(shù)組畫面就是拿一個(gè)requestAnimationFrame的假時(shí)鐘在那兒空轉(zhuǎn)跟真實(shí)世界沒半毛錢關(guān)系。你把它掛一晚上它「震」的還是那幾條 2019 年的舊記錄。好看是好看但假。這類東西看多了我對(duì)「實(shí)時(shí)可視化」這四個(gè)字都有點(diǎn)PTSD了。所以我就較上勁了做一個(gè)反過來的東西屏幕上每一處跳動(dòng)都能對(duì)上一條真實(shí)發(fā)生過的記錄。挑中地震是因?yàn)樗_不了人——USGS 官方接口免費(fèi)、免注冊(cè)、瀏覽器還能直接跨域讀地震本身就是這顆星球?qū)嵈驅(qū)嵉摹赋橐幌隆故悄欠N你不需要任何解釋就能感受到「它在動(dòng)」的信號(hào)。再把地磁活動(dòng)摻進(jìn)來當(dāng)「情緒」把這兩樣翻譯成心跳哪怕完全不懂技術(shù)的我媽掃一眼也能看出它現(xiàn)在是踏實(shí)還是在緊張。這個(gè)選題還有個(gè)隱藏的好處它能讓「算法」這件事硬起來。密度怎么映射成心率、能量怎么算、可不可重放每一樣都能拿真值去驗(yàn)不是堆特效糊弄眼睛。這也是我最后死磕「可重放」的根源。二、先跑起來看上面這張是此刻的真實(shí)截圖不是渲染圖。點(diǎn)陣世界地圖上每一個(gè)發(fā)光的白點(diǎn)都是過去幾個(gè)小時(shí)里真震過的一次右邊那列「最近地震」是中文清單——幾級(jí)、在哪、幾分鐘前、多深寫得明明白白底下那條藍(lán)線是它的「心電圖」右上角的 58 就是它現(xiàn)在一分鐘跳多少下。整個(gè)界面就四個(gè)實(shí)時(shí)讀數(shù)BPM心率、地磁 Kp、事件數(shù)、快照 SHA-256 指紋。球面版把一張 180×90 的陸地格用正交投影投到球面上只畫朝向你的那一面隨自轉(zhuǎn)緩緩轉(zhuǎn)震中按新近度畫擴(kuò)散的沖擊環(huán)越近越亮越久越淡。背景是一層緩慢視差的星野地球邊緣有一圈隨 BPM 收縮的輝光——「心跳」這件事你得能看見。能拖拽旋轉(zhuǎn)、滾輪縮放、球面平面切換、一鍵靜音斷網(wǎng)也不慌它會(huì)自動(dòng)退回我打包進(jìn)倉庫的那份離線快照繼續(xù)跳絕不給你看白板。三、提示詞把「可重放」釘死到函數(shù)級(jí)我沒跟碼道說「給我做個(gè)地球」——那種一句話需求它一定給你糊一個(gè)華而不實(shí)的東西出來。我是把需求拆到函數(shù)級(jí)一輪一輪喂每輪都給很硬的判據(jù)。最關(guān)鍵那段提示詞長(zhǎng)這樣policy / heart / sources 三層必須是純函數(shù)不 fetch、不讀系統(tǒng)時(shí)鐘、 不用 Math.randomnowMs 一律作參數(shù)傳入。 sanKp(kp) 非有限值歸零bpm clamp(44 9*ratePerMin 3.2*kp, 44, 168) energy magSq/(magSq60)同一 (events,kp,nowMs) 調(diào)用兩次輸出必須逐字段相等。為什么要釘這么死因?yàn)椤缚芍胤拧惯@個(gè)賣點(diǎn)是從「純函數(shù)」這個(gè)約束里長(zhǎng)出來的。只要核心層不碰任何外部狀態(tài)網(wǎng)絡(luò)、時(shí)鐘、隨機(jī)那給定同樣的輸入它必然吐同樣的輸出——這件事就能被測(cè)試死死釘住。把「可重放」寫進(jìn)約束而不是等它寫完再想辦法證明這是整篇最關(guān)鍵的一個(gè)決策。我的經(jīng)驗(yàn)是AI 只會(huì)執(zhí)行你釘死的規(guī)矩不會(huì)替你把「可信」這件事想周全。你含糊它就自由發(fā)揮你含糊的地方就是它翻車的地方。四、架構(gòu)六層純函數(shù)層不碰 I/O整個(gè)項(xiàng)目我切成六層依賴是嚴(yán)格單向的src/ landmask.js 180×90 陸地點(diǎn)陣world-atlas 離線柵格化運(yùn)行時(shí)零依賴 policy.js 數(shù)據(jù)清洗/校驗(yàn)壞數(shù)據(jù)一律拒絕、域名白名單 heart.js 心跳模型eventskpnow → bpm/energy/beats純函數(shù) sources.js 數(shù)據(jù)適配USGS/NOAA 解析 SHA-256 快照指紋 render.js 表現(xiàn)層3D 點(diǎn)陣地球 / 平面地圖 / 沖擊波 / 中文洲名 ecg.js 底部心電圖波形 audio.js Web Audiolub-dub 雙心音合成 app.js 裝配層狀態(tài)機(jī) idle→fetching→beating→degraded依賴方向app → {render, ecg, audio, sources} → heart → policy。這么切有三個(gè)好處。第一渲染和音頻只讀數(shù)據(jù)、絕不改數(shù)據(jù)所以畫面永遠(yuǎn)只是數(shù)據(jù)的一個(gè)「投影」不會(huì)出現(xiàn)「畫面上震了但數(shù)據(jù)里沒有」這種事。第二數(shù)據(jù)層不碰界面任何一層單獨(dú)拎出來都能測(cè)。第三出了問題能一眼定位到層——是清洗放過了臟數(shù)據(jù)還是心跳算錯(cuò)了還是渲染畫錯(cuò)了邊界清楚。有一條紀(jì)律我釘?shù)米钏兰兒瘮?shù)層policy / heart / sources 的解析部分不碰任何 I/O。這是「可重放」能成立的唯一前提。五、核心算法密度怎么變成心跳整顆星球的心率就這幾行算出來的。取近一小時(shí)的地震事件數(shù)算密度再摻一點(diǎn)地磁 Kp壓進(jìn) 44 到 168 這個(gè)人體能接受的區(qū)間exportfunctionvitalSigns(events,kp,nowMs){letcount0,magSq0;constwindowStartnowMs-VITAL_WINDOW_MS;// 只看最近 1 小時(shí)for(constevofevents){if(evnull||!Number.isFinite(ev.timeMs))continue;if(ev.timeMswindowStart||ev.timeMsnowMs)continue;count1;if(Number.isFinite(ev.mag))magSqev.mag*ev.mag;}constratePerMincount/60;constbpmclamp(449*ratePerMin3.2*kp,BPM_MIN,BPM_MAX);constenergymagSq/(magSq60);// 震級(jí)平方和飽和歸一return{ratePerMin,bpm,energy,magSq,count};}幾個(gè)數(shù)字是這么定的基線 44 是「地球很安靜時(shí)」的靜息心率系數(shù) 9 讓全球一小時(shí)幾十次小震能把心率抬到六七十的正常區(qū)間3.2 是地磁每一點(diǎn) Kp 的抬升磁暴時(shí)地球「緊張」心率自然快。上限 168 是怕極端震群把數(shù)字頂?shù)绞д?。energy這里我特意盯著它別用「事件數(shù)」得用「震級(jí)平方和」——一次 7 級(jí)大地震本來就該比十次 3 級(jí)小震讓這顆星球跳得更使勁。這種把物理常識(shí)塞進(jìn)公式的細(xì)節(jié)是驗(yàn)收時(shí)我逼它改的第一版它偷懶用了 count。六、渲染與聲音讓它「活」起來球面投影是正交的把經(jīng)緯度轉(zhuǎn)成單位球面點(diǎn)疊上自轉(zhuǎn)角 rot 和俯仰角 tilt只畫正面functionprojectGlobe(lonRad,latSin,latCos,radius,cx,cy,rot,tilt){constlolonRadrot;constxlatCos*Math.sin(lo);constylatSin*Math.cos(tilt)-latCos*Math.cos(lo)*Math.sin(tilt);constzlatSin*Math.sin(tilt)latCos*Math.cos(lo)*Math.cos(tilt);return{sx:cxx*radius,sy:cy-y*radius,z};// z0 是背面不畫}底部那條心電圖是兩簇高斯脈沖疊出來的 lub-dubBPM 越高掃得越快當(dāng)前拍處一個(gè)冷藍(lán)亮點(diǎn)functiongauss(x,cx,w){constd(x-cx)/w;returnMath.exp(-d*d);}// 主峰 稍晚的次峰 lub-dub亮點(diǎn)跟著當(dāng)前拍走聲音用 Web Audio 合成不加載任何音頻文件lub 是低頻沖擊dub 稍高稍弱能量決定音高和輕重地磁 Kp 驅(qū)動(dòng)一條極慢的次聲「呼吸」基線constisLubphaselub;constfreq(isLub?LUB_FREQ_BASE:DUB_FREQ_BASE)energy*(isLub?LUB_FREQ_RANGE:DUB_FREQ_RANGE);constamp(0.160.5*energy)*(isLub?1:0.55)*Math.max(0.05,weight);因?yàn)闉g覽器不讓自動(dòng)播聲音所以音頻要等用戶第一次點(diǎn)擊/按鍵后才解鎖——這個(gè)坑我第一次沒注意頁面加載就new AudioContext()結(jié)果被掛起后來才改成手勢(shì)后 resume。七、安全三條紅線分開寫紅線一只連官方域名。只放行 https 且主機(jī)精確匹配仿冒域名、后綴混淆、帶賬號(hào)密碼的 URL 全擋外頭——這段是我主動(dòng)要求加的AI 可不會(huì)替你操心 SSRFexportfunctionassertAllowedUrl(url){if(typeofurl!string||url.length0)returnfalse;letparsed;try{parsednewURL(url);}catch{returnfalse;}if(parsed.protocol!https:)returnfalse;if(parsed.username!||parsed.password!)returnfalse;returnALLOWED_HOSTS[parsed.hostname.toLowerCase()]true;}紅線二壞數(shù)據(jù)一律拒絕絕不產(chǎn)出 NaN。清洗層對(duì)每條地震做坐標(biāo)/時(shí)間校驗(yàn)任何異常直接返回 null寧可丟一條也不污染下游if(!Number.isFinite(lon)||!Number.isFinite(lat))returnnull;if(lon-180||lon180||lat-90||lat90)returnnull;if(!Number.isFinite(timeMs)||timeMs0)returnnull;我還專門寫了個(gè) fuzz 測(cè)試喂 200 個(gè)隨機(jī)臟對(duì)象進(jìn)去斷言清洗層零異常、輸出零 NaN。紅線三不碰用戶隱私。全程只讀公開的 USGS/NOAA 數(shù)據(jù)不采集訪客 IP 和位置斷網(wǎng)退回內(nèi)置快照、不外發(fā)任何請(qǐng)求。這條聽著虛但「一個(gè)會(huì)讀你麥克風(fēng)的網(wǎng)頁」本來就該把「音頻只在本地分析、絕不上傳」寫死。八、測(cè)試33 項(xiàng)全綠重放用 SHA-256 指紋錨定用 AI 寫代碼我有個(gè)心病——它當(dāng)場(chǎng)跑對(duì)是真對(duì)了還是碰巧所以我把「可重放」做成可斷言的同一份真實(shí) USGS 快照跑兩遍逐拍比對(duì)每次取數(shù)算一個(gè) SHA-256 指紋。assert.ok(first.beats.length0,真實(shí)快照應(yīng)能產(chǎn)生節(jié)拍);assert.equal(first.beats.length,second.beats.length,兩次心跳節(jié)拍數(shù)必須一致);for(leti0;ifirst.beats.length;i){assert.deepEqual(first.beats[i],second.beats[i],第${i}拍必須逐字段相等);}取證腳本真聯(lián)網(wǎng)跑一次[evidence] 白名單校驗(yàn)通過 ? [evidence] 聯(lián)網(wǎng)拉取成功USGS sha2567514699d8d8a… { sha256: 7514699d…, kp: 3.67, vitals: { bpm: 56.19, energy: 0.0969 }, count: 227 } [evidence] beats 逐拍一致 → 重放一致 ?33 項(xiàng)測(cè)試覆蓋黃金重放逐拍相等、BPM 對(duì)事件密度單調(diào)不減且恒在 [44,168]、壞數(shù)據(jù) fuzz 200 例零異常零 NaN、域名白名單拒絕 http/仿冒/后綴混淆、快照指紋同輸入恒定異輸入不同。我每一輪都不是「它說綠就綠」而是 clone 到本地獨(dú)立跑一遍node --test。這活兒 AI 替不了你——它報(bào)綠了你也得親眼再看一遍。九、真實(shí)的坑它寫對(duì)了九成剩下一成得我來過程一點(diǎn)都不順舉三個(gè)真實(shí)的坑一加拖拽那輪把 3D 球面點(diǎn)陣改沒了。本來好好的加完「鼠標(biāo)拖動(dòng)旋轉(zhuǎn)」后大陸全消失、只剩一片星空。我讓它拿還能正常工作的平面版當(dāng)參照回修——這個(gè)坑我到現(xiàn)在還沒完全填平見第十一節(jié)。坑二它中途開始「只講不做」。做到加特效那輪它突然不寫文件了在對(duì)話框里噼里啪啦寫了一大篇「我打算怎么改 render.js」倉庫一個(gè)字沒動(dòng)。給我整樂了直接一句「別描述了建文件提交」才把它拽回來。長(zhǎng)對(duì)話到后面這個(gè)毛病挺常見?？尤孛g很糙。為了讓普通人看得懂我讓它把 USGS 英文地點(diǎn)轉(zhuǎn)中文。它的邏輯其實(shí)很樸素——一張國(guó)家/海域映射表能匹配就換、匹配不上留原文exportfunctiontranslatePlace(place){letoutplace;for(constkofSORTED_KEYS){if(out.indexOf(k)!-1)outout.split(k).join(COUNTRY_CN[k]);}returnout.replace(/\s{2,}/g, ).trim();}所以國(guó)家名基本對(duì)了菲律賓、夏威夷、西班牙可一到復(fù)合詞就露餡offshore Costa Rica被翻成「近shore 哥斯達(dá)黎加」——國(guó)家對(duì)了前綴漏了。這種臟活得我自己再兜一層不能全信它。十、提效數(shù)據(jù)到底省了多少事環(huán)節(jié)我純手寫估摸碼道實(shí)際六層代碼 33 項(xiàng)測(cè)試兩三天約 2 小時(shí)多輪累計(jì)3D 點(diǎn)陣地球 底圖生成一天起步topojson 得自己啃一輪連離線柵格化一起Web Audio 心跳合成半天一輪README 取證腳本兩小時(shí)一輪全程我真正逐字敲的代碼不到一成剩下都是它寫、我 clone 到本地跑測(cè)試復(fù)核。碼道每輪底下還會(huì)自己貼一行運(yùn)行數(shù)據(jù)比如核心層那輪「耗時(shí) 4m33s輸入 90.1K token輸出 12.2K token任務(wù) 9 已完成」底圖那輪「耗時(shí) 9m41s輸入 318.1K token」——不用我盯著問進(jìn)度它自己報(bào)賬。所以別信什么「AI 全自動(dòng)躺贏」?？焓钦婵斓Ψ蛉ㄔ诙⒅鼊e跑偏上了那三個(gè)坑每一個(gè)都得我一眼看出來再拽回來。十一、五維自檢對(duì)照評(píng)審維度架構(gòu)設(shè)計(jì)六層單向依賴、純函數(shù)層不碰 I/O任何一層可單獨(dú)驗(yàn)。代碼質(zhì)量33 項(xiàng)測(cè)試全綠 聯(lián)網(wǎng)重放逐拍一致 SHA-256 指紋可溯源。安全合規(guī)域名白名單防 SSRF、壞數(shù)據(jù) fuzz 零 NaN、不采集用戶 IP/位置、斷網(wǎng)降級(jí)。UI/UX深色高級(jí)感 冷藍(lán)點(diǎn)綴、球面/平面/中國(guó)特寫/懸停聯(lián)動(dòng)、斷網(wǎng)不白屏。博文內(nèi)容真實(shí)截圖 真實(shí)代碼 實(shí)測(cè)數(shù)據(jù) 誠(chéng)實(shí)寫了沒修完的坑。十二、本地怎么跑以及我希望你親自點(diǎn)的三下git clone https://atomgit.com/azhiqiu/earth-pulse.git cd earth-pulse node --test # 33 項(xiàng)全綠 node tools/evidence.cjs # 聯(lián)網(wǎng)取證 重放一致性 npm run serve # 打開 http://localhost:8080打開后我建議你親手做三件事比看我說一百句都直觀對(duì)著麥克風(fēng)吹口氣或哼個(gè)調(diào)看 BPM 和沖擊環(huán)跟著變點(diǎn)一下右側(cè)「最近地震」任意一行看地圖上對(duì)應(yīng)震中高亮把網(wǎng)斷了刷新一次看它退回離線快照、還在跳、沒白屏。十三、寫在最后人定架構(gòu)AI 分塊實(shí)現(xiàn)折騰下來最大的體會(huì)AI 智能體能跑多快全看你給它的約束有多硬。我全程沒讓它自由發(fā)揮而是把「純函數(shù)、可重放、白名單、逐輪驗(yàn)收」這套框釘死它就在框里又快又穩(wěn)地長(zhǎng)肉。它負(fù)責(zé)把想法變成能跑的代碼我負(fù)責(zé)判斷它跑沒跑對(duì)——這活兒誰也替不了誰。還沒做好的地方我也不藏3D 球面那個(gè) bug 我發(fā)完這篇就回去修地名翻譯對(duì)冷門復(fù)合詞還漏下一步想加條時(shí)間軸能拖著回看過去一周這顆星球的心跳曲線把「可重放」這個(gè)能力真正用到界面上。數(shù)據(jù)源與致謝地震數(shù)據(jù) USGS Earthquake Hazards Program地磁 NOAA SWPC Planetary K-index底圖 world-atlas land-110m開發(fā)工具 華為云碼道 CodeArts 代碼智能體AtomGit。MIT 開源倉庫就是第十二節(jié) clone 命令里那個(gè)地址。你平時(shí)用 AI 寫東西是更爽于「它一把梭幫我搞定」還是更在意「每一步我都能驗(yàn)、能重來」我屬于后者所以這次死磕「可重放」。評(píng)論區(qū)聊聊你的看法。