Initial commit - BatikLens API v2 (clean)

.gitattributes

@@ -0,0 +1 @@
+*.tflite filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,5 @@
+batik-env/
+__pycache__/
+*.pyc
+.env
+*.log

Dockerfile

@@ -0,0 +1,35 @@
+# Use Python 3.11 (TensorFlow compatible)
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    g++ \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first (for caching)
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY app.py .
+COPY models/ models/
+
+# Expose port
+EXPOSE 5000
+
+# Set environment variables
+ENV FLASK_APP=app.py
+ENV PYTHONUNBUFFERED=1
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
+  CMD python -c "import requests; requests.get('http://localhost:5000/health')"
+
+# Run with gunicorn
+CMD ["gunicorn", "--bind", "0.0.0.0:5000", "--workers", "2", "--timeout", "120", "app:app"]

Procfile

@@ -0,0 +1 @@
+web: gunicorn --bind 0.0.0.0:$PORT --workers 1 --timeout 120 app_mobilenet:app

README.md

@@ -0,0 +1,259 @@
+# 🎯 Batik Classifier API
+
+REST API untuk klasifikasi motif batik menggunakan **InceptionV3 + KNN** dengan akurasi **95%**.
+
+## 📊 Model Info
+- **Accuracy**: 95.00%
+- **Model**: InceptionV3 (feature extraction) + KNN (classification)
+- **Classes**: 20 motif batik
+- **Training Data**: 17,000 images
+
+## 🚀 Quick Start
+
+### 1. Setup Environment
+
+```bash
+# Buat virtual environment
+python -m venv venv
+source venv/bin/activate  # Linux/Mac
+# atau
+venv\Scripts\activate  # Windows
+
+# Install dependencies
+pip install -r requirements.txt
+```
+
+### 2. Download Model Files
+
+Download model files dari Google Drive dan letakkan di folder `models/`:
+- `batik_knn_model_95acc.pkl`
+- `batik_classes.pkl`
+- `batik_model_metadata.pkl`
+
+```
+batik-classifier/
+└── api/
+    ├── app.py
+    ├── requirements.txt
+    ├── test_api.py
+    └── models/
+        ├── batik_knn_model_95acc.pkl
+        ├── batik_classes.pkl
+        └── batik_model_metadata.pkl
+```
+
+### 3. Run Server
+
+```bash
+python app.py
+```
+
+Server akan berjalan di: `http://localhost:5000`
+
+## 📋 API Endpoints
+
+### GET `/`
+Get API information
+
+**Response:**
+```json
+{
+  "message": "Batik Classifier API",
+  "version": "1.0",
+  "model": "InceptionV3 + KNN",
+  "accuracy": "95.00%",
+  "classes": 20
+}
+```
+
+### POST `/predict`
+Predict batik motif from image
+
+**Request:**
+- Method: POST
+- Content-Type: multipart/form-data
+- Body: `image` (file)
+
+**Example using curl:**
+```bash
+curl -X POST http://localhost:5000/predict \
+  -F "image=@path/to/batik.jpg"
+```
+
+**Example using Python:**
+```python
+import requests
+
+with open('batik.jpg', 'rb') as f:
+    files = {'image': f}
+    response = requests.post('http://localhost:5000/predict', files=files)
+    print(response.json())
+```
+
+**Response:**
+```json
+{
+  "success": true,
+  "prediction": "batik-parang",
+  "confidence": 0.95,
+  "percentage": "95.00%",
+  "top_5_predictions": [
+    {
+      "class": "batik-parang",
+      "confidence": 0.95,
+      "percentage": "95.00%"
+    },
+    {
+      "class": "batik-kawung",
+      "confidence": 0.03,
+      "percentage": "3.00%"
+    }
+  ]
+}
+```
+
+### GET `/classes`
+Get list of all batik classes
+
+**Response:**
+```json
+{
+  "success": true,
+  "total": 20,
+  "classes": [
+    "batik-bali",
+    "batik-betawi",
+    "batik-celup",
+    ...
+  ]
+}
+```
+
+### GET `/info`
+Get model information
+
+**Response:**
+```json
+{
+  "success": true,
+  "model_info": {
+    "accuracy": "95.00%",
+    "model_type": "InceptionV3 + KNN",
+    "n_classes": 20,
+    "total_training_data": 17000,
+    "trained_date": "2025-12-07 11:41:28"
+  }
+}
+```
+
+### GET `/health`
+Health check endpoint
+
+**Response:**
+```json
+{
+  "status": "healthy",
+  "model_loaded": true
+}
+```
+
+## 🧪 Testing
+
+Run test script:
+```bash
+# Test endpoints
+python test_api.py
+
+# Test with image prediction
+python test_api.py path/to/batik.jpg
+```
+
+## 📦 Deployment
+
+### Docker (Recommended)
+
+```dockerfile
+FROM python:3.10-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 5000
+
+CMD ["python", "app.py"]
+```
+
+Build and run:
+```bash
+docker build -t batik-classifier-api .
+docker run -p 5000:5000 batik-classifier-api
+```
+
+### Heroku
+
+```bash
+# Login
+heroku login
+
+# Create app
+heroku create batik-classifier-api
+
+# Deploy
+git push heroku main
+```
+
+### Railway / Render
+
+1. Connect GitHub repository
+2. Set build command: `pip install -r requirements.txt`
+3. Set start command: `python app.py`
+4. Deploy
+
+## 🔧 Configuration
+
+Environment variables:
+```bash
+FLASK_ENV=production  # production or development
+PORT=5000             # Server port
+```
+
+## 📝 20 Batik Classes
+
+1. batik-bali
+2. batik-betawi
+3. batik-celup
+4. batik-cendrawasih
+5. batik-ceplok
+6. batik-ciamis
+7. batik-garutan
+8. batik-gentongan
+9. batik-kawung
+10. batik-keraton
+11. batik-lasem
+12. batik-megamendung
+13. batik-parang
+14. batik-pekalongan
+15. batik-priangan
+16. batik-sekar
+17. batik-sidoluhur
+18. batik-sidomukti
+19. batik-sogan
+20. batik-tambal
+
+## 🤝 Support
+
+For issues or questions:
+- GitHub: https://github.com/Maftuuh1922/warisan-digital
+- Email: rizkiuya12@gmail.com
+
+## 📄 License
+
+MIT License - feel free to use for commercial or personal projects.
+
+---
+
+**Made with ❤️ by Maftuuh1922**

