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