| <!DOCTYPE html> |
| <html> |
|
|
| <head> |
| <style> |
| 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; |
| } |
| |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| background-color: #fff; |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| margin: auto; |
| overflow: hidden; |
| |
| } |
| |
| th, |
| td { |
| border: 1px solid #ddd; |
| padding: 10px 15px; |
| text-align: center; |
| } |
| |
| th { |
| background-color: #f8f8f8; |
| font-weight: bold; |
| } |
| |
| tr:nth-child(even) { |
| background-color: #f2f2f2; |
| } |
| |
| .performance-bar { |
| display: block; |
| height: 20px; |
| background: linear-gradient(to right, #00ff00 0%, #ff0000 100%); |
| border-radius: 5px; |
| } |
| |
| .performance { |
| font-weight: bold; |
| color: #fff; |
| text-align: center; |
| line-height: 20px; |
| height: 20px; |
| margin: 0; |
| } |
| </style> |
|
|
| </head> |
|
|
| <body> |
|
|
|
|
|
|
| <table id='model-table' style="align:center"> |
| <thead> |
| <tr> |
| <th>Problem ID</th> |
| <th>Difficulty</th> |
| {% for model in models %} |
| <th class="column-{{ model }}">{{ model }}</th> |
| {% endfor %} |
| </tr> |
| </thead> |
| <tbody> |
| {% for problem_idx, problem, difficulty in problems %} |
| <tr> |
| <td> <a href="{{ url_for('problem_mini', problem_idx=problem_idx) }}"> {{ problem_idx }} </a> </td> |
| <td> {{ difficulty }} </td> |
| {% for model in models %} |
| <td style="background-color: {{ problem[model]['correctness_color'] }};" class="column-{{ model }}"> |
| {% if model in problem %} |
| <div> |
| |
| {{ problem[model]['correctness'] }}% |
| </div> |
| {% else %} |
| - |
| {% endif %} |
| </td> |
| {% endfor %} |
| </tr> |
| {% endfor %} |
|
|
| </tbody> |
| </table> |
|
|
|
|
| </body> |
|
|
| </html> |