app_mobilenet.py

@@ -0,0 +1,155 @@
+import os
+import json
+import numpy as np
+# Using ai-edge-litert (Google's new TFLite runtime)
+from ai_edge_litert.interpreter import Interpreter
+
+from flask import Flask, request, jsonify
+from flask_cors import CORS
+from PIL import Image
+import io
+
+app = Flask(__name__)
+CORS(app)
+
+# --- KONFIGURASI ---
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+# Pastikan path ini sesuai struktur folder kamu
+MODEL_PATH = os.path.join(BASE_DIR, 'models', 'batik_model.tflite') 
+CLASSES_PATH = os.path.join(BASE_DIR, 'models', 'batik_classes_mobilenet_ultimate.json')
+
+print("==================================================")
+print("🚀 MEMULAI BATIK CLASSIFIER (TFLITE ENGINE V2)")
+print("⚡ Mode: ai-edge-litert Runtime (38 Batik Classes)")
+print("==================================================")
+
+# --- 1. LOAD MODEL TFLITE ---
+if not os.path.exists(MODEL_PATH):
+    print(f"❌ ERROR: File model TFLite tidak ditemukan: {MODEL_PATH}")
+    exit()
+
+try:
+    # Using ai-edge-litert Interpreter
+    interpreter = Interpreter(model_path=MODEL_PATH)
+    interpreter.allocate_tensors()
+    
+    # Dapat info input/output
+    input_details = interpreter.get_input_details()
+    output_details = interpreter.get_output_details()
+    
+    input_shape = input_details[0]['shape'] 
+    output_shape = output_details[0]['shape']
+    print(f"✅ Model TFLite V2 berhasil dimuat!")
+    print(f"📊 Input Shape: {input_shape}, Output Classes: {output_shape[1]}")
+except Exception as e:
+    print(f"❌ Gagal load TFLite: {e}")
+    exit()
+
+# --- 2. LOAD CLASSES ---
+if not os.path.exists(CLASSES_PATH):
+    print(f"❌ ERROR: File label tidak ditemukan di {CLASSES_PATH}")
+    exit()
+
+try:
+    with open(CLASSES_PATH, 'r') as f:
+        class_data = json.load(f)
+        
+        # Logika parsing JSON kamu sudah bagus!
+        if isinstance(class_data, dict) and "classes" in class_data:
+            class_names = class_data["classes"]
+        elif isinstance(class_data, dict):
+            try:
+                sorted_keys = sorted(class_data.keys(), key=lambda x: int(x))
+                class_names = [class_data[k] for k in sorted_keys]
+            except ValueError:
+                class_names = list(class_data.values())
+        elif isinstance(class_data, list):
+            class_names = class_data
+        else:
+            raise ValueError("Format JSON tidak dikenali.")
+
+    print(f"✅ Berhasil memuat {len(class_names)} nama motif batik.")
+    # print(f"📝 Contoh: {class_names[:3]}...") 
+
+except Exception as e:
+    print(f"❌ Gagal membaca file JSON Classes: {e}")
+    exit()
+
+# --- PREPROCESSING ---
+def prepare_image(image, target_size=(224, 224)):
+    if image.mode != "RGB":
+        image = image.convert("RGB")
+    image = image.resize(target_size)
+    img_array = np.array(image, dtype=np.float32) 
+    
+    # Normalisasi (Pastikan saat training kamu juga dibagi 255.0)
+    img_array = img_array / 255.0
+    
+    # Tambah dimensi batch
+    img_array = np.expand_dims(img_array, axis=0)
+    return img_array
+
+@app.route('/', methods=['GET'])
+def home():
+    return jsonify({
+        "status": "Online", 
+        "mode": "ai-edge-litert Runtime (BatikLens V2)",
+        "model_version": "v2",
+        "classes_loaded": len(class_names)
+    })
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    # Support both 'file' and 'image' field names
+    file = request.files.get('file') or request.files.get('image')
+    
+    if not file:
+        return jsonify({"error": "No file part"}), 400
+    
+    if file.filename == '':
+        return jsonify({"error": "No selected file"}), 400
+
+    try:
+        # 1. Baca & Proses Gambar
+        image = Image.open(io.BytesIO(file.read()))
+        input_data = prepare_image(image)
+        
+        # 2. Masukkan data ke Interpreter
+        interpreter.set_tensor(input_details[0]['index'], input_data)
+        
+        # 3. Jalankan Prediksi
+        interpreter.invoke()
+        
+        # 4. Ambil Hasil
+        output_data = interpreter.get_tensor(output_details[0]['index'])
+        predictions = output_data[0]
+        
+        # 5. Cari skor tertinggi
+        predicted_index = np.argmax(predictions)
+        predicted_label = class_names[predicted_index]
+        confidence = float(predictions[predicted_index])
+        
+        # Get top 5 predictions
+        top_5_indices = np.argsort(predictions)[-5:][::-1]
+        top_5_predictions = [
+            {
+                "class": class_names[idx],
+                "confidence": float(predictions[idx]),
+                "percentage": f"{float(predictions[idx]):.2%}"
+            }
+            for idx in top_5_indices
+        ]
+        
+        return jsonify({
+            "success": True,
+            "prediction": predicted_label,
+            "confidence": confidence,
+            "percentage": f"{confidence:.2%}",
+            "top_5_predictions": top_5_predictions
+        })
+
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000)

