Hugging Face's logo

Spaces:
Coffee-Gym
/
Project-Coffee-Gym
Running

App Files Community
Coffee-Gym commited on
Commit
da72379
·
verified ·
1 Parent(s): 63e23ba

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +1750 -289
index.html CHANGED
@@ -1,72 +1,91 @@
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
 
 
 
 
 
 
 
 
 
4
  <meta charset="utf-8">
5
  <meta name="description"
6
- content="Deformable Neural Radiance Fields creates free-viewpoint portraits (nerfies) from casually captured videos.">
7
- <meta name="keywords" content="Nerfies, D-NeRF, NeRF">
8
  <meta name="viewport" content="width=device-width, initial-scale=1">
9
- <title>Nerfies: Deformable Neural Radiance Fields</title>
 
 
10
 
11
- <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro"
12
- rel="stylesheet">
13
 
14
  <link rel="stylesheet" href="./static/css/bulma.min.css">
15
  <link rel="stylesheet" href="./static/css/bulma-carousel.min.css">
16
  <link rel="stylesheet" href="./static/css/bulma-slider.min.css">
17
  <link rel="stylesheet" href="./static/css/fontawesome.all.min.css">
18
- <link rel="stylesheet"
19
- href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
20
  <link rel="stylesheet" href="./static/css/index.css">
21
- <link rel="icon" href="./static/images/favicon.svg">
 
 
22
 
23
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
24
  <script defer src="./static/js/fontawesome.all.min.js"></script>
25
  <script src="./static/js/bulma-carousel.min.js"></script>
26
  <script src="./static/js/bulma-slider.min.js"></script>
27
  <script src="./static/js/index.js"></script>
 
 
 
 
28
  </head>
 
 
 
 
 
 
 
 
 
29
  <body>
30
 
 
 
 
31
  <section class="hero">
32
  <div class="hero-body">
33
  <div class="container is-max-desktop">
34
  <div class="columns is-centered">
35
  <div class="column has-text-centered">
36
- <h1 class="title is-1 publication-title">Nerfies: Deformable Neural Radiance Fields</h1>
37
- <div class="is-size-5 publication-authors">
38
- <span class="author-block">
39
- <a href="https://keunhong.com" target="_blank">Keunhong Park</a><sup>1</sup>,</span>
40
- <span class="author-block">
41
- <a href="https://utkarshsinha.com" target="_blank">Utkarsh Sinha</a><sup>2</sup>,</span>
42
- <span class="author-block">
43
- <a href="https://jonbarron.info" target="_blank">Jonathan T. Barron</a><sup>2</sup>,
44
- </span>
45
- <span class="author-block">
46
- <a href="http://sofienbouaziz.com" target="_blank">Sofien Bouaziz</a><sup>2</sup>,
47
- </span>
48
- <span class="author-block">
49
- <a href="https://www.danbgoldman.com" target="_blank">Dan B Goldman</a><sup>2</sup>,
50
- </span>
51
- <span class="author-block">
52
- <a href="https://homes.cs.washington.edu/~seitz/" target="_blank">Steven M. Seitz</a><sup>1,2</sup>,
53
- </span>
54
- <span class="author-block">
55
- <a href="http://www.ricardomartinbrualla.com" target="_blank">Ricardo Martin-Brualla</a><sup>2</sup>
56
- </span>
57
- </div>
58
 
59
- <div class="is-size-5 publication-authors">
60
- <span class="author-block"><sup>1</sup>University of Washington,</span>
61
- <span class="author-block"><sup>2</sup>Google Research</span>
62
- </div>
 
 
 
 
 
63
 
 
64
  <div class="column has-text-centered">
65
  <div class="publication-links">
66
  <!-- PDF Link. -->
67
  <span class="link-block">
68
- <a href="https://arxiv.org/pdf/2011.12948" target="_blank"
69
- class="external-link button is-normal is-rounded is-dark">
 
70
  <span class="icon">
71
  <i class="fas fa-file-pdf"></i>
72
  </span>
@@ -74,28 +93,26 @@
74
  </a>
75
  </span>
76
  <span class="link-block">
77
- <a href="https://arxiv.org/abs/2011.12948" target="_blank"
78
- class="external-link button is-normal is-rounded is-dark">
79
  <span class="icon">
80
- <i class="ai ai-arxiv"></i>
81
  </span>
82
- <span>arXiv</span>
83
  </a>
84
  </span>
85
- <!-- Video Link. -->
86
  <span class="link-block">
87
- <a href="https://www.youtube.com/watch?v=MrKrnHhk8IA" target="_blank"
88
- class="external-link button is-normal is-rounded is-dark">
89
  <span class="icon">
90
- <i class="fab fa-youtube"></i>
91
  </span>
92
- <span>Video</span>
93
  </a>
94
  </span>
95
- <!-- Code Link. -->
96
  <span class="link-block">
97
- <a href="https://github.com/google/nerfies" target="_blank"
98
- class="external-link button is-normal is-rounded is-dark">
99
  <span class="icon">
100
  <i class="fab fa-github"></i>
101
  </span>
@@ -104,13 +121,44 @@
104
  </span>
105
  <!-- Dataset Link. -->
106
  <span class="link-block">
107
- <a href="https://github.com/google/nerfies/releases/tag/0.1" target="_blank"
108
- class="external-link button is-normal is-rounded is-dark">
109
  <span class="icon">
110
- <i class="far fa-images"></i>
 
 
111
  </span>
112
- <span>Data</span>
113
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
114
  </div>
115
 
116
  </div>
@@ -119,317 +167,1730 @@
119
  </div>
120
  </div>
121
  </section>
122
-
 
 
 
 
 
 
 
123
  <section class="hero teaser">
124
  <div class="container is-max-desktop">
125
- <div class="hero-body">
126
- <video id="teaser" autoplay muted loop playsinline height="100%">
127
- <source src="./static/videos/teaser.mp4"
128
- type="video/mp4">
129
- </video>
130
- <h2 class="subtitle has-text-centered">
131
- <span class="dnerf">Nerfies</span> turns selfie videos from your phone into
132
- free-viewpoint
133
- portraits.
134
- </h2>
135
- </div>
136
- </div>
137
- </section>
138
-
139
-
140
- <section class="hero is-light is-small">
141
- <div class="hero-body">
142
- <div class="container">
143
- <div id="results-carousel" class="carousel results-carousel">
144
- <div class="item item-steve">
145
- <video poster="" id="steve" autoplay controls muted loop playsinline height="100%">
146
- <source src="./static/videos/steve.mp4"
147
- type="video/mp4">
148
- </video>
149
- </div>
150
- <div class="item item-chair-tp">
151
- <video poster="" id="chair-tp" autoplay controls muted loop playsinline height="100%">
152
- <source src="./static/videos/chair-tp.mp4"
153
- type="video/mp4">
154
- </video>
155
- </div>
156
- <div class="item item-shiba">
157
- <video poster="" id="shiba" autoplay controls muted loop playsinline height="100%">
158
- <source src="./static/videos/shiba.mp4"
159
- type="video/mp4">
160
- </video>
161
- </div>
162
- <div class="item item-fullbody">
163
- <video poster="" id="fullbody" autoplay controls muted loop playsinline height="100%">
164
- <source src="./static/videos/fullbody.mp4"
165
- type="video/mp4">
166
- </video>
167
- </div>
168
- <div class="item item-blueshirt">
169
- <video poster="" id="blueshirt" autoplay controls muted loop playsinline height="100%">
170
- <source src="./static/videos/blueshirt.mp4"
171
- type="video/mp4">
172
- </video>
173
- </div>
174
- <div class="item item-mask">
175
- <video poster="" id="mask" autoplay controls muted loop playsinline height="100%">
176
- <source src="./static/videos/mask.mp4"
177
- type="video/mp4">
178
- </video>
179
- </div>
180
- <div class="item item-coffee">
181
- <video poster="" id="coffee" autoplay controls muted loop playsinline height="100%">
182
- <source src="./static/videos/coffee.mp4"
183
- type="video/mp4">
184
- </video>
185
- </div>
186
- <div class="item item-toby">
187
- <video poster="" id="toby" autoplay controls muted loop playsinline height="100%">
188
- <source src="./static/videos/toby2.mp4"
189
- type="video/mp4">
190
- </video>
191
  </div>
192
- </div>
193
  </div>
194
  </div>
195
  </section>
196
 
197
-
198
  <section class="section">
199
- <div class="container is-max-desktop">
200
  <!-- Abstract. -->
201
  <div class="columns is-centered has-text-centered">
202
  <div class="column is-four-fifths">
203
- <h2 class="title is-3">Abstract</h2>
204
  <div class="content has-text-justified">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
205
  <p>
206
- We present the first method capable of photorealistically reconstructing a non-rigidly
207
- deforming scene using photos/videos captured casually from mobile phones.
208
  </p>
209
  <p>
210
- Our approach augments neural radiance fields
211
- (NeRF) by optimizing an
212
- additional continuous volumetric deformation field that warps each observed point into a
213
- canonical 5D NeRF.
214
- We observe that these NeRF-like deformation fields are prone to local minima, and
215
- propose a coarse-to-fine optimization method for coordinate-based models that allows for
216
- more robust optimization.
217
- By adapting principles from geometry processing and physical simulation to NeRF-like
218
- models, we propose an elastic regularization of the deformation field that further
219
- improves robustness.
220
  </p>
221
  <p>
222
- We show that <span class="dnerf">Nerfies</span> can turn casually captured selfie
223
- photos/videos into deformable NeRF
224
- models that allow for photorealistic renderings of the subject from arbitrary
225
- viewpoints, which we dub <i>"nerfies"</i>. We evaluate our method by collecting data
226
- using a
227
- rig with two mobile phones that take time-synchronized photos, yielding train/validation
228
- images of the same pose at different viewpoints. We show that our method faithfully
229
- reconstructs non-rigidly deforming scenes and reproduces unseen views with high
230
- fidelity.
231
  </p>
232
  </div>
