working on the menu

src/app/engines.ts

@@ -0,0 +1,28 @@
+
+export type EngineType = "image" | "video"
+
+export interface Engine {
+  type: EngineType
+  label: string
+  modelName: string
+  modelUrl: string
+}
+
+export const engines: Record<string, Engine> = {
+  image: {
+    type: "image",
+    label: "Image",
+    modelName: "SDXL 1.0",
+    modelUrl: "https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0",
+  },
+  video: {
+    type: "video",
+    label: "Video",
+    modelName: "Zeroscope V2 576w",
+    modelUrl: "https://huggingface.co/cerspense/zeroscope_v2_576w",
+  }
+}
+
+export const defaultEngine: EngineType = "image"
+
+export const getEngine = (type?: EngineType): Engine => engines[type || defaultEngine] || engines[defaultEngine]

src/app/main.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState, useTransition } from "react"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
 
 
-import { ImageRenderer } from "@/components/business/image-renderer"
+import { Renderer } from "@/components/business/renderer"
 
 import {
   Select,
@@ -22,6 +22,7 @@ import { defaultGame, games, getGame } from "./games"
 import { getBackground } from "@/app/queries/getBackground"
 import { getDialogue } from "@/app/queries/getDialogue"
 import { getActionnables } from "@/app/queries/getActionnables"
+import { Engine, EngineType, defaultEngine, engines, getEngine } from "./engines"
 
 export default function Main() {
   const [isPending, startTransition] = useTransition()
@@ -36,10 +37,13 @@ export default function Main() {
   const searchParams = useSearchParams()
  
   const requestedGame = (searchParams.get('game') as GameType) || defaultGame
-  console.log("requestedGame: " + requestedGame)
   const gameRef = useRef<GameType>(requestedGame)
-  console.log("gameRef.current: " + gameRef.current)
   const [game, setGame] = useState<Game>(getGame(gameRef.current))
+
+  const requestedEngine = (searchParams.get('engine') as EngineType) || defaultEngine
+  // const engineRef = useRef<EngineType>(requestedEngine)
+  const [engine, setEngine] = useState<Engine>(getEngine(requestedEngine))
+
   const [situation, setSituation] = useState("")
   const [scene, setScene] = useState("")
   const [dialogue, setDialogue] = useState("")
@@ -66,7 +70,7 @@ export default function Main() {
       )
 
       // detect if type game type changed while we were busy
-      if (game.type !== gameRef?.current) {
+      if (game?.type !== gameRef?.current) {
         console.log("game type changed! aborting..")
         return
       } 
@@ -153,21 +157,35 @@ export default function Main() {
     window.history.pushState({path: newurl}, '', newurl)
   }
 
+
+  const handleSelectEngine = (newEngine: EngineType) => {
+    setEngine(getEngine(newEngine))
+
+    const current = new URLSearchParams(Array.from(searchParams.entries()))
+    current.set("engine", newEngine)
+    const search = current.toString()
+    const query = search ? `?${search}` : ""
+
+    // for some reason, this doesn't work?!
+    router.replace(`${pathname}${query}`, { })
+    
+    // workaround.. but it is strange that router.replace doesn't work..
+    let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + search.toString()
+    window.history.pushState({path: newurl}, '', newurl)
+  }
+
   return (
     <div
-      className={[
-        "flex flex-col w-full pt-4",
-        getGame(gameRef.current).className // apply the game theme
-      ].join(" ")}
+      className="flex flex-col w-full"
     >
-      <div className="flex flex-col space-y-3 px-2">
-        <div className="flex flex-row items-center space-x-3">
-          <label className="flex">Select a story:</label>
+      <div className="flex flex-row w-full justify-between items-center px-2 py-2 border-b-1 border-gray-50 bg-gray-800">
+      <div className="flex flex-row items-center space-x-3 font-mono">
+          <label className="flex text-sm">Select a story:</label>
           <Select
             defaultValue={gameRef.current}
             onValueChange={(value) => { handleSelectGame(value as GameType) }}>
-            <SelectTrigger className="text-xl w-[180px]">
-              <SelectValue placeholder="Type" />
+            <SelectTrigger className="w-[180px]">
+              <SelectValue className="text-sm" placeholder="Type" />
             </SelectTrigger>
             <SelectContent>
               {Object.entries(games).map(([key, game]) =>
@@ -176,23 +194,44 @@ export default function Main() {
             </SelectContent>
           </Select>
         </div>
+        <div className="flex flex-row items-center space-x-3 font-mono">
+          <label className="flex text-sm">Rendering engine:</label>
+          <Select
+            defaultValue={engine.type}
+            onValueChange={(value) => { handleSelectEngine(value as EngineType) }}>
+            <SelectTrigger className="w-[300px]">
+              <SelectValue className="text-sm" placeholder="Type" />
+            </SelectTrigger>
+            <SelectContent>
+              {Object.entries(engines).map(([key, engine]) =>
+              <SelectItem key={key} value={key}>{engine.label} ({engine.modelName})</SelectItem>
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+      <div className={[
+        "flex flex-col w-full pt-4 space-y-3 px-2",
+        getGame(gameRef.current).className // apply the game theme
+      ].join(" ")}>
         <p className="text-xl">A stable diffusion exploration game. Click on an item to explore a new scene!</p>
         <div className="flex flex-row">
           <div className="text-xl mr-2">🔎 Clickable items:</div>
           {clickables.map((clickable, i) => 
           <div key={i} className="flex flex-row text-xl mr-2">
             <div className="">{clickable}</div>
-            {i < (rendered.segments.length - 1) ? <div>,</div> : null}
+            {i < (clickables.length - 1) ? <div>,</div> : null}
           </div>)}
         </div>
         <p className="text-xl font-normal">You are looking at: <span className="font-bold">{hoveredActionnable || "nothing"}</span></p>
       </div>
-      <ImageRenderer
+      <Renderer
         rendered={rendered}
         onUserAction={handleUserAction}
         onUserHover={setHoveredActionnable}
         isLoading={isLoading}
-        type={game.type}
+        game={game}
+        engine={engine}
       />
       <p className="text-xl">{dialogue}</p>
     </div>

src/app/types.ts

@@ -1,4 +1,3 @@
-
 export interface RenderRequest {
   prompt: string
 

src/components/business/{image-renderer.tsx → renderer.tsx}

@@ -2,9 +2,10 @@ import { useEffect, useRef, useState } from "react"
 
 import { ImageSegment, RenderedScene } from "@/app/types"
 import { ProgressBar } from "../misc/progress"
-import { GameType } from "@/app/games/types"
+import { Game } from "@/app/games/types"
+import { Engine, EngineType } from "@/app/engines"
 
-export const ImageRenderer = ({
+export const Renderer = ({
   rendered: {
     assetUrl = "",
     maskBase64 = "",
@@ -13,16 +14,18 @@ export const ImageRenderer = ({
   onUserAction,
   onUserHover,
   isLoading,
-  type,
+  game,
+  engine,
 }: {
   rendered: RenderedScene
   onUserAction: (actionnable: string) => void
   onUserHover: (actionnable: string) => void
   isLoading: boolean
-  type: GameType
+  game: Game
+  engine: Engine
 }) => {
   const timeoutRef = useRef<any>()
-  const imgRef = useRef<HTMLImageElement | null>(null)
+  const imgRef = useRef<HTMLImageElement | HTMLVideoElement | null>(null)
   const canvasRef = useRef<HTMLCanvasElement | null>(null)
   const contextRef = useRef<CanvasRenderingContext2D | null>(null)
   const [actionnable, setActionnable] = useState<string>("")
@@ -158,7 +161,7 @@ export const ImageRenderer = ({
 
     // normally it takes 45, and we will try to go below,
     // but to be safe let's set the counter a 1 min
-    const nbSeconds = 45 // 1 min
+    const nbSeconds = 32 // 1 min
     const amountInPercent =  100 / (nbUpdatesPerSec * nbSeconds) // 0.333
 
     progressRef.current = Math.min(100, progressRef.current + amountInPercent)
@@ -173,7 +176,7 @@ export const ImageRenderer = ({
     if (isLoading) {
       timeoutRef.current = setInterval(updateProgressBar, 200)
     }
-  }, [isLoading, assetUrl, type])
+  }, [isLoading, assetUrl, engine?.type])
 
 
   /*
@@ -214,16 +217,22 @@ export const ImageRenderer = ({
       // isLoading ? "animate-pulse" : ""
     ].join(" ")
     }>
-      <div className="relative w-full">
-        {assetUrl
-          ? <img
+      <div className="relative w-[1024px] h-[512px] border-2 border-gray-50 rounded-xl overflow-hidden">
+        {assetUrl === null ?
+          null
+        : engine.type === "video"
+          ? <video
             src={assetUrl}
-            // src={"data:image/png;base64," + maskBase64}
-            ref={imgRef}
+            ref={imgRef as any}
+            muted
+            autoPlay
+            loop
             width="1024px"
             height="512px"
+
             className={
               [
+               //  "border-1 border-gray-50",
               //  "absolute top-0 left-0",
                 actionnable && !isLoading ? "cursor-pointer" : ""
               ].join(" ")
@@ -231,16 +240,30 @@ export const ImageRenderer = ({
             onMouseDown={(event) => handleMouseEvent(event, true)}
             onMouseMove={handleMouseEvent}
           />
-          : null}
+          : <img
+          src={assetUrl}
+          // src={"data:image/png;base64," + maskBase64}
+          ref={imgRef as any}
+          width="1024px"
+          height="512px"
+          className={
+            [
+            //  "absolute top-0 left-0",
+              actionnable && !isLoading ? "cursor-pointer" : ""
+            ].join(" ")
+          }
+          onMouseDown={(event) => handleMouseEvent(event, true)}
+          onMouseMove={handleMouseEvent}
+        />}
       </div>
 
-    {isLoading
+      {isLoading
       ? <div className="fixed flex w-20 h-20 bottom-8 right-0 mr-8">
-        <ProgressBar
-          text="⌛"
-          progressPercentage={progressPercent}
-        />
-      </div>
+          <ProgressBar
+            text="⌛"
+            progressPercentage={progressPercent}
+          />
+        </div>
       : null}
     </div>
   )

src/components/business/video-renderer.tsx

@@ -1,22 +0,0 @@
-"use client"
-
-export const VideoRenderer = ({ url }: { url?: string }) => {
-
-  if (!url) {
-    return <div className="flex w-full pt-8 items-center justify-center text-center">
-      <div>Rendering first frames.. (might take around 30s)</div>
-    </div>
-  }
-
-  return (
-    <div className="w-full py-8 px-2">
-       <video
-          src={url}
-          muted
-          autoPlay
-          loop
-          className="w-full rounded-md overflow-hidden"
-        />
-    </div>
-  )
-}