models/batik_classes_mobilenet_ultimate.json

@@ -0,0 +1,82 @@
+{
+  "classes": [
+    "batik-aceh",
+    "batik-bali",
+    "batik-bali_barong",
+    "batik-bali_merak",
+    "batik-betawi",
+    "batik-celup",
+    "batik-ceplok",
+    "batik-ciamis",
+    "batik-corak_insang",
+    "batik-garutan",
+    "batik-gentongan",
+    "batik-ikat_celup",
+    "batik-jakarta_ondel_ondel",
+    "batik-jawa_barat_megamendung",
+    "batik-jawa_timur_pring",
+    "batik-kalimantan_dayak",
+    "batik-keraton",
+    "batik-lampung_gajah",
+    "batik-lasem",
+    "batik-madura_mataketeran",
+    "batik-maluku_pala",
+    "batik-ntb_lumbung",
+    "batik-papua_asmat",
+    "batik-papua_cendrawasih",
+    "batik-papua_tifa",
+    "batik-pekalongan",
+    "batik-priangan",
+    "batik-sekar",
+    "batik-sidoluhur",
+    "batik-sidomukti",
+    "batik-sogan",
+    "batik-solo_parang",
+    "batik-sulawesi_selatan_lontara",
+    "batik-sumatera_barat_rumah_minang",
+    "batik-sumatera_utara_boraspati",
+    "batik-tambal",
+    "batik-yogyakarta_kawung",
+    "batik-yogyakarta_parang"
+  ],
+  "class_counts": {
+    "batik-aceh": 80,
+    "batik-bali": 100,
+    "batik-bali_barong": 88,
+    "batik-bali_merak": 94,
+    "batik-betawi": 98,
+    "batik-celup": 100,
+    "batik-ceplok": 92,
+    "batik-ciamis": 102,
+    "batik-corak_insang": 156,
+    "batik-garutan": 106,
+    "batik-gentongan": 96,
+    "batik-ikat_celup": 134,
+    "batik-jakarta_ondel_ondel": 86,
+    "batik-jawa_barat_megamendung": 432,
+    "batik-jawa_timur_pring": 80,
+    "batik-kalimantan_dayak": 460,
+    "batik-keraton": 150,
+    "batik-lampung_gajah": 160,
+    "batik-lasem": 150,
+    "batik-madura_mataketeran": 156,
+    "batik-maluku_pala": 158,
+    "batik-ntb_lumbung": 160,
+    "batik-papua_asmat": 156,
+    "batik-papua_cendrawasih": 256,
+    "batik-papua_tifa": 156,
+    "batik-pekalongan": 150,
+    "batik-priangan": 150,
+    "batik-sekar": 141,
+    "batik-sidoluhur": 150,
+    "batik-sidomukti": 138,
+    "batik-sogan": 150,
+    "batik-solo_parang": 260,
+    "batik-sulawesi_selatan_lontara": 160,
+    "batik-sumatera_barat_rumah_minang": 160,
+    "batik-sumatera_utara_boraspati": 160,
+    "batik-tambal": 150,
+    "batik-yogyakarta_kawung": 250,
+    "batik-yogyakarta_parang": 160
+  }
+}

