Skip to content

An Image captioning web application combines the power of React.js for front-end, Flask and Node.js for back-end, utilizing the MERN stack. Users can upload images and instantly receive automatic captions. Authenticated users have access to extra features like translating captions and text-to-speech functionality.

Notifications You must be signed in to change notification settings

bhushan2311/image_caption_generator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

image_caption_generator

An Image captioning web application combines the power of React.js for front-end, Flask and Node.js for back-end, utilizing the MERN stack. Users can upload images and instantly receive automatic captions. Authenticated users have access to extra features like translating captions and text-to-speech functionality.

Home Page

Screenshot (118)

Upload page (Guest)

UI for the users who aren't Logged-in

Screenshot (126)

Upload page (Logged In)

UI for the users who are Logged-in

Screenshot (121)

Result Page

The users can get the generated captions on this page. To get the access to the features of text-to-speech and caption translation they need to get authenticate by logging in. The link is provided below the generated caption which get navigated to the login page.

Screenshot (142)

.

After successfully Logging in, the user can see the text-to-speech and translation feature as shown in the image below. For text-to-speech, react-speech-kit library is used. For translation, Translation Api provided by RapidApi has been used. User can chooses its preferred language from the dropdown to translate caption.

Screenshot (143)

Screenshot (144)

Screenshot (146)

Screenshot (145)

Login Page

Screenshot (119)

Signup page

Screenshot (120)

How to Run the Project

Follow these steps to run the project on your local machine:

  1. Frontend (React):

    • Open a terminal (Terminal-1).
    • Navigate to the 'frontend' directory using 'cd frontend/'.
    • Run the following command to start the React development server:
      npm install
      npm run start
  2. Backend (Flask):

    • Open another terminal (Terminal-2).
    • Navigate to the 'server' directory using 'cd server/'.
    • Run the following command to start the Flask server:
      python app.py
  3. MongoDB Setup (Optional):

    • If you want to use the login/signup, text-to-speech, and translation features, you'll need to set up MongoDB.
    • Open a third terminal (Terminal-3).
    • Navigate to the 'backend' directory using 'cd backend/'.
    • Start the Node.js server:
      node app.js
    • Open a fourth terminal (Terminal-4).
    • Start the MongoDB server:
      mongod
    • Open a fifth terminal (Terminal-5).
      mongo
  4. Access the Application:

About

An Image captioning web application combines the power of React.js for front-end, Flask and Node.js for back-end, utilizing the MERN stack. Users can upload images and instantly receive automatic captions. Authenticated users have access to extra features like translating captions and text-to-speech functionality.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published