Spaces:

jbilcke-hf
/

ai-stories-factory

Paused

App Files Files Community

jbilcke-hf HF staff commited on May 18

Commit

48c7837

•

1 Parent(s): 3420ebd

working on the portal

Browse files

Files changed (9) hide show

src/app/main.tsx +5 -4
src/app/portal/page.tsx +37 -0
src/app/portal/portal.tsx +24 -0
src/app/store.ts +23 -3
src/components/interface/device-frame.tsx +82 -0
src/components/interface/download-video.tsx +46 -0
src/components/interface/video-preview.tsx +38 -172
src/components/interface/video.tsx +68 -0
src/types.ts +1 -0

src/app/main.tsx CHANGED Viewed

@@ -11,9 +11,8 @@ import { Toaster } from "@/components/ui/sonner"
 import { TextareaField } from "@/components/form/textarea-field"
 import { cn, generateRandomStory } from "@/lib/utils"
-import { defaultPrompt } from "./config"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
-import { useIsBusy, useOrientation, useProgressTimer, useQueryStringParams, useStoryPromptDraft } from "@/lib/hooks"
 import { BottomBar, VideoPreview } from "@/components/interface"
 import { MainTitle } from "@/components/interface/main-title"
 import { LoadClapButton } from "@/components/interface/load-clap-button"
@@ -21,9 +20,11 @@ import { SaveClapButton } from "@/components/interface/save-clap-button"
 import { useProcessors } from "@/lib/hooks/useProcessors"
 import { Characters } from "@/components/interface/characters"
 import { useOAuth } from "@/lib/oauth/useOAuth"
