ash1eygrace/ai-content

A React app that uses OpenAI's Generative Pre-trained Transformer 3 (GPT-3) autoregressive deep learning language model to generate human-like text.

👋 Hi, I’m Ashley.

🌱 I'm delving into full-stack JavaScript development, with a particular emphasis on React.

👩🏻‍💻 I work at Automattic, where I assist Happiness Engineers in supporting users of WordPress.com plugin-enbabled sites.

🔭 I'm currently working on two projects: AshAI, a React app using OpenAI's GPT-3 to generate human-like text, and a retro-style pixel display app for my TidByte.

⚡ Fun fact: As an enthusiast of post-apocalyptic scenarios and zombies, I'm always on the lookout for new recommendations. Here are my recommendations: The Last of Us, Dying Light, Far Cry 5, Train to Busan, The Girl with All the Gifts and Day by Day Armageddon.

ai-content's Issues

Remove extra lines before body of response OpenAI API sends back

Examples responses from API, seem to consistently come back with two extra lines \n\n before the text:

{
  "output": {
    "id": "cmpl-5piNzLeqAZOMoVema2MeguNftjgEg",
    "object": "text_completion",
    "created": 1663007031,
    "model": "text-davinci-002",
    "choices": [
      {
        "text": "\n\n-Tips for saving money on groceries\n-Ways to save money on your utility bills\n-How to create a budget that works for you\n-Saving money tips for busy families\n-10 simple ways to save money every day\n-3 big mistakes people make when trying to save money\n-How to save money on travel expenses\n-7 creative ways to save money",
        "index": 0,
        "logprobs": null,
        "finish_reason": "stop"
      }
    ],
    "usage": {
      "prompt_tokens": 16,
      "completion_tokens": 79,
      "total_tokens": 95
    }
  }
}

The result appears as unintentional CSS styling on the frontend when the response state is displayed:

Refactor: Variable prompt:"" for API calls to OpenAI for Reusable Function

This refactor is dependent on completion of #3.

Simple example request to OpenAI:

const response = await openai.createCompletion("text-davinci-002", {
  prompt: "",
  temperature: 0.7,
  max_tokens: 256,
  top_p: 1,
  frequency_penalty: 0,
  presence_penalty: 0,
});

Currently in each component the prompt includes a string with a variable depending on the form response i.e: Company Bio shows:

prompt: `Write a persuasive and exciting company bio for: ${formDataObj.companyName}`,

For refactor, the entire prompt needs to be a variable with the components form submission variable${formDataObj.companyName} being passed into that variable i.e. initial prompt per component:

prompt: `Write a persuasive and exciting company bio for: ${formDataObj.companyName}`,
const companyNamePrompt = prompt. 

Final prompt from the component sent to the reusable function is then:

const response = await openai.createCompletion("text-davinci-002", {
prompt: companyNamePrompt,

Final prompt to OpenAI send from the reusable function :

const response = await openai.createCompletion("text-davinci-002", {
  prompt: companyNamePrompt,
  temperature: 0.7,
  max_tokens: 256,
  top_p: 1,
  frequency_penalty: 0,
  presence_penalty: 0,
});

Display generators on page with loop.

Goal:

1. Create an array of generators
2. loop through array foreach item {
3. dynamically display on Generators.js page
4. dynamically pull in the latest 4 for the homepage

Feature: Text Editor with Completion

Think simple Google docs editor with minimal functionality (maybe markdown) with a button to feed GTP-3 context, and call the Completion mode API to finish the sentences.

AI completion:

• Title input field + Description Input / Summary field to feed big-picture context to the language model.
• Tone input field to present the language model with desired prose, e.g., Stephen King, Martin Luther King Jr., {insert other author or person here}...
• Creativity temperature slider* Buttons might be better for UX if 2-3 sweet spots could be found.
• Buttons for Length of completion (short, medium, long lengths. )
• UX Natural writing use of H1-H6 (headers could likely serve as the section piece of context to get a more accurate response e.g. Title > Description > Header = response within the context of header)

Research needed:

• Determined the sweet spot for contextual field vs. contextual paragraphs within the editor with presence and frequency penalties
• Play with the length of completion response from API and define 2-3 sweet spots maybe measured by sentence length
• Check payload sent from Jarvis, Closer's copy. If it's not a variable from the backend, it may give useful data for conceptualization
• Test various flows. UX should be linear e.g: Open page where the user is immediately prompted to give context with a title and description which serves as an overview --> ask the user for tone/creativity vs strict --> start with a blank page or have the option to create a boilerplate template, e.g. get AI to write blog outline for {topic with x, y, z).

Other notes:

• Probably work a refactor the API to use variables for the API completion request body vs static values before this, since both the mini-apps and this editor will use the same API call. May be worth exploring Slider Component that could be implemented within both types of completion apps.

Feature Request: Add Light and Dark Mode Theme Support

Many users have different preferences when it comes to the appearance of applications. Some find it easier on their eyes to work with a darker theme, while others prefer lighter themes. That said, let's implement a light and dark mode theme option within the application, allowing users to toggle between the two modes according to their preference. This feature should include:

1. A toggle button in navigation menu to switch between light and dark mode.
2. Consider, an option to automatically switch the theme based on the user's device settings, if available.
3. Proper contrast and color adjustments for both themes, ensuring that text and UI elements are easily readable and visually appealing.

Describe alternatives you've considered

An alternative solution would be to allow users to fully customize the application's color scheme, but this means it'll be more complicated to implement and maintain. Providing a light and dark mode option should be sufficient for most users' needs.

Brainstorm Generator response should display as list

Since the AI responds with either a - for unordered lists or a number for ordered lists, HTML removes the \n, and the list is just a paragraph without line breaks.

Response from API in console:

1. How to plan the perfect vacation 
2. The best travel destinations for your budget 
3. Tips for packing light and efficiently 
4. How to make the most of your travel insurance 
5. The best ways to avoid jet lag 
6. The top 10 must-see sights in (insert city/country) 
7. A guide to (insert city/country)’s street food scene 
8. The best places to stay in (insert city/country) on a budget 
9. An insider’s guide to the best shopping in (insert city/country) 
10. How to make the most of 48 hours in (insert city/country

What it looks like on the page:

1. How to plan the perfect vacation 2. The best travel destinations for your budget 3. Tips for packing light and efficiently 4. How to make the most of your travel insurance 5. The best ways to avoid jet lag 6. The top 10 must-see sights in (insert city/country) 
7. A guide to (insert city/country)’s street food scene 8. The best places to stay in (insert city/country) on a budget 9. An insider’s guide to the best shopping in (insert city/country) 10. How to make the most of 48 hours in (insert city/country

Refactor: GeneratorComponent to use useReducer for state management

Description: Currently, the GeneratorComponent uses multiple useState hooks for managing its state. TIL you learned about useReducer, so this issue proposes refactoring the component to use useReducer instead, in order to simplify and better organize the state management.

Advantages of using useReducer:

• Provides a centralized place for handling state updates, making the component easier to maintain and understand.
• Makes it easier to handle more complex state logic if needed in the future.
• Improves readability by separating state management from rendering and interaction logic.

Proposed changes:

1. Replace multiple useState hooks with a single useReducer hook.
2. Define an initialState object and a reducer function to handle state updates.
3. Update the onFormSubmit function to dispatch appropriate actions instead of directly updating the state.

Feature: Implement Feature to Utilize OpenAI Chat API in Addition to Specific Content Generators

This issue is a feature request for implementing the OpenAI Chat API in the application, leveraging the capabilities of GPT-3.5-turbo and GPT-4 models. The aim is to enable users to perform a diverse range of tasks using natural language inputs, including but not limited to:

• Generating creative writing prompts or story ideas
• Assisting in brainstorming and problem-solving
• Curating personalized reading lists or content recommendations
• Composing music or lyrics
• Developing marketing materials and ad copy
• Guiding users through meditation or mindfulness exercises
• Offering support for learning new languages or skills
• Automating social media content creation and scheduling
• And more

The implementation should allow:

• both single-turn tasks and multi-turn conversations with the chat-based language models.
• Users should be able to interact with the models using an intuitive interface and receive generated outputs based on their inputs.
• Follow the OpenAI guide on making API calls for chat-based language models and incorporate best practices for obtaining good results.
• Additionally, the feature should be flexible enough to adapt to future advancements in the OpenAI Chat API and underlying models.

Other considerations:

• Consider creating a new and separate application for this Chat instance. TBD.

Refactor: Restructure and Rename Directories and Components

Overview

As the codebase has evolved over time, it has undergone several major overhauls and refactors. Due to these changes, the current structure and naming of directories and components no longer accurately reflect the functionality of the code. This issue aims to address the need for better organization and more intuitive naming conventions.

Goals

• Restructure and reorganize the directory hierarchy to improve code maintainability and readability.
• Rename components and directories to reflect their purpose and functionality better.
• Update import paths and references to accommodate the new structure and naming conventions. (VSC will do this automatically and watch for the prompts)
• Ensure that all tests continue to pass after the refactoring process.

Proposed Changes

• Group related components and functionalities into cohesive modules, keeping new features in mind.
• Use clear, descriptive, and consistent naming conventions for directories and components.
• Separate components into folders based on their type (e.g., containers, presentational components, utility functions, etc.).
• Update any relevant documentation to reflect the new organization and naming.

Task Breakdown

• Research established conventions and best practices in similar projects or industry standards and learn from their organization and naming methodologies.
• Review the current codebase and identify components and directories that need to be restructured or renamed.
• Plan and design a new directory hierarchy that is more logical, maintainable, and in line with researched conventions.
• Rename and reorganize components and directories according to the new design.
• Update import paths and references throughout the codebase.
• Test and ensure that the application still works as expected.
• Review and update any affected documentation.

Securely store API key and pull in via variable

Summary:

Currently while testing the build the API Key is pasted into the .js files for each content generator, which is fine for local testing, but obviously not for deploying on Heroku for live use.

How to fix?

Needs research, but possible solution is here:
https://create-react-app.dev/docs/adding-custom-environment-variables/

Feature: User Generated AI Generators

Overview:

To increase the versatility and personalization of the application, a new feature should be introduced that allows users to create their own AI Text Generators. Users will fill out a form with the necessary information, which will then be added to the GeneratorList array of objects. The user-generated generators will be displayed alongside the existing generators, and their data will be passed through routes to the GeneratorComponent.

Goals:

1. Implement a user interface that allows users to create their own AI Text Generators by submitting form data.
2. Update the GeneratorList array of objects to include user-generated generators. (e.g, public list or user private lists)
3. Display user-generated generators in the list of available generators.
4. Pass the data from user-generated generators through routes to the GeneratorComponent.

Refactor: Create Reusable Function for API call

Assign form fields to variables that'll pass through into the function for each call to API. The call requires:

 openai.createCompletion("text-davinci-002", {
            prompt: `${formDataObj.examleVFormField}`,
            temperature: 0.85,
            max_tokens: 200,
            top_p: 1,
            frequency_penalty: 0,
            presence_penalty: 0,
        })

Set defaults on call and a condition that determine if a custom value is being passed through, else default values.

Possible solution:
https://reactjs.org/docs/hooks-rules.html
https://reactjs.org/docs/hooks-custom.html
Example: 
https://www.freecodecamp.org/news/how-to-create-react-hooks/

Feature: User Dashboard

Authentication:

https://frontegg.com/ (needs more research, but looks like it'll do the job for authentication and usermanagement)

Main Features:

• favorite apps (star or heart/separate view for favs)
• saved snippets (star or heart/collect snippets)

Would be nice:

• option to create own mini-apps e.g. UI to create form labels, input examples, and place variables in prompts as needed. (Explore object constructor for this)

Fix TL;DR generator link in GeneratorList object

Issue

Currently, the TL;DR object in data/GeneratorList has the link li-job-description, but the correct link is the route path="/tldr". This is causing a blank page when navigating to Generators and clicking on the TL;DR generator.

Steps to Reproduce

1. Navigate to the Generators page
2. Click on the TL;DR generator

Expected Behavior

The TL;DR generator should load properly when clicked, navigating to the correct route.

Implement a Catch Block for OpenAI API Call

It was brought to my attention that the application is making API calls to the OpenAI API, but doesn't have a catch block in place to handle errors that may occur during the API call inside the GeneratorComponent. This can result in the application crashing or displaying incomplete information to the user.

To address this issue, I'll implement a catch block for the OpenAI API call, which will handle any errors that occur during the API call and prevent the application from crashing or displaying incomplete information to the user.

The main goals of this implementation are to:

• Improve the robustness and reliability of the application.
• Ensure that errors during the API call are handled properly.
• Improve the user experience by preventing crashes and incomplete information.

Refactor: Migrate from Class Components to Functional Components

Currently, the codebase is primarily built with class components, which can lead to performance issues and make it harder to reason about state management. Therefore, I want to refactor our codebase to migrate from class components to functional components using hooks. This will not only improve the overall performance and maintainability of our code but also enable us to take advantage of the latest React features.

The main goals of this refactor are to:

• Replace class components with functional components where possible.
• Going forward, use hooks like useState, useEffect, useContext, and useReducer to manage state instead of using lifecycle methods.
• Improve the performance of the application by reducing the amount of memory used by removing unnecessary class instances.
• Increase the readability and maintainability of the codebase by simplifying code structure and reducing the amount of boilerplate code.

To achieve these goals, I will need to perform the following tasks:

• Identify all class components in the codebase.
• Migrate to functional components and rewrite state management using hooks.
• Test the updated code to ensure that the application still works as expected.

This will result in a more efficient and maintainable codebase! Godspeed!

Redesign/Refactor: Simplify data passed into GeneratorComponent.js from GeneratorList.js

Currently, the data being passed from the GeneratorList.js to the GeneratorComponent.js is complex and contains a large amount of unnecessary information. This can lead to performance issues and make it harder to reason about state management. Therefore, I'll want to analyze the data being passed and simplify it, which will not only improve the overall performance and maintainability of our code but also enable us to take advantage of the latest React features.

The main goals of this analysis are to:

• Analyze the array of objects in GeneratorList.js to identify unnecessary data.
• Simplify the data being passed from GeneratorList.js to GeneratorComponent.js without compromising the functionality.
• Potentially redesign the user interface to accommodate the new data flow.

To achieve these goals, I'll need to perform the following tasks:

• First, consider UX and the data the user should see to make their experience exceptional.
• Analyze the properties of the object key-value pairs to see if any are not currently being passed as props to the GeneratorComponent.
• Analyze the array of objects in GeneratorList.js to identify data that is not being used or is redundant.
• Identify data that can be moved from GeneratorList.js to GeneratorComponent.js to simplify the data flow.
• Create a new design flow that accommodates the changes made to the data flow.
• Create modular issues to pick tasks of one by one and complete the entire project. (leave a comment below)
• Complete all tasks and merge all Pull requests testing to make sure the app still works as expected.
• Close this issue and give yourself a pat on the back.

Keep in mind that the UX should come first; if the data needs to be contextual to make the UX better, don't delete it just because it'll save space, consider ways to make the same data more modular.

Feature: Generator to Create GitHub Issue and Pull Request descriptions

Overview:

Implement a new feature in the application that generates GitHub Pull Request and Issue Descriptions based on the title provided by the user. This AI-powered text generator should create meaningful and relevant descriptions, making it easier for users to draft GitHub Pull Requests and Issues quickly.

Goals:

• Develop an AI Text Generator capable of creating GitHub Pull Request and Issue Descriptions from a given title.
• The generator needs to be added to the list of data and passed through routes to the generator component and lists.
• Ensure the generated descriptions are coherent, relevant, and follow standard formatting conventions.

Refactor: Home.js's Generator List to Dynamically Display Data

While working on the Refactor Home Component From Class to Functional and Run Linting #25 pull request, I noticed that the Home page's generator list is currently statically displayed and has not been updated since the creation of GeneratorContainer.js and Generators.js.

Therefore, I want to refactor the generator list to display data dynamically, improving the codebase's overall performance and maintainability.

The main goals of this refactor are to:

• Dynamically display the generator list using data from the codebase.
• Improve the developer experience by allowing the list to be updated easily.
• Take advantage of the latest React features.

This still needs design and thought, but maybe create a "featured" option to generate only four components dynamically or randomly display four widgets out of the data?

Refactor: Dynamically Generate React Routes and Navigation Items from Data in GeneratorList.js

The current implementation of the application's routes and navigation items are hardcoded, which can result in performance issues and make it harder to add new routes and navigation items. To address these issues, we would like to refactor the codebase to dynamically generate the routes and navigation items based on data in GeneratorList.js.

The main goals of this refactor are to:

• Improve the maintainability of the codebase by reducing repetition.
• Simplify the addition of new routes and navigation items by automating it when data is added to the GeneratorList.js.

To achieve these goals, we will need to perform the following tasks:

• Update the GeneratorList.js file to include data for the routes and navigation items.
• Refactor the code to dynamically generate the routes and navigation items based on data in GeneratorList.js.
• Test the updated code to ensure that the application still works as expected.

Add loading icon while waiting for API response

Issue:

Currently, there's no way to see if the page is working after clicking the form Submit button. Since openAI's API takes a while to respond, a visual indication that it's working and will eventually load the response from the API is needed.

Video of what happens now:

Screen.Recording.2022-04-14.at.10.39.02.AM.mov

Ideas:

• Simple circular loading icon
• Cycle through text like "The AI is thinking" "The AI is getting creative" etc.

Considering Updating to GPT-4 from GPT-3

Just received the invitation to access the new GPT-4 models in Beta via the OpenAI API, so it's now testing time. Specifically, explore gpt-4, gpt-4-0314, and gpt-4-32k since it seems that the gpt-4-32k-0314 will not receive updates, and support will end on June 14th, 2023.

From briefly skimming the details, it seems GPT-4 offers improvements over the GPT-3.5 models, with greater accuracy, broader general knowledge, and advanced reasoning capabilities. The latest GPT-4 models support a maximum of 8,192 tokens, and their training data is up to September 2021.

That said, the implementation from GPT-3 to GPT-4 will mean improved performance in complex reasoning tasks. GPT-4 is optimized for chat but works well for traditional completions tasks.

The transition will likely involve changes to the API calls and possibly some adjustments to the application logic.
To proceed with the update the following will need to happen:

1. Assess the potential benefits of GPT-4 for the app's current specific use case(s), aside from the Chat Integration.
2. Review the API documentation and determine what adjustments to the API calls need to be complete to utilize the GPT-4 models.
3. Test the updated implementation and compare the results against the current GPT-3-based system for the existing generator components (may need to try different prompt variations in the existing generator data).
4. Monitor usage and cost implications, as GPT-4 models may have different pricing compared to GPT-3.5 models. (I've never used over $0.67 a month, but still lol)
5. Update and create any relevant documentation.
6. Once the transition is complete, evaluate the potential to fine-tune the GPT-4 models for further customization and optimization for the app's existing use case(s).

Feature: Blog Post Outline Generator

The goal of this feature is to make it easier for users to generate blog post outlines and get started on writing articles.

The feature would work as follows:

1. The user is asked to provide a niche for the blog post they want to write.
2. The application generates a list of 10 blog post title ideas based on the niche provided.
3. The user clicks on the title they like from the list and is presented with 5 blog intro paragraphs.
4. The user clicks on the intro paragraph they like and is presented with 3 blog post outlines.
5. Each blog post outline will have a copy button beside it, allowing the user to copy and paste the outline into their text editor.

This linear flow will improve the user experience and make it easier for users to generate quality content for their blogs.

To achieve this feature, we will need to perform the following tasks:

• Design the user interface for the Blog Post Outline Generator.
• Implement the logic to generate blog post titles, intro paragraphs, and outlines based on the niche provided.
• Implement the copy button functionality for each blog post outline.
• Test the feature to ensure that it works as expected.

SEO Blog Intro is missing form for key words.

Since refactor #58 the SEO Blog Intro generator is missing its second form.

It should look like this:

Instead it looks like this:

Add sliders to customize OpenAI results

Currently each component is optimized to get the best results from the autoregressive language model based on experience. The prompt and temperature being the most important, length if the app is dependent(think SEO meta description). Example:

openai.createCompletion("text-davinci-002", {
            prompt: `Write an uplifting and positive Blog intro paragraph for the blog title ${formDataObj.blogTitle} and include the keywords: ${formDataObj.context}`,
            temperature: 0.85,
            max_tokens: 200,
            top_p: 1,
            frequency_penalty: 0,
            presence_penalty: 0,
        })

On existing components experiment with an option to click "more options" or "advanced options" and allow users to change:

• temperature: ideal range for most would be .65-.80 (convert that from 0-100 to make it natural in terms of ux).
• max-tokens: set a variable between 20-500 max? (will need to test to find range that produced quality output)
• frequency and penalty need exploration (higher presence would be good for idea generation, but need to test ranges to find finite examples)

Feature: Create Copy Button Component for AI-generated Responses

The application generates AI responses that users may want to copy and use elsewhere. However, currently, there is no way for users to copy the generated text easily without highlighting, right-clicking, and coping. A new copy button would be a tiny update with a large impact.

The main goals of this feature are to:

• Enable users to copy AI-generated responses easily.
• Improve the user experience by providing a convenient and intuitive way to copy text.
• Ensure the copy button component is reusable throughout the app and future feature implementations.

To achieve these goals, we will need to perform the following tasks:

• Create a copy button component that can be reused throughout the app.
• Implement the copy functionality for the generated text.
• Test the updated code to ensure that the application still works as expected.

Update Card Header Title to be Grammatically Correct and More Informative

Problem

Currently, the card header title displays "Here's your response" when the response from the AI is received, which may not be grammatically correct in all Generator scenarios.

Proposed Solution

To improve the card header title's grammar and provide more informative context, let's change it to display "AI thought of ${title}" or another suitable alternative. This will make the header more descriptive and meaningful, enhancing the user experience. Some possible examples include:

1. "AI generated ${title}: "
2. "AI's suggestion for ${title}"
3. "AI's ${title} output:"

Implementation Steps

1. Update the card header title logic to include the new title format, replacing the current static title with the dynamic one based on the AI-generated content.
2. Test the new header title in various scenarios to ensure that it is grammatically correct and provides informative context.
3. Review the title options with the team to decide on the most appropriate and engaging format.

Refactor: Generators by Passing Data to Components via Routes

Currently the BlogIdeas.js, BlogIntro.js, CompanyBio.js, LinkedInJobDescription.js, ProductDescription.js, and Tldr.js generators have the same functionality and can be refactored by passing data to a component via React Routes.

Example of data:

const generatorList = [
    {
        id: 1,
        title: 'Blog Post Ideas',
        description: 'Stuck in the idea phase? Generate ideas',
        link: 'blogideas',
        response1: 'List of blog post ideas generated by the AI will show here.',
        prompt: 'Brainstorm an unordered list of blog post ideas for ',
        heading: 'Thinking of blog post ideas...',
        response2: 'Brainstorming blog posts ideas about ',
        response3: 'Blog post ideas for: ',
        h1: 'Blog Post Ideas',
        description: 'Enter your your content topic to generate a list of blog post ideas.',
        formLabel: 'Topic:',
        formName: 'topic',
        placeholder: 'e.g. Finance'
    },

You can likely simplify it further by combining the title and h1, and passing the title into response1, response2, and response. Depending on the various generators this may not be possible, but it's worth exploring.

Feature: Add Text Typing Animation in GeneratorComponent for OpenAI's API-Generated Text Response

Summary:

Enhance the user experience in the application by adding a text typing animation to the GeneratorComponent for the text responses generated using OpenAI's API. This will create a more engaging and dynamic interaction for users as they wait for the generated text to appear.

Background:

Currently, when users make a request to OpenAI's API through the GeneratorComponent, the generated text response is displayed instantly. While this provides the necessary functionality, it lacks the visual appeal and engagement that could be achieved with a text-typing animation.

Proposed Solution:

To improve the user experience, we propose the following enhancements:

1. Implement a text typing animation for the GeneratorComponent that displays the generated text in a typing-like manner, one character at a time.
2. Test to make sure the speed is fast enough and not annoying while waiting, but slow enough to look natural.
3. Optionally, provide a toggle for users to enable/disable the typing animation if they prefer the original instant text display.

Refactor: Generalize Forms and Functions

The goal is to generalize and abstract the form and reusable function and create each component easily without having to copy/paste.

Possible new structure:

components
├── miniapps*
│   ├── BlogIntro.js
│   ├── CompanyBio.js
│   ├── Home.js
│   ├── LinkedInJobDescription.js
│   └── ProductDescription.js
├── general
│   ├── Navigation.js
│   ├── Form.js
│   └── CallAPI.js

---

Considerations:

• there will always be at least one form input field
• there can be >1 amount(s) of forms (determined by the individual components )
• fix your frakking nesting it's horrible.
• the form submission data needs to be stored in a variable that will pass though the reusable function:
  • Form onSubmit={this.onFormSubmit} calls onFormSubmit = e => but we need to change that function to store the place holder text into a new var that passes through the promp. e.g. prompt: "Write a persuasive and exciting product description for: ${formDataObj.productName}",** needs to be prompt: newVarPrompt

---

Sidenotes:

• Might make sense to keep the form and resuable function within the same file just abstract the mini apps into their own components to pass information through the form, at least for now, given that we're just using general API calls. Once we build a UI for the completion model it will make sense to abstact and the API call further into a reuable function t. We'll see.
• Each component is still class ProductDescription extends Component { and pulled into navigation.js via router.

---

Form examples:

Currently one has two inputs and the others have one input.

####One input:

<Form onSubmit={this.onFormSubmit}>
	<Form.Group className="mb-3" controlId="textArea">
	<Form.Label>Job Title:</Form.Label>
		<Form.Control as="textarea" name="jobTitle" placeholder="e.g.Website Technical Support Specialist" />
	</Form.Group>
<Button variant="primary" size="md" type="submit">Submit</Button>
</Form>

####Two inputs:

<Form onSubmit={this.onFormSubmit}>

<Form.Group className="mb-3" controlId="textArea">
	<Form.Label>Blog post title: </Form.Label>
	<Form.Control as="textarea" name="blogTitle" placeholder="e.g. How to Make a Commit with Git" />
</Form.Group>

<Form.Group className="mb-3" controlId="textArea">
	<Form.Label>SEO keywords: </Form.Label>
	<Form.Control as="textarea" name="context" placeholder="e.g. Git, CLI, commit message" />
</Form.Group>

<Button variant="primary" size="md" type="submit">
Submit
</Button>

</Form>

Prompt:

prompt: `Write an uplifting and positive Blog intro paragraph for the blog title ${formDataObj.blogTitle} and include the keywords: ${formDataObj.context}`,

Form variable examples:

<Form.Label>Product Name & Purpose:</Form.Label>

name="productName"

placeholder="e.g. ScoobySnacks will make your dog chill out"

Related:

#3 #4

Refactor: Destructure Props

Once Refactor: Migrate from Class Components to Functional Components #22 is complete, we'll want to refactor our functional components to destructure props to simplify the codebase and reduce repetition.

The main goals of this refactor are to:

• Improve the readability and maintainability of our codebase.
• Simplify the passing of props to components.
• Reduce the amount of repetition in our codebase.
• Take advantage of destructuring to improve performance.

To achieve these goals, we will need to perform the following tasks:

• Identify components that still need to be destructured.
• Refactor these components to destructure props.
• Test the updated code to ensure that the application still works as expected.