Deploy

Dockerfile

@@ -0,0 +1,19 @@
+# Gunakan Python 3.9 Slim
+FROM python:3.9-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 7860
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app", "--timeout", "120"]

app.py

@@ -0,0 +1,142 @@
+import numpy as np
+import cv2
+import joblib
+import base64
+import io
+from flask import Flask, request, render_template
+from PIL import Image
+from skimage.feature import local_binary_pattern
+
+app = Flask(__name__)
+
+try:
+    model = joblib.load("svm_fruit_model.pkl")
+    pca = joblib.load("pca_transformer.pkl")
+except Exception as e:
+    print(f"Error loading model: {e}")
+
+CLASS_NAMES = [
+    "Avocado",
+    "Avocado ripe",
+    "Banana Lady",
+    "Banana Red",
+    "Banana Yellow",
+    "Carambula",
+    "Cherimoya",
+    "Dates",
+    "Fig",
+    "Guava",
+    "Kaki",
+    "Kiwi",
+    "Lychee",
+    "Mango",
+    "Mango Red",
+    "Mangostan",
+    "Papaya",
+    "Pineapple",
+    "Pineapple Mini",
+    "Pomegranate",
+    "Quince",
+    "Rambutan",
+    "Salak",
+]
+
+
+def extract_color_histogram(img, bins=(8, 8, 8)):
+    hist = cv2.calcHist([img], [0, 1, 2], None, bins, [0, 256, 0, 256, 0, 256])
+    hist = cv2.normalize(hist, hist).flatten()
+
+    return hist
+
+
+def extract_lbp_features(gray_img, P=8, R=1, method="uniform"):
+    lbp = local_binary_pattern(gray_img, P, R, method)
+    hist, _ = np.histogram(lbp.ravel(), bins=np.arange(0, P + 3), range=(0, P + 2))
+    hist = hist.astype("float")
+    hist /= hist.sum() + 1e-6
+    return hist
+
+
+def preprocessing_pipeline(pil_img):
+    img = np.array(pil_img)
+
+    # ubah format dari RGBA menjadi RGB
+    if img.shape[-1] == 4:
+        img = img[:, :, :3]
+
+    img_float = img.astype(np.float32) / 255.0
+    img_uint8 = (img_float * 255).astype(np.uint8)
+
+    feat_color = extract_color_histogram(img_uint8)
+    img_gray = cv2.cvtColor(img_uint8, cv2.COLOR_RGB2GRAY)
+    feat_lbp = extract_lbp_features(img_gray)
+
+    combined = np.hstack([feat_color, feat_lbp])
+    combined = combined.reshape(1, -1)
+
+    final_features = pca.transform(combined)
+
+    return final_features
+
+
+@app.route("/", methods=["GET", "POST"])
+def index():
+    prediction_text = None
+    img_data = None
+    confidence = None
+    top_3_predictions = None
+
+    if request.method == "POST":
+        if "file" not in request.files:
+            return render_template("index.html", msg="Tidak ada file")
+
+        file = request.files["file"]
+
+        if file.filename == "":
+            return render_template("index.html", msg="Nama file kosong")
+
+        if file:
+            try:
+                image = Image.open(file.stream)
+                img_io = io.BytesIO()
+                image.save(img_io, "PNG")
+                encoded_img = base64.b64encode(img_io.getvalue()).decode("ascii")
+                img_data = f"data:image/png;base64, {encoded_img}"
+
+
+                features = preprocessing_pipeline(image)
+                
+                # Prediksi dengan probabilitas
+                pred_index = model.predict(features)[0]
+                prediction_text = CLASS_NAMES[int(pred_index)]
+                
+                # Dapatkan probabilitas untuk semua kelas
+                if hasattr(model, 'predict_proba'):
+                    probabilities = model.predict_proba(features)[0]
+                    confidence = float(probabilities[int(pred_index)]) * 100
+                    
+                    # Dapatkan top 3 prediksi
+                    top_3_indices = probabilities.argsort()[-3:][::-1]
+                    top_3_predictions = [
+                        {
+                            'name': CLASS_NAMES[idx],
+                            'probability': float(probabilities[idx]) * 100
+                        }
+                        for idx in top_3_indices
+                    ]
+                else:
+                    # Jika model tidak support predict_proba
+                    confidence = None
+                    top_3_predictions = None
+
+            except Exception as e:
+                prediction_text = f"Error: {str(e)}"
+                confidence = None
+                top_3_predictions = None
+
+    return render_template("index.html", prediction=prediction_text, img_data=img_data, 
+                         confidence=confidence, top_predictions=top_3_predictions)
+
+
+if __name__ == "__main__":
+    app.run(debug=True, port=7860)

