I cant make the fetchMovieDescription function to get called only after my story state is changed, instead, it gets called in the same time as fetchBotReply and generates a random image instead of the one from the story result.
import { process } from '../env'
import { Configuration, OpenAIApi } from 'openai'
import { useState, useEffect } from 'react'
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY
})
const openai = new OpenAIApi(configuration)
export default function StoryPart() {
const [userInput, setUserInput] = useState("")
const [story, setStory] = useState("")
const [images, setImages] = useState("")
const [storyFetched, setStoryFetched] = useState(false);
useEffect(() => {
fetchMovieDescription(story);
}, [storyFetched])
const handleChange = (event) => {
setUserInput(event.target.value);
}
const handleSubmit = async (event) => {
event.preventDefault();
await fetchBotReply(userInput);
setUserInput("");
}
async function fetchBotReply(userInput) {
try {
const response = await openai.createCompletion({
model: 'text-davinci-003',
prompt: `You are an AI developed by OpenAI.
You have been trained on a vast range of internet text.
But unlike most AI models, your specialty is in creating unique and compelling movie scenarios.
You understand the elements of a great movie, including plot development, character arcs, conflict, and resolution.
You can generate scenarios in any genre, time period, or setting.
Your task is to write a scenario based on: ${userInput}.You must create the scenario so its easy to split it into 5
sections.The reason for it is that based on each section i will later ask you to write 5 detailed descriptions
of an image for later image generation.`,
max_tokens: 700,
temperature: 1
})
setStory(response.data.choices[0].text)
setStoryFetched(true)
} catch (error) {
console.log(error)
}
}
async function fetchMovieDescription(story) {
try {
const response = await openai.createImage({
prompt: `Create a descriptive and precise prompt for image generation based on this story: ${story}`,
n: 1,
size: "512x512",
response_format: 'url'
})
console.log(story)
setImages(response.data.data[0].url)
console.log(response.data.data[0].url)
} catch (error) {
console.log(error)
}
}
return (
<div className="StoryPart">
<form onSubmit={handleSubmit}>
<label>
Story:
<input value={userInput} type="text" name="story" placeholder='input prompt' onChange={handleChange}/>
</label>
<button type="submit" value="Submit">Submit</button>
</form>
{story? <p>{story}</p> : "Writing your story..."}
{images? <img src={images} alt="movie scene"/> : "Writing your images..."}
</div>
)
}
i tried making another state storyFetched to change after the story has changed but no effect.
