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.
2026-05-22 15:13:22 +00:00
parent 229db82a08
commit 15c6be9e84
19 changed files with 1750 additions and 33 deletions
@@ -0,0 +1,17 @@
+CREATE TABLE IF NOT EXISTS "image_classifications" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"predicted_disease_slug" varchar(80) NOT NULL,
+	"confidence" real NOT NULL,
+	"probabilities" jsonb NOT NULL,
+	"image_url" text NOT NULL,
+	"original_file_name" varchar(240) NOT NULL,
+	"uploader_public_id" varchar(160) NOT NULL,
+	"uploader_payload" jsonb NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "image_classifications" ADD CONSTRAINT "image_classifications_predicted_disease_slug_disease_catalog_slug_fk" FOREIGN KEY ("predicted_disease_slug") REFERENCES "public"."disease_catalog"("slug") ON DELETE no action ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
@@ -0,0 +1,281 @@
+{
+  "id": "16700e2c-ff8f-4864-a71a-6f4b98a1313a",
+  "prevId": "71e2eeba-4f8f-48bc-8bcf-63201334aa65",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.app_events": {
+      "name": "app_events",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(120)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.disease_catalog": {
+      "name": "disease_catalog",
+      "schema": "",
+      "columns": {
+        "slug": {
+          "name": "slug",
+          "type": "varchar(80)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "label": {
+          "name": "label",
+          "type": "varchar(80)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "common_name": {
+          "name": "common_name",
+          "type": "varchar(120)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "summary": {
+          "name": "summary",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "symptoms": {
+          "name": "symptoms",
+          "type": "text[]",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "recommendations": {
+          "name": "recommendations",
+          "type": "text[]",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "risk_level": {
+          "name": "risk_level",
+          "type": "varchar(20)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "accent_color": {
+          "name": "accent_color",
+          "type": "varchar(40)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "display_order": {
+          "name": "display_order",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.image_classifications": {
+      "name": "image_classifications",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "predicted_disease_slug": {
+          "name": "predicted_disease_slug",
+          "type": "varchar(80)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "confidence": {
+          "name": "confidence",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "probabilities": {
+          "name": "probabilities",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "image_url": {
+          "name": "image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "original_file_name": {
+          "name": "original_file_name",
+          "type": "varchar(240)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "uploader_public_id": {
+          "name": "uploader_public_id",
+          "type": "varchar(160)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "uploader_payload": {
+          "name": "uploader_payload",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "image_classifications_predicted_disease_slug_disease_catalog_slug_fk": {
+          "name": "image_classifications_predicted_disease_slug_disease_catalog_slug_fk",
+          "tableFrom": "image_classifications",
+          "tableTo": "disease_catalog",
+          "columnsFrom": [
+            "predicted_disease_slug"
+          ],
+          "columnsTo": [
+            "slug"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.manual_classifications": {
+      "name": "manual_classifications",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "disease_slug": {
+          "name": "disease_slug",
+          "type": "varchar(80)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "observation": {
+          "name": "observation",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "location": {
+          "name": "location",
+          "type": "varchar(160)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "manual_classifications_disease_slug_disease_catalog_slug_fk": {
+          "name": "manual_classifications_disease_slug_disease_catalog_slug_fk",
+          "tableFrom": "manual_classifications",
+          "tableTo": "disease_catalog",
+          "columnsFrom": [
+            "disease_slug"
+          ],
+          "columnsTo": [
+            "slug"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
@@ -8,6 +8,13 @@
      "when": 1779458573080,
      "tag": "0000_harsh_arachne",
      "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "7",
+      "when": 1779461286348,
+      "tag": "0001_cute_lyja",
+      "breakpoints": true
    }
  ]
 }
@@ -11,9 +11,12 @@
    "db:migrate": "drizzle-kit migrate"
  },
  "dependencies": {
+    "@tensorflow/tfjs": "4.22.0",
    "@zeavis/shared": "workspace:*",
    "drizzle-orm": "^0.36.4",
    "elysia": "^1.1.25",
+    "jpeg-js": "0.4.4",
+    "pngjs": "7.0.0",
    "postgres": "^3.4.5"
  },
  "devDependencies": {
@@ -1,4 +1,4 @@
-import { pgTable, timestamp, uuid, varchar, text, integer } from 'drizzle-orm/pg-core';
+import { pgTable, timestamp, uuid, varchar, text, integer, jsonb, real } from 'drizzle-orm/pg-core';

 export const appEvents = pgTable('app_events', {
  id: uuid('id').primaryKey().defaultRandom(),
@@ -30,3 +30,17 @@ export const manualClassifications = pgTable('manual_classifications', {
  location: varchar('location', { length: 160 }).notNull(),
  createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
 });
+
+export const imageClassifications = pgTable('image_classifications', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  predictedDiseaseSlug: varchar('predicted_disease_slug', { length: 80 })
+    .notNull()
+    .references(() => diseaseCatalog.slug),
+  confidence: real('confidence').notNull(),
+  probabilities: jsonb('probabilities').notNull(),
+  imageUrl: text('image_url').notNull(),
+  originalFileName: varchar('original_file_name', { length: 240 }).notNull(),
+  uploaderPublicId: varchar('uploader_public_id', { length: 160 }).notNull(),
+  uploaderPayload: jsonb('uploader_payload').notNull(),
+  createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
+});
@@ -0,0 +1,17 @@
+import type { DiseaseCatalogItem, DiseaseSlug, DiseaseLabel, RiskLevel } from '@zeavis/shared';
+import type { diseaseCatalog } from '../db/schema';
+
+export function toDisease(row: typeof diseaseCatalog.$inferSelect): DiseaseCatalogItem {
+  return {
+    slug: row.slug as DiseaseSlug,
+    label: row.label as DiseaseLabel,
+    commonName: row.commonName,
+    summary: row.summary,
+    description: row.description,
+    symptoms: row.symptoms,
+    recommendations: row.recommendations,
+    riskLevel: row.riskLevel as RiskLevel,
+    accentColor: row.accentColor,
+    displayOrder: row.displayOrder,
+  };
+}
@@ -12,6 +12,13 @@ export function notFound(message: string): Response {
  });
 }

+export function badGateway(message: string): Response {
+  return new Response(JSON.stringify({ error: message }), {
+    status: 502,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}
+
 export function serviceUnavailable(message: string): Response {
  return new Response(JSON.stringify({ error: message }), {
    status: 503,
@@ -0,0 +1,134 @@
+import * as tf from '@tensorflow/tfjs';
+import * as jpeg from 'jpeg-js';
+import { PNG } from 'pngjs';
+import { existsSync } from 'fs';
+import { resolve } from 'path';
+import type { DiseaseSlug, DiseaseLabel, PredictionProbability } from '@zeavis/shared';
+
+const DISEASE_CLASSES: Array<{ slug: DiseaseSlug; label: DiseaseLabel }> = [
+  { slug: 'bercak-daun', label: 'Bercak Daun' },
+  { slug: 'daun-sehat', label: 'Daun Sehat' },
+  { slug: 'karat-daun', label: 'Karat Daun' },
+  { slug: 'hawar-daun', label: 'Hawar Daun' },
+];
+
+function resolveModelPath() {
+  const candidates = [
+    resolve(process.cwd(), 'Machine_Learning/model/tfjs_model/model.json'),
+    resolve(process.cwd(), '../../Machine_Learning/model/tfjs_model/model.json'),
+  ];
+
+  const modelPath = candidates.find((candidate) => existsSync(candidate));
+  if (!modelPath) {
+    throw new Error('TFJS model file was not found');
+  }
+
+  return modelPath;
+}
+
+let modelPromise: Promise<tf.GraphModel> | null = null;
+
+async function loadModel(): Promise<tf.GraphModel> {
+  if (modelPromise) {
+    return modelPromise;
+  }
+
+  modelPromise = (async () => {
+    try {
+      const fileUrl = `file://${resolveModelPath()}`;
+      return await tf.loadGraphModel(fileUrl);
+    } catch (error) {
+      throw new Error(`Failed to load TFJS model: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  })();
+
+  return modelPromise;
+}
+
+export type ClassificationResult = {
+  predictedDiseaseSlug: DiseaseSlug;
+  confidence: number;
+  probabilities: PredictionProbability[];
+};
+
+export async function classifyImage(file: File): Promise<ClassificationResult> {
+  if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
+    throw new Error('File must be JPEG or PNG');
+  }
+
+  const buffer = await file.arrayBuffer();
+  const uint8Array = new Uint8Array(buffer);
+
+  let imageData: { data: Uint8Array; width: number; height: number };
+
+  if (file.type === 'image/jpeg') {
+    const decoded = jpeg.decode(uint8Array, { useTArray: true });
+    imageData = {
+      data: decoded.data,
+      width: decoded.width,
+      height: decoded.height,
+    };
+  } else {
+    const png = new PNG();
+    await new Promise<void>((resolve, reject) => {
+      png.parse(Buffer.from(uint8Array), (err: Error | null) => {
+        if (err) reject(err);
+        else resolve();
+      });
+    });
+    imageData = {
+      data: png.data,
+      width: png.width,
+      height: png.height,
+    };
+  }
+
+  const imageTensor = tf.tidy(() => {
+    const rgb = new Uint8Array(imageData.width * imageData.height * 3);
+    for (let source = 0, target = 0; source < imageData.data.length; source += 4, target += 3) {
+      rgb[target] = imageData.data[source];
+      rgb[target + 1] = imageData.data[source + 1];
+      rgb[target + 2] = imageData.data[source + 2];
+    }
+
+    return tf
+      .tensor3d(rgb, [imageData.height, imageData.width, 3], 'int32')
+      .resizeBilinear([224, 224])
+      .toFloat()
+      .expandDims(0);
+  });
+
+  try {
+    const model = await loadModel();
+    const predictions = model.predict(imageTensor) as tf.Tensor;
+
+    try {
+      const scoresArray = await predictions.data();
+
+      let maxScore = -Infinity;
+      let maxIndex = 0;
+      for (let i = 0; i < scoresArray.length; i++) {
+        if (scoresArray[i] > maxScore) {
+          maxScore = scoresArray[i];
+          maxIndex = i;
+        }
+      }
+
+      const probabilities: PredictionProbability[] = DISEASE_CLASSES.map((disease, index) => ({
+        diseaseSlug: disease.slug,
+        label: disease.label,
+        confidence: Math.max(0, Math.min(1, scoresArray[index])),
+      })).sort((a, b) => b.confidence - a.confidence);
+
+      return {
+        predictedDiseaseSlug: DISEASE_CLASSES[maxIndex].slug,
+        confidence: Math.max(0, Math.min(1, maxScore)),
+        probabilities,
+      };
+    } finally {
+      predictions.dispose();
+    }
+  } finally {
+    imageTensor.dispose();
+  }
+}
@@ -0,0 +1,28 @@
+import type { UploaderMetadata } from '@zeavis/shared';
+
+export async function uploadImageToStorage(file: File): Promise<UploaderMetadata> {
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('fileName', file.name);
+
+  const response = await fetch('https://upload.asepharyana.tech/api/upload', {
+    method: 'POST',
+    body: formData,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Upload failed with status ${response.status}`);
+  }
+
+  const data = (await response.json()) as Record<string, unknown>;
+
+  if (!data.download_url) {
+    throw new Error('Upload response missing download_url');
+  }
+
+  if (!data.public_id) {
+    throw new Error('Upload response missing public_id');
+  }
+
+  return data as UploaderMetadata;
+}
@@ -1,12 +1,215 @@
 import { Elysia } from 'elysia';
-import type { ManualClassificationRequest, ManualClassificationRecord } from '@zeavis/shared';
+import type {
+  DiseaseCatalogItem,
+  DiseaseSlug,
+  ImageClassificationRecord,
+  ManualClassificationRequest,
+  ManualClassificationRecord,
+  PredictionProbability,
+  UploaderMetadata,
+} from '@zeavis/shared';
 import { isDiseaseSlug } from '@zeavis/shared';
 import { createDbClient } from '../db/client';
-import { diseaseCatalog, manualClassifications } from '../db/schema';
-import { badRequest, serviceUnavailable } from '../lib/http-errors';
+import { diseaseCatalog, manualClassifications, imageClassifications } from '../db/schema';
+import { badRequest, badGateway, serviceUnavailable } from '../lib/http-errors';
 import { desc, eq } from 'drizzle-orm';
+import { classifyImage } from '../lib/image-model';
+import { uploadImageToStorage } from '../lib/uploader-client';
+import { toDisease } from '../lib/disease-mappers';
+
+function toImageClassificationRecord(row: {
+  id: string;
+  predictedDiseaseSlug: string;
+  confidence: number;
+  probabilities: unknown;
+  imageUrl: string;
+  originalFileName: string;
+  uploaderPublicId: string;
+  uploaderPayload: unknown;
+  createdAt: Date;
+  disease: {
+    slug: string;
+    label: string;
+    commonName: string;
+    summary: string;
+    description: string;
+    symptoms: string[];
+    recommendations: string[];
+    riskLevel: string;
+    accentColor: string;
+    displayOrder: number;
+  };
+}): ImageClassificationRecord {
+  return {
+    id: row.id,
+    predictedDiseaseSlug: row.predictedDiseaseSlug as DiseaseSlug,
+    confidence: row.confidence,
+    probabilities: row.probabilities as PredictionProbability[],
+    imageUrl: row.imageUrl,
+    originalFileName: row.originalFileName,
+    uploaderPublicId: row.uploaderPublicId,
+    uploader: row.uploaderPayload as UploaderMetadata,
+    createdAt: row.createdAt.toISOString(),
+    disease: toDisease(row.disease as typeof diseaseCatalog.$inferSelect),
+  };
+}

 export const classificationRoutes = new Elysia({ prefix: '/api/v1' })
+  .get('/classifications/image', async () => {
+    try {
+      const db = createDbClient();
+      const rows = await db
+        .select({
+          id: imageClassifications.id,
+          predictedDiseaseSlug: imageClassifications.predictedDiseaseSlug,
+          confidence: imageClassifications.confidence,
+          probabilities: imageClassifications.probabilities,
+          imageUrl: imageClassifications.imageUrl,
+          originalFileName: imageClassifications.originalFileName,
+          uploaderPublicId: imageClassifications.uploaderPublicId,
+          uploaderPayload: imageClassifications.uploaderPayload,
+          createdAt: imageClassifications.createdAt,
+          disease: {
+            slug: diseaseCatalog.slug,
+            label: diseaseCatalog.label,
+            commonName: diseaseCatalog.commonName,
+            summary: diseaseCatalog.summary,
+            description: diseaseCatalog.description,
+            symptoms: diseaseCatalog.symptoms,
+            recommendations: diseaseCatalog.recommendations,
+            riskLevel: diseaseCatalog.riskLevel,
+            accentColor: diseaseCatalog.accentColor,
+            displayOrder: diseaseCatalog.displayOrder,
+          },
+        })
+        .from(imageClassifications)
+        .innerJoin(diseaseCatalog, eq(imageClassifications.predictedDiseaseSlug, diseaseCatalog.slug))
+        .orderBy(desc(imageClassifications.createdAt))
+        .limit(20);
+
+      const records: ImageClassificationRecord[] = rows.map(toImageClassificationRecord);
+      return records;
+    } catch (error) {
+      return serviceUnavailable('Database unavailable');
+    }
+  })
+  .post('/classifications/image', async ({ body }) => {
+    let file: File | undefined;
+
+    if (body instanceof FormData) {
+      const formFile = body.get('file');
+      if (formFile instanceof File) {
+        file = formFile;
+      }
+    } else if (typeof body === 'object' && body !== null) {
+      const bodyObj = body as Record<string, unknown>;
+      if (bodyObj.file instanceof File) {
+        file = bodyObj.file;
+      } else if (Array.isArray(bodyObj.file) && bodyObj.file.length > 0 && bodyObj.file[0] instanceof File) {
+        file = bodyObj.file[0];
+      }
+    }
+
+    if (!file) {
+      return badRequest('Missing required field: file');
+    }
+
+    if (file.size === 0) {
+      return badRequest('File is empty');
+    }
+
+    if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
+      return badRequest('File must be JPEG or PNG image');
+    }
+
+    try {
+      let uploaderMetadata: UploaderMetadata;
+      try {
+        uploaderMetadata = await uploadImageToStorage(file);
+      } catch (error) {
+        return badGateway(
+          `Upload service error: ${error instanceof Error ? error.message : 'Unknown error'}`
+        );
+      }
+
+      let classificationResult;
+      try {
+        classificationResult = await classifyImage(file);
+      } catch (error) {
+        return serviceUnavailable(
+          `Model service error: ${error instanceof Error ? error.message : 'Unknown error'}`
+        );
+      }
+
+      const db = createDbClient();
+      let diseaseRow;
+      try {
+        const diseaseRows = await db
+          .select()
+          .from(diseaseCatalog)
+          .where(eq(diseaseCatalog.slug, classificationResult.predictedDiseaseSlug))
+          .limit(1);
+
+        if (diseaseRows.length === 0) {
+          return serviceUnavailable(
+            `Predicted disease "${classificationResult.predictedDiseaseSlug}" not found in catalog`
+          );
+        }
+
+        diseaseRow = diseaseRows[0];
+      } catch (error) {
+        return serviceUnavailable('Database unavailable');
+      }
+
+      let inserted;
+      try {
+        const result = await db
+          .insert(imageClassifications)
+          .values({
+            predictedDiseaseSlug: classificationResult.predictedDiseaseSlug,
+            confidence: classificationResult.confidence,
+            probabilities: classificationResult.probabilities,
+            imageUrl: uploaderMetadata.download_url,
+            originalFileName: file.name,
+            uploaderPublicId: uploaderMetadata.public_id,
+            uploaderPayload: uploaderMetadata,
+          })
+          .returning();
+
+        inserted = result[0];
+      } catch (error) {
+        return serviceUnavailable('Database unavailable');
+      }
+
+      const record: ImageClassificationRecord = toImageClassificationRecord({
+        id: inserted.id,
+        predictedDiseaseSlug: inserted.predictedDiseaseSlug,
+        confidence: inserted.confidence,
+        probabilities: inserted.probabilities,
+        imageUrl: inserted.imageUrl,
+        originalFileName: inserted.originalFileName,
+        uploaderPublicId: inserted.uploaderPublicId,
+        uploaderPayload: inserted.uploaderPayload,
+        createdAt: inserted.createdAt,
+        disease: {
+          slug: diseaseRow.slug,
+          label: diseaseRow.label,
+          commonName: diseaseRow.commonName,
+          summary: diseaseRow.summary,
+          description: diseaseRow.description,
+          symptoms: diseaseRow.symptoms,
+          recommendations: diseaseRow.recommendations,
+          riskLevel: diseaseRow.riskLevel,
+          accentColor: diseaseRow.accentColor,
+          displayOrder: diseaseRow.displayOrder,
+        },
+      });
+
+      return record;
+    } catch (error) {
+      return serviceUnavailable('Internal server error');
+    }
+  })
  .get('/classifications/manual', async () => {
    try {
      const db = createDbClient();
@@ -1,7 +1,7 @@
 import { Elysia } from 'elysia';
 import type { DashboardSummary, RiskLevel } from '@zeavis/shared';
 import { createDbClient } from '../db/client';
-import { diseaseCatalog, manualClassifications } from '../db/schema';
+import { diseaseCatalog, imageClassifications, manualClassifications } from '../db/schema';
 import { serviceUnavailable } from '../lib/http-errors';
 import { desc, eq } from 'drizzle-orm';

@@ -10,7 +10,8 @@ export const dashboardRoutes = new Elysia({ prefix: '/api/v1' }).get('/dashboard
    const db = createDbClient();

    const diseaseCount = await db.select().from(diseaseCatalog);
-    const classificationCount = await db.select().from(manualClassifications);
+    const manualClassificationCount = await db.select().from(manualClassifications);
+    const imageClassificationCount = await db.select().from(imageClassifications);

    const latestClassificationRow = await db
      .select({
@@ -75,7 +76,7 @@ export const dashboardRoutes = new Elysia({ prefix: '/api/v1' }).get('/dashboard

    const summary: DashboardSummary = {
      diseaseCount: diseaseCount.length,
-      classificationCount: classificationCount.length,
+      classificationCount: manualClassificationCount.length + imageClassificationCount.length,
      latestClassification,
      riskDistribution,
    };
@@ -0,0 +1,8 @@
+declare module 'pngjs' {
+  export class PNG {
+    width: number;
+    height: number;
+    data: Buffer;
+    parse(data: Buffer, callback: (err: Error | null) => void): void;
+  }
+}
@@ -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>
+  );
+}
@@ -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');
  },
@@ -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>