feat: add "Load task by id" functionality

apps/css/testing_interface.css

@@ -167,3 +167,56 @@ input, button {
 #modal input {
     margin-left: 70px;
 }
+
+#task_id_selector, #task_id_selector_main {
+    margin: 10px 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    white-space: nowrap;
+}
+
+#task_id_input, #task_id_input_main {
+    width: 100px;
+    padding: 2px 5px;
+    margin: 0 5px;
+}
+
+#load_task_id_btn, #load_task_id_btn_main {
+    padding: 2px 10px;
+    margin: 0 5px;
+}
+
+#error_display {
+    color: red;
+    margin-top: 10px;
+    display: none;
+}
+
+#modal #task_id_selector {
+    margin-top: 20px;
+    display: inline-flex;
+    justify-content: center;
+}
+
+#modal #modal_task_id_input {
+    width: 100px;
+    padding: 2px 5px;
+    margin: 0 5px;
+}
+
+#modal #modal_load_task_id_btn {
+    margin: 0;
+    padding: 2px 10px;
+}
+
+.task_type_select {
+    padding: 2px 5px;
+    margin: 0 5px;
+    width: auto;
+    min-width: 120px;
+}
+
+#modal .task_type_select {
+    margin: 0 5px;
+}

apps/js/testing_interface.js

@@ -270,6 +270,46 @@ function initializeSelectable() {
     }
 }
 
+function loadTaskById(inputElementId = 'task_id_input') {
+    const taskId = document.getElementById(inputElementId).value.trim();
+    if (!taskId) {
+        errorMsg("Please enter a task ID");
+        return;
+    }
+
+    const selectId = inputElementId === 'task_id_input' ? 'task_type_select' : 'task_type_select_main';
+    const taskType = document.getElementById(selectId).value;
+    const taskTypeDisplay = taskType === 'evaluation' ? 'evaluation set' : 'training set';
+
+    $.getJSON(`https://api.github.com/repos/fchollet/ARC/contents/data/${taskType}/${taskId}.json`, function(data) {
+        try {
+            const decodedContent = atob(data.content);
+            const json = JSON.parse(decodedContent);
+            train = json.train;
+            test = json.test;
+        } catch (e) {
+            errorMsg('Bad file format');
+            return;
+        }
+        loadJSONTask(train, test);
+        $('#modal_bg').hide();
+        infoMsg(`Loaded task from ${taskTypeDisplay}: ${taskId}`);
+        display_task_name(`${taskId} (${taskTypeDisplay})`, null, null);
+    })
+    .error(function(){
+        errorMsg('Error loading task');
+    });
+}
+
+function displayError(message) {
+    const errorDisplay = document.getElementById('error_display');
+    errorDisplay.textContent = message;
+    errorDisplay.style.display = 'block';
+    setTimeout(() => {
+        errorDisplay.style.display = 'none';
+    }, 3000);
+}
+
 // Initial event binding.
 
 $(document).ready(function () {

apps/testing_interface.html

@@ -22,6 +22,16 @@
                 <br />
                 <input type="file" class="load_task"/>
                 <button onclick="randomTask()" id="random_task_btn">Random task</button>
+
+                <div id="task_id_selector">
+                    <label for="task_id_input">Load task by ID: </label>
+                    <input type="text" id="task_id_input" placeholder="e.g. d5c634a2" />
+                    <select id="task_type_select" class="task_type_select">
+                        <option value="evaluation">Evaluation set</option>
+                        <option value="training">Training set</option>
+                    </select>
+                    <button onclick="loadTaskById()" id="load_task_id_btn">Load</button>
+                </div>
             </div>
         </div>
         <div id="workspace">
@@ -48,8 +58,19 @@
                         <input type="file" id="load_task_file_input" class="load_task" style="display: none;"/>
                         <input type="button" value="Browse..." onclick="document.getElementById('load_task_file_input').click();" />
                         <button onclick="randomTask()" id="random_task_btn"> Random... </button>
+
+                        <div id="task_id_selector_main">
+                            <label for="task_id_input_main">Load task by ID: </label>
+                            <input type="text" id="task_id_input_main" placeholder="e.g. d5c634a2" />
+                            <select id="task_type_select_main" class="task_type_select">
+                                <option value="evaluation">Evaluation set</option>
+                                <option value="training">Training set</option>
+                            </select>
+                            <button onclick="loadTaskById('task_id_input_main')" id="load_task_id_btn_main">Load</button>
+                        </div>
+
                         <p>
-                        <label id='task_name' for="random_task_btn"> Task name: </label>
+                        <label id='task_name'> Task name: </label>
                         <p>
                         <label for="show_symbol_numbers">Show symbol numbers: </label>
                         <input type="checkbox" id="show_symbol_numbers" name="show_symbol_numbers"