233
  </div>
234
  </div>
235
  <!--/ Abstract. -->
 
 
236
 
237
- <!-- Paper video. -->
238
- <div class="columns is-centered has-text-centered">
239
- <div class="column is-four-fifths">
240
- <h2 class="title is-3">Video</h2>
241
- <div class="publication-video">
242
- <iframe src="https://www.youtube.com/embed/MrKrnHhk8IA?rel=0&amp;showinfo=0"
243
- frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
244
- </div>
245
- </div>
246
- </div>
247
- <!--/ Paper video. -->
248
  </div>
249
  </section>
250
 
251
-
252
  <section class="section">
253
- <div class="container is-max-desktop">
254
-
255
- <div class="columns is-centered">
 
 
 
 
 
 
 
 
 
 
256
 
257
- <!-- Visual Effects. -->
258
- <div class="column">
259
- <div class="content">
260
- <h2 class="title is-3">Visual Effects</h2>
261
  <p>
262
- Using <i>nerfies</i> you can create fun visual effects. This Dolly zoom effect
263
- would be impossible without nerfies since it would require going through a wall.
264
  </p>
265
- <video id="dollyzoom" autoplay controls muted loop playsinline height="100%">
266
- <source src="./static/videos/dollyzoom-stacked.mp4"
267
- type="video/mp4">
268
- </video>
269
  </div>
270
- </div>
271
- <!--/ Visual Effects. -->
272
-
273
- <!-- Matting. -->
274
- <div class="column">
275
- <h2 class="title is-3">Matting</h2>
276
- <div class="columns is-centered">
277
- <div class="column content">
278
- <p>
279
- As a byproduct of our method, we can also solve the matting problem by ignoring
280
- samples that fall outside of a bounding box during rendering.
281
- </p>
282
- <video id="matting-video" controls playsinline height="100%">
283
- <source src="./static/videos/matting.mp4"
284
- type="video/mp4">
285
- </video>
286
- </div>
287
 
288
- </div>
289
- </div>
290
  </div>
291
- <!--/ Matting. -->
292
 
293
- <!-- Animation. -->
294
- <div class="columns is-centered">
295
- <div class="column is-full-width">
296
- <h2 class="title is-3">Animation</h2>
297
 
298
- <!-- Interpolating. -->
299
- <h3 class="title is-4">Interpolating states</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
300
  <div class="content has-text-justified">
301
  <p>
302
- We can also animate the scene by interpolating the deformation latent codes of two input
303
- frames. Use the slider here to linearly interpolate between the left frame and the right
304
- frame.
305
  </p>
306
- </div>
307
- <div class="columns is-vcentered interpolation-panel">
308
- <div class="column is-3 has-text-centered">
309
- <img src="./static/images/interpolate_start.jpg"
310
- class="interpolation-image"
311
- alt="Interpolate start reference image."/>
312
- <p>Start Frame</p>
313
- </div>
314
- <div class="column interpolation-video-column">
315
- <div id="interpolation-image-wrapper">
316
- Loading...
317
- </div>
318
- <input class="slider is-fullwidth is-large is-info"
319
- id="interpolation-slider"
320
- step="1" min="0" max="100" value="0" type="range">
321
  </div>
322
- <div class="column is-3 has-text-centered">
323
- <img src="./static/images/interpolate_end.jpg"
324
- class="interpolation-image"
325
- alt="Interpolation end reference image."/>
326
- <p class="is-bold">End Frame</p>
327
- </div>
328
- </div>
329
- <br/>
330
- <!--/ Interpolating. -->
331
-
332
- <!-- Re-rendering. -->
333
- <h3 class="title is-4">Re-rendering the input video</h3>
334
- <div class="content has-text-justified">
335
  <p>
336
- Using <span class="dnerf">Nerfies</span>, you can re-render a video from a novel
337
- viewpoint such as a stabilized camera by playing back the training deformations.
338
  </p>
339
  </div>
340
- <div class="content has-text-centered">
341
- <video id="replay-video"
342
- controls
343
- muted
344
- preload
345
- playsinline
346
- width="75%">
347
- <source src="./static/videos/replay.mp4"
348
- type="video/mp4">
349
- </video>
 
 
350
  </div>
351
- <!--/ Re-rendering. -->
352
 
353
- </div>
354
  </div>
355
- <!--/ Animation. -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
356
 
 
 
 
 
 
357
 
358
- <!-- Concurrent Work. -->
359
- <div class="columns is-centered">
360
- <div class="column is-full-width">
361
- <h2 class="title is-3">Related Links</h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
362
 
363
  <div class="content has-text-justified">
364
- <p>
365
- There's a lot of excellent work that was introduced around the same time as ours.
366
- </p>
367
- <p>
368
- <a href="https://arxiv.org/abs/2104.09125" target="_blank">Progressive Encoding for Neural Optimization</a> introduces an idea similar to our windowed position encoding for coarse-to-fine optimization.
369
- </p>
370
- <p>
371
- <a href="https://www.albertpumarola.com/research/D-NeRF/index.html" target="_blank">D-NeRF</a> and <a href="https://gvv.mpi-inf.mpg.de/projects/nonrigid_nerf/" target="_blank">NR-NeRF</a>
372
- both use deformation fields to model non-rigid scenes.
373
- </p>
374
- <p>
375
- Some works model videos with a NeRF by directly modulating the density, such as <a href="https://video-nerf.github.io/" target="_blank">Video-NeRF</a>, <a href="https://www.cs.cornell.edu/~zl548/NSFF/" target="_blank">NSFF</a>, and <a href="https://neural-3d-video.github.io/" target="_blank">DyNeRF</a>
376
- </p>
377
- <p>
378
- There are probably many more by the time you are reading this. Check out <a href="https://dellaert.github.io/NeRF/" target="_blank">Frank Dellart's survey on recent NeRF papers</a>, and <a href="https://github.com/yenchenlin/awesome-NeRF" target="_blank">Yen-Chen Lin's curated list of NeRF papers</a>.
379
- </p>
380
  </div>
381
  </div>
382
  </div>
383
- <!--/ Concurrent Work. -->
384
 
385
  </div>
386
  </section>
387
 
388
 
 
 
389
  <section class="section" id="BibTeX">
390
  <div class="container is-max-desktop content">
391
- <h2 class="title">BibTeX</h2>
392
- <pre><code>@article{park2021nerfies,
393
- author = {Park, Keunhong and Sinha, Utkarsh and Barron, Jonathan T. and Bouaziz, Sofien and Goldman, Dan B and Seitz, Steven M. and Martin-Brualla, Ricardo},
394
- title = {Nerfies: Deformable Neural Radiance Fields},
395
- journal = {ICCV},
396
- year = {2021},
397
- }</code></pre>
 
 
398
  </div>
399
  </section>
400
 
401
-
402
  <footer class="footer">
403
- <div class="container">
404
  <div class="content has-text-centered">
405
- <a class="icon-link" target="_blank"
406
- href="./static/videos/nerfies_paper.pdf">
407
- <i class="fas fa-file-pdf"></i>
408
- </a>
409
- <a class="icon-link" href="https://github.com/keunhong" target="_blank" class="external-link" disabled>
410
- <i class="fab fa-github"></i>
411
- </a>
412
  </div>
413
  <div class="columns is-centered">
414
  <div class="column is-8">
415
  <div class="content">
416
  <p>
417
- This website is licensed under a <a rel="license" target="_blank"
418
  href="http://creativecommons.org/licenses/by-sa/4.0/">Creative
419
  Commons Attribution-ShareAlike 4.0 International License</a>.
420
  </p>
421
- <p>
422
- This means you are free to borrow the <a target="_blank"
423
- href="https://github.com/nerfies/nerfies.github.io">source code</a> of this website,
424
- we just ask that you link back to this page in the footer.
425
- Please remember to remove the analytics code included in the header of the website which
426
- you do not want on your website.
427
- </p>
428
  </div>
429
  </div>
430
  </div>
431
- </div>
 
432
  </footer>
433
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
434
  </body>
435
- </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <title>Coffee: Boost Your Code LLMs by Fixing Bugs with Feedback</title>
5
+ <style>
6
+ .hidden {
7
+ display: none;
8
+ }
9
+
10
+ </style>
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ <script src="https://kit.fontawesome.com/f8ddf9854a.js" crossorigin="anonymous"></script>
13
  <meta charset="utf-8">
14
  <meta name="description"
15
+ content="COFFEE-GYM: An Environment for Evaluating and ImprovingNatural Language Feedback on Erroneous Code">
16
+ <meta name="keywords" content="Code LLM, Bug Fixing, RL">
17
  <meta name="viewport" content="width=device-width, initial-scale=1">
18
+ <title>COFFEE-GYM: An Environment for Evaluating and ImprovingNatural Language Feedback on Erroneous Code</title>
19
+
20
+ <link rel="icon" href="./static/images/coffee_emoji.png">
21
 
22
+ <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" rel="stylesheet">
 
23
 
24
  <link rel="stylesheet" href="./static/css/bulma.min.css">
25
  <link rel="stylesheet" href="./static/css/bulma-carousel.min.css">
26
  <link rel="stylesheet" href="./static/css/bulma-slider.min.css">
27
  <link rel="stylesheet" href="./static/css/fontawesome.all.min.css">
28
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
 
29
  <link rel="stylesheet" href="./static/css/index.css">
30
+ <link rel="stylesheet" href="./static/css/leaderboard.css">
31
+
32
+ <script type="text/javascript" src="static/js/sort-table.js" defer></script>
33
 
34
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
35
  <script defer src="./static/js/fontawesome.all.min.js"></script>
36
  <script src="./static/js/bulma-carousel.min.js"></script>
37
  <script src="./static/js/bulma-slider.min.js"></script>
38
  <script src="./static/js/index.js"></script>
39
+ <script src="./static/js/question_card.js"></script>
40
+ <script src="./data/results/data_setting.js" defer></script>
41
+ <script src="./data/results/model_scores.js" defer></script>
42
+ <script src="./visualizer/data/data_public.js" defer></script>
43
  </head>
