add button for more randomness

package-lock.json

@@ -38,6 +38,7 @@
         "cmdk": "^0.2.1",
         "eslint": "8.56.0",
         "eslint-config-next": "14.1.0",
+        "fun-word-list": "^1.0.1",
         "jimp": "^0.22.12",
         "jose": "^5.2.4",
         "lucide-react": "^0.334.0",
@@ -4526,6 +4527,11 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/fun-word-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/fun-word-list/-/fun-word-list-1.0.1.tgz",
+      "integrity": "sha512-WoUxTcjSPLSWhyMQaDiYgIWGOPHS7SnsZL8TVQrX8qdMyHXz8uPWnfMHq/Kx+kxQpQJ0GZkMjKgynv+INhbzBg=="
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",

package.json

@@ -39,6 +39,7 @@
     "cmdk": "^0.2.1",
     "eslint": "8.56.0",
     "eslint-config-next": "14.1.0",
+    "fun-word-list": "^1.0.1",
     "jimp": "^0.22.12",
     "jose": "^5.2.4",
     "lucide-react": "^0.334.0",

src/app/main.tsx

@@ -2,6 +2,7 @@
 
 import React, { useEffect, useRef, useTransition } from 'react'
 import { IoMdPhonePortrait } from 'react-icons/io'
+import { GiRollingDices } from 'react-icons/gi'
 import { useLocalStorage } from "usehooks-ts"
 import { ClapProject, ClapMediaOrientation, ClapSegmentCategory, updateClap } from '@aitube/clap'
 import Image from 'next/image'
@@ -31,6 +32,7 @@ import { Label } from '@/components/form/label'
 import { getParam } from '@/lib/utils/getParam'
 import { GenerationStage } from '@/types'
 import { FileContent } from 'use-file-picker/dist/interfaces'
