SUPIR

Running

App Files Files Community

Fabrice-TIERCELIN commited on May 20

Commit

508030c

•

1 Parent(s): 72e210d

Upload 3 files

Browse files

Files changed (3) hide show

llava/eval/webpage/index.html +162 -0
llava/eval/webpage/script.js +245 -0
llava/eval/webpage/styles.css +105 -0

llava/eval/webpage/index.html ADDED Viewed

	@@ -0,0 +1,162 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Who's GPT-4's favorite? Battles between State-of-the-Art Chatbots</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <a class="navbar-brand" href="#">🏔️ Vicuna Evaluation Examples</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav mr-auto">
+            <li class="nav-item">
+                <a class="nav-link" href="https://chat.lmsys.org/">Demo</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="https://vicuna.lmsys.org">Blog</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="https://github.com/lm-sys/FastChat">Github</a>
+              </li>
+          </ul>
+        </div>
+    </nav>
+    <div class="container mt-5">
+        <h2 class="text-center mb-5">Who's GPT-4's favorite? Battles between State-of-the-Art Chatbots</h2>
+        <!-- Selection -->
+        <div class="form-row">
+            <div class="form-group col-md-2">
+                <label for="category-select">Category</label>
+                <select class="form-control" id="category-select"></select>
+            </div>
+            <div class="form-group col-md-8">
+                <label for="question-select">Question</label>
+                <select class="form-control" id="question-select"></select>
+            </div>
+            <div class="form-group col-md-2">
+                <div class="col-md-2"><label>&nbsp;</label></div>
+                <div class="btn-group" role="group" aria-label="Left and Right Controller">
+                    <button type="button" class="form-control btn btn-primary" id="prev-question"><i class="material-icons">keyboard_arrow_left</i></button>
+                    <button type="button" class="form-control btn btn-primary" id="next-question"><i class="material-icons">keyboard_arrow_right</i></button>
+                </div>
+            </div>
+        </div>
+        <!-- "Battle" -->
+        <div class="row mb-4" style="justify-content: center;">
+            <div class="col" style="display: flex; justify-content: center; align-items: center;">
+                <label class="adjustable-font-size" id="other-score-label">*/10</label>
+            </div>
+            <div class="col">
+                <div class="vertical-flex-layout">
+                    <img class="shadow figure-img img-fluid" src="" alt="other logo" width="150" id="other-model-figure">
+                </div>
+            </div>
+            <div class="col">
+                <div class="vertical-flex-layout">
+                    <!-- from: https://fonts.google.com/icons?icon.query=battle&selected=Material+Symbols+Outlined:swords:FILL@0;wght@300;GRAD@0;opsz@48&icon.style=Outlined -->
+                    <img class="figure-img img-fluid" src="figures/swords_FILL0_wght300_GRAD0_opsz48.svg" width="60" height="60">
+                </div>
+            </div>
+            <div class="col">
+                <div class="vertical-flex-layout">
+                    <img class="shadow figure-img img-fluid" src="figures/vicuna.jpeg" alt="vicuna logo" width="150" id="our-model-figure">
+                </div>
+            </div>
+            <div class="col" style="display: flex; justify-content: center; align-items: center;">
+                <label class="adjustable-font-size" id="our-score-label">*/10</label>
+            </div>
+        </div>
+        <!-- Question Card -->
+        <div class="card mb-4">
+            <div class="card-body" id="selected-question"></div>
+        </div>
+        <!-- Answer Cards -->
+        <div class="row">
+            <div class="col-md-6">
+                <div class="card mb-4 expandable-card">
+                    <div class="card-header" style="padding-bottom: 0.2rem" id="other-model-header-bg">
+                        <div class="row">
+                            <div class="col-md-5" style="align-items: center; display: flex;">
+                                <label id="other-model-header">Assistant #1</label>
+                            </div>
+                            <div class="col-md-7">
+                                <select class="form-control" id="model-select" style="height: fit-content; margin-top: -0.3rem;"></select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <div class="card-text-container">
+                            <div class="card-text" id="other-model-answer"></div>
+                        </div>
+                        <div class="btn btn-primary expand-btn" style="display:flex;"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="card mb-4 expandable-card">
+                    <div class="card-header" id="our-model-header">
+                        Assistant #2 (Vicuna, our model)
+                    </div>
+                    <div class="card-body">
+                        <div class="card-text-container">
+                            <div class="card-text" id="our-model-answer"></div>
+                        </div>
+                        <div class="btn btn-primary expand-btn" style="display:flex;"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Evaluation -->
+        <div class="card expandable-card">
+            <div class="card-header" style="background-color: #c9c9f2;" id="evaluation-header">GPT-4 Evaluation</div>
+            <div class="card-body">
+                <div class="card-text-container">
+                    <div class="card-text" id="evaluation-result"></div>
+                </div>
+                <div class="btn btn-primary expand-btn" style="display:flex;"></div>
+            </div>
+        </div>
+    </div>
+    <div class="container-fluid bg-light py-2">
+        <div class="text-center">
+            <small class="text-muted">This website is co-authored with <a href="https://openai.com" target="_blank">GPT-4</a>.</small>
+        </div>
+    </div>
+    <!-- Marked.js -->
+    <script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/lib/marked.umd.min.js"></script>
+    <!-- Bootstrap and Popper.js JavaScript dependencies -->
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="script.js"></script>
+    <script>
+      // Fetch the JSON file
+      fetch('data.json')
+        .then(response => response.json())
+        .then(json_data => {
+            // Populate the models and questions.
+            populateModels(json_data.models);
+            populateQuestions(json_data.questions);
+            displayQuestion(currentQuestionIndex);
+        }).catch(error => console.error(error));
+    </script>
+</body>
+</html>

