webai-compute-benchmark/index.html at main · GoogleChrome/webai-compute-benchmark · 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html data-visible-section="home">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=850" />
        <title>Web AI Compute Benchmark</title>
        <link rel="stylesheet" href="resources/main.css" />
        <link rel="icon" href="resources/favicon.png" />
        <link rel="preload" as="image" href="resources/logo.png">
        <script src="resources/main.mjs" type="module"></script>
    </head>
    <body>
        <main>
            <section id="home">
                <a href="#home" class="logo">
                    <div class="version next">next</div>
                </a>
                <div class="content">
                    <p>
                        This benchmark contains several interesting workloads for running AI models and machine learning tasks on the client side.
                        The workloads use browser technologies such as WebAssembly and WebGPU and are built on top of popular machine learning frameworks and models.
                        Please see the <a href="https://github.com/GoogleChrome/webai-compute-benchmark/blob/main/README.md">README</a> for more details.
                    </p>
                    <p>
                        The frameworks and models used in this benchmark contain assets of considerable size.
                        Currently, the benchmark <b>downloads more than 2 GB of data</b>.
                        Do not run this on a metered connection; a stable broadband connection is highly recommended.
                        Additionally, the first iteration of the benchmark <b>may take several minutes</b> to complete.
                    </p>
                    <p class="version-note">
                        Version: <!-- package-version -->0.2.0 (2026-06-17)<!-- /package-version --> (commit: <!-- git-commit-link --><a href="https://github.com/GoogleChrome/webai-compute-benchmark/commit/498847f972c7bda84ab7dea6370b94db7365e190" target="_blank">498847f</a><!-- /git-commit-link -->)
                    </p>
                    <p id="screen-size-warning">
                        <strong>
                            Your browser window is too small. For most accurate results, please make the view port size at least <span id="min-screen-width">850px</span> by <span id="min-screen-height">650px</span>.<br />
                            It's currently <span id="screen-size"></span>.
                        </strong>
                    </p>
                </div>
                <div class="buttons">
                    <div class="button-row">
                        <button class="start-tests-button">Start Test</button>
                    </div>
                    <div class="button-row">
                        <a class="button" href="about.html">About</a>
                        <a class="button" href="instructions.html">Test Instructions</a>
                    </div>
                </div>
            </section>

            <section id="running">
                <a href="#home" class="logo">
                    <div class="version next">next</div>
                </a>
                <div id="testContainer"></div>
                <div id="progress">
                    <progress aria-label="Progress" id="progress-completed"></progress>
                </div>
                <div id="info">
                    <div id="info-label"></div>
                    <div id="info-progress"></div>
                </div>
            </section>

            <section id="summary" data-title="Results Summary" class="valid">
                <a href="#home" class="logo">
                    <div class="version next">next</div>
                </a>
                <h1>Score</h1>
                <div class="gauge">
                    <div class="window"><div class="needle"></div></div>
                </div>
                <hr />
                <div id="result-number"></div>
                <div id="confidence-number"></div>
                <div id="invalid-score-text">
                    One or more subtests produced no duration.<br />
                    Please check your <a href="./instructions.html" target="_blank">browser settings</a> and re-run the benchmark.<br />
                </div>
                <div class="buttons">
                    <div class="button-row">
                        <a class="button" href="#details" id="show-details" title="Show detailed results data.">Details</a>
                    </div>
                </div>
            </section>

            <section id="details" data-title="Results Details">
                <a href="#home" class="logo">
                    <div class="version next">next</div>
                </a>
                <div class="section-grid">
                    <h1 class="section-header">Detailed Results <!-- package-version -->0.2.0 (2026-06-17)<!-- /package-version --></h1>
                    <div class="section-content all-metric-results">
                        <div class="non-standard-params">
                            <h2>Non-standard Parameters</h2>
                            <p>
                                Benchmark ran with non-standard parameters.<br />
                                The results are likely not comparable to default runs.
                            </p>
                            <table id="non-standard-params-table">
                                <thead>
                                    <tr>
                                        <th>Param</th>
                                        <th>Value</th>
                                        <th>Default</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="aggregated-metric-result">
                            <h2>Aggregate Metric</h2>
                            <div id="aggregate-chart"></div>
                            <h2>Test Metrics Overview</h2>
                            <div id="tests-chart"></div>
                        </div>
                        <br />
                        <h2>Test Metrics Details</h2>
                        <div id="metrics-results"></div>
                    </div>
                    <div class="buttons section-footer">
                        <div class="button-row">
                            <a class="button" href="#summary" title="Go back to the simplified summary view.">Summary</a>
                        </div>
                        <div class="button-row export-buttons">
                            <button id="copy-full-json" title="Copy full result metrics as json string.">Copy JSON</button>
                            <a class="button" id="download-full-json" title="Download full result metrics as json string.">Download JSON</a>
                            <a class="button" id="download-classic-json" title="Download backwards-compatible result metrics as json string.">Download Classic JSON</a>
                            <a class="button" id="download-csv" title="Download all result metrics as CSV string.">Download CSV</a>
                            <button id="copy-csv" title="Copy all result metrics as CSV string.">Copy CSV</button>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </body>
</html>