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.
UI for the users who aren't Logged-in
UI for the users who are Logged-in
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.
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.