React TinyMCE with GPT3 API #420

NorkzYT · 2022-12-09T14:35:48Z

NorkzYT
Dec 9, 2022

How would I change the following code to take the text from TinyMCE editor, and add the formatted GPT3 output into the same TinyMCE editor instead of an <input></input> box?

I could not come up with or find a solution to this for the past week, and any help would be much appreciated.

For reproduction, the following link contains the GitHub repository.
https://github.com/harish-garg/nextjs-reactjs-gpt-3/blob/main/pages/index.js

import Head from "next/head";
import styles from "../styles/Home.module.css";
import { useState, useEffect } from 'react';

export default function Home() {
  const [data, setData] = useState( { text:'' });
  const [query, setQuery] = useState();
  const [search, setSearch] = useState();
  const [isLoading, setIsLoading] = useState(false);
 
  useEffect(() => {
    const fetchData = async () => {
      if (search) {
      setIsLoading(true);
      const res = await fetch(`/api/openai`, {
        body: JSON.stringify({
          name: search
        }),
        headers: {
          'Content-Type': 'application/json'
        },
        method: 'POST'
      })
      const data = await res.json();
      setData(data);
      setIsLoading(false);
    }};
 
    fetchData();
  }, [search]);
  return (
    <div className={styles.container}>
      <Head>
        <title>GPT-3 App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          <a>AI Lyrics Generator</a>
        </h1>

        <p className={styles.description}>Built with NextJS & GPT-3 API</p>

        <div className={styles.grid}>
          <div className={styles.card}>
            <h3>Enter Artist:</h3>
            <input
          type="text"
          value={query}
          onChange={event => setQuery(event.target.value)}
        />
        <button
          type="button"
          onClick={() =>
            setSearch(query)
          }
        >
          Generate
        </button>
        
          <h4>Lyrics</h4>  
          {isLoading ? (
            <div>Loading ...</div>
         ) : (
           <span>
           {data.text}
           </span>
           )}
        
          </div>
        </div>
      </main>
    </div>
  );
}

I made the following function to activate when a button is clicked, and <input></input> box contains the input content, in which GPT3 output goes into the TinyMCE editor only after clicking the button twice which is not something I want.
It would be best to have the output appear after GPT3 outputs which could take a couple of seconds depending on how big the input was.

  function generateResponse() {
   setSearch(query);
   openai_content(data.text);
 }

 async function openai_content() {
   await tinymce.activeEditor.setContent(
     tinymce.activeEditor.getContent() + data.text,
   );
 }

I could always add the following wait function, but that is not what is needed, something like a isLoading ? would be better.

  function wait(milliseconds) {
   const date = Date.now();
   let currentDate = null;
   do {
     currentDate = Date.now();
   } while (currentDate - date < milliseconds);
 }

When outputting the GPT3 output into the tinymce editor, the format in which the output was in, is removed which I do not know how to fix it, although when it is outputted into a <input></input> box, the format stays the same.

E.g.

Incorrect format put into TinyMCE Editor.

Hello,Are there any spots left? My son was able to secure a grant through his school for the program. I need to know the exact total and how to pay for it Jane

Correct format that is put into the <input></input> box.

Hello,
 
Are there any spots left? My son was able to secure a grant through his school for the program. I need to know the exact total and how to pay for it 
 
Jane

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React TinyMCE with GPT3 API #420

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

React TinyMCE with GPT3 API #420

NorkzYT Dec 9, 2022

Replies: 0 comments

NorkzYT
Dec 9, 2022