|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<style> |
|
pre { |
|
white-space: pre-wrap; |
|
|
|
word-break: break-word; |
|
|
|
background-color: #f4f4f4; |
|
|
|
padding: 2px; |
|
|
|
border-radius: 2px; |
|
|
|
border: 1px solid #ccc; |
|
|
|
} |
|
|
|
.container { |
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
margin-bottom: 10px; |
|
|
|
background-color: #ddd; |
|
|
|
} |
|
|
|
.sub-container { |
|
flex: 1; |
|
|
|
padding: 20px; |
|
|
|
background-color: #f4f4f4; |
|
|
|
border-radius: 2px; |
|
|
|
border: 1px solid #ccc; |
|
|
|
margin: 0 10px; |
|
|
|
} |
|
|
|
body { |
|
font-family: Arial, sans-serif; |
|
margin: 0; |
|
padding: 20px; |
|
background-color: #f4f4f4; |
|
} |
|
|
|
#checkboxes { |
|
margin-bottom: 20px; |
|
} |
|
|
|
.model-checkbox+label { |
|
margin-right: 10px; |
|
padding: 5px 10px; |
|
background-color: #e7e7e7; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
user-select: none; |
|
} |
|
|
|
.model-checkbox { |
|
display: none; |
|
|
|
} |
|
|
|
.model-checkbox:checked+label { |
|
background-color: #d0e6a5; |
|
color: #0b4d03; |
|
} |
|
|
|
.model { |
|
border: 1px solid black; |
|
padding: 10px; |
|
} |
|
|
|
.counter { |
|
margin-top: 20px; |
|
} |
|
|
|
.passed code.hljs { |
|
background-color: #e6ffe6 !important; |
|
|
|
color: black !important; |
|
} |
|
|
|
.failed code.hljs { |
|
background-color: #ffe6e6 !important; |
|
|
|
color: black !important; |
|
} |
|
|
|
.solution { |
|
display: none; |
|
|
|
} |
|
|
|
.solution.active { |
|
display: block; |
|
|
|
} |
|
|
|
.button-container { |
|
text-align: center; |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
.other-button { |
|
display: inline-block; |
|
padding: 10px 20px; |
|
background-color: #BBBBBB; |
|
color: white; |
|
text-decoration: none; |
|
border-radius: 5px; |
|
font-weight: bold; |
|
} |
|
|
|
.other-button:hover { |
|
background-color: #0056b3; |
|
} |
|
</style> |
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> |
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css"> |
|
|
|
<script> |
|
|
|
document.addEventListener('DOMContentLoaded', function () { |
|
|
|
var checkboxes = document.querySelectorAll('.model-checkbox'); |
|
|
|
|
|
checkboxes.forEach(function (checkbox) { |
|
var model = checkbox.id.replace('checkbox-', ''); |
|
var savedState = localStorage.getItem('checkbox-' + model); |
|
if (savedState !== null) { |
|
checkbox.checked = savedState === 'true'; |
|
var modelElement = document.getElementById('code-' + model); |
|
modelElement.style.display = checkbox.checked ? 'block' : 'none'; |
|
} |
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
checkboxes.forEach(function (checkbox) { |
|
checkbox.addEventListener('change', function () { |
|
|
|
var model = this.id.replace('checkbox-', ''); |
|
|
|
|
|
var modelElement = document.getElementById('code-' + model); |
|
|
|
|
|
modelElement.style.display = this.checked ? 'block' : 'none'; |
|
|
|
|
|
checkboxes.forEach(function (cb) { |
|
var modelId = cb.id.replace('checkbox-', ''); |
|
localStorage.setItem('checkbox-' + modelId, cb.checked); |
|
}); |
|
|
|
}); |
|
}); |
|
}); |
|
</script> |
|
</head> |
|
|
|
<body> |
|
<h1><a href="{{ question['url'] }}">Problem {{ problem_idx }}</a></h1> |
|
|
|
|
|
<div class="button-container"> |
|
{% set next_problem_idx = problem_idx + 1 %} |
|
<a href="{{ url_for('problem', problem_idx=next_problem_idx) }}" class="other-button">Next Problem</a> |
|
|
|
{% set prev_problem_idx = problem_idx - 1 %} |
|
<a href="{{ url_for('problem', problem_idx=prev_problem_idx) }}" class="other-button">Prev Problem</a> |
|
|
|
<form id="jumpToProblemForm" method="GET"> |
|
<input type="number" id="problemInput" name="problem_idx" placeholder="Enter problem number" required> |
|
<button type="submit">Go</button> |
|
</form> |
|
</div> |
|
<script> |
|
document.getElementById('jumpToProblemForm').addEventListener('submit', function (event) { |
|
event.preventDefault(); |
|
var problemIndex = document.getElementById('problemInput').value; |
|
var baseUrl = "{{ url_for('problem', problem_idx=0) }}"; |
|
var newUrl = baseUrl.replace('0', problemIndex); |
|
window.location.href = newUrl; |
|
}); |
|
</script> |
|
<br /> |
|
<br /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="container"> |
|
<div class="sub-container"> |
|
<h3>{{ question['question_title'] }} || {{ question['difficulty'] }} || {{ |
|
question['contest_date'].split('T')[0]}}</h3> |
|
|
|
<pre overflow="auto"> |
|
{{ question['question_content'] }} |
|
</pre> |
|
</div> |
|
|
|
<div class="sub-container"> |
|
<select id="model-select" class="model-select"> |
|
{% for model in models %} |
|
<option value="{{ model }}">{{ model }}@{{ evaluation[model]['correctness'] |
|
}}</option> |
|
{% endfor %} |
|
</select> |
|
|
|
|
|
<div id="all-results"> |
|
|
|
{% for model in models %} |
|
|
|
<div class="model" id="code-{{ model }}" style="display: none;"> |
|
<h2> {{ model }}</h2> |
|
|
|
<button data-model="{{ model }}" class="prev-solution">Previous</button> |
|
<button data-model="{{ model }}" class="next-solution">Next</button> |
|
<div class="solutions-container"> |
|
{% for code in data[model] %} |
|
|
|
<div class="solution{% if loop.first %} active{% endif %}" id="solution-{{ loop.index }}"> |
|
|
|
<ul> |
|
<li> solution idx -- {{ loop.index }} </li> |
|
<li>correctness -- {{ code['pass1'] }}</li> |
|
</ul> |
|
|
|
<div> |
|
<pre |
|
class="{{ 'passed' if code['pass1'] else 'failed' }}"><code class="language-python">{{ code['code'] }}</code></pre> |
|
</div> |
|
</div> |
|
|
|
{% endfor %} |
|
</div> |
|
|
|
</div> |
|
{% endfor %} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script> |
|
<script>hljs.highlightAll();</script> |
|
|
|
<script> |
|
document.addEventListener('DOMContentLoaded', function () { |
|
var allModels = document.querySelectorAll('.model'); |
|
|
|
|
|
allModels.forEach(function (model) { |
|
|
|
var solutions = model.querySelectorAll('.solution'); |
|
var totalSolutions = solutions.length; |
|
var currentIndex = 0; |
|
|
|
|
|
function updateActiveSolution(index) { |
|
solutions.forEach(function (solution, i) { |
|
if (i === index) { |
|
solution.classList.add('active'); |
|
} else { |
|
solution.classList.remove('active'); |
|
} |
|
}); |
|
} |
|
|
|
model.querySelector('.prev-solution').addEventListener('click', function () { |
|
|
|
currentIndex = (currentIndex - 1 + totalSolutions) % totalSolutions; |
|
updateActiveSolution(currentIndex); |
|
}); |
|
|
|
model.querySelector('.next-solution').addEventListener('click', function () { |
|
|
|
currentIndex = (currentIndex + 1) % totalSolutions; |
|
updateActiveSolution(currentIndex); |
|
}); |
|
}); |
|
}); |
|
</script> |
|
|
|
<script> |
|
document.addEventListener('DOMContentLoaded', function () { |
|
var modelSelect = document.getElementById('model-select'); |
|
var models = document.querySelectorAll('.model'); |
|
modelSelect.addEventListener('change', function () { |
|
var selectedModel = this.value; |
|
models.forEach(function (model) { |
|
if (model.id === 'code-' + selectedModel) { |
|
model.style.display = 'block'; |
|
} else { |
|
model.style.display = 'none'; |
|
} |
|
}); |
|
|
|
console.log(localStorage.getItem('lcbviz-currentModel')); |
|
localStorage.setItem('lcbviz-currentModel', this.value); |
|
console.log(localStorage.getItem('lcbviz-currentModel')); |
|
|
|
}); |
|
|
|
|
|
|
|
var currentModel = localStorage.getItem('lcbviz-currentModel'); |
|
currentModel = currentModel || 'GPT-4-Turbo-2024-04-09'; |
|
modelSelect.value = currentModel; |
|
localStorage.setItem('lcbviz-currentModel', currentModel); |
|
|
|
var codeElement = document.getElementById('code-' + currentModel); |
|
if (codeElement) { |
|
codeElement.style.display = 'block'; |
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</html> |