Panduan Lengkap: Dokumentasi API Face Recognition v2.0
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Face Recognition API Documentation</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
.code-block { background: #1e293b; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; }
.endpoint { background: #334155; padding: 1rem; border-left: 4px solid #3b82f6; margin: 1rem 0; }
pre { margin: 0; color: #e2e8f0; }
.method-get { color: #10b981; }
.method-post { color: #3b82f6; }
.method-put { color: #f59e0b; }
.method-delete { color: #ef4444; }
</style>
</head>
<body class="bg-gray-900 text-gray-100">
<!-- Header -->
<header class="bg-gray-800 border-b border-gray-700 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-robot text-3xl text-blue-500 mr-3"></i>
<div>
<h1 class="text-2xl font-bold">Face Recognition API</h1>
<p class="text-sm text-gray-400">Version 2.0 - Complete Documentation</p>
</div>
</div>
<a href="http://localhost:8192" class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700">
<i class="fas fa-home mr-2"></i>Dashboard
</a>
</div>
</div>
</header>
<div class="max-w-7xl mx-auto px-4 py-8">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
<!-- Sidebar Navigation -->
<aside class="lg:col-span-1">
<nav class="bg-gray-800 rounded-lg p-4 sticky top-20">
<h3 class="font-bold mb-4 text-blue-400">Contents</h3>
<ul class="space-y-2 text-sm">
<li><a href="#overview" class="hover:text-blue-400">Overview</a></li>
<li><a href="#authentication" class="hover:text-blue-400">Authentication</a></li>
<li><a href="#endpoints" class="hover:text-blue-400">API Endpoints</a></li>
<li class="pl-4"><a href="#health" class="hover:text-blue-400">- Health Check</a></li>
<li class="pl-4"><a href="#process" class="hover:text-blue-400">- Process Image</a></li>
<li class="pl-4"><a href="#add-face" class="hover:text-blue-400">- Add Face</a></li>
<li class="pl-4"><a href="#list-faces" class="hover:text-blue-400">- List Faces</a></li>
<li class="pl-4"><a href="#video" class="hover:text-blue-400">- Video Processing</a></li>
<li><a href="#errors" class="hover:text-blue-400">Error Codes</a></li>
<li><a href="#examples" class="hover:text-blue-400">Code Examples</a></li>
</ul>
</nav>
</aside>
<!-- Main Content -->
<main class="lg:col-span-3 space-y-8">
<!-- Overview -->
<section id="overview" class="bg-gray-800 rounded-lg p-6">
<h2 class="text-3xl font-bold mb-4">
<i class="fas fa-info-circle text-blue-500 mr-2"></i>Overview
</h2>
<p class="text-gray-300 mb-4">
Face Recognition API adalah layanan REST API untuk deteksi dan pengenalan wajah menggunakan teknologi AI.
API ini mendukung berbagai use case seperti data warga, karyawan, siswa, dan sistem keamanan.
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
<div class="bg-gray-700 p-4 rounded-lg">
<i class="fas fa-server text-2xl text-blue-400 mb-2"></i>
<h4 class="font-bold">Base URL</h4>
<code class="text-sm text-gray-300">http://localhost:8192/api/v1</code>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<i class="fas fa-code text-2xl text-green-400 mb-2"></i>
<h4 class="font-bold">Format</h4>
<p class="text-sm text-gray-300">JSON</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<i class="fas fa-key text-2xl text-yellow-400 mb-2"></i>
<h4 class="font-bold">Auth</h4>
<p class="text-sm text-gray-300">API Key (Header)</p>
</div>
</div>
</section>
<!-- Authentication -->
<section id="authentication" class="bg-gray-800 rounded-lg p-6">
<h2 class="text-3xl font-bold mb-4">
<i class="fas fa-lock text-blue-500 mr-2"></i>Authentication
</h2>
<p class="text-gray-300 mb-4">
Semua request API memerlukan API Key yang dikirim melalui header.
</p>
<h3 class="text-xl font-bold mb-3">Mendapatkan API Key:</h3>
<ol class="list-decimal list-inside space-y-2 text-gray-300 mb-6">
<li>Login ke dashboard menggunakan WhatsApp OTP</li>
<li>Klik menu "Buat API Key Baru"</li>
<li>Pilih tipe project (warga/karyawan/siswa)</li>
<li>Salin API key yang dihasilkan</li>
</ol>
<h3 class="text-xl font-bold mb-3">Menggunakan API Key:</h3>
<div class="code-block">
<pre>X-API-Key: your-api-key-here</pre>
</div>
<div class="bg-yellow-900/30 border border-yellow-700 rounded-lg p-4 mt-4">
<i class="fas fa-exclamation-triangle text-yellow-400 mr-2"></i>
<strong>Penting:</strong> Jangan pernah expose API key di client-side code atau repository publik.
</div>
</section>
<!-- Endpoints -->
<section id="endpoints" class="bg-gray-800 rounded-lg p-6">
<h2 class="text-3xl font-bold mb-6">
<i class="fas fa-plug text-blue-500 mr-2"></i>API Endpoints
</h2>
<!-- Health Check -->
<div id="health" class="endpoint">
<h3 class="text-xl font-bold mb-2">
<span class="method-get">GET</span> /health
</h3>
<p class="text-gray-300 mb-4">Health check untuk memastikan API berjalan dengan baik.</p>
<h4 class="font-bold mb-2">Request:</h4>
<div class="code-block mb-4">
<pre>GET /api/v1/health HTTP/1.1
Host: localhost:8192</pre>
</div>
<h4 class="font-bold mb-2">Response:</h4>
<div class="code-block">
<pre>{
"status": "ok",
"version": "2.0",
"face_recognition_enabled": true,
"known_faces_count": 15
}</pre>
</div>
<h4 class="font-bold mt-4 mb-2">cURL Example:</h4>
<div class="code-block">
<pre>curl http://localhost:8192/api/v1/health</pre>
</div>
</div>
<!-- Process Image -->
<div id="process" class="endpoint">
<h3 class="text-xl font-bold mb-2">
<span class="method-post">POST</span> /process
</h3>
<p class="text-gray-300 mb-4">
Mendeteksi dan mengenali wajah dari gambar yang diupload.
</p>
<h4 class="font-bold mb-2">Headers:</h4>
<div class="code-block mb-4">
<pre>X-API-Key: your-api-key
Content-Type: multipart/form-data</pre>
</div>
<h4 class="font-bold mb-2">Parameters:</h4>
<table class="w-full text-sm mb-4">
<thead class="bg-gray-700">
<tr>
<th class="p-2 text-left">Parameter</th>
<th class="p-2 text-left">Type</th>
<th class="p-2 text-left">Required</th>
<th class="p-2 text-left">Description</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-700">
<tr>
<td class="p-2"><code>image</code></td>
<td class="p-2">file</td>
<td class="p-2 text-green-400">Yes</td>
<td class="p-2">File gambar (JPG, PNG)</td>
</tr>
<tr>
<td class="p-2"><code>analyze_with_gemini</code></td>
<td class="p-2">boolean</td>
<td class="p-2 text-gray-400">No</td>
<td class="p-2">Analisis dengan Gemini AI</td>
</tr>
<tr>
<td class="p-2"><code>custom_question</code></td>
<td class="p-2">string</td>
<td class="p-2 text-gray-400">No</td>
<td class="p-2">Pertanyaan custom untuk Gemini</td>
</tr>
</tbody>
</table>
<h4 class="font-bold mb-2">Response Success:</h4>
<div class="code-block mb-4">
<pre>{
"face_count": 2,
"faces": [
{
"name": "John Doe",
"confidence": 0.95,
"bbox": [100, 150, 300, 400],
"info": {
"id": "EMP001",
"department": "IT"
}
},
{
"name": "Unknown",
"confidence": 0.0,
"bbox": [500, 200, 700, 450]
}
],
"result_url": "/api/v1/images/results/result_20250105_123456.jpg"
}</pre>
</div>
<h4 class="font-bold mb-2">cURL Example:</h4>
<div class="code-block">
<pre>curl -X POST http://localhost:8192/api/v1/process \
-H "X-API-Key: your-api-key" \
-F "[email protected]" \
-F "analyze_with_gemini=true"</pre>
</div>
</div>
<!-- Add Face -->
<div id="add-face" class="endpoint">
<h3 class="text-xl font-bold mb-2">
<span class="method-post">POST</span> /faces/add
</h3>
<p class="text-gray-300 mb-4">
Menambahkan wajah baru ke database untuk dikenali.
</p>
<h4 class="font-bold mb-2">Headers:</h4>
<div class="code-block mb-4">
<pre>X-API-Key: your-api-key
Content-Type: multipart/form-data</pre>
</div>
<h4 class="font-bold mb-2">Parameters:</h4>
<table class="w-full text-sm mb-4">
<thead class="bg-gray-700">
<tr>
<th class="p-2 text-left">Parameter</th>
<th class="p-2 text-left">Type</th>
<th class="p-2 text-left">Required</th>
<th class="p-2 text-left">Description</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-700">
<tr>
<td class="p-2"><code>image</code></td>
<td class="p-2">file</td>
<td class="p-2 text-green-400">Yes</td>
<td class="p-2">Foto wajah yang jelas</td>
</tr>
<tr>
<td class="p-2"><code>name</code></td>
<td class="p-2">string</td>
<td class="p-2 text-green-400">Yes</td>
<td class="p-2">Nama lengkap orang</td>
</tr>
<tr>
<td class="p-2"><code>info</code></td>
<td class="p-2">JSON string</td>
<td class="p-2 text-gray-400">No</td>
<td class="p-2">Informasi tambahan</td>
</tr>
</tbody>
</table>
<h4 class="font-bold mb-2">Info JSON Format:</h4>
<div class="code-block mb-4">
<pre>// Untuk Warga
{
"nik": "3201012345678901",
"rt_rw": "01/05",
"alamat": "Jl. Merdeka No. 123",
"phone": "081234567890"
}
// Untuk Karyawan
{
"employee_id": "EMP001",
"department": "IT",
"position": "Software Engineer",
"join_date": "2023-01-15"
}
// Untuk Siswa
{
"nis": "2023001",
"kelas": "XII IPA 1",
"phone_ortu": "081234567890"
}</pre>
</div>
<h4 class="font-bold mb-2">Response Success:</h4>
<div class="code-block mb-4">
<pre>{
"status": "success",
"message": "Face for John Doe added successfully",
"face_id": "abc123-def456-ghi789"
}</pre>
</div>
<h4 class="font-bold mb-2">cURL Example:</h4>
<div class="code-block">
<pre>curl -X POST http://localhost:8192/api/v1/faces/add \
-H "X-API-Key: your-api-key" \
-F "image=@john_doe.jpg" \
-F "name=John Doe" \
-F 'info={"employee_id":"EMP001","department":"IT"}'</pre>
</div>
</div>
<!-- List Faces -->
<div id="list-faces" class="endpoint">
<h3 class="text-xl font-bold mb-2">
<span class="method-get">GET</span> /faces
</h3>
<p class="text-gray-300 mb-4">
Mendapatkan daftar semua wajah yang terdaftar dalam database.
</p>
<h4 class="font-bold mb-2">Headers:</h4>
<div class="code-block mb-4">
<pre>X-API-Key: your-api-key</pre>
</div>
<h4 class="font-bold mb-2">Response:</h4>
<div class="code-block mb-4">
<pre>{
"faces": [
{
"id": 0,
"name": "John Doe",
"info": {
"employee_id": "EMP001",
"department": "IT"
}
},
{
"id": 1,
"name": "Jane Smith",
"info": {
"nis": "2023001",
"kelas": "XII IPA 1"
}
}
],
"count": 2
}</pre>
</div>
<h4 class="font-bold mb-2">cURL Example:</h4>
<div class="code-block">
<pre>curl -X GET http://localhost:8192/api/v1/faces \
-H "X-API-Key: your-api-key"</pre>
</div>
</div>
<!-- Video Processing -->
<div id="video" class="endpoint">
<h3 class="text-xl font-bold mb-2">
<span class="method-post">POST</span> /video/upload
</h3>
<p class="text-gray-300 mb-4">
Upload dan proses video untuk deteksi wajah (asynchronous).
</p>
<h4 class="font-bold mb-2">Parameters:</h4>
<table class="w-full text-sm mb-4">
<thead class="bg-gray-700">
<tr>
<th class="p-2 text-left">Parameter</th>
<th class="p-2 text-left">Type</th>
<th class="p-2 text-left">Default</th>
<th class="p-2 text-left">Description</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-700">
<tr>
<td class="p-2"><code>video</code></td>
<td class="p-2">file</td>
<td class="p-2">-</td>
<td class="p-2">File video (MP4, AVI, MOV)</td>
</tr>
<tr>
<td class="p-2"><code>fps_process</code></td>
<td class="p-2">integer</td>
<td class="p-2">1</td>
<td class="p-2">Frame per detik diproses</td>
</tr>
</tbody>
</table>
<h4 class="font-bold mb-2">Response:</h4>
<div class="code-block mb-4">
<pre>{
"status": "success",
"session_id": "abc-123-def-456",
"message": "Video processing started"
}</pre>
</div>
<h4 class="font-bold mb-2">Check Status:</h4>
<div class="code-block">
<pre>GET /api/v1/video/status/{session_id}
Response:
{
"status": "processing",
"progress": 45,
"message": "Processing frame 45/100",
"detected_faces": 12
}</pre>
</div>
</div>
</section>
<!-- Error Codes -->
<section id="errors" class="bg-gray-800 rounded-lg p-6">
<h2 class="text-3xl font-bold mb-4">
<i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>Error Codes
</h2>
<table class="w-full">
<thead class="bg-gray-700">
<tr>
<th class="p-3 text-left">Code</th>
<th class="p-3 text-left">Description</th>
<th class="p-3 text-left">Solution</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-700">
<tr>
<td class="p-3 font-mono text-yellow-400">400</td>
<td class="p-3">Bad Request</td>
<td class="p-3">Check request parameters</td>
</tr>
<tr>
<td class="p-3 font-mono text-red-400">401</td>
<td class="p-3">Unauthorized</td>
<td class="p-3">Verify API key is correct</td>
</tr>
<tr>
<td class="p-3 font-mono text-red-400">403</td>
<td class="p-3">Forbidden</td>
<td class="p-3">API key expired or inactive</td>
</tr>
<tr>
<td class="p-3 font-mono text-orange-400">404</td>
<td class="p-3">Not Found</td>
<td class="p-3">Check endpoint URL</td>
</tr>
<tr>
<td class="p-3 font-mono text-orange-400">429</td>
<td class="p-3">Rate Limit Exceeded</td>
<td class="p-3">Wait before retry</td>
</tr>
<tr>
<td class="p-3 font-mono text-red-400">500</td>
<td class="p-3">Internal Server Error</td>
<td class="p-3">Contact administrator</td>
</tr>
</tbody>
</table>
<h3 class="text-xl font-bold mt-6 mb-3">Error Response Format:</h3>
<div class="code-block">
<pre>{
"error": "Invalid API key",
"timestamp": "2025-10-05T23:30:00Z"
}</pre>
</div>
</section>
<!-- Code Examples -->
<section id="examples" class="bg-gray-800 rounded-lg p-6">
<h2 class="text-3xl font-bold mb-4">
<i class="fas fa-code text-blue-500 mr-2"></i>Code Examples
</h2>
<!-- Python -->
<h3 class="text-xl font-bold mb-3">Python</h3>
<div class="code-block mb-6">
<pre>import requests
API_URL = "http://localhost:8192/api/v1"
API_KEY = "your-api-key"
# Add face
with open('photo.jpg', 'rb') as img:
response = requests.post(
f"{API_URL}/faces/add",
headers={"X-API-Key": API_KEY},
files={"image": img},
data={
"name": "John Doe",
"info": '{"id":"EMP001","dept":"IT"}'
}
)
print(response.json())
# Recognize faces
with open('group.jpg', 'rb') as img:
response = requests.post(
f"{API_URL}/process",
headers={"X-API-Key": API_KEY},
files={"image": img}
)
result = response.json()
print(f"Found {result['face_count']} faces")</pre>
</div>
<!-- JavaScript -->
<h3 class="text-xl font-bold mb-3">JavaScript (Node.js)</h3>
<div class="code-block mb-6">
<pre>const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');
const API_URL = 'http://localhost:8192/api/v1';
const API_KEY = 'your-api-key';
// Add face
async function addFace() {
const formData = new FormData();
formData.append('image', fs.createReadStream('photo.jpg'));
formData.append('name', 'John Doe');
formData.append('info', JSON.stringify({id: 'EMP001'}));
const response = await axios.post(`${API_URL}/faces/add`, formData, {
headers: {
'X-API-Key': API_KEY,
...formData.getHeaders()
}
});
console.log(response.data);
}
addFace();</pre>
</div>
<!-- PHP -->
<h3 class="text-xl font-bold mb-3">PHP</h3>
<div class="code-block">
<pre><?php
$apiUrl = 'http://localhost:8192/api/v1';
$apiKey = 'your-api-key';
// Add face
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "$apiUrl/faces/add");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
$data = [
'image' => new CURLFile('photo.jpg'),
'name' => 'John Doe',
'info' => json_encode(['id' => 'EMP001'])
];
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
"X-API-Key: $apiKey"
]);
$result = curl_exec($ch);
curl_close($ch);
print_r(json_decode($result));
?></pre>
</div>
</section>
<!-- Support -->
<section class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-8 text-center">
<h2 class="text-2xl font-bold mb-4">Need Help?</h2>
<p class="mb-6">Hubungi kami jika ada pertanyaan atau butuh bantuan</p>
<div class="flex justify-center space-x-4">
<a href="https://wa.me/6281241314446" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-bold hover:bg-gray-100">
<i class="fab fa-whatsapp mr-2"></i>WhatsApp Support
</a>
<a href="mailto:[email protected]" class="bg-gray-800 px-6 py-3 rounded-lg font-bold hover:bg-gray-700">
<i class="fas fa-envelope mr-2"></i>Email
</a>
</div>
</section>
</main>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800 border-t border-gray-700 mt-12 py-6">
<div class="max-w-7xl mx-auto px-4 text-center text-gray-400 text-sm">
<p>© 2025 Face Recognition API Service. All rights reserved.</p>
<p class="mt-2">Powered by InsightFace & Gemini AI</p>
</div>
</footer>
</body>
</html>
