Initial project commit for insect classifier

.gitattributes

@@ -0,0 +1,5 @@
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,60 @@
+# File dan direktori yang dihasilkan oleh Python
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+env/
+venv/                  # Lingkungan virtual Python (penting untuk diabaikan!)
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.venv
+pip-wheel-metadata/
+.tox/
+.nox/
+.hypothesis/
+.pytest_cache/
+
+# File editor
+.vscode/                 # Konfigurasi VS Code
+.idea/                   # Konfigurasi IntelliJ/PyCharm
+*.swp
+*.bak
+*~
+
+# File khusus OS
+.DS_Store                # macOS
+Thumbs.db                # Windows
+Desktop.ini              # Windows
+
+# Log dan file data sementara
+*.log
+*.tmp
+*.temp
+temp/
+tmp/
+.coverage
+.coverage.*
+
+# Data dan model yang mungkin besar dan tidak ingin di-commit jika dihasilkan
+# oleh script atau jika terlalu besar untuk Git LFS (jika tidak pakai LFS)
+# Meskipun model .h5 kamu di-commit, ini adalah contoh untuk kasus lain
+# *.h5
+# *.pb
+# checkpoint/
+
+# Jupyter Notebook files
+.ipynb_checkpoints/      # Checkpoint notebook Jupyter

Dockerfile

@@ -0,0 +1,33 @@
+# Gunakan image dasar Python yang ringan dan stabil
+# Python 3.9 adalah versi yang umum dan cocok dengan banyak pustaka AI
+FROM python:3.9-slim-buster
+
+# Atur direktori kerja di dalam container.
+# Semua operasi COPY dan RUN berikutnya akan dilakukan relatif terhadap direktori ini.
+WORKDIR /app
+
+# Salin file requirements.txt ke direktori kerja di container.
+# Melakukan ini terlebih dahulu memungkinkan Docker untuk melakukan caching layer
+# sehingga instalasi dependensi tidak perlu diulang jika hanya kode lain yang berubah.
+COPY requirements.txt .
+
+# Instal semua dependensi Python yang terdaftar di requirements.txt.
+# --no-cache-dir akan mencegah pip menyimpan cache unduhan, menghemat ruang.
+# -r requirements.txt membaca daftar paket dari file.
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Salin semua file dan folder dari direktori lokal saat ini (root proyek kamu)
+# ke direktori kerja di dalam container (/app).
+# Ini termasuk main.py, model .h5, dan folder static/.
+COPY . .
+
+# Ekspos port yang akan digunakan aplikasi FastAPI kamu.
+# Hugging Face Spaces secara internal akan mengarahkan traffic ke port 7860.
+EXPOSE 7860
+
+# Perintah untuk menjalankan aplikasi FastAPI kamu saat container dimulai.
+# "uvicorn" adalah server ASGI.
+# "main:app" berarti Uvicorn akan mencari objek bernama 'app' di file 'main.py'.
+# "--host 0.0.0.0" membuat aplikasi dapat diakses dari luar container.
+# "--port 7860" memastikan aplikasi mendengarkan pada port yang diharapkan oleh Hugging Face.
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

ProyekCV_model.h5

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

ProyekCV_model_v2.h5

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

README.md

