Open AI Chatbot

Table of Contents

• Description
  • Client
  • Server
• Tech Stack
• Features
• Open AI DALL·E 2 API
• Database Structure
  • MongoDB
  • Cloudinary
• Format Configuration
• Folder Structure
• Environment Variables

Description

In summary, this project is a full-stack web application that combines the Vite framework, Tailwind CSS, Prettier, ExpressJS, Cloudinary, and MongoDB to deliver a dynamic and efficient user experience.The output of this project is a real-time, interactive application that allows users to generate unique images and art based on their descriptions in natural language. The generated content is then stored and managed using Cloudinary, making it accessible and shareable across the web.

Client

The "client" folder is a front-end application built using the Vite framework. It utilizes the Tailwind CSS framework for styling and the Prettier library for code formatting to deliver a visually appealing and well-structured user interface. It also support TypeScript, and its deployed using Vercel

Server

The "server" folder is a back-end component powered by ExpressJS. It uses Cloudinary to store and manage images, and is connected to a MongoDB database for persistent data storage. It also utilizes the OpenAI's DALL·E 2 AI system, which generates realistic images and art from a description in natural language and its deployed using Render

Tech Stack

• React
• Vite
• TypeScript
• MongoDB
• Cloudinary
• Prettier
• ExpressJS
• Vercel
• Render

Features (wait until GIFs load)

• View list of images

• Download images.

• Title and User included in each image.

• Create and post the image

• Random prompt to generate.

• View generated image before posting.

Rapid API

CoinRanking

• cryptoApi.js

When a POST request is received at the root URL ("/"), the function defined in the code is executed. It starts by extracting the prompt from the request body and using it as a parameter in a call to the createImage method of the OpenAIApi instance. This method generates an image based on the prompt and returns the result in base64 encoded JSON format.

The code then extracts the image data from the response and packages it in a JSON object with a property named photo. Finally, the JSON object is sent back to the client with a status code of 200 (OK), indicating that the request was successful.

In the event of an error, the error message is logged to the console and sent back to the client with a status code of 500 (Internal Server Error), indicating that an internal server error occurred.

import { Configuration, OpenAIApi } from "openai";

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

router.route("/").post(async (req, res) => {
  try {
    const { prompt } = req.body;
    const aiResponse = await openai.createImage({
      prompt,
      n: 1,
      size: "256x256",
      response_format: "b64_json",
    });

    const image = aiResponse.data.data[0].b64_json;

    res.status(200).json({ photo: image });
  } catch (error) {
    console.log(error);
    res.status(500).send(error?.response.data.error.message);
  }
});

Bing News Search

• cryptoNewsApi.js

Format Configuration

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true
}

Folder Structure

.
|-- CrytoExchangeMockData.json
|-- README.md
|-- package-lock.json
|-- package.json
|-- public
|   |-- cryptoCurrency.png    
|   |-- demoImage.webp        
|   |-- favicon.ico
|   |-- index.html
|   |-- logo192.png
|   `-- manifest.json
`-- src
    |-- App.css
    |-- App.js 
    |-- app
    |   `-- store.js
    |-- components
    |   |-- CryptoCurrencies.jsx
    |   |-- CryptoDetails.jsx
    |   |-- Exchanges.jsx
    |   |-- Homepage.jsx
    |   |-- LineChart.jsx
    |   |-- Loader.jsx
    |   |-- Navbar.jsx
    |   |-- News.jsx
    |   `-- index.js
    |-- images
    |   `-- cryptoCurrency.png
    |-- index.js
    |-- logo.svg
    `-- services
        |-- cryptoApi.js
        `-- cryptoNewsApi.js

Environment Variables

• Generated key availiable in CoinRanking under section "Endpoint".

REACT_APP_RAPIDAPI_KEY = 
REACT_APP_CRYPTO_RAPIDAPI_HOST =
REACT_APP_CRYPTO_API_URL = 

• Generated key availiable in Bing News Search under section "Endpoint".

REACT_APP_NEWS_API_URL = '
REACT_APP_NEWS_RAPIDAPI_HOST =