Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/imvinojanv/ai-article-summarizer
React JS - Vite - Tailwind CSS - Redux - OpenAI's GPT4 - Rapid API - Browser History Storage - Copy to Clipboard
https://github.com/imvinojanv/ai-article-summarizer
ai article-summarizer openai-gpt4 rapidapi react-redux-tailwindcss
Last synced: 2 days ago
JSON representation
React JS - Vite - Tailwind CSS - Redux - OpenAI's GPT4 - Rapid API - Browser History Storage - Copy to Clipboard
- Host: GitHub
- URL: https://github.com/imvinojanv/ai-article-summarizer
- Owner: imvinojanv
- Created: 2023-06-30T03:49:46.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-07-03T06:09:49.000Z (over 1 year ago)
- Last Synced: 2023-11-20T06:28:36.941Z (11 months ago)
- Topics: ai, article-summarizer, openai-gpt4, rapidapi, react-redux-tailwindcss
- Language: JavaScript
- Homepage: https://sumrz-ai.vinojan.online/
- Size: 9.47 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SumrzAI - The AI Article Summarizer Application
## Steps that I have followed to develop this application
You can follow these steps to recreate the same application by yourself. It's only for the educational purposes.
- Initialize the React App with Vite
- Install @reduxjs/toolkit and react-redux
- Structure the project
- Added the assets folder and import them
- Intall tailwindcss, postcss, and autoprefixer
- Init the Tailwind CSS
- import custom fonts in tailwind.config.js and import font link in index.html
- Do the tailwind configuration in App.css
- Import all the css from GitHub
- set background and gradient on App.jsx
- Create components Demo and Hero
- Design the Hero section (Header, Heading, and Sub-heading)
- Design the Demo section (Input field)
- Initialize the article state with url: '', summary: ''
- Create the handleSubmit async function (Initialize)
- Add value, setArticle state on onChange in input field
- Import the Provider from react-redux and wrap the entire application within Provider
- Create 'store.js' file, import configureStore from @reduxjs/toolkit, and create reducer and middleware
- Create article.js file, import craeteApi and fetchBaseQuery from @reduxjs/toolkit/query/react
then export articleApi (createApi function)
- Import articleApi from article.js file in store.js file
- Add the reducerPath in the reducer
- Passing articleApi.middleware to middleware
- Import store into main.jsx and passing store to Provider
- Add endpoint to article.js
- Add baseQuery to article.js
- Go to the RapidAPI, find the Article Extractor and Summarizer Api and Subscribe the FREE plan for testing purpose
- select the summarize endpoint, If you wanna test it let's click 'Test endpoint'
- copy the entire options and go back to article.js and paste there
- We need the url, so copy that entire url all the way to the forward slash withour summarize and paste it into baseUrl in createApi
- We need header, so add prepareHeaders into baseQuery
- set header with 'X-RapidAPI-Key' and actual 'KEY' value && 'X-RapidAPI-Host' and 'article-extractor-and-summarizer.p.rapidapi.com'
- delete the 'options' section
- import the VITE_RAPID_API_ARTICLE_KEY to article.js and use the API key to prepareHeaders
- return headers into prepareHeaders
- set the endpoint, `/summarize?url=${params.articleUrl}&length=3`
- use the Redux toolkit's hooks using export the articleApi
- import the 'useLazyGetSummaryQuery' into Demo.jsx and call the function
- Update the 'handleSubmit' funtion with articleUrl and setArticle state
- Now the site is working fine and can summarize any websites
- Set all articles in to the allArticles state and pushing the new articles as well
- Store all articles in localstorage using useEffect function
- If any articles in local storage, then selAllArticles from localstorage
- update the new articles with JSON.stringify to localstorage in handleSubmit function
- Develop the part of Browser URL history,
Add the copy to clipborad function
- Display the summary of the article with fetching loader image and error message if the error might be occured.
- Deploy the application.
# Application Details
- **stack:** vite + react
- **tailwindcss:** v3.x
- **API:** OpenAI's GPT-4 through RapidAPI
- **Other Functionalities:** Browser History Storage & Copy to Clipborad
## Started
```bash
npm install
```
---
## Develop
```bash
npm run dev
```
---
## Build
```bash
npm run build
```
---
© 2023 SumrzAI, All rights reserved by Vinojan Abhimanyu.