To build a website that finds the most common colors in an uploaded image using Python, you can utilize a web framework like Flask and the Python Imaging Library (PIL) to process the uploaded image. Here's a step-by-step guide:
-
Set up the project:
- Install Flask and PIL by running
pip install flask pillowin your command prompt or terminal. - Create a new directory for your project.
- Inside the project directory, create a virtual environment by running
python -m venv venv. - Activate the virtual environment:
- On Windows:
venv\Scripts\activate - On macOS/Linux:
source venv/bin/activate
- On Windows:
- Create a new file called
app.pyin your project directory.
- Install Flask and PIL by running
-
Import the required modules:
- Open
app.pyand add the following import statements:
from flask import Flask, render_template, request from PIL import Image import numpy as np from collections import Counter
- Open
-
Initialize the Flask application:
- Add the following code to
app.py:
app = Flask(__name__)
- Add the following code to
-
Create a route for uploading the image and finding the most common colors:
- Add the following code to
app.py:
@app.route('/', methods=['GET', 'POST']) def upload_image(): if request.method == 'POST': # Get the uploaded image file image = request.files['image'] # Read the image using PIL img = Image.open(image) # Convert the image to RGB mode img = img.convert('RGB') # Resize the image if needed img = img.resize((200, 200)) # Adjust the size as per your requirement # Convert the image to a NumPy array img_array = np.array(img) # Flatten the image array pixels = img_array.reshape(-1, 3) # Get the most common colors color_counts = Counter(map(tuple, pixels)) most_common_colors = color_counts.most_common(5) # Get the top 5 most common colors return render_template('result.html', image=image, colors=most_common_colors) return render_template('index.html')
- Add the following code to
-
Create HTML templates:
- Create a new directory called
templatesinside your project directory. - Inside the
templatesdirectory, create two new files:index.htmlandresult.html. - Add the following code to
index.html:
<!DOCTYPE html> <html> <head> <title>Color Analyzer</title> </head> <body> <h1>Color Analyzer</h1> <form action="/" method="post" enctype="multipart/form-data"> <input type="file" name="image" accept="image/*" required> <button type="submit">Analyze</button> </form> </body> </html>
- Add the following code to
result.html:
<!DOCTYPE html> <html> <head> <title>Color Analysis Result</title> </head> <body> <h1>Color Analysis Result</h1> <h2>Uploaded Image:</h2> <img src="{{ url_for('static', filename=image.filename) }}" alt="Uploaded Image"> <h2>Most Common Colors:</h2> <ul> {%
- Create a new directory called
for color, count in colors %}
-
Create a static directory:
- Create a new directory called
staticinside your project directory. - Place a sample image named
sample.jpgin thestaticdirectory (or upload your own image).
- Create a new directory called
-
Run the application:
- In your command prompt or terminal, navigate to your project directory.
- Run
flask runto start the Flask development server. - Open your web browser and visit
http://localhost:5000to access the color analyzer website.
When you upload an image using the form, the script will read and process the image using PIL. It will resize the image, convert it to a NumPy array, and flatten the array. Then, it will count the occurrences of each color and return the top 5 most common colors. The result will be displayed on the result.html page.
Note: Make sure the uploaded image is in a format supported by PIL (e.g., JPEG, PNG, etc.).