Spaces:

livecodebench
/

code_generation_samples

Running

App Files Files Community

StringChaos commited on Jun 21

Commit

0f609e5

•

1 Parent(s): 122ade4

mini view

Browse files

Files changed (5) hide show

app.py +47 -0
templates/index.html +1 -0
templates/index_mini.html +121 -0
templates/problem.html +21 -8
templates/problem_mini.html +338 -0

app.py CHANGED Viewed

@@ -101,5 +101,52 @@ def problem(problem_idx):
     )
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=7860)

     )
+mini_models = [
+    "DeepSeek-V2",
+    "DeepSeekCoder-V2",
+    "DSCoder-33b-Ins",
+    "LLama3-70b-Ins",
+    "GPT-4-Turbo-2024-04-09",
+    "GPT-4O-2024-05-13",
+    "Claude-2",
+    "Claude-Instant-1",
+    "Claude-3-Opus",
+    "Claude-3-Sonnet",
+    "Claude-3-Haiku",
+]
+@app.route("/mini")
+def mini():
+    # Fetch your data here
+    return render_template(
+        "index_mini.html",
+        models=mini_models,
+        problems=all_evaluations_by_problem_colored,
+    )
+@app.route("/problem_mini/<int:problem_idx>")
+def problem_mini(problem_idx):
+    # Fetch your data here
+    data = {
+        model: all_data_for_view_formatted[model][problem_idx] for model in mini_models
+    }
+    evaluation = all_evaluations_by_problem_colored[problem_idx][1]
+    question = problems[problem_idx]
+    # print(data)
+    return render_template(
+        "problem_mini.html",
+        problem_idx=problem_idx,
+        evaluation=evaluation,
+        models=mini_models,
+        question=question,
+        data=data,
+    )
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=7860)

templates/index.html CHANGED Viewed

@@ -81,6 +81,7 @@
 <body>
     <table id='model-table' style="align:center">
         <thead>

 <body>
+    Full table here. Or go to <a href="{{ url_for('mini') }}">mini leaderboard</a>
     <table id='model-table' style="align:center">
         <thead>

templates/index_mini.html ADDED Viewed

	@@ -0,0 +1,121 @@

+<!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;
+            /* Hide the default checkbox */
+        }
+        .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;
+            /* Add this line to handle overflow */
+        }
+        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'] }}% -->
+                        {{ problem[model]['correctness'] }}%
+                    </div>
+                    {% else %}
+                    -
+                    {% endif %}
+                </td>
+                {% endfor %}
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</body>
+</html>

templates/problem.html CHANGED Viewed

@@ -182,8 +182,21 @@
         {% set prev_problem_idx = problem_idx - 1 %}
         <a href="{{ url_for('problem', problem_idx=prev_problem_idx) }}" class="other-button">Prev Problem</a>
-    </div>
     <br />
     <br />
@@ -221,6 +234,8 @@
                 <div class="model" id="code-{{ model }}" style="display: none;">
                     <h2> {{ model }}</h2>
                     <div class="solutions-container">
                         {% for code in data[model] %}
@@ -239,8 +254,6 @@
                         {% endfor %}
                     </div>
-                    <button data-model="{{ model }}" class="prev-solution">Previous</button>
-                    <button data-model="{{ model }}" class="next-solution">Next</button>
                 </div>
                 {% endfor %}
