Spaces:
Paused
Paused
Commit
β’
949e1b1
1
Parent(s):
96f4faa
UP improvement
Browse files
src/app/studio/[ownerId]/main.tsx
CHANGED
@@ -1,70 +1,18 @@
|
|
1 |
"use server"
|
2 |
|
3 |
-
// import { experimental_useFormStatus as useFormStatus } from "react-dom"
|
4 |
-
|
5 |
-
import { Textarea } from "@/components/ui/textarea"
|
6 |
-
import { Button } from "@/components/ui/button"
|
7 |
-
import { formSubmit } from "@/server/actions"
|
8 |
-
|
9 |
import { getTasks } from "@/server"
|
10 |
import { VideoTasksQueue } from "@/components/business/tasks/video-tasks-queue"
|
11 |
import { RefreshStudio } from "@/components/business/refresh"
|
|
|
12 |
|
13 |
export default async function Main({ ownerId }: { ownerId: string }) {
|
14 |
const tasks = await getTasks(ownerId)
|
15 |
|
16 |
return (
|
17 |
-
<
|
18 |
-
|
19 |
-
action={formSubmit}
|
20 |
-
>
|
21 |
-
|
22 |
-
<div className="flex flex-col md:hidden w-full text-center">
|
23 |
-
<h2 className="text-4xl font-thin tracking-tight">VideoChain UI</h2>
|
24 |
-
<p className="text-md font-thin">
|
25 |
-
Powered by <span className="font-normal">Hugging Face π€</span>
|
26 |
-
</p>
|
27 |
-
<p className="text-md font-thin">
|
28 |
-
Keep the <a href={`/studio/${ownerId}`} className="font-normal" target="_blank">the link</a> to this page!
|
29 |
-
</p>
|
30 |
-
</div>
|
31 |
-
|
32 |
-
<div className="flex items-center justify-between md:space-x-3 w-full">
|
33 |
-
<div className="hidden md:flex flex-col w-54">
|
34 |
-
<h2 className="text-4xl font-thin tracking-tight">VideoChain UI</h2>
|
35 |
-
<p className="text-md font-thin">
|
36 |
-
Powered by <span className="font-normal">Hugging Face π€</span>
|
37 |
-
</p>
|
38 |
-
<p className="text-md font-thin">
|
39 |
-
Keep the <a href={`/studio/${ownerId}`} className="font-normal" target="_blank">the link</a> to this page!
|
40 |
-
</p>
|
41 |
-
</div>
|
42 |
-
|
43 |
-
<input
|
44 |
-
type="hidden"
|
45 |
-
id="ownerId"
|
46 |
-
name="ownerId"
|
47 |
-
value={ownerId}
|
48 |
-
/>
|
49 |
-
|
50 |
-
<Textarea
|
51 |
-
id="prompt"
|
52 |
-
name="prompt"
|
53 |
-
placeholder="Video of llamas playing baseball.."
|
54 |
-
className="md:w-3/6 mr-3 md:mr-0"
|
55 |
-
/>
|
56 |
-
|
57 |
-
<Button
|
58 |
-
variant="secondary"
|
59 |
-
size="lg"
|
60 |
-
className="text-md md:w-32"
|
61 |
-
type="submit"
|
62 |
-
>
|
63 |
-
Generate
|
64 |
-
</Button>
|
65 |
-
</div>
|
66 |
<VideoTasksQueue tasks={tasks} />
|
67 |
<RefreshStudio />
|
68 |
-
</
|
69 |
)
|
70 |
}
|
|
|
1 |
"use server"
|
2 |
|
|
|
|
|
|
|
|
|
|
|
|
|
3 |
import { getTasks } from "@/server"
|
4 |
import { VideoTasksQueue } from "@/components/business/tasks/video-tasks-queue"
|
5 |
import { RefreshStudio } from "@/components/business/refresh"
|
6 |
+
import { VideoForm } from "@/components/business/videoForm"
|
7 |
|
8 |
export default async function Main({ ownerId }: { ownerId: string }) {
|
9 |
const tasks = await getTasks(ownerId)
|
10 |
|
11 |
return (
|
12 |
+
<div className="h-full flex flex-col space-y-4 max-w-4xl w-full px-4 py-8">
|
13 |
+
<VideoForm />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
14 |
<VideoTasksQueue tasks={tasks} />
|
15 |
<RefreshStudio />
|
16 |
+
</div>
|
17 |
)
|
18 |
}
|
src/components/business/tasks/columns.tsx
CHANGED
@@ -3,8 +3,6 @@
|
|
3 |
import { ColumnDef } from "@tanstack/react-table"
|
4 |
import { Checkbox } from "@/components/ui/checkbox"
|
5 |
|
6 |
-
import { statuses } from "@/app/data/data"
|
7 |
-
|
8 |
import { DataTableColumnHeader } from "./data-table-column-header"
|
9 |
import { DataTableRowActions } from "./data-table-row-actions"
|
10 |
|
@@ -49,7 +47,7 @@ export const columns: ColumnDef<VideoTask>[] = [
|
|
49 |
cell: ({ row }) => {
|
50 |
return (
|
51 |
<div className="flex space-x-2">
|
52 |
-
<span className="max-w-[500px]
|
53 |
{row.getValue("videoPrompt")}
|
54 |
</span>
|
55 |
</div>
|
|
|
3 |
import { ColumnDef } from "@tanstack/react-table"
|
4 |
import { Checkbox } from "@/components/ui/checkbox"
|
5 |
|
|
|
|
|
6 |
import { DataTableColumnHeader } from "./data-table-column-header"
|
7 |
import { DataTableRowActions } from "./data-table-row-actions"
|
8 |
|
|
|
47 |
cell: ({ row }) => {
|
48 |
return (
|
49 |
<div className="flex space-x-2">
|
50 |
+
<span className="max-w-[500px] font-medium">
|
51 |
{row.getValue("videoPrompt")}
|
52 |
</span>
|
53 |
</div>
|
src/components/business/videoForm.tsx
ADDED
@@ -0,0 +1,66 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
"use client"
|
2 |
+
|
3 |
+
import { useEffect, useTransition } from "react"
|
4 |
+
import { usePathname } from "next/navigation"
|
5 |
+
|
6 |
+
// import { experimental_useFormStatus as useFormStatus } from "react-dom"
|
7 |
+
import { Textarea } from "@/components/ui/textarea"
|
8 |
+
import { Button } from "@/components/ui/button"
|
9 |
+
import { formSubmit } from "@/server/actions"
|
10 |
+
|
11 |
+
export const VideoForm = () => {
|
12 |
+
const pathname = usePathname()
|
13 |
+
const ownerId = pathname.split("/").pop()
|
14 |
+
const [isPending, startTransition] = useTransition()
|
15 |
+
|
16 |
+
return (
|
17 |
+
<form
|
18 |
+
action={formSubmit}
|
19 |
+
>
|
20 |
+
<div className="flex flex-col md:hidden w-full text-center">
|
21 |
+
<h2 className="text-4xl font-thin tracking-tight">VideoChain UI</h2>
|
22 |
+
<p className="text-md font-thin">
|
23 |
+
Powered by <span className="font-normal">Hugging Face π€</span>
|
24 |
+
</p>
|
25 |
+
<p className="text-md font-thin">
|
26 |
+
Keep the <a href={`/studio/${ownerId}`} className="font-normal" target="_blank">the link</a> to this page!
|
27 |
+
</p>
|
28 |
+
</div>
|
29 |
+
|
30 |
+
<div className="flex items-center justify-between md:space-x-3 w-full">
|
31 |
+
<div className="hidden md:flex flex-col w-54">
|
32 |
+
<h2 className="text-4xl font-thin tracking-tight">VideoChain UI</h2>
|
33 |
+
<p className="text-md font-thin">
|
34 |
+
Powered by <span className="font-normal">Hugging Face π€</span>
|
35 |
+
</p>
|
36 |
+
<p className="text-md font-thin">
|
37 |
+
Save <a href={`/studio/${ownerId}`} className="font-normal" target="_blank">the link</a> to your favorites!
|
38 |
+
</p>
|
39 |
+
</div>
|
40 |
+
|
41 |
+
<input
|
42 |
+
type="hidden"
|
43 |
+
id="ownerId"
|
44 |
+
name="ownerId"
|
45 |
+
value={ownerId}
|
46 |
+
/>
|
47 |
+
|
48 |
+
<Textarea
|
49 |
+
id="prompt"
|
50 |
+
name="prompt"
|
51 |
+
placeholder="Video of llamas playing baseball.."
|
52 |
+
className="md:w-3/6 mr-3 md:mr-0"
|
53 |
+
/>
|
54 |
+
|
55 |
+
<Button
|
56 |
+
variant="secondary"
|
57 |
+
size="lg"
|
58 |
+
className="text-md md:w-32"
|
59 |
+
type="submit"
|
60 |
+
>
|
61 |
+
Generate
|
62 |
+
</Button>
|
63 |
+
</div>
|
64 |
+
</form>
|
65 |
+
)
|
66 |
+
}
|
src/server/base.ts
CHANGED
@@ -11,9 +11,9 @@ export const get = async <T>(path: string = '', defaultValue: T): Promise<T> =>
|
|
11 |
Accept: "application/json",
|
12 |
Authorization: `Bearer ${process.env.VC_SECRET_ACCESS_TOKEN}`,
|
13 |
},
|
14 |
-
|
15 |
// we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
|
16 |
-
next: { revalidate:
|
17 |
})
|
18 |
|
19 |
// The return value is *not* serialized
|
|
|
11 |
Accept: "application/json",
|
12 |
Authorization: `Bearer ${process.env.VC_SECRET_ACCESS_TOKEN}`,
|
13 |
},
|
14 |
+
cache: 'no-store',
|
15 |
// we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
|
16 |
+
// next: { revalidate: 1 }
|
17 |
})
|
18 |
|
19 |
// The return value is *not* serialized
|