add countdown

TODO.md

@@ -1,4 +1,3 @@
-Find a name (hotshot factory? gipher? gif factory? fun factory?)
 
 Allow browsing some loras
 

src/app/interface/about/index.tsx

@@ -21,15 +21,9 @@ export function About() {
           </DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4 text-stone-800">
-        <p className="">
-           The model used by the AI Clip Factory depends on what I&apos;m experimenting at the current time.
-         </p>
          <p>
-         👉 Right now it uses an API that you can <a className="text-stone-600 underline" href="https://github.com/jbilcke-hf/Hotshot-XL-Gradio-API" target="_blank">fork from here</a>. This API is based on the amazing work made by <a className="text-stone-600 underline" href="https://huggingface.co/fffiloni" target="_blank">@fffiloni</a> for his super cool <a className="text-stone-600 underline" href="https://huggingface.co/spaces/fffiloni/text-to-gif" target="_blank">Hotshot-XL Space</a>.
+         👉 This space generates clips using <a className="text-stone-600 underline" href="https://github.com/jbilcke-hf/Hotshot-XL-Gradio-API" target="_blank">Hotshot-XL-Gradio-API</a>, a fork of <a className="text-stone-600 underline" href="https://huggingface.co/spaces/fffiloni/text-to-gif" target="_blank">fffiloni/text-to-gif</a>.
         </p>
-         <p>
-         👉 The model is <a className="text-stone-600 underline" href="https://huggingface.co/hotshotco/Hotshot-XL" target="_blank">Hotshot-XL</a> made by the awesome <a className="text-stone-600 underline" href="https://hotshot.co" target="_blank">hotshot.co team</a>.
-         </p>
         </div>
         <DialogFooter>
           <Button type="submit" onClick={() => setOpen(false)}>Got it</Button>

src/app/interface/countdown/index.tsx

@@ -0,0 +1,30 @@
+import { cn } from "@/lib/utils"
+
+export function Countdown({
+  remainingTimeInSec,
+  progressPercent
+}: {
+  remainingTimeInSec: number,
+  progressPercent: number
+}) {
+  return (
+    <div
+      className={cn(
+        `z-20`,
+        `fixed top-8 right-8`,
+        `radial-progress text-primary-content border-4`,
+        `transition-all duration-1000`,
+        `bg-sky-600/30`,
+        `border-sky-800/30`,
+          `text-blue-100`
+
+      )}
+      style={{
+        "--value": progressPercent
+      } as any}
+    >{
+      remainingTimeInSec
+    }s
+    </div>
+  )
+}

src/app/interface/generate/index.tsx

@@ -8,6 +8,8 @@ import { headingFont } from "@/app/interface/fonts"
 import { useCharacterLimit } from "@/lib/useCharacterLimit"
 import { generateAnimation } from "@/app/server/actions/animation"
 import { postToCommunity } from "@/app/server/actions/community"
+import { useCountdown } from "@/lib/useCountdown"
+import { Countdown } from "../countdown"
 
 export function Generate() {
   const [_isPending, startTransition] = useTransition()
@@ -17,6 +19,13 @@ export function Generate() {
   const [assetUrl, setAssetUrl] = useState("")
   const [isOverSubmitButton, setOverSubmitButton] = useState(false)
 
+  const [runs, setRuns] = useState(0)
+  const { progressPercent, remainingTimeInSec } = useCountdown({
+    timerId: runs, // everytime we change this, the timer will reset
+    durationInSec: 40,
+    onEnd: () => {}
+  })
+  
   const { shouldWarn, colorClass, nbCharsUsed, nbCharsLimits } = useCharacterLimit({
     value: promptDraft,
     nbCharsLimits: 70,
@@ -41,6 +50,7 @@ export function Generate() {
     console.log("handleSubmit:", { isLocked, promptDraft })
     if (isLocked) { return }
     if (!promptDraft) { return }
+    setRuns(runs + 1)
     setLocked(true)
     startTransition(async () => {
       const huggingFaceLora = "KappaNeuro/studio-ghibli-style"
@@ -73,7 +83,7 @@ export function Generate() {
           // foundation
           // replicateLora: "https://pbxt.replicate.delivery/VHU109Irgh6EPJrZ7aVScvadYDqXhlL3izfEAjfhs8Cvz0hRA/trained_model.tar",
 
-          size: "768x320", // "1024x512", // "512x512" // "320x768"
+          size: "672x384", // "1024x512", // "512x512" // "320x768"
 
           nbFrames: 8, // if duration is 1000ms then it means 8 FPS
           duration: 1000, // in ms
@@ -105,6 +115,10 @@ export function Generate() {
       `transition-all duration-300 ease-in-out`,
       //  panel === "play" ? "opacity-1 translate-x-0" : "opacity-0 translate-x-[-1000px] pointer-events-none"
       )}>
+      {isLocked ? <Countdown
+        progressPercent={progressPercent}
+        remainingTimeInSec={remainingTimeInSec}
+      /> : null}
       <div className={cn(
         `flex flex-col md:flex-row`,
         `w-full md:max-w-4xl lg:max-w-5xl xl:max-w-6xl max-h-[80vh]`,

src/app/layout.tsx

@@ -12,8 +12,8 @@ export const metadata: Metadata = {
   // GIF Factory
   // GIF Magic
   // AI GIF Genie
-  title: 'Hotshot-XL Text-to-GIF 🧞',
-  description: 'Hotshot-XL Text-to-GIF 🧞',
+  title: 'AI Clip Factory 🧞',
+  description: 'AI Clip Factory 🧞',
 }
 
 export default function RootLayout({

src/app/server/actions/generateWithGradioApi.ts

@@ -15,7 +15,7 @@ export async function generateVideoWithGradioAPI({
   steps = 30,
 }: VideoOptions): Promise<string> {
   console.log(`SEND TO ${gradioApi + (gradioApi.endsWith("/") ? "" : "/") + "api/predict"}:`, [
-    accessToken,
+    // accessToken,
     positivePrompt,
     negativePrompt,
     huggingFaceLora,

src/lib/useCountdown.ts

@@ -7,7 +7,7 @@ export function useCountdown({
   durationInSec,
   onEnd = () => {},
 }: {
-  timerId: string
+  timerId: string | number
   durationInSec: number
   onEnd: () => void
 }) {