pca_transformer.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d88792827adb898f287ad13c1aaf19f9144b6d3ca38c719fe7288d677852ce9b
+size 122775

requirements.txt

@@ -0,0 +1,8 @@
+flask
+gunicorn
+numpy
+joblib
+scikit-image
+scikit-learn
+pillow
+opencv-python-headless

svm_fruit_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9c8b141960eb9c6579a6ada492c2dd212af4b317d952965c3ad198e41a4c0b9a
+size 332331

templates/index.html

@@ -0,0 +1,402 @@
+<!DOCTYPE html>
+<html lang="id">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>AI Fruit Classifier</title>
+
+    <!-- Bootstrap 5 CSS -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <!-- Google Fonts (Poppins) -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap"
+      rel="stylesheet"
+    />
+    <!-- Bootstrap Icons -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
+    />
+
+    <style>
+      body {
+        font-family: "Poppins", sans-serif;
+        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        padding: 20px 0;
+      }
+
+      .main-card {
+        border: none;
+        border-radius: 24px;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        background: #ffffff;
+        overflow: hidden;
+      }
+
+      .card-header-custom {
+        background: transparent;
+        padding: 30px 30px 10px 30px;
+        border-bottom: none;
+        text-align: center;
+      }
+
+      .card-header-custom h4 {
+        font-weight: 600;
+        color: #2d3436;
+        margin-bottom: 5px;
+      }
+
+      .card-header-custom p {
+        color: #636e72;
+        font-size: 0.9rem;
+      }
+
+      .card-body {
+        padding: 30px;
+      }
+
+      .upload-box {
+        border: 2px dashed #dfe6e9;
+        border-radius: 16px;
+        padding: 30px;
+        text-align: center;
+        transition: all 0.3s ease;
+        background-color: #fdfdfd;
+        cursor: pointer;
+        position: relative;
+      }
+
+      .upload-box:hover {
+        border-color: #74b9ff;
+        background-color: #f0f8ff;
+      }
+
+      .form-control[type="file"] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        cursor: pointer;
+      }
+
+      .btn-predict {
+        background: linear-gradient(45deg, #6c5ce7, #a29bfe);
+        border: none;
+        border-radius: 12px;
+        padding: 12px 20px;
+        font-weight: 600;
+        letter-spacing: 0.5px;
+        transition: transform 0.2s;
+        box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
+      }
+
+      .btn-predict:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
+        background: linear-gradient(45deg, #5f4dd0, #9189f0);
+      }
+
+      .result-container {
+        background-color: #f8f9fa;
+        border-radius: 16px;
+        padding: 20px;
+        margin-top: 30px;
+        animation: fadeIn 0.5s ease-in-out;
+      }
+
+      .prediction-badge {
+        background-color: #d1fae5;
+        color: #065f46;
+        padding: 8px 16px;
+        border-radius: 50px;
+        font-weight: 600;
+        font-size: 0.9rem;
+        display: inline-block;
+        margin-bottom: 10px;
+      }
+
+      .prediction-text {
+        font-size: 1.8rem;
+        font-weight: 700;
+        color: #2d3436;
+        margin: 0;
+      }
+
+      .confidence-container {
+        margin-top: 20px;
+        padding: 15px;
+        background-color: #ffffff;
+        border-radius: 12px;
+        border: 1px solid #e1e8ed;
+      }
+
+      .confidence-bar {
+        height: 8px;
+        border-radius: 10px;
+        background-color: #e9ecef;
+        overflow: hidden;
+        margin-top: 8px;
+      }
+
+      .confidence-fill {
+        height: 100%;
+        border-radius: 10px;
+        transition: width 0.8s ease-in-out;
+        background: linear-gradient(90deg, #10b981, #34d399);
+      }
+
+      .top-predictions {
+        margin-top: 15px;
+      }
+
+      .prediction-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px;
+        margin-bottom: 8px;
+        background-color: #f8f9fa;
+        border-radius: 8px;
+        font-size: 0.9rem;
+      }
+
+      .prediction-item .name {
+        font-weight: 500;
+        color: #2d3436;
+      }
+
+      .prediction-item .percentage {
+        font-weight: 600;
+        color: #6c5ce7;
+      }
+
+      .prediction-item .bar-small {
+        flex: 1;
+        height: 6px;
+        background-color: #e9ecef;
+        border-radius: 10px;
+        margin: 0 10px;
+        overflow: hidden;
+      }
+
+      .prediction-item .bar-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #a29bfe, #6c5ce7);
+        border-radius: 10px;
+      }
+
+      .img-preview {
+        border-radius: 16px;
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+        max-height: 250px;
+        object-fit: cover;
+        transition: transform 0.3s;
+      }
+
+      .img-preview:hover {
+        transform: scale(1.02);
+      }
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+          transform: translateY(10px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col-md-5">
+          <div class="card main-card">
+            <div class="card-header-custom">
+              <div class="mb-3">
+                <i
+                  class="bi bi-flower1"
+                  style="font-size: 3rem; color: #6c5ce7"
+                ></i>
+              </div>
+              <h4>Fruit Classifier</h4>
+              <p>Upload gambar buah untuk dideteksi oleh AI</p>
+            </div>
+
+            <div class="card-body">
+              <form method="post" enctype="multipart/form-data" id="uploadForm">
+                <div class="mb-4">
+                  <div class="upload-box" id="uploadBox">
+                    <i
+                      class="bi bi-cloud-arrow-up"
+                      style="font-size: 2rem; color: #b2bec3"
+                    ></i>
+                    <p class="mb-0 mt-2 text-muted">
+                      Klik atau drag gambar di sini
+                    </p>
+                    <input
+                      class="form-control"
+                      type="file"
+                      name="file"
+                      id="fileInput"
+                      accept="image/*"
+                      required
+                    />
+                  </div>
+                  <div
+                    id="fileNameDisplay"
+                    class="text-center mt-2 text-muted small"
+                  ></div>
+                </div>
+                <button
+                  type="submit"
+                  class="btn btn-primary btn-predict w-100 text-white"
+                  id="submitBtn"
+                >
+                  <i class="bi bi-magic me-2"></i> Prediksi Gambar
+                </button>
+              </form>
+
+              {% if msg %}
+              <div
+                class="alert alert-warning mt-4 rounded-3 border-0 shadow-sm"
+              >
+                <i class="bi bi-exclamation-triangle me-2"></i> {{ msg }}
+              </div>
+              {% endif %}
+
+              {% if img_data and prediction %}
+              <div class="result-container text-center">
+                <div class="mb-3">
+                  <img src="{{ img_data }}" class="img-fluid img-preview" alt="Uploaded fruit" />
+                </div>
+
+                <div class="prediction-badge">
+                  <i class="bi bi-check-circle-fill me-1"></i> Hasil Prediksi
+                </div>
+                <h2 class="prediction-text">{{ prediction }}</h2>
+
+                {% if confidence %}
+                <div class="confidence-container">
+                  <div class="d-flex justify-content-between align-items-center">
+                    <span style="font-weight: 600; color: #636e72;">
+                      <i class="bi bi-graph-up me-1"></i> Confidence Score
+                    </span>
+                    <span style="font-size: 1.3rem; font-weight: 700; color: #10b981;">
+                      {{ "%.2f" | format(confidence) }}%
+                    </span>
+                  </div>
+                  <div class="confidence-bar">
+                    <div class="confidence-fill" style="width: {{ confidence }}%"></div>
+                  </div>
+                </div>
+
+                {% if top_predictions %}
+                <div class="top-predictions text-start">
+                  <h6 style="font-weight: 600; color: #636e72; margin-bottom: 12px;">
+                    <i class="bi bi-trophy me-1"></i> Top 3 Prediksi
+                  </h6>
+                  {% for pred in top_predictions %}
+                  <div class="prediction-item">
+                    <span class="name">{{ loop.index }}. {{ pred.name }}</span>
+                    <div class="bar-small">
+                      <div class="bar-fill" style="width: {{ pred.probability }}%"></div>
+                    </div>
+                    <span class="percentage">{{ "%.1f" | format(pred.probability) }}%</span>
+                  </div>
+                  {% endfor %}
+                </div>
+                {% endif %}
+                {% endif %}
+              </div>
+              {% endif %}
+            </div>
+          </div>
+
+          <div class="text-center mt-4 text-muted small">
+            &copy; 2025 Fruit Classification Project
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // Ambil elemen
+      let fileInput = document.getElementById('fileInput');
+      const uploadBox = document.getElementById('uploadBox');
+      const fileNameDisplay = document.getElementById('fileNameDisplay');
+      const uploadForm = document.getElementById('uploadForm');
+      const submitBtn = document.getElementById('submitBtn');
+      
+      // Simpan file yang dipilih
+      let selectedFile = null;
+
+      // Fungsi untuk handle perubahan file
+      function handleFileChange(e) {
+        const input = e.target;
+        if (input.files && input.files[0]) {
+          selectedFile = input.files[0];
+          const fileName = selectedFile.name;
+          
+          // Tampilkan nama file
+          fileNameDisplay.innerHTML = `<i class="bi bi-check-circle-fill text-success me-1"></i> File terpilih: <strong>${fileName}</strong>`;
+          
+          // Buat preview gambar
+          const reader = new FileReader();
+          reader.onload = function(event) {
+            // Ganti konten upload box dengan preview gambar
+            uploadBox.innerHTML = `
+              <div style="position: relative;">
+                <img src="${event.target.result}" style="max-width: 100%; max-height: 200px; border-radius: 12px; object-fit: contain;" alt="Preview">
+              </div>
+              <p class="mb-0 mt-3 text-success">
+                <i class="bi bi-check-circle-fill me-1"></i>
+                <strong>${fileName}</strong>
+              </p>
+              <p class="mb-0 mt-2 text-muted small">Klik untuk mengganti gambar</p>
+              <input class="form-control" type="file" name="file" id="fileInput" accept="image/*">
+            `;
+            
+            // Re-attach event listener untuk input file yang baru
+            fileInput = document.getElementById('fileInput');
+            fileInput.addEventListener('change', handleFileChange);
+            
+            // Transfer file ke input baru menggunakan DataTransfer
+            const dataTransfer = new DataTransfer();
+            dataTransfer.items.add(selectedFile);
+            fileInput.files = dataTransfer.files;
+          };
+          reader.readAsDataURL(selectedFile);
+        }
+      }
+
+      // Event listener untuk file input pertama kali
+      fileInput.addEventListener('change', handleFileChange);
+
+      // Event listener untuk form submit
+      uploadForm.addEventListener('submit', function(e) {
+        // Cek apakah ada file yang dipilih
+        const currentFileInput = document.getElementById('fileInput');
+        if (!currentFileInput.files || currentFileInput.files.length === 0) {
+          e.preventDefault();
+          alert('Silakan pilih file gambar terlebih dahulu!');
+          return;
+        }
+        
+        // Ubah tampilan tombol
+        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Sedang menganalisis...';
+        submitBtn.disabled = true;
+      });
+    </script>
+  </body>
+</html>