feat: add web socket to both server and client demo (#5)

* feat: add image websocket + demo

* chore: lint

demo/app/page.tsx

@@ -1,9 +1,11 @@
-export default function Page() {
+import WebSocketExample from "~/components/WebSocketExample";
 
+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">
-        <h1>Homepage</h1>
+        <h1 className="text-center">Curr Image from New Media</h1>
+        <WebSocketExample/>
       </div>
     </div>
   )

demo/components/WebSocketExample.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { useEffect, useState } from 'react';
+import Image from 'next/image'
+
+export default function WebSocketExample({port = 8080}:{port?:number}){
+  const [imgUrl, setImgUrl] = useState<string|null>(null);
+  const [socket, setSocket] = useState<WebSocket|null>(null)
+
+  useEffect(() => {
+    const socket = new WebSocket(`ws://localhost:${port}`)
+
+    setSocket(socket);
+
+    socket.onopen = () => {
+      console.log('WebSocket Open');
+      socket.send("hello");
+    };
+
+    socket.onclose = () => {
+      console.log('WebSocket Close');
+    };
+
+    socket.onerror = (error) => {
+      console.error("WebSocket Error:", error);
+    };
+
+    socket.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        console.log("WebSocket Message:", data);
+        if (data.images && data.images.length > 0) {
+          setImgUrl(data.images[0]);
+        }
+      } catch (e) {
+        console.error("Error parsing the WebSocket response:", e);
+      }
+    };
+
+    return () => {
+      socket.close();
+    };
+  }, []);
+
+  return (
+    <div>
+      {imgUrl ? (
+        <div className="h-[80vh] w-[80vw] relative">
+            <Image
+              className="rounded"
+              src={imgUrl}
+              alt="Streamed image"
+              objectFit="cover"
+              fill
+              />
+          </div>
+      ): (
+        <p>loading ...</p>
+        )}
+    </div>
+  )
+};
+
+// {/* <img style={{border: "1px solid black"}} src={imgUrl} alt="Received from server" /> */}

new_media/Cargo.toml

@@ -6,16 +6,17 @@ rust-version.workspace = true
 default-run = "new_media"
 
 [dependencies]
-actix-web = "4.4.0"
 anyhow = "1.0.75"
-async-openai = "0.18.0"
+async-net = "2.0.0"
 base64 = "0.21.5"
 bevy = { version = "0.12.0", default-features = false, features = [
   "bevy_asset",
   "bevy_core_pipeline",
   "bevy_render",
+  # "multi-threaded"
 ] }
-bevy_gaussian_splatting = { version = "2.0.2", default-features = true }
+bevy_ws_server = { git = "https://github.com/cs50victor/bevy-ws-server.git", branch = "main"}
+bevy_gaussian_splatting = { git = "https://github.com/mosure/bevy_gaussian_splatting.git", branch="main", default-features = true}
 bevy_panorbit_camera = "0.10.0"
 bevy_web_asset = "0.7.0"
 bytes = "1.5.0"
@@ -24,20 +25,19 @@ crossbeam-channel = "0.5.10"
 dotenvy = "0.15.7"
 futures = "0.3.29"
 futures-intrusive = "0.5.0"
-image = { version = "0.24.7", default-features = false, features = ["png"] }
+image = { version = "0.24.7", default-features = false }
 log = "0.4.20"
-parking_lot = "0.12.1"
 pollster = "0.3.0"
 pretty_env_logger = "0.5.0"
 serde = { version = "1.0.192", features = ["derive"] }
 serde_json = "1.0.108"
 tokio = { version = "1.33.0", features = ["full"] }
 url = "2.5.0"
 wgpu = { version = "0.17.1" }
+tungstenite = "0.21.0"
 
 [target.x86_64-unknown-linux-gnu.dependencies]
 winit = { version = "0.29.10", default-features = false, features = ["x11"]}
 
 # [target.i686-unknown-linux-gnu.dependencies]
 # winit = { version = "0.29.10", default-features = false, features = ["x11"]}
-

new_media/src/frame_capture.rs

@@ -187,7 +187,6 @@ pub mod scene {
         render::{camera::RenderTarget, renderer::RenderDevice},
     };
 
-    use pollster::FutureExt;
     use wgpu::{Extent3d, TextureDescriptor, TextureDimension, TextureFormat, TextureUsages};
 
     use super::image_copy::ImageCopier;
@@ -203,9 +202,7 @@ pub mod scene {
         fn build(&self, app: &mut App) {
             app.add_systems(
                 PostUpdate,
-                update
-                    .run_if(resource_exists::<crate::StreamingFrameData>())
-                    .run_if(resource_exists::<crate::AsyncRuntime>()),
+                update.run_if(resource_exists::<crate::StreamingFrameData>()),
             );
         }
     }
@@ -311,14 +308,13 @@ pub mod scene {
     fn update(
         mut images: ResMut<Assets<Image>>,
         images_to_save: Query<&ImageToSave>,
-        async_runtime: Res<crate::AsyncRuntime>,
         single_frame_data: ResMut<crate::StreamingFrameData>,
         mut scene_controller: ResMut<SceneController>,
     ) {
         if let SceneState::Render(n) = scene_controller.state {
             if n < 1 {
                 let single_frame_data = single_frame_data.into_inner();
-                let pixel_size = single_frame_data.pixel_size;
+                let _pixel_size = single_frame_data.pixel_size;
                 for image in images_to_save.iter() {
                     let img_bytes = images.get_mut(image.id()).unwrap();
 
@@ -327,7 +323,7 @@ pub mod scene {
                         Err(e) => panic!("Failed to create image buffer {e:?}"),
                     };
 
-                    let (w, h) = rgba_img.dimensions();
+                    let (_w, _h) = rgba_img.dimensions();
 
                     // send image
                 }