ml.html (84 lines of code) (raw):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firefox AI Runtime</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment/min/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
<link rel="stylesheet" href="assets/ml.css">
<script src="assets/ml.js"></script>
</head>
<body>
<h1>Firefox AI Runtime</h1>
<div class="nav-buttons">
<button id="windows11Ref" onclick="updatePlatform('windows11Ref')">Windows 11 Reference</button>
<button id="windows11" onclick="updatePlatform('windows11')">Windows 11</button>
<button id="linuxHPE" onclick="updatePlatform('linuxHPE')">Linux</button>
<button id="macOS" onclick="updatePlatform('macOS')">macOS</button>
</div>
<div id="platformDescription" class="platform-description"></div>
<div class="grid-container">
<div class="feature-group">
<div class="feature-title">Smart Tab Grouping - Suggest</div>
<div class="feature-description">Suggests similar tabs with ~10 tabs in the window.</div>
<div class="chart-container">
<div class="chart-wrapper">
<div class="chart-description">Latency in ms (cold start)</div>
<canvas id="smartTabSuggestChart"></canvas>
</div>
<div class="chart-wrapper">
<div class="chart-description">Peak RAM usage in MiB</div>
<canvas id="ramSmartTabSuggestChart"></canvas>
</div>
</div>
</div>
<div class="feature-group">
<div class="feature-title">Smart Tab Grouping - Topic</div>
<div class="feature-description">Generates a group label for ~5 tabs.</div>
<div class="chart-container">
<div class="chart-wrapper">
<div class="chart-description">Latency in ms (cold start)</div>
<canvas id="smartTabTopicChart"></canvas>
</div>
<div class="chart-wrapper">
<div class="chart-description">Peak RAM usage in MiB</div>
<canvas id="ramSmartTabTopicChart"></canvas>
</div>
</div>
</div>
</div>
<div class="more-info">
<a href="https://wiki.mozilla.org/Performance/Platforms">More info on CI hardware</a> |
<a href="https://firefox-source-docs.mozilla.org/toolkit/components/ml/index.html">
Runtime Documentation
</a> |
<a href="https://blog.mozilla.org/en/mozilla/ai/ai-tech">
Blog posts
</a> |
<a href="/ml-dev.html">
Dev Dashboard
</a> |
<a href="/ml-engine.html">
Engine Dashboard
</a>
</div>
<script>
function updatePlatform(platform) {
const params = new URLSearchParams(window.location.search);
params.set('platform', platform);
window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
loadPlatformData(platform);
}
function loadFromURL() {
const params = new URLSearchParams(window.location.search);
const platform = params.get('platform') || 'windows11Ref';
loadPlatformData(platform);
}
window.onload = loadFromURL;
</script>
</body>
</html>