better arch

src/app/{scenes/ants.ts → agents/ant.ts}

@@ -1,4 +1,5 @@
 import { pick } from "./pick"
+import { Agent } from "./types"
 
 const actions = [
   "working on lavae",
@@ -17,22 +18,25 @@ const positions = [
   "on the ground"
 ]
 
-export const getScene = () => {
-  const action = pick(actions)
-  const position = pick(positions)
+export const agent: Agent = {
+  title: "Ant",
+  type: "ant",
+  simulate: (): Scene => {
+    const action = pick(actions)
+    const position = pick(positions)
 
-  const prompt = [
-    `close-up shot of a couple of ants`,
-    action,
-    position,
-    `high res`,
-    `documentary`,
-  ].join(", ")
+    const prompt = [
+      `close-up shot of a couple of ants`,
+      action,
+      position,
+      `high res`,
+      `documentary`,
+    ].join(", ")
 
-  return {
-    name: "Ants",
-    action,
-    position,
-    prompt
+    return {
+      action,
+      position,
+      prompt
+    }
   }
 }

src/app/{scenes/fishTank.ts → agents/fish.ts}

@@ -1,4 +1,5 @@
 import { pick } from "./pick"
+import { Agent, Scene } from "./types"
 
 const actions = [
   "idling",
@@ -20,22 +21,25 @@ const positions = [
   "hiding in the coral"
 ]
 
-export const getScene = () => {
-  const action = pick(actions)
-  const position = pick(positions)
+export const agent: Agent = {
+  title: "Fish",
+  type: "fish",
+  simulate: (): Scene => {
+    const action = pick(actions)
+    const position = pick(positions)
 
-  const prompt = [
-    `medium shot of a clownfish`,
-    action,
-    position,
-    `in front of yellow coral`,
-    `high res underwater footage`,
-  ].join(", ")
+    const prompt = [
+      `medium shot of a clownfish`,
+      action,
+      position,
+      `in front of yellow coral`,
+      `high res underwater footage`,
+    ].join(", ")
 
-  return {
-    name: "FishTank",
-    action,
-    position,
-    prompt
+    return {
+      action,
+      position,
+      prompt
+    }
   }
-}
+}

src/app/agents/fox.ts

@@ -0,0 +1,43 @@
+import { pick } from "./pick"
+import { Agent, Scene } from "./types"
+
+const actions = [
+  "waiting",
+  "jumping",
+  "eating a mouse",
+  "looking at camera",
+  "touch a rock",
+  "touching grass",
+  "drinking from a water hole"
+]
+
+const positions = [
+  "in the forest",
+  "in a plain",
+  "in front of a fox hole",
+  "in front of a bush"
+]
+
+
+export const agent: Agent = {
+  title: "Fox",
+  type: "fox",
+  simulate: (): Scene => {
+    const action = pick(actions)
+    const position = pick(positions)
+
+    const prompt = [
+      `medium shot of a fox`,
+      action,
+      position,
+      `high res`,
+      `documentary`,
+    ].join(", ")
+
+    return {
+      action,
+      position,
+      prompt
+    }
+  }
+}

src/app/agents/index.ts

@@ -0,0 +1,11 @@
+import { Agent, AgentType } from "./types"
+
+import { agent as ant } from "./ant"
+import { agent as fish } from "./fish"
+import { agent as fox } from "./fox"
+
+export const agents = { ant, fish, fox }
+
+export const defaultAgent: AgentType = "fox"
+
+export const getAgent = (type?: AgentType) => agents[type || defaultAgent] || agents[defaultAgent]

src/app/{scenes → agents}/types.ts

@@ -1,7 +1,13 @@
+export type AgentType = 'ant' | 'fish' | 'fox'
 
 export interface Scene {
-  name: string
   action: string
   position: string
   prompt: string
 }
+
+export interface Agent {
+  title: string
+  type: AgentType
+  simulate: () => Scene
+}

src/app/main.tsx

@@ -12,33 +12,16 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 
-import { renderScene } from "./renderScene"
-import { Scene } from "./scenes/types"
-
-import { getScene as getSceneAnts } from "./scenes/ants"
-import { getScene as getSceneFishes } from "./scenes/fishTank"
-
-type SceneType = 'ant' | 'fish'
-
-const types: {
-  label: string
-  value: SceneType
-}[] = [
-  {
-    label: "Ant",
-    value: "ant"
-  },
-  {
-    label: "Fish",
-    value: "fish"
-  }
-]
+import { render } from "./render"
+import { Agent, AgentType, Scene } from "./agents/types"
+import { agents, defaultAgent, getAgent } from "./agents"
 
 export default function Main() {
   const [url, setUrl] = useState<string>()
   const [isPending, startTransition] = useTransition()
+  const [agent, setAgent] = useState<Agent>()
   const [scene, setScene] = useState<Scene>()
-  const ref = useRef<SceneType>()
+  const ref = useRef<AgentType>(defaultAgent)
    
   useEffect(() => {
     
@@ -47,21 +30,26 @@ export default function Main() {
 
       startTransition(async () => {
 
-        console.log(`generating new scene..`)
+        // console.log(`getting agent..`)
         const type = ref?.current
-        const newScene = type === 'ant' ? getSceneAnts() : getSceneFishes()
+        const agent = getAgent(type)
+
+        // console.log(`asking agent to determine things..`)
+        const scene = agent.simulate()
 
-        const newUrl = await renderScene(newScene.prompt)
+        // console.log(`rendering scene..`)
+        const newUrl = await render(scene.prompt)
 
         if (type !== ref?.current) {
-          console.log("scene type changed while we were rendering")
+          console.log("agent type changed while we were rendering")
           setTimeout(() => { updateView() }, 0)
           return
         } 
 
         // console.log(`newUrl: ${newUrl}`)
         setUrl(newUrl)
-        setScene(newScene)
+        setAgent(agent)
+        setScene(scene)
         setTimeout(() => { updateView()}, 2000)
       })
     }
@@ -76,24 +64,24 @@ export default function Main() {
         <div className="flex flex-row items-center space-x-3">
           <label className="flex">Agent model:</label>
           <Select
-            defaultValue={"fish" as SceneType}
+            defaultValue={defaultAgent}
             onValueChange={(value) => {
-              ref.current = value as SceneType
+              ref.current = value as AgentType
               setUrl("")
             }}>
             <SelectTrigger className="w-[180px]">
               <SelectValue placeholder="Type" />
             </SelectTrigger>
             <SelectContent>
-              {types.map(({ label, value }) =>
-              <SelectItem key={value} value={value}>{label}</SelectItem>
+              {Object.entries(agents).map(([key, agent]) =>
+              <SelectItem key={key} value={key}>{agent.title}</SelectItem>
               )}
             </SelectContent>
           </Select>
         </div>
-        {url ? <div>
-          <p>Action: {scene?.action}</p>
-          <p>Position: {scene?.position}</p>
+        {(url && scene) ? <div>
+          <p>Action: {scene.action}</p>
+          <p>Position: {scene.position}</p>
         </div> : null}
       </div>
       <VideoPlayer url={url} />

src/app/{renderScene.ts → render.ts}

@@ -4,7 +4,7 @@
 // so we have to add it ourselves if needed
 const apiUrl = process.env.RENDERING_ENGINE_API
 
-export async function renderScene(prompt: string) {
+export async function render(prompt: string) {
   try {
     console.log(`calling ${apiUrl}/render with prompt: ${prompt}`)
     const res = await fetch(`${apiUrl}/render`, {