44
+ <!-- Google tag (gtag.js) -->
45
+ <script async src="https://www.googletagmanager.com/gtag/js?id=G-PBF77LE136"></script>
46
+ <script>
47
+ window.dataLayer = window.dataLayer || [];
48
+ function gtag(){dataLayer.push(arguments);}
49
+ gtag('js', new Date());
50
+
51
+ gtag('config', 'G-PBF77LE136');
52
+ </script>
53
  <body>
54
 
55
+
56
+
57
+
58
  <section class="hero">
59
  <div class="hero-body">
60
  <div class="container is-max-desktop">
61
  <div class="columns is-centered">
62
  <div class="column has-text-centered">
63
+ <h1 class="title is-1 publication-title is-bold">
64
+ <img src="static/images/coffee_emoji.png" style="width:1em;vertical-align: middle" alt="Logo"/>
65
+ <span class="opencodeinterpreter" style="vertical-align: middle">Coffee</span>
66
+ </h1>
67
+ <h2 class="subtitle is-3 publication-subtitle">
68
+ Boost Your Code LLMs by Fixing Bugs with Feedback
69
+ </h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70
 
71
+
72
+ <br>
73
+ <h3>
74
+ Note that this project page is fully anonymized. Some links might not be available due to anonymization.
75
+ </h3>
76
+
77
+
78
+ <br>
79
+
80
 
81
+ <!-- <div class="column has-text-centered" style="overflow-x: auto;"> -->
82
  <div class="column has-text-centered">
83
  <div class="publication-links">
84
  <!-- PDF Link. -->
85
  <span class="link-block">
86
+ <!-- @PAN TODO: change links -->
87
+ <a href="https://huggingface.co/spaces/Anonymous-COFFEE/Project-COFFEE/blob/main/static/ACL24__Code_Edit.pdf"
88
+ class="external-link button is-normal is-rounded is-dark" target="_blank">
89
  <span class="icon">
90
  <i class="fas fa-file-pdf"></i>
91
  </span>
 
93
  </a>
94
  </span>
95
  <span class="link-block">
96
+ <a href="https://huggingface.co/datasets/Anonymous-COFFEE/COFFEE-Dataset"
97
+ class="external-link button is-normal is-rounded is-dark" target="_blank">
98
  <span class="icon">
99
+ <p style="font-size:18px">🤗</p>
100
  </span>
101
+ <span>Datasets</span>
102
  </a>
103
  </span>
 
104
  <span class="link-block">
105
+ <a href="https://huggingface.co/collections/Anonymous-COFFEE/coffee-boost-your-code-llms-by-fixing-bugs-with-feedback-66239f4f67f263a09c0f8e1c"
106
+ class="external-link button is-normal is-rounded is-dark" target="_blank">
107
  <span class="icon">
108
+ <p style="font-size:18px">🤗</p>
109
  </span>
110
+ <span>Models</span>
111
  </a>
112
  </span>
 
113
  <span class="link-block">
114
+ <a href="https://anonymous.4open.science/r/COFFEE_official-83E6/README.md"
115
+ class="external-link button is-normal is-rounded is-dark" target="_blank">
116
  <span class="icon">
117
  <i class="fab fa-github"></i>
118
  </span>
 
121
  </span>
122
  <!-- Dataset Link. -->
123
  <span class="link-block">
124
+ <a href="https://huggingface.co/spaces/Anonymous-COFFEE/COFFEE-DEMO"
125
+ class="external-link button is-normal is-rounded is-dark" target="_blank">
126
  <span class="icon">
127
+ <!-- <i class="far fa-images"></i> -->
128
+ <p style="font-size:18px">🚀</p>
129
+ <!-- 🔗 -->
130
  </span>
131
+ <span>Demo</span>
132
+ </a>
133
+ </span>
134
+
135
+ </div>
136
+
137
+ <div class="links-row">
138
+ <span class="link-block">
139
+ <a href="#mainresults"
140
+ class="external-link button is-normal is-rounded is-dark">
141
+ <span class="icon has-text-white">
142
+ <i class="fa-solid fa-trophy"></i>
143
+ <!-- <p style="font-size:18px">🏆</p> -->
144
+ </span>
145
+ <span>Main Results</span>
146
+ </a>
147
+ </span>
148
+
149
+
150
+
151
+ <!-- EvalAI Link. -->
152
+ <span class="link-block">
153
+ <a href="#example"
154
+ class="external-link button is-normal is-rounded is-dark">
155
+ <span class="icon has-text-white">
156
+ <i class="fa-solid fa-book"></i>
157
+ </span>
158
+ <span>Example</span>
159
+ </a>
160
+ </span>
161
+
162
  </div>
163
 
164
  </div>
 
167
  </div>
168
  </div>
169
  </section>
170
+ <style>
171
+ .center {
172
+ display: block;
173
+ margin-left: auto;
174
+ margin-right: auto;
175
+ width: 80%;
176
+ }
177
+ </style>
178
  <section class="hero teaser">
179
  <div class="container is-max-desktop">
180
+ <div class="content has-text-centered">
181
+ <img src="static/images/figure1.svg" alt="geometric reasoning" width="95%"/>
182
+ <p> (Left) A motivating example of code editing with natural language feedback. With appropriate feedback, the editor model can produce a correct editing with the help of the feedback. (Right) By evaluating CoffeePots on HumanEvalFix, a benchmark that aims to assess code editing abilities, we show <b>our approach outperforms GPT-4</b>. </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
183
  </div>
184
+ <!-- </div> -->
185
  </div>
186
  </div>
187
  </section>
188
 
 
189
  <section class="section">
190
+ <div class="container" style="margin-bottom: 2vh;">
191
  <!-- Abstract. -->
192
  <div class="columns is-centered has-text-centered">
193
  <div class="column is-four-fifths">
194
+ <h2 class="title is-3">🔔News</h2>
195
  <div class="content has-text-justified">
196
+
197
+
198
+ <p>
199
+ <b>
200
+ ♻ [2024-02-21]: We have updated our paper and released the second version of our draft on Arxiv!</b>
201
+ </b>
202
+ </p>
203
+ <p>
204
+ <b>
205
+ 🛎[2024-02-22]: We have made our code available on GitHub! Check out our <a href="https://anonymous.4open.science/r/COFFEE_official-83E6/README.md">Github repository</a> for more details.</b>
206
+ </b>
207
+ </p>
208
+ <p>
209
+ <b>✨[2023-12-24]: We have open-sourced the <a href="https://huggingface.co/Anonymous-COFFEE/COFFEEPOTS-critic">CoffeePots-Critic</a> Model.</b>
210
+ </p>
211
  <p>
212
+ <b>🍪[2023-12-24]: We have open-sourced the <a href="https://huggingface.co/Anonymous-COFFEE/COFFEEPOTS-editor">CoffeePots-Editor</a> Model.</b>
 
213
  </p>
214
  <p>
215
+ <b>📑[2023-11-19]: We have uploaded the first version of our preprint to arxiv <a href="https://huggingface.co/spaces/Anonymous-COFFEE/Project-COFFEE/blob/main/static/ACL24__Coffee.pdf">[Link to our paper]</a> </b>
 
 
 
 
 
 
 
 
 
216
  </p>
217
  <p>
218
+ <b>☕[2023-11-11]: We have open-sourced Coffee dataset used in our project named <a href="https://huggingface.co/datasets/Anonymous-COFFEE/COFFEE-Dataset">Coffee</a>.</b>
219
+ </p>
220
+ </div>
221
+ <h2 class="title is-3">Introduction</h2>
222
+ <div class="content has-text-justified">
223
+ <p>
224
+ This paper presents COFFEE-GYM, a comprehensive RL environment for training models that provide feedback on code editing. COFFEE-GYMincludes two major components: (1) COFFEE, a dataset containing humans' codeedit traces for coding questions and machine-written feedback for editing erroneous code; (2) COFFEEEVAL, a reward function that faithfullyreflects the helpfulness of feedback by assess-ing the performance of the revised code in unittests. With them, COFFEE-GYM addresses theunavailability of high-quality datasets for train-ing feedback models with RL, and providesmore accurate rewards than the SOTA rewardmodel (i.e., GPT-4). By applying COFFEE-GYM, we elicit feedback models that outper-form baselines in enhancing open-source code LLMs' code editing, making them comparablewith closed-source LLMs. We make the datasetand the model checkpoint publicly available
 
 
225
  </p>
226
  </div>
227
  </div>
228
  </div>
229
  <!--/ Abstract. -->
230
+ </div>
231
+ </section>
232
 
233
+ <!-- DATASET SECTION -->
234
+ <section class="hero is-light is-small">
235
+ <div class="hero-body has-text-centered">
236
+ <h1 class="title is-1 mmmu">
237
+ <img src="static/images/coffee_emoji.png" style="width:1em;vertical-align: middle" alt="Logo"/>
238
+ <span class="mmmu" style="vertical-align: middle">Coffee: dataset
239
+ for COde Fixing with FEEdback</span>
240
+ </h1>
 
 
 
241
  </div>
242
  </section>
243
 
244
+
245
  <section class="section">
246
+ <div class="container">
247
+ <div class="columns is-centered has-text-centered">
248
+ <!-- <div class="column is-full-width has-text-centered"> -->
249
+ <div class="column is-four-fifths">
250
+ <h2 class="title is-3">Overview</h2>
251
+ <div class="content has-text-centered">
252
+ <img src="static/images/coffee_example.svg" alt="algebraic reasoning" class="center" style="width:40%">
253
+ <p> An example instance from COFFEE dataset.</p>
254
+ </div>
255
+ <div class="content has-text-justified">
256
+ <p>
257
+ Recent large language models have demonstrated promising capabilities in correcting their codes based on natural language feedback. However, this ability is currently only applicable to open-source models (e.g., GPT-3.5-Turbo and GPT-4), and <b>not to closed-source models</b>. This poses a significant safety and privacy concern as the codes cannot be uploaded to any external servers (e.g., OpenAI API server).
258
+ </p>
259
 
 
 
 
 
