Chatify

Introducing the Chatify – your new and interactive assistant for talking with your image. This web app is designed to make extracting text from images and answering questions about them as easy task.

Demo

Screenity.video.-.Jul.16.2024.mp4

Deployed LINK:(little bit slow, using free tier of render for deployment of server)

https://chatify-jade-eight.vercel.app/

Screenshots

Features

• Extract text from uploaded Image
• Ask Question from based on the uploaded images
• Get an answer from a GenAI (Gemini)

Tech Stack

Client: React,Vite, Typescript, TailwindCSS

Server: Node, Express, MongoDB, Cloudinary

Why Did I choose Cloudinary?

Needed to save the uploaded images , using server's disk storage is not optimal cause it'll increase the resources consumed my server system, So went for Cloudinary to save those images and get a url to save in mongoDB table.

Installation

clone the repo

git clone https://github.com/shayan-cyber/Chatify.git

Backend

cd server
npm i

make a .env file and add

PORT=3000
MONGO_URI="your_mongoDB_URL"
CLOUD_NAME="your_cloudinary_cloud_name"
CLOUDINARY_KEY="your_cloudinary_key"
CLOUDINARY_SECRET="your_cloudinary_secret"

Run the server

npm run start

Client

cd client
npm i

make a .env file and add

VITE_SERVER_URL=http://localhost:3000
VITE_GEMINI_API_KEY=""

Run the client

npm run dev

Client URL: http://localhost:5173/

Server URL: http://localhost:3000/

API Reference(server)

http://localhost:3000/

Upload image for image OCR

  POST /api/bot/upload

Parameter	Type	Description
image	file	required.
text	string	required.

Get history of OCR operations

  GET /api/bot/history