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 152 153 // Add a change event listener to each checkbox154 checkboxes.forEach(function (checkbox) {155 checkbox.addEventListener('change', function () {156 // Get the model name from the checkbox ID157 var model = this.id.replace('checkbox-', '');158 159 // Get the model element160 var modelElement = document.getElementById('code-' + model);161 162 // toggle the display of the model element163 modelElement.style.display = this.checked ? 'block' : 'none';164 165 // Save the state of all checkboxes to localStorage166 checkboxes.forEach(function (cb) {167 var modelId = cb.id.replace('checkbox-', '');168 localStorage.setItem('checkbox-' + modelId, cb.checked);169 });170 171 });172 });173 });174 </script>175</head>176 177<body>178 <h1><a href="{{ question['url'] }}">{{ question_id }} (Server Idx: {{ problem_idx }})</a>179 </h1>180 181 182 <div class="button-container">183 {% set next_problem_idx = problem_idx + 1 %}184 <a href="{{ url_for('problem', problem_idx=next_problem_idx) }}" class="other-button">Next Problem</a>185 186 {% set prev_problem_idx = problem_idx - 1 %}187 <a href="{{ url_for('problem', problem_idx=prev_problem_idx) }}" class="other-button">Prev Problem</a>188 189 <form id="jumpToProblemForm" method="GET">190 <input type="number" id="problemInput" name="problem_idx" placeholder="Enter problem number" required>191 <button type="submit">Go</button>192 </form>193 </div>194 <script>195 document.getElementById('jumpToProblemForm').addEventListener('submit', function (event) {196 event.preventDefault(); // Prevent the form from submitting normally197 var problemIndex = document.getElementById('problemInput').value;198 var baseUrl = "{{ url_for('problem', problem_idx=0) }}"; // Generate the base URL with a placeholder199 var newUrl = baseUrl.replace('0', problemIndex); // Replace the placeholder with the actual index200 window.location.href = newUrl; // Redirect to the new URL201 });202 </script>203 <br />204 <br />205 206 <!-- <div id="checkboxes">207 {% for model in models %}208 <input type="checkbox" class="model-checkbox" id="checkbox-{{ model }}" checked>209 <label for="checkbox-{{ model }}">{{ model }}@{{ evaluation[model]['correctness'] }}/{{210 evaluation[model]['performance'] }}</label>211 {% endfor %}212 </div> -->213 214 <div class="container">215 <div class="sub-container">216 <h3>{{ question['question_title'] }} || {{ question['difficulty'] }} || {{217 question['contest_date'].split('T')[0]}}</h3>218 219 <pre overflow="auto">220{{ question['question_content'] }}221 </pre>222 </div>223 224 <div class="sub-container">225 <select id="model-select" class="model-select">226 {% for model in models %}227 <option value="{{ model }}">{{ model }}@{{ evaluation[model]['correctness']228 }}</option>229 {% endfor %}230 </select>231 232 233 <div id="all-results">234 235 {% for model in models %}236 237 <div class="model" id="code-{{ model }}" style="display: none;">238 <h2> {{ model }}</h2>239 240 <button data-model="{{ model }}" class="prev-solution">Previous</button>241 <button data-model="{{ model }}" class="next-solution">Next</button>242 <div class="solutions-container">243 {% for code in data[model] %}244 245 <div class="solution{% if loop.first %} active{% endif %}" id="solution-{{ loop.index }}">246 247 <ul>248 <li> solution idx -- {{ loop.index }} </li>249 <li> correctness -- {{ code['pass1'] }}</li>250 <li> metadata -- {{ code['metadata'] }}</li>251 </ul>252 253 <div>254 <pre255 class="{{ 'passed' if code['pass1'] else 'failed' }}"><code class="language-python">{{ code['code'] }}</code></pre>256 </div>257 </div>258 259 {% endfor %}260 </div>261 262 </div>263 {% endfor %}264 </div>265 </div>266 </div>267 </div>268 269 270 271 272 273 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>274 <script>hljs.highlightAll();</script>275 276 <script>277 document.addEventListener('DOMContentLoaded', function () {278 var allModels = document.querySelectorAll('.model');279 // console.log(allModels);280 281 allModels.forEach(function (model) {282 // console.log(model);283 var solutions = model.querySelectorAll('.solution');284 var totalSolutions = solutions.length;285 var currentIndex = 0;286 // console.log(totalSolutions, currentIndex);287 288 function updateActiveSolution(index) {289 solutions.forEach(function (solution, i) {290 if (i === index) {291 solution.classList.add('active');292 } else {293 solution.classList.remove('active');294 }295 });296 }297 298 model.querySelector('.prev-solution').addEventListener('click', function () {299 // console.log(currentIndex, model);300 currentIndex = (currentIndex - 1 + totalSolutions) % totalSolutions;301 updateActiveSolution(currentIndex);302 });303 304 model.querySelector('.next-solution').addEventListener('click', function () {305 // console.log(currentIndex, model);306 currentIndex = (currentIndex + 1) % totalSolutions;307 updateActiveSolution(currentIndex);308 });309 });310 });311 </script>312 313 <script>314 document.addEventListener('DOMContentLoaded', function () {315 var modelSelect = document.getElementById('model-select');316 var models = document.querySelectorAll('.model');317 modelSelect.addEventListener('change', function () {318 var selectedModel = this.value;319 models.forEach(function (model) {320 if (model.id === 'code-' + selectedModel) {321 model.style.display = 'block';322 } else {323 model.style.display = 'none';324 }325 });326 327 console.log(localStorage.getItem('lcbviz-currentModel'));328 localStorage.setItem('lcbviz-currentModel', this.value);329 console.log(localStorage.getItem('lcbviz-currentModel'));330 331 });332 333 334 335 var currentModel = localStorage.getItem('lcbviz-currentModel');336 currentModel = currentModel || 'GPT-4-Turbo-2024-04-09';337 modelSelect.value = currentModel;338 localStorage.setItem('lcbviz-currentModel', currentModel);339 // Display the corresponding code element340 var codeElement = document.getElementById('code-' + currentModel);341 if (codeElement) {342 codeElement.style.display = 'block';343 }344 // Add an event listener to save the selected model to local storage when it changes345 346 });347 348 349 </script>350 351</body>352 353</html>