MythEclipse/zeavis-edu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'ATLAS-PJK-GM007:main' into main

Browse Source
This commit is contained in:
Asep Haryana Saputra
2026-06-14 23:48:02 +07:00
committed by GitHub
parent ab61065502 faa423e6f0
commit 3f77eb8283
6 changed files with 246 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/diagnose-result-view.tsx
+86 -32
View File
@@ -1,7 +1,16 @@
import { useState } from "react";
import { ChevronDown, ChevronUp, AlertTriangle, BookOpen, ShieldCheck, Pill, RefreshCcw } from "lucide-react";
import {
ChevronDown,
ChevronUp,
AlertTriangle,
BookOpen,
ShieldCheck,
Pill,
RefreshCcw,
FlaskConical,
} from "lucide-react";
import { RiskBadge } from "./risk-badge";
// Spesifikasi data yang dibutuhkan oleh cetakan ini
type Props = {
imageUrl: string;
confidence: number; // contoh: 0.95
@@ -12,7 +21,7 @@ type Props = {
symptoms: string[];
preventions: string[];
medicines: string[];
onRescan?: () => void; // Tombol opsional untuk Scan Ulang
onRescan?: () => void;
};
export function DiagnosisResultView({
@@ -27,9 +36,15 @@ export function DiagnosisResultView({
medicines,
onRescan,
}: Props) {
// Ingatan untuk laci (accordion) sebelah kanan
const [openSection, setOpenSection] = useState<string>("detail");
const getRiskLevelKey = (level: string): "low" | "medium" | "high" => {
const normalized = level.toLowerCase();
if (normalized.includes("rendah")) return "low";
if (normalized.includes("tinggi")) return "high";
return "medium";
};
const toggleSection = (section: string) => {
setOpenSection(openSection === section ? "" : section);
};
@@ -38,10 +53,8 @@ export function DiagnosisResultView({
return (
<div className="flex flex-col lg:flex-row gap-6 bg-[#FAFAF8] p-4 md:p-6 rounded-3xl">
{/* KIRI: Area Gambar & Hasil Deteksi ML */}
{/* Image Area & Result */}
<div className="w-full lg:w-1/3 flex flex-col gap-4">
{/* Gambar Daun */}
<div className="bg-white p-3 rounded-2xl border border-slate-200 shadow-sm">
<img
src={imageUrl}
@@ -49,22 +62,26 @@ export function DiagnosisResultView({
className="w-full h-48 md:h-64 object-cover rounded-xl"
/>
<div className="mt-3 flex items-center gap-2 text-slate-500 text-sm px-1">
<span className="w-4 h-4 bg-slate-200 rounded flex items-center justify-center text-[10px]">📷</span>
<span className="w-4 h-4 bg-slate-200 rounded flex items-center justify-center text-[10px]">
📷
</span>
Gambar yang dianalisis
</div>
</div>
{/* Kartu Hasil Deteksi ML */}
{/* Result Card */}
<div className="bg-[#FCF9EE] border border-[#F2E5C5] p-5 rounded-2xl shadow-sm relative overflow-hidden">
<div className="flex items-center gap-2 text-amber-700 font-semibold text-sm mb-4">
<AlertTriangle className="w-4 h-4" />
HASIL DETEKSI ML
</div>
<h2 className="text-2xl font-extrabold text-[#D97706]">{diseaseName}</h2>
<h2 className="text-2xl font-extrabold text-[#D97706]">
{diseaseName}
</h2>
<p className="text-slate-500 italic text-sm mb-6">{scientificName}</p>
{/* Bar Tingkat Keyakinan AI */}
{/* Confidence Bar */}
<div className="space-y-2 mb-4">
<div className="flex justify-between text-sm font-bold text-slate-700">
<span>Tingkat Keyakinan AI</span>
@@ -77,23 +94,23 @@ export function DiagnosisResultView({
></div>
</div>
<p className="text-[11px] text-emerald-600 flex items-center gap-1 font-medium">
<CheckCircle2 className="w-3 h-3" /> Di atas ambang batas minimum (75%)
<CheckCircle2 className="w-3 h-3" /> Di atas ambang batas minimum
(75%)
</p>
</div>
<div className="flex items-center gap-3 pt-4 border-t border-amber-200/50">
<span className="text-sm font-medium text-slate-600">Tingkat Keparahan:</span>
<span className="px-3 py-1 bg-[#D97706] text-white text-xs font-bold rounded-full">
{riskLevel.toUpperCase()}
<span className="text-sm font-medium text-slate-600">
Tingkat Keparahan:
</span>
<RiskBadge level={getRiskLevelKey(riskLevel ?? "medium")} />
</div>
</div>
</div>
{/* KANAN: Area Edukasi (Accordion) & Referensi */}
{/* Education & References */}
<div className="w-full lg:w-2/3 flex flex-col gap-4">
{/* Tombol Header (Jika ada fungsi onRescan) */}
{/* Rescan Button */}
{onRescan && (
<div className="flex justify-end mb-2">
<button
@@ -105,7 +122,7 @@ export function DiagnosisResultView({
</div>
)}
{/* Laci 1: Detail Penyakit */}
{/* Detail Section */}
<div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
<div
onClick={() => toggleSection("detail")}
@@ -117,20 +134,26 @@ export function DiagnosisResultView({
</div>
Detail Penyakit
</div>
{openSection === "detail" ? <ChevronUp className="w-5 h-5 text-slate-400" /> : <ChevronDown className="w-5 h-5 text-slate-400" />}
{openSection === "detail" ? (
<ChevronUp className="w-5 h-5 text-slate-400" />
) : (
<ChevronDown className="w-5 h-5 text-slate-400" />
)}
</div>
{openSection === "detail" && (
<div className="p-4 pt-0 border-t border-slate-100 text-sm text-slate-600 leading-relaxed">
<p className="mb-4">{description}</p>
<h5 className="font-bold text-[#214B11] mb-2">Gejala Umum:</h5>
<ul className="space-y-1 pl-4 list-disc marker:text-emerald-500">
{symptoms.map((sym, i) => <li key={i}>{sym}</li>)}
{symptoms.map((sym, i) => (
<li key={i}>{sym}</li>
))}
</ul>
</div>
)}
</div>
{/* Laci 2: Panduan Pencegahan */}
{/* Prevention Section */}
<div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
<div
onClick={() => toggleSection("cegah")}
@@ -142,14 +165,19 @@ export function DiagnosisResultView({
</div>
Panduan Pencegahan
</div>
{openSection === "cegah" ? <ChevronUp className="w-5 h-5 text-slate-400" /> : <ChevronDown className="w-5 h-5 text-slate-400" />}
{openSection === "cegah" ? (
<ChevronUp className="w-5 h-5 text-slate-400" />
) : (
<ChevronDown className="w-5 h-5 text-slate-400" />
)}
</div>
{openSection === "cegah" && (
<div className="p-4 pt-0 border-t border-slate-100 text-sm text-slate-600">
<ul className="space-y-2">
{preventions.map((prev, i) => (
<li key={i} className="flex gap-2 items-start">
<CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" /> <span>{prev}</span>
<CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" />{" "}
<span>{prev}</span>
</li>
))}
</ul>
@@ -157,7 +185,7 @@ export function DiagnosisResultView({
)}
</div>
{/* Laci 3: Rekomendasi Obat */}
{/* Medicine Section */}
<div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
<div
onClick={() => toggleSection("obat")}
@@ -169,14 +197,19 @@ export function DiagnosisResultView({
</div>
Rekomendasi Obat
</div>
{openSection === "obat" ? <ChevronUp className="w-5 h-5 text-slate-400" /> : <ChevronDown className="w-5 h-5 text-slate-400" />}
{openSection === "obat" ? (
<ChevronUp className="w-5 h-5 text-slate-400" />
) : (
<ChevronDown className="w-5 h-5 text-slate-400" />
)}
</div>
{openSection === "obat" && (
<div className="p-4 pt-0 border-t border-slate-100 text-sm text-slate-600">
<ul className="space-y-2">
{medicines.map((med, i) => (
<li key={i} className="flex gap-2 items-start">
<span className="text-purple-400 shrink-0 mt-0.5">⚕️</span> <span>{med}</span>
<FlaskConical className="w-4 h-4 text-purple-500 shrink-0 mt-0.5" />{" "}
<span>{med}</span>
</li>
))}
</ul>
@@ -184,22 +217,43 @@ export function DiagnosisResultView({
)}
</div>
{/* Kotak Disclaimer Penting */}
{/* Disclaimer */}
<div className="bg-[#FFFBEB] border border-[#FDE68A] rounded-2xl p-4 mt-2">
<div className="flex items-center gap-2 text-amber-600 font-bold mb-2">
<AlertTriangle className="w-5 h-5" /> Disclaimer Penting
</div>
<p className="text-[13px] text-amber-900 leading-relaxed">
ZeaVis Edu adalah <strong>alat bantu edukasi awal</strong>, bukan pengganti diagnosis profesional. Hasil ini tidak dapat dijadikan dasar keputusan agronomis tanpa konfirmasi dari <strong>ahli pertanian atau Petugas Pengamat Organisme Pengganggu Tanaman (POPT)</strong> yang berwenang.
ZeaVis Edu adalah <strong>alat bantu edukasi awal</strong>, bukan
pengganti diagnosis profesional. Hasil ini tidak dapat dijadikan
dasar keputusan agronomis tanpa konfirmasi dari{" "}
<strong>
ahli pertanian atau Petugas Pengamat Organisme Pengganggu Tanaman
(POPT)
</strong>{" "}
yang berwenang.
</p>
</div>
</div>
</div>
);
}
// Ikon bantuan untuk persentase
function CheckCircle2(props: any) {
return <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="12" cy="12" r="10" />
<path d="m9 12 2 2 4-4" />
</svg>
);
}
apps/web/src/components/layout/main-layout.tsx
+1 -7
View File
@@ -19,13 +19,7 @@ export function MainLayout({ children }: Props) {
<Sidebar />
{/* Main Content */}
<div className="flex-1 flex flex-col w-full h-screen overflow-hidden"
onClick={() => {
if (isSidebarOpen) {
setIsSidebarOpen(false);
}
}}
>
<div className="flex-1 flex flex-col w-full h-screen overflow-hidden">
{/* Header Mobile */}
<div className="md:hidden flex items-center justify-between px-5 h-20 bg-[#306D29] text-white shrink-0 shadow-sm z-20">
<div className="flex items-center gap-3 font-semibold">
apps/web/src/components/layout/sidebar.tsx
+5 -6
View File
@@ -3,14 +3,14 @@ import { Link, useLocation } from "react-router-dom";
import {
Leaf,
LogOut,
Menu,
ChevronLeft,
ChevronsLeft,
LayoutDashboard,
Scan,
Activity,
BookOpen,
UserCheck,
ChartBar,
ChevronsRight,
} from "lucide-react";
import { MobileNav } from "./mobile-nav";
import { useAuthStore } from "@/store/auth-store";
@@ -81,6 +81,7 @@ export function Sidebar() {
</div>
</div>
{/* Toggle Button */}
<button
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
className={`rounded-xl transition-colors flex items-center justify-center shrink-0 ${
@@ -91,9 +92,9 @@ export function Sidebar() {
title={isSidebarOpen ? "Sembunyikan Menu" : "Buka Menu"}
>
{isSidebarOpen ? (
<ChevronLeft className="w-5 h-5" />
<ChevronsLeft className="w-7 h-7" />
) : (
<Menu className="w-6 h-6" />
<ChevronsRight className="w-7 h-7" />
)}
</button>
</div>
@@ -103,7 +104,6 @@ export function Sidebar() {
className={`flex-1 overflow-y-auto py-6 flex flex-col gap-3 ${isSidebarOpen ? "px-5" : "px-0 items-center"}`}
>
{filteredNavItems.map((item) => {
// Skip expert-only items for non-expert users
if (item.expertOnly && !isExpert) {
return null;
}
@@ -116,7 +116,6 @@ export function Sidebar() {
key={item.path}
to={item.path}
title={item.label}
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
className={`flex items-center rounded-full font-medium transition-all ${
isSidebarOpen
? "px-4 py-3 gap-3 text-[16px] w-full"
apps/web/src/pages/catalog-page.tsx
+3 -2
View File
@@ -9,6 +9,7 @@ import {
ShieldCheck,
Search,
Leaf,
FlaskConical,
} from "lucide-react";
import { apiClient } from "@/lib/api-client";
import { RiskBadge } from "@/components/risk-badge";
@@ -224,14 +225,14 @@ export function CatalogPage() {
<div className="bg-[#F8F4FD] border border-[#E9DDF5] rounded-xl p-5">
<h4 className="font-bold text-purple-900 flex items-center gap-2 mb-3">
<Pill className="w-4 h-4 text-purple-600" />
<FlaskConical className="w-4 h-4 text-purple-600" />
Rekomendasi Obat
</h4>
<ul className="space-y-2">
{finalMedicines ? (
finalMedicines.map((obat, idx) => (
<li key={idx} className="flex items-start gap-2 text-sm text-slate-700">
<Leaf className="w-4 h-4 text-purple-500 mt-0.5 shrink-0" />
<Pill className="w-4 h-4 text-purple-500 mt-0.5 shrink-0" />
<span>{obat}</span>
</li>
))
apps/web/src/pages/diagnosis-detail-page.tsx
+34 -13
View File
@@ -1,5 +1,6 @@
import { Link, useParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { useEffect } from "react";
import { Button } from "@/components/ui/button";
import {
Card,
@@ -10,9 +11,19 @@ import {
} from "@/components/ui/card";
import { apiClient } from "@/lib/api-client";
import { DiagnosisResultView } from "../components/diagnose-result-view";
import { diseaseCatalogSeed } from "@zeavis/shared"; // Pastikan jalur import ini benar
export function DiagnosisDetailPage() {
const { id } = useParams();
// Scroll to top when diagnosis ID changes
useEffect(() => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}, [id]);
const query = useQuery({
queryKey: ["diagnosis", id],
queryFn: () => apiClient.getDiagnosis(id!),
@@ -33,44 +44,55 @@ export function DiagnosisDetailPage() {
);
const diagnosis = query.data;
// Fallback logic for image and medicine recommendations
const finalImageUrl =
diagnosis.imageUrl || "/src/assets/images/placeholder-image.png";
const seedData = diagnosis.disease
? diseaseCatalogSeed.find(
(seed) => seed.commonName === diagnosis.disease?.commonName,
)
: null;
const finalMedicines =
(diagnosis.disease as any)?.medicineRecommendations ||
seedData?.medicineRecommendations ||
[];
return (
<div className="space-y-6">
{/* Header Page */}
<div className="flex items-center justify-between gap-4">
<div>
<h1 className="text-xl md:text-3xl font-extrabold text-[#214B11]">
<h1 className="text-xl md:text-2xl font-bold text-[#214B11]">
Analisis & Modul Edukasi
</h1>
<p className="text-sm font-medium text-slate-500 mt-1">
Hasil deteksi AI dan panduan edukasi berdasarkan gambar yang
diunggah
Hasil deteksi AI dan panduan edukasi
</p>
</div>
<Button asChild variant="outline">
<Button
asChild
variant="outline"
className="border-[#214B11] text-[#214B11] hover:bg-[#214B11] hover:text-white"
>
<Link to="/diagnoses">Kembali ke Riwayat</Link>
</Button>
</div>
{/* Warning if expert review is needed */}
{diagnosis.status === "needs_review" && (
<div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 shadow-sm">
<strong>Catatan:</strong> Hasil ini masih sementara karena tingkat
keyakinan (confidence) di bawah standar minimum dan sedang menunggu
ulasan pakar.
keyakinan (confidence) di bawah standar minimum.
</div>
)}
{/* Message if AI failed to process */}
{diagnosis.failureReason && (
<div className="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-900 shadow-sm">
<strong>Gagal Memproses:</strong> {diagnosis.failureReason}
</div>
)}
{/* Diagnosis Result View */}
<DiagnosisResultView
imageUrl={finalImageUrl}
confidence={diagnosis.confidence ?? 0}
@@ -84,10 +106,9 @@ export function DiagnosisDetailPage() {
}
symptoms={diagnosis.disease?.symptoms ?? []}
preventions={diagnosis.disease?.recommendations ?? []}
medicines={(diagnosis.disease as any)?.medicineRecommendations ?? []}
medicines={finalMedicines}
/>
{/* List of Alternative Predictions */}
{diagnosis.predictions && diagnosis.predictions.length > 0 && (
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 md:p-6 mt-4">
<h4 className="font-bold text-[#214B11] mb-1">
@@ -116,7 +137,7 @@ export function DiagnosisDetailPage() {
</div>
)}
{/* Expert Notes (Only shown if already reviewed by human) */}
{/* Expert Review Section */}
{diagnosis.latestReview && (
<Card className="rounded-2xl shadow-sm border-blue-200 bg-blue-50/50 mt-4">
<CardHeader>
apps/web/src/pages/scan-page.tsx
+85 -27
View File
@@ -23,7 +23,10 @@ import { DiagnosisResultView } from "../components/diagnose-result-view";
export function ScanPage() {
const [fileName, setFileName] = useState<string | null>(null);
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null);
const [imageDimensions, setImageDimensions] = useState<{
width: number;
height: number;
} | null>(null);
const inputRef = useRef<HTMLInputElement | null>(null);
const imageRef = useRef<HTMLImageElement | null>(null);
const navigate = useNavigate();
@@ -36,6 +39,8 @@ export function ScanPage() {
queryClient.invalidateQueries({ queryKey: ["diagnoses"] });
setDiagnosisPreview(diagnosis);
setPreviewOpen(true);
setFileName(null);
setPreviewUrl(null);
if (inputRef.current) inputRef.current.value = "";
},
onError: () => {
@@ -68,7 +73,8 @@ export function ScanPage() {
};
const [previewOpen, setPreviewOpen] = useState(false);
const [diagnosisPreview, setDiagnosisPreview] = useState<DiagnosisRecord | null>(null);
const [diagnosisPreview, setDiagnosisPreview] =
useState<DiagnosisRecord | null>(null);
const diagnosesQuery = useQuery({
queryKey: ["diagnoses"],
@@ -83,7 +89,8 @@ export function ScanPage() {
<div>
<h1 className="text-2xl font-bold text-emerald-800">Scan Tanaman</h1>
<p className="text-gray-500 mt-1 text-md">
Unggah foto daun jagung untuk dianalisis oleh sistem AI kami secara real-time.
Unggah foto daun jagung untuk dianalisis oleh sistem AI kami secara
real-time.
</p>
</div>
<Button asChild variant="outline">
@@ -109,8 +116,12 @@ export function ScanPage() {
onClick={() => inputRef.current?.click()}
>
<Upload className="mx-auto text-green-500 mb-3" size={48} />
<h3 className="font-semibold text-base text-gray-800 mb-1">Seret & Lepas Foto Daun</h3>
<p className="text-xs text-gray-500 mb-3">atau klik untuk memilih file berkas dari perangkat Anda</p>
<h3 className="font-semibold text-base text-gray-800 mb-1">
Seret & Lepas Foto Daun
</h3>
<p className="text-xs text-gray-500 mb-3">
atau klik untuk memilih file berkas dari perangkat Anda
</p>
<div className="flex flex-wrap gap-2 justify-center">
<div className="bg-green-100 text-green-700 px-3 py-1 rounded-full inline-flex items-center gap-1 text-xs font-medium">
<Check size={14} /> PNG, JPG, JPEG, WEBP
@@ -138,7 +149,10 @@ export function ScanPage() {
className="w-full max-h-80 object-contain"
onLoad={(e) => {
const img = e.currentTarget;
setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight });
setImageDimensions({
width: img.naturalWidth,
height: img.naturalHeight,
});
}}
/>
{imageDimensions && (
@@ -156,7 +170,9 @@ export function ScanPage() {
<div className="absolute bottom-0 left-0 w-6 h-6 border-b-2 border-l-2 border-lime-300" />
<div className="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-lime-300" />
<div className="text-white text-center flex flex-col gap-1">
<span className="text-xs font-semibold tracking-widest">AREA SCAN</span>
<span className="text-xs font-semibold tracking-widest">
AREA SCAN
</span>
<span className="text-[10px] text-lime-200 font-medium">
{imageDimensions.width} × {imageDimensions.height}
</span>
@@ -218,7 +234,9 @@ export function ScanPage() {
<div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
<p className="font-medium">Upload gagal</p>
<p className="mt-1">
{mutation.error instanceof Error ? mutation.error.message : "Terjadi kesalahan saat memproses gambar"}
{mutation.error instanceof Error
? mutation.error.message
: "Terjadi kesalahan saat memproses gambar"}
</p>
</div>
)}
@@ -234,32 +252,42 @@ export function ScanPage() {
<div className="inline-flex h-9 w-9 items-center justify-center rounded-full">
<CircleAlert className="text-emerald-600" size={20} />
</div>
<h2 className="font-bold text-emerald-800">Panduan Pengambilan Foto</h2>
<h2 className="font-bold text-emerald-800">
Panduan Pengambilan Foto
</h2>
</div>
<ul className="space-y-3">
<li className="flex items-center gap-3">
<div className="h-9 w-9 rounded bg-[#ECF4E8] flex items-center justify-center shrink-0">
<ZoomIn className="text-emerald-600" size={20} />
</div>
<div className="text-sm text-slate-700">Jarak 15–30 cm dari daun</div>
<div className="text-sm text-slate-700">
Jarak 15–30 cm dari daun
</div>
</li>
<li className="flex items-center gap-3">
<div className="h-9 w-9 rounded bg-[#ECF4E8] flex items-center justify-center shrink-0">
<Sun className="text-emerald-600" size={20} />
</div>
<div className="text-sm text-slate-700">Pencahayaan cukup merata</div>
<div className="text-sm text-slate-700">
Pencahayaan cukup merata
</div>
</li>
<li className="flex items-center gap-3">
<div className="h-9 w-9 rounded bg-[#ECF4E8] flex items-center justify-center shrink-0">
<AlignCenter className="text-emerald-600" size={20} />
</div>
<div className="text-sm text-slate-700">Posisi daun mengisi bingkai dengan jelas</div>
<div className="text-sm text-slate-700">
Posisi daun mengisi bingkai dengan jelas
</div>
</li>
<li className="flex items-center gap-3">
<div className="h-9 w-9 rounded bg-[#ECF4E8] flex items-center justify-center shrink-0">
<Camera className="text-emerald-600" size={20} />
</div>
<div className="text-sm text-slate-700">Hindari bayangan, pantulan, & blur</div>
<div className="text-sm text-slate-700">
Hindari bayangan, pantulan, & blur
</div>
</li>
</ul>
</CardContent>
@@ -267,7 +295,9 @@ export function ScanPage() {
<Card className="w-full h-max">
<CardContent className="px-6 py-4">
<h3 className="font-bold text-emerald-800 flex items-center gap-3 mb-4">Persyaratan Berkas</h3>
<h3 className="font-bold text-emerald-800 flex items-center gap-3 mb-4">
Persyaratan Berkas
</h3>
<div className="flex flex-col gap-2">
{[
{ label: "Format", value: "PNG, JPG, JPEG, WEBP" },
@@ -275,9 +305,17 @@ export function ScanPage() {
{ label: "Resolusi Min.", value: "512 × 512 px" },
{ label: "Objek Foto", value: "Daun jagung tunggal" },
].map((r, i) => (
<div key={i} className="flex items-center justify-between py-1.5" style={{ borderBottom: i < 3 ? "1px solid #f0f0f0" : "none" }}>
<div
key={i}
className="flex items-center justify-between py-1.5"
style={{
borderBottom: i < 3 ? "1px solid #f0f0f0" : "none",
}}
>
<span className="text-gray-400 text-xs">{r.label}</span>
<span className="text-sm font-medium text-gray-700">{r.value}</span>
<span className="text-sm font-medium text-gray-700">
{r.value}
</span>
</div>
))}
</div>
@@ -319,38 +357,56 @@ export function ScanPage() {
>
{diagnosisPreview ? (
<div className="space-y-6 p-1">
{/* Warning if expert review is needed */}
{diagnosisPreview.status === "needs_review" && (
<div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 shadow-sm">
<strong>Catatan:</strong> Hasil ini masih sementara karena tingkat keyakinan (confidence) di bawah standar minimum.
<strong>Catatan:</strong> Hasil ini masih sementara karena
tingkat keyakinan (confidence) di bawah standar minimum.
</div>
)}
{/* Message if AI fails to process */}
{diagnosisPreview.failureReason && (
<div className="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-900 shadow-sm">
<strong>Gagal Memproses:</strong> {diagnosisPreview.failureReason}
<strong>Gagal Memproses:</strong>{" "}
{diagnosisPreview.failureReason}
</div>
)}
<DiagnosisResultView
imageUrl={previewUrl || diagnosisPreview.imageUrl || "https://placehold.co/600x400?text=Foto+Daun"}
imageUrl={
previewUrl ||
diagnosisPreview.imageUrl ||
"https://placehold.co/600x400?text=Foto+Daun"
}
confidence={diagnosisPreview.confidence ?? 0}
diseaseName={diagnosisPreview.disease?.commonName ?? "Tidak Diketahui"}
diseaseName={
diagnosisPreview.disease?.commonName ?? "Tidak Diketahui"
}
scientificName={diagnosisPreview.disease?.label ?? ""}
riskLevel={diagnosisPreview.disease?.riskLevel ?? "Sedang"}
description={diagnosisPreview.disease?.description ?? diagnosisPreview.disease?.summary ?? "Deskripsi tidak tersedia."}
description={
diagnosisPreview.disease?.description ??
diagnosisPreview.disease?.summary ??
"Deskripsi tidak tersedia."
}
symptoms={diagnosisPreview.disease?.symptoms ?? []}
preventions={diagnosisPreview.disease?.recommendations ?? []}
medicines={(diagnosisPreview.disease as any)?.medicineRecommendations ?? []}
medicines={
(diagnosisPreview.disease as any)?.medicineRecommendations ?? []
}
/>
{/* All Model Predictions */}
{diagnosisPreview.predictions && diagnosisPreview.predictions.length > 0 && (
{diagnosisPreview.predictions &&
diagnosisPreview.predictions.length > 0 && (
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 md:p-6 mt-4">
<h4 className="font-bold text-[#214B11] mb-1">Semua Prediksi Model</h4>
<p className="text-xs text-slate-500 mb-4">Tebakan alternatif lain dari sistem AI ZeaVis</p>
<h4 className="font-bold text-[#214B11] mb-1">
Semua Prediksi Model
</h4>
<p className="text-xs text-slate-500 mb-4">
Tebakan alternatif lain dari sistem AI ZeaVis
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{diagnosisPreview.predictions
.sort((a, b) => a.rank - b.rank)
@@ -359,7 +415,9 @@ export function ScanPage() {
key={pred.id}
className="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 p-3 text-sm"
>
<span className="text-slate-600 font-medium">{pred.modelLabel}</span>
<span className="text-slate-600 font-medium">
{pred.modelLabel}
</span>
<span className="font-bold text-slate-700">
{(pred.confidence * 100).toFixed(1)}%
</span>