UseState for updating mainThread pilot

[gdcho]

1. Getting form field values using formRef:

const title = formRef.current.title.value;
const genre = formRef.current.genre.value;
const numberOfCharacters = formRef.current.numberOfCharacters.value;
'
'
'
<form ref={formRef} onSubmit={handleMainThreadSubmit} className="w-full">

2. OpenAI text completion call

const endpoint = "https://api.openai.com/v1/completions";

    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`,
      },
      body: JSON.stringify({
        model: "text-davinci-003",
        prompt: `Given title: ${title} , genre: ${genre} , and number of main characters: ${numberOfCharacters} , write a paragraph of only three sentences to start the story.`,
        temperature: 0.3,
        max_tokens: 100,
      }),
    };    

3. Using UseState to update mainThread pilot text area
   First, collect the response and the text completion value

const response = await fetch(endpoint, options);

    const { choices, error } = await response.json();

    const body = choices[0].text;

Then update mainThread pilot

if (!error) {
      mainThread.pilot = body;
      setPilot(body);
    }

Make sure:

<textarea
              name="pilot"
              id="message"
              rows="15"
              className="mb-5 block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
              placeholder="Write your thoughts here..."
              value={pilot}
              onChange={(e) => setPilot(e.target.value)} // Updates the pilot state when the textarea value changes.
            ></textarea>