<!DOCTYPE html>
-------------------------------------------------------------------------
This file is part of the MindStudio project.
Copyright (c) 2026 Huawei Technologies Co.,Ltd.
MindStudio is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details.
-------------------------------------------------------------------------
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>PyTorch Flame Graph - $title</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace; background: #1e1e1e; color: #d4d4d4; display: flex; flex-direction: column; }
#toolbar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: #2d2d2d; border-bottom: 1px solid #404040; flex-wrap: wrap; flex: 0 0 auto; z-index: 100; }
#toolbar label { font-size: 13px; color: #aaa; }
#toolbar input, #toolbar select { font-size: 13px; padding: 4px 8px; border: 1px solid #555; border-radius: 4px; background: #3c3c3c; color: #d4d4d4; }
#toolbar input:focus, #toolbar select:focus { border-color: #007acc; outline: none; }
#toolbar button { font-size: 13px; padding: 4px 10px; border: 1px solid #555; border-radius: 4px; background: #3c3c3c; color: #d4d4d4; cursor: pointer; }
#toolbar button:hover { background: #505050; }
.dropdown { position: relative; min-width: 220px; }
.dropdown-toggle { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dropdown-toggle::after { content: '▾'; font-size: 10px; color: #aaa; }
.dropdown.open .dropdown-toggle::after { content: '▴'; }
.dropdown-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 320px; overflow-y: auto; background: #2d2d2d; border: 1px solid #555; border-radius: 4px; box-shadow: 0 6px 16px rgba(0,0,0,0.45); z-index: 200; }
.dropdown.open .dropdown-menu { display: block; }
.dropdown-item { padding: 6px 10px; font-size: 13px; color: #d4d4d4; cursor: pointer; white-space: nowrap; }
.dropdown-item:hover, .dropdown-item.active { background: #505050; color: #fff; }
#container { position: relative; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; }
canvas { display: block; }
#tooltip { display: none; position: fixed; background: #2d2d2d; border: 1px solid #555; border-radius: 6px; padding: 10px 14px; font-size: 12px; line-height: 1.6; max-width: 600px; z-index: 1000; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
#tooltip .fname { color: #fff; font-weight: bold; word-break: break-all; }
#tooltip .cat { font-size: 11px; padding: 1px 6px; border-radius: 3px; margin-left: 6px; }
#tooltip .cat-python { background: #1565c0; color: #fff; }
#tooltip .cat-cann { background: #c62828; color: #fff; }
#tooltip .cat-python_framework { background: #1e88e5; color: #fff; }
#tooltip .cat-unknown { background: #616161; color: #fff; }
#tooltip .cat-root { background: #424242; color: #fff; }
#tooltip .detail { color: #aaa; }
#legend { display: flex; gap: 16px; margin-left: auto; font-size: 11px; color: #aaa; }
#legend span { display: flex; align-items: center; gap: 4px; }
#legend .dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
#searchCount { display: none; font-size: 12px; padding: 3px 10px; border-radius: 10px; background: #007acc; color: #fff; white-space: nowrap; line-height: 1.4; }
#searchCount.no-match { background: #c62828; }
</style>
</head>
<body>
<div id="toolbar">
<label>Thread:</label>
<div id="threadDropdown" class="dropdown">
<button id="threadDropdownToggle" class="dropdown-toggle" type="button">All</button>
<div id="threadDropdownMenu" class="dropdown-menu"></div>
</div>
<label>Search:</label>
<input id="searchInput" type="text" placeholder="Filter functions..." style="width: 240px;">
<span id="searchCount"></span>
<button id="resetBtn" title="Reset zoom">Reset</button>
<button id="resetSearchBtn" title="Clear search">Clear</button>
<div id="legend">
<span><span class="dot" style="background:#ef6c00"></span>Python</span>
<span><span class="dot" style="background:#f9a825"></span>Framework</span>
<span><span class="dot" style="background:#c62828"></span>CANN/NPU</span>
<span><span class="dot" style="background:#8d6e63"></span>Other</span>
</div>
</div>
<div id="container">
<canvas id="canvas"></canvas>
</div>
<div id="tooltip"></div>
<script id="flamegraph-data" type="application/json">$json_data</script>
<script>$js_code</script>
</body>
</html>