260
  <p>
261
+ To this end, we introduce ☕COFFEE, a dataset for <b>code editing with feedback</b>.
262
+ Our dataset includes diverse solutions to programming problems collected from an online competitive programming platform. For each solution, we additionally annotate natural language feedback to provide detailed explanations for the errors towards correct edits, and augment synthetic test cases to measure the correctness of the edited solutions.
263
  </p>
 
 
 
 
264
  </div>
265
+ </div>
266
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
267
 
 
 
268
  </div>
 
269
 
 
 
 
 
270
 
271
+ </div>
272
+ </section>
273
+
274
+ <section class="hero is-light is-small">
275
+ <div class="hero-body has-text-centered">
276
+ <h1 class="title is-1 mmmu">
277
+ <img src="static/images/coffeepot_emoji.png" style="width:1em;vertical-align: middle" alt="Logo"/>
278
+ <span class="mmmu" style="vertical-align: middle"> COFFEEPOTS: Aligning Feedback
279
+ with Preferred Edits
280
+ </span>
281
+ </h1>
282
+ </div>
283
+ </section>
284
+ <section class="section">
285
+ <div class="container">
286
+ <div class="columns is-centered has-text-centered">
287
+ <!-- <div class="column is-full-width has-text-centered"> -->
288
+ <div class="column is-four-fifths">
289
+ <h2 class="title is-3">Is Training on COFFEE with Supervised Finetuning Enough?</h2>
290
+
291
+ <div class="container is-max-desktop">
292
+ <div class="content has-text-centered">
293
+ <img src="static/images/pass_ratio.svg" alt="algebraic reasoning" width="70%"/>
294
+ <p> Pass@1 results of code editing with SFT feedback on the test set of COFFEE compared with editing with ChatGPT feedback and editing without any feedback settings.</p>
295
+ </div>
296
+ <br/>
297
+ </div>
298
  <div class="content has-text-justified">
299
  <p>
300
+ <b><h5>No.</h5></b> As we show in the figure above, we find that training a critic model that generates natural language feedback on a given erroneous code with next token prediction obejct cannot produce any helpful deedback. Editing code with feedback from SFT critic shows performance even worse than direct editing (i.e., editing w/o feedback). We posit that learning to generate accurate feedback is a very challenging goal that cannot be achieved only with next-token prediction object.
 
 
301
  </p>
302
+ <br/>
303
+ <div class="content has-text-centered">
304
+ <img src="static/images/feedback_quality_analysis.svg" alt="algebraic reasoning" width="100%"/>
305
+ <p>Human evaluation on the quality of feedback from SFT critic. </p>
 
 
 
 
 
 
 
 
 
 
 
306
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
307
  <p>
308
+ Further analysis of the feedback quality suggests that the feedback from the SFT-trained critic has not yet reached a satisfactory level. It remains only as <b>'Partially Correct'</b> feedback, resulting the decreased performance in code editing as we show in the previous
309
+ analysis.
310
  </p>
311
  </div>
312
+
313
+ <br/>
314
+ <div class="content has-text-centered">
315
+ <img src="static/images/coffeepots.svg" alt="algebraic reasoning" width="100%"/>
316
+ <p>Overview of COFFEEPOTs. </p>
317
+ </div>
318
+
319
+ <div class="content has-text-justified">
320
+ <p>
321
+ To resolve the aforementioned issue, we introduce COFFEEPOTS, a framework for COde Fixing with FEEdback via Preference-Optimized Tuning and Selection. We first use our COFFEE dataset to train code LLMs via supervised fine-tuning (SFT) for feedback augmented code editing.
322
+ Then, we additionally <b>leverage synthetic test cases in COFFEE to annotate preferred (i.e., helpful) solutions and apply preference alignment </b>to guide the generation of helpful feedback.
323
+ </p>
324
  </div>
 
325
 
 
326
  </div>
327
+ </div>
328
+
329
+
330
+ </div>
331
+ </section>
332
+ <!-- RESULTS SECTION -->
333
+ <section class="hero is-light is-small">
334
+ <div class="hero-body has-text-centered">
335
+ <h1 class="title is-1 mmmu" id="mainresults">Main Results</h1>
336
+ </div>
337
+ </section>
338
+ <section class="section">
339
+ <div class="container">
340
+ <!-------------------------------------------------------------------- RESULTS SECTION -------------------------------------------------------------------->
341
+ <div class="columns is-centered m-6">
342
+ <div class="column is-full has-text-centered content">
343
+ <!-- <h2 class="title is-3" id="leaderboard"></h2> -->
344
+ <div class="content">
345
 
346
+ <div class="content has-text-centered">
347
+ <img src="static/images/main_table.svg" alt="algebraic reasoning" width="100%"/>
348
+ <p>Performances in editing machine-generated codes. We report pass@1 and ERR (in parentheses). We use
349
+ ChatGPT (the first row) to generate codes for problems from several benchmark datasets for code generation.</p>
350
+ </div>
351
 
352
+ <div class="content has-text-justified">
353
+ <p>
354
+ Table above reports the model performance in editing solutions generated from ChatGPT for problems in HumanEvalSynthesize, MBPP, and APPS. CoffeePots outperforms all open-source baselines, including Code Llama (13B), the previous SOTA among open-source code LLMs. Furthermore, CoffeePots shows better results than feedback-augmented Code Llama (13B), i.e., prompted with Self-Refine and Self-Debug, suggesting the effectiveness of our strategy on generating feedback.
355
+ In addition, while some open-source code LLMs show almost no improvement in MBPP and APPS (i.e., 0% ERR), CoffeePots shows moderate improvements on these benchmarks (i.e., up to 7.5% ERR).
356
+ Compared to closed-source baselines (i.e., ChatGPT), CoffeePots achieves competitive results particularly on HumanEvalSynthesize and MBPP, showing that our framework can serve as a strong alternative to closed-source LLMs while being publicly available and much smaller in size.
357
+ </p>
358
+ </div>
359
+
360
+ </div>
361
+ </div>
362
+ </div>
363
+ <!-------------------------------------------------------------------- Case Study-------------------------------------------------------------------->
364
+
365
+ <div class="columns is-centered has-text-centered">
366
+ <div class="column is-four-fifths">
367
+ <h2 class="title is-3" id="example">Example</h2>
368
+ <iframe
369
+ src="https://anonymous-coffee-coffee-demo.hf.space"
370
+ frameborder="0"
371
+ width="100%"
372
+ height="900"
373
+ ></iframe>
374
 
375
  <div class="content has-text-justified">
376
+ <div style="margin: 0 auto; display: flex; justify-content: center;">
377
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
378
  </div>
379
  </div>
380
  </div>
381
+
382
 
383
  </div>
384
  </section>
385
 
386
 
387
+
388
+ <!-- @PAN TODO: bibtex -->
389
  <section class="section" id="BibTeX">
390
  <div class="container is-max-desktop content">
391
+ <h2 class="title is-3 has-text-centered">BibTeX</h2>
392
+ <pre><code>
393
+ @article{Anonymized,
394
+ title={COFFEE-GYM: An Environment for Evaluating and ImprovingNatural Language Feedback on Erroneous Code},
395
+ author={Anonymized},
396
+ journal={Anonymized},
397
+ year={2024}
398
+ }
399
+ </code></pre>
400
  </div>
401
  </section>
402
 
 
403
  <footer class="footer">
404
+ <!-- <div class="container"> -->
405
  <div class="content has-text-centered">
 
 
 
 
 
 
 
406
  </div>
407
  <div class="columns is-centered">
408
  <div class="column is-8">
409
  <div class="content">
410
  <p>
411
+ This website is website adapted from <a href="https://nerfies.github.io/">Nerfies</a> and <a href="https://mmmu.github.io/">MMMU</a>, licensed under a <a rel="license"
412
  href="http://creativecommons.org/licenses/by-sa/4.0/">Creative
413
  Commons Attribution-ShareAlike 4.0 International License</a>.
414
  </p>
 
 
 
 
 
 
 
415
  </div>
416
  </div>
417
  </div>
418
+ <!-- </div> -->
419
+
420
  </footer>
421
 
