Commit
•
3f62aec
1
Parent(s):
e9d3b55
flask work
Browse files- all_outputs.json +2 -2
- app.py +83 -36
- problems.json +2 -2
- requirements.txt +2 -0
- templates/index.html +121 -0
- templates/problem.html +325 -0
all_outputs.json
CHANGED
@@ -1,3 +1,3 @@
|
|
1 |
version https://git-lfs.github.com/spec/v1
|
2 |
-
oid sha256:
|
3 |
-
size
|
|
|
1 |
version https://git-lfs.github.com/spec/v1
|
2 |
+
oid sha256:d161ba52a4bc0c04978a52f0f0bb6b52d442166228a9bf1f2a3afee56d9195de
|
3 |
+
size 154792423
|
app.py
CHANGED
@@ -1,58 +1,105 @@
|
|
|
|
|
|
|
|
1 |
import json
|
2 |
|
3 |
-
import
|
|
|
|
|
|
|
4 |
|
5 |
|
6 |
with open("problems.json") as f:
|
7 |
problems = json.load(f)
|
8 |
problem_choices = [q["question_title"] for q in problems]
|
9 |
|
|
|
|
|
|
|
10 |
with open("all_outputs.json") as f:
|
11 |
all_outputs = json.load(f)
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
def update_view(problem_index, model_name):
|
16 |
-
code = all_outputs[model_name][problem_index]["code_list"][0]
|
17 |
-
correct = all_outputs[model_name][problem_index]["pass1_list"][0]
|
18 |
-
code_viewer = gr.Code(
|
19 |
-
label=f"Code for Model {model_name} on {problems[problem_index]['question_title']} problem. Passed: {correct}",
|
20 |
-
language="python",
|
21 |
-
lines=10,
|
22 |
-
value=code,
|
23 |
-
interactive=False,
|
24 |
-
)
|
25 |
-
return code_viewer
|
26 |
|
27 |
|
28 |
-
|
29 |
-
## dropdown
|
30 |
-
problem_dropdown = gr.Dropdown(
|
31 |
-
label="Selected Problem",
|
32 |
-
choices=problem_choices,
|
33 |
-
value=problem_choices[0],
|
34 |
-
type="index",
|
35 |
-
)
|
36 |
|
37 |
-
|
38 |
-
|
39 |
-
|
40 |
-
|
41 |
-
|
42 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
43 |
|
44 |
-
code_viewer = update_view(0, model_choices[0])
|
45 |
|
46 |
-
|
47 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
48 |
)
|
|
|
|
|
49 |
|
50 |
-
|
51 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
52 |
)
|
53 |
|
54 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
55 |
|
56 |
|
57 |
if __name__ == "__main__":
|
58 |
-
|
|
|
1 |
+
import os
|
2 |
+
import random
|
3 |
+
import glob
|
4 |
import json
|
5 |
|
6 |
+
import numpy as np
|
7 |
+
from flask import Flask, render_template, request
|
8 |
+
|
9 |
+
app = Flask(__name__)
|
10 |
|
11 |
|
12 |
with open("problems.json") as f:
|
13 |
problems = json.load(f)
|
14 |
problem_choices = [q["question_title"] for q in problems]
|
15 |
|
16 |
+
random_idxs = list(range(len(problems)))
|
17 |
+
random.shuffle(random_idxs)
|
18 |
+
|
19 |
with open("all_outputs.json") as f:
|
20 |
all_outputs = json.load(f)
|
21 |
+
all_models = list(all_outputs.keys())
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
22 |
|
23 |
|
24 |
+
num_questions_filtered = len(problems)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
25 |
|
26 |
+
all_correctness_by_problem = {
|
27 |
+
idx: {model: np.mean(all_outputs[model][idx]["pass1_list"]) for model in all_models}
|
28 |
+
for idx in random_idxs
|
29 |
+
}
|
30 |
+
|
31 |
+
|
32 |
+
def calculate_color(performance):
|
33 |
+
# Convert performance to a value between 0 and 1
|
34 |
+
# Calculate the red and green components of the color
|
35 |
+
if performance > 0.75:
|
36 |
+
return f"rgba(0, 150, 0, 0.5)"
|
37 |
+
elif performance > 0.5:
|
38 |
+
return f"rgba(50, 150, 0, {performance})"
|
39 |
+
elif performance > 0.25:
|
40 |
+
return f"rgba(150, 50, 0, {1-performance})"
|
41 |
+
else:
|
42 |
+
return f"rgba(150, 0, 0, 0.5)"
|
43 |
|
|
|
44 |
|
45 |
+
all_evaluations_by_problem_colored = [
|
46 |
+
(
|
47 |
+
trueidx,
|
48 |
+
{
|
49 |
+
model: {
|
50 |
+
"correctness": f"{all_correctness_by_problem[idx][model]*100:.1f}",
|
51 |
+
"correctness_color": calculate_color(
|
52 |
+
all_correctness_by_problem[idx][model]
|
53 |
+
),
|
54 |
+
}
|
55 |
+
for model in all_models
|
56 |
+
},
|
57 |
+
problems[idx]["difficulty"],
|
58 |
)
|
59 |
+
for trueidx, idx in enumerate(random_idxs)
|
60 |
+
]
|
61 |
|
62 |
+
all_data_for_view_formatted = {
|
63 |
+
model: [
|
64 |
+
[{"code": a, "pass1": b} for a, b in zip(row["code_list"], row["pass1_list"])]
|
65 |
+
# print(row)
|
66 |
+
for idx in random_idxs
|
67 |
+
for row in [resp[idx]]
|
68 |
+
]
|
69 |
+
for model, resp in all_outputs.items()
|
70 |
+
}
|
71 |
+
|
72 |
+
|
73 |
+
@app.route("/")
|
74 |
+
def home():
|
75 |
+
# Fetch your data here
|
76 |
+
print(all_models)
|
77 |
+
return render_template(
|
78 |
+
"index.html", models=all_models, problems=all_evaluations_by_problem_colored
|
79 |
)
|
80 |
|
81 |
+
|
82 |
+
@app.route("/problem/<int:problem_idx>")
|
83 |
+
def problem(problem_idx):
|
84 |
+
# Fetch your data here
|
85 |
+
|
86 |
+
data = {
|
87 |
+
model: all_data_for_view_formatted[model][problem_idx] for model in all_models
|
88 |
+
}
|
89 |
+
evaluation = all_evaluations_by_problem_colored[problem_idx][1]
|
90 |
+
question = problems[problem_idx]
|
91 |
+
|
92 |
+
# print(data)
|
93 |
+
|
94 |
+
return render_template(
|
95 |
+
"problem.html",
|
96 |
+
problem_idx=problem_idx,
|
97 |
+
evaluation=evaluation,
|
98 |
+
models=all_models,
|
99 |
+
question=question,
|
100 |
+
data=data,
|
101 |
+
)
|
102 |
|
103 |
|
104 |
if __name__ == "__main__":
|
105 |
+
app.run()
|
problems.json
CHANGED
@@ -1,3 +1,3 @@
|
|
1 |
version https://git-lfs.github.com/spec/v1
|
2 |
-
oid sha256:
|
3 |
-
size
|
|
|
1 |
version https://git-lfs.github.com/spec/v1
|
2 |
+
oid sha256:787405a4cc8aba30c50f7e0f3bd2f2026f9035e41471400167ec1c27e22b7097
|
3 |
+
size 870796
|
requirements.txt
ADDED
@@ -0,0 +1,2 @@
|
|
|
|
|
|
|
1 |
+
flask
|
2 |
+
numpy
|
templates/index.html
ADDED
@@ -0,0 +1,121 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html>
|
3 |
+
|
4 |
+
<head>
|
5 |
+
<style>
|
6 |
+
body {
|
7 |
+
font-family: Arial, sans-serif;
|
8 |
+
margin: 0;
|
9 |
+
padding: 20px;
|
10 |
+
background-color: #f4f4f4;
|
11 |
+
}
|
12 |
+
|
13 |
+
#checkboxes {
|
14 |
+
margin-bottom: 20px;
|
15 |
+
}
|
16 |
+
|
17 |
+
.model-checkbox+label {
|
18 |
+
margin-right: 10px;
|
19 |
+
padding: 5px 10px;
|
20 |
+
background-color: #e7e7e7;
|
21 |
+
border-radius: 5px;
|
22 |
+
cursor: pointer;
|
23 |
+
user-select: none;
|
24 |
+
}
|
25 |
+
|
26 |
+
.model-checkbox {
|
27 |
+
display: none;
|
28 |
+
/* Hide the default checkbox */
|
29 |
+
}
|
30 |
+
|
31 |
+
.model-checkbox:checked+label {
|
32 |
+
background-color: #d0e6a5;
|
33 |
+
color: #0b4d03;
|
34 |
+
}
|
35 |
+
|
36 |
+
table {
|
37 |
+
width: 100%;
|
38 |
+
border-collapse: collapse;
|
39 |
+
background-color: #fff;
|
40 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
41 |
+
margin: auto;
|
42 |
+
overflow: hidden;
|
43 |
+
/* Add this line to handle overflow */
|
44 |
+
}
|
45 |
+
|
46 |
+
th,
|
47 |
+
td {
|
48 |
+
border: 1px solid #ddd;
|
49 |
+
padding: 10px 15px;
|
50 |
+
text-align: center;
|
51 |
+
}
|
52 |
+
|
53 |
+
th {
|
54 |
+
background-color: #f8f8f8;
|
55 |
+
font-weight: bold;
|
56 |
+
}
|
57 |
+
|
58 |
+
tr:nth-child(even) {
|
59 |
+
background-color: #f2f2f2;
|
60 |
+
}
|
61 |
+
|
62 |
+
.performance-bar {
|
63 |
+
display: block;
|
64 |
+
height: 20px;
|
65 |
+
background: linear-gradient(to right, #00ff00 0%, #ff0000 100%);
|
66 |
+
border-radius: 5px;
|
67 |
+
}
|
68 |
+
|
69 |
+
.performance {
|
70 |
+
font-weight: bold;
|
71 |
+
color: #fff;
|
72 |
+
text-align: center;
|
73 |
+
line-height: 20px;
|
74 |
+
height: 20px;
|
75 |
+
margin: 0;
|
76 |
+
}
|
77 |
+
</style>
|
78 |
+
|
79 |
+
</head>
|
80 |
+
|
81 |
+
<body>
|
82 |
+
|
83 |
+
|
84 |
+
|
85 |
+
<table id='model-table' style="align:center">
|
86 |
+
<thead>
|
87 |
+
<tr>
|
88 |
+
<th>Problem ID</th>
|
89 |
+
<th>Difficulty</th>
|
90 |
+
{% for model in models %}
|
91 |
+
<th class="column-{{ model }}">{{ model }}</th>
|
92 |
+
{% endfor %}
|
93 |
+
</tr>
|
94 |
+
</thead>
|
95 |
+
<tbody>
|
96 |
+
{% for problem_idx, problem, difficulty in problems %}
|
97 |
+
<tr>
|
98 |
+
<td> <a href="{{ url_for('problem', problem_idx=problem_idx) }}"> {{ problem_idx }} </a> </td>
|
99 |
+
<td> {{ difficulty }} </td>
|
100 |
+
{% for model in models %}
|
101 |
+
<td style="background-color: {{ problem[model]['correctness_color'] }};" class="column-{{ model }}">
|
102 |
+
{% if model in problem %}
|
103 |
+
<div>
|
104 |
+
<!-- {{ problem[model]['correctness'] }}% -->
|
105 |
+
{{ problem[model]['correctness'] }}%
|
106 |
+
</div>
|
107 |
+
{% else %}
|
108 |
+
-
|
109 |
+
{% endif %}
|
110 |
+
</td>
|
111 |
+
{% endfor %}
|
112 |
+
</tr>
|
113 |
+
{% endfor %}
|
114 |
+
|
115 |
+
</tbody>
|
116 |
+
</table>
|
117 |
+
|
118 |
+
|
119 |
+
</body>
|
120 |
+
|
121 |
+
</html>
|
templates/problem.html
ADDED
@@ -0,0 +1,325 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 loaded
|
134 |
+
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 them
|
139 |
+
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 checkbox
|
152 |
+
checkboxes.forEach(function (checkbox) {
|
153 |
+
checkbox.addEventListener('change', function () {
|
154 |
+
// Get the model name from the checkbox ID
|
155 |
+
var model = this.id.replace('checkbox-', '');
|
156 |
+
|
157 |
+
// Get the model element
|
158 |
+
var modelElement = document.getElementById('code-' + model);
|
159 |
+
|
160 |
+
// toggle the display of the model element
|
161 |
+
modelElement.style.display = this.checked ? 'block' : 'none';
|
162 |
+
|
163 |
+
// Save the state of all checkboxes to localStorage
|
164 |
+
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>Problem {{ problem_idx }}</h1>
|
177 |
+
|
178 |
+
|
179 |
+
<div class="button-container">
|
180 |
+
{% set next_problem_idx = problem_idx + 1 %}
|
181 |
+
<a href="{{ url_for('problem', 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', problem_idx=prev_problem_idx) }}" class="other-button">Prev Problem</a>
|
185 |
+
</div>
|
186 |
+
|
187 |
+
<br />
|
188 |
+
<br />
|
189 |
+
|
190 |
+
<!-- <div id="checkboxes">
|
191 |
+
{% for model in models %}
|
192 |
+
<input type="checkbox" class="model-checkbox" id="checkbox-{{ model }}" checked>
|
193 |
+
<label for="checkbox-{{ model }}">{{ model }}@{{ evaluation[model]['correctness'] }}/{{
|
194 |
+
evaluation[model]['performance'] }}</label>
|
195 |
+
{% endfor %}
|
196 |
+
</div> -->
|
197 |
+
|
198 |
+
<div class="container">
|
199 |
+
<div class="sub-container">
|
200 |
+
<h3>{{ question['question_title'] }} || {{ question['difficulty'] }} || {{
|
201 |
+
question['contest_date'].split('T')[0]}}</h3>
|
202 |
+
|
203 |
+
<pre overflow="auto">
|
204 |
+
{{ question['question_content'] }}
|
205 |
+
</pre>
|
206 |
+
</div>
|
207 |
+
|
208 |
+
<div class="sub-container">
|
209 |
+
<select id="model-select" class="model-select">
|
210 |
+
{% for model in models %}
|
211 |
+
<option value="{{ model }}">{{ model }}@{{ evaluation[model]['correctness']
|
212 |
+
}}/{{evaluation[model]['performance'] }}</option>
|
213 |
+
{% endfor %}
|
214 |
+
</select>
|
215 |
+
|
216 |
+
|
217 |
+
<div id="all-results">
|
218 |
+
|
219 |
+
{% for model in models %}
|
220 |
+
|
221 |
+
<div class="model" id="code-{{ model }}" style="display: none;">
|
222 |
+
<h2> {{ model }}</h2>
|
223 |
+
|
224 |
+
<div class="solutions-container">
|
225 |
+
{% for code in data[model] %}
|
226 |
+
|
227 |
+
<div class="solution{% if loop.first %} active{% endif %}" id="solution-{{ loop.index }}">
|
228 |
+
|
229 |
+
<ul>
|
230 |
+
<li> solution idx -- {{ loop.index }} </li>
|
231 |
+
<li>correctness -- {{ code['pass1'] }}</li>
|
232 |
+
</ul>
|
233 |
+
|
234 |
+
<div>
|
235 |
+
<pre
|
236 |
+
class="{{ 'passed' if code['correctness'] else 'failed' }}"><code class="language-python">{{ code['code'] }}</code></pre>
|
237 |
+
</div>
|
238 |
+
</div>
|
239 |
+
|
240 |
+
{% endfor %}
|
241 |
+
</div>
|
242 |
+
<button data-model="{{ model }}" class="prev-solution">Previous</button>
|
243 |
+
<button data-model="{{ model }}" class="next-solution">Next</button>
|
244 |
+
|
245 |
+
</div>
|
246 |
+
{% endfor %}
|
247 |
+
</div>
|
248 |
+
</div>
|
249 |
+
</div>
|
250 |
+
</div>
|
251 |
+
|
252 |
+
|
253 |
+
|
254 |
+
|
255 |
+
|
256 |
+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
|
257 |
+
<script>hljs.highlightAll();</script>
|
258 |
+
|
259 |
+
<script>
|
260 |
+
document.addEventListener('DOMContentLoaded', function () {
|
261 |
+
var allModels = document.querySelectorAll('.model');
|
262 |
+
console.log(allModels);
|
263 |
+
|
264 |
+
allModels.forEach(function (model) {
|
265 |
+
console.log(model);
|
266 |
+
var solutions = model.querySelectorAll('.solution');
|
267 |
+
var totalSolutions = solutions.length;
|
268 |
+
var currentIndex = 0;
|
269 |
+
console.log(totalSolutions, currentIndex);
|
270 |
+
|
271 |
+
function updateActiveSolution(index) {
|
272 |
+
solutions.forEach(function (solution, i) {
|
273 |
+
if (i === index) {
|
274 |
+
solution.classList.add('active');
|
275 |
+
} else {
|
276 |
+
solution.classList.remove('active');
|
277 |
+
}
|
278 |
+
});
|
279 |
+
}
|
280 |
+
|
281 |
+
model.querySelector('.prev-solution').addEventListener('click', function () {
|
282 |
+
console.log(currentIndex, model);
|
283 |
+
currentIndex = (currentIndex - 1 + totalSolutions) % totalSolutions;
|
284 |
+
updateActiveSolution(currentIndex);
|
285 |
+
});
|
286 |
+
|
287 |
+
model.querySelector('.next-solution').addEventListener('click', function () {
|
288 |
+
console.log(currentIndex, model);
|
289 |
+
currentIndex = (currentIndex + 1) % totalSolutions;
|
290 |
+
updateActiveSolution(currentIndex);
|
291 |
+
});
|
292 |
+
});
|
293 |
+
});
|
294 |
+
</script>
|
295 |
+
|
296 |
+
<script>
|
297 |
+
document.addEventListener('DOMContentLoaded', function () {
|
298 |
+
var modelSelect = document.getElementById('model-select');
|
299 |
+
var models = document.querySelectorAll('.model');
|
300 |
+
modelSelect.addEventListener('change', function () {
|
301 |
+
var selectedModel = this.value;
|
302 |
+
models.forEach(function (model) {
|
303 |
+
if (model.id === 'code-' + selectedModel) {
|
304 |
+
model.style.display = 'block';
|
305 |
+
} else {
|
306 |
+
model.style.display = 'none';
|
307 |
+
}
|
308 |
+
});
|
309 |
+
});
|
310 |
+
});
|
311 |
+
document.addEventListener('DOMContentLoaded', function () {
|
312 |
+
var selectElement = document.getElementById('model-select');
|
313 |
+
selectElement.value = 'GPT-4-Turbo-2024-04-09';
|
314 |
+
|
315 |
+
var codeElement = document.getElementById('code-GPT-4-Turbo-2024-04-09');
|
316 |
+
if (codeElement) {
|
317 |
+
codeElement.style.display = 'block';
|
318 |
+
}
|
319 |
+
});
|
320 |
+
|
321 |
+
</script>
|
322 |
+
|
323 |
+
</body>
|
324 |
+
|
325 |
+
</html>
|