feat: implement backend image classification with TensorFlow.js model

- Extend shared types for image classification, including PredictionProbability, UploaderMetadata, and ImageClassificationRecord.
- Create image_classifications table in the database with necessary fields and foreign key constraints.
- Implement disease mappers to convert database rows to shared disease records.
- Develop uploader client to handle image uploads to external service.
- Create image model service to load and classify images using TensorFlow.js.
- Add API routes for image classification, including GET for history and POST for new classifications.
- Implement frontend components for image classification form and display results.
- Update dashboard to integrate image classification functionality and display results.
- Document implementation plan for backend image classification.

apps/web/src/components/image-classification-form.tsx

@@ -0,0 +1,155 @@
+import { useRef, useState } from 'react';
+import type { ImageClassificationRecord } from '@zeavis/shared';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { RiskBadge } from '@/components/risk-badge';
+
+export interface ImageClassificationFormProps {
+  onSubmit: (file: File) => Promise<void>;
+  isSubmitting: boolean;
+  latestResult: ImageClassificationRecord | null;
+}
+
+export function ImageClassificationForm({
+  onSubmit,
+  isSubmitting,
+  latestResult,
+}: ImageClassificationFormProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      if (!file.type.startsWith('image/')) {
+        setError('Silakan pilih file gambar');
+        setSelectedFile(null);
+        return;
+      }
+      setError(null);
+      setSelectedFile(file);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!selectedFile) {
+      setError('Silakan pilih file gambar');
+      return;
+    }
+
+    try {
+      await onSubmit(selectedFile);
+      setSelectedFile(null);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengunggah gambar');
+    }
+  };
+
+  const isFormValid = selectedFile !== null;
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Klasifikasi Gambar</CardTitle>
+          <CardDescription>Unggah foto daun jagung untuk klasifikasi otomatis</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <div className="rounded-md bg-red-50 p-3 text-sm text-red-800">{error}</div>
+            )}
+
+            <div>
+              <label htmlFor="image-file" className="block text-sm font-medium">
+                Pilih Gambar
+              </label>
+              <input
+                ref={fileInputRef}
+                id="image-file"
+                type="file"
+                accept="image/*"
+                onChange={handleFileChange}
+                disabled={isSubmitting}
+                className="mt-1 block w-full text-sm file:mr-4 file:rounded-md file:border-0 file:bg-primary file:px-4 file:py-2 file:text-sm file:font-semibold file:text-primary-foreground hover:file:bg-primary/90 disabled:opacity-50"
+              />
+              {selectedFile && (
+                <p className="mt-2 text-sm text-muted-foreground">
+                  File dipilih: {selectedFile.name}
+                </p>
+              )}
+            </div>
+
+            <Button
+              type="submit"
+              disabled={!isFormValid || isSubmitting}
+              className="w-full"
+            >
+              {isSubmitting ? 'Mengunggah...' : 'Unggah dan Klasifikasi'}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      {latestResult && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Hasil Klasifikasi Terbaru</CardTitle>
+            <CardDescription>Prediksi penyakit dari gambar terakhir</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="rounded-lg border border-border overflow-hidden">
+              <img
+                src={latestResult.imageUrl}
+                alt="Uploaded corn leaf"
+                className="w-full h-48 object-cover"
+              />
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <h4 className="font-semibold">{latestResult.disease.commonName}</h4>
+                  <p className="text-sm text-muted-foreground">{latestResult.disease.label}</p>
+                </div>
+                <RiskBadge level={latestResult.disease.riskLevel} />
+              </div>
+
+              <div className="rounded-md bg-muted p-3">
+                <p className="text-sm font-medium">
+                  Kepercayaan: {(latestResult.confidence * 100).toFixed(1)}%
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <p className="text-sm font-medium">Rekomendasi awal:</p>
+                <ul className="space-y-1 text-sm text-muted-foreground">
+                  {latestResult.disease.recommendations.slice(0, 3).map((recommendation) => (
+                    <li key={recommendation}>• {recommendation}</li>
+                  ))}
+                </ul>
+              </div>
+
+              <p className="text-xs text-muted-foreground">
+                {new Date(latestResult.createdAt).toLocaleDateString('id-ID', {
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric',
+                  hour: '2-digit',
+                  minute: '2-digit',
+                })}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

apps/web/src/lib/api-client.ts

@@ -3,6 +3,7 @@ import type {
   DiseaseCatalogItem,
   ManualClassificationRequest,
   ManualClassificationRecord,
+  ImageClassificationRecord,
   DashboardSummary,
 } from '@zeavis/shared';
 
@@ -20,7 +21,6 @@ async function fetchApi<T>(endpoint: string, options?: RequestInit): Promise<T>
         errorMessage = errorData.error;
       }
     } catch {
-      // Response is not JSON, use default error message
     }
     throw new Error(errorMessage);
   }
@@ -53,6 +53,20 @@ export const apiClient = {
     });
   },
 
+  async getImageClassifications(): Promise<ImageClassificationRecord[]> {
+    return fetchApi('/api/v1/classifications/image');
+  },
+
+  async createImageClassification(file: File): Promise<ImageClassificationRecord> {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    return fetchApi('/api/v1/classifications/image', {
+      method: 'POST',
+      body: formData,
+    });
+  },
+
   async getDashboardSummary(): Promise<DashboardSummary> {
     return fetchApi('/api/v1/dashboard/summary');
   },

