-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
398 lines (366 loc) · 25.7 KB
/
index.html
File metadata and controls
398 lines (366 loc) · 25.7 KB
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>AttackBenchmark</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<meta property="og:site_name" content="AttackBench" />
<meta property="og:title" content="AttackBench" />
<meta property="og:description" content="AttackBench: Evaluating Gradient-based Attacks for Adversarial Examples." />
<meta property="og:url" content="https://cinofix.github.io/AttackBench" />
<meta property="og:image" content="https://attackbench.github.io/assets/AtkBench.svg" />
<meta property="article:publisher" content="https://attackbench.github./attackbench" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="AttackBench" />
<meta name="twitter:description" content="AttackBench: Evaluating Gradient-based Attacks for Adversarial Examples." />
<script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
</head>
<body>
<div class="container banner-container">
<div style="padding: 50px 0 0 0;">
<h2 class="text-center"><b>AttackBench</b> Evaluating Gradient-based Attacks for Adversarial Examples</h2>
<br>
<div class="text-center">
<!-- <img src="assets/fig_radar.svg" alt="Machiavelli" width="50%"/>-->
</div>
<br>
<div class="buttons" style="margin-bottom: 8px; text-align: center;">
<a class="btn btn-primary" role="button" href="https://arxiv.org/pdf/2404.19460">
<svg style="width:24px;height:24px;margin-left:-12px;margin-right:12px" viewBox="0 0 24 24">
<path fill="currentColor" d="M16 0H8C6.9 0 6 .9 6 2V18C6 19.1 6.9 20 8 20H20C21.1 20 22 19.1 22 18V6L16 0M20 18H8V2H15V7H20V18M4 4V22H20V24H4C2.9 24 2 23.1 2 22V4H4M10 10V12H18V10H10M10 14V16H15V14H10Z"></path>
</svg>Paper
</a>
<a class="btn btn-primary" role="button" href="https://github.com/attackbench/attackbench">
<svg style="width:24px;height:24px;margin-left:-12px;margin-right:12px" width="24px" height="24px" class="svg-inline--fa fa-github fa-w-16" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" data-fa-i2svg="">
<path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
</svg>Code
</a>
<!--
<a class="btn btn-primary" role="button" href="#" target=”_blank”>
<svg class="svg-inline--fa fa-images fa-w-18" aria-hidden="true" focusable="false" data-prefix="far" data-icon="images" role="img" xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px;margin-left:-12px;margin-right:12px" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M480 416v16c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V176c0-26.51 21.49-48 48-48h16v48H54a6 6 0 0 0-6 6v244a6 6 0 0 0 6 6h372a6 6 0 0 0 6-6v-10h48zm42-336H150a6 6 0 0 0-6 6v244a6 6 0 0 0 6 6h372a6 6 0 0 0 6-6V86a6 6 0 0 0-6-6zm6-48c26.51 0 48 21.49 48 48v256c0 26.51-21.49 48-48 48H144c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h384zM264 144c0 22.091-17.909 40-40 40s-40-17.909-40-40 17.909-40 40-40 40 17.909 40 40zm-72 96l39.515-39.515c4.686-4.686 12.284-4.686 16.971 0L288 240l103.515-103.515c4.686-4.686 12.284-4.686 16.971 0L480 208v80H192v-48z"></path></svg>
Slides
</a>
<a class="btn btn-primary" role="button" href="#" target=”_blank”>
<svg class="svg-inline--fa fa-youtube fa-w-18" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" role="img" xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px;margin-left:-12px;margin-right:12px" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg>
Video
</a>
-->
<div>
<a class="btn is-dark" role="button" href="#cifar-benchmark-section">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" focusable="false" data-prefix="fab" fill="currentColor" class="bi bi-table" viewBox="0 0 24 24" style="width:24px;height:24px;margin-left:-12px;margin-right:12px" data-fa-i2svg="">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z"></path>
</svg>
Leaderboard CIFAR-10
</a>
<a class="btn is-dark" role="button" href="#imagenet-benchmark-section">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" focusable="false" data-prefix="fab" fill="currentColor" class="bi bi-table" viewBox="0 0 24 24" style="width:24px;height:24px;margin-left:-12px;margin-right:12px" data-fa-i2svg="">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z"></path>
</svg>
Leaderboard ImageNet
</a>
</div>
</div>
</div>
</div>
<div class="outer-container">
<div class="container-xl main-container">
<!--
<div class="row">
<div class="col-md-12" style="text-align: center">
<p class="stat">Abstract</p>
<p>
Adversarial examples are typically optimized with gradient-based attacks. While novel attacks are continuously proposed, each is shown to outperform its predecessors using different experimental setups, hyperparameter settings, and number of forward and backward calls to the target models. This provides overly-optimistic and even biased evaluations that may unfairly favor one particular attack over the others.
In this work, we aim to overcome these limitations by proposing AttackBench, i.e., the first evaluation framework that enables a fair comparison among different attacks. To this end, we first propose a categorization of gradient-based attacks, identifying their main components and differences.
We then introduce our framework, which evaluates their effectiveness and efficiency. We measure these characteristics by (i) defining an <code>optimality</code> metric that quantifies how close an attack is to the optimal solution, and (ii) limiting the number of forward and backward queries to the model, such that all attacks are compared within a given maximum query budget.
Our extensive experimental analysis compares more than <b>100</b> attack implementations with a total of over <b>800</b> different configurations against CIFAR-10 and ImageNet models, highlighting that only very few attacks outperform all the competing approaches.
Within this analysis, we shed light on several implementation issues that prevent many attacks from finding better solutions or running at all. We release <code>AttackBench</code> as a publicly-available benchmark, aiming to continuously update it to include and evaluate novel gradient-based attacks for optimizing adversarial examples.
</p>
</div>
</div>
<br>
-->
<!-- SECTION ---------------------------------------------------------------------- -->
<h2>AttackBench</h2>
<div class="row">
<div class="col-md-12">
<p>
The <code>AttackBench</code> framework wants to fairly compare gradient-based attacks based on their robustness evaluation curves. To this end, we derive a process involving five distinct stages, as depicted below.
<ul>
<li>
In stage (1), we construct a list of diverse non-robust and robust models to assess the attacks' impact on various settings, thus testing their adaptability to diverse defensive strategies.
</li>
<li>
In stage (2), we define an environment for testing gradient-based attacks under a systematic and reproducible protocol. Specifically, <code>AttackBench</code> limits the number of forward and backward queries to the model, such that all attacks are compared within a given maximum query budget.
This step provides common ground with shared assumptions, advantages, and limitations.
We then run the attacks against the selected models individually and collect the performance metrics of interest in our analysis, which are perturbation size, execution time, and query usage.
</li>
<li>
In stage (3), we gather all the previously-obtained results, comparing attacks with the novel <code>local optimality</code> metric that quantifies how close an attack is to the optimal solution.
</li>
<li>
Finally, in stage (4), we aggregate the optimality results from all considered models, and in stage (5) we rank the attacks based on their average optimality, namely <code>global optimality</code>.
</li>
</ul>
</p>
</div>
</div>
<div class="row captioned_img">
<div class="col-md-12">
<br>
<img src="assets/AtkBench.svg" alt="AttackBench" width="100%"/>
<div class="caption">A comprehensive overview of the five stages of <code>AttackBench</code>. Each attack is tested in fair conditions, and then it is ranked through the optimality metric. The best attack is the one that produces the higher numbers of minimally-perturbed adversarial examples with fewer queries and less time.</div>
</div>
</div>
<hr class="divider" />
<!-- SECTION ---------------------------------------------------------------------- -->
<h2>Experimental coverage</h2>
<div class="row" style="text-align: center;">
<div class="col-md-4">
<p class="stat">2</p>
<p class="statlabel">Datasets</p>
</div>
<div class="col-md-4">
<p class="stat">9</p>
<p class="statlabel">Models</p>
</div>
<div class="col-md-4">
<p class="stat">6</p>
<p class="statlabel">Libraries</p>
</div>
</div>
<div class="row" style="text-align: center;">
<div class="col-md-4">
<p class="stat">20</p>
<p class="statlabel">Distinct Attacks</p>
</div>
<div class="col-md-4">
<p class="stat">102</p>
<p class="statlabel">Implementations</p>
</div>
<div class="col-md-4">
<p class="stat">815</p>
<p class="statlabel">Comparisons</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
We perform an extensive experimental analysis that compares 20 attacks (listed below), retrieving their original implementation and collecting the other implementations available among popular adversarial attack libraries.
We empirically test a total of 102 techniques, re-evaluating them in terms of their runtime, success rate and perturbation distance, as well as with our newly introduced <code>optimality</code> metrics.
While implementing <code>AttackBench</code>, we collected additional insights, including sub-optimal implementations, attacks returning incorrect results, and errors in the source code that prevent attacks from concluding their runs correctly.
These additional insights could lead to a complete re-evaluation of the State of the Art, as incorrect evaluations might have impacted and inflated results in published work.
</p>
</div>
</div>
<div class="row">
<div class="col-md-12" id="attacks-table"></div>
</div>
<hr class="divider" />
<div class="row">
<h2><a id="cifar-benchmark-section">AttackBench CIFAR-10</a></h2>
<div class="col-md-12" id="cifar-benchmark-table"></div>
</div>
<hr class="divider" />
<div class="row">
<h2><a id="imagenet-benchmark-section">AttackBench ImageNet</h2>
<div class="col-md-12" id="imagenet-benchmark-table"></div>
</div>
<hr class="divider" />
<div class="row">
<div class="col-md-12">
<h2><a href="#collapseGraph" data-toggle="collapse" aria-expanded="false" aria-controls="collapseGraph" class="toggle" style="color: black; margin-left: -20px;" >
Robustness Evaluation Curves
<span class="toggle-arrow">›</span>
</a></h2>
</div>
</div>
<div class="row collapse" id="collapseGraph">
<div class="col-md-12">
<div class="d-inline-block" style="text-align: left; margin-top: 30px;">
<div class="dropdown d-inline-block">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownDatasetButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-right: 30px;">
Select Dataset
</button>
<div class="dropdown-menu" aria-labelledby="dropdownDatasetButton">
<a class="dropdown-item" data-dataset="cifar10">CIFAR-10</a>
<a class="dropdown-item" data-dataset="imagenet">ImageNet</a>
</div>
</div>
<div class="dropdown d-inline-block">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownModelButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Model
</button>
<div class="dropdown-menu" id="dropdownModelMenu" aria-labelledby="dropdownModelButton">
<!-- Model options will be populated dynamically -->
</div>
</div>
</div>
<div id="graph" style="display: flex; justify-content: left; align-items: left; width: 100%; padding: 0; margin: 0; box-sizing: border-box; border: 0px solid #ccc;"></div>
</div>
</div>
<hr class="divider" />
<h2>Authors</h2>
<br>
<div class="row authors">
<div class="col-sm-3">
<h5 class="text-center"><a class="text-center" href="https://rubrica.unige.it/personale/UkJOXVpo">Antonio Emanuele Cinà*</a></h5>
<div class="text-center">University of Genoa</div>
</div>
<div class="col-sm-3">
<h5 class="text-center"><a class="text-center" href="https://github.com/jeromerony">Jérôme Rony*</a></h5>
<div class="text-center">ÉTS Montréal</div>
</div>
<div class="col-sm-3">
<h5 class="text-center"><a class="text-center" href="https://maurapintor.github.io">Maura Pintor</a></h5>
<div class="text-center">University of Cagliari</div>
</div>
<div class="col-sm-3">
<h5 class="text-center"><a class="text-center" href="https://rubrica.unige.it/personale/VkRBWF1p">Luca Demetrio</a></h5>
<div class="text-center">University of Genoa</div>
</div>
</div>
<div class="row authors">
<div class="col-sm-3">
<h5 class="text-center"><a class="text-center" href="https://web.unica.it/unica/page/it/ambra_demontis">Ambra Demontis</a></h5>
<div class="text-center">University of Cagliari</div>
</div>
<div class="col-sm-3">
<h5 class="text-center"><a class="text-center" href="https://battistabiggio.github.io">Battista Biggio</a></h5>
<div class="text-center">University of Cagliari</div>
</div>
<div class="col-sm-3">
<h5 class="text-center"><a class="text-center" href="https://profs.etsmtl.ca/ibenayed/">Ismail Ben Ayed</a></h5>
<div class="text-center">ÉTS Montréal</div>
</div>
<div class="col-sm-3">
<h5 class="text-center"><a href="https://rubrica.unige.it/personale/U0tGWFhp">Fabio Roli</a></h5>
<div class="text-center">University of Genoa</div>
</div>
<div class="col-sm-12 text-center">
<p>* Equal contribution</p>
</div>
</div>
<hr class="divider" />
<!-- SECTION ---------------------------------------------------------------------- -->
<h2>Citation</h2>
<br>
<div class="row">
<div class="col-md-12">
<code>
@inproceedings{cina2024attackbench,<br>
author = {Cin{\`a}, A. E. and Rony, J. and Pintor, M. and Demetrio, L. and Demontis, A. and Biggio, B. and Ayed, I. B. and Roli, F.},<br>
title = {AttackBench: Evaluating Gradient-based Attacks for Adversarial Examples},<br>
booktitle={AAAI Conference on Artificial Intelligence},<br>
year = {2025},<br>
}
</code>
</div>
</div>
<hr class="divider" />
<!-- SECTION ---------------------------------------------------------------------- -->
<h3>Acknowledgments</h3>
<br>
<div class="row">
<div class="col-md-12">
<p>
<code>AttackBench</code> has been partially supported by the <a href="https://www.centronazionalemost.it/eg/">EU—NGEU National Sustainable Mobility Center</a> (CN00000023), Italian Ministry of University and Research Decree n. 1033—17/06/2022 (Spoke 10);
the project <a href="https://www.sec4ai4sec-project.eu">Sec4AI4Sec</a>, under the EU’s Horizon Europe Research and Innovation Programme (grant agreement no. 101120393);
the project <a href="https://elsa-ai.eu">ELSA</a>, under the EU’s Horizon Europe Research and Innovation Programme (grant agreement no. 101070617);
and projects <a href="https://serics.eu">SERICS</a> (PE00000014) and <a href="https://fondazione-fair.it">FAIR</a> (PE0000013) under the MUR NRRP funded by the EU—NGEU.
</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container container-xl main-container">
<div class="text-center">
This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative
Commons Attribution-ShareAlike 4.0 International License</a>.
</div>
<div>Parts of this project page were adopted from the <a href="https://aypan17.github.io/machiavelli/">Macchiavelli</a> page.</div>
</div>
</footer>
<!--<script src="/assets/js/scripts.js"></script>-->+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
processEscapes: true
}
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML.js"></script>
<script>
$(function(){
$("#attacks-table").load("html/attacks.html", function() {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
});
$("#cifar-benchmark-table").load("html/cifar-benchmark.html", function() {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
});
$("#imagenet-benchmark-table").load("html/imagenet-benchmark.html", function() {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
});
// Event listener per il dropdown dei dataset
$(document).on('click', '.dropdown-item[data-dataset]', function() {
const selectedDataset = $(this).data('dataset');
$('#dropdownDatasetButton').text('Select Dataset: ' + $(this).text());
updateModelDropdown(selectedDataset);
$('#graph').empty(); // Svuota il grafico quando si cambia dataset
$('#dropdownModelButton').text('Select Model'); // Resetta il testo del pulsante del modello
});
// Event listener per il dropdown dei modelli
$(document).on('click', '.dropdown-item[data-file]', function() {
const selectedFile = $(this).data('file');
const $div = $('#graph');
if ($div.length && selectedFile) {
$div.empty(); // Rimuove il contenuto precedente
$div.load(selectedFile, function() {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
});
$('#dropdownModelButton').text('Select Model: ' + $(this).text()); // Aggiorna il testo del bottone
} else {
$div.empty();
}
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
});
// Aggiunge il comportamento della freccia dinamica
$('#collapseGraph').on('show.bs.collapse', function () {
$('.toggle-arrow').css('transform', 'rotate(270deg)');
});
$('#collapseGraph').on('hide.bs.collapse', function () {
$('.toggle-arrow').css('transform', 'rotate(90deg)');
});
});
const models = {
cifar10: [
{ name: 'standard', file: 'html/plot/cifar10/standard.html' },
{ name: 'wang_2023_small', file: 'html/plot/cifar10/wang_2023_small.html' },
{ name: 'stutz_2020', file: 'html/plot/cifar10/stutz_2020.html' },
{ name: 'xiao_2020', file: 'html/plot/cifar10/xiao_2020.html' },
{ name: 'zhang_2020_small', file: 'html/plot/cifar10/zhang_2020_small.html' }
],
imagenet: [
{ name: 'standard', file: 'html/plot/imagenet/standard_imagenet.html' },
{ name: 'salman_2020', file: 'html/plot/imagenet/salman_2020.html' },
{ name: 'wong_2020', file: 'html/plot/imagenet/wong_2020.html' }
]
};
function updateModelDropdown(dataset) {
const $dropdownModelMenu = $('#dropdownModelMenu');
$dropdownModelMenu.empty();
models[dataset].forEach(model => {
$dropdownModelMenu.append(`<a class="dropdown-item" data-file="${model.file}">${model.name}</a>`);
});
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<!-- Import the component -->
</body>
</html>