https://tsrbench.github.io/website/javascript/explorer-index.js

1$(document).ready(function() {
2    // Check for click events on the navbar burger icon
3    $(".navbar-burger").click(function() {
4        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
5        $(".navbar-burger").toggleClass("is-active");
6        $(".navbar-menu").toggleClass("is-active");
7
8    });
9
10    var options = {
11        slidesToScroll: 1,
12        slidesToShow: 1,
13        loop: true,
14        infinite: true,
15        autoplay: false,
16        autoplaySpeed: 3000,
17    }
18
19		// Initialize all div with carousel class
20    var carousels = bulmaCarousel.attach('.carousel', options);
21
22    // Loop on each carousel initialized
23    for(var i = 0; i < carousels.length; i++) {
24    	// Add listener to  event
25    	carousels[i].on('before:show', state => {
26    		console.log(state);
27    	});
28    }
29
30    // Access to bulmaCarousel instance of an element
31    var element = document.querySelector('#my-element');
32    if (element && element.bulmaCarousel) {
33    	// bulmaCarousel instance is available as element.bulmaCarousel
34    	element.bulmaCarousel.on('before-show', function(state) {
35    		console.log(state);
36    	});
37    }
38
39    var dropdowns = document.getElementsByClassName('dropdown');
40    for (let dropdown of dropdowns) {
41        dropdown.addEventListener('click', function(event) {
42            event.stopPropagation();
43            event.preventDefault();
44            dropdown.classList.toggle('is-active');
45        });
46    }
47
48    // load and display default models
49    let qids = getRandomSubarray(num_output_qs);
50    let [folder , output_data] = read_data('Multimodal Bard');
51    output_data.addEventListener('load', function() {
52        refresh_table(qids);
53    });
54    [folder , output_data] = read_data('CoT GPT4 (Caption+OCR)');
55    output_data.addEventListener('load', function() {
56        refresh_table(qids);
57    });
58    // refresh_table(qids);
59    let dropdown_displays = document.getElementsByClassName('dropdown-display');
60    let refresh_button = document.getElementById('refresh-qids');
61    refresh_button.addEventListener('click', function(event) {
62        qids = getRandomSubarray(num_output_qs);
63        refresh_table(qids);
64    });
65
66    // let dropdown_displays = document.getElementsByClassName('dropdown-display');
67    let dropdown_contents = document.getElementsByClassName('dropdown-content');
68    for (let i = 0; i < dropdown_contents.length; i++) {
69        // add an <a> tag to the dropdown-content for each key in model_output_folder_list
70        let dropdown_content = dropdown_contents[i];
71        for (let name in model_output_folder_list) {
72            let a = document.createElement('a');
73            a.classList.add('dropdown-item');
74            a.innerHTML = '<b> ' + name + ' </b>';
75            dropdown_content.appendChild(a);
76            a.addEventListener('click', function(event) {
77                dropdown_displays[i].innerHTML = name;
78                let [folder, script_tag] = read_data(name);
79                script_tag.addEventListener('load', function() {
80                    refresh_table(qids);
81                });
82            });
83            a.style.padding = '0.375em 1em';
84        }
85    }
86
87    // // create the leaderboard
88    // let leaderboard = new Tabulator("#score-table", {
89    //     data:score_table, //assign data to table
90    //     layout:"fitDataTable",
91    //     // layout:"fitColumns",
92    //     initialSort:[
93    //         {column:"ALL", dir:"desc"}, //sort by this first
94    //     ],
95    //     autoColumns:true, //create columns from data field names
96    // });
97})
98
99var cache = {};
100var num_output_qs = 5;
101// var 
102
103// dynamically links a js data file
104function read_data(model_name) {
105    console.log('loading data for ' + model_name);
106    let folder = model_output_folder_list[model_name];
107    // dynamically link the js file
108    let script = document.createElement('script');
109    script.src = './data/results/' + folder + '/data.js';
110    document.body.appendChild(script);
111    return [folder, script];
112
113}
114
115function getRandomSubarray(size, arr=null) {
116    if (arr == null) {
117        arr = [];
118        for (let i = 1; i < 1001; i++) {
119            arr.push(i);
120        }
121    }
122    var shuffled = arr.slice(0), i = arr.length, temp, index;
123    while (i--) {
124        index = Math.floor((i + 1) * Math.random());
125        temp = shuffled[index];
126        shuffled[index] = shuffled[i];
127        shuffled[i] = temp;
128    }
129    return shuffled.slice(0, size);
130}
131
132function refresh_table(qids) {
133    let table = document.getElementById('result-table');
134    let dropdown_displays = document.getElementsByClassName('dropdown-display');
135    let model_names = [];
136    for (let i = 0; i < dropdown_displays.length; i++) {
137        model_names.push(dropdown_displays[i].innerText);
138    }
139    console.log(qids);
140    console.log(model_names);
141    while (table.children.length > 3) 
142        table.removeChild(table.lastChild);
143
144    for (let qid of qids) {
145        let row = generate_row(qid, model_names);
146        // console.log('inserting' + row);
147        table.insertAdjacentHTML('beforeend', row);
148    }
149}
150
151function generate_row(qid, model_names) {
152    let responses = [];
153    for (let model_name of model_names) {
154        if (model_name in cache)
155            responses.push(cache[model_name][qid.toString()]);
156        else
157            responses.push({'response': ''});
158    }
159    let html = `
160    <div class="level has-text-justified box question-level" style="background: rgba(0, 0, 0, 0.02);">
161        <div class='leve-item container m-3' style='width: 30%;'>
162            ${create_number(test_data[qid.toString()])}
163        </div>
164        <div class='leve-item container m-3' style='width: 30%; white-space: pre-wrap;'>${responses[0]['response']}</div>
165        <div class='leve-item container m-3' style='width: 30%; white-space: pre-wrap;'>${responses[1]['response']}</div>
166    </div>`;
167    return html;
168}