File size: 1,936 Bytes
949e1b1
 
 
 
 
b9ae471
949e1b1
 
8f24b44
949e1b1
 
 
 
b9ae471
949e1b1
 
 
8f24b44
949e1b1
d9e9849
2f34958
657f4c7
949e1b1
 
 
2f34958
 
d9e9849
657f4c7
db81aaa
 
949e1b1
 
2f34958
949e1b1
2f34958
949e1b1
 
 
 
 
 
 
 
 
 
657f4c7
2f34958
949e1b1
 
 
 
 
 
 
b9ae471
949e1b1
b9ae471
949e1b1
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
"use client"

import { useEffect, useTransition } from "react"
import { usePathname } from "next/navigation"

import { experimental_useFormStatus as useFormStatus } from "react-dom"
import { Textarea } from "@/components/ui/textarea"
import { Button } from "@/components/ui/button"
import { handleFormSubmit } from "@/server/actions"

export const VideoForm = () => {
  const pathname = usePathname()
  const ownerId = pathname.split("/").pop()
  const { pending } = useFormStatus()

  return (
    <form
      action={handleFormSubmit}
    >
      <div className="flex flex-row w-full mb-3">
        <div className="flex flex-col w-1/2 text-center">
          <h2 className="text-4xl font-thin tracking-tight">VideoChain 🎬</h2>
          <p className="text-md font-thin">
            Powered by <span className="font-normal">Hugging Face πŸ€—</span>
          </p>
        </div>
        <div className="flex flex-col w-1/2 text-center">
          <p className="text-sl font-thin">
            For demonstration purposes only. Please use responsibly, and cancel any video you don't need anymore.
            You have been assigned this temporary unique URL ID: <a href={`/studio/${ownerId}`} className="font-normal" target="_blank">{ownerId}</a>

          </p>
        </div>
      </div>

      <div className="flex items-center justify-between md:space-x-3 w-full">
        <input
          type="hidden"
          id="ownerId"
          name="ownerId"
          value={ownerId}
        />

        <Textarea
          id="prompt"
          name="prompt"
          placeholder="a cat playing the piano during 6 seconds"
          className="mr-3 md:mr-0"
        />

        <Button
          variant="secondary"
          size="lg"
          className="text-md md:w-32"
          type="submit"
          disabled={pending}
        >
          {pending ? "Loading.." : "Generate"}
        </Button>
      </div>
    </form>
  )
}