Spaces:
Running
Running
File size: 10,973 Bytes
9bd422a 8ff6981 9bd422a 8ff6981 9bd422a 8ff6981 9bd422a 8ff6981 9bd422a 8b3ace6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 | <!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ONNX Model Explorer</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome Icons -->
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet">
<!-- Driver.js CSS (Guided Tour) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.css">
<!-- Application CSS -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/components.css">
</head>
<body>
<div id="app" class="container-fluid">
<!-- Header -->
<header class="navbar navbar-expand-lg navbar-dark bg-dark mb-4 fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="fas fa-cube"></i> ONNX Model Explorer
</a>
<div class="navbar-nav ms-auto">
<button id="copyLinkBtn" class="btn btn-outline-light btn-sm me-2" title="Copy shareable link">
<i class="fas fa-link"></i> Copy Link
</button>
<button id="uploadBtn" class="btn btn-primary btn-sm me-2">
<i class="fas fa-upload"></i> Upload
</button>
<button id="exportBtn" class="btn btn-success btn-sm" disabled>
<i class="fas fa-download"></i> Export
</button>
<button id="printBtn" class="btn btn-outline-light btn-sm ms-2" disabled>
<i class="fas fa-print"></i> Print PDF
</button>
</div>
</div>
</header>
<!-- Print Header - only visible in @media print -->
<div id="print-header" class="print-header" aria-hidden="true"></div>
<!-- Main Content -->
<div class="row">
<!-- Left Sidebar -->
<div class="col-lg-3 col-md-4 mb-4">
<!-- Search -->
<div class="mb-3">
<input type="text" id="searchInput" class="form-control" placeholder="Search models...">
</div>
<!-- Model List -->
<div id="modelListContainer" class="list-group">
<div class="list-group-item text-muted">Loading models...</div>
</div>
<!-- Recent Models History -->
<div id="recentModelsContainer" class="mt-3"></div>
</div>
<!-- Right Content -->
<div class="col-lg-9 col-md-8">
<!-- Error Display -->
<div id="errorContainer"></div>
<!-- Model Details -->
<div id="modelDetailsContainer" class="row">
<!-- Metadata -->
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-header">
<h5 class="mb-0">Metadata</h5>
</div>
<div class="card-body" id="metadataContainer">
<p class="text-muted">Select a model to view metadata</p>
</div>
</div>
</div>
<!-- Inputs/Outputs -->
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-header">
<h5 class="mb-0">Inputs & Outputs</h5>
</div>
<div class="card-body" id="inputOutputContainer">
<p class="text-muted">Select a model to view inputs and outputs</p>
</div>
</div>
</div>
<!-- Initializers -->
<div class="col-12 mb-4">
<div class="card">
<div class="card-header">
<h5 class="mb-0">Initializers</h5>
</div>
<div class="card-body" id="initializerContainer">
<p class="text-muted">Select a model to view initializers</p>
</div>
</div>
</div>
<!-- Layer Statistics -->
<div class="col-md-6 mb-4">
<div id="layerStatsContainer"></div>
</div>
<!-- Model Complexity Metrics -->
<div class="col-md-6 mb-4">
<div id="modelComplexityContainer"></div>
</div>
<!-- FLOPs Estimator -->
<div class="col-md-6 mb-4">
<div id="flopsEstimatorContainer"></div>
</div>
<!-- Opset Compatibility Checker -->
<div class="col-12 mb-4">
<div id="opsetCheckerContainer"></div>
</div>
<!-- Graph Visualization -->
<div class="col-12 mb-4">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">Model Graph</h5>
<div id="graphExportContainer" class="d-inline-block"></div>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-8">
<div id="graphContainer" style="height: 500px; border: 1px solid #ddd; border-radius: 4px;">
<p class="text-muted text-center mt-5">Select a model to view graph</p>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-header py-2">
<h6 class="mb-0"><i class="fas fa-info-circle me-1"></i>Node Details</h6>
</div>
<div class="card-body overflow-auto" id="nodeDetailContainer" style="max-height: 460px;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Hidden file input for upload -->
<input type="file" id="fileInput" accept=".onnx,.safetensors,.pt,.pth,.tflite,.h5,.keras,.pb,.mlmodel,.caffemodel,.weights,.pdmodel,.params" style="display: none;">
<!-- protobuf.js for ONNX model parsing -->
<script src="https://cdn.jsdelivr.net/npm/protobufjs@7/dist/protobuf.min.js"></script>
<!-- Cytoscape.js Library -->
<script src="https://cdn.jsdelivr.net/npm/cytoscape@latest/dist/cytoscape.min.js"></script>
<!-- Driver.js (Guided Tour) -->
<script src="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.js.iife.js"></script>
<!-- 1. Configuration (must be first) -->
<script src="js/config.js"></script>
<!-- 2. Utilities (no dependencies) -->
<script src="js/utils/helpers.js"></script>
<script src="js/utils/formatters.js"></script>
<script src="js/utils/validators.js"></script>
<!-- 3. State Manager (depends on config) -->
<script src="js/state/stateManager.js"></script>
<!-- 4. Error utilities (depend on StateManager) -->
<script src="js/utils/errorHandler.js"></script>
<script src="js/ui/errorDisplay.js"></script>
<!-- 5. EventBus (depends on config) -->
<script src="js/core/eventBus.js"></script>
<!-- 6. Core business logic (depend on config + StateManager) -->
<script src="js/core/modelLoader.js"></script>
<script src="js/core/onnxParser.js"></script>
<script src="js/core/safeTensorsParser.js"></script>
<script src="js/core/graphProcessor.js"></script>
<!-- 7. UI components (depend on EventBus + StateManager) -->
<script src="js/ui/modelListDisplay.js"></script>
<script src="js/ui/metadataDisplay.js"></script>
<script src="js/ui/inputOutputDisplay.js"></script>
<script src="js/ui/initializerDisplay.js"></script>
<script src="js/ui/graphVisualizer.js"></script>
<script src="js/ui/fileUpload.js"></script>
<script src="js/ui/searchFilter.js"></script>
<script src="js/ui/exportHandler.js"></script>
<script src="js/ui/comparisonView.js"></script>
<script src="js/ui/nodeDetailPanel.js"></script>
<!-- 7b. New core modules -->
<script src="js/core/graphPathHighlighter.js"></script>
<script src="js/core/shareableURL.js"></script>
<!-- 7c. New UI components -->
<script src="js/ui/graphMinimap.js"></script>
<script src="js/ui/layerStats.js"></script>
<script src="js/ui/modelComplexity.js"></script>
<script src="js/ui/tensorShapeInspector.js"></script>
<script src="js/ui/opsetChecker.js"></script>
<script src="js/ui/recentModels.js"></script>
<script src="js/ui/graphExport.js"></script>
<script src="js/ui/fullscreenManager.js"></script>
<script src="js/ui/sidebarToggle.js"></script>
<script src="js/ui/helpTooltip.js"></script>
<script src="js/ui/guidedTour.js"></script>
<script src="js/ui/languageSwitcher.js"></script>
<script src="js/ui/graphSearch.js"></script>
<script src="js/ui/graphLayoutSwitcher.js"></script>
<script src="js/ui/nodeGrouping.js"></script>
<script src="js/ui/graphAnnotation.js"></script>
<script src="js/ui/flopsEstimator.js"></script>
<script src="js/ui/safeTensorsViewer.js"></script>
<!-- 7d. TFLite and Conversion Guide modules -->
<script src="js/core/tfliteParser.js"></script>
<script src="js/ui/tfliteViewer.js"></script>
<script src="js/ui/conversionGuideManager.js"></script>
<!-- 7e. Print Handler -->
<script src="js/ui/printHandler.js"></script>
<!-- 8. Application integration hub (depends on everything above) -->
<script src="js/app.js"></script>
</body>
</html>
|