tiny upgrade

src/app/interface/generate/index.tsx

@@ -12,10 +12,21 @@ import { getLatestPosts, getPost, postToCommunity } from "@/app/server/actions/c
 import { useCountdown } from "@/lib/useCountdown"
 import { Countdown } from "../countdown"
 import { getSDXLModels } from "@/app/server/actions/models"
-import { Post, SDXLModel } from "@/types"
+import { HotshotImageInferenceSize, Post, QualityLevel, QualityOption, SDXLModel } from "@/types"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { TooltipProvider } from "@radix-ui/react-tooltip"
 
+const qualityOptions = [
+  {
+    level: "low",
+    label: "Low (~ 30 sec)"
+  },
+  {
+    level: "medium",
+    label: "Medium (~90 secs)"
+  }
+] as QualityOption[]
+
 export function Generate() {
   const router = useRouter()
   const pathname = usePathname()
@@ -38,11 +49,12 @@ export function Generate() {
 
   const [communityRoll, setCommunityRoll] = useState<Post[]>([])
 
+  const [qualityLevel, setQualityLevel] = useState<QualityLevel>("low")
   
   const { progressPercent, remainingTimeInSec } = useCountdown({
     isActive: isLocked,
     timerId: runs, // everytime we change this, the timer will reset
-    durationInSec: 50, // it usually takes 40 seconds, but there might be lag
+    durationInSec: 80, // it usually takes 40 seconds, but there might be lag
     onEnd: () => {}
   })
   
@@ -67,7 +79,6 @@ export function Generate() {
   })
 
   const handleSubmit = () => {
-    console.log("handleSubmit:", { isLocked, promptDraft })
     if (isLocked) { return }
     if (!promptDraft) { return }
 
@@ -91,35 +102,33 @@ export function Generate() {
       const search = current.toString()
       router.push(`${pathname}${search ? `?${search}` : ""}`)
 
+      const size: HotshotImageInferenceSize = "608x416"
+
+      // 608x416 @ 25 steps -> 32 seconds
+      const steps = qualityLevel === "low" ? 25 : 35
+
+      const params = {
+        positivePrompt: promptDraft,
+        negativePrompt: "",
+        huggingFaceLora,
+        triggerWord,
+        nbFrames: 10, // if duration is 1000ms then it means 8 FPS
+        duration: 1000, // in ms
+        steps,
+        size
+      }
+
       let newAssetUrl = ""
       try {
         // console.log("starting transition, calling generateAnimation")
-        newAssetUrl = await generateAnimation({
-          positivePrompt: promptDraft,
-          negativePrompt: "",
-          huggingFaceLora,
-          triggerWord,
-          size: "608x416", // "1024x512", // "512x512" // "320x768"
-          nbFrames: 8, // if duration is 1000ms then it means 8 FPS
-          duration: 1000, // in ms
-          steps: 25,
-        })
+        newAssetUrl = await generateAnimation(params)
         setAssetUrl(newAssetUrl)
 
       } catch (err) {
         console.log("generation failed! probably just a Gradio failure, so let's just run the round robin again!")
         
         try {
-          newAssetUrl = await generateAnimation({
-            positivePrompt: promptDraft,
-            negativePrompt: "",
-            huggingFaceLora,
-            triggerWord,
-            size: "608x416", // "1024x512", // "512x512" // "320x768"
-            nbFrames: 8, // if duration is 1000ms then it means 8 FPS
-            duration: 1000, // in ms
-            steps: 25,
-          })
+          newAssetUrl = await generateAnimation(params)
           setAssetUrl(newAssetUrl)
         } catch (err) {
           console.error(`generation failed again! ${err}`)
@@ -304,8 +313,8 @@ export function Generate() {
             `backdrop-blur-lg bg-white/40`,
             `border-2 border-white/10`,
             `items-center`,
-            `space-y-6 md:space-y-8 lg:space-y-12 xl:space-y-16`,
-            `px-3 py-6 md:px-6 md:py-12 xl:px-8 xl:py-16`,
+            `space-y-6 md:space-y-8 lg:space-y-12 xl:space-y-14`,
+            `px-3 py-6 md:px-6 md:py-12 xl:px-8 xl:py-14`,
 
           )}>
             {assetUrl ? <div
@@ -320,7 +329,7 @@ export function Generate() {
                     autoPlay
                     loop
                     src={assetUrl}
-                    className="rounded-md overflow-hidden"
+                    className="rounded-md overflow-hidden md:h-[400px] lg:h-[500px] xl:h-[560px]"
                   /> :
                 <img
                   src={assetUrl}
@@ -415,6 +424,11 @@ export function Generate() {
                 </animated.button>
               </div>
             </div>
+            {/*
+            <div>
+              <p>Generation will take about 32 seconds</p>
+            </div>
+                  */}
 
           </div>
 

src/app/server/actions/censorship.ts

@@ -15,7 +15,9 @@ const chickens = [
   "681fea565117808c6dbe002520d2cfeeb3e5c67e68630afb4a453449a9da587b",
   "2f3d913b3db9e15a930aac43eb2d6fe8817db8e4bcf37794bf0227b06b718d1b",
   "922a700b807e4994df82eba2b48a6ac131fe8d8d1035d06b3592d622fb232161",
-  "cb69ee6774eafcc720adb1f689d28acbb9f47998cbea0299ec66a58dedf91c37"
+  "cb69ee6774eafcc720adb1f689d28acbb9f47998cbea0299ec66a58dedf91c37",
+  "bc1d4ab3fd611d6931e7fbaef942555a3a5e836dc7bacbf1939183a96e41a03b",
+  "cf79a5ba29b984a1d35c4cafe917328838af7d9b10e00f4ce91298317212b2b9"
 ]
 
 const ducks = [
@@ -71,6 +73,8 @@ const roasted = [
 ]
 
 const banned = [
+  "3ec2ad1877284220d0515bdb8716c9984143f72f9dcadb5396f0ad8f0ba934fb",
+  "e7db7d13264f1fc484d07e5ae960a702d50ab004055210c9085b6a77a77e182e",
   "03398ec4bdce4de69c76caf151cf3e1db5454208e88da147d607327a56d9ec27",
   "f27229416e1e11b9e7fe28f81fedff6cba2f6cd21eb8ac0d78e74908fbef1bd5",
   "8175b29dc4d1c6d57b9d986f2f9ebbddf1d4ba597a35962ea246e4a5d4d0b850",
@@ -181,7 +185,6 @@ encode([
 ])
 */
 
-
 export const filterOutBadWords = (sentence: string) => {
   if (process.env.ENABLE_CENSORSHIP !== "true") { return sentence }
 

src/types.ts

@@ -313,4 +313,11 @@ export type SDXLModel = {
   is_compatible: boolean
   likes: number
   downloads: number
-}
+}
+
+export type QualityLevel = "low" | "medium" | "high"
+
+export type QualityOption = {
+  level: QualityLevel
+  label: string
+}