download choose format

editor/index.html

@@ -44,7 +44,7 @@
                         id="url-input"
                         placeholder="https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/bonsai/bonsai-7k-mini.splat"
                     />
-                    <button id="upload-submit">Import</button>
+                    <button id="upload-submit" class="submit">Import</button>
                 </div>
                 <div class="modal-section">
                     <p id="upload-error"></p>
@@ -52,6 +52,30 @@
             </div>
         </div>
 
+        <div id="download-modal" class="modal">
+            <div class="modal-content">
+                <span id="download-modal-close" class="close">&times;</span>
+                <p>Download Splat</p>
+                <hr class="divider" />
+                <div class="modal-section">
+                    <div id="format-select">
+                        <p>Select format</p>
+                        <div>
+                            <input type="radio" id="splat" name="format" value="splat" checked />
+                            <label for="splat">.splat</label>
+                        </div>
+                        <div>
+                            <input type="radio" id="ply" name="format" value="ply" />
+                            <label for="ply">.ply</label>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-section">
+                    <button id="download-submit" class="submit">Download</button>
+                </div>
+            </div>
+        </div>
+
         <button id="download-button" class="tool-button" title="Download Selection">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32">
                 <path

editor/src/main.ts

@@ -11,11 +11,16 @@ const controlsDisplayButton = document.getElementById("controls-display-button")
 const controlsDisplay = document.getElementById("controls-display") as HTMLDivElement;
 const uploadModal = document.getElementById("upload-modal") as HTMLDialogElement;
 const uploadModalClose = document.getElementById("upload-modal-close") as HTMLButtonElement;
+const downloadModal = document.getElementById("download-modal") as HTMLDialogElement;
+const downloadModalClose = document.getElementById("download-modal-close") as HTMLButtonElement;
 const fileInput = document.getElementById("file-input") as HTMLInputElement;
 const urlInput = document.getElementById("url-input") as HTMLInputElement;
 const uploadSubmit = document.getElementById("upload-submit") as HTMLButtonElement;
 const uploadError = document.getElementById("upload-error") as HTMLDivElement;
+const downloadSubmit = document.getElementById("download-submit") as HTMLButtonElement;
 const learnMoreButton = document.getElementById("about") as HTMLButtonElement;
+const splatRadio = document.getElementById("splat") as HTMLInputElement;
+const plyRadio = document.getElementById("ply") as HTMLInputElement;
 
 const engine = new Engine(canvas);
 
@@ -42,7 +47,7 @@ async function selectFile(file: File) {
             (progress: number) => {
                 progressIndicator.value = progress * 100;
             },
-            format,
+            format
         );
         progressDialog.close();
     } else {
@@ -91,11 +96,11 @@ async function main() {
     });
 
     downloadButton.addEventListener("click", () => {
-        if (SelectionManager.selectedSplat !== null) {
-            SelectionManager.selectedSplat.saveToFile();
-        } else {
-            engine.scene.saveToFile();
-        }
+        downloadModal.style.display = "block";
+    });
+
+    downloadModalClose.addEventListener("click", () => {
+        downloadModal.style.display = "none";
     });
 
     controlsDisplayButton.addEventListener("click", () => {
@@ -125,7 +130,7 @@ async function main() {
             await SPLAT.PLYLoader.LoadAsync(
                 url,
                 engine.scene,
-                (progress) => (progressIndicator.value = progress * 100),
+                (progress) => (progressIndicator.value = progress * 100)
             );
             progressDialog.close();
         } else {
@@ -135,6 +140,24 @@ async function main() {
         }
     });
 
+    downloadSubmit.addEventListener("click", () => {
+        let format;
+        if (splatRadio.checked) {
+            format = "splat";
+        } else if (plyRadio.checked) {
+            format = "ply";
+        } else {
+            throw new Error("Unknown format");
+        }
+        const filename = "model." + format;
+
+        if (SelectionManager.selectedSplat !== null) {
+            SelectionManager.selectedSplat.saveToFile(filename, format);
+        } else {
+            engine.scene.saveToFile(filename, format);
+        }
+    });
+
     learnMoreButton.addEventListener("click", () => {
         window.open("https://huggingface.co/spaces/dylanebert/gsplat-editor/discussions/1", "_blank");
     });

editor/style.css

@@ -150,7 +150,7 @@ progress::-moz-progress-bar {
     padding: 16px;
     border: 1px solid #888;
     width: 80%;
-    max-width: 960px;
+    max-width: 768px;
     color: #ddd;
 }
 
@@ -183,7 +183,7 @@ progress::-moz-progress-bar {
     margin: 0;
 }
 
-#upload-submit {
+.submit {
     width: 80px;
     background-color: #000;
     border: 1px solid #888;
@@ -193,11 +193,11 @@ progress::-moz-progress-bar {
     cursor: pointer;
 }
 
-#upload-submit:hover {
+.submit:hover {
     background-color: #222;
 }
 
-#upload-submit:focus {
+.submit:focus {
     outline: inherit;
 }
 
@@ -233,4 +233,33 @@ input[type="file"] {
     text-decoration: underline;
     cursor: pointer;
     pointer-events: auto;
+}
+
+#format-select {
+    display: flex;
+    align-items: center;
+}
+
+#format-select p {
+    margin-right: 8px;
+}
+
+#format-select div {
+    margin: 0 8px;
+}
+
+input[type="radio"] {
+    appearance: none;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    padding: 3px;
+    background-clip: content-box;
+    border: 1px solid #888;
+    background-color: #000;
+    border-radius: 50%;
+}
+
+input[type="radio"]:checked {
+    background-color: #ddd;
 }