jbilcke-hf HF staff commited on
Commit
e6812d5
·
1 Parent(s): d90835a

add 2 types of agents

Browse files
Files changed (1) hide show
  1. src/app/main.tsx +66 -13
src/app/main.tsx CHANGED
@@ -1,16 +1,44 @@
1
  "use client"
2
 
3
- import { useEffect, useState, useTransition } from "react"
4
 
5
  import { VideoPlayer } from "@/components/business/video-player"
 
 
 
 
 
 
 
 
 
6
  import { renderScene } from "./renderScene"
7
  import { Scene } from "./scenes/types"
8
- import { getScene } from "./scenes/ants"
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
 
10
  export default function Main() {
11
  const [url, setUrl] = useState<string>()
12
  const [isPending, startTransition] = useTransition()
13
  const [scene, setScene] = useState<Scene>()
 
14
 
15
  useEffect(() => {
16
 
@@ -20,16 +48,21 @@ export default function Main() {
20
  startTransition(async () => {
21
 
22
  console.log(`generating new scene..`)
23
- const newScene = getScene()
 
24
 
25
  const newUrl = await renderScene(newScene.prompt)
26
- console.log(`newUrl: ${newUrl}`)
 
 
 
 
 
 
 
27
  setUrl(newUrl)
28
  setScene(newScene)
29
-
30
- setTimeout(() => {
31
- updateView()
32
- }, 2000)
33
  })
34
  }
35
 
@@ -38,12 +71,32 @@ export default function Main() {
38
  }, [])
39
 
40
  return (
41
- <div className="flex flex-col w-full">
42
- <VideoPlayer url={url} />
43
- <div>
44
- <p>Action: {scene?.action}</p>
45
- <p>Position: {scene?.position}</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
  </div>
 
47
  </div>
48
  )
49
  }
 
1
  "use client"
2
 
3
+ import { useEffect, useRef, useState, useTransition } from "react"
4
 
5
  import { VideoPlayer } from "@/components/business/video-player"
6
+
7
+ import {
8
+ Select,
9
+ SelectContent,
10
+ SelectItem,
11
+ SelectTrigger,
12
+ SelectValue,
13
+ } from "@/components/ui/select"
14
+
15
  import { renderScene } from "./renderScene"
16
  import { Scene } from "./scenes/types"
17
+
18
+ import { getScene as getSceneAnts } from "./scenes/ants"
19
+ import { getScene as getSceneFishes } from "./scenes/fishTank"
20
+
21
+ type SceneType = 'ant' | 'fish'
22
+
23
+ const types: {
24
+ label: string
25
+ value: SceneType
26
+ }[] = [
27
+ {
28
+ label: "Ant",
29
+ value: "ant"
30
+ },
31
+ {
32
+ label: "Fish",
33
+ value: "fish"
34
+ }
35
+ ]
36
 
37
  export default function Main() {
38
  const [url, setUrl] = useState<string>()
39
  const [isPending, startTransition] = useTransition()
40
  const [scene, setScene] = useState<Scene>()
41
+ const ref = useRef<SceneType>()
42
 
43
  useEffect(() => {
44
 
 
48
  startTransition(async () => {
49
 
50
  console.log(`generating new scene..`)
51
+ const type = ref?.current
52
+ const newScene = type === 'ant' ? getSceneAnts() : getSceneFishes()
53
 
54
  const newUrl = await renderScene(newScene.prompt)
55
+
56
+ if (type !== ref?.current) {
57
+ console.log("scene type changed while we were rendering")
58
+ setTimeout(() => { updateView() }, 0)
59
+ return
60
+ }
61
+
62
+ // console.log(`newUrl: ${newUrl}`)
63
  setUrl(newUrl)
64
  setScene(newScene)
65
+ setTimeout(() => { updateView()}, 2000)
 
 
 
66
  })
67
  }
68
 
 
71
  }, [])
72
 
73
  return (
74
+ <div className="flex flex-col w-full pt-4">
75
+ <div className="flex flex-col space-y-3 px-2">
76
+ <div className="flex flex-row items-center space-x-3">
77
+ <label className="flex">Agent model:</label>
78
+ <Select
79
+ defaultValue={"fish" as SceneType}
80
+ onValueChange={(value) => {
81
+ ref.current = value as SceneType
82
+ setUrl("")
83
+ }}>
84
+ <SelectTrigger className="w-[180px]">
85
+ <SelectValue placeholder="Type" />
86
+ </SelectTrigger>
87
+ <SelectContent>
88
+ {types.map(({ label, value }) =>
89
+ <SelectItem key={value} value={value}>{label}</SelectItem>
90
+ )}
91
+ </SelectContent>
92
+ </Select>
93
+ </div>
94
+ {url ? <div>
95
+ <p>Action: {scene?.action}</p>
96
+ <p>Position: {scene?.position}</p>
97
+ </div> : null}
98
  </div>
99
+ <VideoPlayer url={url} />
100
  </div>
101
  )
102
  }