SUPIR

Running on Zero

App Files Files Community

Fabrice-TIERCELIN commited on May 20

Commit

0b41c70

verified ·

1 Parent(s): 39319da

Delete llava/eval/webpage

Browse files

Files changed (9) hide show

llava/eval/webpage/figures/alpaca.png +0 -0
llava/eval/webpage/figures/bard.jpg +0 -0
llava/eval/webpage/figures/chatgpt.svg +0 -1
llava/eval/webpage/figures/llama.jpg +0 -0
llava/eval/webpage/figures/swords_FILL0_wght300_GRAD0_opsz48.svg +0 -1
llava/eval/webpage/figures/vicuna.jpeg +0 -0
llava/eval/webpage/index.html +0 -162
llava/eval/webpage/script.js +0 -245
llava/eval/webpage/styles.css +0 -105

llava/eval/webpage/figures/alpaca.png DELETED Viewed

Binary file (96.1 kB)

llava/eval/webpage/figures/bard.jpg DELETED Viewed

Binary file (15.3 kB)

llava/eval/webpage/figures/chatgpt.svg DELETED Viewed

llava/eval/webpage/figures/llama.jpg DELETED Viewed

Binary file (56.5 kB)

llava/eval/webpage/figures/swords_FILL0_wght300_GRAD0_opsz48.svg DELETED Viewed

llava/eval/webpage/figures/vicuna.jpeg DELETED Viewed

Binary file (54 kB)

llava/eval/webpage/index.html DELETED Viewed

@@ -1,162 +0,0 @@
-<!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/[email protected]/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/[email protected]/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 DELETED Viewed

@@ -1,245 +0,0 @@
-// 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 DELETED Viewed

@@ -1,105 +0,0 @@
-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);
-}