Image Tag Recommendation Web App

System for recommending tags for images based on image content. Includes a React-based frontend, Flask API, and MongoDB database, contanierized with Docker. Class project for CSCI6502: Big Data at University of Colorado Boulder in Spring 2023 made in a team of 2.

GitHub

Goal

The goal of this system is to aid users of a database of images by providing contextual data to image entries. With machine learning based computer vision techniques, it is possible to classify the content of images and refine a model by retraining it with new data.

My contributions were primarilly to set up the tech stack (React, Flask, MongoDB, and Docker), implement the API-Database interaction for image uploading and querying, and add image upload and basic tag selection functionality to the React app.

Architecture

Architecture diagram of the tag recommendation system.

Proof of Concept

GitHub for proof of concept.

Home page menu for filtering by tag and adding new images.

Empty tag filter options field as there no images with tags in the database.

Using a image url to add an image to the database.

Tag selection page shown when adding a new image or editing an already existing image's tags. Shows loading dots while the backend is predicting image tags.

Tag selection page with menu to select from recommended image tags. Displays the top 5 tag predictions.

Home page with a single image in the database.

Multiple images in the database.

Filtering for images based on tags in the database.

Architecture diagram for the proof of concept.