image_caption_generator
image_caption_generator copied to clipboard
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 capt...
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
Upload page (Guest)
UI for the users who aren't Logged-in
Upload page (Logged In)
UI for the users who are Logged-in
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.
.
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.
Login Page
Signup page
How to Run the Project
Follow these steps to run the project on your local machine:
-
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
-
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
-
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
-
Access the Application:
- Open your web browser and go to http://localhost:3000.