llava/eval/webpage/script.js ADDED Viewed

	@@ -0,0 +1,245 @@

+// Description: Script for the evaluation webpage.
+let currentQuestionIndex = 1;
+// Store the model name mapping for later use.
+modelNameMapping = {
+    "gpt35": "ChatGPT-3.5",
+    "gpt4": "GPT-4",
+    "alpaca": "Alpaca-13b",
+    "vicuna": "Vicuna-13b",
+    "llama": "LLaMA-13b",
+    "bard": "Bard",
+};
+modelFigureMapping = {
+    "vicuna": "figures/vicuna.jpeg",
+    // Image from: https://commons.wikimedia.org/wiki/File:ChatGPT_logo.svg
+    "gpt35": "figures/chatgpt.svg",
+    // Image from: https://www.reddit.com/r/logodesign/comments/1128aat/google_ai_bard_logo_design/
+    "bard": "figures/bard.jpg",
+    // Image from: https://crfm.stanford.edu/2023/03/13/alpaca.html
+    "alpaca": "figures/alpaca.png",
+    // Image adapted from https://commons.wikimedia.org/wiki/File:Llama_on_Machu_Picchu.jpg
+    "llama": "figures/llama.jpg",
+}
+// Store the question data in a mapping for later use.
+questionMapping = {};
+// Store the question ids in a mapping for later use.
+categoryMapping = {};
+// Store the number of questions for later use.
+questionsCount = 0;
+function text2Markdown(text) {
+    // Normalize the text for markdown rendering.
+    text = text.trim().replaceAll('\n\n', '\n').replaceAll('\n', '\n\n');
+    return marked.parse(text);
+}
+function capitalizeFirstChar(str) {
+    if (!str || str.length === 0) {
+      return str;
+    }
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function updateQuestionSelect(question_id) {
+    const select = document.getElementById('question-select');
+    // Clear the question select.
+    select.innerHTML = '';
+    // Populate the question select.
+    category = questionMapping[question_id].category;
+    categoryMapping[category].forEach(question_id => {
+        const question = questionMapping[question_id];
+        const option = document.createElement('option');
+        option.value = question_id;
+        option.textContent = 'Q' + question_id.toString() + ': ' + question.question;
+        select.appendChild(option);
+    });
+    select.value = question_id;
+}
+function updateModelSelect() {
+    const select = document.getElementById('model-select');
+    img_path = modelFigureMapping[select.value];
+    document.getElementById('other-model-figure').src = img_path;
+}
+function populateModels(models) {
+    const select = document.getElementById('model-select');
+    models.forEach(model => {
+        const option = document.createElement('option');
+        option.value = model;
+        option.textContent = modelNameMapping[model];
+        select.appendChild(option);
+    });
+    updateModelSelect();
+}
+function populateQuestions(questions) {
+    const category_select = document.getElementById('category-select');
+    questionsCount = questions.length;
+    questions.forEach(question => {
+        const option = document.createElement('option');
+        // Store the question data in a mapping for later use.
+        questionMapping[question.id] = {
+            category: question.category,
+            question: question.question,
+            answers: question.answers,
+            evaluations: question.evaluations,
+            scores: question.scores,
+        };
+        // Store the question id in the category mapping.
+        if (question.category in categoryMapping) {
+            categoryMapping[question.category].push(question.id);
+        } else {
+            categoryMapping[question.category] = [question.id];
+            const category_option = document.createElement('option');
+            category_option.value = question.category;
+            category_option.textContent = capitalizeFirstChar(question.category);
+            category_select.appendChild(category_option);
+        }
+    });
+    // Set the default category.
+    updateQuestionSelect(currentQuestionIndex);
+}
+function displayQuestion(index) {
+    const question = questionMapping[index].question;
+    document.getElementById('selected-question').innerHTML = text2Markdown('**Question:** ' + question);
+    displayAnswers(index);
+}
+function displayAnswers(index) {
+    const question = questionMapping[index];
+    const otherModel = document.getElementById('model-select').value;
+    // render the answers with markdown
+    document.getElementById('other-model-answer').innerHTML = text2Markdown(question.answers[otherModel]);
+    document.getElementById('our-model-answer').innerHTML = text2Markdown(question.answers.vicuna);
+    // Display evaluation
+    score = question.scores[otherModel];
+    score_text = modelNameMapping[otherModel] + " " + score[0] + "/10, Vicuna-13b " + score[1] + "/10";
+    document.getElementById('evaluation-header').textContent = "GPT-4 Evaluation" + " (Score: " + score_text + ")";
+    document.getElementById('evaluation-result').innerHTML = text2Markdown(question.evaluations[otherModel]);
+    // Update model names
+    let assistant1_title = "Assistant #1"; // (" + modelNameMapping[otherModel] + ")";
+    let assistant2_title = "Assistant #2 (Vicuna-13b, our model)";
+    // Update scores/labels.
+    let assistant1_score_label = score[0].toString() + '/10';
+    let assistant2_score_label = score[1].toString() + '/10';
+    const colorRed ='#fa9'; // '#eb978d';
+    // const colorGreen = '#c9f2c9';
+    const colorBlue = '#8ef'; // '#71dbf9';
+    const colorYellow = '#fe7'; // '#fada57';
+    let otherModelHeaderColor = '';
+    let ourModelHeaderColor = '';
+    // Update the winner.
+    if (score[0] == score[1]) {
+        assistant1_title = '🏆 ' + assistant1_title;
+        assistant1_score_label = '🏆 ' + assistant1_score_label;
+        assistant2_title = '🏆 ' + assistant2_title;
+        assistant2_score_label = '🏆 ' + assistant2_score_label;
+        otherModelHeaderColor = colorYellow;
+        ourModelHeaderColor = colorYellow;
+    } else if (score[0] > score[1]) {
+        assistant1_title = '🏆 ' + assistant1_title;
+        assistant1_score_label = '🏆 ' + assistant1_score_label;
+        otherModelHeaderColor = colorBlue;
+        ourModelHeaderColor = colorRed;
+    } else if (score[0] < score[1]) {
+        assistant2_title = '🏆 ' + assistant2_title;
+        assistant2_score_label = '🏆 ' + assistant2_score_label;
+        otherModelHeaderColor = colorRed;
+        ourModelHeaderColor = colorBlue;
+    }
+    document.getElementById('other-model-header-bg').style.backgroundColor = otherModelHeaderColor;
+    document.getElementById('our-model-header').style.backgroundColor = ourModelHeaderColor;
+    document.getElementById('other-model-header').textContent = assistant1_title;
+    document.getElementById('our-model-header').textContent = assistant2_title;
+    document.getElementById('other-score-label').textContent = assistant1_score_label;
+    document.getElementById('our-score-label').textContent = assistant2_score_label;
+    // Update expand buttons visibility for both cards after displaying answers
+    // Reset the expanded state and update expand buttons visibility for both cards after displaying answers
+    document.querySelectorAll('.expandable-card').forEach(card => {
+        card.classList.remove('expanded');
+        updateExpandButtonVisibility(card);
+        const expandBtn = card.querySelector('.expand-btn');
+        expandBtn.innerHTML = '<i class="material-icons" style="pointer-events: none">keyboard_arrow_down</i> Show more';   // .textContent = 'Show more';
+    });
+}
+document.getElementById('question-select').addEventListener('change', e => {
+    currentQuestionIndex = parseInt(e.target.value);
+    displayQuestion(currentQuestionIndex);
+});
+document.getElementById('category-select').addEventListener('change', e => {
+    let currentCategory = e.target.value;
+    const questionIds = categoryMapping[currentCategory];
+    currentQuestionIndex = questionIds[0];
+    updateQuestionSelect(currentQuestionIndex);
+    displayQuestion(currentQuestionIndex);
+});
+// Update expand buttons whenever the model is changed
+document.getElementById('model-select').addEventListener('change', () => {
+    displayAnswers(currentQuestionIndex);
+    document.querySelectorAll('.expandable-card').forEach(card => {
+        updateExpandButtonVisibility(card);
+    });
+    updateModelSelect();
+});
+function switchQuestionAndCategory() {
+    document.getElementById('question-select').value = currentQuestionIndex;
+    old_category = document.getElementById('category-select').value;
+    new_category = questionMapping[currentQuestionIndex].category;
+    if (old_category != new_category) {
+        document.getElementById('category-select').value = new_category;
+        updateQuestionSelect(currentQuestionIndex);
+    }
+    displayQuestion(currentQuestionIndex);
+}
+document.getElementById('prev-question').addEventListener('click', () => {
+    // Question index starts from 1.
+    currentQuestionIndex = Math.max(1, currentQuestionIndex - 1);
+    switchQuestionAndCategory();
+});
+document.getElementById('next-question').addEventListener('click', () => {
+    // Question index starts from 1.
+    currentQuestionIndex = Math.min(questionsCount, currentQuestionIndex + 1);
+    switchQuestionAndCategory();
+});
+function updateExpandButtonVisibility(card) {
+    const cardTextContainer = card.querySelector('.card-text-container');
+    const expandBtn = card.querySelector('.expand-btn');
+    if (cardTextContainer.scrollHeight > cardTextContainer.offsetHeight) {
+        expandBtn.style.display = 'flex';
+    } else {
+        expandBtn.style.display = 'none';
+        card.classList.add('expanded');
+    }
+}
+document.querySelectorAll('.expand-btn').forEach(btn => {
+    btn.addEventListener('click', e => {
+        const card = e.target.closest('.expandable-card');
+        card.classList.toggle('expanded');
+        const more = '<i class="material-icons" style="pointer-events: none">keyboard_arrow_down</i> Show more';
+        const less = '<i class="material-icons" style="pointer-events: none">keyboard_arrow_up</i> Show less';
+        e.target.innerHTML = card.classList.contains('expanded') ? less : more;
+    });
+});

llava/eval/webpage/styles.css ADDED Viewed

	@@ -0,0 +1,105 @@

+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f8f9fa;
+}
+.navbar-dark .navbar-nav .nav-link {
+    color: #f1cf68;
+    font-size: 1.1rem;
+    padding: 0.5rem 0.6rem;
+}
+.card-header {
+    font-weight: bold;
+}
+.card {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: 0.3s;
+}
+.card:hover {
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+button {
+    transition: background-color 0.3s;
+}
+button:hover {
+    background-color: #007bff;
+}
+@media (max-width: 767px) {
+    .form-row .form-group {
+        margin-bottom: 10px;
+    }
+}
+/* Extra styles */
+.expandable-card .card-text-container {
+    max-height: 200px;
+    overflow-y: hidden;
+    position: relative;
+}
+.expandable-card.expanded .card-text-container {
+    max-height: none;
+}
+.expand-btn {
+    position: relative;
+    display: none;
+    background-color: rgba(255, 255, 255, 0.8);
+    color: #510c75;
+    border-color: transparent;
+}
+.expand-btn:hover {
+    background-color: rgba(200, 200, 200, 0.8);
+    text-decoration: none;
+    border-color: transparent;
+    color: #510c75;
+}
+.expand-btn:focus {
+    outline: none;
+    text-decoration: none;
+}
+.expandable-card:not(.expanded) .card-text-container:after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 90px;
+    background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 1));
+}
+.expandable-card:not(.expanded) .expand-btn {
+    margin-top: -40px;
+}
+.card-body {
+    padding-bottom: 5px;
+}
+.vertical-flex-layout {
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+.figure-img {
+    max-width: 100%;
+    height: auto;
+}
+.adjustable-font-size {
+    font-size: calc(0.5rem + 2vw);
+}