Spaces:
Running
Running
| <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> | |