295 lines
16 KiB
HTML
295 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Radio Coverage Prediction — Deep Learning Demo</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
|
||
<style>
|
||
:root { --bg:#0f1115; --panel:#1a1d24; --line:#2a2e37; --fg:#e6e8eb; --muted:#9aa0a6; --accent:#3ddc84; }
|
||
* { box-sizing:border-box; }
|
||
body { margin:0; background:var(--bg); color:var(--fg);
|
||
font-family: system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,sans-serif; line-height:1.6; }
|
||
.wrap { max-width:920px; margin:0 auto; padding:28px 20px 72px; }
|
||
.topbar { display:flex; justify-content:flex-end; gap:6px; margin-bottom:18px; }
|
||
.lang { cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--muted);
|
||
padding:5px 12px; border-radius:20px; font-size:.85rem; }
|
||
.lang.active { background:var(--accent); color:#0f1115; border-color:var(--accent); font-weight:600; }
|
||
h1 { font-size:1.7rem; margin:0 0 6px; }
|
||
.sub { color:var(--muted); margin:0 0 28px; font-size:1.05rem; }
|
||
h2 { font-size:1.15rem; margin:36px 0 10px; }
|
||
p { margin:0 0 12px; }
|
||
.metrics { display:flex; gap:14px; flex-wrap:wrap; margin:18px 0 8px; }
|
||
.metric { background:var(--panel); border-radius:10px; padding:12px 16px; flex:1 1 150px; }
|
||
.metric .v { font-size:1.5rem; font-weight:700; color:var(--accent); }
|
||
.metric .l { color:var(--muted); font-size:.85rem; }
|
||
.demo { background:var(--panel); border-radius:14px; padding:20px; margin-top:14px; }
|
||
.row { display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; }
|
||
.col { flex:1 1 256px; }
|
||
canvas { width:100%; max-width:340px; height:auto; image-rendering:pixelated;
|
||
border-radius:8px; background:#000; cursor:crosshair; display:block; }
|
||
.col h3 { font-size:.95rem; margin:0 0 8px; font-weight:600; }
|
||
.controls { margin:0 0 18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
|
||
select { background:#0f1115; color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
|
||
.status { color:var(--muted); font-size:.9rem; margin-top:14px; min-height:1.2em; }
|
||
.hint { color:var(--muted); font-size:.85rem; }
|
||
.legend { height:12px; border-radius:6px; margin-top:6px;
|
||
background:linear-gradient(90deg,#440154,#3b528b,#21918c,#5ec962,#fde725); }
|
||
.legend-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:.75rem; }
|
||
.specs { border-top:1px solid var(--line); margin-top:8px; }
|
||
.spec { display:flex; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); }
|
||
.spec .k { flex:0 0 130px; color:var(--accent); font-size:.9rem; }
|
||
.spec .val { color:var(--fg); font-size:.95rem; }
|
||
.tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
|
||
.tag { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:5px 12px; font-size:.85rem; color:var(--muted); }
|
||
footer { margin-top:40px; color:var(--muted); font-size:.8rem; border-top:1px solid var(--line); padding-top:16px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<div class="topbar">
|
||
<button class="lang" data-lang="en">EN</button>
|
||
<button class="lang" data-lang="zh">中文</button>
|
||
</div>
|
||
|
||
<h1 data-i18n="title"></h1>
|
||
<p class="sub" data-i18n="subtitle"></p>
|
||
|
||
<div class="metrics">
|
||
<div class="metric"><div class="v">4.1 dB</div><div class="l" data-i18n="m_rmse"></div></div>
|
||
<div class="metric"><div class="v">71%</div><div class="l" data-i18n="m_improve"></div></div>
|
||
<div class="metric"><div class="v">~13M</div><div class="l" data-i18n="m_params"></div></div>
|
||
<div class="metric"><div class="v"><2 s</div><div class="l" data-i18n="m_speed"></div></div>
|
||
</div>
|
||
|
||
<h2 data-i18n="problem_h"></h2>
|
||
<p data-i18n="problem_p"></p>
|
||
|
||
<h2 data-i18n="how_h"></h2>
|
||
<p data-i18n="how_p"></p>
|
||
|
||
<h2 data-i18n="demo_h"></h2>
|
||
<p data-i18n="demo_p"></p>
|
||
<div class="demo">
|
||
<div class="controls">
|
||
<label for="mapSel" data-i18n="select_label"></label>
|
||
<select id="mapSel"></select>
|
||
<span class="hint" data-i18n="click_hint"></span>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col">
|
||
<h3 data-i18n="input_title"></h3>
|
||
<canvas id="inputCanvas" width="256" height="256"></canvas>
|
||
</div>
|
||
<div class="col">
|
||
<h3 data-i18n="output_title"></h3>
|
||
<canvas id="outputCanvas" width="256" height="256"></canvas>
|
||
<div class="legend"></div>
|
||
<div class="legend-labels"><span data-i18n="legend_weak"></span><span data-i18n="legend_strong"></span></div>
|
||
</div>
|
||
</div>
|
||
<div class="status" id="status"></div>
|
||
</div>
|
||
|
||
<h2 data-i18n="results_h"></h2>
|
||
<p data-i18n="results_p"></p>
|
||
|
||
<h2 data-i18n="hood_h"></h2>
|
||
<div class="specs">
|
||
<div class="spec"><div class="k" data-i18n="s_data_k"></div><div class="val" data-i18n="s_data_v"></div></div>
|
||
<div class="spec"><div class="k" data-i18n="s_eval_k"></div><div class="val" data-i18n="s_eval_v"></div></div>
|
||
<div class="spec"><div class="k" data-i18n="s_model_k"></div><div class="val" data-i18n="s_model_v"></div></div>
|
||
<div class="spec"><div class="k" data-i18n="s_train_k"></div><div class="val" data-i18n="s_train_v"></div></div>
|
||
<div class="spec"><div class="k" data-i18n="s_deploy_k"></div><div class="val" data-i18n="s_deploy_v"></div></div>
|
||
</div>
|
||
|
||
<h2 data-i18n="stack_h"></h2>
|
||
<div class="tags">
|
||
<span class="tag">Python</span><span class="tag">PyTorch</span><span class="tag">U-Net / CNN</span>
|
||
<span class="tag">ONNX</span><span class="tag">ONNX Runtime Web</span><span class="tag">NumPy</span>
|
||
</div>
|
||
|
||
<footer data-i18n="footer"></footer>
|
||
</div>
|
||
|
||
<script>
|
||
const T = {
|
||
en: {
|
||
title: "Predicting Wireless Coverage with Deep Learning",
|
||
subtitle: "A U-Net neural network predicts a base station's downlink signal coverage across a city — running live in your browser.",
|
||
m_rmse: "RMSE on unseen cities", m_improve: "lower error vs. classical model",
|
||
m_params: "parameters", m_speed: "in-browser inference",
|
||
problem_h: "The problem",
|
||
problem_p: "Before building a base station, mobile operators need to know how its signal will spread across a city — where coverage is strong, and where buildings cast \"shadows\" that block it. Traditionally this is done either with fast but crude empirical formulas (like the Hata model) that ignore building geometry entirely, or with slow, physically accurate ray-tracing simulations that can take minutes per map. This project asks: can a neural network match the accuracy of the slow simulation, but in milliseconds?",
|
||
how_h: "How it works",
|
||
how_p: "The model is a U-Net — a convolutional encoder-decoder with skip connections. It takes two inputs as image channels (the city's building layout and the transmitter's location) and outputs one image: the predicted coverage map, where bright means strong signal and dark means weak. The network was never given any propagation equations — it learned signal falloff with distance and shadowing behind buildings entirely from examples.",
|
||
demo_h: "Try it yourself",
|
||
demo_p: "Pick a city layout and click anywhere to place a transmitter. The model runs entirely in your browser and renders the predicted coverage in a fraction of a second. Place it near buildings and watch the signal shadows form.",
|
||
select_label: "City layout:", click_hint: "Click the map to place a transmitter.",
|
||
input_title: "City map — click to place transmitter", output_title: "Predicted coverage",
|
||
legend_weak: "weak", legend_strong: "strong",
|
||
results_h: "Results",
|
||
results_p: "Evaluated on test cities the model never saw during training, it reaches 4.1 dB RMSE — a 71% reduction in error compared to a classical log-distance path-loss model (14.3 dB), which can only model distance and is blind to buildings. That gap is exactly the value the network adds: it learned to account for the building shadowing the classical model cannot represent.",
|
||
hood_h: "Under the hood",
|
||
s_data_k: "Dataset", s_data_v: "RadioMapSeer — 56,000+ ray-traced coverage maps from real cities (Berlin, London, Tel Aviv…) at 5.9 GHz.",
|
||
s_eval_k: "Evaluation", s_eval_v: "Train/test split by city, so the model is measured on building layouts it has never seen.",
|
||
s_model_k: "Model", s_model_v: "U-Net CNN, ~13M parameters, image-to-image regression with MSE loss and a sigmoid output.",
|
||
s_train_k: "Training", s_train_v: "PyTorch on a single NVIDIA RTX 2080, automatic mixed precision (AMP), Adam optimizer.",
|
||
s_deploy_k: "Deployment", s_deploy_v: "Exported to ONNX and run fully client-side via ONNX Runtime Web — no server required.",
|
||
stack_h: "Tech stack",
|
||
footer: "Dataset: RadioMapSeer (Yapar et al., 2022), CC BY 4.0. Independent portfolio project.",
|
||
st_loading: "Loading model… (downloads once, ~50 MB)",
|
||
st_ready: "Model ready. Pick a layout and click to place a transmitter.",
|
||
st_running: "Running inference…",
|
||
st_done: (ms) => "Coverage predicted in " + ms + " ms. Click again to move the transmitter.",
|
||
st_error: (m) => "Error: " + m
|
||
},
|
||
zh: {
|
||
title: "基于深度学习的无线信号覆盖预测",
|
||
subtitle: "一个 U-Net 神经网络直接预测基站在城市中的下行信号覆盖——并在你的浏览器中实时运行。",
|
||
m_rmse: "未见城市上的 RMSE", m_improve: "较经典模型误差降低",
|
||
m_params: "参数量", m_speed: "浏览器端推理",
|
||
problem_h: "问题背景",
|
||
problem_p: "在建设基站之前，移动运营商需要预估信号在城市中的传播情况——哪里覆盖良好，哪里因建筑遮挡形成信号「阴影」。传统方法要么使用快速但粗糙的经验公式（如 Hata 模型），完全忽略建筑几何结构；要么使用物理精确但缓慢的射线追踪仿真，每张地图可能耗时数分钟。本项目要回答的问题是：神经网络能否在毫秒级时间内，达到接近慢速仿真的预测精度？",
|
||
how_h: "实现原理",
|
||
how_p: "模型是一个 U-Net——带跳跃连接的卷积编码器-解码器。它以两个图像通道作为输入（城市建筑布局与发射机位置），输出一张图像：预测的信号覆盖热力图，越亮表示信号越强，越暗表示越弱。网络从未被告知任何传播公式，它完全从样本数据中自行学会了信号随距离衰减、以及在建筑后方形成阴影的规律。",
|
||
demo_h: "在线体验",
|
||
demo_p: "选择一个城市布局，点击任意位置放置发射机。模型完全在你的浏览器中运行，不到一秒即可渲染出预测覆盖。把发射机放在建筑附近，观察信号阴影是如何形成的。",
|
||
select_label: "城市布局：", click_hint: "点击地图以放置发射机。",
|
||
input_title: "城市地图——点击放置发射机", output_title: "预测覆盖",
|
||
legend_weak: "弱", legend_strong: "强",
|
||
results_h: "实验结果",
|
||
results_p: "在训练中从未见过的测试城市上评估，模型达到 4.1 dB 的均方根误差（RMSE）——相比只能建模距离、对建筑「视而不见」的经典对数距离路径损耗模型（14.3 dB），误差降低了 71%。这一差距正是神经网络的价值所在：它学会了经典模型无法表达的建筑遮蔽效应。",
|
||
hood_h: "技术细节",
|
||
s_data_k: "数据集", s_data_v: "RadioMapSeer——基于真实城市（柏林、伦敦、特拉维夫等）、5.9 GHz、56,000+ 张射线追踪仿真覆盖图。",
|
||
s_eval_k: "评估方式", s_eval_v: "按城市划分训练/测试集，模型在从未见过的建筑布局上接受评估。",
|
||
s_model_k: "模型", s_model_v: "U-Net 卷积网络，约 1300 万参数，图像到图像回归，MSE 损失 + Sigmoid 输出。",
|
||
s_train_k: "训练", s_train_v: "PyTorch，单张 NVIDIA RTX 2080，混合精度（AMP），Adam 优化器。",
|
||
s_deploy_k: "部署", s_deploy_v: "导出为 ONNX，通过 ONNX Runtime Web 完全在浏览器端运行，无需服务器。",
|
||
stack_h: "技术栈",
|
||
footer: "数据集：RadioMapSeer（Yapar 等，2022），CC BY 4.0 许可。独立作品集项目。",
|
||
st_loading: "正在加载模型…（仅首次下载，约 50 MB）",
|
||
st_ready: "模型已就绪。选择布局并点击放置发射机。",
|
||
st_running: "正在推理…",
|
||
st_done: (ms) => "推理完成，用时 " + ms + " 毫秒。再次点击可移动发射机。",
|
||
st_error: (m) => "错误：" + m
|
||
}
|
||
};
|
||
|
||
let currentLang = (navigator.language || "en").toLowerCase().startsWith("zh") ? "zh" : "en";
|
||
|
||
function applyLang(lang){
|
||
currentLang = lang;
|
||
document.documentElement.lang = (lang === "zh") ? "zh" : "en";
|
||
document.querySelectorAll("[data-i18n]").forEach(el=>{
|
||
const v = T[lang][el.getAttribute("data-i18n")];
|
||
if (typeof v === "string") el.textContent = v;
|
||
});
|
||
document.querySelectorAll(".lang").forEach(b=>
|
||
b.classList.toggle("active", b.getAttribute("data-lang") === lang));
|
||
// refresh the status line in the new language
|
||
if (!session) statusEl.textContent = T[lang].st_loading;
|
||
else if (!txRC) statusEl.textContent = T[lang].st_ready;
|
||
}
|
||
document.querySelectorAll(".lang").forEach(b=>
|
||
b.addEventListener("click", ()=> applyLang(b.getAttribute("data-lang"))));
|
||
|
||
// ---------- demo logic ----------
|
||
const MAP_IDS = [600, 615, 630, 645, 660, 675];
|
||
const SIZE = 256;
|
||
let session = null, buildings = null, txRC = null;
|
||
|
||
const statusEl = document.getElementById("status");
|
||
const inCanvas = document.getElementById("inputCanvas");
|
||
const outCanvas = document.getElementById("outputCanvas");
|
||
const inCtx = inCanvas.getContext("2d", { willReadFrequently: true });
|
||
const outCtx = outCanvas.getContext("2d");
|
||
const mapSel = document.getElementById("mapSel");
|
||
|
||
const VIRIDIS = [[68,1,84],[72,40,120],[62,74,137],[49,104,142],[38,130,142],
|
||
[31,158,137],[53,183,121],[109,205,89],[180,222,44],[253,231,37]];
|
||
function viridis(t){
|
||
t = Math.max(0, Math.min(1, t));
|
||
const x = t*(VIRIDIS.length-1), i = Math.floor(x), f = x-i;
|
||
const a = VIRIDIS[i], b = VIRIDIS[Math.min(i+1, VIRIDIS.length-1)];
|
||
return [a[0]+(b[0]-a[0])*f, a[1]+(b[1]-a[1])*f, a[2]+(b[2]-a[2])*f];
|
||
}
|
||
|
||
async function init(){
|
||
applyLang(currentLang);
|
||
MAP_IDS.forEach((id,i)=>{
|
||
const o = document.createElement("option");
|
||
o.value = id; o.textContent = (currentLang==="zh"?"布局 ":"Layout ")+(i+1);
|
||
mapSel.appendChild(o);
|
||
});
|
||
mapSel.addEventListener("change", ()=> loadMap(mapSel.value));
|
||
|
||
ort.env.wasm.wasmPaths = "https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/";
|
||
ort.env.wasm.numThreads = 1;
|
||
|
||
statusEl.textContent = T[currentLang].st_loading;
|
||
session = await ort.InferenceSession.create("radio_unet.onnx", { executionProviders: ["wasm"] });
|
||
statusEl.textContent = T[currentLang].st_ready;
|
||
await loadMap(MAP_IDS[0]);
|
||
}
|
||
|
||
function loadMap(id){
|
||
return new Promise((resolve)=>{
|
||
const img = new Image();
|
||
img.onload = ()=>{
|
||
inCtx.drawImage(img, 0, 0, SIZE, SIZE);
|
||
const data = inCtx.getImageData(0,0,SIZE,SIZE).data;
|
||
buildings = new Float32Array(SIZE*SIZE);
|
||
for(let p=0; p<SIZE*SIZE; p++) buildings[p] = data[p*4] / 255;
|
||
outCtx.clearRect(0,0,SIZE,SIZE);
|
||
txRC = null;
|
||
resolve();
|
||
};
|
||
img.src = "maps/map_"+id+".png";
|
||
});
|
||
}
|
||
|
||
inCanvas.addEventListener("click", async (e)=>{
|
||
if(!session || !buildings) return;
|
||
const rect = inCanvas.getBoundingClientRect();
|
||
const col = Math.floor((e.clientX-rect.left) / rect.width * SIZE);
|
||
const row = Math.floor((e.clientY-rect.top ) / rect.height * SIZE);
|
||
txRC = [row, col];
|
||
await predict();
|
||
drawTxMarker();
|
||
});
|
||
|
||
async function predict(){
|
||
statusEl.textContent = T[currentLang].st_running;
|
||
const input = new Float32Array(2*SIZE*SIZE);
|
||
input.set(buildings, 0);
|
||
const [r,c] = txRC;
|
||
input[SIZE*SIZE + r*SIZE + c] = 1.0;
|
||
const tensor = new ort.Tensor("float32", input, [1,2,SIZE,SIZE]);
|
||
|
||
const t0 = performance.now();
|
||
const out = await session.run({ input: tensor });
|
||
const dt = performance.now()-t0;
|
||
const cov = out.coverage.data;
|
||
|
||
const imgData = outCtx.createImageData(SIZE,SIZE);
|
||
for(let p=0; p<SIZE*SIZE; p++){
|
||
const [rr,gg,bb] = viridis(cov[p]);
|
||
imgData.data[p*4]=rr; imgData.data[p*4+1]=gg; imgData.data[p*4+2]=bb; imgData.data[p*4+3]=255;
|
||
}
|
||
outCtx.putImageData(imgData, 0, 0);
|
||
statusEl.textContent = T[currentLang].st_done(dt.toFixed(0));
|
||
}
|
||
|
||
function drawTxMarker(){
|
||
if(!txRC) return;
|
||
const [r,c] = txRC;
|
||
outCtx.beginPath(); outCtx.arc(c, r, 3, 0, 2*Math.PI);
|
||
outCtx.fillStyle = "#ff3b3b"; outCtx.fill();
|
||
outCtx.lineWidth = 1; outCtx.strokeStyle = "#fff"; outCtx.stroke();
|
||
}
|
||
|
||
init().catch(err=>{ statusEl.textContent = T[currentLang].st_error(err.message); console.error(err); });
|
||
</script>
|
||
</body>
|
||
</html> |