930 x 180 AD PLACEMENT

Membuat Color Palette Generator dengan Flask dan K-Means Clustering

Helmy Satria Martha Putra January 1, 2025 11:19 am . 5 min read

Membuat Color Palette Generator dengan Flask dan K-Means Clustering

750 x 100 AD PLACEMENT

Pernahkah kamu penasaran dengan warna dominan yang ada pada sebuah gambar? Warna-warna ini dapat digunakan untuk berbagai keperluan desain, seperti menciptakan skema warna yang harmonis untuk website, branding, atau seni visual. Dalam artikel ini, kita akan membahas bagaimana cara membuat aplikasi Color Palette Generator menggunakan Flask dan algoritma K-Means Clustering.

Apa itu Color Palette?

Color palette adalah kumpulan warna yang dipilih secara khusus untuk menjaga harmoni visual dalam sebuah desain. Contohnya, sebuah gambar dapat memiliki warna dominan seperti biru langit, hijau daun, atau cokelat tanah. Dengan mengekstrak warna dominan dari sebuah gambar, kita dapat dengan mudah membuat skema warna yang cocok untuk berbagai proyek kreatif.

Algoritma K-Means untuk Cluster Warna Dominan

Algoritma K-Means Clustering digunakan untuk menemukan warna dominan dari gambar. Algoritma ini bekerja dengan cara mengelompokkan piksel dalam gambar ke dalam beberapa kelompok (klaster) berdasarkan kemiripan warna. Hasil akhirnya adalah warna-warna centroid dari setiap klaster, yang menjadi warna dominan pada gambar.

Step by Step

Pertama-tama tentu saja kita perlu instal python terlebih dahulu serta beberapa library yang dibutuhkan.

750 x 100 AD PLACEMENT

Instal Library yang Dibutuhkan

Kita melakukan instalasi menggunakan pip

Copy Code

pip install scikit-learn pandas numpy flask opencv-python matplotlib os

Membuat app.py

app.py ini merupakan file yang nantinya akan dipanggil untuk menjalankan flask

Also Read: Pengenalan Supervised Learning dalam Machine Learning

Pertama-tama, import librarynya

Copy Code

from flask import Flask, render_template, request, redirect, url_for
import os
import cv2
import numpy as np
from sklearn.cluster import KMeans
import matplotlib.pyplot as plt
import matplotlib

Inisialisasi Flask

750 x 100 AD PLACEMENT

Copy Code

app = Flask(__name__)

Setting folder yang digunakan untuk upload

Copy Code

app.config['UPLOAD_FOLDER'] = 'static/uploads'
app.config['PALETTE_PATH'] = 'static/palette.png'

Selanjutnya, kita buat fungsi extract_palette yang digunakan untuk melakukan ekstraksi image dan dimasukkan ke K-Means. Untuk ukuran K-nya adalah 5

Copy Code

def extract_palette(image_path, num_clusters=5):
    image = cv2.imread(image_path)
    image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
    pixels = image.reshape(-1, 3)

    # Apply KMeans
    kmeans = KMeans(n_clusters=num_clusters, random_state=0)
    kmeans.fit(pixels)
    colors = kmeans.cluster_centers_.astype(int)

    # Plot palette
    palette = np.zeros((50, 300, 3), dtype='uint8')
    step = 300 // len(colors)
    for i, color in enumerate(colors):
        palette[:, i * step:(i + 1) * step, :] = color

    plt.figure(figsize=(8, 2))
    plt.axis('off')
    plt.imshow(palette)
    plt.savefig(app.config['PALETTE_PATH'], bbox_inches='tight', pad_inches=0)
    plt.close()

Kita buat fungsi untuk routing

Membuat index.html

Index.html ini berfungsi untuk tampilan yang nantinya digunakan untuk input

Copy Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Palette Generator</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
    <div class="container py-5">
        <div class="text-center mb-5">
            <h1 class="display-5 fw-bold">Color Palette Generator</h1>
            <p class="lead text-muted">Upload an image to generate its color palette.</p>
        </div>

        <div class="row justify-content-center">
            <div class="col-md-6">
                <form method="POST" enctype="multipart/form-data" class="card p-4 shadow-sm">
                    <div class="mb-3">
                        <label for="image" class="form-label">Select an Image</label>
                        <input type="file" class="form-control" id="image" name="image" accept="image/*" required>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">Generate Palette</button>
                    </div>
                </form>
            </div>
        </div>

        {% if uploaded_image %}
        <div class="row justify-content-center mt-4">
            <div class="col-md-8">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title text-center">Generated Color Palette</h5>
                        <div class="text-center">
                            <img src="{{ palette_image }}" alt="Color Palette" class="img-fluid rounded">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row justify-content-center mt-5">
            <div class="col-md-8">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title text-center">Uploaded Image</h5>
                        <div class="text-center">
                            <img src="{{ uploaded_image }}" alt="Uploaded Image" class="img-fluid rounded">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        
        {% endif %}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>