@@ -0,0 +1,61 @@
+# 🐞 Insect Classifier - FastAPI
+
+A web-based insect classification app using two TensorFlow models (CNN and MobileNet), deployed with FastAPI. Users can upload insect images and receive predictions from both models, along with accuracy and descriptions.
+
+## 🧠 Models
+- CNN model (`cnn_model.h5`)
+- MobileNet model (`mobilenet_model.h5`)
+
+## ⚙️ Tech Stack
+- FastAPI 
+- TensorFlow & Keras
+- HTML/CSS (for frontend)
+- Uvicorn (as ASGI server)
+- Python
+- NumPy & Pandas
+- Matplotlib & Seaborn
+- Scikit-learn
+
+
+## 📦 Dataset
+
+This project uses the [Insects Recognition Dataset](https://www.kaggle.com/datasets/hammaadali/insects-recognition) by Hammaad Ali, available on Kaggle.
+
+**Dataset Features:**
+- Contains high-quality images of 5 different insect classes. There are grasshopper, butterfly, mosquito, ladybird and dragonfly.
+- Organized into labeled folders for each class.
+- Ideal for supervised image classification tasks.
+- Image format: `.jpg`
+
+The dataset was used to train both the CNN and MobileNet models included in this project.
+
+
+
+## 🚀 How to Run Locally
+
+Make sure you have all dependencies installed and your virtual environment activated.
+
+**Step 1: Start the FastAPI backend**
+Open a terminal and run:
+
+```bash
+venv\Scripts\activate
+uvicorn app.main:app --reload
+```
+
+The backend will be running at:
+http://127.0.0.1:8000
+
+**Step 2: Start a local HTTP server (for the frontend)**
+in another terminal, terminal, activate your virtual environment and run:
+
+```bash
+python -m http.server 8080
+```
+This will serve your frontend.html at:
+http://127.0.0.1:8080/frontend.html
+
+Now the frontend can communicate with the FastAPI backend.
+
+
+

main.py

@@ -0,0 +1,120 @@
+from fastapi import FastAPI, File, UploadFile, Form
+from fastapi.responses import JSONResponse, FileResponse
+from fastapi.middleware.cors import CORSMiddleware
+import os
+from tensorflow.keras.models import load_model
+from PIL import Image
+import numpy as np
+from fastapi.staticfiles import StaticFiles
+import io
+import sys # <-- TAMBAH INI
+
+# 1. Inisialisasi Aplikasi FastAPI di awal (PINDAHKAN KE SINI)
+app = FastAPI()
+
+# 2. Mounting Static Files
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# 3. Konfigurasi CORS
+origins = [
+    "http://localhost:8000", # <-- Sesuaikan dengan port lokal yang kamu gunakan
+    "http://127.0.0.1:8000", # <-- Sesuaikan dengan port lokal yang kamu gunakan
+    # Di Hugging Face, ini akan dihandle oleh domain space itu sendiri.
+    # Kamu bisa menambahkan domain HF Space kamu di sini jika ada masalah CORS setelah deploy.
+    # Contoh: "https://<nama-user-kamu>.hf.space/<nama-space-kamu>"
+]
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=origins,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# 4. Memuat 2 Model
+try:
+    cnn_model = load_model('ProyekCV_model.h5')
+    mobilenet_model = load_model('ProyekCV_model_v2.h5')
+    print("Kedua model (CNN dan MobileNet) berhasil dimuat!")
+except Exception as e:
+    print(f"Gagal memuat model: {e}")
+    sys.exit(1) # <-- TAMBAH INI UNTUK MENGHENTIKAN APLIKASI JIKA MODEL GAGAL DIMUAT
+
+class_names = ['Butterfly', 'Dragonfly', 'Grasshopper', 'Ladybird', 'Mosquito']
+
+descriptions = {
+    'Grasshopper': "Grasshopper adalah serangga herbivora yang dikenal dengan kemampuan melompat jauh berkat kaki belakangnya yang kuat. Mereka biasanya ditemukan di padang rumput atau lahan terbuka. Suara khas yang dihasilkan oleh grasshopper berasal dari gesekan sayap mereka. Hewan ini memegang peran penting dalam rantai makanan sebagai mangsa bagi berbagai predator. Dalam jumlah besar, beberapa spesies grasshopper dapat menjadi hama tanaman pertanian.",
+    'Butterfly': "Butterfly adalah serangga cantik dengan sayap berwarna-warni yang hidup di berbagai habitat. Mereka mengalami metamorfosis lengkap dari larva menjadi dewasa. Butterfly sering dikaitkan dengan penyerbukan tanaman. Kehadiran mereka menandakan ekosistem yang sehat. Beberapa spesies butterfly terancam punah karena kerusakan habitat.",
+    'Dragonfly': "Dragonfly adalah serangga pemangsa yang hidup di dekat air. Mereka terbang sangat cepat dan lincah, memakan serangga lain seperti nyamuk. Dragonfly memiliki mata besar yang memberikan penglihatan hampir 360 derajat. Mereka berperan penting dalam mengontrol populasi serangga hama. Larvanya hidup di air sebelum bermetamorfosis menjadi dewasa.",
+    'Ladybird': "Ladybird, atau kepik, adalah serangga kecil berwarna cerah dengan bintik-bintik di punggungnya. Mereka dikenal sebagai predator alami kutu daun. Ladybird dianggap menguntungkan bagi petani karena membantu mengendalikan hama. Terdapat berbagai spesies ladybird dengan pola warna yang berbeda. Beberapa budaya menganggap ladybird sebagai pembawa keberuntungan.",
+    'Mosquito': "Mosquito adalah serangga kecil yang dikenal sebagai penghisap darah. Beberapa spesies dapat menularkan penyakit seperti malaria dan dengue. Hanya nyamuk betina yang menggigit manusia untuk mendapatkan protein dari darah. Mereka berkembang biak di air tergenang. Pengendalian populasi nyamuk penting untuk kesehatan masyarakat."
+}
+
+def preprocess_image(image):
+    img = image.resize((150, 150))
+    img = np.array(img) / 255.0
+    img = np.expand_dims(img, axis=0)
+    return img
+
+@app.post("/predict/")
+async def predict(file: UploadFile = File(...)):
+    image = Image.open(io.BytesIO(await file.read())).convert("RGB")
+    img = preprocess_image(image)
+
+    # CNN
+    cnn_pred = cnn_model.predict(img)
+    cnn_class = int(np.argmax(cnn_pred[0]))
+    cnn_conf = float(np.max(cnn_pred[0]))
+
+    if cnn_conf < 0.5:
+        cnn_label = "Tidak Dikenali"
+        cnn_desc = "Gambar tidak dapat dikenali dengan tingkat kepercayaan yang memadai oleh model CNN."
+    else:
+        cnn_label = class_names[cnn_class]
+        cnn_desc = descriptions.get(cnn_label, "Deskripsi tidak tersedia.")
+
+    # MobileNet
+    mobile_pred = mobilenet_model.predict(img)
+    mobile_class = int(np.argmax(mobile_pred[0]))
+    mobile_conf = float(np.max(mobile_pred[0]))
+
+    if mobile_conf < 0.5:
+        mobile_label = "Tidak Dikenali"
+        mobile_desc = "Gambar tidak dapat dikenali dengan tingkat kepercayaan yang memadai oleh model MobileNet."
+    else:
+        mobile_label = class_names[mobile_class]
+        mobile_desc = descriptions.get(mobile_label, "Deskripsi tidak tersedia.")
+        
+    final_desc = cnn_desc # Default to CNN desc
+    if cnn_label == "Tidak Dikenali": # If CNN doesn't recognize
+        final_desc = mobile_desc # Try MobileNet's desc
+        if mobile_label == "Tidak Dikenali": # If both don't recognize
+            final_desc = "Gambar tidak dapat dikenali oleh kedua model."
+
+
+    return JSONResponse(content={
+        "cnn": {
+            "predicted_class": cnn_label,
+            "confidence": cnn_conf,
+            "description": cnn_desc
+        },
+        "mobilenet": {
+            "predicted_class": mobile_label,
+            "confidence": mobile_conf,
+            "description": mobile_desc
+        },
+        "overall_description": final_desc
+    })
+
+@app.get("/")
+async def get_home():
+    return FileResponse("static/home.html")
+
+@app.get("/frontend.html")
+async def get_frontend():
+    return FileResponse("static/frontend.html")
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

requirements.txt

@@ -0,0 +1,7 @@
+fastapi
+uvicorn
+tensorflow==2.18.0 # Gunakan versi spesifik yang kamu gunakan saat training, misal: tensorflow==2.10.0
+Pillow
+python-multipart
+numpy
+scipy # Penting untuk tensorflow

static/frontend.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Insect Classifier</title>
+  <style>
+    /* Hapus kata 'padding' yang salah posisi */
+    body {
+      font-family: Arial, sans-serif;
+      background: #f0f8ff;
+      text-align: center;
+      margin: 0;
+      padding: 20px;
+    }
+    h1 {
+      color: #333;
+    }
+    h4 {
+      color: #666;
+      margin-top: 0;
+    }
+    .container {
+      display: flex;
+      justify-content: center;
+      gap: 30px;
+      margin-top: 30px;
+    }
+    .card {
+      background: white;
+      padding: 20px;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+      width: 300px;
+      height: 450px; /* Diperhatikan apakah cukup tinggi jika deskripsi panjang */
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    input[type="file"] {
+      margin: 10px 0;
+    }
+    /* #modelSelect tidak digunakan di HTML ini, bisa dihapus jika tidak ada elemennya */
+    /*
+    #modelSelect {
+      margin: 10px 0;
+      padding: 5px;
+      font-size: 14px;
+    }
+    */
+    #preview {
+      max-width: 90%;
+      max-height: 150px;
+      border-radius: 10px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+      margin-bottom: 10px;
+    }
+    button {
+      background-color: #4CAF50;
+      color: white;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 16px;
+    }
+    button:hover {
+      background-color: #45a049;
+    }
+    .loading {
+      display: none;
+      margin-top: 10px;
+      font-style: italic;
+      color: #555;
+    }
+    #result {
+      font-size: 18px;
+      font-weight: bold;
+      color: #333;
+      margin-top: 20px;
+      white-space: pre-line;
+    }
+    /* Menggabungkan style description dan pseudo-elementnya */
+    #description {
+      margin-top: 20px;
+      text-align: justify;
+      font-size: 14px;
+      color: #555;
+      border-top: 1px solid #ccc; /* Garis pemisah */
+      padding-top: 15px; /* Spasi setelah garis */
+    }
+  </style>
+</head>
+<body>
+
+<h1>Insect Classification</h1>
+<h4>Diah Retno Utami - 4TIB</h4>
+
+<div class="container">
+  <div class="card">
+    <h2>Upload Image</h2>
+    <input type="file" id="upload" accept="image/*" onchange="previewImage()"/>
+    <img id="preview" src="" alt="Image Preview"/>
+    <button onclick="uploadImage()">Predict</button>
+  </div>
+
+  <div class="card">
+    <h2>Prediction Result</h2>
+    <div id="result">No prediction yet.</div>
+    <p class="loading" id="loading">Predicting...</p>
+    <div id="description"></div>
+  </div>
+</div>
+
+
+<script>
+function previewImage() {
+  const file = document.getElementById('upload').files[0];
+  if (file) { // Tambahkan pengecekan file ada atau tidak
+    const reader = new FileReader();
+    reader.onload = function(e) {
+      document.getElementById('preview').src = e.target.result;
+    }
+    reader.readAsDataURL(file);
+  } else {
+    document.getElementById('preview').src = ""; // Reset gambar jika tidak ada file
+  }
+}
+
+async function uploadImage() {
+  const fileInput = document.getElementById('upload');
+  const file = fileInput.files[0];
+
+  if (!file) {
+    alert('Please select an image.');
+    return;
+  }
+
+  const formData = new FormData();
+  formData.append("file", file);
+
+  document.getElementById('loading').style.display = 'block';
+  document.getElementById('result').innerText = 'No prediction yet.';
+  document.getElementById('description').innerText = ''; // Reset deskripsi
+
+  try {
+    // !!! KRITIKAL: UBAH URL API INI UNTUK KOMPATIBILITAS DEPLOYMENT DAN LOKAL !!!
+    const response = await fetch('/predict/', { // <-- PERUBAHAN DI SINI
+      method: 'POST',
+      body: formData
+    });
+
+    if (!response.ok) { // Tambahkan pengecekan jika response tidak OK (misal 404, 500)
+        const errorText = await response.text();
+        throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
+    }
+
+    const result = await response.json();
+
+    document.getElementById('result').innerText = 
+      `CNN Model:\n  Predicted Class: ${result.cnn.predicted_class}\n  Accuracy: ${(result.cnn.confidence * 100).toFixed(2)}%\n\n` +
+      `MobileNetV2 Model:\n  Predicted Class: ${result.mobilenet.predicted_class}\n  Accuracy: ${(result.mobilenet.confidence * 100).toFixed(2)}%`;
+
+    // !!! KRITIKAL: GUNAKAN overall_description DARI BACKEND !!!
+    document.getElementById('description').innerText = result.overall_description; // <-- PERUBAHAN DI SINI
+
+  } catch (error) {
+    console.error("Error during prediction:", error); // Log error lebih detail untuk debugging
+    document.getElementById('result').innerText = `Error during prediction: ${error.message || error}`;
+    document.getElementById('description').innerText = 'Failed to get description.';
+  } finally {
+    document.getElementById('loading').style.display = 'none';
+  }
+}
+</script>
+
+</body>
+</html>

static/home.html

@@ -0,0 +1,54 @@
+<!-- app/home.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Selamat Datang</title>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+        }
+        .card {
+            background: white;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            text-align: center;
+            max-width: 500px;
+        }
+        .card h1 {
+            margin-bottom: 1rem;
+        }
+        .card p {
+            margin-bottom: 2rem;
+        }
+        .btn {
+            padding: 0.75rem 1.5rem;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            text-decoration: none;
+            font-size: 1rem;
+            cursor: pointer;
+        }
+        .btn:hover {
+            background-color: #45a049;
+        }
+    </style>
+</head>
+<body>
+    <div class="card">
+        <img src="/static/gambar.png" alt="Logo Serangga" style="width: 100%; max-width: 200px; height: auto; margin-bottom: 1rem;">
+        <h1>Selamat Datang di Sistem Klasifikasi Serangga</h1>
+        <p>Website ini menggunakan dua model deep learning (CNN dan MobileNet) untuk mengklasifikasikan gambar serangga secara otomatis.</p>
+        <a href="/frontend.html" class="btn">Mulai</a>
+    </div>
+</body>
+</html>