add debug mode

src/app/main.tsx

@@ -29,7 +29,7 @@ const getInitialRenderedScene = (): RenderedScene => ({
   status: "pending",
   assetUrl: "", 
   error: "",
-  maskBase64: "",
+  maskUrl: "",
   segments: []
 })
 export default function Main() {
@@ -47,6 +47,8 @@ export default function Main() {
   const requestedEngine = (searchParams.get('engine') as EngineType) || defaultEngine
   const [engine, setEngine] = useState<Engine>(getEngine(requestedEngine))
 
+  const debug = (searchParams.get('debug') === "true")
+
   const [situation, setSituation] = useState("")
   const [scene, setScene] = useState("")
   const [dialogue, setDialogue] = useState("")
@@ -189,7 +191,7 @@ export default function Main() {
       status: "pending",
       assetUrl: "", 
       error: "",
-      maskBase64: "",
+      maskUrl: "",
       segments:[]
     })
     */
@@ -296,6 +298,7 @@ export default function Main() {
           isLoading={rendered.status === "pending"}
           game={game}
           engine={engine}
+          debug={debug}
         />
         <div className="text-xl rounded-xl backdrop-blur-sm bg-white/30">{dialogue}</div>
       </div>

src/app/render.ts

@@ -39,7 +39,7 @@ export async function newRender({
       renderId: "",
       status: "error",
       assetUrl: "",
-      maskBase64: "",
+      maskUrl: "",
       error: "failed to fetch the data",
       segments: []
     }
@@ -61,7 +61,6 @@ export async function newRender({
         height: isForVideo ? 320 : 512,
       }))
     
-
       const res = await fetch(`${apiUrl}/render`, {
         method: "POST",
         headers: {
@@ -116,7 +115,7 @@ export async function getRender(renderId: string) {
     renderId: "",
     status: "error",
     assetUrl: "",
-    maskBase64: "",
+    maskUrl: "",
     error: "failed to fetch the data",
     segments: []
   }

src/components/business/cartesian-image.tsx

@@ -7,10 +7,12 @@ export const CartesianImage = forwardRef(({
   rendered,
   onEvent,
   className,
+  debug
 }: {
   rendered: RenderedScene
   onEvent: SceneEventHandler
   className?: string
+  debug?: boolean
 }, ref: ForwardedRef<HTMLDivElement>) => {
 
   const handleEvent = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, isClick: boolean) => {
@@ -44,10 +46,10 @@ export const CartesianImage = forwardRef(({
         ref={ref as any}
         className="absolute"
       />
-      <img
+      {debug && <img
         src={rendered.maskUrl || undefined}
         className="absolute opacity-50"
-      />
+      />}
     </div>
   )
 })

src/components/business/cartesian-video.tsx

@@ -7,10 +7,12 @@ export const CartesianVideo = forwardRef(({
   rendered,
   onEvent,
   className,
+  debug,
 }: {
   rendered: RenderedScene
   onEvent: SceneEventHandler
   className?: string
+  debug?: boolean
 }, ref: ForwardedRef<HTMLDivElement>) => {
 
   const handleEvent = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, isClick: boolean) => {
@@ -44,10 +46,10 @@ export const CartesianVideo = forwardRef(({
       loop
       className="absolute"
     />
-    <img
+    {debug && <img
       src={rendered.maskUrl || undefined}
       className="absolute opacity-50"
-    />
+    />}
   </div>
   )
 })

src/components/business/renderer.tsx

@@ -16,6 +16,7 @@ export const Renderer = ({
   isLoading,
   game,
   engine,
+  debug
 }: {
   rendered: RenderedScene
   onUserAction: (actionnable: string) => void
@@ -23,6 +24,7 @@ export const Renderer = ({
   isLoading: boolean
   game: Game
   engine: Engine
+  debug: boolean
 }) => {
   const timeoutRef = useRef<any>()
   const viewRef = useRef<HTMLDivElement>()
@@ -192,17 +194,20 @@ export const Renderer = ({
               rendered={rendered}
               ref={viewRef as any}
               onEvent={handleMouseEvent}
+              debug={debug}
             />
           : engine.type === "spherical_image"
           ? <SphericalImage
               rendered={rendered}
               ref={viewRef as any}
               onEvent={handleMouseEvent}
+              debug={debug}
             />
           : <CartesianImage
               rendered={rendered}
               ref={viewRef as any}
               onEvent={handleMouseEvent}
+              debug={debug}
             />
         }
 

src/components/business/spherical-image.tsx

@@ -8,10 +8,12 @@ export const SphericalImage = forwardRef(({
   rendered,
   onEvent,
   className,
+  debug,
 }: {
   rendered: RenderedScene
   onEvent: SceneEventHandler
   className?: string
+  debug?: boolean
 }, ref: ForwardedRef<HTMLImageElement>) => {