models/batik_config_mobilenet_ultimate.json

@@ -0,0 +1,93 @@
+{
+  "img_size": 224,
+  "classes": [
+    "batik-aceh",
+    "batik-bali",
+    "batik-bali_barong",
+    "batik-bali_merak",
+    "batik-betawi",
+    "batik-celup",
+    "batik-ceplok",
+    "batik-ciamis",
+    "batik-corak_insang",
+    "batik-garutan",
+    "batik-gentongan",
+    "batik-ikat_celup",
+    "batik-jakarta_ondel_ondel",
+    "batik-jawa_barat_megamendung",
+    "batik-jawa_timur_pring",
+    "batik-kalimantan_dayak",
+    "batik-keraton",
+    "batik-lampung_gajah",
+    "batik-lasem",
+    "batik-madura_mataketeran",
+    "batik-maluku_pala",
+    "batik-ntb_lumbung",
+    "batik-papua_asmat",
+    "batik-papua_cendrawasih",
+    "batik-papua_tifa",
+    "batik-pekalongan",
+    "batik-priangan",
+    "batik-sekar",
+    "batik-sidoluhur",
+    "batik-sidomukti",
+    "batik-sogan",
+    "batik-solo_parang",
+    "batik-sulawesi_selatan_lontara",
+    "batik-sumatera_barat_rumah_minang",
+    "batik-sumatera_utara_boraspati",
+    "batik-tambal",
+    "batik-yogyakarta_kawung",
+    "batik-yogyakarta_parang"
+  ],
+  "num_classes": 38,
+  "accuracy": 0.9180107712745667,
+  "top3": 0.961693525314331,
+  "top5": 0.9704301357269287,
+  "loss": 1.1378017663955688,
+  "model": "MobileNetV2",
+  "training_strategy": "Two-stage (frozen + fine-tuning)",
+  "stage1_epochs": 30,
+  "stage2_epochs": 40,
+  "total_time_minutes": 151.78491247495015,
+  "class_counts": {
+    "batik-aceh": 80,
+    "batik-bali": 100,
+    "batik-bali_barong": 88,
+    "batik-bali_merak": 94,
+    "batik-betawi": 98,
+    "batik-celup": 100,
+    "batik-ceplok": 92,
+    "batik-ciamis": 102,
+    "batik-corak_insang": 156,
+    "batik-garutan": 106,
+    "batik-gentongan": 96,
+    "batik-ikat_celup": 134,
+    "batik-jakarta_ondel_ondel": 86,
+    "batik-jawa_barat_megamendung": 432,
+    "batik-jawa_timur_pring": 80,
+    "batik-kalimantan_dayak": 460,
+    "batik-keraton": 150,
+    "batik-lampung_gajah": 160,
+    "batik-lasem": 150,
+    "batik-madura_mataketeran": 156,
+    "batik-maluku_pala": 158,
+    "batik-ntb_lumbung": 160,
+    "batik-papua_asmat": 156,
+    "batik-papua_cendrawasih": 256,
+    "batik-papua_tifa": 156,
+    "batik-pekalongan": 150,
+    "batik-priangan": 150,
+    "batik-sekar": 141,
+    "batik-sidoluhur": 150,
+    "batik-sidomukti": 138,
+    "batik-sogan": 150,
+    "batik-solo_parang": 260,
+    "batik-sulawesi_selatan_lontara": 160,
+    "batik-sumatera_barat_rumah_minang": 160,
+    "batik-sumatera_utara_boraspati": 160,
+    "batik-tambal": 150,
+    "batik-yogyakarta_kawung": 250,
+    "batik-yogyakarta_parang": 160
+  }
+}

