:模型、畫質(zhì)和首屏預(yù)算)
把低清商品圖放大并不等于找回商品的真實細節(jié)。一根細線可能被補成紋理一個模糊字符可能被補成另一個字符。商品頁尤其需要分清“看起來更銳”與“信息仍然準確”。Google 在 2026 年 7 月 9 日介紹 LiteRT.js 時展示了瀏覽器推理與 Real-ESRGAN 示例10 月 19 日的 LiteRT Tensor API 公告則介紹了原生 C 圖構(gòu)建及 WebGPU 應(yīng)用。兩篇資料說明存在可研究的實現(xiàn)路徑不能推出任意超分模型都能直接裝進瀏覽器更沒有證明手機上只需十幾毫秒。第一關(guān)拿到真正可運行的模型先記錄權(quán)重來源、許可、輸入尺寸與顏色空間鎖定轉(zhuǎn)換器和運行時版本。然后檢查目標格式、算子覆蓋、精度及后處理。僅拿到.safetensors或.tflite文件還缺瀏覽器端加載與執(zhí)行的證據(jù)。給圖片套一個銳化卷積核是傳統(tǒng)濾波雙線性插值是重采樣。它們可以是合理基線但不要把著色器里的幾個鄰域采樣命名為“神經(jīng)網(wǎng)絡(luò)超分”。學(xué)習(xí)模型至少要交代訓(xùn)練所得權(quán)重、網(wǎng)絡(luò)執(zhí)行與輸入輸出約定。第二關(guān)把四條路線放在同一張驗收表圖中商品小圖均為概念插畫并非同一樣本的處理結(jié)果不能據(jù)圖比較畫質(zhì)。四路分別是插值、銳化、學(xué)習(xí)超分和直接高清圖。使用有權(quán)處理的高清圖固定縮小、壓縮和再放大流程。圖片尺寸、裁切、顏色空間必須一致否則一個指標變化可能只是對齊方式變化。PSNR 基于像素誤差SSIM 也是客觀結(jié)構(gòu)指標都不是“主觀畫質(zhì)評分”。沒有真實配準高清參考時不能編一個 PSNR 當畫質(zhì)證明。商品文字、刻度、成分表、細密紋理應(yīng)單獨核對主觀盲評則需要獨立的受試流程與樣本記錄。下面只驗證 PSNR 計算的基礎(chǔ)邊界沒有運行模型也沒有生成商品圖對比。保存為psnr.mjs后執(zhí)行node psnr.mjsimport assert from node:assert/strict; function psnr(reference, candidate) { if (!reference.length || reference.length ! candidate.length) throw new Error(same non-empty pixel layout required); let squared 0; for (let i 0; i reference.length; i) { for (const x of [reference[i], candidate[i]]) { if (!Number.isInteger(x) || x 0 || x 255) throw new Error(expected uint8 samples); } squared (reference[i] - candidate[i]) ** 2; } const mse squared / reference.length; return mse 0 ? Infinity : 10 * Math.log10(255 ** 2 / mse); } assert.equal(psnr([0, 128, 255], [0, 128, 255]), Infinity); assert.equal(psnr([0], [255]), 0); assert.ok(psnr([0, 0], [1, 1]) psnr([0, 0], [2, 2])); assert.throws(() psnr([], [])); assert.throws(() psnr([0], [0, 1])); assert.throws(() psnr([256], [0])); console.log(PSNR boundary tests passed; no model inference performed);這個函數(shù)假定輸入已經(jīng)是相同布局的 8 位采樣不負責(zé)解碼、色彩管理或配準。透明通道是否參與、在 sRGB 還是線性空間計算也要寫入實驗協(xié)議。指標相同不代表文字可辨識程度相同。第三關(guān)把模型下載算進用戶等待端側(cè)路線的成本至少包含運行時和權(quán)重下載、初始化、圖片解碼、預(yù)處理、推理、回讀、顯示。只報告熱推理會掩蓋首次訪問的等待也無法支持“節(jié)省總帶寬”的結(jié)論。若高清圖比縮略圖多幾十 KB而運行時與模型需要額外數(shù) MB少量圖片的訪問未必劃算。多張圖是否攤薄成本要基于實際訪問深度、緩存命中與緩存驅(qū)逐記錄計算不能假設(shè)每位用戶都看完整個商品列表。預(yù)算還包括峰值內(nèi)存與主線程時間。推理放到 GPU 不意味著上傳、解碼和 DOM 更新都免費。圖片節(jié)點預(yù)留尺寸可以減少部分布局移動但不能自動保證 CLS 為零。先交失敗回退再談默認開啟模型下載失敗、算子不支持、初始化超時或設(shè)備丟失時原始商品圖應(yīng)繼續(xù)可見。若細節(jié)可能誤導(dǎo)購買直接提供高清原圖入口通常比強制生成細節(jié)穩(wěn)妥。用戶選擇省流與否也應(yīng)清楚可見。本輪只運行了上述數(shù)學(xué)最小測試沒有下載或執(zhí)行超分權(quán)重沒有瀏覽器設(shè)備矩陣、盲評、帶寬賬單或功耗測量。因此這里交付的是驗收方法不能寫成“已把 CDN 成本降低多少”或“全設(shè)備實時”。參考資料LiteRT.js 官方文章2026-07-09LiteRT Tensor API 官方公告2026-10-19CLS持續(xù)更新的指標文檔。發(fā)稿前復(fù)核模型許可、版本與目標設(shè)備支持。