Python-100-days-course(Day 92 Professional Profolio - Image Processing & Data Science)

One of my favourite websites to go to when I'm designing anything is a colour palette website called Flat UI Colors.

It's a really simple static website that shows a bunch of colours and their HEX codes. I can copy the HEX codes and use it in my CSS or any design software.

On day 76, you learnt about image processing with NumPy. Using this knowledge and your developer skills (that means Googling), build a website where a user can upload an image and you will tell them what are the top 10 most common colours in that image.

Image Color Extract Tool - Cool PHP Tools

style.css

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

form {
    margin-top: 20px;
}

button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.color-palette {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
}

.color {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    border-radius: 5px;
}

p {
    margin-top: 5px;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Color Analyzer</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <h1>Image Color Analyzer</h1>
        <form action="{{ url_for('index') }}" method="POST" enctype="multipart/form-data">
            <input type="file" name="image" accept="image/*" required>
            <button type="submit">Analyze Image</button>
        </form>
        {% if colors %}
        <h2>Top 10 Most Common Colors:</h2>
        <div class="color-palette">
            {% for color in colors %}
            <div class="color" style="background-color: {{ color }}"></div>
            <p>{{ color }}</p>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</body>
</html>

app.py

import os
from flask import Flask, render_template, request
from PIL import Image
from collections import Counter

app = Flask(__name__)

def get_top_colors(image_path, num_colors=10):
    img = Image.open(image_path)
    img = img.convert("RGB")
    pixels = list(img.getdata())
    pixel_counts = Counter(pixels)
    most_common = pixel_counts.most_common(num_colors)
    top_colors = [f"rgb{color[0]}" for color in most_common]
    return top_colors

@app.route("/", methods=["GET", "POST"])
def index():
    colors = None
    if request.method == "POST":
        image = request.files["image"]
        if image and image.filename.endswith((".jpg", ".jpeg", ".png")):
            image_path = os.path.join("uploads", image.filename)
            image.save(image_path)
            colors = get_top_colors(image_path)
    return render_template("index.html", colors=colors)

if __name__ == "__main__":
    if not os.path.exists("uploads"):
        os.makedirs("uploads")
    app.run(debug=True)