j8ahmed/ai-keyword-extractor

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

---

Setup

Install Chakra UI dependencies.

npm i \
@chakra-ui/react \
@emotion/react \
@emotion/styled \
framer-motion \

# Output:

Prompt:

Extract keywords from this text. Make the first letter of each word uppercase and separate with commas

Sample Text:

This is a 37+ hour in-depth course that will take you from the absolute beginning of JavaScript, learning about data types, functions and loops to learning DOM manipulation, asynchronous JS with promises, async/await and much more. You will even learn how to write unit tests for algorithms. We go into how JavaScript works under the hood including execution context, the call stack, event loop, etc. We learn about Webpack tooling and how to create a modern development environment. At the end, we build a Node.js/Express API with a custom Webpack frontend.

Output Keywords From Gemini AI:

JavaScript, DOM, Promises, Async/Await, Algorithms, Execution, Context, Call, Stack, Event, Loop, Webpack, Node.js, Express, API

Using Google's Gemini AI instead of OpenAI's ChatGPT

Here is a sample request using curl. I will translate this into my react code.

#!/bin/bash

API_KEY="YOUR_API_KEY"

curl \
  -X POST https://generativelanguage.googleapis.com/v1beta/models/gemini-1.0-pro:generateContent?key=${API_KEY} \
  -H 'Content-Type: application/json' \
  -d @<(echo '{
  "contents": [
    {
      "parts": [
        {
          "text": "\n\nExtract keywords from this text. Make the first letter of each word uppercase and separate with commas\n\nThis is a 37+ hour in-depth course that will take you from the absolute beginning of JavaScript, learning about data types, functions and loops to learning DOM manipulation, asynchronous JS with promises, async/await and much more. You will even learn how to write unit tests for algorithms. We go into how JavaScript works under the hood including execution context, the call stack, event loop, etc. We learn about Webpack tooling and how to create a modern development environment. At the end, we build a Node.js/Express API with a custom Webpack frontend.\n\n\n\n"
        }
      ]
    }
  ],
  "generationConfig": {
    "temperature": 0.5,
    "topK": 1,
    "topP": 1,
    "maxOutputTokens": 2048,
    "stopSequences": []
  },
  "safetySettings": [
    {
      "category": "HARM_CATEGORY_HARASSMENT",
      "threshold": "BLOCK_MEDIUM_AND_ABOVE"
    },
    {
      "category": "HARM_CATEGORY_HATE_SPEECH",
      "threshold": "BLOCK_MEDIUM_AND_ABOVE"
    },
    {
      "category": "HARM_CATEGORY_SEXUALLY_EXPLICIT",
      "threshold": "BLOCK_MEDIUM_AND_ABOVE"
    },
    {
      "category": "HARM_CATEGORY_DANGEROUS_CONTENT",
      "threshold": "BLOCK_MEDIUM_AND_ABOVE"
    }
  ]
}')

Random

David's Teas:

Smores tea Organic earl grey vanilla grey

Fallout 2

• Fallout 2 Restoration Project, updated

Bad courses

• Master the Coding Interview: Big Tech (FAANG) Interviews
• Zero to Mastery - Liz says it is unethical - maybe check it out?

---

Meta Data

Started On: 2024-04-21

References:

• Repo - GitHub

• Original Project Repo - GitHub

• Build a Keyword Extractor: React + OpenAI API + Chakra UI - YouTube

• Build a Keyword Extractor: React + OpenAI API + Chakra UI - Traversy Media

• OpenAI Dev

• Google Gemini AI API

• Google AI Studio quickstart

• Google AI Studio API Keys

• Code Buddy Club Schedule - Toronto JS

• Toronto JS Give a talk - application form

• Color Mode - ChakraUI Docs

• useColorModeValue Hook - Color Mode - ChakraUI Docs

• Default Theme - ChakraUI Docs

• Customize Theme - ChakraUI Docs

• OKLCH Color Picker & Converter

• Get Color.js - Color Library

• HEX to HSL convert javascript [duplicate] - StackOverflow

• Smart Swatch - Small app for building theme colors

• Themera - Chakra UI color scheme builder app

• Palette Generator + API for Tailwind CSS