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-GYM: An Environment for Evaluating and ImprovingNatural Language Feedback on Erroneous Code"> | |
| <meta name="keywords" content="Code LLM, Bug Fixing, RL"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>COFFEE-GYM: An Environment for Evaluating and ImprovingNatural Language Feedback on Erroneous Code</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-Gym</span> | |
| </h1> | |
| <h2 class="subtitle is-3 publication-subtitle"> | |
| An Environment for Evaluating and Improving Natural Language Feedback on Erroneous Code | |
| </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" style="justify-content: center;"> | |
| <!-- PDF Link. --> | |
| <span class="link-block"> | |
| <!-- @PAN TODO: change links --> | |
| <a href="https://huggingface.co/spaces/Coffee-Gym/Project-Coffee-Gym/blob/main/ACL24__Code_Edit.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 class="icon"> | |
| <p style="font-size:18px">📝</p> | |
| </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/Team-Coffee-Gym/DS-Coder-7B-PPO-CoffeeEval" | |
| 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/Team-Coffee-Gym/CoffeeGym-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> | |
| </span> | |
| <span>Main Results</span> | |
| </a> | |
| </span> | |
| <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/comparison_w_prev.svg" alt="geometric reasoning" width="95%"/> | |
| <p> Comparison between COFFEE-GYM and the previous approach. </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-Gym</a>.</b> | |
| </p> | |
| </div> | |
| <h2 class="title is-3">Introduction</h2> | |
| <div class="content has-text-justified"> | |
| <p> | |
| This paper presents COFFEE-GYM, a comprehensive RL environment for training models that provide feedback on code editing. COFFEE-GYM includes two major components: (1) COFFEE, a dataset containing humans' codeedit traces for coding questions and machine-written feedback for editing erroneous code; (2) COFFEEEVAL, a reward function that faithfully reflects the helpfulness of feedback by assess-ing the performance of the revised code in unittests. With them, COFFEE-GYM addresses theunavailability of high-quality datasets for train-ing feedback models with RL, and providesmore accurate rewards than the SOTA rewardmodel (i.e., GPT-4). By applying COFFEE-GYM, we elicit feedback models that outper-form baselines in enhancing open-source code LLMs' code editing, making them comparablewith closed-source LLMs. We make the datasetand the model checkpoint publicly available. | |
| </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: Human-written Code Edit Traces with Annotated Pairwise 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/data.svg" alt="example instance of coffee dataset" class="center" style="width:50%"> | |
| <p> An example instance from COFFEE dataset.</p> | |
| </div> | |
| <div class="content has-text-justified"> | |
| <p> | |
| We curate ☕️ COFFEE, a dataset of code fixing with feedback, from human-written code edit traces. Coffee consists of problems of diverse levels of difficulty, including challenging problems that only human programmers can solve, and provides test cases for reward functions. | |
| </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"> | |
| <span class="mmmu" style="vertical-align: middle">COFFEEEVAL: Unit-test-driven Feedback Evaluation | |
| </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"> | |
| <br/> | |
| <div class="content has-text-centered"> | |
| <img src="static/images/coffeeeval_results.png" alt="evalution results on coffeeeval" width="100%"/> | |
| <p>Performance of our evaluation protocol on the test sets of Coffee compared to the baselines. Wrong Feedback is abbreviated as WF due to limited space.</p> | |
| </div> | |
| <div class="content has-text-justified"> | |
| <p> | |
| DeepSeek-CoffeeEval achieves higher Pearson correlation and lower MSE than all G-Eval and Editing baselines. In particular, our approach shows even higher correlation than the G-Eval baseline implemented with GPT-4-Turbo. | |
| The strong performance of our CoffeeEval validates its effectiveness in assessing the quality of NL feedback in the code editing task. | |
| </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_results.png" alt="algebraic reasoning" width="100%"/> | |
| <p> Code editing results of our feedback model trained with Coffee-Gym, i.e., PPO-COFFEEVAL, on HumanEvalFix and COFFEE-Test. We pair our feedback model with an open-source code LLM as the code editor.</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">Demo</h2> | |
| <iframe | |
| src="https://team-coffee-gym-coffeegym-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-GYM: An Environment for Evaluating and ImprovingNatural Language Feedback on Erroneous Code}, | |
| author={Anonymized}, | |
| journal={Anonymized}, | |
| 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://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> |