better file load (drag and drop seems to work badly on linux)

Author: jonas-eschmann

index.css

@@ -136,6 +136,15 @@ canvas{
     word-break: break-all;
     margin-right: 12px;
 }
+#load-checkpoint-btn{
+    margin-left: 12px;
+    padding: 5px 10px;
+    font-size: 16px;
+}
+#load-checkpoint-btn-backend{
+    display: none;
+}
+
 #observations{
     font-family: monospace;
     font-size: 80%;

index.html

@@ -68,6 +68,8 @@
                 <div class="policy-container-item">
                     <span id="checkpoint-name">default</span>
                     <button id="default-checkpoint-btn">Default</button>
+                    <input type="file" id="load-checkpoint-btn-backend"></input>
+                    <button id="load-checkpoint-btn">Load File</button>
                 </div>
                 <span class="policy-container-item">Observations:</span>
                 <div class="policy-container-item">

index.js

@@ -151,6 +151,22 @@ async function main(){
     document.getElementById("default-checkpoint-btn").addEventListener("click", async () => {
         load_model(file_url)
     })
+    document.getElementById("load-checkpoint-btn").addEventListener("click", async () => {
+        document.getElementById("load-checkpoint-btn-backend").click();
+    })
+    document.getElementById("load-checkpoint-btn-backend").addEventListener("change", async () => {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = async function(e) {
+                const array_buffer = e.target.result;
+                load_model(array_buffer)
+                console.log("loaded model: ", model.checkpoint_name)
+                showStatus(`Loaded model: ${model.checkpoint_name}`);
+            };
+            reader.readAsArrayBuffer(file);
+        }
+    })
     document.getElementById("observations").addEventListener("keydown", (e) => {
         if (e.key === "Enter") {
             e.preventDefault();