add
This commit is contained in:
echo840
BIN
models/LLaVA/llava/eval/webpage/figures/alpaca.png
Normal file
BIN
models/LLaVA/llava/eval/webpage/figures/alpaca.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
models/LLaVA/llava/eval/webpage/figures/bard.jpg
Normal file
BIN
models/LLaVA/llava/eval/webpage/figures/bard.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
1
models/LLaVA/llava/eval/webpage/figures/chatgpt.svg
Normal file
1
models/LLaVA/llava/eval/webpage/figures/chatgpt.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2406 2406"><path d="M1 578.4C1 259.5 259.5 1 578.4 1h1249.1c319 0 577.5 258.5 577.5 577.4V2406H578.4C259.5 2406 1 2147.5 1 1828.6V578.4z" fill="#74aa9c"/><path d="M1107.3 299.1c-198 0-373.9 127.3-435.2 315.3C544.8 640.6 434.9 720.2 370.5 833c-99.3 171.4-76.6 386.9 56.4 533.8-41.1 123.1-27 257.7 38.6 369.2 98.7 172 297.3 260.2 491.6 219.2 86.1 97 209.8 152.3 339.6 151.8 198 0 373.9-127.3 435.3-315.3 127.5-26.3 237.2-105.9 301-218.5 99.9-171.4 77.2-386.9-55.8-533.9v-.6c41.1-123.1 27-257.8-38.6-369.8-98.7-171.4-297.3-259.6-491-218.6-86.6-96.8-210.5-151.8-340.3-151.2zm0 117.5-.6.6c79.7 0 156.3 27.5 217.6 78.4-2.5 1.2-7.4 4.3-11 6.1L952.8 709.3c-18.4 10.4-29.4 30-29.4 51.4V1248l-155.1-89.4V755.8c-.1-187.1 151.6-338.9 339-339.2zm434.2 141.9c121.6-.2 234 64.5 294.7 169.8 39.2 68.6 53.9 148.8 40.4 226.5-2.5-1.8-7.3-4.3-10.4-6.1l-360.4-208.2c-18.4-10.4-41-10.4-59.4 0L1024 984.2V805.4L1372.7 604c51.3-29.7 109.5-45.4 168.8-45.5zM650 743.5v427.9c0 21.4 11 40.4 29.4 51.4l421.7 243-155.7 90L597.2 1355c-162-93.8-217.4-300.9-123.8-462.8C513.1 823.6 575.5 771 650 743.5zm807.9 106 348.8 200.8c162.5 93.7 217.6 300.6 123.8 462.8l.6.6c-39.8 68.6-102.4 121.2-176.5 148.2v-428c0-21.4-11-41-29.4-51.4l-422.3-243.7 155-89.3zM1201.7 997l177.8 102.8v205.1l-177.8 102.8-177.8-102.8v-205.1L1201.7 997zm279.5 161.6 155.1 89.4v402.2c0 187.3-152 339.2-339 339.2v-.6c-79.1 0-156.3-27.6-217-78.4 2.5-1.2 8-4.3 11-6.1l360.4-207.5c18.4-10.4 30-30 29.4-51.4l.1-486.8zM1380 1421.9v178.8l-348.8 200.8c-162.5 93.1-369.6 38-463.4-123.7h.6c-39.8-68-54-148.8-40.5-226.5 2.5 1.8 7.4 4.3 10.4 6.1l360.4 208.2c18.4 10.4 41 10.4 59.4 0l421.9-243.7z" fill="white"/></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
BIN
models/LLaVA/llava/eval/webpage/figures/llama.jpg
Normal file
BIN
models/LLaVA/llava/eval/webpage/figures/llama.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="m762.846 947.614-124.77-124.769-88 88-30.306-30.692q-16.616-16.231-16.616-40.077 0-23.846 16.616-40.461L708 611.385q16.23-16.231 40.076-16.231t40.462 16.231l30.307 30.691-88 88 124.154 124.77q8.615 8.615 8.615 20.23 0 11.616-8.615 20.231l-51.692 52.307q-8.615 9-20.231 9-11.615 0-20.23-9Zm97.153-624.076L412.768 771.153l27.847 28.077q16.231 16.616 16.231 40.462 0 23.846-16.231 40.077l-30.691 30.691-88-88-124.77 124.769q-8.615 9-20.23 9-11.616 0-20.231-9l-52.307-52.307q-9-8.615-9-20.23 0-11.616 9-20.231l124.769-124.769-88-88L171.847 611q16.231-16.23 40.077-16.23 23.846 0 40.461 16.23l28.462 28.232 447.615-447.231h131.537v131.537ZM323.846 483.769l33.769-34.154 34.154-34.153-34.154 34.153-33.769 34.154Zm-31.999 31.999-191.846-192.23V192.001h131.537l191.461 191.846-31.23 31.615-179.077-178.077h-67.307v67.307l178.461 179.077-31.999 31.999Zm87.691 222.77 435.077-433.846v-67.307h-67.307L312.231 670.846l67.307 67.692Zm0 0L346.385 704l-34.154-33.154L346.385 704l33.153 34.538Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
models/LLaVA/llava/eval/webpage/figures/vicuna.jpeg
Normal file
BIN
models/LLaVA/llava/eval/webpage/figures/vicuna.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
162
models/LLaVA/llava/eval/webpage/index.html
Normal file
162
models/LLaVA/llava/eval/webpage/index.html
Normal file
@@ -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> </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>
|
||||
245
models/LLaVA/llava/eval/webpage/script.js
Normal file
245
models/LLaVA/llava/eval/webpage/script.js
Normal file
@@ -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;
|
||||
});
|
||||
});
|
||||
105
models/LLaVA/llava/eval/webpage/styles.css
Normal file
105
models/LLaVA/llava/eval/webpage/styles.css
Normal file
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user