Guess It

Python HTML/CSS JavaScript Tensorflow Resnet50 Flask Personal

A micro web project using the flask web framework for python. You upload an image and get a list of 10 guesses about what the picture contains.

Source

This was a micro project I did with my friend Warren with the intent of understanding the basics of the how the frontend and the backend interracts.

Introduction Link to this heading

As mentioned above, this was intended as a learning project, with the frontend being written by Warren and the backend by me. The project was a simple web app, where you upload an image and get a list of 10 guesses about what the picture contains.

The project contains both the client and the server components, and can be run locally. You can host the server side with wiht appropriate front end. This client for this project can’t be hosted due to some minor issue and thus needs to be loded locally, but dragging and dropping in the browser or using the file path to it.

Tech Stack Link to this heading

  • Python - Python is an interpreted, high-level and general-purpose programming language, it is the language I used for the used for the backend of the project.

  • HTML, CSS and JavaScript - The frontend of the project was written using HTML, CSS and JavaScript.

  • Flask - The framework I used for the backend. It is a microweb framework, and is really easy to use.

  • Tensorflow - Tensorflow is an end-to-end open source platform for machine learning. I used it to import the ResNet50 model, which is used to make the predictions.

  • ResNet50 - The model used for prediction.

Run Link to this heading

Client Link to this heading

To run the client you don’t need to require any installation. Just open the index.html file in your browser.

Server Link to this heading

The server is a flask app that uses a tensorflow model to make predictions.

To install the server, you need to install the requirements in a virtual environment.

It is suggested that you create a virtual environment using the python venv module.

bash
1python3 -m venv venv

Then activate the virtual environment

bash
1source venv/bin/activate

Then install the requirements from the ‘requirements.txt’ file.

bash
1pip install -r requirements.txt

To start the server, navigate to the server directory and use the flask run command.

bash
1cd server
2flask run

The server will start on port 5000 by default. Ensure that no other process is using that port.

Resources Link to this heading