Spaces:

dylanebert
/

gsplat-editor

Running

App Files Files Community

dylanebert commited on Dec 18, 2023

Commit

9332801

1 Parent(s): 11f52a3

on-screen controls, flexible upload

Browse files

Files changed (8) hide show

README.md +0 -20
editor/index.html +111 -2
editor/src/Controls.ts +2 -0
editor/src/DefaultMode.ts +13 -3
editor/src/OrbitControls.ts +18 -10
editor/src/main.ts +65 -3
editor/style.css +168 -14
style.css +1 -1

README.md CHANGED Viewed

@@ -18,23 +18,3 @@ This simple editor showcases the realtime editing capabilities of gsplat.js.
 -   Import gaussian splatting objects from a file (`.ply` or `.splat`) by dragging and dropping them into the editor window.
 -   Download splats as a `.splat` file by clicking the download button in the top right corner.s
     -   If an object is selected, only that object will be downloaded. Otherwise, all objects will be combined and downloaded.
--   Use the controls below to edit the splats.
-## Controls
-### Camera
--   `Middle Mouse` - Orbit camera
--   `Shift + Middle Mouse` - Pan camera
--   `Scroll Wheel` - Zoom camera
-### Editing
--   `Left Mouse` - Select an object / confirm action
--   `Right Mouse` - Cancel action
--   `G` - Grab selected object
--   `R` - Rotate selected object
--   `S` - Scale selected object
--   `X` - Delete selected object / lock to X axis
--   `Y` - Lock to Y axis
--   `Z` - Lock to Z axis

 -   Import gaussian splatting objects from a file (`.ply` or `.splat`) by dragging and dropping them into the editor window.
 -   Download splats as a `.splat` file by clicking the download button in the top right corner.s
     -   If an object is selected, only that object will be downloaded. Otherwise, all objects will be combined and downloaded.

editor/index.html CHANGED Viewed

@@ -1,8 +1,9 @@
-<!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
         <link rel="stylesheet" href="style.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>gsplat.js - Editor Demo</title>
     </head>
@@ -16,7 +17,42 @@
             </dialog>
         </div>
-        <button id="download-button">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32">
                 <path
                     fill="#ddd"
@@ -25,6 +61,79 @@
             </svg>
         </button>
         <canvas id="canvas"> </canvas>
         <script type="module" src="/src/main.ts"></script>
     </body>

+<!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
         <link rel="stylesheet" href="style.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>gsplat.js - Editor Demo</title>
     </head>
             </dialog>
         </div>
+        <button id="upload-button" class="tool-button" title="Import Splat">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32">
+                <path fill="#ddd" d="M28 19H14.83l2.58-2.59L16 15l-5 5l5 5l1.41-1.41L14.83 21H28z" />
+                <path
+                    fill="#ddd"
+                    d="M24 14v-4a1 1 0 0 0-.29-.71l-7-7A1 1 0 0 0 16 2H6a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2h-2v2H6V4h8v6a2 2 0 0 0 2 2h6v2Zm-8-4V4.41L21.59 10Z"
+                />
+            </svg>
+        </button>
+        <div id="upload-modal" class="modal">
+            <div class="modal-content">
+                <span id="upload-modal-close" class="close">&times;</span>
+                <p>Import Splat</p>
+                <hr class="divider" />
+                <div class="modal-section">
+                    <p>Upload a file</p>
+                    <input type="file" id="file-input" accept=".splat,.ply" />
+                    <label for="file-input" id="file-input-label">Choose File</label>
+                </div>
+                <div class="modal-section">
+                    <p>Or enter a URL</p>
+                    <input
+                        type="text"
+                        id="url-input"
+                        placeholder="https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/bonsai/bonsai-7k-mini.splat"
+                    />
+                    <button id="upload-submit">Import</button>
+                </div>
+                <div class="modal-section">
+                    <p id="upload-error"></p>
+                </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
                     fill="#ddd"
             </svg>
         </button>
