performance/ml.html at main · mozilla/performance · GitHub

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
<!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>

  <link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;700&display=swap" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" rel="stylesheet">
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <link rel="stylesheet" href="assets/main-ui-style.css">

  <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>
<div class="top">
  <a href="javascript:history.back()" class="btn back-btn" title="Go Back">
    <i class="fa-solid fa-arrow-left"></i>
  </a>
  <div class="top-title-container">
    <div class="top-title">
      <b>moz://a</b> performance portal
    </div>
  </div>
  <a href="https://firefox-source-docs.mozilla.org/performance/reporting_a_performance_problem.html" class="btn" title="Report a Performance Bug">
    <i class="fa-solid fa-bug"></i> Report Performance Issue
  </a>
</div>

<div class="main-content">
  <aside class="main-sidebar" id="main-sidebar">
  </aside>

  <div class="content ml-content">
    <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>
  </div>
</div>
<script src="assets/main-ui.js"></script>
</body>

</html>