models/batik_model.tflite

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

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "api",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

railway.json

@@ -0,0 +1,10 @@
+{
+  "build": {
+    "builder": "nixpacks"
+  },
+  "deploy": {
+    "numReplicas": 1,
+    "sleepApplication": false,
+    "restartPolicyType": "always"
+  }
+}

render.yaml

@@ -0,0 +1,11 @@
+services:
+  - type: web
+    name: batiklens-api
+    env: python
+    region: singapore
+    plan: free
+    buildCommand: pip install -r requirements.txt
+    startCommand: gunicorn --bind 0.0.0.0:$PORT --workers 1 --timeout 120 app_mobilenet:app
+    envVars:
+      - key: PYTHON_VERSION
+        value: "3.10.12"

requirements.txt

@@ -0,0 +1,6 @@
+flask==3.0.0
+flask-cors==4.0.0
+ai-edge-litert>=1.0.0
+pillow>=10.0.0
+numpy>=1.26.0
+gunicorn==21.2.0

requirements_mobilenet.txt

@@ -0,0 +1,6 @@
+flask==3.0.0
+flask-cors==4.0.0
+tensorflow-cpu==2.15.0
+pillow==10.2.0
+numpy==1.26.4
+gunicorn==21.2.0

test_web.html

@@ -0,0 +1,337 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Batik Classifier - Test Web Interface</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        
+        .container {
+            background: white;
+            border-radius: 20px;
+            padding: 40px;
+            max-width: 600px;
+            width: 100%;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+        }
+        
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 10px;
+        }
+        
+        .subtitle {
+            text-align: center;
+            color: #666;
+            margin-bottom: 30px;
+        }
+        
+        .upload-area {
+            border: 3px dashed #667eea;
+            border-radius: 10px;
+            padding: 40px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s;
+            margin-bottom: 20px;
+        }
+        
+        .upload-area:hover {
+            border-color: #764ba2;
+            background: #f8f9ff;
+        }
+        
+        .upload-area.dragover {
+            background: #e8ecff;
+            border-color: #5568d3;
+        }
+        
+        input[type="file"] {
+            display: none;
+        }
+        
+        .upload-icon {
+            font-size: 48px;
+            margin-bottom: 10px;
+        }
+        
+        .btn {
+            width: 100%;
+            padding: 15px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 10px;
+            font-size: 16px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        
+        .btn:hover {
+            transform: translateY(-2px);
+        }
+        
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+        
+        .preview {
+            text-align: center;
+            margin: 20px 0;
+        }
+        
+        .preview img {
+            max-width: 100%;
+            max-height: 300px;
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        
+        .result {
+            margin-top: 20px;
+            padding: 20px;
+            background: #f8f9ff;
+            border-radius: 10px;
+            display: none;
+        }
+        
+        .result.show {
+            display: block;
+        }
+        
+        .prediction {
+            font-size: 24px;
+            font-weight: bold;
+            color: #667eea;
+            margin-bottom: 10px;
+        }
+        
+        .confidence {
+            font-size: 18px;
+            color: #666;
+            margin-bottom: 20px;
+        }
+        
+        .top-predictions {
+            margin-top: 20px;
+        }
+        
+        .top-predictions h3 {
+            margin-bottom: 10px;
+            color: #333;
+        }
+        
+        .pred-item {
+            display: flex;
+            justify-content: space-between;
+            padding: 10px;
+            background: white;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+        
+        .loading {
+            text-align: center;
+            display: none;
+        }
+        
+        .loading.show {
+            display: block;
+        }
+        
+        .spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #667eea;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 20px auto;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        .error {
+            color: #e74c3c;
+            background: #ffe8e8;
+            padding: 15px;
+            border-radius: 10px;
+            margin-top: 20px;
+            display: none;
+        }
+        
+        .error.show {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🎨 Batik Classifier</h1>
+        <p class="subtitle">AI-Powered Batik Motif Recognition (95% Accuracy)</p>
+        
+        <div class="upload-area" id="uploadArea">
+            <div class="upload-icon">📸</div>
+            <p><strong>Click to upload</strong> or drag and drop</p>
+            <p style="font-size: 14px; color: #999; margin-top: 5px;">PNG, JPG up to 10MB</p>
+            <input type="file" id="fileInput" accept="image/*">
+        </div>
+        
+        <div class="preview" id="preview"></div>
+        
+        <button class="btn" id="predictBtn" disabled>🔍 Analyze Batik</button>
+        
+        <div class="loading" id="loading">
+            <div class="spinner"></div>
+            <p>Analyzing image...</p>
+        </div>
+        
+        <div class="error" id="error"></div>
+        
+        <div class="result" id="result">
+            <div class="prediction">
+                <span id="predictionText"></span>
+            </div>
+            <div class="confidence">
+                Confidence: <strong id="confidenceText"></strong>
+            </div>
+            <div class="top-predictions">
+                <h3>📊 Top 5 Predictions:</h3>
+                <div id="topPredictions"></div>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        const API_URL = 'http://192.168.0.106:5000';
+        
+        const uploadArea = document.getElementById('uploadArea');
+        const fileInput = document.getElementById('fileInput');
+        const predictBtn = document.getElementById('predictBtn');
+        const preview = document.getElementById('preview');
+        const loading = document.getElementById('loading');
+        const result = document.getElementById('result');
+        const error = document.getElementById('error');
+        
+        let selectedFile = null;
+        
+        // Click to upload
+        uploadArea.addEventListener('click', () => fileInput.click());
+        
+        // File selection
+        fileInput.addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                handleFile(file);
+            }
+        });
+        
+        // Drag and drop
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('dragover');
+        });
+        
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('dragover');
+        });
+        
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('dragover');
+            const file = e.dataTransfer.files[0];
+            if (file && file.type.startsWith('image/')) {
+                handleFile(file);
+            }
+        });
+        
+        // Handle file
+        function handleFile(file) {
+            selectedFile = file;
+            
+            // Show preview
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                preview.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
+            };
+            reader.readAsDataURL(file);
+            
+            // Enable predict button
+            predictBtn.disabled = false;
+            
+            // Hide previous results
+            result.classList.remove('show');
+            error.classList.remove('show');
+        }
+        
+        // Predict
+        predictBtn.addEventListener('click', async () => {
+            if (!selectedFile) return;
+            
+            // Show loading
+            loading.classList.add('show');
+            result.classList.remove('show');
+            error.classList.remove('show');
+            predictBtn.disabled = true;
+            
+            try {
+                const formData = new FormData();
+                formData.append('image', selectedFile);
+                
+                const response = await fetch(`${API_URL}/predict`, {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                const data = await response.json();
+                
+                if (data.success) {
+                    // Show result
+                    document.getElementById('predictionText').textContent = data.prediction;
+                    document.getElementById('confidenceText').textContent = data.percentage;
+                    
+                    const topPredDiv = document.getElementById('topPredictions');
+                    topPredDiv.innerHTML = data.top_5_predictions.map((pred, idx) => `
+                        <div class="pred-item">
+                            <span>${idx + 1}. ${pred.class}</span>
+                            <strong>${pred.percentage}</strong>
+                        </div>
+                    `).join('');
+                    
+                    result.classList.add('show');
+                } else {
+                    error.textContent = data.error || 'Prediction failed';
+                    error.classList.add('show');
+                }
+            } catch (err) {
+                error.textContent = `Error: ${err.message}. Make sure the API server is running.`;
+                error.classList.add('show');
+            } finally {
+                loading.classList.remove('show');
+                predictBtn.disabled = false;
+            }
+        });
+    </script>
+</body>
+</html>