+        <button id="controls-display-button" class="tool-button active" title="Show/Hide Controls">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32">
+                <path
+                    fill="#ddd"
+                    d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m0 26a12 12 0 1 1 12-12a12 12 0 0 1-12 12"
+                />
+                <circle cx="16" cy="23.5" r="1.5" fill="#ddd" />
+                <path
+                    fill="#ddd"
+                    d="M17 8h-1.5a4.49 4.49 0 0 0-4.5 4.5v.5h2v-.5a2.5 2.5 0 0 1 2.5-2.5H17a2.5 2.5 0 0 1 0 5h-2v4.5h2V17a4.5 4.5 0 0 0 0-9"
+                />
+            </svg>
+        </button>
+        <div id="controls-display" class="active">
+            <p>Controls</p>
+            <hr class="divider" />
+            <p>Camera</p>
+            <div class="control-item">
+                <p class="control-name">Orbit</p>
+                <p class="control-icon">MMB / Alt + LMB</p>
+            </div>
+            <div class="control-item">
+                <p class="control-name">Pan</p>
+                <p class="control-icon">Shift + MMB / Alt + RMB</p>
+            </div>
+            <div class="control-item">
+                <p class="control-name">Zoom</p>
+                <p class="control-icon">Scroll</p>
+            </div>
+            <hr class="divider" />
+            <p>Actions</p>
+            <div class="control-item">
+                <p class="control-name">Select</p>
+                <p class="control-icon">LMB</p>
+            </div>
+            <div class="control-item">
+                <p class="control-name">Grab</p>
+                <p class="control-icon">G</p>
+            </div>
+            <div class="control-item">
+                <p class="control-name">Rotate</p>
+                <p class="control-icon">R</p>
+            </div>
+            <div class="control-item">
+                <p class="control-name">Scale</p>
+                <p class="control-icon">S</p>
+            </div>
+            <div class="control-item">
+                <p class="control-name">Delete</p>
+                <p class="control-icon">X</p>
+            </div>
+            <hr class="divider" />
+            <p>During Action</p>
+            <div class="control-item">
+                <p class="control-name">Lock X Axis</p>
+                <p class="control-icon">X</p>
+            </div>
+            <div class="control-item">
+                <p class="control-name">Lock Y Axis</p>
+                <p class="control-icon">Y</p>
+            </div>
+            <div class="control-item">
+                <p class="control-name">Lock Z Axis</p>
+                <p class="control-icon">Z</p>
+            </div>
+            <hr class="divider" />
+            <div class="control-item">
+                <p class="control-name">Undo</p>
+                <p class="control-icon">Ctrl + Z</p>
+            </div>
+        </div>
         <canvas id="canvas"> </canvas>
         <script type="module" src="/src/main.ts"></script>
     </body>

editor/src/Controls.ts CHANGED Viewed

@@ -7,7 +7,9 @@ class Controls {
         this._inputHandlers = inputHandlers;
         window.addEventListener("keydown", this.handleInput.bind(this));
         canvas.addEventListener("mousemove", this.handleInput.bind(this));
         canvas.addEventListener("click", this.handleInput.bind(this));
         canvas.addEventListener("contextmenu", this.handleInput.bind(this));
     }

         this._inputHandlers = inputHandlers;
         window.addEventListener("keydown", this.handleInput.bind(this));
+        canvas.addEventListener("mousedown", this.handleInput.bind(this));
         canvas.addEventListener("mousemove", this.handleInput.bind(this));
+        canvas.addEventListener("mouseup", this.handleInput.bind(this));
         canvas.addEventListener("click", this.handleInput.bind(this));
         canvas.addEventListener("contextmenu", this.handleInput.bind(this));
     }

editor/src/DefaultMode.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 import { UndoManager } from "./UndoManager";
 import { ModeManager } from "./ModeManager";
 import { SelectionManager } from "./SelectionManager";
