adding a lock

src/app/main.tsx

@@ -2,6 +2,7 @@
 
 import React, { useEffect, useRef, useTransition } from 'react'
 import { IoMdPhonePortrait } from 'react-icons/io'
+import { useLocalStorage } from "usehooks-ts"
 import { ClapProject, ClapMediaOrientation, ClapSegmentCategory, updateClap } from '@aitube/clap'
 import Image from 'next/image'
 import { useFilePicker } from 'use-file-picker'
@@ -33,10 +34,16 @@ import { GenerationStage } from '@/types'
 import { FileContent } from 'use-file-picker/dist/interfaces'
 
 export function Main() {
+  // for indelicate users trying to generate many Roblox or "mastiff" videos at once
+  const [storyPromptDraft, setStoryPromptDraft] = useLocalStorage<string>(
+    "AI_STORIES_FACTORY_STORY_PROMPT_DRAFT",
+    ""
+  )
+  const promptDraftRef = useRef("")
+  promptDraftRef.current = storyPromptDraft
+
   const [_isPending, startTransition] = useTransition()
-  const storyPromptDraft = useStore(s => s.storyPromptDraft)
-  const promptDraft = useRef("")
-  promptDraft.current = storyPromptDraft
+
   const storyPrompt = useStore(s => s.storyPrompt)
   const mainCharacterImage = useStore(s => s.mainCharacterImage)
   const mainCharacterVoice = useStore(s => s.mainCharacterVoice)
@@ -53,7 +60,6 @@ export function Main() {
   const currentClap = useStore(s => s.currentClap)
   const currentVideo = useStore(s => s.currentVideo)
   const currentVideoOrientation = useStore(s => s.currentVideoOrientation)
-  const setStoryPromptDraft = useStore(s => s.setStoryPromptDraft)
   const setStoryPrompt = useStore(s => s.setStoryPrompt)
   const setMainCharacterImage = useStore(s => s.setMainCharacterImage)
   const setMainCharacterVoice = useStore(s => s.setMainCharacterVoice)
@@ -118,10 +124,10 @@ export function Main() {
 
       setStatus("generating")
       setStoryGenerationStatus("generating")
-      setStoryPrompt(promptDraft.current)
+      setStoryPrompt(promptDraftRef.current)
 
       clap = await createClap({
-        prompt: promptDraft.current,
+        prompt: promptDraftRef.current,
         orientation: useStore.getState().orientation,
 
         turbo: true,
@@ -320,7 +326,7 @@ export function Main() {
   const handleSubmit = async () => {
 
     startTransition(async () => {
-      console.log(`handleSubmit(): generating a clap using prompt = "${promptDraft.current}" `)
+      console.log(`handleSubmit(): generating a clap using prompt = "${promptDraftRef.current}" `)
 
       try {
         let clap = await generateStory()
@@ -626,11 +632,12 @@ export function Main() {
                       space-y-2 md:space-y-4
                     ">
                       <TextareaField
+                        id="story-prompt-draft"
                         // label="My story:"
                         // disabled={modelState != 'ready'}
                         onChange={(e) => {
                           setStoryPromptDraft(e.target.value)
-                          promptDraft.current = e.target.value
+                          promptDraftRef.current = e.target.value
                         }}
                         placeholder="Yesterday I was at my favorite pizza place and.."
                         inputClassName="

src/app/store.ts

@@ -7,11 +7,11 @@ 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"
 
 export const useStore = create<{
   mainCharacterImage: string
   mainCharacterVoice: string
-  storyPromptDraft: string
   storyPrompt: string
 
   // the desired orientation for the next video
@@ -43,7 +43,6 @@ export const useStore = create<{
   setCurrentVideoOrientation: (currentVideoOrientation: ClapMediaOrientation) => void
   setMainCharacterImage: (mainCharacterImage: string) => void
   setMainCharacterVoice: (mainCharacterVoice: string) => void
-  setStoryPromptDraft: (storyPromptDraft: string) => void
   setStoryPrompt: (storyPrompt: string) => void
   setStatus: (status: GlobalStatus) => void
   setParseGenerationStatus: (parseGenerationStatus: TaskStatus) => void
@@ -106,7 +105,6 @@ export const useStore = create<{
   setCurrentVideoOrientation: (currentVideoOrientation: ClapMediaOrientation) => { set({ currentVideoOrientation }) },
   setMainCharacterImage: (mainCharacterImage: string) => { set({ mainCharacterImage }) },
   setMainCharacterVoice: (mainCharacterVoice: string) => { set({ mainCharacterVoice }) },
-  setStoryPromptDraft: (storyPromptDraft: string) => { set({ storyPromptDraft }) },
   setStoryPrompt: (storyPrompt: string) => { set({ storyPrompt }) },
   setStatus: (status: GlobalStatus) => {
     set({ status })
@@ -230,9 +228,10 @@ export const useStore = create<{
 
     if (!currentClap) { throw new Error(`failed to import the clap`) }
 
-
     const storyPrompt = currentClap.meta.description.split("||").pop() || ""
 
+    putTextInInput(document.getElementById("story-prompt-draft") as HTMLInputElement, storyPrompt)
+
     // TODO: parseVideoOrientation should be put inside @aitube/clap (in the utils)
     // const orientation = parseVideoOrientation(currentClap.meta.orientation)
     // let's use the UI settings for now
@@ -244,7 +243,6 @@ export const useStore = create<{
     set({
       currentClap,
       storyPrompt,
-      storyPromptDraft: storyPrompt,
       orientation,
       currentVideoOrientation: orientation,
     })

src/lib/utils/putTextInInput.ts

@@ -0,0 +1,18 @@
+export function putTextInInput(input?: HTMLInputElement, text: string = "") {
+  if (!input) { return }
+
+  const nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(
+    window.HTMLInputElement.prototype,
+    "value"
+  )?.set;
+
+  // fallback
+  if (!nativeTextAreaValueSetter) {
+    input.value = text
+    return
+  }
+
+  nativeTextAreaValueSetter.call(input, text)
+  const event = new Event('input', { bubbles: true });
+  input.dispatchEvent(event)
+}