Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <title>II-Bench</title> | |
| <style> | |
| .hidden { | |
| display: none; | |
| } | |
| </style> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://kit.fontawesome.com/f8ddf9854a.js" crossorigin="anonymous"></script> | |
| <meta charset="utf-8"> | |
| <meta name="description" content="An Image Implication Understanding Benchmark for Multimodal Large Language Models"> | |
| <meta name="keywords" content="II-Bench, LMM, LMM Evaluation,MLLM, MLLM Evaluation, Multimodal large language model, Vision Language Model, Large Language Model, Large Multimodal Model, artificial intelligence, AI, AGI, artificial general intelligence"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title> II-Bench: An Image Implication Understanding Benchmark for Multimodal Large Language Models</title> | |
| <link rel="icon" href="images/icon.png"> | |
| <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" rel="stylesheet"> | |
| <link rel="stylesheet" href="static/css/bulma.min.css"> | |
| <link rel="stylesheet" href="static/css/bulma-carousel.min.css"> | |
| <link rel="stylesheet" href="static/css/bulma-slider.min.css"> | |
| <link rel="stylesheet" href="static/css/fontawesome.all.min.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css"> | |
| <link rel="stylesheet" href="static/css/index.css"> | |
| <link rel="stylesheet" href="static/css/leaderboard.css"> | |
| <!-- <link href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator_bulma.min.css" rel="stylesheet"> | |
| <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script> --> | |
| <script type="text/javascript" src="static/js/sort-table.js" defer=""></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | |
| <script defer="" src="static/js/fontawesome.all.min.js"></script> | |
| <script src="static/js/bulma-carousel.min.js"></script> | |
| <script src="static/js/bulma-slider.min.js"></script> | |
| <script src="static/js/index.js"></script> | |
| <script src="static/js/question_card.js"></script> | |
| <!-- <script src="./data/results/data_setting.js" defer></script>--> | |
| <!-- <script src="./data/results/model_scores.js" defer></script>--> | |
| <!-- <script src="./visualizer/data/data_public.js" defer></script>--> | |
| </head> | |
| <body class="II-Bench-container"> | |
| <nav class="navbar" role="navigation" aria-label="main navigation"> | |
| <div class="navbar-brand"> | |
| <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"> | |
| <span aria-hidden="true"></span> | |
| <span aria-hidden="true"></span> | |
| <span aria-hidden="true"></span> | |
| </a> | |
| </div> | |
| <!-- <div class="navbar-menu"> | |
| <div class="navbar-start" style="flex-grow: 1; justify-content: center;"> | |
| <div class="navbar-item has-dropdown is-hoverable"> | |
| <a class="navbar-link"> | |
| More Research | |
| </a> | |
| <div class="navbar-dropdown"> | |
| <a class="navbar-item" href="https://tiger-ai-lab.github.io/MAmmoTH/"> | |
| <b>MAmmoTH</b> <p style="font-size:18px; display: inline; margin-left: 5px;">🔥</p> | |
| </a> | |
| <a class="navbar-item" href="https://osu-nlp-group.github.io/TableLlama/"> | |
| TableLlama | |
| <a class="navbar-item" href="https://osu-nlp-group.github.io/MagicBrush/"> | |
| MagicBrush | |
| </a> | |
| <a class="navbar-item" href="https://osu-nlp-group.github.io/Mind2Web/"> | |
| Mind2Web | |
| </a> | |
| </a> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> --> | |
| </nav> | |
| <section class="hero"> | |
| <div class="hero-body"> | |
| <div class="container is-max-desktop"> | |
| <div class="columns is-centered"> | |
| <div class="column has-text-centered"> | |
| <h1 class="title is-1 publication-title is-bold"> | |
| <img src="images/logo.png" style="width:1em;vertical-align: middle" alt="Logo"> | |
| <span class="II-Bench" style="vertical-align: middle">II-Bench</span> | |
| </h1> | |
| <h2 class="subtitle is-3 publication-subtitle"> | |
| An Image Implication Understanding Benchmark for Multimodal Large Language Models | |
| </h2> | |
| <p style="color: red; font-size: 1.5em; font-weight: bold;">NeurIPS 2024 D&B Track</p> | |
| <!-- | |
| <div class="is-size-5 publication-authors"> | |
| <span class="author-block"> | |
| <a href="https://xiangyue9607.github.io/" style="text-decoration: none; color: inherit;">Xiang Yue*<sup style="color:#6fbf73;">†,1</sup></a>, | |
| </span> | |
| <span class="author-block"> | |
| <a href="https://yuanshengni.github.io/" style="text-decoration: none; color: inherit;">Yuansheng Ni*<sup style="color:#ffac33;">2</sup></a> | |
| , | |
| </span> | |
| <span class="author-block"> | |
| <a href="https://drogozhang.github.io/" style="text-decoration: none; color: inherit;">Kai Zhang*<sup style="color:#ed4b82;">3</sup></a> | |
| , | |
| </span> | |
| <span class="author-block">Tianyu Zheng*<sup style="color:#007bff;">4</sup>,</span><br> | |
| <span class="author-block">Ruoqi Liu<sup style="color:#ed4b82;">3</sup>,</span> | |
| <span class="author-block">Ge Zhang<sup style="color:#ffac33;">2</sup>,</span> | |
| <span class="author-block">Samuel Stevens<sup style="color:#ed4b82;">3</sup>,</span> | |
| <span class="author-block">Dongfu Jiang<sup style="color:#ffac33;">2</sup>,</span> | |
| <span class="author-block">Weiming Ren<sup style="color:#ffac33;">2</sup>,</span> | |
| <span class="author-block">Yuxuan Sun<sup style="color:#007bff;">4</sup>,</span> | |
| <span class="author-block">Cong Wei<sup style="color:#ffac33;">2</sup>,</span> | |
| <span class="author-block">Botao Yu<sup style="color:#ed4b82;">3</sup>,</span> | |
| <span class="author-block">Ruibin Yuan<sup style="color:#ffac33;">5</sup>,</span> | |
| <span class="author-block">Renliang Sun<sup style="color:#ffac33;">2</sup>,</span> | |
| <span class="author-block">Ming Yin<sup style="color:#9b51e0;">7</sup>,</span> | |
| <span class="author-block">Boyuan Zheng<sup style="color:#ed4b82;">3</sup>,</span> | |
| <span class="author-block">Zhenzhu Yang<sup style="color:#007bff;">4</sup>,</span> | |
| <span class="author-block">Yibo Liu<sup style="color:#ed4b82;">6</sup>,</span> | |
| <span class="author-block">Wenhao Huang<sup style="color:#007bff;">4</sup>,</span><br> | |
| <span class="author-block"> | |
| <a href="https://web.cse.ohio-state.edu/~sun.397/" style="text-decoration: none; color: inherit;">Huan Sun*<sup style="color:#ed4b82;">3</sup></a> | |
| , | |
| </span> | |
| <span class="author-block"> | |
| <a href="https://ysu1989.github.io/" style="text-decoration: none; color: inherit;">Yu Su*<sup style="color:#ed4b82;">†,3</sup></a> | |
| , | |
| </span> | |
| <span class="author-block"> | |
| <a href="https://wenhuchen.github.io/" style="text-decoration: none; color: inherit;">Wenhu Chen*<sup style="color:#ffac33;">†,2</sup></a> | |
| </span> | |
| </div> | |
| <br> | |
| <div class="is-size-5 publication-authors"> | |
| <span class="author-block"><sup style="color:#6fbf73;">1</sup>IN.AI Research,</span> | |
| <span class="author-block"><sup style="color:#ffac33;">2</sup>University of Waterloo,</span> | |
| <span class="author-block"><sup style="color:#ed4b82;">3</sup>The Ohio State University,</span> | |
| <span class="author-block"><sup style="color:#007bff;">4</sup>Independent,</span></br> | |
| <span class="author-block"><sup style="color:#ffac33;">5</sup>Carnegie Mellon University,</span> | |
| <span class="author-block"><sup style="color:#ed4b82;">6</sup>University of Victoria,</span> | |
| <span class="author-block"><sup style="color:#9b51e0;">7</sup>Princeton University</span> | |
| </div> | |
| <br> | |
| <div class="is-size-5 publication-authors"> | |
| <span class="author-block">*Core Contributors</span><br> | |
| <span class="author-block">†Corresponding to:</span> | |
| <span class="author-block"><a href="mailto:xiangyue.work@gmail.com">xiangyue.work@gmail.com</a>,</span> | |
| <span class="author-block"><a href="mailto:su.809@osu.edu">su.809@osu.edu</a>,</span> | |
| <span class="author-block"><a href="mailto:wenhuchen@uwaterloo.ca">wenhuchen@uwaterloo.ca</a></span> | |
| </div> --> | |
| <div class="column has-text-centered"> | |
| <div class="publication-links"> | |
| <!-- PDF Link. --> | |
| <span class="link-block"> | |
| <!-- @PAN TODO: change links --> | |
| <a href="https://arxiv.org/pdf/2406.05862" class="external-link button is-normal is-rounded"> | |
| <span class="icon"> | |
| <i class="fas fa-file-pdf" aria-hidden="true"></i> | |
| </span> | |
| <span>arXiv</span> | |
| </a> | |
| </span> | |
| <!-- <span class="link-block">--> | |
| <!-- <!– @PAN TODO: change links –>--> | |
| <!-- <a href="https://zenodo.org/records/10546498"--> | |
| <!-- class="external-link button is-normal is-rounded">--> | |
| <!-- <span class="icon">--> | |
| <!-- <i class="fas fa-file-pdf"></i>--> | |
| <!-- </span>--> | |
| <!-- <span>zenodo</span>--> | |
| <!-- </a>--> | |
| <!-- </span>--> | |
| <span class="link-block"> | |
| <a href="https://huggingface.co/papers/2406.05862" class="external-link button is-normal is-rounded"> | |
| <span class="icon"> | |
| <p style="font-size:18px">🤗</p> | |
| </span> | |
| <span>HF Paper</span> | |
| </a> | |
| </span> | |
| <span class="link-block"> | |
| <a href="https://huggingface.co/datasets/m-a-p/II-Bench" class="external-link button is-normal is-rounded"> | |
| <span class="icon"> | |
| <!-- <i class="far fa-images"></i> --> | |
| <p style="font-size:18px">🤗</p> | |
| <!-- 🔗 --> | |
| </span> | |
| <span>Dataset</span> | |
| </a> | |
| </span> | |
| <span class="link-block"> | |
| <a href="https://github.com/II-Bench/II-Bench" class="external-link button is-normal is-rounded"> | |
| <span class="icon"> | |
| <i class="fab fa-github" aria-hidden="true"></i> | |
| </span> | |
| <span>Code</span> | |
| </a> | |
| </span> | |
| <!-- Dataset Link. --> | |
| <!-- Leaderboard Link. --> | |
| <span class="link-block"> | |
| <a href="index.html#leaderboard" | |
| class="external-link button is-normal is-rounded"> | |
| <span class="icon has-text-white"> | |
| <!-- <i class="fa-solid fa-trophy"></i>--> | |
| <p style="font-size:18px">🏆</p> | |
| </span> | |
| <span>Leaderboard</span> | |
| </a> | |
| </span> | |
| <!-- Visualization Link. --> | |
| <span class="link-block"> | |
| <a href="https://eval.ai/web/challenges/challenge-page/2334/overview" | |
| class="external-link button is-normal is-rounded"> | |
| <span class="icon has-text-white"> | |
| <p style="font-size:18px">📖</p> | |
| <!-- <i class="fa-solid fa-medal"></i>--> | |
| </span> | |
| <span>EvalAI</span> | |
| </a> | |
| </span> | |
| <!-- Twitter Link. --> | |
| <!-- <span class="link-block">--> | |
| <!-- <a href="https://twitter.com/GeZhang86038849/status/1749660947223044325"--> | |
| <!-- class="external-link button is-normal is-rounded">--> | |
| <!-- <span class="icon has-text-white">--> | |
| <!-- <i class="fa-brands fa-x-twitter"></i>--> | |
| <!-- <!– <p style="font-size:18px">🌐</p> –>--> | |
| <!-- </span>--> | |
| <!-- <span>Twitter</span>--> | |
| <!-- </a>--> | |
| <!-- </span>--> | |
| <!-- EvalAI Link. --> | |
| <!-- <span class="link-block">--> | |
| <!-- <a href="#examples"--> | |
| <!-- class="external-link button is-normal is-rounded">--> | |
| <!-- <span class="icon has-text-white">--> | |
| <!-- <i class="fa-solid fa-book"></i>--> | |
| <!-- </span>--> | |
| <!-- <span>Examples</span>--> | |
| <!-- </a>--> | |
| <!-- </span>--> | |
| </div> | |
| </div> | |
| </h2></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <style> | |
| .center { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 80%; | |
| } | |
| </style> | |
| <section class="hero teaser"> | |
| <div class="container is-max-desktop"> | |
| <!-- <div class="hero-body"> | |
| <img src="static/images/tease_scores.png" alt="Examples from the dataset"/> | |
| <h2 class="subtitle has-text-centered"> | |
| <span class="dnerf">Nerfies</span> turns selfie videos from your phone into | |
| free-viewpoint | |
| portraits. | |
| </h2> | |
| </div> --> | |
| <!-- <div class="box m-5"> --> | |
| <div class="content has-text-centered"> | |
| <img src="images/composition.jpg" alt="geometric reasoning" width="40%"> | |
| <p> Overview of II-Bench: II-Bench comprises 1,222 images, spanning six domains: life, art, society, psychology, environment and others.</p> | |
| </div> | |
| <!-- </div> --> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <div class="container" style="margin-bottom: 2vh;"> | |
| <!-- Abstract. --> | |
| <div class="columns is-centered has-text-centered"> | |
| <div class="column is-four-fifths"> | |
| <h2 class="title ">🔔News</h2> | |
| <div class="content has-text-justified"> | |
| <p> | |
| <b>🔥[2024-09-26]: II-Bench has been accepted to the NeurIPS 2024 Datasets and Benchmarks.</b> | |
| </p> | |
| <p> | |
| <b>🔥[2024-06-26]: We released <a href="https://eval.ai/web/challenges/challenge-page/2334/overview">II-Bench</a> challenge on <a href="https://eval.ai/">EvalAI</a>. You can submit your results and evaluate them there.😆</b> | |
| </p> | |
| <p> | |
| <b>🌟[2024-06-25]: We added the results of latest Claude 3.5 Sonnet, which achieved the SOTA performance among all models so far.</b> | |
| </p> | |
| </div> | |
| <h2 class="title is-3">Introduction</h2> | |
| <div class="content has-text-justified"> | |
| <p> | |
| The rapid advancements in the development of multimodal large language models (MLLMs) have consistently led to new breakthroughs on various benchmarks. | |
| In response, numerous challenging and comprehensive benchmarks have been proposed to more accurately assess the capabilities of MLLMs. | |
| However, there is a dearth of exploration of the higher-order perceptual capabilities of MLLMs. | |
| To fill this gap, we propose the <b>I</b>mage <b>I</b>mplication understanding <b>Bench</b>mark, <b>II-Bench</b>, which aims to evaluate the model's higher-order perception of images. | |
| Our extensive experiments on 20 MLLMs reveal significant performance gaps between models and humans, particularly in abstract domains like Art and Psychology. | |
| Our findings highlight the need for improved emotional understanding in MLLMs and suggest that incorporating emotional polarity information can enhance model performance. | |
| II-Bench aims to inspire advancements in multimodal AI research and foster the development of more sophisticated artificial general intelligence (AGI). | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!--/ Abstract. --> | |
| </div> | |
| </section> | |
| <!-- DATASET SECTION --> | |
| <section class="hero is-light is-small"> | |
| <div class="hero-body has-text-centered"> | |
| <h1 class="title is-1 mmmu"> | |
| <img src="images/logo.png" style="width:1em;vertical-align: middle" alt="Logo"> | |
| <span class="mmmu" style="vertical-align: middle">II-Benchmark</span> | |
| </h1> | |
| </div> | |
| </section> | |
| <!-- <section class="section"> | |
| <div class="container" style="margin-bottom: 2vh;"> | |
| <div class="columns is-centered has-text-centered"> | |
| <div class="column is-four-fifths"> | |
| <h2 class="title is-3">Introduction</h2> | |
| <div class="content has-text-justified"> | |
| <p> --> | |
| <section class="section"> | |
| <div class="container"> | |
| <div class="columns is-centered has-text-centered"> | |
| <!-- <div class="column is-full-width has-text-centered"> --> | |
| <div class="column is-four-fifths"> | |
| <h2 class="title is-3">Overview</h2> | |
| <div class="content has-text-justified"> | |
| <p> | |
| We introduce the <b>I</b>mage <b>I</b>mplication Understanding <b>Bench</b>mark <b>II-Bench</b>, a new benchmark measuring the higher-order perceptual, reasoning and comprehension abilities of MLLMs when presented with complex implication images. | |
| These images, including abstract artworks, comics and posters, possess visual implications that require an understanding of visual details and reasoning ability. | |
| II-Bench reveals whether current MLLMs, leveraging their inherent comprehension abilities, can accurately decode the metaphors embedded within the complex and abstract information presented in these images. | |
| <img src="images/II-bench-sample.jpg" alt="algebraic reasoning" class="center"> | |
| <br> | |
| </p><p> | |
| II-Bench contains a total of 1,222 various images. | |
| These images are manually collected and annotated by 50 undergraduate students from various disciplines and institutions, with sources from multiple renowned illustration websites. | |
| Each image is manually designed with one to three multiple-choice questions, each with six options and only one correct answer. | |
| The questions cover the metaphors, symbolism, and detailed understanding of the images. | |
| The benchmark includes a total of 1,434 multiple-choice questions, with 1,399 questions used to construct the test set and 35 questions used to construct the development and validation set for few-shot tasks. | |
| </p></div> | |
| </div> | |
| </div> | |
| <!-- <div class="columns is-centered has-text-centered">--> | |
| <!-- <!– <div class="column is-full-width has-text-centered"> –>--> | |
| <!-- <div class="column is-four-fifths">--> | |
| <!-- <h2 class="title is-3">Comparisons with Existing Benchmarks</h2>--> | |
| <!-- <div class="content has-text-justified">--> | |
| <!-- <p>--> | |
| <!-- To further distinguish the difference between <i>dataset</i> and other existing ones, we elaborate the benchmark details in Figure. --> | |
| <!-- From the <i>breadth</i> perspective, the prior benchmarks are heavily focused on daily knowledge and common sense. --> | |
| <!-- The covered image format is also limited. Our benchmark aims to cover college-level knowledge with 30 image formats including diagrams, --> | |
| <!-- tables, charts, chemical structures, photos, paintings, geometric shapes, music sheets, medical images, etc. --> | |
| <!-- In the <i>depth</i> aspect, the previous benchmarks normally require commonsense knowledge or simple physical or temporal reasoning. --> | |
| <!-- In contrast, our benchmark requires deliberate reasoning with college-level subject knowledge.--> | |
| <!-- </p>--> | |
| <!-- <div class="content has-text-centered">--> | |
| <!-- <img src="c_static/images/table1.jpg" alt="algebraic reasoning" class="center">--> | |
| <!-- <p> Sampled II-Bench examples from each discipline. The questions and images need expert-level knowledge to understand and reason.</p>--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <div class="columns is-centered m-6"> | |
| <div class="column is-full has-text-centered content"> | |
| <h2 class="title is-3">Statistics</h2> | |
| <div id="results-carousel" class="carousel results-carousel"> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="images/II-bench-type.png" alt="algebraic reasoning" width="90%"> | |
| <p> II-Bench specific image type and domain statistics.</p> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="images/statics.png" alt="arithmetic reasoning" width="90%"> | |
| <p> Key statistics of the II-Bench benchmark</p> | |
| </div> | |
| </div> | |
| <!-- <div class="box m-5">--> | |
| <!-- <div class="content has-text-centered">--> | |
| <!-- <img src="c_static/images/image_type_count.jpg" alt="arithmetic reasoning" width="95%"/>--> | |
| <!-- <p> Distribution of image types in the II-Bench dataset</p>--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- <div class="columns is-centered m-6"> | |
| <div class="column is-max-desktop has-text-centered"> | |
| <h2 class="title is-3" id="visualization">Visualization</h2> | |
| <iframe src="visualizer/explore.html" style="width: 100%;min-height: 100vh; border-radius: 20px;"></iframe> | |
| </div> | |
| </div> --> | |
| </div> | |
| </section> | |
| <!-- RESULTS SECTION --> | |
| <section class="hero is-light is-small"> | |
| <div class="hero-body has-text-centered"> | |
| <h1 class="title is-1 mmmu">Experiment Results</h1> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <div class="container"> | |
| <!-------------------------------------------------------------------- RESULTS SECTION --------------------------------------------------------------------> | |
| <div class="columns is-centered m-6"> | |
| <div class="column is-full has-text-centered content"> | |
| <h2 class="title is-3" id="leaderboard">Leaderboard</h2> | |
| <div class="content"> | |
| <div class="content has-text-justified"> | |
| <p> | |
| We conduct experiments on II-Bench using both open-source and closed-source MLLMs. For | |
| each model, we employ eight different settings: 1-shot, 2-shot, 3-shot, zero-shot (None), CoT, | |
| Domain, Emotion and Rhetoric. "Emotion" denotes prompts where the model is informed about the | |
| emotional polarity of the images(e.g., positive, negative), "Domain" involves adding information | |
| about the image’s domain (e.g., life, environment) to the prompt, and "Rhetoric" signifies prompt | |
| with information about the rhetorical devices used in the image (e.g., metaphor, personification), | |
| while "None" indicates the use of standard prompts without any additional information. Uniform | |
| prompts are applied across all MLLMs. | |
| </p> | |
| </div> | |
| <div class="model-labels-container"> | |
| <!-- <span class="leaderboard-label" style="background-color: #f8fffe;">Open-Source</span>--> | |
| <!-- <span class="leaderboard-label" style="background-color: #f9f2f8;">Closed</span>--> | |
| <span class="leaderboard-label" style="background-color: #e4efdc;">Open-Source</span> | |
| <span class="leaderboard-label" style="background-color: #e0ebf3;">Human</span> | |
| <span class="leaderboard-label" style="background-color: #def9cb;">Proprietary</span> | |
| </div> | |
| <table id="table1" class="js-sort-table"> | |
| <tbody><tr> | |
| <td class="js-sort-number"><strong>Reset</strong></td> | |
| <td class="js-sort-number"><strong>Overall</strong></td> | |
| <td class="js-sort-number"><strong>Life</strong></td> | |
| <td class="js-sort-number"><strong>Art</strong></td> | |
| <td class="js-sort-number"><strong>Society</strong></td> | |
| <td class="js-sort-number"><strong>Psychology</strong></td> | |
| <td class="js-sort-number"><strong>Environment</strong></td> | |
| <td class="js-sort-number"><strong>Others</strong></td> | |
| <td class="js-sort-number"><strong>Positive</strong></td> | |
| <td class="js-sort-number"><strong>Neutral</strong></td> | |
| <td class="js-sort-number"><strong>Negative</strong></td> | |
| </tr> | |
| <tr style="background-color: #def9cb;"> | |
| <td style="text-align: left;"> | |
| <b> Claude 3.5 sonnet </b> | |
| </td> | |
| <td> <b>80.9</b> </td> | |
| <td> <b>81.4</b> </td> | |
| <td> <b>77.6</b> </td> | |
| <td> <b>80.9</b> </td> | |
| <td> <b>78.3</b> </td> | |
| <td> <b>86.3</b> </td> | |
| <td style="text-decoration: underline;"> 83.1 </td> | |
| <td> <b>81.1</b> </td> | |
| <td> <b>80.9</b> </td> | |
| <td > <b>80.9</b> </td> | |
| </tr> | |
| <tr style="background-color: #def9cb;"> | |
| <td style="text-align: left;"> | |
| <b> Qwen-VL-MAX </b> | |
| </td> | |
| <td style="text-decoration: underline;"> 74.8 </td> | |
| <td style="text-decoration: underline;"> 74.7 </td> | |
| <td> 71.8 </td> | |
| <td style="text-decoration: underline;"> 74.6 </td> | |
| <td style="text-decoration: underline;"> 73.0 </td> | |
| <td> 76.5 </td> | |
| <td> <b>84.6</b> </td> | |
| <td style="text-decoration: underline;"> 80.1</td> | |
| <td style="text-decoration: underline;"> 74.5 </td> | |
| <td> 72.9 </td> | |
| </tr> | |
| <tr style="background-color: #def9cb;"> | |
| <td style="text-align: left;"> | |
| <b> Gemini-1.5 Pro </b> | |
| </td> | |
| <td> 73.9 </td> | |
| <td> 73.7 </td> | |
| <td style="text-decoration: underline;"> 74.1 </td> | |
| <td> 74.4 </td> | |
| <td> 63.2 </td> | |
| <td style="text-decoration: underline;"> 80.4 </td> | |
| <td style="text-decoration: underline;"> 83.1 </td> | |
| <td style="text-decoration: underline;"> 80.1 </td> | |
| <td> 70.8 </td> | |
| <td style="text-decoration: underline;"> 75.4</td> | |
| </tr> | |
| <tr style="background-color: #def9cb;"> | |
| <td style="text-align: left;"> | |
| <b> GPT-4o </b> | |
| </td> | |
| <td> 72.6 </td> | |
| <td> 72.5 </td> | |
| <td> 72.9 </td> | |
| <td> 73.3 </td> | |
| <td > 68.4 </td> | |
| <td> 76.5 </td> | |
| <td> 75.4 </td> | |
| <td> 78.6 </td> | |
| <td> 71.2 </td> | |
| <td> 72.5 </td> | |
| </tr> | |
| <tr style="background-color: #def9cb;"> | |
| <td style="text-align: left;"> | |
| <b> GPT-4V </b> | |
| </td> | |
| <td> 65.9 </td> | |
| <td> 65.0 </td> | |
| <td> 69.4 </td> | |
| <td> 65.3 </td> | |
| <td> 59.9 </td> | |
| <td> 76.5 </td> | |
| <td> 80.0 </td> | |
| <td> 69.4 </td> | |
| <td> 66.0 </td> | |
| <td> 64.0 </td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b> LLaVA-1.6-34B </b> | |
| </td> | |
| <td> <b>73.8</b> </td> | |
| <td> <b>73.8</b> </td> | |
| <td style="text-decoration: underline;"> 71.8 </td> | |
| <td> <b>73.3</b> </td> | |
| <td> <b>71.1</b> </td> | |
| <td style="text-decoration: underline;"> 78.4 </td> | |
| <td style="text-decoration: underline;"> 81.5 </td> | |
| <td> <b>79.1</b> </td> | |
| <td> <b>72.9</b> </td> | |
| <td> <b>72.9</b> </td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b> CogVLM2-Llama3-Chat </b> | |
| </td> | |
| <td style="text-decoration: underline;"> 70.3 </td> | |
| <td style="text-decoration: underline;"> 68.9 </td> | |
| <td> 68.2 </td> | |
| <td style="text-decoration: underline;"> 70.9 </td> | |
| <td style="text-decoration: underline;"> 67.8 </td> | |
| <td> 72.5 </td> | |
| <td> <b>86.2</b> </td> | |
| <td> 69.9 </td> | |
| <td style="text-decoration: underline;"> 71.1 </td> | |
| <td style="text-decoration: underline;"> 69.1 </td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b> MiniCPM-Llama3-2.5 </b> | |
| </td> | |
| <td>69.4</td> | |
| <td>68.4</td> | |
| <td style="text-decoration: underline;"> 71.8 </td> | |
| <td>69.4</td> | |
| <td>64.5</td> | |
| <td><b>80.4</b></td> | |
| <td>78.5</td> | |
| <td style="text-decoration: underline;"> 75.0 </td> | |
| <td>69.3</td> | |
| <td>66.9</td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b>Yi-VL-34B-Chat</b> | |
| </td> | |
| <td>67.9</td> | |
| <td>67.5</td> | |
| <td>70.6</td> | |
| <td>67.7</td> | |
| <td>63.8</td> | |
| <td>70.6</td> | |
| <td>76.9</td> | |
| <td>74.0</td> | |
| <td>68.2</td> | |
| <td>64.5</td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b>Idefics2-8B</b> | |
| </td> | |
| <td>67.7</td> | |
| <td>67.2</td> | |
| <td><b>74.1</b></td> | |
| <td>67.7</td> | |
| <td>62.5</td> | |
| <td>74.5</td> | |
| <td>70.8</td> | |
| <td>68.9</td> | |
| <td>67.0</td> | |
| <td>68.4</td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b>InternVL-Chat-1.5</b> | |
| </td> | |
| <td>66.3</td> | |
| <td>63.6</td> | |
| <td>65.9</td> | |
| <td>68.5</td> | |
| <td>65.8</td> | |
| <td>64.7</td> | |
| <td>76.9</td> | |
| <td>73.5</td> | |
| <td>65.4</td> | |
| <td>64.5</td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b>InternLM-XComposer2-VL</b> | |
| </td> | |
| <td>62.1</td> | |
| <td>61.7</td> | |
| <td>62.4</td> | |
| <td>62.3</td> | |
| <td>58.6</td> | |
| <td>70.6</td> | |
| <td>66.2</td> | |
| <td>65.8</td> | |
| <td>63.0</td> | |
| <td>58.7</td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b>Yi-VL-6B-Chat</b> | |
| </td> | |
| <td>61.3</td> | |
| <td>60.9</td> | |
| <td>63.5</td> | |
| <td>60.7</td> | |
| <td>56.6</td> | |
| <td>66.7</td> | |
| <td>72.3</td> | |
| <td>61.7</td> | |
| <td>61.7</td> | |
| <td>61.1</td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b>DeepSeek-VL-Chat-7B</b> | |
| </td> | |
| <td>60.3</td> | |
| <td>59.0</td> | |
| <td>58.8</td> | |
| <td>58.4</td> | |
| <td>61.8</td> | |
| <td>68.6</td> | |
| <td>76.9</td> | |
| <td>65.8</td> | |
| <td>60.1</td> | |
| <td>58.0</td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b>BLIP-2 FLAN-T5-XXL</b> | |
| </td> | |
| <td>57.8</td> | |
| <td>57.1</td> | |
| <td>63.5</td> | |
| <td>57.0</td> | |
| <td>53.3</td> | |
| <td>66.7</td> | |
| <td>66.2</td> | |
| <td>67.9</td> | |
| <td>57.2</td> | |
| <td>54.3</td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b>Mantis-8B-siglip-Llama3</b> | |
| </td> | |
| <td>57.5</td> | |
| <td>56.8</td> | |
| <td>61.2</td> | |
| <td>57.5</td> | |
| <td>53.9</td> | |
| <td>64.7</td> | |
| <td>61.5</td> | |
| <td>59.2</td> | |
| <td>58.0</td> | |
| <td>55.6</td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b>InstructBLIP-T5-XXL</b> | |
| </td> | |
| <td>56.7</td> | |
| <td>56.2</td> | |
| <td>58.8</td> | |
| <td>58.6</td> | |
| <td>45.4</td> | |
| <td>64.7</td> | |
| <td>64.6</td> | |
| <td>63.3</td> | |
| <td>56.1</td> | |
| <td>54.6</td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b>Qwen-VL-Chat</b> | |
| </td> | |
| <td>53.4</td> | |
| <td>53.2</td> | |
| <td>49.4</td> | |
| <td>52.1</td> | |
| <td>50.0</td> | |
| <td>60.8</td> | |
| <td>72.3</td> | |
| <td>56.1</td> | |
| <td>52.6</td> | |
| <td>53.6</td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b>mPLUGw-OWL2</b> | |
| </td> | |
| <td>53.2</td> | |
| <td>54.0</td> | |
| <td>56.5</td> | |
| <td>50.5</td> | |
| <td>52.0</td> | |
| <td>60.8</td> | |
| <td>56.9</td> | |
| <td>55.6</td> | |
| <td>52.6</td> | |
| <td>53.1</td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b>BLIP-2 FLAN-T5-XL</b> | |
| </td> | |
| <td>52.8</td> | |
| <td>53.0</td> | |
| <td>58.8</td> | |
| <td>52.5</td> | |
| <td>42.8</td> | |
| <td>64.7</td> | |
| <td>58.5</td> | |
| <td>56.1</td> | |
| <td>52.9</td> | |
| <td>51.0</td> | |
| </tr> | |
| <tr style="background-color: #e4efdc;"> | |
| <td style="text-align: left;"> | |
| <b>InstructBLIP-T5-XL</b> | |
| </td> | |
| <td>47.3</td> | |
| <td>45.6</td> | |
| <td>48.2</td> | |
| <td>48.8</td> | |
| <td>44.7</td> | |
| <td>52.9</td> | |
| <td>50.8</td> | |
| <td>46.9</td> | |
| <td>48.3</td> | |
| <td>45.4</td> | |
| </tr> | |
| <tr style="background-color: #e0ebf3;"> | |
| <td style="text-align: left;"> | |
| <b> Human_avg </b> | |
| </td> | |
| <td> 90.3 </td> | |
| <td> 90.0 </td> | |
| <td> 88.2 </td> | |
| <td> 91.4 </td> | |
| <td> 86.6 </td> | |
| <td> 96.1 </td> | |
| <td> 92.3 </td> | |
| <td> 84.7 </td> | |
| <td> 89.1 </td> | |
| <td> 92.2 </td> | |
| </tr> | |
| <tr style="background-color: #e0ebf3;"> | |
| <td style="text-align: left;"> | |
| <b> Human_best </b> | |
| </td> | |
| <td> <b>98.2</b> </td> | |
| <td> <b>97.9</b> </td> | |
| <td> <b>98.8</b> </td> | |
| <td> <b>98.3</b> </td> | |
| <td> <b>97.4</b> </td> | |
| <td> <b>100.0</b> </td> | |
| <td> <b>100.0</b> </td> | |
| <td> <b>98.0</b> </td> | |
| <td> <b>98.0</b> </td> | |
| <td> <b>98.8</b> </td> | |
| </tr> | |
| <!-- <tr> | |
| <td colspan="8" style="font-size: 18px;"><b>Large Language Models (LLMs): Only Text as Input</b></td> | |
| </tr> --> | |
| <!-- <tr style="background-color: #f8fffe;"> | |
| <td style="text-align: left;"><b>Llama2 7B</b></td> | |
| <td>28.7</td> | |
| <td>30.7</td> | |
| <td>27.2</td> | |
| <td>26.7</td> | |
| <td>27.7</td> | |
| <td>32.6</td> | |
| <td>29.8</td> | |
| </tr> | |
| <tr style="background-color: #f4fdf5;"> | |
| <td style="text-align: left;"><b>FLAN-T5-XXL</b></td> | |
| <td><b>31.2</b></td> | |
| <td>36.8</td> | |
| <td><b>28.9</b></td> | |
| <td>26.7</td> | |
| <td>32.8</td> | |
| <td><b>44.8</b></td> | |
| <td><b>28.3</b></td> | |
| </tr> | |
| <tr style="background-color: #f4fdf5;"> | |
| <td style="text-align: left;"><b>FLAN-T5-XXL + OCR</b></td> | |
| <td><b>31.9</b></td> | |
| <td>36.2</td> | |
| <td>28.8</td> | |
| <td>26.2</td> | |
| <td>32.6</td> | |
| <td><b>50.5</b></td> | |
| <td><b>29.7</b></td> | |
| </tr> | |
| <tr style="background-color: #f4fdf5;"> | |
| <td style="text-align: left;"><b>FLAN-T5-XXL + LLaVA Caption</b></td> | |
| <td><b>31.9</b></td> | |
| <td><b>38.4</b></td> | |
| <td>27.8</td> | |
| <td><b>27.0</b></td> | |
| <td><b>33.2</b></td> | |
| <td>49.9</td> | |
| <td>28.7</td> | |
| </tr> | |
| <tr style="background-color: #e7fde9;"> | |
| <td style="text-align: left;"><b>Vicuna-13B</b></td> | |
| <td>31.0</td> | |
| <td>35.1</td> | |
| <td><b>30.1</b></td> | |
| <td>24.7</td> | |
| <td>31.4</td> | |
| <td>44.8</td> | |
| <td>30.1</td> | |
| </tr> | |
| <tr style="background-color: #e7fde9;"> | |
| <td style="text-align: left;"><b>Vicuna-13B + OCR</b></td> | |
| <td>31.9</td> | |
| <td>37.1</td> | |
| <td>28.6</td> | |
| <td><b>26.5</b></td> | |
| <td>32.0</td> | |
| <td>49.3</td> | |
| <td>30.0</td> | |
| </tr> | |
| <tr style="background-color: #e7fde9;"> | |
| <td style="text-align: left;"><b>Vicuna-13B + LLaVA Caption</b></td> | |
| <td><b>32.7</b></td> | |
| <td><b>42.0</b></td> | |
| <td>26.8</td> | |
| <td>26.2</td> | |
| <td><b>33.4</b></td> | |
| <td><b>49.4</b></td> | |
| <td><b>31.4</b></td> | |
| </tr> --> | |
| <!-- <tr style="background-color: #f8fffe;"> | |
| <td style="text-align: left;"><b>GPT-4 Text</b></td> | |
| <td>33.8</td> | |
| <td>32.9</td> | |
| <td>28.5</td> | |
| <td>30.6</td> | |
| <td>41.3</td> | |
| <td>53.0</td> | |
| <td>28.4</td> | |
| </tr> --> | |
| </tbody></table> | |
| <p> Overall results of different MLLMs and humans on different domains and emotions. The | |
| best-performing model in each category is <b>in-bold</b>, and the second best is <u>underlined</u>. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-------------------------------------------------------------------- prompt skills --------------------------------------------------------------------> | |
| <div class="columns is-centered m-6"> | |
| <div class="column is-full has-text-centered content"> | |
| <h2 class="title is-3">Different Prompt Skills</h2> | |
| <div class="content has-text-justified"> | |
| <p> | |
| <b>Analysis of Chain-of-Thought (CoT)</b>. The results indicate that CoT had no significant effect on improving accuracy. | |
| In some cases, particularly with smaller open-source models, the accuracy even declined when CoT was used. | |
| For example, CogVLM2-Llama3-Chat-19B scores 70.3% without CoT and drops to 69.3% with CoT, InternVL-Chat-1.5 scores 66.3% and 63.3% as the same. | |
| These findings align with other benchmarks, which show that CoT is not particularly effective for image understanding tasks. | |
| </p> | |
| <p> | |
| <b>Analysis of Different Types and Domains</b>. To evaluate the impact of different label information on model accuracy, we conduct an ablation study by providing corresponding label information (Emotion, Domain, Rhetoric) for the images in the prompt. | |
| This outcome is consistent with the human perspective of image metaphor comprehension. | |
| Emotion labels likely provide more intuitive and salient cues that align closely with human interpretative processes, thereby facilitating better model performance. | |
| In contrast, Domain and Rhetoric labels, while still beneficial, are not as immediately intuitive or universally applicable, thus resulting in slightly lower effectiveness in improving model accuracy. | |
| At the same time, from the perspective of model training, the model has a normal understanding of emotion, unlike the specific nouns we define ourselves in the Rhetoric and Domain labels. | |
| The model does not see many descriptions of such specific nouns during pre-training, which does not help improve accuracy. | |
| </p> | |
| <div class="content has-text-centered"> | |
| <img src="images/prompt.png" width="75%"> | |
| <p>Overall results of different prompts on II-Bench.The label(Emotion, Domain, Rhetoric) means providing corresponding information for the images in the prompt. | |
| The best-performing model in each category is <b>in-bold</b>, and the second best is <u>underlined</u> .</p> | |
| </div> | |
| <p> | |
| <b>Analysis of Few-shot Examples.</b>. Specifically, the performance tends to drop as more examples are provided. | |
| This can be attributed to the models’ inferior multi-image capabilities compared to their single-image capabilities, leading to a decline in accuracy with an increasing number of shots. | |
| Additionally, as the number of shots increases, the input length becomes longer, and the model’s long text ability is insufficient, resulting in poor long context performance. | |
| An example is Qwen-VL-Max, where inputs exceeding 6,000 tokens cause errors. | |
| Moreover, chat models generally exhibit good instruction following ability, reducing the necessity for few-shot examples. | |
| </p> | |
| </div> | |
| <div class="content has-text-centered"> | |
| <img src="images/shot.png" width="73%"> | |
| <p>Few-shot results of different models on the II-Bench. * means exceeds the context length.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-------------------------------------------------------------------- Difficulty Levels SECTION --------------------------------------------------------------------> | |
| <!--<div class="columns is-centered m-6">--> | |
| <!-- <div class="column is-full has-text-centered content">--> | |
| <!-- <h2 class="title is-3">Different Difficulty Levels</h2>--> | |
| <!-- <div class="content has-text-justified">--> | |
| <!-- <p>--> | |
| <!-- We conduct result decomposition across question difficulties, as shown in table below.--> | |
| <!-- Notably, there is a larger gap between the best open-source LMM, i.e. Yi-VL-34B, and GPT-4V when facing the medium and hard questions.--> | |
| <!-- It is another strong evidence of the observation that the key disparity between Open-source LMMs and GPT-4V is the capacity to calculate and reason given complex conditions.--> | |
| <!-- </p>--> | |
| <!-- </div>--> | |
| <!-- <div class="content has-text-centered">--> | |
| <!-- <img src="c_static/images/table5.jpg" width="75%">--> | |
| <!-- <p> Result decomposition across question difficulty levels. <b>bold results</b> in LMMs indicate the best results for all models, and the <b>blue results</b> indicate the best results among the open-source models.</p>--> | |
| <!-- </div> --> | |
| <!-- </div>--> | |
| <!--</div>--> | |
| <!-------------------------------------------------------------------- Error Analysis SECTION --------------------------------------------------------------------> | |
| <div class="columns is-centered m-6"> | |
| <div class="column is-full has-text-centered content"> | |
| <h2 class="title is-3">Error Analysis</h2> | |
| <div class="content has-text-justified"> | |
| <p> | |
| In order to perform a comprehensive error analysis of GPT-4V’s performance on II-Bench, we randomly select 100 erroneous samples from each domain, in proportion to their representation in the dataset. | |
| These samples are meticulously analyzed by expert annotators. | |
| GPT-4V’s errors can be categorized into the following types: Metaphorical Misunderstanding, Detail Misunderstanding, Detail Ignorance, Surface-Level Interpretation, Reasoning Error, Reject to Answer and Answer Extraction Error. | |
| </p> | |
| </div> | |
| <div class="content has-text-centered"> | |
| <img src="images/error.png" alt="error distribution" width="50%"> | |
| <p>GPT-4V error response distribution.</p> | |
| </div> | |
| <!-- <div id="results-carousel" class="carousel results-carousel"> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="static/images/error_distribution_1.Jpeg" alt="algebraic reasoning" width="45%"/> | |
| <p> Error distribution over 150 annotated GPT-4V errors.</p> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="static/images/error_case_main_text_1_1.Jpeg" alt="arithmetic reasoning" width="45%"/> | |
| <p> A basic perceptual error, easy for humans but challenging for GPT-4V.</p> | |
| </div> | |
| </div> | |
| </div> --> | |
| </div> | |
| </div> | |
| <!-------------------------------------------------------------------- Error Example --------------------------------------------------------------------> | |
| <div class="columns is-centered m-6"> | |
| <div class="column is-full has-text-centered content"> | |
| <h2 class="title is-3" id="examples">Error Examples</h2> | |
| <div id="results-carousel" class="carousel results-carousel"> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/7.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/8.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/9.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/10.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/11.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/12.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/13.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/14.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/15.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/16.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/17.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/18.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/19.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/20.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/28.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/29.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/30.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/31.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/32.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/33.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/34.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/35.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/36.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/37.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/38.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/39.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/40.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/45.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/46.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/47.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/48.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/49.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/54.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/55.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/56.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/57.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/61.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/62.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/63.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/64.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/65.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/66.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/67.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/68.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/69.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/74.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/75.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/76.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="error/77.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-------------------------------------------------------------------- Correct Example --------------------------------------------------------------------> | |
| <div class="columns is-centered m-6"> | |
| <div class="column is-full has-text-centered content"> | |
| <h2 class="title is-3">Correct Examples</h2> | |
| <div id="results-carousel" class="carousel results-carousel"> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/1.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/2.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/3.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/4.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/5.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/6.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/21.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/22.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/23.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/24.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/25.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/26.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/27.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/41.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/42.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/43.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/44.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/50.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/51.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/52.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/53.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/58.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/59.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/60.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/70.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/71.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/72.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| <div class="box m-5"> | |
| <div class="content has-text-centered"> | |
| <img src="right/73.png" alt="grade-lv" width="60%"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-------------------------------------------------------------------- RESULTS SECTION --------------------------------------------------------------------> | |
| </div> | |
| </section> | |
| <!-- @PAN TODO: bibtex --> | |
| <section class="section" id="BibTeX"> | |
| <div class="container is-max-desktop content"> | |
| <h2 class="title is-3 has-text-centered">BibTeX</h2> | |
| <pre><code>@article{liu2024ii, | |
| title={II-Bench: An Image Implication Understanding Benchmark for Multimodal Large Language Models}, | |
| author={Liu, Ziqiang and Fang, Feiteng and Feng, Xi and Du, Xinrun and Zhang, Chenhao and Wang, Zekun and Bai, Yuelin and Zhao, Qixuan and Fan, Liyang and Gan, Chengguang and others}, | |
| journal={arXiv preprint arXiv:2406.05862}, | |
| year={2024} | |
| } | |
| </code></pre> | |
| </div> | |
| </section> | |
| <footer class="footer"> | |
| <!-- <div class="container"> --> | |
| <div class="content has-text-centered"> | |
| </div> | |
| <div class="columns is-centered"> | |
| <div class="column is-8"> | |
| <div class="content"> | |
| <p> | |
| This website is website adapted from <a href="https://mmmu-benchmark.github.io/"">MMMU</a>, licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative | |
| Commons Attribution-ShareAlike 4.0 International License</a>. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- </div> --> | |
| </footer> | |
| <script> | |
| // function changeButtonText() { | |
| // var button = document.getElementById('toggleButton'); | |
| // if (button.innerHTML.includes("Test Set Leaderboard")) { | |
| // button.innerHTML = "<b style='font-size: larger;'>Validation Set Leaderboard</b> (Click to Switch)"; | |
| // } else { | |
| // button.innerHTML = "<b style='font-size: larger;'>Test Set Leaderboard</b> (Click to Switch)"; | |
| // } | |
| // } | |
| document.addEventListener('DOMContentLoaded', function() { | |
| var tables = document.querySelectorAll('table'); | |
| tables.forEach(function(table) { | |
| if (!table) return; | |
| var initialRows = Array.from(table.rows).slice(1); | |
| table.addEventListener('click', function(event) { | |
| var clickedCell = event.target.closest('td, th'); | |
| if (!clickedCell) return; | |
| var headerRow = clickedCell.parentNode; | |
| var columnIndex = Array.from(headerRow.cells).indexOf(clickedCell); | |
| var type = clickedCell.getAttribute('data-type'); | |
| if (headerRow.rowIndex === 0) { | |
| if (columnIndex === 0) { | |
| table.tBodies[0].innerHTML = ''; | |
| initialRows.forEach(row => table.tBodies[0].appendChild(row.cloneNode(true))); | |
| } | |
| } | |
| }); | |
| }); | |
| }); | |
| function sortTable(table, column, type, asc) { | |
| var tbody = table.tBodies[0]; | |
| var rows = Array.from(tbody.rows); | |
| rows.sort(function(a, b) { | |
| var valA = a.cells[column].textContent; | |
| var valB = b.cells[column].textContent; | |
| if (type === 'number') { | |
| valA = parseFloat(valA); | |
| valB = parseFloat(valB); | |
| } | |
| return asc ? valA - valB : valB - valA; | |
| }); | |
| rows.forEach(row => tbody.appendChild(row)); | |
| } | |
| // 切换表格的函数 | |
| // function toggleTables () { | |
| // var table1 = document.getElementById('table1'); | |
| // var table2 = document.getElementById('table2'); | |
| // table1.classList.toggle('hidden'); | |
| // table2.classList.toggle('hidden'); | |
| // } | |
| document.getElementById('toggleButton').addEventListener('click', toggleTables); | |
| const canvas = document.getElementById('difficulty_level_chart'); | |
| canvas.style.width = '500px'; | |
| canvas.style.height = '120px'; | |
| const ctx = document.getElementById('difficulty_level_chart').getContext('2d'); | |
| const difficulty_level_chart = new Chart(ctx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Easy', 'Medium', 'Hard', 'Overall'], | |
| datasets: [{ | |
| label: 'Fuyu-8B', | |
| data: [28.9, 27, 26.4, 27.4], | |
| backgroundColor: 'rgba(196, 123, 160, 0.6)', | |
| borderColor: 'rgba(196, 123, 160, 1)', | |
| borderWidth: 1, | |
| hoverBackgroundColor: 'rgba(196, 123, 160, 1)' | |
| }, | |
| { | |
| label: 'Qwen-VL-7B', | |
| data: [39.4, 31.9, 27.6, 32.9], | |
| backgroundColor: 'rgba(245, 123, 113, 0.6)', | |
| borderColor: 'rgba(245, 123, 113, 1)', | |
| borderWidth: 1, | |
| hoverBackgroundColor: 'rgba(245, 123, 113, 1)' | |
| }, | |
| { | |
| label: 'LLaVA-1.5-13B', | |
| data: [41.3, 32.7, 26.7, 33.6], | |
| backgroundColor: 'rgba(255, 208, 80, 0.6)', | |
| borderColor: 'rgba(255, 208, 80, 1)', | |
| borderWidth: 1, | |
| hoverBackgroundColor: 'rgba(255, 208, 80, 1)' | |
| }, | |
| { | |
| label: 'InstructBLIP-T5-XXL', | |
| data: [40.3, 32.3, 29.4, 33.8], | |
| backgroundColor: 'rgba(110, 194, 134, 0.6)', | |
| borderColor: 'rgba(110, 194, 134, 1)', | |
| borderWidth: 1, | |
| hoverBackgroundColor: 'rgba(110, 194, 134, 1)' | |
| }, | |
| { | |
| label: 'BLIP-2 FLAN-T5-XXL', | |
| data: [41, 32.7, 28.5, 34], | |
| backgroundColor: 'rgba(255, 153, 78, 0.6)', | |
| borderColor: 'rgba(255, 153, 78, 1)', | |
| borderWidth: 1, | |
| hoverBackgroundColor: 'rgba(255, 153, 78, 1)' | |
| }, | |
| { | |
| label: 'GPT-4V', | |
| data: [76.1, 55.6, 31.2, 55.7], | |
| backgroundColor: 'rgba(117, 209, 215, 0.6)', | |
| borderColor: 'rgba(117, 209, 215, 1)', | |
| borderWidth: 1, | |
| hoverBackgroundColor: 'rgba(117, 209, 215, 1)' | |
| }] | |
| }, | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20, | |
| font: { | |
| size: 16 | |
| } | |
| } | |
| }, | |
| x: { | |
| ticks: { | |
| font: { | |
| size: 16 // 设置X轴字体大小 | |
| } | |
| } | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| labels: { | |
| font: { | |
| size: 16 // 设置标签文字大小 | |
| } | |
| } | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return context.dataset.label + ': ' + context.parsed.y; | |
| } | |
| } | |
| } | |
| }, | |
| onHover: (event, chartElement) => { | |
| event.native.target.style.cursor = chartElement[0] ? 'pointer' : 'default'; | |
| } | |
| } | |
| }); | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Data for the "Diagrams" chart | |
| const data_Diagrams = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [27.6, 30.1, 31.8, 30.0, 32.0, 46.8], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| // "data_Diagrams" chart | |
| new Chart(document.getElementById('chart_Diagrams'), { | |
| type: 'bar', | |
| data: data_Diagrams, | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_Tables" chart | |
| const data_Tables = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [26.6, 29.0, 29.8, 27.8, 27.8, 61.8], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_Tables'), { | |
| type: 'bar', | |
| data: data_Tables, | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_PlotsAndCharts " chart | |
| const data_PlotsAndCharts = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [24.8, 31.8, 36.2, 30.4, 35.8, 55.6], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_PlotsAndCharts'), { | |
| type: 'bar', | |
| data: data_PlotsAndCharts , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_ChemicalStructures " chart | |
| const data_ChemicalStructures = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [25.0, 27.2, 27.1, 26.7, 25.5, 50.6], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_ChemicalStructures'), { | |
| type: 'bar', | |
| data: data_ChemicalStructures , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_Photographs " chart | |
| const data_Photographs = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [27.6, 40.5, 41.4, 44.4, 42.0, 64.2], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_Photographs'), { | |
| type: 'bar', | |
| data: data_Photographs , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_Paintings " chart | |
| const data_Paintings = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [28.7, 57.2, 53.6, 56.3, 52.1, 75.9], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_Paintings'), { | |
| type: 'bar', | |
| data: data_Paintings , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_GeometricShapes " chart | |
| const data_GeometricShapes = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [21.1, 25.3, 21.4, 25.6, 28.3, 40.2], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_GeometricShapes'), { | |
| type: 'bar', | |
| data: data_GeometricShapes , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_SheetMusic " chart | |
| const data_SheetMusic = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [35.2, 33.4, 34.6, 35.8, 34.9, 38.8], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_SheetMusic'), { | |
| type: 'bar', | |
| data: data_SheetMusic , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_MedicalImages " chart | |
| const data_MedicalImages = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [25.4, 29.8, 31.6, 36.4, 29.8, 59.6], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_MedicalImages'), { | |
| type: 'bar', | |
| data: data_MedicalImages , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_PathologicalImages " chart | |
| const data_PathologicalImages = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [26.5, 27.7, 31.2, 35.2, 35.6, 63.6], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_PathologicalImages'), { | |
| type: 'bar', | |
| data: data_PathologicalImages , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_MicroscopicImages " chart | |
| const data_MicroscopicImages = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [27.0, 37.6, 29.2, 36.3, 32.7, 58.0], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_MicroscopicImages'), { | |
| type: 'bar', | |
| data: data_MicroscopicImages , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_MRIsCTScansXrays " chart | |
| const data_MRIsCTScansXrays = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [21.7, 36.9, 33.3, 39.4, 29.8, 50.0], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_MRIsCTScansXrays'), { | |
| type: 'bar', | |
| data: data_MRIsCTScansXrays , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_SketchesAndDrafts " chart | |
| const data_SketchesAndDrafts = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [37.0, 32.1, 29.9, 38.0, 33.7, 55.4], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_SketchesAndDrafts'), { | |
| type: 'bar', | |
| data: data_SketchesAndDrafts , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_Maps " chart | |
| const data_Maps = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [38.2, 36.5, 45.9, 47.6, 43.5, 61.8], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_Maps'), { | |
| type: 'bar', | |
| data: data_Maps , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_TechnicalBlueprints " chart | |
| const data_TechnicalBlueprints = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [24.7, 25.9, 28.4, 25.3, 27.8, 38.9], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_TechnicalBlueprints'), { | |
| type: 'bar', | |
| data: data_TechnicalBlueprints , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_TreesAndGraphs " chart | |
| const data_TreesAndGraphs = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [30.1, 28.1, 28.8, 28.8, 34.9, 50.0], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_TreesAndGraphs'), { | |
| type: 'bar', | |
| data: data_TreesAndGraphs , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_MathematicalNotations " chart | |
| const data_MathematicalNotations = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [15.8, 27.1, 22.6, 21.8, 21.1, 45.9], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_MathematicalNotations'), { | |
| type: 'bar', | |
| data: data_MathematicalNotations , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_ComicsAndCartoons " chart | |
| const data_ComicsAndCartoons = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [29.0, 51.9, 49.6, 54.2, 51.1, 68.7], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_ComicsAndCartoons'), { | |
| type: 'bar', | |
| data: data_ComicsAndCartoons , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_Sculpture " chart | |
| const data_Sculpture = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [30.8, 46.2, 49.6, 51.3, 53.0, 76.1], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_Sculpture'), { | |
| type: 'bar', | |
| data: data_Sculpture , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_Portraits " chart | |
| const data_Portraits = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [20.9, 52.7, 46.2, 54.9, 47.3, 70.3], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_Portraits'), { | |
| type: 'bar', | |
| data: data_Portraits , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_Screenshots " chart | |
| const data_Screenshots = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [38.6, 35.7, 38.6, 34.3, 47.1, 65.7], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_Screenshots'), { | |
| type: 'bar', | |
| data: data_Screenshots , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_Other " chart | |
| const data_Other = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [28.3, 38.3, 50.0, 51.7, 58.3, 68.3], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_Other'), { | |
| type: 'bar', | |
| data: data_Other , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_Poster " chart | |
| const data_Poster = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [38.6, 50.9, 52.6, 61.4, 64.9, 80.7], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_Poster'), { | |
| type: 'bar', | |
| data: data_Poster , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_IconsAndSymbols " chart | |
| const data_IconsAndSymbols = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [23.8, 66.7, 57.1, 59.5, 59.5, 78.6], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_IconsAndSymbols'), { | |
| type: 'bar', | |
| data: data_IconsAndSymbols , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_HistoricalTimelines " chart | |
| const data_HistoricalTimelines = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [30.0, 36.7, 40.0, 43.3, 43.3, 63.3], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_HistoricalTimelines'), { | |
| type: 'bar', | |
| data: data_HistoricalTimelines , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_3DRenderings " chart | |
| const data_3DRenderings = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [33.3, 28.6, 57.1, 38.1, 47.6, 47.6], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_3DRenderings'), { | |
| type: 'bar', | |
| data: data_3DRenderings , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_DNASequences " chart | |
| const data_DNASequences = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [20.0, 45.0, 25.0, 25.0, 45.0, 55.0], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_DNASequences'), { | |
| type: 'bar', | |
| data: data_DNASequences , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_Landscapes " chart | |
| const data_Landscapes = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [43.8, 43.8, 50.0, 31.2, 62.5, 68.8], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_Landscapes'), { | |
| type: 'bar', | |
| data: data_Landscapes , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_LogosAndBranding " chart | |
| const data_LogosAndBranding = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [21.4, 57.1, 64.3, 35.7, 50.0, 85.7], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_LogosAndBranding'), { | |
| type: 'bar', | |
| data: data_LogosAndBranding , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| // "data_Advertisements " chart | |
| const data_Advertisements = { | |
| labels: ['Fuyu-8B', 'Qwen-VL-7B', 'InstructBLIP-T5-XXL', 'LLaVA-1.5-13B', 'BLIP-2 FLAN-T5-XXL', 'GPT-4V'], | |
| datasets: [{ | |
| data: [30.0, 60.0, 50.0, 60.0, 70.0, 100.0], | |
| 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)'], | |
| 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)'], | |
| 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)'] | |
| }] | |
| }; | |
| new Chart(document.getElementById('chart_Advertisements'), { | |
| type: 'bar', | |
| data: data_Advertisements , | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| min: 0, | |
| max: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| .hidden { | |
| display: none; | |
| } | |
| .sortable:hover { | |
| cursor: pointer; | |
| } | |
| .asc::after { | |
| content: ' ↑'; | |
| } | |
| .desc::after { | |
| content: ' ↓'; | |
| } | |
| #toggleButton { | |
| background-color: #ffffff; | |
| border: 1px solid #dddddd; | |
| color: #555555; | |
| padding: 10px 20px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 14px; | |
| margin: 4px 2px; | |
| cursor: pointer; | |
| border-radius: 25px; | |
| box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); | |
| transition-duration: 0.4s; | |
| } | |
| #toggleButton:hover { | |
| box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); /* 鼠标悬停时的阴影效果 */ | |
| } | |
| table { | |
| border-collapse: collapse; | |
| width: 100%; | |
| margin-top: 5px; | |
| border: 1px solid #ddd; | |
| font-size: 14px; | |
| } | |
| th, td { | |
| text-align: left; | |
| padding: 8px; | |
| } | |
| th { | |
| background-color: #f2f2f2; | |
| border-bottom: 2px solid #ddd; | |
| } | |
| td:hover {background-color: #ffffff;} | |
| </style> | |
| <script> | |
| (function() { | |
| var ws = new WebSocket('ws://' + window.location.host + | |
| '/jb-server-page?reloadMode=RELOAD_ON_SAVE&'+ | |
| 'referrer=' + encodeURIComponent(window.location.pathname)); | |
| ws.onmessage = function (msg) { | |
| if (msg.data === 'reload') { | |
| window.location.reload(); | |
| } | |
| if (msg.data.startsWith('update-css ')) { | |
| var messageId = msg.data.substring(11); | |
| var links = document.getElementsByTagName('link'); | |
| for (var i = 0; i < links.length; i++) { | |
| var link = links[i]; | |
| if (link.rel !== 'stylesheet') continue; | |
| var clonedLink = link.cloneNode(true); | |
| var newHref = link.href.replace(/(&|\?)jbUpdateLinksId=\d+/, "$1jbUpdateLinksId=" + messageId); | |
| if (newHref !== link.href) { | |
| clonedLink.href = newHref; | |
| } | |
| else { | |
| var indexOfQuest = newHref.indexOf('?'); | |
| if (indexOfQuest >= 0) { | |
| // to support ?foo#hash | |
| clonedLink.href = newHref.substring(0, indexOfQuest + 1) + 'jbUpdateLinksId=' + messageId + '&' + | |
| newHref.substring(indexOfQuest + 1); | |
| } | |
| else { | |
| clonedLink.href += '?' + 'jbUpdateLinksId=' + messageId; | |
| } | |
| } | |
| link.replaceWith(clonedLink); | |
| } | |
| } | |
| }; | |
| })(); | |
| </script></body><div style="all: initial;"><div id="__hcfy__" style="all: initial;"></div></div></html> |