Spaces:

jbilcke-hf
/

ai-stories-factory

Running on CPU Upgrade

App Files Files Community

jbilcke-hf HF staff commited on Apr 25

Commit

c78f7b4

•

1 Parent(s): 6821e3e

polishing the design 💅

Browse files

Files changed (9) hide show

README.md +2 -0
src/app/layout.tsx +3 -3
src/app/main.tsx +68 -23
src/app/server/aitube/generateClap.ts +1 -1
src/app/server/config.ts +6 -1
src/app/store.ts +1 -1
src/components/form/select-field.tsx +3 -1
src/components/form/slider-field.tsx +4 -1
src/components/form/textarea-field.tsx +17 -11

README.md CHANGED Viewed

@@ -7,7 +7,9 @@ colorTo: yellow
 pinned: true
 app_port: 3000
 disable_embedding: false
 header: mini
 ---
 This is a work in progress Space - thanks for your patience!

 pinned: true
 app_port: 3000
 disable_embedding: false
+hf_oauth: true
 header: mini
+short_description: Generate video stories using AI ✨
 ---
 This is a work in progress Space - thanks for your patience!

src/app/layout.tsx CHANGED Viewed

@@ -4,8 +4,8 @@ import type { Metadata } from 'next'
 import { inter, salsa } from './fonts'
 export const metadata: Metadata = {
-  title: 'Illustrateur (non-commercial usage only)',
-  description: 'Illustrateur - for non-commercial usage only',
 }
 export default function RootLayout({
@@ -16,7 +16,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={cn(
-        `h-full w-full overflow-none`,
         salsa.className
         )}>
         {children}

 import { inter, salsa } from './fonts'
 export const metadata: Metadata = {
+  title: 'AI Stories Factory - Generate video stories using AI ✨',
+  description: 'AI Stories Factory - Generate video stories using AI ✨',
 }
 export default function RootLayout({
   return (
     <html lang="en">
       <body className={cn(
+        `h-full w-full overflow-none light`,
         salsa.className
         )}>
         {children}

src/app/main.tsx CHANGED Viewed

@@ -4,7 +4,6 @@ import React, { useEffect, useRef, useState, useTransition } from 'react'
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
-import { InputField } from '@/components/form/input-field'
 import { Toaster } from '@/components/ui/sonner'
 import { cn } from '@/lib/utils/cn'
@@ -65,14 +64,18 @@ export function Main() {
       // `bg-zinc-800`,
       `bg-gradient-to-br from-amber-600 to-yellow-500`,
       // `bg-gradient-to-br from-sky-400 to-sky-300/30`,
-      `w-screen h-screen overflow-hidden`,
     )}>
       <div className="flex flex-col w-full">
-        <div className="flex flex-col md:flex-row w-full">
           <div className={cn(
             `flex flex-col w-full md:w-[512px]`,
             `transition-all duration-300 ease-in-out`,
-            `ml-12 pt-24`,
           )}>
             <Card className={cn(
              //  `shadow-2xl z-30 rounded-3xl`,
@@ -93,35 +96,74 @@ export function Main() {
                   <div className="
                     flex flex-row
                     items-center justify-center
                     px-3
                     rounded-full">
-                    <div className="
                       flex
                       items-center justify-center text-center
-                      w-16 h-16 rounded-lg
                       mr-2
                       font-sans
-                      bg-yellow-400 dark:bg-yellow-400
-                      text-5xl text-stone-900/80 dark:text-stone-900/80 font-bold
-                      ">AI</div>
-                      <div className="text-yellow-400 dark:text-yellow-400 text-5xl">Stories Factory</div>
                     </div>
-                    <p className="text-stone-900/90 dark:text-stone-100/90 text-2xl text-center pt-4">Generate video stories with AI ✨</p>
                   </div>
                 </CardHeader>
                 <CardContent className="flex flex-col">
-                  <div className="flex flex-col space-y-4 mt-0">
                     <TextareaField
-                      label="Your story:"
                       // disabled={modelState != 'ready'}
                       onChange={(e) => {
                         setStoryPromptDraft(e.target.value)
                       }}
                       placeholder="Yesterday I was at my favorite pizza place and.."
-                      inputClassName="h-80"
                       disabled={isBusy}
                       value={storyPromptDraft}
                     />
@@ -131,16 +173,17 @@ export function Main() {
                     <div className="flex flex-row justify-between items-center space-x-3">
                       <Button
                         onClick={handleSubmit}
-                        disabled={isBusy}
                         // variant="ghost"
                         className={cn(
-                          `text-xl`,
-                          `bg-stone-50/90 text-stone-900/80`,
                           `font-bold`,
-                          `hover:bg-stone-50 hover:text-stone-900/90`,
                         )}
                       >
-                        🖍️ Write
                       </Button>
                     </div>
                   </div>
@@ -155,14 +198,16 @@ export function Main() {
               </Card>
           </div>
           <div className={cn(
-            `flex flex-col items-center justify-center`,
             `flex-1`,
-            `h-screen`,
             // `transition-all duration-300 ease-in-out`
           )}>
             <div className={cn(`
-              scale-[1.2]
             `)}>
               <DeviceFrameset
                 device="Nexus 5"

 import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Toaster } from '@/components/ui/sonner'
 import { cn } from '@/lib/utils/cn'
       // `bg-zinc-800`,
       `bg-gradient-to-br from-amber-600 to-yellow-500`,
       // `bg-gradient-to-br from-sky-400 to-sky-300/30`,
+      `w-screen h-screen overflow-y-scroll md:overflow-hidden`,
     )}>
       <div className="flex flex-col w-full">
+        <div className="
+        flex flex-col md:flex-row w-full
+        "
+        style={{ boxShadow: "inset 0 0px 250px 0 rgb(0 0 0 / 60%)" }}>
           <div className={cn(
             `flex flex-col w-full md:w-[512px]`,
             `transition-all duration-300 ease-in-out`,
+            `ml-0 lg:ml-12`,
+            `pt-4 sm:pt-8 md:pt-16 lg:pt-24`,
           )}>
             <Card className={cn(
              //  `shadow-2xl z-30 rounded-3xl`,
                   <div className="
                     flex flex-row
                     items-center justify-center
+                    transition-all duration-200 ease-in-out
                     px-3
                     rounded-full">
+                    <div
+                    className="
                       flex
+                      transition-all duration-200 ease-in-out
                       items-center justify-center text-center
+                      w-10 h-10 md:w-12 md:h-12 lg:w-16 lg:h-16
+                      text-3xl md:text-4xl lg:text-5xl
+                      rounded-lg
                       mr-2
                       font-sans
+                      bg-amber-400 dark:bg-amber-400
+                      text-stone-950/80 dark:text-stone-950/80 font-bold
+                      "
+                      >AI</div>
+                      <div
+                        className="
+                        transition-all duration-200 ease-in-out
+                        text-amber-400 dark:text-amber-400
+                        text-3xl md:text-4xl lg:text-5xl
+                        "
+                        style={{ textShadow: "#00000035 0px 0px 2px" }}
+                        /*
+                        className="
+                        text-5xl
+                        bg-gradient-to-br from-yellow-300 to-yellow-500
+                        inline-block text-transparent bg-clip-text
+                        py-6
+                        "
+                        */
+                      >Stories Factory</div>
                     </div>
+                    <p
+                      className="
+                      transition-all duration-200 ease-in-out
+                      text-stone-900/90 dark:text-stone-100/90
+                      text-lg md:text-xl lg:text-2xl
+                      text-center
+                      pt-2 md:pt-4
+                      "
+                      style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}
+                    >Generate video stories using AI ✨</p>
                   </div>
                 </CardHeader>
                 <CardContent className="flex flex-col">
+                  <div className="
+                  flex flex-col
+                  transition-all duration-200 ease-in-out
+                  space-y-2 md:space-y-4 mt-0
+                  ">
                     <TextareaField
+                      label="My story:"
                       // disabled={modelState != 'ready'}
                       onChange={(e) => {
                         setStoryPromptDraft(e.target.value)
                       }}
                       placeholder="Yesterday I was at my favorite pizza place and.."
+                      inputClassName="
+                      transition-all duration-200 ease-in-out
+                      h-32 md:h-56 lg:h-64
+                      "
                       disabled={isBusy}
                       value={storyPromptDraft}
                     />
                     <div className="flex flex-row justify-between items-center space-x-3">
                       <Button
                         onClick={handleSubmit}
+                        disabled={!storyPromptDraft || isBusy}
                         // variant="ghost"
                         className={cn(
+                          `text-lg md:text-xl lg:text-2xl`,
+                          `bg-stone-800/90 text-amber-400/100 dark:bg-stone-800/90 dark:text-amber-400/100`,
                           `font-bold`,
+                          `hover:bg-stone-800/100 hover:text-amber-300/100 dark:hover:bg-stone-800/100 dark:hover:text-amber-300/100`,
+                          storyPromptDraft ? "opacity-100" : "opacity-80"
                         )}
                       >
+                       <span className="mr-1">Generate</span><span className="hidden md:inline">👉</span><span className="inline md:hidden">👇</span>
                       </Button>
                     </div>
                   </div>
               </Card>
           </div>
           <div className={cn(
+            `flex flex-col items-center justify-start md:justify-center`,
             `flex-1`,
+            `md:h-screen`,
             // `transition-all duration-300 ease-in-out`
           )}>
             <div className={cn(`
+              -mt-24 md:mt-0
+              transition-all duration-200 ease-in-out
+              scale-[0.7] md:scale-[0.9] lg:scale-[1.2]
             `)}>
               <DeviceFrameset
                 device="Nexus 5"

src/app/server/aitube/generateClap.ts CHANGED Viewed

@@ -19,7 +19,7 @@ export async function generateClap({
   // console.log(`calling `+ gradioApi + (gradioApi.endsWith("/") ? "" : "/") + "api/predict")
   // remember: a space needs to be public for the classic fetch() to work
-  const res = await fetch(aitubeApiUrl, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

   // console.log(`calling `+ gradioApi + (gradioApi.endsWith("/") ? "" : "/") + "api/predict")
   // remember: a space needs to be public for the classic fetch() to work
+  const res = await fetch(`${aitubeApiUrl}generate/story`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

src/app/server/config.ts CHANGED Viewed

@@ -2,4 +2,9 @@
 export const serverHuggingfaceApiKey = `${process.env.HF_API_TOKEN || ""}`
 export const aitubeUrl = `${process.env.AI_TUBE_URL || "" }`
-export const aitubeApiUrl = + aitubeUrl + (aitubeUrl.endsWith("/") ? "" : "/") + "api/"

 export const serverHuggingfaceApiKey = `${process.env.HF_API_TOKEN || ""}`
 export const aitubeUrl = `${process.env.AI_TUBE_URL || "" }`
+export const aitubeApiUrl = aitubeUrl + (aitubeUrl.endsWith("/") ? "" : "/") + "api/"
+console.log("debug:", {
+  aitubeUrl,
+  aitubeApiUrl,
+})

src/app/store.ts CHANGED Viewed

@@ -19,7 +19,7 @@ export const useStore = create<{
   setImageGenerationStatus: (imageGenerationStatus: TaskStatus) => void
   setVideoGenerationStatus: (videoGenerationStatus: TaskStatus) => void
 }>((set, get) => ({
-  storyPromptDraft: "",
   storyPrompt: "",
   status: "idle",
   storyGenerationStatus: "idle",

   setImageGenerationStatus: (imageGenerationStatus: TaskStatus) => void
   setVideoGenerationStatus: (videoGenerationStatus: TaskStatus) => void
 }>((set, get) => ({
+  storyPromptDraft: "Yesterday I was at my favorite pizza place and..",
   storyPrompt: "",
   status: "idle",
   storyGenerationStatus: "idle",

src/components/form/select-field.tsx CHANGED Viewed

@@ -21,7 +21,9 @@ export function SelectField({
       `flex flex-col space-y-3 items-start`,
       className
       )}>
-      {label && <Label className={cn("text-xl text-stone-900/90 dark:text-stone-100/90", labelClassName)}>{label}</Label>}
       <Select {...props} />
     </div>
   )

       `flex flex-col space-y-3 items-start`,
       className
       )}>
+      {label && <Label className={cn(`
+      text-base md:text-lg lg:text-xl
+      text-stone-900/90 dark:text-stone-100/90`, labelClassName)}>{label}</Label>}
       <Select {...props} />
     </div>
   )

src/components/form/slider-field.tsx CHANGED Viewed

@@ -21,7 +21,10 @@ export function SliderField({
       `flex flex-col space-y-3 items-start`,
       className
       )}>
-      {label && <Label className={cn("text-xl text-stone-900/90 dark:text-stone-100/90", labelClassName)}>{label}</Label>}
       <Slider {...props} className={sliderClassName} />
     </div>
   )

       `flex flex-col space-y-3 items-start`,
       className
       )}>
+      {label && <Label className={cn(`
+      text-base md:text-lg lg:text-xl
+       text-stone-900/90 dark:text-stone-100/90
+       `, labelClassName)}>{label}</Label>}
       <Slider {...props} className={sliderClassName} />
     </div>
   )

src/components/form/textarea-field.tsx CHANGED Viewed

@@ -22,19 +22,25 @@ export function TextareaField({
       className
       )}>
       {label && <Label className={cn(`
-      text-xl text-stone-900/90 dark:text-stone-100/90
-      `, labelClassName)}>{label}</Label>}
       <Textarea {...props} className={cn(`
-      text-xl
-      rounded-2xl
-      border-yellow-300 dark:border-yellow-300
-      outline-yellow-300 dark:outline-yellow-300
-      ring-yellow-300 dark:ring-yellow-300
-      ring-offset-yellow-300 dark:ring-offset-yellow-300
       placeholder:text-stone-900/50 dark:placeholder:text-stone-100/50
-      p-6
-      `, inputClassName)} />
     </div>
   )
 }

       className
       )}>
       {label && <Label className={cn(`
+      text-base md:text-lg lg:text-xl
+      text-stone-900/90 dark:text-stone-100/90
+      `, labelClassName)}
+      style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}>{label}</Label>}
       <Textarea {...props} className={cn(`
+      text-base md:text-lg lg:text-xl
+      rounded-lg md:rounded-xl lg:rounded-2xl
+      border-2
+      backdrop-blur-2xl
+      border-stone-800/80 dark:border-stone-800/80
+      outline-stone-800/80 dark:outline-stone-800/80
+      ring-stone-800/80 dark:ring-stone-800/80
+      ring-offset-stone-800/0 dark:ring-offset-stone-800/0
       placeholder:text-stone-900/50 dark:placeholder:text-stone-100/50
+      focus-visible:ring-amber-400/100 dark:focus-visible:ring-amber-400/100
+      p-2 md:p-4 lg:p-6
+      `, inputClassName)}
+      style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}
+      />
     </div>
   )
 }