@@ -43,8 +44,15 @@ class DefaultMode implements InputMode {
             }
         };
-        const handleClick = () => {
             const mousePosition = engine.mouseManager.currentMousePosition;
             const result = engine.intersectionTester.testPoint(mousePosition.x, mousePosition.y);
             if (result !== null) {
                 SelectionManager.selectedSplat = result;
@@ -59,7 +67,8 @@ class DefaultMode implements InputMode {
         engine.keyboardManager.registerKey("x", handleDelete);
         engine.keyboardManager.registerKey("z", handleUndo);
         engine.keyboardManager.registerKey("a", handleClearSelection);
-        engine.mouseManager.registerMouse("click", handleClick);
         engine.orbitControls.enabled = true;
         this.exit = () => {
@@ -69,7 +78,8 @@ class DefaultMode implements InputMode {
             engine.keyboardManager.unregisterKey("x");
             engine.keyboardManager.unregisterKey("z");
             engine.keyboardManager.unregisterKey("a");
-            engine.mouseManager.unregisterMouse("click");
             engine.orbitControls.enabled = false;
         };
     }

+import * as SPLAT from "gsplat";
 import { UndoManager } from "./UndoManager";
 import { ModeManager } from "./ModeManager";
 import { SelectionManager } from "./SelectionManager";
             }
         };
+        let mouseDownPosition: SPLAT.Vector3;
+        const handleMouseDown = () => {
+            mouseDownPosition = engine.mouseManager.currentMousePosition;
+        };
+        const handleMouseUp = () => {
             const mousePosition = engine.mouseManager.currentMousePosition;
+            const distance = mousePosition.distanceTo(mouseDownPosition);
+            if (distance > 0.01) return;
             const result = engine.intersectionTester.testPoint(mousePosition.x, mousePosition.y);
             if (result !== null) {
                 SelectionManager.selectedSplat = result;
         engine.keyboardManager.registerKey("x", handleDelete);
         engine.keyboardManager.registerKey("z", handleUndo);
         engine.keyboardManager.registerKey("a", handleClearSelection);
+        engine.mouseManager.registerMouse("mousedown", handleMouseDown);
+        engine.mouseManager.registerMouse("mouseup", handleMouseUp);
         engine.orbitControls.enabled = true;
         this.exit = () => {
             engine.keyboardManager.unregisterKey("x");
             engine.keyboardManager.unregisterKey("z");
             engine.keyboardManager.unregisterKey("a");
+            engine.mouseManager.unregisterMouse("mousedown");
+            engine.mouseManager.unregisterMouse("mouseup");
             engine.orbitControls.enabled = false;
         };
     }

editor/src/OrbitControls.ts CHANGED Viewed

@@ -6,10 +6,10 @@ class OrbitControls {
     minAngle: number = -90;
     maxAngle: number = 90;
     minZoom: number = 0.1;
-    maxZoom: number = 30;
     orbitSpeed: number = 1.75;
     panSpeed: number = 1.25;
-    zoomSpeed: number = 1.75;
     dampening: number = 0.5;
     setCameraTarget: (newTarget: SPLAT.Vector3) => void = () => {};
     update: () => void;
@@ -20,8 +20,8 @@ class OrbitControls {
         canvas: HTMLElement,
         alpha: number = 0.5,
         beta: number = 0.5,
-        radius: number = 5,
-        inputTarget: SPLAT.Vector3 = new SPLAT.Vector3(),
     ) {
         let target = inputTarget.clone();
@@ -78,16 +78,24 @@ class OrbitControls {
                 panning = e.shiftKey;
                 lastX = e.clientX;
                 lastY = e.clientY;
             }
         };
         const onMouseUp = (e: MouseEvent) => {
             preventDefault(e);
-            if (e.button === 1) {
-                dragging = false;
-                panning = false;
-            }
         };
         const onMouseMove = (e: MouseEvent) => {
@@ -112,7 +120,7 @@ class OrbitControls {
                 desiredBeta += dy * this.orbitSpeed * 0.003;
                 desiredBeta = Math.min(
                     Math.max(desiredBeta, (this.minAngle * Math.PI) / 180),
-                    (this.maxAngle * Math.PI) / 180,
                 );
             }
@@ -194,7 +202,7 @@ class OrbitControls {
                 desiredBeta += dy * this.orbitSpeed * 0.003;
                 desiredBeta = Math.min(
                     Math.max(desiredBeta, (this.minAngle * Math.PI) / 180),
-                    (this.maxAngle * Math.PI) / 180,
                 );
                 lastX = e.touches[0].clientX;

     minAngle: number = -90;
     maxAngle: number = 90;
     minZoom: number = 0.1;
+    maxZoom: number = 50;
     orbitSpeed: number = 1.75;
     panSpeed: number = 1.25;
+    zoomSpeed: number = 2;
     dampening: number = 0.5;
     setCameraTarget: (newTarget: SPLAT.Vector3) => void = () => {};
     update: () => void;
         canvas: HTMLElement,
         alpha: number = 0.5,
         beta: number = 0.5,
+        radius: number = 13,
+        inputTarget: SPLAT.Vector3 = new SPLAT.Vector3()
     ) {
         let target = inputTarget.clone();
                 panning = e.shiftKey;
                 lastX = e.clientX;
                 lastY = e.clientY;
+            } else if (e.altKey && e.button === 0) {
+                dragging = true;
+                panning = false;
+                lastX = e.clientX;
+                lastY = e.clientY;
+            } else if (e.altKey && e.button === 2) {
+                dragging = true;
+                panning = true;
+                lastX = e.clientX;
+                lastY = e.clientY;
             }
         };
         const onMouseUp = (e: MouseEvent) => {
             preventDefault(e);
+            dragging = false;
+            panning = false;
         };
         const onMouseMove = (e: MouseEvent) => {
                 desiredBeta += dy * this.orbitSpeed * 0.003;
                 desiredBeta = Math.min(
                     Math.max(desiredBeta, (this.minAngle * Math.PI) / 180),
+                    (this.maxAngle * Math.PI) / 180
                 );
             }
                 desiredBeta += dy * this.orbitSpeed * 0.003;
                 desiredBeta = Math.min(
                     Math.max(desiredBeta, (this.minAngle * Math.PI) / 180),
+                    (this.maxAngle * Math.PI) / 180
                 );
                 lastX = e.touches[0].clientX;

editor/src/main.ts CHANGED Viewed

@@ -5,7 +5,16 @@ import { SelectionManager } from "./SelectionManager";
 const canvas = document.getElementById("canvas") as HTMLCanvasElement;
 const progressDialog = document.getElementById("progress-dialog") as HTMLDialogElement;
 const progressIndicator = document.getElementById("progress-indicator") as HTMLProgressElement;
 const downloadButton = document.getElementById("download-button") as HTMLButtonElement;
 const engine = new Engine(canvas);
@@ -14,22 +23,30 @@ async function selectFile(file: File) {
     if (loading) return;
     SelectionManager.selectedSplat = null;
     loading = true;
-    // Check if .splat file
     if (file.name.endsWith(".splat")) {
         await SPLAT.Loader.LoadFromFileAsync(file, engine.scene, (progress: number) => {
-            console.log("Loading SPLAT file: " + progress);
         });
     } else if (file.name.endsWith(".ply")) {
         const format = "";
         // const format = "polycam"; // Uncomment to load a Polycam PLY file
         await SPLAT.PLYLoader.LoadFromFileAsync(
             file,
             engine.scene,
             (progress: number) => {
-                console.log("Loading PLY file: " + progress);
             },
             format
         );
     }
     loading = false;
 }
@@ -64,6 +81,14 @@ async function main() {
         }
     });
     downloadButton.addEventListener("click", () => {
         if (SelectionManager.selectedSplat !== null) {
             SelectionManager.selectedSplat.saveToFile();
@@ -72,6 +97,43 @@ async function main() {
         }
     });
     window.addEventListener("click", () => {
         window.focus();
     });

 const canvas = document.getElementById("canvas") as HTMLCanvasElement;
 const progressDialog = document.getElementById("progress-dialog") as HTMLDialogElement;
 const progressIndicator = document.getElementById("progress-indicator") as HTMLProgressElement;
+const uploadButton = document.getElementById("upload-button") as HTMLButtonElement;
 const downloadButton = document.getElementById("download-button") as HTMLButtonElement;
+const controlsDisplayButton = document.getElementById("controls-display-button") as HTMLButtonElement;
+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 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 engine = new Engine(canvas);
     if (loading) return;
     SelectionManager.selectedSplat = null;
     loading = true;
     if (file.name.endsWith(".splat")) {
+        uploadModal.style.display = "none";
+        progressDialog.showModal();
         await SPLAT.Loader.LoadFromFileAsync(file, engine.scene, (progress: number) => {
+            progressIndicator.value = progress * 100;
         });
+        progressDialog.close();
     } else if (file.name.endsWith(".ply")) {
         const format = "";
         // const format = "polycam"; // Uncomment to load a Polycam PLY file
+        uploadModal.style.display = "none";
+        progressDialog.showModal();
         await SPLAT.PLYLoader.LoadFromFileAsync(
             file,
             engine.scene,
             (progress: number) => {
+                progressIndicator.value = progress * 100;
             },
             format
         );
+        progressDialog.close();
+    } else {
+        uploadError.style.display = "block";
+        uploadError.innerText = `Invalid file type: ${file.name}`;
     }
     loading = false;
 }
         }
     });