+import { generateRandomStory } from '@/lib/utils/generateRandomStory'
 
 export function Main() {
   const [storyPromptDraft, setStoryPromptDraft] = useLocalStorage<string>(
@@ -641,10 +643,12 @@ export function Main() {
                         inputClassName="
                         transition-all duration-200 ease-in-out
                         h-32 md:h-56 lg:h-64
+                     
                         "
                         disabled={isBusy}
                         value={storyPromptDraft}
                       />
+     
                     
                     {/* END OF MAIN PROMPT INPUT */}
                     </div>
@@ -682,7 +686,8 @@ export function Main() {
                     flex flex-row
                     justify-between items-center
                     space-x-3">
-                    {canSeeBetaFeatures ?
+                      
+                    {/*
                     <Button
                       onClick={openFilePicker}
                       disabled={isBusy}
@@ -697,8 +702,9 @@ export function Main() {
                     >
                       <span className="hidden xl:inline mr-1">Load</span>
                       <span className="inline xl:hidden mr-1">Load</span>
-                    </Button> : <div></div>
-                    }
+                    </Button>
+                    */}
+   
   
                     {canSeeBetaFeatures ?
                     <Button
@@ -725,20 +731,60 @@ export function Main() {
                     space-x-3
                     select-none
                     ">
+
+ 
+                      {/* RANDOMNESS SWITCH */}
+                      <div className=" 
+                      flex flex-row
+                      justify-between items-center
+                      cursor-pointer
+                      transition-all duration-150 ease-in-out
+                      hover:scale-110 active:scale-150
+                     text-stone-800
+                      hover:text-stone-950
+                      active:text-black
+                      group
+                      "
+                      onClick={() => {
+                        const randomStory = generateRandomStory()
+                        setStoryPromptDraft(randomStory)
+                        promptDraftRef.current = randomStory
+                      }}>
+                        <div>
+                        </div>
+                        <div className="
+                        w-6 h-8
+                        flex flex-row items-center justify-center
+                        transition-all duration-150 ease-out
+                        group-hover:animate-swing
+                        "
+                        >
+                          <GiRollingDices size={24} />
+                        </div>
+                      </div>
+                      {/* END OF RANDOMNESS SWITCH */}
+
+
                       {/* ORIENTATION SWITCH */}
                       <div className=" 
                       flex flex-row
                       justify-between items-center
                       cursor-pointer
+                      transition-all duration-150 ease-out
+                      hover:scale-110 active:scale-150
+                      text-stone-800
+                      hover:text-stone-950
+                      active:text-black
+                      group
                       "
                       onClick={() => toggleOrientation()}>
                         <div>
-                        <span className="hidden xl:inline mr-1">Orientation:</span>
-                        <span className="inline xl:hidden mr-1"></span>
                         </div>
                         <div className="
                         w-8 h-8
                         flex flex-row items-center justify-center
+                        transition-all duration-150 ease-in-out
+                        group-hover:animate-swing
                         "
                         >
                           <div className={cn(
@@ -870,6 +916,10 @@ export function Main() {
             
                 </div>
               </DeviceFrameset>
+              
+              {/*
+              <div className={handleDownload}>Download</div>
+                */}
             </div>
           </div>
         </div>

src/app/store.ts

@@ -7,7 +7,7 @@ import { GenerationStage, GlobalStatus, TaskStatus } from "@/types"
 import { getVideoOrientation } from "@/lib/utils/getVideoOrientation"
 
 import { RESOLUTION_LONG, RESOLUTION_SHORT } from "./server/aitube/config"
-import { putTextInInput } from "@/lib/utils/putTextInInput"
+import { putTextInTextAreaElement } from "@/lib/utils/putTextInTextAreaElement"
 
 export const useStore = create<{
   mainCharacterImage: string
@@ -230,7 +230,10 @@ export const useStore = create<{
 
     const storyPrompt = currentClap.meta.description.split("||").pop() || ""
 
-    putTextInInput(document.getElementById("story-prompt-draft") as HTMLInputElement, storyPrompt)
+    putTextInTextAreaElement(
+      document.getElementById("story-prompt-draft") as HTMLTextAreaElement,
+      storyPrompt
+    )
 
     // TODO: parseVideoOrientation should be put inside @aitube/clap (in the utils)
     // const orientation = parseVideoOrientation(currentClap.meta.orientation)

src/lib/fun-words/declaration.d.ts

@@ -0,0 +1,22 @@
+declare module 'fun-word-list' {
+  import * as funWordList from 'fun-word-list';
+
+  type FunWordList = {
+    addons: string[] // Fragments to add to the end of sentences for different moods. Many include preceding commas or periods.
+    adjectives: string[]  // For use with `nouns` or `concepts`
+    concepts: string[] // Complex nouns
+    descriptions: string[] // For use with `locations`
+    gametypes: string[] // Video game genres/playstyles/feels
+    locations: string[] // Nouns that represent places
+    nouns: string[][]  // Simple things that can act or be acted upon
+
+    superlatives: string[] // Adjectives that express the extremes of something. For use with `nouns`, `concepts`, or `locations`
+    verbs: {  // All verbs in this list are used for acting in relation to another thing.
+      secondPerson: string[]  // Verbs for use with "you" or "they" as in "you help the aardvark" or "they fight a bird"
+      secondConcepts: string[]  // Verbs for use with "you" or "they" in combination with `concepts` as in "you are helped by the King" or "they fight against traditions"
+      thirdPerson: string[] // Verbs for use with `nouns` as in "The aardvark anticipates rain"
+    }
+  }
+
+ export default funWordList as FunWordList
+}

src/lib/fun-words/filterSensitiveContent.ts

@@ -0,0 +1,82 @@
+
+// unfortunately the lib comes with some words
+// that, when combined, could create some bad buzz
+export const sensitiveTopics = [
+  "The Pope",
+  "gag",
+  "sadist",
+  "actress",
+  "razor",
+  "female",
+  "destroyer",
+  "prisonner",
+  "rib",
+  "cultist",
+  "candy",
+  "candies",
+  "skull",
+  "injury",
+  "lungs",
+  "field",
+  "child",
+  "kid",
+  "walk",
+  "stranger",
+  "children",
+  "faker",
+  "fake",
+  "curse",
+  "scissor",
+  "hobo",
+  "maniac",
+  "drug",
+  "gang",
+  "predator",
+  "hostage",
+  "cutthroat",
+  "swallow",
+  "shotgun",
+  "gun",
+  "pickaxe",
+  "clergymen",
+  "clergyman",
+  "clergy",
+  "dictator",
+  "microbe",
+  "convict",
+  "sniper",
+  "skeleton",
+  "aborigine",
+  "skirt",
+  "thug",
+  "thief",
+  "handgun",
+  "executioner",
+  "beast",
+  "nymph",
+  "rabbis",
+  "rabbies",
+  "rabbi",
+  "giblet",
+  "prisoner",
+  "machine gun",
+  "infant",
+  "crucifix",
+  "hatchet",
+  "beggar",
+  "indian",
+  "japanese",
+  "corrupted",
+  "russian",
+  "italian",
+  "greek",
+  "bandit",
+  "vulture",
+  "scavenger",
+  "hacksaw",
+  "chick"
+]
+
+export function filterSensitiveContent(words: string[], badWords: string[] = sensitiveTopics): string[] {
+  return words.filter(x => !badWords.some(y => y.toLowerCase().startsWith(x.toLowerCase().trim())))
+}

src/lib/fun-words/index.ts

@@ -0,0 +1,35 @@
+import funWordList from "fun-word-list"
+import { filterSensitiveContent, sensitiveTopics } from "./filterSensitiveContent"
+
+const {
+  addons, // Fragments to add to the end of sentences for different moods. Many include preceding commas or periods.
+  adjectives,  // For use with `nouns` or `concepts`
+  concepts: rawConcepts, // Complex nouns
+  descriptions, // For use with `locations`
+  gametypes, // Video game genres/playstyles/feels
+  locations, // Nouns that represent places
+  nouns: rawNouns, // Simple things that can act or be acted upon
+  superlatives, // Adjectives that express the extremes of something. For use with `nouns`, `concepts`, or `locations`
+  verbs: {  // All verbs in this list are used for acting in relation to another thing.
+    secondPerson: verbSecondPerson,  // Verbs for use with "you" or "they" as in "you help the aardvark" or "they fight a bird"
+    secondConcepts: verbSecondConcepts,  // Verbs for use with "you" or "they" in combination with `concepts` as in "you are helped by the King" or "they fight against traditions"
+    thirdPerson: verbThirdPerson, // Verbs for use with `nouns` as in "The aardvark anticipates rain"
+  }
+} = funWordList
+
+const nouns = rawNouns.filter(x => !sensitiveTopics.includes(x[0].toLowerCase().trim()))
+const concepts = filterSensitiveContent(rawConcepts)
+
+export {
+  addons, // Fragments to add to the end of sentences for different moods. Many include preceding commas or periods.
+  adjectives,  // For use with `nouns` or `concepts`
+  concepts, // Complex nouns
+  descriptions, // For use with `locations`
+  gametypes, // Video game genres/playstyles/feels
+  locations, // Nouns that represent places
+  nouns, // Simple things that can act or be acted upon
+  superlatives, // Adjectives that express the extremes of something. For use with `nouns`, `concepts`, or `locations`
+  verbSecondPerson,  // Verbs for use with "you" or "they" as in "you help the aardvark" or "they fight a bird"
+  verbSecondConcepts,  // Verbs for use with "you" or "they" in combination with `concepts` as in "you are helped by the King" or "they fight against traditions"
+  verbThirdPerson, // Verbs for use with `nouns` as in "The aardvark anticipates rain"
+}

src/lib/utils/generateRandomStory.ts

@@ -0,0 +1,102 @@
+import { pick } from "@/lib/utils/pick"
+import {
+  addons, // Fragments to add to the end of sentences for different moods. Many include preceding commas or periods.
+  adjectives,  // For use with `nouns` or `concepts`
+  concepts, // Complex nouns
+  descriptions, // For use with `locations`
+  gametypes, // Video game genres/playstyles/feels
+  locations, // Nouns that represent places
+  nouns, // Simple things that can act or be acted upon
+  superlatives, // Adjectives that express the extremes of something. For use with `nouns`, `concepts`, or `locations`
+  verbSecondPerson,  // Verbs for use with "you" or "they" as in "you help the aardvark" or "they fight a bird"
+  verbSecondConcepts,  // Verbs for use with "you" or "they" in combination with `concepts` as in "you are helped by the King" or "they fight against traditions"
+  verbThirdPerson, // Verbs for use with `nouns` as in "The aardvark anticipates rain"
+} from "@/lib/fun-words"
+
+
+const moodTypes = [
+  "A fantasy",
+  "An epic",
+  "A beautiful",
+  "A science-fiction",
+  "A boring",
+  "A sad",
+  "A cheerful",
+  "A funny",
+  "A funny",
+  "A trending",
+  "A cute",
+  "An interesting",
+  "An outrageous",
+  "A dark",
+  "A 3D-rendered",
+  "An animated",
+  "Burlesque",
+  "Short",
+  "Long",
+  "An inspiring",
+  "A marketing",
+  "A commercial",
+  "An internet",
+  "A stupid",
+  "A vintage",
+]
+
+const videoTypes = [
+  "fail compilation",
+  "influencer meltdown",
+  "breaking news",
+  "newscast",
+  "politician speech",
+  "found footage",
+  "meme video",
+  "rap video",
+  "animal documentary",
+  "music video",
+  "live video",
+  "advert",
+  "instagram video",
+  "short movie",
+  "documentary",
+  "movie trailer",
+  "TikTok video",
+]
+
+const locationTypes = [
+  "in some",
+  // "set somewhere in",
+  "near some",
+]
+
+export function generateRandomStory() {
+
+  let pickedWords: any[] = []
+
+  function randomize<T>(words: T[]): T {
+    const picked = pick(words, '' as T)
+    pickedWords.push(picked as any)
+    return picked
+  } 
+
+  return `${
+    pick(moodTypes, '')
+  } ${
+    pick(videoTypes, '')
+  }${
+    Math.random() > 0.5 ? "," : ""
+  } ${
+    pick(locationTypes, '')
+  } ${
+    randomize(descriptions)
+  } and ${
+    randomize(descriptions)
+  } ${
+    randomize(locations)
+  }. It is about ${
+    randomize(nouns)[1]
+  }, ${
+    randomize(nouns)[0]
+  } ${
+    randomize(nouns)[1]
+  } and..`
+}

src/lib/utils/pick.ts

@@ -1,2 +1,22 @@
 
-export const pick = (items: string[]) => items[Math.floor(Math.random()*items.length)]
+export function pick<T>(items: T[], defaultValue: T, {
+  skipList = [],
+  maxRetries = 10
+}: {
+  skipList?: T[]
+  maxRetries?: number
+} = {
+  skipList: [],
+  maxRetries: 10
+}): T {
+  let candidate: T | undefined = undefined
+  for (let i = 0; i < maxRetries; i++) {
+    candidate = items[Math.floor(Math.random() * items.length)] as T
+    if (skipList.includes(candidate)) { continue }
+  }
+  if (typeof candidate === "undefined") {
+    return defaultValue
+  } else {
+    return candidate
+  }
+}

src/lib/utils/{putTextInInput.ts → putTextInTextAreaElement.ts}

@@ -1,8 +1,8 @@
-export function putTextInInput(input?: HTMLInputElement, text: string = "") {
+export function putTextInTextAreaElement(input?: HTMLTextAreaElement  , text: string = "") {
   if (!input) { return }
 
   const nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(
-    window.HTMLInputElement.prototype,
+    window.HTMLTextAreaElement.prototype,
     "value"
   )?.set;
 

tailwind.config.js

@@ -37,10 +37,16 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: 0 },
         },
+
+        swing: {
+          '0%,100%' : { transform: 'rotate(10deg)' },
+          '50%' : { transform: 'rotate(-10deg)' },
+        }
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        "accordion-down": "accordion-down 0.2s ease-in-out",
+        "accordion-up": "accordion-up 0.2s ease-in-out",
+        'swing': 'swing 0.8s ease-in-out infinite'
       },
       screens: {
         'print': { 'raw': 'print' },