XaviXva/Video-LLaVA

1// Description: Script for the evaluation webpage.2 3let currentQuestionIndex = 1;4 5// Store the model name mapping for later use.6modelNameMapping = {7    "gpt35": "ChatGPT-3.5",8    "gpt4": "GPT-4",9    "alpaca": "Alpaca-13b",10    "vicuna": "Vicuna-13b",11    "llama": "LLaMA-13b",12    "bard": "Bard",13};14 15modelFigureMapping = {16    "vicuna": "figures/vicuna.jpeg",17    // Image from: https://commons.wikimedia.org/wiki/File:ChatGPT_logo.svg18    "gpt35": "figures/chatgpt.svg",19    // Image from: https://www.reddit.com/r/logodesign/comments/1128aat/google_ai_bard_logo_design/20    "bard": "figures/bard.jpg",21    // Image from: https://crfm.stanford.edu/2023/03/13/alpaca.html22    "alpaca": "figures/alpaca.png",23    // Image adapted from https://commons.wikimedia.org/wiki/File:Llama_on_Machu_Picchu.jpg24    "llama": "figures/llama.jpg",25}26 27// Store the question data in a mapping for later use.28questionMapping = {};29// Store the question ids in a mapping for later use.30categoryMapping = {};31// Store the number of questions for later use.32questionsCount = 0;33 34 35function text2Markdown(text) {36    // Normalize the text for markdown rendering.37    text = text.trim().replaceAll('\n\n', '\n').replaceAll('\n', '\n\n');38    return marked.parse(text);39}40 41function capitalizeFirstChar(str) {42    if (!str || str.length === 0) {43      return str;44    }45    return str.charAt(0).toUpperCase() + str.slice(1);46}47 48function updateQuestionSelect(question_id) {49    const select = document.getElementById('question-select');50    // Clear the question select.51    select.innerHTML = '';52    // Populate the question select.53    category = questionMapping[question_id].category;54    categoryMapping[category].forEach(question_id => {55        const question = questionMapping[question_id];56        const option = document.createElement('option');57        option.value = question_id;58        option.textContent = 'Q' + question_id.toString() + ': ' + question.question;59        select.appendChild(option);60    });61    select.value = question_id;62}63 64function updateModelSelect() {65    const select = document.getElementById('model-select');66    img_path = modelFigureMapping[select.value];67    document.getElementById('other-model-figure').src = img_path;68}69 70function populateModels(models) {71    const select = document.getElementById('model-select');72    models.forEach(model => {73        const option = document.createElement('option');74        option.value = model;75        option.textContent = modelNameMapping[model];76        select.appendChild(option);77    });78    updateModelSelect();79}80 81function populateQuestions(questions) {82    const category_select = document.getElementById('category-select');83 84    questionsCount = questions.length;85    questions.forEach(question => {86        const option = document.createElement('option');87        // Store the question data in a mapping for later use.88        questionMapping[question.id] = {89            category: question.category,90            question: question.question,91            answers: question.answers,92            evaluations: question.evaluations,93            scores: question.scores,94        };95        // Store the question id in the category mapping.96        if (question.category in categoryMapping) {97            categoryMapping[question.category].push(question.id);98        } else {99            categoryMapping[question.category] = [question.id];100            const category_option = document.createElement('option');101            category_option.value = question.category;102            category_option.textContent = capitalizeFirstChar(question.category);103            category_select.appendChild(category_option);104        }105    });106    // Set the default category.107    updateQuestionSelect(currentQuestionIndex);108}109 110function displayQuestion(index) {111    const question = questionMapping[index].question;112    document.getElementById('selected-question').innerHTML = text2Markdown('**Question:** ' + question);113    displayAnswers(index);114}115 116function displayAnswers(index) {117    const question = questionMapping[index];118    const otherModel = document.getElementById('model-select').value;119    // render the answers with markdown120    document.getElementById('other-model-answer').innerHTML = text2Markdown(question.answers[otherModel]);121    document.getElementById('our-model-answer').innerHTML = text2Markdown(question.answers.vicuna);122 123    // Display evaluation124    score = question.scores[otherModel];125    score_text = modelNameMapping[otherModel] + " " + score[0] + "/10, Vicuna-13b " + score[1] + "/10";126    document.getElementById('evaluation-header').textContent = "GPT-4 Evaluation" + " (Score: " + score_text + ")";127    document.getElementById('evaluation-result').innerHTML = text2Markdown(question.evaluations[otherModel]);128 129    // Update model names130    let assistant1_title = "Assistant #1"; // (" + modelNameMapping[otherModel] + ")";131    let assistant2_title = "Assistant #2 (Vicuna-13b, our model)";132    // Update scores/labels.133    let assistant1_score_label = score[0].toString() + '/10';134    let assistant2_score_label = score[1].toString() + '/10';135 136    const colorRed ='#fa9'; // '#eb978d';137    // const colorGreen = '#c9f2c9';138    const colorBlue = '#8ef'; // '#71dbf9';139    const colorYellow = '#fe7'; // '#fada57';140    let otherModelHeaderColor = '';141    let ourModelHeaderColor = '';142    // Update the winner.143    if (score[0] == score[1]) {144        assistant1_title = '🏆 ' + assistant1_title;145        assistant1_score_label = '🏆 ' + assistant1_score_label;146        assistant2_title = '🏆 ' + assistant2_title;147        assistant2_score_label = '🏆 ' + assistant2_score_label;148        otherModelHeaderColor = colorYellow;149        ourModelHeaderColor = colorYellow;150    } else if (score[0] > score[1]) {151        assistant1_title = '🏆 ' + assistant1_title;152        assistant1_score_label = '🏆 ' + assistant1_score_label;153        otherModelHeaderColor = colorBlue;154        ourModelHeaderColor = colorRed;155    } else if (score[0] < score[1]) {156        assistant2_title = '🏆 ' + assistant2_title;157        assistant2_score_label = '🏆 ' + assistant2_score_label;158        otherModelHeaderColor = colorRed;159        ourModelHeaderColor = colorBlue;160    }161 162    document.getElementById('other-model-header-bg').style.backgroundColor = otherModelHeaderColor;163    document.getElementById('our-model-header').style.backgroundColor = ourModelHeaderColor;164 165    document.getElementById('other-model-header').textContent = assistant1_title;166    document.getElementById('our-model-header').textContent = assistant2_title;167 168    document.getElementById('other-score-label').textContent = assistant1_score_label;169    document.getElementById('our-score-label').textContent = assistant2_score_label;170 171    // Update expand buttons visibility for both cards after displaying answers172    // Reset the expanded state and update expand buttons visibility for both cards after displaying answers173    document.querySelectorAll('.expandable-card').forEach(card => {174        card.classList.remove('expanded');175        updateExpandButtonVisibility(card);176        const expandBtn = card.querySelector('.expand-btn');177        expandBtn.innerHTML = '<i class="material-icons" style="pointer-events: none">keyboard_arrow_down</i> Show more';   // .textContent = 'Show more';178    });179}180 181document.getElementById('question-select').addEventListener('change', e => {182    currentQuestionIndex = parseInt(e.target.value);183    displayQuestion(currentQuestionIndex);184});185 186document.getElementById('category-select').addEventListener('change', e => {187    let currentCategory = e.target.value;188    const questionIds = categoryMapping[currentCategory];189    currentQuestionIndex = questionIds[0];190    updateQuestionSelect(currentQuestionIndex);191    displayQuestion(currentQuestionIndex);192});193 194// Update expand buttons whenever the model is changed195document.getElementById('model-select').addEventListener('change', () => {196    displayAnswers(currentQuestionIndex);197    document.querySelectorAll('.expandable-card').forEach(card => {198        updateExpandButtonVisibility(card);199    });200    updateModelSelect();201});202 203function switchQuestionAndCategory() {204    document.getElementById('question-select').value = currentQuestionIndex;205    old_category = document.getElementById('category-select').value;206    new_category = questionMapping[currentQuestionIndex].category;207    if (old_category != new_category) {208        document.getElementById('category-select').value = new_category;209        updateQuestionSelect(currentQuestionIndex);210    }211    displayQuestion(currentQuestionIndex);212}213 214document.getElementById('prev-question').addEventListener('click', () => {215    // Question index starts from 1.216    currentQuestionIndex = Math.max(1, currentQuestionIndex - 1);217    switchQuestionAndCategory();218});219 220document.getElementById('next-question').addEventListener('click', () => {221    // Question index starts from 1.222    currentQuestionIndex = Math.min(questionsCount, currentQuestionIndex + 1);223    switchQuestionAndCategory();224});225 226function updateExpandButtonVisibility(card) {227    const cardTextContainer = card.querySelector('.card-text-container');228    const expandBtn = card.querySelector('.expand-btn');229    if (cardTextContainer.scrollHeight > cardTextContainer.offsetHeight) {230        expandBtn.style.display = 'flex';231    } else {232        expandBtn.style.display = 'none';233        card.classList.add('expanded');234    }235}236 237document.querySelectorAll('.expand-btn').forEach(btn => {238    btn.addEventListener('click', e => {239        const card = e.target.closest('.expandable-card');240        card.classList.toggle('expanded');241        const more = '<i class="material-icons" style="pointer-events: none">keyboard_arrow_down</i> Show more';242        const less = '<i class="material-icons" style="pointer-events: none">keyboard_arrow_up</i> Show less';243        e.target.innerHTML = card.classList.contains('expanded') ? less : more;244    });245});246