Spaces:
Running
on
Zero
Running
on
Zero
File size: 7,831 Bytes
508030c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 |
<!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/[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>
|