apps/web/src/pages/dashboard-page.tsx

@@ -1,9 +1,10 @@
 import { useQueries, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Link } from 'react-router-dom';
-import { BookOpen, History, Leaf, LayoutDashboard, TrendingUp } from 'lucide-react';
+import { BookOpen, History, Leaf, LayoutDashboard, TrendingUp, Image } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { ManualClassificationForm } from '@/components/manual-classification-form';
+import { ImageClassificationForm } from '@/components/image-classification-form';
 import { RiskBadge } from '@/components/risk-badge';
 import { useUiStore } from '@/store/ui-store';
 import { apiClient } from '@/lib/api-client';
@@ -12,7 +13,7 @@ export function DashboardPage() {
   const { dashboardCompact, toggleDashboardCompact } = useUiStore();
   const queryClient = useQueryClient();
 
-  const [diseasesQuery, summaryQuery, classificationsQuery] = useQueries({
+  const [diseasesQuery, summaryQuery, classificationsQuery, imageClassificationsQuery] = useQueries({
     queries: [
       {
         queryKey: ['diseases'],
@@ -26,6 +27,10 @@ export function DashboardPage() {
         queryKey: ['manual-classifications'],
         queryFn: () => apiClient.getManualClassifications(),
       },
+      {
+        queryKey: ['image-classifications'],
+        queryFn: () => apiClient.getImageClassifications(),
+      },
     ],
   });
 
@@ -39,9 +44,20 @@ export function DashboardPage() {
     },
   });
 
+  const createImageClassificationMutation = useMutation({
+    mutationFn: async (file: File) => {
+      return await apiClient.createImageClassification(file);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['image-classifications'] });
+      queryClient.invalidateQueries({ queryKey: ['dashboard-summary'] });
+    },
+  });
+
   const diseases = diseasesQuery.data || [];
   const summary = summaryQuery.data;
   const classifications = classificationsQuery.data || [];
+  const imageClassifications = imageClassificationsQuery.data || [];
 
   const isLoadingData = diseasesQuery.isLoading || summaryQuery.isLoading;
   const hasError = diseasesQuery.error || summaryQuery.error;
@@ -220,6 +236,14 @@ export function DashboardPage() {
               </Card>
             )}
 
+            <ImageClassificationForm
+              onSubmit={async (file) => {
+                await createImageClassificationMutation.mutateAsync(file);
+              }}
+              isSubmitting={createImageClassificationMutation.isPending}
+              latestResult={imageClassifications[0] ?? null}
+            />
+
             <ManualClassificationForm
               diseases={diseases}
               onSubmit={async (payload) => {
@@ -228,38 +252,45 @@ export function DashboardPage() {
               isSubmitting={createClassificationMutation.isPending}
             />
 
-            {classifications.length > 0 && (
+            {imageClassifications.length > 0 && (
               <Card>
                 <CardHeader>
                   <CardTitle className="flex items-center gap-2">
-                    <Leaf className="h-5 w-5" />
-                    Riwayat Laporan
+                    <Image className="h-5 w-5" />
+                    Riwayat Klasifikasi Gambar
                   </CardTitle>
                   <CardDescription>
-                    {classifications.length} laporan pengamatan penyakit
+                    {imageClassifications.length} gambar yang diklasifikasi
                   </CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <div className="space-y-3">
-                    {classifications.slice(0, 5).map((classification) => (
-                      <div key={classification.id} className="rounded-lg border border-border p-3">
-                        <div className="flex items-start justify-between gap-4 mb-2">
-                          <div>
-                            <h4 className="text-sm font-semibold">
-                              {classification.disease.commonName}
-                            </h4>
-                            <p className="text-xs text-muted-foreground">
-                              {classification.disease.label}
-                            </p>
+                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                    {imageClassifications.slice(0, 6).map((classification) => (
+                      <div key={classification.id} className="rounded-lg border border-border overflow-hidden">
+                        <img
+                          src={classification.imageUrl}
+                          alt="Classified corn leaf"
+                          className="w-full h-32 object-cover"
+                        />
+                        <div className="p-3 space-y-2">
+                          <div className="flex items-start justify-between gap-2">
+                            <div className="flex-1">
+                              <h4 className="text-sm font-semibold">
+                                {classification.disease.commonName}
+                              </h4>
+                              <p className="text-xs text-muted-foreground">
+                                {classification.disease.label}
+                              </p>
+                            </div>
+                            <RiskBadge level={classification.disease.riskLevel} className="text-xs" />
                           </div>
-                          <RiskBadge level={classification.disease.riskLevel} />
+                          <div className="text-xs text-muted-foreground">
+                            Kepercayaan: {(classification.confidence * 100).toFixed(1)}%
+                          </div>
+                          <p className="text-xs text-muted-foreground">
+                            {new Date(classification.createdAt).toLocaleDateString('id-ID')}
+                          </p>
                         </div>
-                        <p className="text-xs text-muted-foreground mb-1">
-                          {classification.observation}
-                        </p>
-                        <p className="text-xs text-muted-foreground">
-                          {classification.location} • {new Date(classification.createdAt).toLocaleDateString('id-ID')}
-                        </p>
                       </div>
                     ))}
                   </div>