+    uploadButton.addEventListener("click", () => {
+        uploadModal.style.display = "block";
+    });
+    uploadModalClose.addEventListener("click", () => {
+        uploadModal.style.display = "none";
+    });
     downloadButton.addEventListener("click", () => {
         if (SelectionManager.selectedSplat !== null) {
             SelectionManager.selectedSplat.saveToFile();
         }
     });
+    controlsDisplayButton.addEventListener("click", () => {
+        controlsDisplayButton.classList.toggle("active");
+        controlsDisplay.classList.toggle("active");
+    });
+    fileInput.addEventListener("change", () => {
+        if (fileInput.files != null) {
+            selectFile(fileInput.files[0]);
+        }
+    });
+    uploadSubmit.addEventListener("click", async () => {
+        let url = urlInput.value;
+        if (url === "") {
+            url = urlInput.placeholder;
+        }
+        if (url.endsWith(".splat")) {
+            uploadModal.style.display = "none";
+            progressDialog.showModal();
+            await SPLAT.Loader.LoadAsync(url, engine.scene, (progress) => (progressIndicator.value = progress * 100));
+            progressDialog.close();
+        } else if (url.endsWith(".ply")) {
+            uploadModal.style.display = "none";
+            progressDialog.showModal();
+            await SPLAT.PLYLoader.LoadAsync(
+                url,
+                engine.scene,
+                (progress) => (progressIndicator.value = progress * 100)
+            );
+            progressDialog.close();
+        } else {
+            uploadError.style.display = "block";
+            uploadError.innerText = `Invalid file type: ${url}`;
+            return;
+        }
+    });
     window.addEventListener("click", () => {
         window.focus();
     });

