ok, I think it works now

src/app/engine/render.ts

@@ -2,7 +2,7 @@
 
 
 
-import { RenderedScene } from "@/types"
+import { RenderRequest, RenderedScene } from "@/types"
 import { Engine, EngineType } from "./engines"
 
 // note: there is no / at the end in the variable
@@ -15,10 +15,12 @@ export async function newRender({
   prompt,
   actionnables = [],
   engine,
+  clearCache,
 }: {
   prompt: string
   actionnables: string[]
   engine: Engine
+  clearCache: boolean
 }) {
   if (!prompt) {
     console.error(`cannot call the rendering API without a prompt, aborting..`)
@@ -31,8 +33,6 @@ export async function newRender({
 
   const nbFrames = engine.type.includes("video") ? 8 : 1
 
-  const cacheKey = `render/${JSON.stringify({ prompt, actionnables, nbFrames, type: engine.type })}`
-
   // return await Gorgon.get(cacheKey, async () => {
 
     let defaulResult: RenderedScene = {
@@ -49,18 +49,24 @@ export async function newRender({
 
       const isForVideo = nbFrames > 1
 
-  
-      console.log("REQUEST:", JSON.stringify({
-        prompt,
-        // nbFrames: 8 and nbSteps: 15 --> ~10 sec generation
-        nbFrames, // when nbFrames is 1, we will only generate static images
-        nbSteps: isForVideo ? 25 : 35, // 20 = fast, 30 = better, 50 = best
-        actionnables,
-        segmentation: "firstframe", // one day we will remove this param, to make it automatic
-        width: isForVideo ? 576 : 1024,
-        height: isForVideo ? 320 : 512,
-      }))
-    
+    const request = {
+      prompt,
+      // nbFrames: 8 and nbSteps: 15 --> ~10 sec generation
+      nbFrames, // when nbFrames is 1, we will only generate static images
+      nbSteps: isForVideo ? 30 : 35, // 20 = fast, 30 = better, 50 = best
+      actionnables,
+      segmentation: "firstframe", // one day we will remove this param, to make it automatic
+      width: isForVideo ? 576 : 1024,
+      height: isForVideo ? 320 : 768,
+
+      // note that we never disable the cache completely for VideoQuest
+      // that's because in the feedbacks people prefer speed to avoid frustration
+      cache: clearCache ? "renew" : "use",
+
+    } as Partial<RenderRequest>
+
+    console.table(request)
+
       const res = await fetch(`${apiUrl}/render`, {
         method: "POST",
         headers: {
@@ -68,16 +74,7 @@ export async function newRender({
           "Content-Type": "application/json",
           // Authorization: `Bearer ${process.env.VC_SECRET_ACCESS_TOKEN}`,
         },
-        body: JSON.stringify({
-          prompt,
-          // nbFrames: 8 and nbSteps: 15 --> ~10 sec generation
-          nbFrames, // when nbFrames is 1, we will only generate static images
-          nbSteps: isForVideo ? 30 : 35, // 20 = fast, 30 = better, 50 = best
-          actionnables,
-          segmentation: "firstframe", // one day we will remove this param, to make it automatic
-          width: isForVideo ? 576 : 1024,
-          height: isForVideo ? 320 : 768,
-        }),
+        body: JSON.stringify(request),
         cache: 'no-store',
       // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
       // next: { revalidate: 1 }

src/app/games/vernian.ts

@@ -1,4 +1,4 @@
-import { imfell } from "@/lib/fonts"
+import { moondance } from "@/lib/fonts"
 import { Game } from "./types"
 import { InventoryItem } from "../../types"
 
@@ -79,7 +79,7 @@ export const game: Game = {
     "cartesian_video",
     "spherical_image",
   ],
-  className: imfell.className,
+  className: moondance.className,
   initialSituation,
   initialActionnables,
   inventory,

src/app/interface/top-menu/index.tsx

@@ -19,18 +19,23 @@ export function TopMenu({
   engine,
   defaultGame,
   game,
+  debug,
+  clearCache,
   onChangeEngine,
   onChangeGame,
   onToggleDebug,
-  debug,
+  onToggleClearCache,
 }: {
   engine: Engine,
   defaultGame: string
   game: Game
+  debug: boolean
+  clearCache: boolean
   onChangeEngine: (newEngine: EngineType) => void
   onChangeGame: (newGameType: GameType) => void
   onToggleDebug: (isToggledOn: boolean) => void
-  debug: boolean
+  onToggleClearCache: (shouldClearCache: boolean) => void
+
 }) {
   return (
     <div className={cn(
@@ -65,7 +70,14 @@ export function TopMenu({
         <Label>Debug</Label>
       </div>
       <div className="flex flex-row items-center space-x-3 font-mono">
-        <Label className="flex text-sm">Rendering engine:</Label>
+        <Switch
+          checked={clearCache}
+          onCheckedChange={onToggleClearCache}
+        />
+        <Label>No cache</Label>
+      </div>
+      <div className="flex flex-row items-center space-x-3 font-mono">
+        <Label className="flex text-sm">Engine:</Label>
         <Select
           defaultValue={game.engines.includes(engine.type) ? engine.type : game.engines[0]}
           onValueChange={(value) => { onChangeEngine(value as EngineType) }}>

src/app/main.tsx

@@ -55,6 +55,9 @@ export default function Main() {
   const requestedDebug = (searchParams.get('debug') === "true")
   const [debug, setDebug] = useState<boolean>(requestedDebug)
 
+  const requestedClearCache = (searchParams.get('clearCache') ? (searchParams.get('clearCache') === "true") : false)
+  const [clearCache, setClearCache] = useState<boolean>(requestedClearCache)
+
   const [situation, setSituation] = useState("")
 
   const [dialogue, setDialogue] = useState("")
@@ -91,10 +94,10 @@ export default function Main() {
           Array.isArray(nextActionnables) && nextActionnables.length
           ? nextActionnables
           : game.initialActionnables
-        )
-      })
+        ),
 
-      console.log("got the first version of our scene!", newRendered)
+        clearCache
+      })
 
       // detect if type game type changed while we were busy
       // note that currently we reload the whol page when tha happens,
@@ -102,15 +105,25 @@ export default function Main() {
       if (game?.type !== gameRef?.current) {
         console.log("game type changed! aborting..")
         return
+      }
+
+      console.log("got the first version of our scene!", newRendered)
 
+      // in cache we didn't hit the cache and the request is still pending
+        // we cheat a bit by displaying the previous image as a placeholder
+      if (!newRendered.assetUrl && rendered.assetUrl && rendered.maskUrl) {
+        console.log("image is not in cache, using previous image as a placeholder..")
+        // this is better than displaying a blank image, no?
+        newRendered.assetUrl = rendered.assetUrl
+        newRendered.maskUrl = rendered.maskUrl
       }
-      // we cheat a bit by displaying the previous image as a placeholder
-      // this is better than displaying a blank image!
-      newRendered.assetUrl = rendered.assetUrl
-      newRendered.maskUrl = rendered.maskUrl
 
       historyRef.current.unshift(newRendered)
       setRendered(newRendered)
+
+      if (newRendered.status === "completed") {
+        setBusy(busyRef.current = false)
+      }
     })
   }
 
@@ -121,7 +134,7 @@ export default function Main() {
     if (!historyRef.current[0]?.renderId || historyRef.current[0]?.status !== "pending") {
 
       // console.log("let's try again in a moments")
-      loopRef.current = setTimeout(() => checkRenderedLoop(), 200)
+      loopRef.current = setTimeout(() => checkRenderedLoop(), 1000)
       return
     } 
 
@@ -255,6 +268,23 @@ export default function Main() {
     setDebug(isToggledOn)
   }
 
+  const handleToggleClearCache = (shouldClearCache: boolean) => {
+    const current = new URLSearchParams(Array.from(searchParams.entries()))
+    current.set("clearCache", `${shouldClearCache}`)
+    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)
+
+    setClearCache(shouldClearCache)
+  }
+
+
   const handleSelectGame = (newGameType: GameType) => {
     gameRef.current = newGameType
     setGame(getGame(newGameType))
@@ -412,10 +442,12 @@ export default function Main() {
         engine={engine}
         game={game}
         defaultGame={gameRef.current}
+        debug={debug}
+        clearCache={clearCache}
         onToggleDebug={handleToggleDebug}
         onChangeGame={handleSelectGame}
         onChangeEngine={handleSelectEngine}
-        debug={debug}
+        onToggleClearCache={handleToggleClearCache}
       />
 
       <DndProvider backend={HTML5Backend}>

src/lib/fonts.ts

@@ -1,4 +1,12 @@
-import { Inter, Edu_SA_Beginner, Orbitron, Amatic_SC, Macondo_Swash_Caps, IM_Fell_English_SC } from "next/font/google"
+import {
+  Inter,
+  Edu_SA_Beginner,
+  Orbitron,
+  Amatic_SC,
+  Macondo_Swash_Caps,
+  IM_Fell_English_SC,
+  Moon_Dance
+} from "next/font/google"
 import localFont from "next/font/local"
 
 export const inter = Inter({
@@ -11,6 +19,13 @@ export const edu = Edu_SA_Beginner({
   variable: "--font-edu",
 })
 
+export const moondance = Moon_Dance({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-moondance",
+})
+
+
 export const orbitron = Orbitron({
   subsets: ["latin"],
   variable: "--font-orbitron",

src/types.ts

@@ -1,5 +1,7 @@
 export type ProjectionMode = 'cartesian' | 'spherical'
 
+export type CacheMode = "use" | "renew" | "ignore"
+
 export interface RenderRequest {
   prompt: string
 
@@ -28,6 +30,8 @@ export interface RenderRequest {
   height: number // fixed at 512 for now
 
   projection: ProjectionMode
+
+  cache: CacheMode
 }
 
 export interface ImageSegment {