Spaces:
Paused
Paused
Commit
·
e6812d5
1
Parent(s):
d90835a
add 2 types of agents
Browse files- 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 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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
|
|
|
24 |
|
25 |
const newUrl = await renderScene(newScene.prompt)
|
26 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
-
<
|
43 |
-
|
44 |
-
|
45 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
}
|