ash1eygrace / ai-content Goto Github PK
View Code? Open in Web Editor NEWA React app that uses OpenAI's Generative Pre-trained Transformer 3 (GPT-3) autoregressive deep learning language model to generate human-like text.
A React app that uses OpenAI's Generative Pre-trained Transformer 3 (GPT-3) autoregressive deep learning language model to generate human-like text.
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:
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:
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
Since refactor #58 the SEO Blog Intro generator is missing its second form.
Instead it looks like this:
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,
});
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:
Implementation Steps
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.
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
.
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.
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:
To achieve these goals, we will need to perform the following tasks:
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/
Goal:
foreach item {
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:
The implementation should allow:
Other considerations:
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:
To achieve these goals, we will need to perform the following tasks:
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:
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.
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:
To achieve these goals, I will need to perform the following tasks:
This will result in a more efficient and maintainable codebase! Godspeed!
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:
To achieve these goals, I'll need to perform the following tasks:
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.
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:
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?
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:
To achieve these goals, we will need to perform the following tasks:
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.
The TL;DR generator should load properly when clicked, navigating to the correct route.
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:
Authentication:
https://frontegg.com/ (needs more research, but looks like it'll do the job for authentication and usermanagement)
Main Features:
Would be nice:
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
:
Proposed changes:
useState
hooks with a single useReducer
hook.initialState
object and a reducer
function to handle state updates.onFormSubmit
function to dispatch appropriate actions instead of directly updating the state.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.
Needs research, but possible solution is here:
https://create-react-app.dev/docs/adding-custom-environment-variables/
The goal is to generalize and abstract the form and reusable function and create each component easily without having to copy/paste.
components
├── miniapps*
│ ├── BlogIntro.js
│ ├── CompanyBio.js
│ ├── Home.js
│ ├── LinkedInJobDescription.js
│ └── ProductDescription.js
├── general
│ ├── Navigation.js
│ ├── Form.js
│ └── CallAPI.js
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
class ProductDescription extends Component {
and pulled into navigation.js via router.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.Label>Product Name & Purpose:</Form.Label>
name="productName"
placeholder="e.g. ScoobySnacks will make your dog chill out"
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:
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.
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:
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:
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.
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:
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.
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.
To improve the user experience, we propose the following enhancements:
GeneratorComponent
that displays the generated text in a typing-like manner, one character at a time.A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.