livecodebench/code_generation_samples
13
1<!DOCTYPE html>2<html>3 4<head>5 <style>6 pre {7 white-space: pre-wrap;8 /* Wraps the text */9 word-break: break-word;10 /* Ensures words break to prevent overflow */11 background-color: #f4f4f4;12 /* Light grey background */13 padding: 2px;14 /* Padding around the text */15 border-radius: 2px;16 /* Rounded corners */17 border: 1px solid #ccc;18 /* Light grey border */19 }20 21 .container {22 display: flex;23 /* Use flexbox to layout children */24 justify-content: space-between;25 /* Space between the children */26 margin-bottom: 10px;27 /* Space between each container */28 background-color: #ddd;29 /* Debug: background color */30 }31 32 .sub-container {33 flex: 1;34 /* Each sub-container takes equal width */35 padding: 20px;36 /* Padding inside each sub-container */37 background-color: #f4f4f4;38 /* Background color */39 border-radius: 2px;40 /* Rounded corners */41 border: 1px solid #ccc;42 /* Border */43 margin: 0 10px;44 /* Margin between sub-containers */45 }46 47 body {48 font-family: Arial, sans-serif;49 margin: 0;50 padding: 20px;51 background-color: #f4f4f4;52 }53 54 #checkboxes {55 margin-bottom: 20px;56 }57 58 .model-checkbox+label {59 margin-right: 10px;60 padding: 5px 10px;61 background-color: #e7e7e7;62 border-radius: 5px;63 cursor: pointer;64 user-select: none;65 }66 67 .model-checkbox {68 display: none;69 /* Hide the default checkbox */70 }71 72 .model-checkbox:checked+label {73 background-color: #d0e6a5;74 color: #0b4d03;75 }76 77 .model {78 border: 1px solid black;79 padding: 10px;80 }81 82 .counter {83 margin-top: 20px;84 }85 86 .passed code.hljs {87 background-color: #e6ffe6 !important;88 /* light green */89 color: black !important;90 }91 92 .failed code.hljs {93 background-color: #ffe6e6 !important;94 /* light red */95 color: black !important;96 }97 98 .solution {99 display: none;100 /* Hide all solutions by default */101 }102 103 .solution.active {104 display: block;105 /* Only show the active solution */106 }107 108 .button-container {109 text-align: center;110 /* Center the button container */111 margin-top: 20px;112 /* Add some space above the button */113 }114 115 .other-button {116 display: inline-block;117 padding: 10px 20px;118 background-color: #BBBBBB;119 color: white;120 text-decoration: none;121 border-radius: 5px;122 font-weight: bold;123 }124 125 .other-button:hover {126 background-color: #0056b3;127 }128 </style>129 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>130 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">131 132 <script>133 // Wait for the DOM to be fully loaded134 document.addEventListener('DOMContentLoaded', function () {135 // Get all checkboxes with the class 'model-checkbox'136 var checkboxes = document.querySelectorAll('.model-checkbox');137 138 // Load the checkbox states from localStorage and apply them139 checkboxes.forEach(function (checkbox) {140 var model = checkbox.id.replace('checkbox-', '');141 var savedState = localStorage.getItem('checkbox-' + model);142 if (savedState !== null) {143 checkbox.checked = savedState === 'true';144 var modelElement = document.getElementById('code-' + model);145 modelElement.style.display = checkbox.checked ? 'block' : 'none';146 }147 });148 149 150 151 // Add a change event listener to each checkbox152 checkboxes.forEach(function (checkbox) {153 checkbox.addEventListener('change', function () {154 // Get the model name from the checkbox ID155 var model = this.id.replace('checkbox-', '');156 157 // Get the model element158 var modelElement = document.getElementById('code-' + model);159 160 // toggle the display of the model element161 modelElement.style.display = this.checked ? 'block' : 'none';162 163 // Save the state of all checkboxes to localStorage164 checkboxes.forEach(function (cb) {165 var modelId = cb.id.replace('checkbox-', '');166 localStorage.setItem('checkbox-' + modelId, cb.checked);167 });168 169 });170 });171 });172 </script>173</head>174 175<body>176 <h1><a href="{{ question['url'] }}">{{ question_id }} (Server Idx: {{ problem_idx }})</a> </h1>177 178 179 <div class="button-container">180 {% set next_problem_idx = problem_idx + 1 %}181 <a href="{{ url_for('problem_mini', problem_idx=next_problem_idx) }}" class="other-button">Next Problem</a>182 183 {% set prev_problem_idx = problem_idx - 1 %}184 <a href="{{ url_for('problem_mini', problem_idx=prev_problem_idx) }}" class="other-button">Prev Problem</a>185 186 <form id="jumpToProblemForm" method="GET">187 <input type="number" id="problemInput" name="problem_idx" placeholder="Enter problem number" required>188 <button type="submit">Go</button>189 </form>190 </div>191 <script>192 document.getElementById('jumpToProblemForm').addEventListener('submit', function (event) {193 event.preventDefault(); // Prevent the form from submitting normally194 var problemIndex = document.getElementById('problemInput').value;195 var baseUrl = "{{ url_for('problem_mini', problem_idx=0) }}"; // Generate the base URL with a placeholder196 var newUrl = baseUrl.replace('0', problemIndex); // Replace the placeholder with the actual index197 window.location.href = newUrl; // Redirect to the new URL198 });199 </script>200 <br />201 <br />202 203 <!-- <div id="checkboxes">204 {% for model in models %}205 <input type="checkbox" class="model-checkbox" id="checkbox-{{ model }}" checked>206 <label for="checkbox-{{ model }}">{{ model }}@{{ evaluation[model]['correctness'] }}/{{207 evaluation[model]['performance'] }}</label>208 {% endfor %}209 </div> -->210 211 <div class="container">212 <div class="sub-container">213 <h3>{{ question['question_title'] }} || {{ question['difficulty'] }} || {{214 question['contest_date'].split('T')[0]}}</h3>215 216 <pre overflow="auto">217{{ question['question_content'] }}218 </pre>219 </div>220 221 <div class="sub-container">222 <select id="model-select" class="model-select">223 {% for model in models %}224 <option value="{{ model }}">{{ model }}@{{ evaluation[model]['correctness']225 }}</option>226 {% endfor %}227 </select>228 229 230 <div id="all-results">231 232 {% for model in models %}233 234 <div class="model" id="code-{{ model }}" style="display: none;">235 <h2> {{ model }}</h2>236 237 <button data-model="{{ model }}" class="prev-solution">Previous</button>238 <button data-model="{{ model }}" class="next-solution">Next</button>239 <div class="solutions-container">240 {% for code in data[model] %}241 242 <div class="solution{% if loop.first %} active{% endif %}" id="solution-{{ loop.index }}">243 244 <ul>245 <li> solution idx -- {{ loop.index }} </li>246 <li> correctness -- {{ code['pass1'] }}</li>247 <li> metadata -- {{ code['metadata'] }}</li>248 </ul>249 250 <div>251 <pre252 class="{{ 'passed' if code['pass1'] else 'failed' }}"><code class="language-python">{{ code['code'] }}</code></pre>253 </div>254 </div>255 256 {% endfor %}257 </div>258 259 </div>260 {% endfor %}261 </div>262 </div>263 </div>264 </div>265 266 267 268 269 270 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>271 <script>hljs.highlightAll();</script>272 273 <script>274 document.addEventListener('DOMContentLoaded', function () {275 var allModels = document.querySelectorAll('.model');276 // console.log(allModels);277 278 allModels.forEach(function (model) {279 // console.log(model);280 var solutions = model.querySelectorAll('.solution');281 var totalSolutions = solutions.length;282 var currentIndex = 0;283 // console.log(totalSolutions, currentIndex);284 285 function updateActiveSolution(index) {286 solutions.forEach(function (solution, i) {287 if (i === index) {288 solution.classList.add('active');289 } else {290 solution.classList.remove('active');291 }292 });293 }294 295 model.querySelector('.prev-solution').addEventListener('click', function () {296 // console.log(currentIndex, model);297 currentIndex = (currentIndex - 1 + totalSolutions) % totalSolutions;298 updateActiveSolution(currentIndex);299 });300 301 model.querySelector('.next-solution').addEventListener('click', function () {302 // console.log(currentIndex, model);303 currentIndex = (currentIndex + 1) % totalSolutions;304 updateActiveSolution(currentIndex);305 });306 });307 });308 </script>309 310 <script>311 document.addEventListener('DOMContentLoaded', function () {312 var modelSelect = document.getElementById('model-select');313 var models = document.querySelectorAll('.model');314 modelSelect.addEventListener('change', function () {315 var selectedModel = this.value;316 models.forEach(function (model) {317 if (model.id === 'code-' + selectedModel) {318 model.style.display = 'block';319 } else {320 model.style.display = 'none';321 }322 });323 324 console.log(localStorage.getItem('lcbviz-currentModel'));325 localStorage.setItem('lcbviz-currentModel', this.value);326 console.log(localStorage.getItem('lcbviz-currentModel'));327 328 });329 330 331 332 var currentModel = localStorage.getItem('lcbviz-currentModel');333 currentModel = currentModel || 'GPT-4-Turbo-2024-04-09';334 modelSelect.value = currentModel;335 localStorage.setItem('lcbviz-currentModel', currentModel);336 // Display the corresponding code element337 var codeElement = document.getElementById('code-' + currentModel);338 if (codeElement) {339 codeElement.style.display = 'block';340 }341 // Add an event listener to save the selected model to local storage when it changes342 343 });344 345 346 </script>347 348</body>349 350</html>