Commit
•
bcfd882
1
Parent(s):
a7a0c57
adding a lock
Browse files- src/app/main.tsx +15 -8
- src/app/store.ts +3 -5
- src/lib/utils/putTextInInput.ts +18 -0
src/app/main.tsx
CHANGED
@@ -2,6 +2,7 @@
|
|
2 |
|
3 |
import React, { useEffect, useRef, useTransition } from 'react'
|
4 |
import { IoMdPhonePortrait } from 'react-icons/io'
|
|
|
5 |
import { ClapProject, ClapMediaOrientation, ClapSegmentCategory, updateClap } from '@aitube/clap'
|
6 |
import Image from 'next/image'
|
7 |
import { useFilePicker } from 'use-file-picker'
|
@@ -33,10 +34,16 @@ import { GenerationStage } from '@/types'
|
|
33 |
import { FileContent } from 'use-file-picker/dist/interfaces'
|
34 |
|
35 |
export function Main() {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
36 |
const [_isPending, startTransition] = useTransition()
|
37 |
-
|
38 |
-
const promptDraft = useRef("")
|
39 |
-
promptDraft.current = storyPromptDraft
|
40 |
const storyPrompt = useStore(s => s.storyPrompt)
|
41 |
const mainCharacterImage = useStore(s => s.mainCharacterImage)
|
42 |
const mainCharacterVoice = useStore(s => s.mainCharacterVoice)
|
@@ -53,7 +60,6 @@ export function Main() {
|
|
53 |
const currentClap = useStore(s => s.currentClap)
|
54 |
const currentVideo = useStore(s => s.currentVideo)
|
55 |
const currentVideoOrientation = useStore(s => s.currentVideoOrientation)
|
56 |
-
const setStoryPromptDraft = useStore(s => s.setStoryPromptDraft)
|
57 |
const setStoryPrompt = useStore(s => s.setStoryPrompt)
|
58 |
const setMainCharacterImage = useStore(s => s.setMainCharacterImage)
|
59 |
const setMainCharacterVoice = useStore(s => s.setMainCharacterVoice)
|
@@ -118,10 +124,10 @@ export function Main() {
|
|
118 |
|
119 |
setStatus("generating")
|
120 |
setStoryGenerationStatus("generating")
|
121 |
-
setStoryPrompt(
|
122 |
|
123 |
clap = await createClap({
|
124 |
-
prompt:
|
125 |
orientation: useStore.getState().orientation,
|
126 |
|
127 |
turbo: true,
|
@@ -320,7 +326,7 @@ export function Main() {
|
|
320 |
const handleSubmit = async () => {
|
321 |
|
322 |
startTransition(async () => {
|
323 |
-
console.log(`handleSubmit(): generating a clap using prompt = "${
|
324 |
|
325 |
try {
|
326 |
let clap = await generateStory()
|
@@ -626,11 +632,12 @@ export function Main() {
|
|
626 |
space-y-2 md:space-y-4
|
627 |
">
|
628 |
<TextareaField
|
|
|
629 |
// label="My story:"
|
630 |
// disabled={modelState != 'ready'}
|
631 |
onChange={(e) => {
|
632 |
setStoryPromptDraft(e.target.value)
|
633 |
-
|
634 |
}}
|
635 |
placeholder="Yesterday I was at my favorite pizza place and.."
|
636 |
inputClassName="
|
|
|
2 |
|
3 |
import React, { useEffect, useRef, useTransition } from 'react'
|
4 |
import { IoMdPhonePortrait } from 'react-icons/io'
|
5 |
+
import { useLocalStorage } from "usehooks-ts"
|
6 |
import { ClapProject, ClapMediaOrientation, ClapSegmentCategory, updateClap } from '@aitube/clap'
|
7 |
import Image from 'next/image'
|
8 |
import { useFilePicker } from 'use-file-picker'
|
|
|
34 |
import { FileContent } from 'use-file-picker/dist/interfaces'
|
35 |
|
36 |
export function Main() {
|
37 |
+
// for indelicate users trying to generate many Roblox or "mastiff" videos at once
|
38 |
+
const [storyPromptDraft, setStoryPromptDraft] = useLocalStorage<string>(
|
39 |
+
"AI_STORIES_FACTORY_STORY_PROMPT_DRAFT",
|
40 |
+
""
|
41 |
+
)
|
42 |
+
const promptDraftRef = useRef("")
|
43 |
+
promptDraftRef.current = storyPromptDraft
|
44 |
+
|
45 |
const [_isPending, startTransition] = useTransition()
|
46 |
+
|
|
|
|
|
47 |
const storyPrompt = useStore(s => s.storyPrompt)
|
48 |
const mainCharacterImage = useStore(s => s.mainCharacterImage)
|
49 |
const mainCharacterVoice = useStore(s => s.mainCharacterVoice)
|
|
|
60 |
const currentClap = useStore(s => s.currentClap)
|
61 |
const currentVideo = useStore(s => s.currentVideo)
|
62 |
const currentVideoOrientation = useStore(s => s.currentVideoOrientation)
|
|
|
63 |
const setStoryPrompt = useStore(s => s.setStoryPrompt)
|
64 |
const setMainCharacterImage = useStore(s => s.setMainCharacterImage)
|
65 |
const setMainCharacterVoice = useStore(s => s.setMainCharacterVoice)
|
|
|
124 |
|
125 |
setStatus("generating")
|
126 |
setStoryGenerationStatus("generating")
|
127 |
+
setStoryPrompt(promptDraftRef.current)
|
128 |
|
129 |
clap = await createClap({
|
130 |
+
prompt: promptDraftRef.current,
|
131 |
orientation: useStore.getState().orientation,
|
132 |
|
133 |
turbo: true,
|
|
|
326 |
const handleSubmit = async () => {
|
327 |
|
328 |
startTransition(async () => {
|
329 |
+
console.log(`handleSubmit(): generating a clap using prompt = "${promptDraftRef.current}" `)
|
330 |
|
331 |
try {
|
332 |
let clap = await generateStory()
|
|
|
632 |
space-y-2 md:space-y-4
|
633 |
">
|
634 |
<TextareaField
|
635 |
+
id="story-prompt-draft"
|
636 |
// label="My story:"
|
637 |
// disabled={modelState != 'ready'}
|
638 |
onChange={(e) => {
|
639 |
setStoryPromptDraft(e.target.value)
|
640 |
+
promptDraftRef.current = e.target.value
|
641 |
}}
|
642 |
placeholder="Yesterday I was at my favorite pizza place and.."
|
643 |
inputClassName="
|
src/app/store.ts
CHANGED
@@ -7,11 +7,11 @@ import { GenerationStage, GlobalStatus, TaskStatus } from "@/types"
|
|
7 |
import { getVideoOrientation } from "@/lib/utils/getVideoOrientation"
|
8 |
|
9 |
import { RESOLUTION_LONG, RESOLUTION_SHORT } from "./server/aitube/config"
|
|
|
10 |
|
11 |
export const useStore = create<{
|
12 |
mainCharacterImage: string
|
13 |
mainCharacterVoice: string
|
14 |
-
storyPromptDraft: string
|
15 |
storyPrompt: string
|
16 |
|
17 |
// the desired orientation for the next video
|
@@ -43,7 +43,6 @@ export const useStore = create<{
|
|
43 |
setCurrentVideoOrientation: (currentVideoOrientation: ClapMediaOrientation) => void
|
44 |
setMainCharacterImage: (mainCharacterImage: string) => void
|
45 |
setMainCharacterVoice: (mainCharacterVoice: string) => void
|
46 |
-
setStoryPromptDraft: (storyPromptDraft: string) => void
|
47 |
setStoryPrompt: (storyPrompt: string) => void
|
48 |
setStatus: (status: GlobalStatus) => void
|
49 |
setParseGenerationStatus: (parseGenerationStatus: TaskStatus) => void
|
@@ -106,7 +105,6 @@ export const useStore = create<{
|
|
106 |
setCurrentVideoOrientation: (currentVideoOrientation: ClapMediaOrientation) => { set({ currentVideoOrientation }) },
|
107 |
setMainCharacterImage: (mainCharacterImage: string) => { set({ mainCharacterImage }) },
|
108 |
setMainCharacterVoice: (mainCharacterVoice: string) => { set({ mainCharacterVoice }) },
|
109 |
-
setStoryPromptDraft: (storyPromptDraft: string) => { set({ storyPromptDraft }) },
|
110 |
setStoryPrompt: (storyPrompt: string) => { set({ storyPrompt }) },
|
111 |
setStatus: (status: GlobalStatus) => {
|
112 |
set({ status })
|
@@ -230,9 +228,10 @@ export const useStore = create<{
|
|
230 |
|
231 |
if (!currentClap) { throw new Error(`failed to import the clap`) }
|
232 |
|
233 |
-
|
234 |
const storyPrompt = currentClap.meta.description.split("||").pop() || ""
|
235 |
|
|
|
|
|
236 |
// TODO: parseVideoOrientation should be put inside @aitube/clap (in the utils)
|
237 |
// const orientation = parseVideoOrientation(currentClap.meta.orientation)
|
238 |
// let's use the UI settings for now
|
@@ -244,7 +243,6 @@ export const useStore = create<{
|
|
244 |
set({
|
245 |
currentClap,
|
246 |
storyPrompt,
|
247 |
-
storyPromptDraft: storyPrompt,
|
248 |
orientation,
|
249 |
currentVideoOrientation: orientation,
|
250 |
})
|
|
|
7 |
import { getVideoOrientation } from "@/lib/utils/getVideoOrientation"
|
8 |
|
9 |
import { RESOLUTION_LONG, RESOLUTION_SHORT } from "./server/aitube/config"
|
10 |
+
import { putTextInInput } from "@/lib/utils/putTextInInput"
|
11 |
|
12 |
export const useStore = create<{
|
13 |
mainCharacterImage: string
|
14 |
mainCharacterVoice: string
|
|
|
15 |
storyPrompt: string
|
16 |
|
17 |
// the desired orientation for the next video
|
|
|
43 |
setCurrentVideoOrientation: (currentVideoOrientation: ClapMediaOrientation) => void
|
44 |
setMainCharacterImage: (mainCharacterImage: string) => void
|
45 |
setMainCharacterVoice: (mainCharacterVoice: string) => void
|
|
|
46 |
setStoryPrompt: (storyPrompt: string) => void
|
47 |
setStatus: (status: GlobalStatus) => void
|
48 |
setParseGenerationStatus: (parseGenerationStatus: TaskStatus) => void
|
|
|
105 |
setCurrentVideoOrientation: (currentVideoOrientation: ClapMediaOrientation) => { set({ currentVideoOrientation }) },
|
106 |
setMainCharacterImage: (mainCharacterImage: string) => { set({ mainCharacterImage }) },
|
107 |
setMainCharacterVoice: (mainCharacterVoice: string) => { set({ mainCharacterVoice }) },
|
|
|
108 |
setStoryPrompt: (storyPrompt: string) => { set({ storyPrompt }) },
|
109 |
setStatus: (status: GlobalStatus) => {
|
110 |
set({ status })
|
|
|
228 |
|
229 |
if (!currentClap) { throw new Error(`failed to import the clap`) }
|
230 |
|
|
|
231 |
const storyPrompt = currentClap.meta.description.split("||").pop() || ""
|
232 |
|
233 |
+
putTextInInput(document.getElementById("story-prompt-draft") as HTMLInputElement, storyPrompt)
|
234 |
+
|
235 |
// TODO: parseVideoOrientation should be put inside @aitube/clap (in the utils)
|
236 |
// const orientation = parseVideoOrientation(currentClap.meta.orientation)
|
237 |
// let's use the UI settings for now
|
|
|
243 |
set({
|
244 |
currentClap,
|
245 |
storyPrompt,
|
|
|
246 |
orientation,
|
247 |
currentVideoOrientation: orientation,
|
248 |
})
|
src/lib/utils/putTextInInput.ts
ADDED
@@ -0,0 +1,18 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
export function putTextInInput(input?: HTMLInputElement, text: string = "") {
|
2 |
+
if (!input) { return }
|
3 |
+
|
4 |
+
const nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(
|
5 |
+
window.HTMLInputElement.prototype,
|
6 |
+
"value"
|
7 |
+
)?.set;
|
8 |
+
|
9 |
+
// fallback
|
10 |
+
if (!nativeTextAreaValueSetter) {
|
11 |
+
input.value = text
|
12 |
+
return
|
13 |
+
}
|
14 |
+
|
15 |
+
nativeTextAreaValueSetter.call(input, text)
|
16 |
+
const event = new Event('input', { bubbles: true });
|
17 |
+
input.dispatchEvent(event)
|
18 |
+
}
|