refactor: move examples to crates (#13)

.dockerignore

@@ -0,0 +1,15 @@
+# Ignore everything
+*
+
+# Allow files and directories
+!/.cargo/
+!/Cargo.toml
+!/Cargo.lock
+!/crates/new_media
+!/recipie.json
+# Ignore unnecessary files inside allowed directories
+# This should go after the allowed directories
+# **/*~
+# **/*.log
+# **/.DS_Store
+# **/Thumbs.db

Cargo.toml

@@ -1,6 +1,6 @@
 [workspace]
 resolver = "2"
-members = ["crates/*", "examples/*"]
+members = ["crates/*"]
 
 package.rust-version = "1.75.0"
 

Dockerfile

@@ -0,0 +1,25 @@
+FROM rust as planner
+WORKDIR /app
+RUN cargo install cargo-chef
+COPY . .
+RUN cargo chef prepare --recipe-path recipe.json
+
+FROM rust as cacher
+WORKDIR /app
+RUN cargo install cargo-chef
+COPY --from=planner /app/recipe.json recipe.json
+RUN cargo chef cook --release --recipe-path=recipe.json
+
+FROM rust as builder
+COPY . /app
+WORKDIR /app
+COPY --from=cacher /app/target target
+COPY --from=cacher /usr/local/cargo /usr/local/cargo
+RUN cargo build --release
+
+FROM bitnami/minideb:bookworm
+COPY --from=builder /app/target/release/new_media /app/new_media
+WORKDIR /app
+
+EXPOSE 8080
+CMD ["./new_media"]

examples/new_media/src/main.rs → crates/new_media/src/main.rs

@@ -30,7 +30,7 @@ fn setup_gaussian_cloud(
 ) {
     // let remote_file = Some("https://huggingface.co/datasets/cs50victor/splats/resolve/main/train/point_cloud/iteration_7000/point_cloud.gcloud");
     // TODO: figure out how to load remote files later
-    let splat_file = "splats/counter/point_cloud/iteration_7000/point_cloud.gcloud";
+    let splat_file = "splats/playroom/point_cloud/iteration_7000/point_cloud.gcloud";
     log::info!("loading {}", splat_file);
     let cloud = asset_server.load(splat_file.to_string());
 

demo/app/page.tsx

@@ -4,7 +4,7 @@ export default function Page() {
   return (
     <div className="min-h-dvh prose w-full mx-auto">
       <div className="prose flex flex-col items-center justify-center">
-        <WebSocketExample display="canvas"/>
+        <WebSocketExample/>
       </div>
     </div>
   )

demo/components/Canvas.tsx

@@ -3,16 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import { ServerWSResponse } from "./WebSocketExample";
 
-const validCommands : Record<string, string> = {
-  "W": "UP",
-  "A": "LEFT",
-  "S": "DOWN",
-  "D": "RIGHT",
-  "ARROWUP": "ZOOM-IN",
-  "ARROWDOWN": "ZOOM-OUT"
-}
-
-export const Canvas=({img_metadata, socket}:{img_metadata: ServerWSResponse, socket: WebSocket })=>{
+export const Canvas=({img_metadata}:{img_metadata: ServerWSResponse })=>{
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [cursorPosition, setCursorPosition] = useState<[number, number]>()
   const aspectRatio = 16/9;
@@ -29,20 +20,6 @@ export const Canvas=({img_metadata, socket}:{img_metadata: ServerWSResponse, soc
     }
   }, [img_metadata]);
 
-  const handle_keyboard_input = (e: KeyboardEvent) =>{
-    const key = e.key.toUpperCase()
-    if(key in validCommands){
-      e.preventDefault();
-      socket.send(validCommands[key])
-      console.log("key down -> ", key)
-    }
-  }
-
-  useEffect(() => {
-    document.addEventListener("keydown", handle_keyboard_input)
-    return () => document.removeEventListener("keydown", handle_keyboard_input)
-  }, []);
-
   return (
     <>
       <canvas

demo/components/Controller.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useEffect } from "react"
+
+const validCommands : Record<string, string> = {
+  "W": "UP",
+  "A": "LEFT",
+  "S": "DOWN",
+  "D": "RIGHT",
+  "ARROWUP": "ZOOM-IN",
+  "ARROWDOWN": "ZOOM-OUT"
+}
+
+export const Controller=({socket}: {socket: WebSocket})=>{
+
+  const handle_keyboard_input = (e: KeyboardEvent) =>{
+    const key = e.key.toUpperCase()
+    if(key in validCommands){
+      e.preventDefault();
+      socket.send(validCommands[key])
+      console.log("key down -> ", key)
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener("keydown", handle_keyboard_input)
+    return () => document.removeEventListener("keydown", handle_keyboard_input)
+  }, []);
+
+  return null
+}

demo/components/WebSocketExample.tsx

@@ -1,17 +1,15 @@
 "use client"
 
 import { useEffect, useState } from 'react';
-import Image from 'next/image'
 import { Canvas } from './Canvas';
-
-type DisplayType = "image" | "canvas"
+import { Controller } from './Controller';
 
 export interface ServerWSResponse {
   image: string
   dimension: [number, number]
 }
 
-export default function WebSocketExample({port = 8080, display="canvas"}:{port?:number, display:DisplayType}){
+export default function WebSocketExample({port = 8080}:{port?:number}){
   const [imgMetadata, setImageMetadata] = useState<ServerWSResponse>();
   const [socket, setSocket] = useState<WebSocket>()
 
@@ -51,10 +49,11 @@ export default function WebSocketExample({port = 8080, display="canvas"}:{port?:
 
   return (
     <div>
-      { (imgMetadata && socket) ? (
-        display === "canvas" ? <Canvas img_metadata={imgMetadata} socket={socket}/> : <Image src={imgMetadata.image} alt="Streamed image" objectFit="cover" fill/>
+      { imgMetadata ? (
+        <Canvas img_metadata={imgMetadata} />
       ) : <p className='text-xl font-semibold'>NEW MEDIA | trying to connect to server...</p>
       }
+      {socket ? <Controller socket={socket}/> : null}
     </div>
   )
 };