@@ -259,14 +272,14 @@
     <script>
         document.addEventListener('DOMContentLoaded', function () {
             var allModels = document.querySelectorAll('.model');
-            console.log(allModels);
             allModels.forEach(function (model) {
-                console.log(model);
                 var solutions = model.querySelectorAll('.solution');
                 var totalSolutions = solutions.length;
                 var currentIndex = 0;
-                console.log(totalSolutions, currentIndex);
                 function updateActiveSolution(index) {
                     solutions.forEach(function (solution, i) {
@@ -279,13 +292,13 @@
                 }
                 model.querySelector('.prev-solution').addEventListener('click', function () {
-                    console.log(currentIndex, model);
                     currentIndex = (currentIndex - 1 + totalSolutions) % totalSolutions;
                     updateActiveSolution(currentIndex);
                 });
                 model.querySelector('.next-solution').addEventListener('click', function () {
-                    console.log(currentIndex, model);
                     currentIndex = (currentIndex + 1) % totalSolutions;
                     updateActiveSolution(currentIndex);
                 });

         {% 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();  // Prevent the form from submitting normally
+            var problemIndex = document.getElementById('problemInput').value;
+            var baseUrl = "{{ url_for('problem', problem_idx=0) }}";  // Generate the base URL with a placeholder
+            var newUrl = baseUrl.replace('0', problemIndex);  // Replace the placeholder with the actual index
+            window.location.href = newUrl;  // Redirect to the new URL
+        });
+    </script>
     <br />
     <br />
                 <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] %}
                         {% endfor %}
                     </div>
                 </div>
                 {% endfor %}
     <script>
         document.addEventListener('DOMContentLoaded', function () {
             var allModels = document.querySelectorAll('.model');
+            // console.log(allModels);
             allModels.forEach(function (model) {
+                // console.log(model);
                 var solutions = model.querySelectorAll('.solution');
                 var totalSolutions = solutions.length;
                 var currentIndex = 0;
+                // console.log(totalSolutions, currentIndex);
                 function updateActiveSolution(index) {
                     solutions.forEach(function (solution, i) {
                 }
                 model.querySelector('.prev-solution').addEventListener('click', function () {
+                    // console.log(currentIndex, model);
                     currentIndex = (currentIndex - 1 + totalSolutions) % totalSolutions;
                     updateActiveSolution(currentIndex);
                 });
                 model.querySelector('.next-solution').addEventListener('click', function () {
+                    // console.log(currentIndex, model);
                     currentIndex = (currentIndex + 1) % totalSolutions;
                     updateActiveSolution(currentIndex);
                 });

templates/problem_mini.html ADDED Viewed

	@@ -0,0 +1,338 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        pre {
+            white-space: pre-wrap;
+            /* Wraps the text */
+            word-break: break-word;
+            /* Ensures words break to prevent overflow */
+            background-color: #f4f4f4;
+            /* Light grey background */
+            padding: 2px;
+            /* Padding around the text */
+            border-radius: 2px;
+            /* Rounded corners */
+            border: 1px solid #ccc;
+            /* Light grey border */
+        }
+        .container {
+            display: flex;
+            /* Use flexbox to layout children */
+            justify-content: space-between;
+            /* Space between the children */
+            margin-bottom: 10px;
+            /* Space between each container */
+            background-color: #ddd;
+            /* Debug: background color */
+        }
+        .sub-container {
+            flex: 1;
+            /* Each sub-container takes equal width */
+            padding: 20px;
+            /* Padding inside each sub-container */
+            background-color: #f4f4f4;
+            /* Background color */
+            border-radius: 2px;
+            /* Rounded corners */
+            border: 1px solid #ccc;
+            /* Border */
+            margin: 0 10px;
+            /* Margin between sub-containers */
+        }
+        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;
+            /* Hide the default checkbox */
+        }
+        .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;
+            /* light green */
+            color: black !important;
+        }
+        .failed code.hljs {
+            background-color: #ffe6e6 !important;
+            /* light red */
+            color: black !important;
+        }
+        .solution {
+            display: none;
+            /* Hide all solutions by default */
+        }
+        .solution.active {
+            display: block;
+            /* Only show the active solution */
+        }
+        .button-container {
+            text-align: center;
+            /* Center the button container */
+            margin-top: 20px;
+            /* Add some space above the button */
+        }
+        .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>
+        // Wait for the DOM to be fully loaded
+        document.addEventListener('DOMContentLoaded', function () {
+            // Get all checkboxes with the class 'model-checkbox'
+            var checkboxes = document.querySelectorAll('.model-checkbox');
+            // Load the checkbox states from localStorage and apply them
+            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';
+                }
+            });
+            // Add a change event listener to each checkbox
+            checkboxes.forEach(function (checkbox) {
+                checkbox.addEventListener('change', function () {
+                    // Get the model name from the checkbox ID
+                    var model = this.id.replace('checkbox-', '');
+                    // Get the model element
+                    var modelElement = document.getElementById('code-' + model);
+                    // toggle the display of the model element
+                    modelElement.style.display = this.checked ? 'block' : 'none';
+                    // Save the state of all checkboxes to localStorage
+                    checkboxes.forEach(function (cb) {
+                        var modelId = cb.id.replace('checkbox-', '');
+                        localStorage.setItem('checkbox-' + modelId, cb.checked);
+                    });
+                });
+            });
+        });
+    </script>
+</head>
+<body>
+    <h1>Problem {{ problem_idx }}</h1>
+    <div class="button-container">
+        {% set next_problem_idx = problem_idx + 1 %}
+        <a href="{{ url_for('problem_mini', problem_idx=next_problem_idx) }}" class="other-button">Next Problem</a>
+        {% set prev_problem_idx = problem_idx - 1 %}
+        <a href="{{ url_for('problem_mini', 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();  // Prevent the form from submitting normally
+            var problemIndex = document.getElementById('problemInput').value;
+            var baseUrl = "{{ url_for('problem_mini', problem_idx=0) }}";  // Generate the base URL with a placeholder
+            var newUrl = baseUrl.replace('0', problemIndex);  // Replace the placeholder with the actual index
+            window.location.href = newUrl;  // Redirect to the new URL
+        });
+    </script>
+    <br />
+    <br />
+    <!-- <div id="checkboxes">
+        {% for model in models %}
+        <input type="checkbox" class="model-checkbox" id="checkbox-{{ model }}" checked>
+        <label for="checkbox-{{ model }}">{{ model }}@{{ evaluation[model]['correctness'] }}/{{
+            evaluation[model]['performance'] }}</label>
+        {% endfor %}
+    </div> -->
+    <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']
+                    }}/{{evaluation[model]['performance'] }}</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['correctness'] 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');
+            // console.log(allModels);
+            allModels.forEach(function (model) {
+                // console.log(model);
+                var solutions = model.querySelectorAll('.solution');
+                var totalSolutions = solutions.length;
+                var currentIndex = 0;
+                // console.log(totalSolutions, currentIndex);
+                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 () {
+                    // console.log(currentIndex, model);
+                    currentIndex = (currentIndex - 1 + totalSolutions) % totalSolutions;
+                    updateActiveSolution(currentIndex);
+                });
+                model.querySelector('.next-solution').addEventListener('click', function () {
+                    // console.log(currentIndex, model);
+                    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';
+                    }
+                });
+            });
+        });
+        document.addEventListener('DOMContentLoaded', function () {
+            var selectElement = document.getElementById('model-select');
+            selectElement.value = 'GPT-4-Turbo-2024-04-09';
+            var codeElement = document.getElementById('code-GPT-4-Turbo-2024-04-09');
+            if (codeElement) {
+                codeElement.style.display = 'block';
+            }
+        });
+    </script>
+</body>
+</html>