editor/style.css CHANGED Viewed

@@ -5,6 +5,7 @@ html {
     overflow: hidden;
     background-color: #fff;
     font-family: sans-serif;
 }
 canvas {
@@ -12,23 +13,23 @@ canvas {
     height: 100vh;
 }
 dialog {
     width: 100%;
     text-align: center;
     max-width: 20em;
     color: white;
-    background-color: #000;
-    border: none;
     position: relative;
     transform: translate(-50%, -50%);
 }
-#progress-container {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-}
 progress {
     width: 100%;
     height: 1em;
@@ -49,7 +50,7 @@ progress::-moz-progress-bar {
     background-color: #eee;
 }
-#download-button {
     position: absolute;
     top: 8px;
     right: 8px;
@@ -61,14 +62,167 @@ progress::-moz-progress-bar {
     cursor: pointer;
 }
-#download-button:hover {
-    background-color: #000000ee;
 }
-#download-button:active {
     background-color: #000000cc;
 }
-#download-button:focus {
-    outline: none;
 }

     overflow: hidden;
     background-color: #fff;
     font-family: sans-serif;
+    font-size: 14px;
 }
 canvas {
     height: 100vh;
 }
+#progress-container {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+}
 dialog {
     width: 100%;
     text-align: center;
     max-width: 20em;
     color: white;
+    background-color: #222;
+    border: 1px solid #888;
     position: relative;
     transform: translate(-50%, -50%);
 }
 progress {
     width: 100%;
     height: 1em;
     background-color: #eee;
 }
