Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Coffee: Boost Your Code LLMs by Fixing Bugs with Feedback</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="Coffee: Boost Your Code LLMs by Fixing Bugs with Feedback"> | |
| <meta name="keywords" content="Code Editing, Bug Fixing, APR"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title> Coffee: Boost Your Code LLMs by Fixing Bugs with Feedback</title> | |
| <link rel="icon" href="./static/images/coffee_emoji.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"> | |
| <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> | |
| <!-- Google tag (gtag.js) --> | |
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-PBF77LE136"></script> | |
| <script> | |
| window.dataLayer = window.dataLayer || []; | |
| function gtag(){dataLayer.push(arguments);} | |
| gtag('js', new Date()); | |
| gtag('config', 'G-PBF77LE136'); | |
| </script> | |
| <body> | |
| <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="static/images/coffee_emoji.png" style="width:1em;vertical-align: middle" alt="Logo"/> | |
| <span class="opencodeinterpreter" style="vertical-align: middle">Coffee</span> | |
| </h1> | |
| <h2 class="subtitle is-3 publication-subtitle"> | |
| Boost Your Code LLMs by Fixing Bugs with Feedback | |
| </h2> | |
| <br> | |
| <h3> | |
| Note that this project page is fully anonymized. Some links might not be available due to anonymization. | |
| </h3> | |
| <br> | |
| <!-- <div class="column has-text-centered" style="overflow-x: auto;"> --> | |
| <div class="column has-text-centered"> | |
| <div class="publication-links"> | |
| <!-- PDF Link. --> | |
| <span class="link-block"> | |
| <!-- @PAN TODO: change links --> | |
| <a href="https://huggingface.co/spaces/Anonymous-COFFEE/Project-COFFEE/blob/main/static/ACL24__Coffee.pdf" | |
| class="external-link button is-normal is-rounded is-dark" target="_blank"> | |
| <span class="icon"> | |
| <i class="fas fa-file-pdf"></i> | |
| </span> | |
| <span>Paper</span> | |
| </a> | |
| </span> | |
| <span class="link-block"> | |
| <a href="https://huggingface.co/datasets/Anonymous-COFFEE/COFFEE-Dataset" | |
| class="external-link button is-normal is-rounded is-dark" target="_blank"> | |
| <span class="icon"> | |
| <p style="font-size:18px">🤗</p> | |
| </span> | |
| <span>Datasets</span> | |
| </a> | |
| </span> | |
| <span class="link-block"> | |
| <a href="https://huggingface.co/collections/Anonymous-COFFEE/coffee-boost-your-code-llms-by-fixing-bugs-with-feedback-66239f4f67f263a09c0f8e1c" | |
| class="external-link button is-normal is-rounded is-dark" target="_blank"> | |
| <span class="icon"> | |
| <p style="font-size:18px">🤗</p> | |
| </span> | |
| <span>Models</span> | |
| </a> | |
| </span> | |
| <span class="link-block"> | |
| <a href="https://anonymous.4open.science/r/COFFEE_official-83E6/README.md" | |
| class="external-link button is-normal is-rounded is-dark" target="_blank"> | |
| <span class="icon"> | |
| <i class="fab fa-github"></i> | |
| </span> | |
| <span>Code</span> | |
| </a> | |
| </span> | |
| <!-- Dataset Link. --> | |
| <span class="link-block"> | |
| <a href="https://huggingface.co/spaces/Anonymous-COFFEE/COFFEE-DEMO" | |
| class="external-link button is-normal is-rounded is-dark" target="_blank"> | |
| <span class="icon"> | |
| <!-- <i class="far fa-images"></i> --> | |
| <p style="font-size:18px">🚀</p> | |
| <!-- 🔗 --> | |
| </span> | |
| <span>Demo</span> | |
| </a> | |
| </span> | |
| </div> | |
| <div class="links-row"> | |
| <span class="link-block"> | |
| <a href="#mainresults" | |
| class="external-link button is-normal is-rounded is-dark"> | |
| <span class="icon has-text-white"> | |
| <i class="fa-solid fa-trophy"></i> | |
| <!-- <p style="font-size:18px">🏆</p> --> | |
| </span> | |
| <span>Main Results</span> | |
| </a> | |
| </span> | |
| <!-- EvalAI Link. --> | |
| <span class="link-block"> | |
| <a href="#example" | |
| class="external-link button is-normal is-rounded is-dark"> | |
| <span class="icon has-text-white"> | |
| <i class="fa-solid fa-book"></i> | |
| </span> | |
| <span>Example</span> | |
| </a> | |
| </span> | |
| </div> | |
| </div> | |
| </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="content has-text-centered"> | |
| <img src="static/images/figure1.svg" alt="geometric reasoning" width="95%"/> | |
| <p> (Left) A motivating example of code editing with natural language feedback. With appropriate feedback, the editor model can produce a correct editing with the help of the feedback. (Right) By evaluating CoffeePots on HumanEvalFix, a benchmark that aims to assess code editing abilities, we show <b>our approach outperforms GPT-4</b>. </p> | |
| </div> | |
| <!-- </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 is-3">🔔News</h2> | |
| <div class="content has-text-justified"> | |
| <p> | |
| <b> | |
| ♻ [2024-02-21]: We have updated our paper and released the second version of our draft on Arxiv!</b> | |
| </b> | |
| </p> | |
| <p> | |
| <b> | |
| 🛎[2024-02-22]: We have made our code available on GitHub! Check out our <a href="https://anonymous.4open.science/r/COFFEE_official-83E6/README.md">Github repository</a> for more details.</b> | |
| </b> | |
| </p> | |
| <p> | |
| <b>✨[2023-12-24]: We have open-sourced the <a href="https://huggingface.co/Anonymous-COFFEE/COFFEEPOTS-critic">CoffeePots-Critic</a> Model.</b> | |
| </p> | |
| <p> | |
| <b>🍪[2023-12-24]: We have open-sourced the <a href="https://huggingface.co/Anonymous-COFFEE/COFFEEPOTS-editor">CoffeePots-Editor</a> Model.</b> | |
| </p> | |
| <p> | |
| <b>📑[2023-11-19]: We have uploaded the first version of our preprint to arxiv <a href="https://huggingface.co/spaces/Anonymous-COFFEE/Project-COFFEE/blob/main/static/ACL24__Coffee.pdf">[Link to our paper]</a> </b> | |
| </p> | |
| <p> | |
| <b>☕[2023-11-11]: We have open-sourced Coffee dataset used in our project named <a href="https://huggingface.co/datasets/Anonymous-COFFEE/COFFEE-Dataset">Coffee</a>.</b> | |
| </p> | |
| </div> | |
| <h2 class="title is-3">Introduction</h2> | |
| <div class="content has-text-justified"> | |
| <p> | |
| Code editing is an essential step towards reliable program synthesis to automatically correct critical errors generated from code LLMs. Recent studies have demonstrated that closed-source LLMs (i.e., ChatGPT and GPT-4) are capable of generating corrective feedback to edit erroneous inputs. However, it remains challenging for open-source code LLMs to generate feedback for code editing, since these models tend to adhere to the superficial formats of feedback and provide feedback with misleading information. Hence, the focus of our work is to <b>leverage open-source code LLMs to generate helpful feedback with correct guidance for code editing</b>. To this end, we present Coffee, a collected dataset specifically designed for code fixing with feedback. Using this dataset, we construct CoffeePots, a framework for COde Fixing with FEEdback via Preference-Optimized Tuning and Selection. The proposed framework aims to automatically generate helpful feedback for code editing while minimizing the potential risk of superficial feedback. The combination of Coffee and CoffeePots marks a significant advancement, <b>achieving state-of-the-art performance on HumanEvalFix benchmark</b>. | |
| </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="static/images/coffee_emoji.png" style="width:1em;vertical-align: middle" alt="Logo"/> | |
| <span class="mmmu" style="vertical-align: middle">Coffee: dataset | |
| for COde Fixing with FEEdback</span> | |
| </h1> | |
| </div> | |
| </section> | |
| <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-centered"> | |
| <img src="static/images/coffee_example.svg" alt="algebraic reasoning" class="center" style="width:40%"> | |
| <p> An example instance from COFFEE dataset.</p> | |
| </div> | |
| <div class="content has-text-justified"> | |
| <p> | |
| Recent large language models have demonstrated promising capabilities in correcting their codes based on natural language feedback. However, this ability is currently only applicable to open-source models (e.g., GPT-3.5-Turbo and GPT-4), and <b>not to closed-source models</b>. This poses a significant safety and privacy concern as the codes cannot be uploaded to any external servers (e.g., OpenAI API server). | |
| </p> | |
| <p> | |
| To this end, we introduce ☕COFFEE, a dataset for <b>code editing with feedback</b>. | |
| Our dataset includes diverse solutions to programming problems collected from an online competitive programming platform. For each solution, we additionally annotate natural language feedback to provide detailed explanations for the errors towards correct edits, and augment synthetic test cases to measure the correctness of the edited solutions. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="hero is-light is-small"> | |
| <div class="hero-body has-text-centered"> | |
| <h1 class="title is-1 mmmu"> | |
| <img src="static/images/coffeepot_emoji.png" style="width:1em;vertical-align: middle" alt="Logo"/> | |
| <span class="mmmu" style="vertical-align: middle"> COFFEEPOTS: Aligning Feedback | |
| with Preferred Edits | |
| </span> | |
| </h1> | |
| </div> | |
| </section> | |
| <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">Is Training on COFFEE with Supervised Finetuning Enough?</h2> | |
| <div class="container is-max-desktop"> | |
| <div class="content has-text-centered"> | |
| <img src="static/images/pass_ratio.svg" alt="algebraic reasoning" width="70%"/> | |
| <p> Pass@1 results of code editing with SFT feedback on the test set of COFFEE compared with editing with ChatGPT feedback and editing without any feedback settings.</p> | |
| </div> | |
| <br/> | |
| </div> | |
| <div class="content has-text-justified"> | |
| <p> | |
| <b><h5>No.</h5></b> As we show in the figure above, we find that training a critic model that generates natural language feedback on a given erroneous code with next token prediction obejct cannot produce any helpful deedback. Editing code with feedback from SFT critic shows performance even worse than direct editing (i.e., editing w/o feedback). We posit that learning to generate accurate feedback is a very challenging goal that cannot be achieved only with next-token prediction object. | |
| </p> | |
| <br/> | |
| <div class="content has-text-centered"> | |
| <img src="static/images/feedback_quality_analysis.svg" alt="algebraic reasoning" width="100%"/> | |
| <p>Human evaluation on the quality of feedback from SFT critic. </p> | |
| </div> | |
| <p> | |
| Further analysis of the feedback quality suggests that the feedback from the SFT-trained critic has not yet reached a satisfactory level. It remains only as <b>'Partially Correct'</b> feedback, resulting the decreased performance in code editing as we show in the previous | |
| analysis. | |
| </p> | |
| </div> | |
| <br/> | |
| <div class="content has-text-centered"> | |
| <img src="static/images/coffeepots.svg" alt="algebraic reasoning" width="100%"/> | |
| <p>Overview of COFFEEPOTs. </p> | |
| </div> | |
| <div class="content has-text-justified"> | |
| <p> | |
| To resolve the aforementioned issue, we introduce COFFEEPOTS, a framework for COde Fixing with FEEdback via Preference-Optimized Tuning and Selection. We first use our COFFEE dataset to train code LLMs via supervised fine-tuning (SFT) for feedback augmented code editing. | |
| Then, we additionally <b>leverage synthetic test cases in COFFEE to annotate preferred (i.e., helpful) solutions and apply preference alignment </b>to guide the generation of helpful feedback. | |
| </p> | |
| </div> | |
| </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" id="mainresults">Main 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"></h2> --> | |
| <div class="content"> | |
| <div class="content has-text-centered"> | |
| <img src="static/images/main_table.svg" alt="algebraic reasoning" width="100%"/> | |
| <p>Performances in editing machine-generated codes. We report pass@1 and ERR (in parentheses). We use | |
| ChatGPT (the first row) to generate codes for problems from several benchmark datasets for code generation.</p> | |
| </div> | |
| <div class="content has-text-justified"> | |
| <p> | |
| Table above reports the model performance in editing solutions generated from ChatGPT for problems in HumanEvalSynthesize, MBPP, and APPS. CoffeePots outperforms all open-source baselines, including Code Llama (13B), the previous SOTA among open-source code LLMs. Furthermore, CoffeePots shows better results than feedback-augmented Code Llama (13B), i.e., prompted with Self-Refine and Self-Debug, suggesting the effectiveness of our strategy on generating feedback. | |
| In addition, while some open-source code LLMs show almost no improvement in MBPP and APPS (i.e., 0% ERR), CoffeePots shows moderate improvements on these benchmarks (i.e., up to 7.5% ERR). | |
| Compared to closed-source baselines (i.e., ChatGPT), CoffeePots achieves competitive results particularly on HumanEvalSynthesize and MBPP, showing that our framework can serve as a strong alternative to closed-source LLMs while being publicly available and much smaller in size. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-------------------------------------------------------------------- Case Study--------------------------------------------------------------------> | |
| <div class="columns is-centered has-text-centered"> | |
| <div class="column is-four-fifths"> | |
| <h2 class="title is-3" id="example">Example</h2> | |
| <iframe | |
| src="https://anonymous-coffee-coffee-demo.hf.space" | |
| frameborder="0" | |
| width="100%" | |
| height="900" | |
| ></iframe> | |
| <div class="content has-text-justified"> | |
| <div style="margin: 0 auto; display: flex; justify-content: center;"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </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{Anonymized, | |
| title={Coffee: Boost your code llms by fixing bugs with feedback}, | |
| author={Anonymized}, | |
| journal={Anonymized}, | |
| year={2023} | |
| } | |
| </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://nerfies.github.io/">Nerfies</a> and <a href="https://mmmu.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 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> | |
| .publication-links { | |
| /* 在默认情况下，水平排列 */ | |
| display: flex; | |
| } | |
| /* 在屏幕宽度小于600px时，竖直排列 */ | |
| @media only screen and (max-width: 600px) { | |
| .publication-links { | |
| display: flex; | |
| flex-direction: column; /* 将元素竖直排列 */ | |
| } | |
| } | |
| .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; | |
| border-left: none; | |
| border-right: none; | |
| overflow-x: auto; /* 将 overflow-x 设置为 auto */ | |
| } | |
| th, td { | |
| text-align: left; | |
| padding: 8px; | |
| border-left: none; | |
| border-right: none; | |
| } | |
| th { | |
| background-color: #f2f2f2; | |
| border-bottom: 2px solid #ddd; | |
| border-left: none; | |
| border-right: none; | |
| } | |
| td:hover {background-color: #ffffff;} | |
| /* 去掉第二行和第三行之间的横线 */ | |
| tr:nth-child(1) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(2) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(3) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(4) td { | |
| border-bottom: none; | |
| } | |
| .dashed-border { | |
| border-top: 2px dashed #ccc; /* 调整间隔宽度和颜色 */ | |
| /* border-image: linear-gradient(to right, #ccc 25%, transparent 25%) 1 1; */ | |
| } | |
| .centered-span { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; /* 水平居中 */ | |
| height: 100%; /* 让 span 高度充满单元格 */ | |
| } | |
| tr:nth-child(7) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(8) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(9) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(10) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(11) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(12) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(13) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(14) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(15) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(16) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(17) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(18) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(19) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(20) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(21) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(22) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(23) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(24) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(25) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(26) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(29) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(30) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(31) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(32) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(33) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(36) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(37) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(38) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(39) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(40) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(41) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(42) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(43) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(44) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(45) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(46) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(47) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(48) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(49) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(50) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(53) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(54) td { | |
| border-bottom: none; | |
| } | |
| tr:nth-child(55) td { | |
| border-bottom: none; | |
| } | |
| </style> | |
| </body> | |
| </html> |