Image Classification

This is an image classification app built using Django 4, Django REST Framework 3, Next.js 12, and Material UI 5. The app uses Inception-ResNet-v2 to classify images selected by the user.

Dark mode:

Light mode:

Table of Contents

• Prerequisites
• Installation
• Running the application
• Customizing the application
• Copyright and License

Prerequisites

Install the following prerequisites:

1. Python 3.7-3.10
   This project uses TensorFlow v2.9.1. For TensorFlow to work, you must install a correct version of Python on your machine. More information here.
2. Node.js
3. Visual Studio Code

Installation

Backend

1. Create a virtual environment

From the root directory, run:

cd backend

python -m venv venv

2. Activate the virtual environment

From the backend directory, run:

On macOS:

source venv/bin/activate

On Windows:

venv\scripts\activate

3. Install required backend dependencies

From the backend directory, run:

pip install -r requirements.txt

4. Run migrations

From the backend directory, run:

python manage.py makemigrations

python manage.py migrate

Frontend

1. Install required frontend dependencies

From the root directory, run:

cd frontend

npm install

Run the application

To run the application, you need to have both the backend and the frontend up and running.

1. Run backend

From the backend directory, run:

python manage.py runserver

2. Run frontend

From the frontend directory, run:

npm run dev

View the application

Go to http://localhost:3000/ to view the application.

Customize the application

This section describes how to customize the application.

1. Changing Colors

To modify the colors in the application, make changes in the frontend/src/theme/theme.js file.

2. Changing Fonts

To modify the fonts in the application, first, add a new font to the frontend/src/pages/_document.js file, and then make changes in the frontend/src/theme/theme.js file.

3. Changing Logo

To modify the logo in the application, make changes in the frontend/src/layout/Header.js and frontend/src/layout/Sidebar.js files.

4. Changing the Image in the Hero Section

To modify the image in the Hero section, make changes in the frontend/src/components/Hero.js and frontend/src/layout/Footer.js files.

5. Changing the Text in the Hero Section

To modify the text in the Hero section, make changes in the frontend/src/components/Hero.js file.

6. Changing Buttons in the Hero Section

To modify the two buttons in the Hero section, make changes in the frontend/src/components/HeroButtons.js file.

7. Changing the App Description

To modify the app's description on the home page, make changes in the frontend/src/components/Description.js file.

Copyright and License

Copyright © 2022 Bob's Programming Academy. Code released under the MIT license.