422
+ <script>
423
+
424
+
425
+ function sortTable(table, column, type, asc) {
426
+ var tbody = table.tBodies[0];
427
+ var rows = Array.from(tbody.rows);
428
+
429
+ rows.sort(function(a, b) {
430
+ var valA = a.cells[column].textContent;
431
+ var valB = b.cells[column].textContent;
432
+
433
+ if (type === 'number') {
434
+ valA = parseFloat(valA);
435
+ valB = parseFloat(valB);
436
+ }
437
+
438
+ return asc ? valA - valB : valB - valA;
439
+ });
440
+
441
+ rows.forEach(row => tbody.appendChild(row));
442
+ }
443
+
444
+ // 切换表格的函数
445
+ function toggleTables () {
446
+ var table1 = document.getElementById('table1');
447
+ var table2 = document.getElementById('table2');
448
+ table1.classList.toggle('hidden');
449
+ table2.classList.toggle('hidden');
450
+ }
451
+
452
+ document.getElementById('toggleButton').addEventListener('click', toggleTables);
453
+ const canvas = document.getElementById('difficulty_level_chart');
454
+ canvas.style.width = '500px';
455
+ canvas.style.height = '120px';
456
+ const ctx = document.getElementById('difficulty_level_chart').getContext('2d');
457
+ const difficulty_level_chart = new Chart(ctx, {
458
+ type: 'bar',
459
+ data: {
460
+ labels: ['Easy', 'Medium', 'Hard', 'Overall'],
461
+ datasets: [{
462
+ label: 'Fuyu-8B',
463
+ data: [28.9, 27, 26.4, 27.4],
464
+ backgroundColor: 'rgba(196, 123, 160, 0.6)',
465
+ borderColor: 'rgba(196, 123, 160, 1)',
466
+ borderWidth: 1,
467
+ hoverBackgroundColor: 'rgba(196, 123, 160, 1)'
468
+ },
469
+ {
470
+ label: 'Qwen-VL-7B',
471
+ data: [39.4, 31.9, 27.6, 32.9],
472
+ backgroundColor: 'rgba(245, 123, 113, 0.6)',
473
+ borderColor: 'rgba(245, 123, 113, 1)',
474
+ borderWidth: 1,
475
+ hoverBackgroundColor: 'rgba(245, 123, 113, 1)'
476
+ },
477
+ {
478
+ label: 'LLaVA-1.5-13B',
479
+ data: [41.3, 32.7, 26.7, 33.6],
480
+ backgroundColor: 'rgba(255, 208, 80, 0.6)',
481
+ borderColor: 'rgba(255, 208, 80, 1)',
482
+ borderWidth: 1,
483
+ hoverBackgroundColor: 'rgba(255, 208, 80, 1)'
484
+ },
485
+ {
486
+ label: 'InstructBLIP-T5-XXL',
487
+ data: [40.3, 32.3, 29.4, 33.8],
488
+ backgroundColor: 'rgba(110, 194, 134, 0.6)',
489
+ borderColor: 'rgba(110, 194, 134, 1)',
490
+ borderWidth: 1,
491
+ hoverBackgroundColor: 'rgba(110, 194, 134, 1)'
492
+ },
493
+ {
494
+ label: 'BLIP-2 FLAN-T5-XXL',
495
+ data: [41, 32.7, 28.5, 34],
496
+ backgroundColor: 'rgba(255, 153, 78, 0.6)',
497
+ borderColor: 'rgba(255, 153, 78, 1)',
498
+ borderWidth: 1,
499
+ hoverBackgroundColor: 'rgba(255, 153, 78, 1)'
500
+ },
501
+ {
502
+ label: 'GPT-4V',
503
+ data: [76.1, 55.6, 31.2, 55.7],
504
+ backgroundColor: 'rgba(117, 209, 215, 0.6)',
505
+ borderColor: 'rgba(117, 209, 215, 1)',
506
+ borderWidth: 1,
507
+ hoverBackgroundColor: 'rgba(117, 209, 215, 1)'
508
+ }]
509
+ },
510
+ options: {
511
+ scales: {
512
+ y: {
513
+ beginAtZero: true,
514
+ min: 0,
515
+ max: 100,
516
+ ticks: {
517
+ stepSize: 20,
518
+ font: {
519
+ size: 16
520
+ }
521
+ }
522
+ },
523
+ x: {
524
+ ticks: {
525
+ font: {
526
+ size: 16 // 设置X轴字体大小
527
+ }
528
+ }
529
+ }
530
+ },
531
+ plugins: {
532
+ legend: {
533
+ labels: {
534
+ font: {
535
+ size: 16 // 设置标签文字大小
536
+ }
537
+ }
538
+ },
539
+ tooltip: {
540
+ callbacks: {
541
+ label: function(context) {
542
+ return context.dataset.label + ': ' + context.parsed.y;
543
+ }
544
+ }
545
+ }
546
+ },
547
+ onHover: (event, chartElement) => {
548
+ event.native.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
549
+ }
550
+ }
551
+ });
552
+ document.addEventListener('DOMContentLoaded', function() {
553
+ // Data for the "Diagrams" chart
554
+ const data_Diagrams = {
555
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
556
+ datasets: [{
557
+ data: [27.6, 30.1, 31.8, 30.0, 32.0, 46.8],
558
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
559
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
560
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
561
+ }]
562
+ };
563
+
564
+ // "data_Diagrams" chart
565
+ new Chart(document.getElementById('chart_Diagrams'), {
566
+ type: 'bar',
567
+ data: data_Diagrams,
568
+ options: {
569
+ scales: {
570
+ y: {
571
+ beginAtZero: true,
572
+ min: 0,
573
+ max: 100,
574
+ ticks: {
575
+ stepSize: 20
576
+ }
577
+ },
578
+ x: {
579
+ display: false
580
+ }
581
+ },
582
+ plugins: {
583
+ legend: {
584
+ display: false
585
+ },
586
+ tooltip: {
587
+ }
588
+ }
589
+ }
590
+ });
591
+
592
+ // "data_Tables" chart
593
+ const data_Tables = {
594
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
595
+ datasets: [{
596
+ data: [26.6, 29.0, 29.8, 27.8, 27.8, 61.8],
597
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
598
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
599
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
600
+ }]
601
+ };
602
+ new Chart(document.getElementById('chart_Tables'), {
603
+ type: 'bar',
604
+ data: data_Tables,
605
+ options: {
606
+ scales: {
607
+ y: {
608
+ beginAtZero: true,
609
+ min: 0,
610
+ max: 100,
611
+ ticks: {
612
+ stepSize: 20
613
+ }
614
+ },
615
+ x: {
616
+ display: false
617
+ }
618
+ },
619
+ plugins: {
620
+ legend: {
621
+ display: false
622
+ },
623
+ tooltip: {
624
+ }
625
+ }
626
+ }
627
+ });
628
+
629
+ // "data_PlotsAndCharts " chart
630
+ const data_PlotsAndCharts = {
631
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
632
+ datasets: [{
633
+ data: [24.8, 31.8, 36.2, 30.4, 35.8, 55.6],
634
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
635
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
636
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
637
+ }]
638
+ };
639
+ new Chart(document.getElementById('chart_PlotsAndCharts'), {
640
+ type: 'bar',
641
+ data: data_PlotsAndCharts ,
642
+ options: {
643
+ scales: {
644
+ y: {
645
+ beginAtZero: true,
646
+ min: 0,
647
+ max: 100,
648
+ ticks: {
649
+ stepSize: 20
650
+ }
651
+ },
652
+ x: {
653
+ display: false
654
+ }
655
+ },
656
+ plugins: {
657
+ legend: {
658
+ display: false
659
+ },
660
+ tooltip: {
661
+ }
662
+ }
663
+ }
664
+ });
665
+
666
+ // "data_ChemicalStructures " chart
667
+ const data_ChemicalStructures = {
668
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
669
+ datasets: [{
670
+ data: [25.0, 27.2, 27.1, 26.7, 25.5, 50.6],
671
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
672
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
673
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
674
+ }]
675
+ };
676
+ new Chart(document.getElementById('chart_ChemicalStructures'), {
677
+ type: 'bar',
678
+ data: data_ChemicalStructures ,
679
+ options: {
680
+ scales: {
681
+ y: {
682
+ beginAtZero: true,
683
+ min: 0,
684
+ max: 100,
685
+ ticks: {
686
+ stepSize: 20
687
+ }
688
+ },
689
+ x: {
690
+ display: false
691
+ }
692
+ },
693
+ plugins: {
694
+ legend: {
695
+ display: false
696
+ },
697
+ tooltip: {
698
+ }
699
+ }
700
+ }
701
+ });
702
+
703
+ // "data_Photographs " chart
704
+ const data_Photographs = {
705
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
706
+ datasets: [{
707
+ data: [27.6, 40.5, 41.4, 44.4, 42.0, 64.2],
708
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
709
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
710
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
711
+ }]
712
+ };
713
+ new Chart(document.getElementById('chart_Photographs'), {
714
+ type: 'bar',
715
+ data: data_Photographs ,
716
+ options: {
717
+ scales: {
718
+ y: {
719
+ beginAtZero: true,
720
+ min: 0,
721
+ max: 100,
722
+ ticks: {
723
+ stepSize: 20
724
+ }
725
+ },
726
+ x: {
727
+ display: false
728
+ }
729
+ },
730
+ plugins: {
731
+ legend: {
732
+ display: false
733
+ },
734
+ tooltip: {
735
+ }
736
+ }
737
+ }
738
+ });
739
+
740
+ // "data_Paintings " chart
741
+ const data_Paintings = {
742
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
743
+ datasets: [{
744
+ data: [28.7, 57.2, 53.6, 56.3, 52.1, 75.9],
745
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
746
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
747
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
748
+ }]
749
+ };
750
+ new Chart(document.getElementById('chart_Paintings'), {
751
+ type: 'bar',
752
+ data: data_Paintings ,
753
+ options: {
754
+ scales: {
755
+ y: {
756
+ beginAtZero: true,
757
+ min: 0,
758
+ max: 100,
759
+ ticks: {
760
+ stepSize: 20
761
+ }
762
+ },
763
+ x: {
764
+ display: false
765
+ }
766
+ },
767
+ plugins: {
768
+ legend: {
769
+ display: false
770
+ },
771
+ tooltip: {
772
+ }
773
+ }
774
+ }
775
+ });
776
+
777
+ // "data_GeometricShapes " chart
778
+ const data_GeometricShapes = {
779
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
780
+ datasets: [{
781
+ data: [21.1, 25.3, 21.4, 25.6, 28.3, 40.2],
782
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
783
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
784
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
785
+ }]
786
+ };
787
+ new Chart(document.getElementById('chart_GeometricShapes'), {
788
+ type: 'bar',
789
+ data: data_GeometricShapes ,
790
+ options: {
791
+ scales: {
792
+ y: {
793
+ beginAtZero: true,
794
+ min: 0,
795
+ max: 100,
796
+ ticks: {
797
+ stepSize: 20
798
+ }
799
+ },
800
+ x: {
801
+ display: false
802
+ }
803
+ },
804
+ plugins: {
805
+ legend: {
806
+ display: false
807
+ },
808
+ tooltip: {
809
+ }
810
+ }
811
+ }
812
+ });
813
+
814
+ // "data_SheetMusic " chart
815
+ const data_SheetMusic = {
816
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
817
+ datasets: [{
818
+ data: [35.2, 33.4, 34.6, 35.8, 34.9, 38.8],
819
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
820
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
821
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
822
+ }]
823
+ };
824
+ new Chart(document.getElementById('chart_SheetMusic'), {
825
+ type: 'bar',
826
+ data: data_SheetMusic ,
827
+ options: {
828
+ scales: {
829
+ y: {
830
+ beginAtZero: true,
831
+ min: 0,
832
+ max: 100,
833
+ ticks: {
834
+ stepSize: 20
835
+ }
836
+ },
837
+ x: {
838
+ display: false
839
+ }
840
+ },
841
+ plugins: {
842
+ legend: {
843
+ display: false
844
+ },
845
+ tooltip: {
846
+ }
847
+ }
848
+ }
849
+ });
850
+
851
+ // "data_MedicalImages " chart
852
+ const data_MedicalImages = {
853
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
854
+ datasets: [{
855
+ data: [25.4, 29.8, 31.6, 36.4, 29.8, 59.6],
856
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
857
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
858
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
859
+ }]
860
+ };
861
+ new Chart(document.getElementById('chart_MedicalImages'), {
862
+ type: 'bar',
863
+ data: data_MedicalImages ,
864
+ options: {
865
+ scales: {
866
+ y: {
867
+ beginAtZero: true,
868
+ min: 0,
869
+ max: 100,
870
+ ticks: {
871
+ stepSize: 20
872
+ }
873
+ },
874
+ x: {
875
+ display: false
876
+ }
877
+ },
878
+ plugins: {
879
+ legend: {
880
+ display: false
881
+ },
882
+ tooltip: {
883
+ }
884
+ }
885
+ }
886
+ });
887
+
888
+ // "data_PathologicalImages " chart
889
+ const data_PathologicalImages = {
890
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
891
+ datasets: [{
892
+ data: [26.5, 27.7, 31.2, 35.2, 35.6, 63.6],
893
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
894
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
895
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
896
+ }]
897
+ };
898
+ new Chart(document.getElementById('chart_PathologicalImages'), {
899
+ type: 'bar',
900
+ data: data_PathologicalImages ,
901
+ options: {
902
+ scales: {
903
+ y: {
904
+ beginAtZero: true,
905
+ min: 0,
906
+ max: 100,
907
+ ticks: {
908
+ stepSize: 20
909
+ }
910
+ },
911
+ x: {
912
+ display: false
913
+ }
914
+ },
915
+ plugins: {
916
+ legend: {
917
+ display: false
918
+ },
919
+ tooltip: {
920
+ }
921
+ }
922
+ }
923
+ });
924
+
925
+ // "data_MicroscopicImages " chart
926
+ const data_MicroscopicImages = {
927
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
928
+ datasets: [{
929
+ data: [27.0, 37.6, 29.2, 36.3, 32.7, 58.0],
930
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
931
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
932
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
933
+ }]
934
+ };
935
+ new Chart(document.getElementById('chart_MicroscopicImages'), {
936
+ type: 'bar',
937
+ data: data_MicroscopicImages ,
938
+ options: {
939
+ scales: {
940
+ y: {
941
+ beginAtZero: true,
942
+ min: 0,
943
+ max: 100,
944
+ ticks: {
945
+ stepSize: 20
946
+ }
947
+ },
948
+ x: {
949
+ display: false
950
+ }
951
+ },
952
+ plugins: {
953
+ legend: {
954
+ display: false
955
+ },
956
+ tooltip: {
957
+ }
958
+ }
959
+ }
960
+ });
961
+
962
+ // "data_MRIsCTScansXrays " chart
963
+ const data_MRIsCTScansXrays = {
964
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
965
+ datasets: [{
966
+ data: [21.7, 36.9, 33.3, 39.4, 29.8, 50.0],
967
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
968
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
969
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
970
+ }]
971
+ };
972
+ new Chart(document.getElementById('chart_MRIsCTScansXrays'), {
973
+ type: 'bar',
974
+ data: data_MRIsCTScansXrays ,
975
+ options: {
976
+ scales: {
977
+ y: {
978
+ beginAtZero: true,
979
+ min: 0,
980
+ max: 100,
981
+ ticks: {
982
+ stepSize: 20
983
+ }
984
+ },
985
+ x: {
986
+ display: false
987
+ }
988
+ },
989
+ plugins: {
990
+ legend: {
991
+ display: false
992
+ },
993
+ tooltip: {
994
+ }
995
+ }
996
+ }
997
+ });
998
+
999
+ // "data_SketchesAndDrafts " chart
1000
+ const data_SketchesAndDrafts = {
1001
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1002
+ datasets: [{
1003
+ data: [37.0, 32.1, 29.9, 38.0, 33.7, 55.4],
1004
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1005
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1006
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1007
+ }]
1008
+ };
1009
+ new Chart(document.getElementById('chart_SketchesAndDrafts'), {
1010
+ type: 'bar',
1011
+ data: data_SketchesAndDrafts ,
1012
+ options: {
1013
+ scales: {
1014
+ y: {
1015
+ beginAtZero: true,
1016
+ min: 0,
1017
+ max: 100,
1018
+ ticks: {
1019
+ stepSize: 20
1020
+ }
1021
+ },
1022
+ x: {
1023
+ display: false
1024
+ }
1025
+ },
1026
+ plugins: {
1027
+ legend: {
1028
+ display: false
1029
+ },
1030
+ tooltip: {
1031
+ }
1032
+ }
1033
+ }
1034
+ });
1035
+
1036
+ // "data_Maps " chart
1037
+ const data_Maps = {
1038
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1039
+ datasets: [{
1040
+ data: [38.2, 36.5, 45.9, 47.6, 43.5, 61.8],
1041
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1042
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1043
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1044
+ }]
1045
+ };
1046
+ new Chart(document.getElementById('chart_Maps'), {
1047
+ type: 'bar',
1048
+ data: data_Maps ,
1049
+ options: {
1050
+ scales: {
1051
+ y: {
1052
+ beginAtZero: true,
1053
+ min: 0,
1054
+ max: 100,
1055
+ ticks: {
1056
+ stepSize: 20
1057
+ }
1058
+ },
1059
+ x: {
1060
+ display: false
1061
+ }
1062
+ },
1063
+ plugins: {
1064
+ legend: {
1065
+ display: false
1066
+ },
1067
+ tooltip: {
1068
+ }
1069
+ }
1070
+ }
1071
+ });
1072
+
1073
+ // "data_TechnicalBlueprints " chart
1074
+ const data_TechnicalBlueprints = {
1075
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1076
+ datasets: [{
1077
+ data: [24.7, 25.9, 28.4, 25.3, 27.8, 38.9],
1078
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1079
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1080
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1081
+ }]
1082
+ };
1083
+ new Chart(document.getElementById('chart_TechnicalBlueprints'), {
1084
+ type: 'bar',
1085
+ data: data_TechnicalBlueprints ,
1086
+ options: {
1087
+ scales: {
1088
+ y: {
1089
+ beginAtZero: true,
1090
+ min: 0,
1091
+ max: 100,
1092
+ ticks: {
1093
+ stepSize: 20
1094
+ }
1095
+ },
1096
+ x: {
1097
+ display: false
1098
+ }
1099
+ },
1100
+ plugins: {
1101
+ legend: {
1102
+ display: false
1103
+ },
1104
+ tooltip: {
1105
+ }
1106
+ }
1107
+ }
1108
+ });
1109
+
1110
+ // "data_TreesAndGraphs " chart
1111
+ const data_TreesAndGraphs = {
1112
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1113
+ datasets: [{
1114
+ data: [30.1, 28.1, 28.8, 28.8, 34.9, 50.0],
1115
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1116
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1117
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1118
+ }]
1119
+ };
1120
+ new Chart(document.getElementById('chart_TreesAndGraphs'), {
1121
+ type: 'bar',
1122
+ data: data_TreesAndGraphs ,
1123
+ options: {
1124
+ scales: {
1125
+ y: {
1126
+ beginAtZero: true,
1127
+ min: 0,
1128
+ max: 100,
1129
+ ticks: {
1130
+ stepSize: 20
1131
+ }
1132
+ },
1133
+ x: {
1134
+ display: false
1135
+ }
1136
+ },
1137
+ plugins: {
1138
+ legend: {
1139
+ display: false
1140
+ },
1141
+ tooltip: {
1142
+ }
1143
+ }
1144
+ }
1145
+ });
1146
+
1147
+ // "data_MathematicalNotations " chart
1148
+ const data_MathematicalNotations = {
1149
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1150
+ datasets: [{
1151
+ data: [15.8, 27.1, 22.6, 21.8, 21.1, 45.9],
1152
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1153
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1154
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1155
+ }]
1156
+ };
1157
+ new Chart(document.getElementById('chart_MathematicalNotations'), {
1158
+ type: 'bar',
1159
+ data: data_MathematicalNotations ,
1160
+ options: {
1161
+ scales: {
1162
+ y: {
1163
+ beginAtZero: true,
1164
+ min: 0,
1165
+ max: 100,
1166
+ ticks: {
1167
+ stepSize: 20
1168
+ }
1169
+ },
1170
+ x: {
1171
+ display: false
1172
+ }
1173
+ },
1174
+ plugins: {
1175
+ legend: {
1176
+ display: false
1177
+ },
1178
+ tooltip: {
1179
+ }
1180
+ }
1181
+ }
1182
+ });
1183
+
1184
+ // "data_ComicsAndCartoons " chart
1185
+ const data_ComicsAndCartoons = {
1186
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1187
+ datasets: [{
1188
+ data: [29.0, 51.9, 49.6, 54.2, 51.1, 68.7],
1189
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1190
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1191
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1192
+ }]
1193
+ };
1194
+ new Chart(document.getElementById('chart_ComicsAndCartoons'), {
1195
+ type: 'bar',
1196
+ data: data_ComicsAndCartoons ,
1197
+ options: {
1198
+ scales: {
1199
+ y: {
1200
+ beginAtZero: true,
1201
+ min: 0,
1202
+ max: 100,
1203
+ ticks: {
1204
+ stepSize: 20
1205
+ }
1206
+ },
1207
+ x: {
1208
+ display: false
1209
+ }
1210
+ },
1211
+ plugins: {
1212
+ legend: {
1213
+ display: false
1214
+ },
1215
+ tooltip: {
1216
+ }
1217
+ }
1218
+ }
1219
+ });
1220
+
1221
+ // "data_Sculpture " chart
1222
+ const data_Sculpture = {
1223
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1224
+ datasets: [{
1225
+ data: [30.8, 46.2, 49.6, 51.3, 53.0, 76.1],
1226
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1227
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1228
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1229
+ }]
1230
+ };
1231
+ new Chart(document.getElementById('chart_Sculpture'), {
1232
+ type: 'bar',
1233
+ data: data_Sculpture ,
1234
+ options: {
1235
+ scales: {
1236
+ y: {
1237
+ beginAtZero: true,
1238
+ min: 0,
1239
+ max: 100,
1240
+ ticks: {
1241
+ stepSize: 20
1242
+ }
1243
+ },
1244
+ x: {
1245
+ display: false
1246
+ }
1247
+ },
1248
+ plugins: {
1249
+ legend: {
1250
+ display: false
1251
+ },
1252
+ tooltip: {
1253
+ }
1254
+ }
1255
+ }
1256
+ });
1257
+
1258
+ // "data_Portraits " chart
1259
+ const data_Portraits = {
1260
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1261
+ datasets: [{
1262
+ data: [20.9, 52.7, 46.2, 54.9, 47.3, 70.3],
1263
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1264
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1265
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1266
+ }]
1267
+ };
1268
+ new Chart(document.getElementById('chart_Portraits'), {
1269
+ type: 'bar',
1270
+ data: data_Portraits ,
1271
+ options: {
1272
+ scales: {
1273
+ y: {
1274
+ beginAtZero: true,
1275
+ min: 0,
1276
+ max: 100,
1277
+ ticks: {
1278
+ stepSize: 20
1279
+ }
1280
+ },
1281
+ x: {
1282
+ display: false
1283
+ }
1284
+ },
1285
+ plugins: {
1286
+ legend: {
1287
+ display: false
1288
+ },
1289
+ tooltip: {
1290
+ }
1291
+ }
1292
+ }
1293
+ });
1294
+
1295
+ // "data_Screenshots " chart
1296
+ const data_Screenshots = {
1297
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1298
+ datasets: [{
1299
+ data: [38.6, 35.7, 38.6, 34.3, 47.1, 65.7],
1300
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1301
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1302
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1303
+ }]
1304
+ };
1305
+ new Chart(document.getElementById('chart_Screenshots'), {
1306
+ type: 'bar',
1307
+ data: data_Screenshots ,
1308
+ options: {
1309
+ scales: {
1310
+ y: {
1311
+ beginAtZero: true,
1312
+ min: 0,
1313
+ max: 100,
1314
+ ticks: {
1315
+ stepSize: 20
1316
+ }
1317
+ },
1318
+ x: {
1319
+ display: false
1320
+ }
1321
+ },
1322
+ plugins: {
1323
+ legend: {
1324
+ display: false
1325
+ },
1326
+ tooltip: {
1327
+ }
1328
+ }
1329
+ }
1330
+ });
1331
+
1332
+ // "data_Other " chart
1333
+ const data_Other = {
1334
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1335
+ datasets: [{
1336
+ data: [28.3, 38.3, 50.0, 51.7, 58.3, 68.3],
1337
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1338
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1339
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1340
+ }]
1341
+ };
1342
+ new Chart(document.getElementById('chart_Other'), {
1343
+ type: 'bar',
1344
+ data: data_Other ,
1345
+ options: {
1346
+ scales: {
1347
+ y: {
1348
+ beginAtZero: true,
1349
+ min: 0,
1350
+ max: 100,
1351
+ ticks: {
1352
+ stepSize: 20
1353
+ }
1354
+ },
1355
+ x: {
1356
+ display: false
1357
+ }
1358
+ },
1359
+ plugins: {
1360
+ legend: {
1361
+ display: false
1362
+ },
1363
+ tooltip: {
1364
+ }
1365
+ }
1366
+ }
1367
+ });
1368
+
1369
+ // "data_Poster " chart
1370
+ const data_Poster = {
1371
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1372
+ datasets: [{
1373
+ data: [38.6, 50.9, 52.6, 61.4, 64.9, 80.7],
1374
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1375
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1376
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1377
+ }]
1378
+ };
1379
+ new Chart(document.getElementById('chart_Poster'), {
1380
+ type: 'bar',
1381
+ data: data_Poster ,
1382
+ options: {
1383
+ scales: {
1384
+ y: {
1385
+ beginAtZero: true,
1386
+ min: 0,
1387
+ max: 100,
1388
+ ticks: {
1389
+ stepSize: 20
1390
+ }
1391
+ },
1392
+ x: {
1393
+ display: false
1394
+ }
1395
+ },
1396
+ plugins: {
1397
+ legend: {
1398
+ display: false
1399
+ },
1400
+ tooltip: {
1401
+ }
1402
+ }
1403
+ }
1404
+ });
1405
+
1406
+ // "data_IconsAndSymbols " chart
1407
+ const data_IconsAndSymbols = {
1408
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1409
+ datasets: [{
1410
+ data: [23.8, 66.7, 57.1, 59.5, 59.5, 78.6],
1411
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1412
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1413
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1414
+ }]
1415
+ };
1416
+ new Chart(document.getElementById('chart_IconsAndSymbols'), {
1417
+ type: 'bar',
1418
+ data: data_IconsAndSymbols ,
1419
+ options: {
1420
+ scales: {
1421
+ y: {
1422
+ beginAtZero: true,
1423
+ min: 0,
1424
+ max: 100,
1425
+ ticks: {
1426
+ stepSize: 20
1427
+ }
1428
+ },
1429
+ x: {
1430
+ display: false
1431
+ }
1432
+ },
1433
+ plugins: {
1434
+ legend: {
1435
+ display: false
1436
+ },
1437
+ tooltip: {
1438
+ }
1439
+ }
1440
+ }
1441
+ });
1442
+
1443
+ // "data_HistoricalTimelines " chart
1444
+ const data_HistoricalTimelines = {
1445
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1446
+ datasets: [{
1447
+ data: [30.0, 36.7, 40.0, 43.3, 43.3, 63.3],
1448
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1449
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1450
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1451
+ }]
1452
+ };
1453
+ new Chart(document.getElementById('chart_HistoricalTimelines'), {
1454
+ type: 'bar',
1455
+ data: data_HistoricalTimelines ,
1456
+ options: {
1457
+ scales: {
1458
+ y: {
1459
+ beginAtZero: true,
1460
+ min: 0,
1461
+ max: 100,
1462
+ ticks: {
1463
+ stepSize: 20
1464
+ }
1465
+ },
1466
+ x: {
1467
+ display: false
1468
+ }
1469
+ },
1470
+ plugins: {
1471
+ legend: {
1472
+ display: false
1473
+ },
1474
+ tooltip: {
1475
+ }
1476
+ }
1477
+ }
1478
+ });
1479
+
1480
+ // "data_3DRenderings " chart
1481
+ const data_3DRenderings = {
1482
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1483
+ datasets: [{
1484
+ data: [33.3, 28.6, 57.1, 38.1, 47.6, 47.6],
1485
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1486
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1487
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1488
+ }]
1489
+ };
1490
+ new Chart(document.getElementById('chart_3DRenderings'), {
1491
+ type: 'bar',
1492
+ data: data_3DRenderings ,
1493
+ options: {
1494
+ scales: {
1495
+ y: {
1496
+ beginAtZero: true,
1497
+ min: 0,
1498
+ max: 100,
1499
+ ticks: {
1500
+ stepSize: 20
1501
+ }
1502
+ },
1503
+ x: {
1504
+ display: false
1505
+ }
1506
+ },
1507
+ plugins: {
1508
+ legend: {
1509
+ display: false
1510
+ },
1511
+ tooltip: {
1512
+ }
1513
+ }
1514
+ }
1515
+ });
1516
+
1517
+ // "data_DNASequences " chart
1518
+ const data_DNASequences = {
1519
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1520
+ datasets: [{
1521
+ data: [20.0, 45.0, 25.0, 25.0, 45.0, 55.0],
1522
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1523
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1524
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1525
+ }]
1526
+ };
1527
+ new Chart(document.getElementById('chart_DNASequences'), {
1528
+ type: 'bar',
1529
+ data: data_DNASequences ,
1530
+ options: {
1531
+ scales: {
1532
+ y: {
1533
+ beginAtZero: true,
1534
+ min: 0,
1535
+ max: 100,
1536
+ ticks: {
1537
+ stepSize: 20
1538
+ }
1539
+ },
1540
+ x: {
1541
+ display: false
1542
+ }
1543
+ },
1544
+ plugins: {
1545
+ legend: {
1546
+ display: false
1547
+ },
1548
+ tooltip: {
1549
+ }
1550
+ }
1551
+ }
1552
+ });
1553
+
1554
+ // "data_Landscapes " chart
1555
+ const data_Landscapes = {
1556
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1557
+ datasets: [{
1558
+ data: [43.8, 43.8, 50.0, 31.2, 62.5, 68.8],
1559
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1560
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1561
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1562
+ }]
1563
+ };
1564
+ new Chart(document.getElementById('chart_Landscapes'), {
1565
+ type: 'bar',
1566
+ data: data_Landscapes ,
1567
+ options: {
1568
+ scales: {
1569
+ y: {
1570
+ beginAtZero: true,
1571
+ min: 0,
1572
+ max: 100,
1573
+ ticks: {
1574
+ stepSize: 20
1575
+ }
1576
+ },
1577
+ x: {
1578
+ display: false
1579
+ }
1580
+ },
1581
+ plugins: {
1582
+ legend: {
1583
+ display: false
1584
+ },
1585
+ tooltip: {
1586
+ }
1587
+ }
1588
+ }
1589
+ });
1590
+
1591
+ // "data_LogosAndBranding " chart
1592
+ const data_LogosAndBranding = {
1593
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1594
+ datasets: [{
1595
+ data: [21.4, 57.1, 64.3, 35.7, 50.0, 85.7],
1596
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1597
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1598
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1599
+ }]
1600
+ };
1601
+ new Chart(document.getElementById('chart_LogosAndBranding'), {
1602
+ type: 'bar',
1603
+ data: data_LogosAndBranding ,
1604
+ options: {
1605
+ scales: {
1606
+ y: {
1607
+ beginAtZero: true,
1608
+ min: 0,
1609
+ max: 100,
1610
+ ticks: {
1611
+ stepSize: 20
1612
+ }
1613
+ },
1614
+ x: {
1615
+ display: false
1616
+ }
1617
+ },
1618
+ plugins: {
1619
+ legend: {
1620
+ display: false
1621
+ },
1622
+ tooltip: {
1623
+ }
1624
+ }
1625
+ }
1626
+ });
1627
+
1628
+ // "data_Advertisements " chart
1629
+ const data_Advertisements = {
1630
+ labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'],
1631
+ datasets: [{
1632
+ data: [30.0, 60.0, 50.0, 60.0, 70.0, 100.0],
1633
+ backgroundColor: ['rgba(196, 123, 160, 0.6)', 'rgba(245, 123, 113, 0.6)', 'rgba(255, 208, 80, 0.6)', 'rgba(110, 194, 134, 0.6)', 'rgba(255, 153, 78, 0.6)', 'rgba(117, 209, 215, 0.6)'],
1634
+ borderColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,0.4)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)'],
1635
+ hoverBackgroundColor: ['rgba(196, 123, 160, 1)', 'rgba(245, 123, 113,1)', 'rgba(255, 208, 80, 1)', 'rgba(110, 194, 134, 1)', 'rgba(255, 153, 78, 1)', 'rgba(117, 209, 215, 1)']
1636
+ }]
1637
+ };
1638
+ new Chart(document.getElementById('chart_Advertisements'), {
1639
+ type: 'bar',
1640
+ data: data_Advertisements ,
1641
+ options: {
1642
+ scales: {
1643
+ y: {
1644
+ beginAtZero: true,
1645
+ min: 0,
1646
+ max: 100,
1647
+ ticks: {
1648
+ stepSize: 20
1649
+ }
1650
+ },
1651
+ x: {
1652
+ display: false
1653
+ }
1654
+ },
1655
+ plugins: {
1656
+ legend: {
1657
+ display: false
1658
+ },
1659
+ tooltip: {
1660
+ }
1661
+ }
1662
+ }
1663
+ });
1664
+ });
1665
+
1666
+ </script>
1667
+
1668
+ <style>
1669
+ .publication-links {
1670
+ /* 在默认情况下，水平排列 */
1671
+ display: flex;
1672
+ }
1673
+
1674
+ /* 在屏幕宽度小于600px时，竖直排列 */
1675
+ @media only screen and (max-width: 600px) {
1676
+ .publication-links {
1677
+ display: flex;
1678
+ flex-direction: column; /* 将元素竖直排列 */
1679
+ }
1680
+ }
1681
+
1682
+ .hidden {
1683
+ display: none;
1684
+ }
1685
+ .sortable:hover {
1686
+ cursor: pointer;
1687
+ }
1688
+ .asc::after {
1689
+ content: ' ↑';
1690
+ }
1691
+ .desc::after {
1692
+ content: ' ↓';
1693
+ }
1694
+ #toggleButton {
1695
+ background-color: #ffffff;
1696
+ border: 1px solid #dddddd;
1697
+ color: #555555;
1698
+ padding: 10px 20px;
1699
+ text-align: center;
1700
+ text-decoration: none;
1701
+ display: inline-block;
1702
+ font-size: 14px;
1703
+ margin: 4px 2px;
1704
+ cursor: pointer;
1705
+ border-radius: 25px;
1706
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
1707
+ transition-duration: 0.4s;
1708
+ }
1709
+
1710
+ #toggleButton:hover {
1711
+ box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); /* 鼠标悬停时的阴影效果 */
1712
+ }
1713
+
1714
+ table {
1715
+ border-collapse: collapse;
1716
+ width: 100%;
1717
+ margin-top: 5px;
1718
+ border: 1px solid #ddd;
1719
+ font-size: 14px;
1720
+ border-left: none;
1721
+ border-right: none;
1722
+ overflow-x: auto; /* 将 overflow-x 设置为 auto */
1723
+ }
1724
+
1725
+ th, td {
1726
+ text-align: left;
1727
+ padding: 8px;
1728
+ border-left: none;
1729
+ border-right: none;
1730
+ }
1731
+
1732
+ th {
1733
+ background-color: #f2f2f2;
1734
+ border-bottom: 2px solid #ddd;
1735
+ border-left: none;
1736
+ border-right: none;
1737
+ }
1738
+
1739
+ td:hover {background-color: #ffffff;}
1740
+
1741
+ /* 去掉第二行和第三行之间的横线 */
1742
+ tr:nth-child(1) td {
1743
+ border-bottom: none;
1744
+ }
1745
+ tr:nth-child(2) td {
1746
+ border-bottom: none;
1747
+ }
1748
+ tr:nth-child(3) td {
1749
+ border-bottom: none;
1750
+ }
1751
+ tr:nth-child(4) td {
1752
+ border-bottom: none;
1753
+ }
1754
+ .dashed-border {
1755
+ border-top: 2px dashed #ccc; /* 调整间隔宽度和颜色 */
1756
+ /* border-image: linear-gradient(to right, #ccc 25%, transparent 25%) 1 1; */
1757
+ }
1758
+ .centered-span {
1759
+ display: flex;
1760
+ align-items: center;
1761
+ justify-content: center; /* 水平居中 */
1762
+ height: 100%; /* 让 span 高度充满单元格 */
1763
+ }
1764
+ tr:nth-child(7) td {
1765
+ border-bottom: none;
1766
+ }
1767
+ tr:nth-child(8) td {
1768
+ border-bottom: none;
1769
+ }
1770
+ tr:nth-child(9) td {
1771
+ border-bottom: none;
1772
+ }
1773
+ tr:nth-child(10) td {
1774
+ border-bottom: none;
1775
+ }
1776
+ tr:nth-child(11) td {
1777
+ border-bottom: none;
1778
+ }
1779
+ tr:nth-child(12) td {
1780
+ border-bottom: none;
1781
+ }
1782
+ tr:nth-child(13) td {
1783
+ border-bottom: none;
1784
+ }
1785
+ tr:nth-child(14) td {
1786
+ border-bottom: none;
1787
+ }
1788
+ tr:nth-child(15) td {
1789
+ border-bottom: none;
1790
+ }
1791
+ tr:nth-child(16) td {
1792
+ border-bottom: none;
1793
+ }
1794
+ tr:nth-child(17) td {
1795
+ border-bottom: none;
1796
+ }
1797
+ tr:nth-child(18) td {
1798
+ border-bottom: none;
1799
+ }
1800
+ tr:nth-child(19) td {
1801
+ border-bottom: none;
1802
+ }
1803
+ tr:nth-child(20) td {
1804
+ border-bottom: none;
1805
+ }
1806
+ tr:nth-child(21) td {
1807
+ border-bottom: none;
1808
+ }
1809
+ tr:nth-child(22) td {
1810
+ border-bottom: none;
1811
+ }
1812
+ tr:nth-child(23) td {
1813
+ border-bottom: none;
1814
+ }
1815
+ tr:nth-child(24) td {
1816
+ border-bottom: none;
1817
+ }
1818
+ tr:nth-child(25) td {
1819
+ border-bottom: none;
1820
+ }
1821
+ tr:nth-child(26) td {
1822
+ border-bottom: none;
1823
+ }
1824
+ tr:nth-child(29) td {
1825
+ border-bottom: none;
1826
+ }
1827
+ tr:nth-child(30) td {
1828
+ border-bottom: none;
1829
+ }
1830
+ tr:nth-child(31) td {
1831
+ border-bottom: none;
1832
+ }
1833
+ tr:nth-child(32) td {
1834
+ border-bottom: none;
1835
+ }
1836
+ tr:nth-child(33) td {
1837
+ border-bottom: none;
1838
+ }
1839
+ tr:nth-child(36) td {
1840
+ border-bottom: none;
1841
+ }
1842
+ tr:nth-child(37) td {
1843
+ border-bottom: none;
1844
+ }
1845
+ tr:nth-child(38) td {
1846
+ border-bottom: none;
1847
+ }
1848
+ tr:nth-child(39) td {
1849
+ border-bottom: none;
1850
+ }
1851
+ tr:nth-child(40) td {
1852
+ border-bottom: none;
1853
+ }
1854
+ tr:nth-child(41) td {
1855
+ border-bottom: none;
1856
+ }
1857
+ tr:nth-child(42) td {
1858
+ border-bottom: none;
1859
+ }
1860
+ tr:nth-child(43) td {
1861
+ border-bottom: none;
1862
+ }
1863
+ tr:nth-child(44) td {
1864
+ border-bottom: none;
1865
+ }
1866
+ tr:nth-child(45) td {
1867
+ border-bottom: none;
1868
+ }
1869
+ tr:nth-child(46) td {
1870
+ border-bottom: none;
1871
+ }
1872
+ tr:nth-child(47) td {
1873
+ border-bottom: none;
1874
+ }
1875
+ tr:nth-child(48) td {
1876
+ border-bottom: none;
1877
+ }
1878
+ tr:nth-child(49) td {
1879
+ border-bottom: none;
1880
+ }
1881
+ tr:nth-child(50) td {
1882
+ border-bottom: none;
1883
+ }
1884
+ tr:nth-child(53) td {
1885
+ border-bottom: none;
1886
+ }
1887
+ tr:nth-child(54) td {
1888
+ border-bottom: none;
1889
+ }
1890
+ tr:nth-child(55) td {
1891
+ border-bottom: none;
1892
+ }
1893
+ </style>
1894
+
1895
  </body>
1896
+ </html>