-import { useStore } from "./store"
 import { AuthWall } from "@/components/interface/auth-wall"
 export function Main() {
   const { storyPromptDraft, setStoryPromptDraft, promptDraftRef } = useStoryPromptDraft()
   const  { isBusy } = useIsBusy()
@@ -32,7 +33,7 @@ export function Main() {
   useQueryStringParams()
   const showAuthWall = useStore(s => s.showAuthWall)
-  const { isLoggedIn, enableOAuthWall } = useOAuth({ debug: true })
   return (
     <TooltipProvider>

 import { TextareaField } from "@/components/form/textarea-field"
 import { cn, generateRandomStory } from "@/lib/utils"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { useIsBusy, useOrientation, useQueryStringParams, useStoryPromptDraft } from "@/lib/hooks"
 import { BottomBar, VideoPreview } from "@/components/interface"
 import { MainTitle } from "@/components/interface/main-title"
 import { LoadClapButton } from "@/components/interface/load-clap-button"
 import { useProcessors } from "@/lib/hooks/useProcessors"
 import { Characters } from "@/components/interface/characters"
 import { useOAuth } from "@/lib/oauth/useOAuth"
 import { AuthWall } from "@/components/interface/auth-wall"
+import { defaultPrompt } from "./config"
+import { useStore } from "./store"
 export function Main() {
   const { storyPromptDraft, setStoryPromptDraft, promptDraftRef } = useStoryPromptDraft()
   const  { isBusy } = useIsBusy()
   useQueryStringParams()
   const showAuthWall = useStore(s => s.showAuthWall)
+  const { isLoggedIn, enableOAuthWall } = useOAuth()
   return (
     <TooltipProvider>

src/app/portal/page.tsx ADDED Viewed

	@@ -0,0 +1,37 @@

+"use client"
+import { useEffect, useState } from "react"
+import Head from "next/head"
+import Script from "next/script"
+import { cn } from "@/lib/utils/cn"
+import { Portal } from "./portal"
+// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
+export default function PortalPage() {
+  const [isLoaded, setLoaded] = useState(false)
+  useEffect(() => { setLoaded(true) }, [])
+  return (
+    <>
+      <Head>
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" crossOrigin="anonymous" />
+        <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86" />
+      </Head>
+      <Script id="gtm">{`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','GTM-K98T8ZFZ');`}</Script>
+      <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K98T8ZFZ"
+height="0" width="0" style={{ display: "none", visibility: "hidden" }}></iframe></noscript>
+      <main className={cn(
+        `dark flex inset-0 w-screen h-screen items-center justify-center`,
+        )}>
+        {isLoaded && <Portal />}
+      </main>
+    </>
+  )
+}

src/app/portal/portal.tsx ADDED Viewed

	@@ -0,0 +1,24 @@

+"use client"
+import React from "react"
+import { useQueryStringParams } from "@/lib/hooks"
+import { VideoPreview } from "@/components/interface"
+// we are going to need to do the same thing on AiTube's side,
+// which is a waste of time of energy.. possibles alternatives are
+// to put all the codebase in a shared NPM package, or just move everything
+// to AiTube, then display an iframe widget similar to what Hugging
+// Face does for Spaces, and call it a day.
+//
+// we could also make it in a way where only the rendering is done
+// on AiTube's side, as if it was a YouTube player or something!
+// but the problem is that we would need to POST the .clap, or host it
+// (it won't fit in the iframe query params)
+export function Portal() {
+  useQueryStringParams()
+  return (
+    <VideoPreview embed />
+  );
+}

src/app/store.ts CHANGED Viewed

@@ -21,7 +21,7 @@ export const useStore = create<{
   status: GlobalStatus
   stage: GenerationStage
   parseGenerationStatus: TaskStatus
   storyGenerationStatus: TaskStatus
   assetGenerationStatus: TaskStatus
@@ -81,6 +81,7 @@ export const useStore = create<{
   orientation: ClapMediaOrientation.PORTRAIT,
   status: "idle",
   stage: "idle",
   parseGenerationStatus: "idle",
   storyGenerationStatus: "idle",
   assetGenerationStatus: "idle",
@@ -173,12 +174,13 @@ export const useStore = create<{
     get().syncStatusAndStageState()
   },
   syncStatusAndStageState: () => {
-    const { status, storyGenerationStatus, assetGenerationStatus, soundGenerationStatus, musicGenerationStatus, voiceGenerationStatus, imageGenerationStatus, videoGenerationStatus, finalGenerationStatus } = get()
     // note: we don't really have "stages" since some things run in parallel,
     // and some parallel tasks may finish before the others
     // still, we need to estimate how long things should take, so it has some usefulness
     let stage: GenerationStage =
       storyGenerationStatus === "generating" ? "story" :
       assetGenerationStatus === "generating" ? "entities" :
       musicGenerationStatus === "generating" ? "music" :
@@ -194,7 +196,25 @@ export const useStore = create<{
     // that is because we can have parallelism
     const isBusy = stage !== "idle" || status === "generating"
-    set({ isBusy, stage })
   },
   setCurrentClap: (currentClap?: ClapProject) => { set({ currentClap }) },
   setCurrentVideo: async (currentVideo: string): Promise<void> => {

   status: GlobalStatus
   stage: GenerationStage
+  statusMessage: string
   parseGenerationStatus: TaskStatus
   storyGenerationStatus: TaskStatus
   assetGenerationStatus: TaskStatus
   orientation: ClapMediaOrientation.PORTRAIT,
   status: "idle",
   stage: "idle",
+  statusMessage: "",
   parseGenerationStatus: "idle",
   storyGenerationStatus: "idle",
   assetGenerationStatus: "idle",
     get().syncStatusAndStageState()
   },
   syncStatusAndStageState: () => {
+    const { status, parseGenerationStatus, storyGenerationStatus, assetGenerationStatus, soundGenerationStatus, musicGenerationStatus, voiceGenerationStatus, imageGenerationStatus, videoGenerationStatus, finalGenerationStatus } = get()
     // note: we don't really have "stages" since some things run in parallel,
     // and some parallel tasks may finish before the others
     // still, we need to estimate how long things should take, so it has some usefulness
     let stage: GenerationStage =
+      parseGenerationStatus === "generating" ? "parse" :
       storyGenerationStatus === "generating" ? "story" :
       assetGenerationStatus === "generating" ? "entities" :
       musicGenerationStatus === "generating" ? "music" :
     // that is because we can have parallelism
     const isBusy = stage !== "idle" || status === "generating"
+  const statusMessage = isBusy ? (
+    // note: some of those tasks are running in parallel,
+    // and some are super-slow (like music or video)
+    // by carefully selecting in which order we set the ternaries,
+    // we can create the illusion that we just have a succession of reasonably-sized tasks
+    storyGenerationStatus === "generating" ? "Writing story.."
+    : parseGenerationStatus === "generating" ? "Loading the project.."
+    : assetGenerationStatus === "generating" ? "Casting characters.."
+    : imageGenerationStatus === "generating" ? "Creating storyboards.."
+    : soundGenerationStatus === "generating" ? "Recording sounds.."
+    : videoGenerationStatus === "generating" ? "Filming shots.."
+    : musicGenerationStatus === "generating" ? "Producing music.."
+    : voiceGenerationStatus === "generating" ? "Recording dialogues.."
+    : finalGenerationStatus === "generating" ? "Editing final cut.."
+    : "Please wait.."
+  ) : ""
+    set({ isBusy, stage, statusMessage })
   },
   setCurrentClap: (currentClap?: ClapProject) => { set({ currentClap }) },
   setCurrentVideo: async (currentVideo: string): Promise<void> => {

src/components/interface/device-frame.tsx ADDED Viewed

	@@ -0,0 +1,82 @@

+import { ReactNode } from "react"
+import Image from "next/image"
+import { DeviceFrameset } from "react-device-frameset"
+import "react-device-frameset/styles/marvel-devices.min.css"
+import { useOrientation } from "@/lib/hooks"
+import { cn } from "@/lib/utils"
+import HFLogo from "../../app/hf-logo.svg"
+export function DeviceFrame({ children, companion, showFrame = false }: {
+  children?: ReactNode
+  companion?: ReactNode
+  showFrame?: boolean
+}) {
+  const { isLandscape, isPortrait } = useOrientation()
+  if (!showFrame) {
+    return children
+  }
+  return (
+    <div className={cn(`
+      -mt-8 md:mt-0
+      transition-all duration-200 ease-in-out
+    `,
+    isLandscape
+      ? `scale-[0.9] md:scale-[0.75] lg:scale-[0.9] xl:scale-[1.0] 2xl:scale-[1.1]`
+      : `scale-[0.8] md:scale-[0.9] lg:scale-[1.1]`
+      )}>
+      <DeviceFrameset
+        device="Nexus 5"
+        // color="black"
+        landscape={isLandscape}
+        // note 1: videos are generated in 1024x576 or 576x1024
+        // so we need to keep the same ratio here
+        // note 2: width and height are fixed, if width always stays 512
+        // that's because the landscape={} parameter will do the switch for us
+        width={288}
+        height={512}
+      >
+        <div className="
+        flex flex-col items-center justify-center
+        w-full h-full
+        bg-black text-white
+        ">
+          {children}
+        </div>
+        <div className={cn(`
+          fixed
+          flex flex-row items-center justify-center
+          bg-transparent
+          font-sans
+          -mb-0
+          `,
+          isLandscape ? 'h-4' : 'h-14'
+        )}
+          style={{ width: isPortrait ? 288 : 512 }}>
+          <span className="text-stone-100/50 text-4xs"
+            style={{ textShadow: "rgb(0 0 0 / 80%) 0px 0px 2px" }}>
+            Powered by
+          </span>
+          <span className="ml-1 mr-0.5">
+            <Image src={HFLogo} alt="Hugging Face" width={14} height={13} />
+          </span>
+          <span className="text-stone-100/80 text-3xs font-semibold"
+            style={{ textShadow: "rgb(0 0 0 / 80%) 0px 0px 2px" }}>Hugging Face</span>
+        </div>
+      </DeviceFrameset>
+      {companion}
+    </div>
+  )
+}

src/components/interface/download-video.tsx ADDED Viewed

	@@ -0,0 +1,46 @@

+import { ReactNode } from "react"
+import { FaCloudDownloadAlt } from "react-icons/fa"
+import { cn } from "@/lib/utils"
+export function DownloadVideo({
+  video = "",
+  disabled = false,
+  onClick,
+  children = <>Download</>
+}: {
+  video?: string
+  disabled?: boolean
+  onClick: () => void
+  children?: ReactNode
+}) {
+  return (
+    <>{
+      (video && video.length > 128)
+      ? <div
+      className={cn(`
+      w-full
+      flex flex-row
+      items-center justify-center
+      transition-all duration-150 ease-in-out
+    text-stone-800
+      group
+      pt-2 md:pt-4
+      `,
+      disabled ? 'opacity-50' : 'cursor-pointer opacity-100 hover:scale-110 active:scale-150 hover:text-stone-950 active:text-black'
+      )}
+      style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}
+      onClick={disabled ? undefined : onClick}
+    >
+      <div className="
+      text-base md:text-lg lg:text-xl
+      transition-all duration-150 ease-out
+      group-hover:animate-swing
+      "><FaCloudDownloadAlt /></div>
+      <div className="text-xs md:text-sm lg:text-base">&nbsp;{children}</div>
+    </div> : null}</>
+  )
+}

src/components/interface/video-preview.tsx CHANGED Viewed

@@ -1,190 +1,56 @@
 "use client"
 import React from "react"
-import { FaCloudDownloadAlt } from "react-icons/fa"
-import Image from "next/image"
-import { DeviceFrameset } from "react-device-frameset"
-import "react-device-frameset/styles/marvel-devices.min.css"
-import { useOrientation } from "@/lib/hooks/useOrientation"
 import { useProgressTimer } from "@/lib/hooks/useProgressTimer"
-import { cn } from "@/lib/utils/cn"
 import { useStore } from "../../app/store"
-import HFLogo from "../../app/hf-logo.svg"
 import { Login } from "./login"
-import { useOAuth } from "@/lib/oauth/useOAuth"
-export function VideoPreview() {
-  const { isLoggedIn, enableOAuthWall } = useOAuth()
-  const status = useStore(s => s.status)
-  const parseGenerationStatus = useStore(s => s.parseGenerationStatus)
-  const storyGenerationStatus = useStore(s => s.storyGenerationStatus)
-  const assetGenerationStatus = useStore(s => s.assetGenerationStatus)
-  const soundGenerationStatus = useStore(s => s.soundGenerationStatus)
-  const musicGenerationStatus = useStore(s => s.musicGenerationStatus)
-  const voiceGenerationStatus = useStore(s => s.voiceGenerationStatus)
-  const imageGenerationStatus = useStore(s => s.imageGenerationStatus)
-  const videoGenerationStatus = useStore(s => s.videoGenerationStatus)
-  const finalGenerationStatus = useStore(s => s.finalGenerationStatus)
   const currentVideo = useStore(s => s.currentVideo)
   const error = useStore(s => s.error)
   const saveVideo = useStore(s => s.saveVideo)
-  const  { isBusy, progress } = useProgressTimer()
-  const {
-    isLandscape,
-    isPortrait,
-  } = useOrientation()
-  const placeholder = <div
-  className="
-  text-base
-  text-center
-text-stone-50/90 dark:text-stone-50/90
-"
->{
-  error ? <span>{error}</span> :
-  <span>No video yet</span>
-}</div>
   return (
-    <div className={cn(`
-      -mt-8 md:mt-0
-      transition-all duration-200 ease-in-out
-    `,
-    isLandscape
-      ? `scale-[0.9] md:scale-[0.75] lg:scale-[0.9] xl:scale-[1.0] 2xl:scale-[1.1]`
-      : `scale-[0.8] md:scale-[0.9] lg:scale-[1.1]`
-      )}>
-      <DeviceFrameset
-        device="Nexus 5"
-        // color="black"
-        landscape={isLandscape}
-        // note 1: videos are generated in 1024x576 or 576x1024
-        // so we need to keep the same ratio here
-        // note 2: width and height are fixed, if width always stays 512
-        // that's because the landscape={} parameter will do the switch for us
-        width={288}
-        height={512}
-      >
-        <div className="
-        flex flex-col items-center justify-center
-        w-full h-full
-        bg-black text-white
-        ">
-          {
-            !isLoggedIn ? <div className="
-            flex flex-col items-center justify-center
-            space-y-2
-            ">
-              <div className="
-              text-base
-              text-center
-            text-stone-50/90 dark:text-stone-50/90
-            ">Please login to generate videos:</div>
-              <Login />
-              </div>
-            : isBusy ? <div className="
-          flex flex-col
-          items-center justify-center
-          text-center space-y-1.5">
-            <p className="text-2xl font-bold">{progress}%</p>
-            <p className="text-base text-white/70">{
-            isBusy
-              ? (
-                // note: some of those tasks are running in parallel,
-                // and some are super-slow (like music or video)
-                // by carefully selecting in which order we set the ternaries,
-                // we can create the illusion that we just have a succession of reasonably-sized tasks
-                storyGenerationStatus === "generating" ? "Writing story.."
-                : parseGenerationStatus === "generating" ? "Loading the project.."
-                : assetGenerationStatus === "generating" ? "Casting characters.."
-                : imageGenerationStatus === "generating" ? "Creating storyboards.."
-                : soundGenerationStatus === "generating" ? "Recording sounds.."
-                : videoGenerationStatus === "generating" ? "Filming shots.."
-                : musicGenerationStatus === "generating" ? "Producing music.."
-                : voiceGenerationStatus === "generating" ? "Recording dialogues.."
-                : finalGenerationStatus === "generating" ? "Editing final cut.."
-                : "Please wait.."
-              )
-              : status === "error"
-              ? <span>{error || ""}</span>
-              : placeholder // to prevent layout changes
-            }</p>
-            </div>
-          : (currentVideo && currentVideo?.length > 128) ? <video
-            src={currentVideo}
-            controls
-            playsInline
-            // I think we can't autoplay with sound,
-            // so let's disable auto-play
-            // autoPlay
-            // muted
-            loop
-            className="object-cover"
-            style={{
-            }}
-          /> : placeholder}
-        </div>
-        <div className={cn(`
-          fixed
-          flex flex-row items-center justify-center
-          bg-transparent
-          font-sans
-          -mb-0
-          `,
-          isLandscape ? 'h-4' : 'h-14'
-        )}
-          style={{ width: isPortrait ? 288 : 512 }}>
-          <span className="text-stone-100/50 text-4xs"
-            style={{ textShadow: "rgb(0 0 0 / 80%) 0px 0px 2px" }}>
-            Powered by
-          </span>
-          <span className="ml-1 mr-0.5">
-            <Image src={HFLogo} alt="Hugging Face" width={14} height={13} />
-          </span>
-          <span className="text-stone-100/80 text-3xs font-semibold"
-            style={{ textShadow: "rgb(0 0 0 / 80%) 0px 0px 2px" }}>Hugging Face</span>
         </div>
-      </DeviceFrameset>
-      {(currentVideo && currentVideo.length > 128) ? <div
-        className={cn(`
-        w-full
-        flex flex-row
-        items-center justify-center
-        transition-all duration-150 ease-in-out
-      text-stone-800
-        group
-        pt-2 md:pt-4
-        `,
-          isBusy ? 'opacity-50' : 'cursor-pointer opacity-100 hover:scale-110 active:scale-150 hover:text-stone-950 active:text-black'
-        )}
-        style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}
-        onClick={isBusy ? undefined : saveVideo}
-      >
-        <div className="
-        text-base md:text-lg lg:text-xl
-        transition-all duration-150 ease-out
-        group-hover:animate-swing
-        "><FaCloudDownloadAlt /></div>
-        <div className="text-xs md:text-sm lg:text-base">&nbsp;Download</div>
-      </div> : null}
-    </div>
   )
 }

 "use client"
 import React from "react"
 import { useProgressTimer } from "@/lib/hooks/useProgressTimer"
+import { useOAuth } from "@/lib/oauth/useOAuth"
 import { useStore } from "../../app/store"
 import { Login } from "./login"
+import { Video } from "./video"
+import { DownloadVideo } from "./download-video"
+import { DeviceFrame } from "./device-frame"
+export function VideoPreview({
+  embed
+}: {
+  embed?: boolean
+}) {
+  const { isLoggedIn } = useOAuth()
   const currentVideo = useStore(s => s.currentVideo)
+  const statusMessage = useStore(s => s.statusMessage)
   const error = useStore(s => s.error)
   const saveVideo = useStore(s => s.saveVideo)
+  const { isBusy, progress } = useProgressTimer()
   return (
+    <DeviceFrame
+      companion={
+        <DownloadVideo
+          disabled={isBusy}
+          video={currentVideo}
+          onClick={saveVideo}
+        />
+      }
+      showFrame={!embed}
+    >
+    <Video
+      video={currentVideo}
+      isBusy={isBusy}
+      progress={progress}
+      status={statusMessage}
+      error={error}
+    >{
+      !isLoggedIn
+      ? <div className="flex flex-col items-center justify-center space-y-2">
+          <div className="text-base text-center text-stone-50/90 dark:text-stone-50/90">
+            Please login to generate videos:
+          </div>
+          <Login />
         </div>
+      : null
+      }</Video>
+    </DeviceFrame>
   )
 }

src/components/interface/video.tsx ADDED Viewed

	@@ -0,0 +1,68 @@

+import React, { ReactNode } from "react"
+export function Video({
+  video = "",
+  isBusy = false,
+  progress = 0,
+  status = "",
+  error = "",
+  children = undefined,
+}: {
+  video: string
+  isBusy: boolean
+  progress: number
+  status: string
+  error: ReactNode
+  children?: ReactNode
+} = {
+  video: "",
+  isBusy: false,
+  progress: 0,
+  status: "",
+  error: "",
+  children: undefined,
+}) {
+  const placeholder = <div
+    className="
+      text-base
+      text-center
+      text-stone-50/90 dark:text-stone-50/90
+      "
+    >{
+      error ? <span>{error}</span> :
+      <span>No video yet</span>
+    }</div>
+  const hasVideoContent = Boolean(video && video?.length > 128)
+  return (
+    <>{
+      children ? children : isBusy ? <div className="
+    flex flex-col
+    items-center justify-center
+    text-center space-y-1.5">
+      <p className="text-2xl font-bold">{progress}%</p>
+      <p className="text-base text-white/70">{
+      status
+        ? status
+        : error
+        ? <span>{error}</span>
+        : placeholder // to prevent layout changes
+      }</p>
+      </div>
+    : hasVideoContent ? <video
+      src={video}
+      controls
+      playsInline
+      // I think we can't autoplay with sound,
+      // so let's disable auto-play
+      // autoPlay
+      // muted
+      loop
+      className="object-cover"
+      style={{
+      }}
+    /> : placeholder
+  }</>
+  )
+}

src/types.ts CHANGED Viewed

@@ -11,6 +11,7 @@ export type GlobalStatus =
   | "error"
 export type GenerationStage =
   | "story"
   | "entities"
   | "sounds"

   | "error"
 export type GenerationStage =
+  | "parse"
   | "story"
   | "entities"
   | "sounds"