+.tool-button {
     position: absolute;
     top: 8px;
     right: 8px;
     cursor: pointer;
 }
+.tool-button:hover {
+    background-color: #222222cc;
+}
+.tool-button:active {
+    background-color: #000000cc;
+}
+.tool-button:focus {
+    outline: inherit;
+}
+.tool-button.active {
+    outline: white solid 1px;
 }
+#upload-button {
+    top: 8px;
+}
+#download-button {
+    top: 48px;
+}
+#controls-display-button {
+    top: 88px;
+}
+#controls-display {
+    display: none;
+    position: absolute;
+    top: 96px;
+    right: 44px;
     background-color: #000000cc;
+    margin: 0;
+    padding: 6px;
+    color: #ddd;
+    pointer-events: none;
+}
+#controls-display.active {
+    display: block;
+}
+#controls-display p {
+    margin: 0;
+    padding: 1px;
+}
+.divider {
+    width: 256px;
+    border: 0;
+    border-top: 1px solid #ddd;
+    margin: 6px 0;
+}
+.control-item {
+    display: flex;
+    justify-content: space-between;
+}
+.control-name {
+    text-align: left;
+    color: #aaa;
+}
+.control-value {
+    text-align: right;
+}
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+.modal-content {
+    background-color: #222222;
+    margin: 15% auto;
+    padding: 16px;
+    border: 1px solid #888;
+    width: 80%;
+    color: #ddd;
+}
+.modal-section {
+    padding: 4px 0;
+}
+.modal .divider {
+    width: calc(100% - 32px);
+}
+.close {
+    float: right;
+    font-size: 24px;
+}
+.close:hover,
+.closer:focus {
+    color: #aaa;
+    text-decoration: none;
+    cursor: pointer;
+}
+#url-input {
+    width: calc(100% - 96px);
+    background-color: #000;
+    border: 1px solid #888;
+    color: #ddd;
+    padding: 4px;
+    margin: 0;
+}
+#upload-submit {
+    width: 80px;
+    background-color: #000;
+    border: 1px solid #888;
+    color: #ddd;
+    padding: 4px;
+    margin: 0;
+    cursor: pointer;
+}
+#upload-submit:hover {
+    background-color: #222;
+}
+#upload-submit:focus {
+    outline: inherit;
+}
+input[type="file"] {
+    display: none;
+}
+#file-input-label {
+    width: 80px;
+    background-color: #000;
+    border: 1px solid #888;
+    color: #ddd;
+    padding: 4px;
+    margin: 0;
+    cursor: pointer;
+}
+#file-input-label:hover {
+    background-color: #222;
+}
+#file-input-label:focus {
+    outline: inherit;
 }
+#upload-error {
+    display: none;
+    color: #f00;
 }

style.css CHANGED Viewed

@@ -25,4 +25,4 @@ p {
 .card p:last-child {
 	margin-bottom: 0;
-}

 .card p:last-child {
 	margin-bottom: 0;
+}