-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
24 lines (24 loc) · 8.95 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>VANAS: A Visual Analytics System for Neural Architecture Search</title><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"/><link href="https://fonts.googleapis.com/css?family=Quicksand|Open+Sans:wght@300|Rajdhani:wght@400" rel="stylesheet"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"/><script defer="defer" src="index.bundle.js"></script></head><body><nav class="navbar navbar-light bg-light mb-2 py-1"><div class="container align-items-center"><a class="idc navbar-brand" href="#"><strong>VANAS</strong></a><div><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="https://github.com/jason-choi-skku/nasbench-101-visualizer"><i class="bi bi-box-arrow-in-right"></i> Github</a></li></ul></div></div></nav><main id="loading" class="container-xxl bd-layout overflow-hidden d-flex justify-content-center"><div class="d-flex flex-column align-items-center"><div class="d-flex mt-5 mb-5"><h1>Loading Datasets...</h1></div><div class="d-flex spinner-border spinner-border-xxl text-secondary" role="status" style="width: 20rem; height: 20rem"></div></div></main><main id="main" class="bd-main container-xxl bd-layout overflow-hidden visually-hidden"><div class="row g-3"><div class="col-lg-5"><div class="section-title mb-1"><h5 style="display: inline">Overview</h5><i class="bi bi-question-circle ms-1" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="right" title="
Visualize NASBench-101 dataset's search space with heatmap.<br><br>
You can set X and Y axes. Click colored box to load cell to cell builder.
"></i></div><div class="d-flex border border-bottom-0 rounded-top p-2 px-3" id="options"><div class="flex-fill align-items-center d-flex"><label for="optionX">X axis</label> <select class="form-select form-select-sm width-auto ms-2" id="optionX"><option value="trainable_parameters" selected="selected"># of Parameters</option><option value="training_time">Training Time</option></select></div><div class="flex-fill align-items-center d-flex"><label for="optionY">Y axis</label> <select class="form-select form-select-sm width-auto ms-2" id="optionY"><option value="trainable_parameters"># of Parameters</option><option value="training_time" selected="selected">Training Time</option><option value="test_accuracy">Accuracy</option></select></div></div><div class="border bg-light svg-container mb-3" id="heatmap-container"><svg id="heatmap" viewBox="0 0 800 600" preserveAspectRatio="xMinYMin meet" class="svg-content-responsive"></svg><div id="tooltip"></div></div><div class="section-title mb-1"><h5 style="display: inline">Edge Significance</h5><i class="bi bi-question-circle ms-1" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="right" title="
Visualize sharpley values of edges included in NASBench-101 dataset.<br><br>
You can see how much edges contribute to test accuracy when build cells.<br><br>
Click bar of edges to append edge to cell builder.
"></i></div><div class="border bg-light svg-container" id="edge-importance-container"><svg id="sharpleyvalue" viewBox="0 0 800 600" preserveAspectRatio="xMinYMin meet" class="svg-content-responsive"></svg></div></div><div id="cellBuilder" class="col-lg-5"><div class="section-title mb-1"><h5 style="display: inline">Preset Architectures</h5><i class="bi bi-question-circle ms-1" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="right" title="
Some useful presets of cell included in NASBench-101
"></i></div><ul class="list-group list-group-horizontal mb-2" id="preset-col"><li class="list-group-item preset-cell"><div class="border bg-light svg-container mb-1"><svg id="recommend6" viewBox="0 0 800 600" preserveAspectRatio="xMinYMin meet" class="svg-content-responsive recommend-cell-svg"></svg></div><div class="preset-name row d-flex justify-content-center">Inception-like</div></li><li class="list-group-item preset-cell"><div class="border bg-light svg-container mb-1"><svg id="recommend7" viewBox="0 0 800 600" preserveAspectRatio="xMinYMin meet" class="svg-content-responsive recommend-cell-svg"></svg></div><div class="preset-name row d-flex justify-content-center">Best Accuracy</div></li><li class="list-group-item preset-cell"><div class="border bg-light svg-container mb-1"><svg id="recommend8" viewBox="0 0 800 600" preserveAspectRatio="xMinYMin meet" class="svg-content-responsive recommend-cell-svg"></svg></div><div class="preset-name row d-flex justify-content-center">Best Throughput</div></li></ul><div class="section-title mb-1 mt-4"><h5 style="display: inline">Architecture Designer</h5><i class="bi bi-question-circle ms-1" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="right" title="
Click button to append operations. <br>
Click two nodes to make edges. <br>
Drag nodes to delete. <br>
Hover cursor to see how much edge contributed to test accuracy.
"></i></div><div class="border bg-light svg-container mb-3" id="arthitecture-designer-container"><svg id="architecture" viewBox="0 0 800 700" preserveAspectRatio="xMinYMin meet" class="svg-content-responsive"></svg></div><div id="connectAlert" class="notcell alert alert-warning visually-hidden" role="alert">Input node and output node must be connected.</div><div id="edgeNumberAlert" class="notcell alert alert-danger visually-hidden" role="alert">The number of edges must be less than 10.</div><div id="nodeNumberAlert" class="notcell alert alert-danger visually-hidden" role="alert">The number of nodes must be less than 8.</div><div id="extraneousAlert" class="notcell alert alert-warning visually-hidden" role="alert">There is extraneous edge. (with transparent node/edge)</div><div id="cycleAlert" class="notcell alert alert-danger visually-hidden" role="alert">Cell is not acyclic. (with transparent node/edge)</div><div id="analyticsTitle" class="visually-hidden mb-1"><h5 style="display: inline">Performance</h5></div><div id="analytics" class="visually-hidden"><div class=""><ul class="list-group list-group-horizontal mb-1"><li class="list-group-item justify-content-center"><div class="text-center mb-1 performance-result">Trainable Parameters</div><div id="trainable_parameters" class="text-center"></div></li><li class="list-group-item justify-content-center"><div class="text-center mb-1 performance-result">Training Time</div><div id="training_time" class="text-center"></div></li><li class="list-group-item justify-content-center"><div class="text-center mb-1 performance-result">Train Accuracy</div><div id="train_accuracy" class="text-center"></div></li><li class="list-group-item"><div class="text-center mb-1 performance-result">Validation Accuracy</div><div id="validation_accuracy" class="text-center"></div></li><li class="list-group-item justify-content-center"><div class="text-center mb-1 performance-result">Test Accuracy</div><div id="test_accuracy" class="text-center"></div></li></ul></div></div></div><div class="col-lg-2"><div id="recommendTitle" class="mb-1"><h5 style="display: inline">Recommendation</h5><i class="bi bi-question-circle ms-1" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="right" title="
Recommend five cell architecture with highest test accuracy among cell architectures that have operators included in the cell builder.
"></i></div><ul class="list-group list-group-vertical mb-2" id="recommend-col"></ul></div></div></main><footer class="border-top bd-footer p-2 mt-5 bg-light"><div class="container p-3"><div class="row"><div><a class="text-muted" href="https://skku.edu" target="_blank">Sungkyunkwan University</a></div><div><a class="text-muted" href="https://cs.skku.edu" target="_blank">College of Computing and Informatics</a></div><div><a class="text-muted" href="https://idclab.skku.edu" target="_blank">Interactive Data Computing Laboratory <span class="idc">(IDC</span> <span class="lab">Lab)</span></a></div></div></div></footer><script>var tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map(function (
tooltipTriggerEl
) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});</script></body></html>