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

feat(scan-page): unauthenticated upload with scanner area detection

Browse Source 
- Implement responsive drag-and-drop upload interface
- Add dynamic scanner frame overlay with image dimensions
- Enable unauthenticated uploads via anonymous user system
- Show real-time scan area guidance with corner markers
- Maintain clean separation: select → preview → analyze
This commit is contained in:
seriouselly
2026-06-06 00:06:36 +07:00
parent 065b802344
commit 80fa75130a
1 changed files with 285 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/scan-page.tsx
+285 -231
View File
@@ -1,25 +1,30 @@
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import { useNavigate, Link } from "react-router-dom"; import { useNavigate, Link } from "react-router-dom";
import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query"; import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
import {
Camera,
Upload,
X,
ImageOff,
CircleAlert,
ZoomIn,
Sun,
AlignCenter,
Check,
} from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Modal } from "@/components/ui/modal"; import { Modal } from "@/components/ui/modal";
import { DiagnosisStatusBadge } from "@/components/diagnosis-status-badge"; import { DiagnosisStatusBadge } from "@/components/diagnosis-status-badge";
import type { DiagnosisRecord } from "@zeavis/shared"; import type { DiagnosisRecord } from "@zeavis/shared";
import { apiClient } from "@/lib/api-client"; import { apiClient } from "@/lib/api-client";
import {
AlignCenter,
Camera,
Check,
CircleAlert,
Sun,
Upload,
ZoomIn,
} from "lucide-react";
export function ScanPage() { export function ScanPage() {
const [fileName, setFileName] = useState<string | null>(null); const [fileName, setFileName] = useState<string | null>(null);
const [previewUrl, setPreviewUrl] = useState<string | null>(null); const [previewUrl, setPreviewUrl] = useState<string | null>(null);
const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null);
const inputRef = useRef<HTMLInputElement | null>(null); const inputRef = useRef<HTMLInputElement | null>(null);
const imageRef = useRef<HTMLImageElement | null>(null);
const navigate = useNavigate(); const navigate = useNavigate();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@@ -42,7 +47,15 @@ export function ScanPage() {
return; return;
} }
setFileName(f.name); setFileName(f.name);
setPreviewUrl(URL.createObjectURL(f)); const url = URL.createObjectURL(f);
setPreviewUrl(url);
// Detect image dimensions
const img = new Image();
img.onload = () => {
setImageDimensions({ width: img.width, height: img.height });
};
img.src = url;
}; };
const handleUpload = () => { const handleUpload = () => {
@@ -61,250 +74,291 @@ export function ScanPage() {
enabled: previewOpen, enabled: previewOpen,
}); });
const getUploadErrorMessage = (error: unknown): string => {
let raw = "";
let source: string | undefined;
if (error instanceof Error) {
raw = error.message;
// Check if error has source property from our ApiError
source = (error as any).source;
} else if (typeof error === "string") {
raw = error;
}
// Distinguish between uploader service down vs model service down
if (raw.includes("HTTP 502")) {
if (source === "uploader") {
return "Layanan penyimpanan gambar sedang down. Hubungi administrator.";
}
if (source === "model-service") {
return "Layanan AI model sedang down. Hubungi administrator.";
}
return "Layanan backend sedang bermasalah (502). Silakan coba lagi.";
}
if (raw.includes("Failed to fetch")) {
return "Koneksi ke server gagal. Pastikan API dan koneksi jaringan aktif.";
}
if (raw.includes("Upload service error")) {
return "Layanan penyimpanan gambar sedang bermasalah. Coba beberapa saat lagi.";
}
if (raw.includes("Model service error")) {
return "Layanan AI model sedang bermasalah. Coba beberapa saat lagi.";
}
if (raw.includes("File type is not allowed")) {
return "Format file tidak didukung. Gunakan PNG, JPG, atau JPEG.";
}
if (raw.includes("File must be smaller")) {
return "Ukuran file terlalu besar. Maksimal 5 MB.";
}
if (raw.includes("File is empty")) {
return "File kosong. Silakan pilih file gambar yang valid.";
}
return raw || "Upload gagal. Silakan coba lagi.";
};
return ( return (
<main className="max-w-6xl mx-auto flex flex-col"> <div className="space-y-6">
{/* Header */} <div className="flex items-center justify-between gap-4">
<div className="mb-4"> <div>
<h1 className="text-2xl font-bold text-emerald-800">Scan Tanaman</h1> <h1 className="text-2xl font-bold text-emerald-800">Scan Tanaman</h1>
<p className="text-gray-500 mt-1 text-md"> <p className="text-gray-500 mt-1 text-md">
Unggah foto daun jagung untuk dianalisis oleh sistem AI kami secara Unggah foto daun jagung untuk dianalisis oleh sistem AI kami secara
real-time. real-time.
</p> </p>
</div>
<Button asChild variant="outline">
<Link to="/diagnoses">Riwayat Diagnosis</Link>
</Button>
</div> </div>
{/* Main Content */} <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-5"> <div className="lg:col-span-2 space-y-4">
{/* Left Sidebar */} <Card className="w-full h-117 py-3">
<div className="md:col-span-2 bg-white p-4 rounded-lg shadow h-fit"> <CardContent className="px-6 py-4 h-full flex flex-col">
<div className="text-black flex items-center gap-2 mb-3 text-lg font-semibold"> {/* Left Sidebar */}
<Camera className="text-green-500" size={25} /> <div className="text-black flex items-center gap-2 mb-3 text-lg font-semibold">
Area Unggah Gambar <Camera className="text-green-500" size={25} />
</div> Area Unggah Gambar
</div>
{/* Upload Area */} {/* Upload area */}
<button {!previewUrl ? (
type="button" <div className="space-y-3">
className="w-full border-2 border-dashed border-green-300 rounded-md p-6 h-80 text-center cursor-pointer" <div
onClick={() => inputRef.current?.click()} className="w-full border-2 border-dashed border-green-300 rounded-md p-12 h-60 text-center cursor-pointer"
> onClick={() => inputRef.current?.click()}
<Upload >
className="mx-auto text-green-500 bg-[#ECF4E8] p-3 rounded-lg" <Upload className="mx-auto text-green-500 mb-3" size={48} />
size={60} <h3 className="font-semibold text-base text-gray-800 mb-1">
/> Seret & Lepas Foto Daun
<div className="mt-2 text-muted-foreground"> </h3>
<h3 className="font-semibold text-base pb-1"> <p className="text-xs text-gray-500 mb-3">
Seret & Lepas Foto Daun atau klik untuk memilih file berkas dari perangkat Anda
</h3> </p>
<p className="text-xs pb-2"> <div className="flex flex-wrap gap-2 justify-center">
atau klik untuk memilih file berkas dari perangkat Anda <div className="bg-green-100 text-green-700 px-3 py-1 rounded-full inline-flex items-center gap-1 text-xs font-medium">
</p> <Check size={14} />
<div className="flex flex-wrap gap-2 justify-center pt-1"> PNG, JPG, JPEG
<div className="bg-[#ECF4E8] p-1.5 rounded-lg inline-flex items-center gap-1"> </div>
<Check className="text-green-500" size={14} /> <div className="bg-green-100 text-green-700 px-3 py-1 rounded-full inline-flex items-center gap-1 text-xs font-medium">
<span className="text-xs">PNG, JPG, JPEG</span> <Check size={14} />
Maks. 5 MB
</div>
</div>
</div>
<button
type="button"
onClick={() => inputRef.current?.click()}
className="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors flex items-center justify-center gap-2"
>
<Upload size={18} />
Pilih Berkas
</button>
</div> </div>
<div className="bg-[#ECF4E8] p-1.5 rounded-lg inline-flex items-center gap-1"> ) : (
<Check className="text-green-500" size={14} /> <div className="space-y-4">
<span className="text-xs">Maks. 5MB</span> <div className="relative rounded-xl overflow-hidden bg-muted w-full">
<img
ref={imageRef}
src={previewUrl}
alt="Preview"
className="w-full max-h-80 object-contain"
onLoad={(e) => {
const img = e.currentTarget;
setImageDimensions({
width: img.naturalWidth,
height: img.naturalHeight,
});
}}
/>
{/* Scanner area detection overlay */}
{imageDimensions && (
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
{/* Outer dark overlay */}
<div className="absolute inset-0 bg-black/20" />
{/* Scan area frame - responsive to image */}
<div
className="relative flex items-center justify-center"
style={{
width: `${Math.min(imageDimensions.width * 0.7, 280)}px`,
height: `${Math.min(imageDimensions.height * 0.7, 320)}px`,
}}
>
{/* Corner markers */}
<div className="absolute top-0 left-0 w-6 h-6 border-t-2 border-l-2 border-lime-300" />
<div className="absolute top-0 right-0 w-6 h-6 border-t-2 border-r-2 border-lime-300" />
<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" />
{/* Center text */}
<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-[10px] text-lime-200 font-medium">
{imageDimensions.width} × {imageDimensions.height}
</span>
</div>
</div>
</div>
)}
<button
type="button"
className="absolute top-3 right-3 bg-black/60 text-white rounded-full p-1.5 hover:bg-black/80 transition-colors z-10"
onClick={() => {
setPreviewUrl(null);
setFileName(null);
setImageDimensions(null);
if (inputRef.current) inputRef.current.value = "";
}}
>
<X className="h-4 w-4" />
</button>
</div>
<div className="flex items-center justify-between">
<p className="text-sm text-muted-foreground">
File: <span className="font-medium">{fileName}</span>
</p>
<div className="flex gap-3">
<Button
variant="outline"
onClick={() => {
setPreviewUrl(null);
setFileName(null);
setImageDimensions(null);
if (inputRef.current) inputRef.current.value = "";
}}
>
<ImageOff className="mr-2 h-4 w-4" />
Ganti Foto
</Button>
<Button
onClick={handleUpload}
disabled={mutation.isPending}
className="bg-green-600 hover:bg-green-700 text-white"
>
<Upload className="mr-2 h-4 w-4" />
{mutation.isPending ? "Memproses..." : "Analisis"}
</Button>
</div>
</div>
</div> </div>
</div> )}
</div>
{fileName && (
<div className="mt-2 text-xs text-slate-600">
Dipilih: {fileName}
</div>
)}
</button>
<input <input
ref={inputRef} ref={inputRef}
type="file" type="file"
accept="image/png,image/jpeg" accept="image/png,image/jpeg"
className="hidden" className="hidden"
onChange={(e) => handleFile(e.target.files?.[0])} onChange={(e) => handleFile(e.target.files?.[0])}
/> />
<div className="mt-3 flex flex-col gap-2"> {/* Error state */}
{!previewUrl ? ( {mutation.isError && (
<button <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
className="w-full bg-green-600 text-white px-4 py-2.5 rounded-md hover:bg-green-700 transition-colors disabled:opacity-50 cursor-pointer text-sm font-medium" <p className="font-medium">Upload gagal</p>
onClick={() => inputRef.current?.click()} <p className="mt-1">
> {mutation.error instanceof Error
Pilih Berkas ? mutation.error.message
</button> : "Terjadi kesalahan saat memproses gambar"}
) : ( </p>
<button </div>
className="w-full bg-green-600 text-white px-4 py-2.5 rounded-md hover:bg-green-700 transition-colors disabled:opacity-50 cursor-pointer text-sm font-medium disabled:bg-gray-400" )}
onClick={handleUpload} </CardContent>
disabled={mutation.isPending} </Card>
>
{mutation.isPending ? "Mengunggah..." : "Pilih Berkas"}
</button>
)}
{mutation.isError && (
<div className="text-xs text-red-600 text-center">
{getUploadErrorMessage(mutation.error)}
</div>
)}
</div>
</div> </div>
{/* Right Sidebar */} {/* Right Sidebar */}
<div className="md:col-span-1 flex flex-col gap-5"> <aside className="md:col-span-1 flex flex-col gap-5">
{/* Card 1: Panduan Pengambilan Foto */} {/* Card 1: Panduan Pengambilan Foto */}
<div className="bg-white rounded-2xl p-5 shadow-sm"> <Card className="w-full h-max">
<div className="flex items-center gap-3 mb-4"> <CardContent className="px-6 py-4">
<div className="inline-flex h-9 w-9 items-center justify-center rounded-full"> <div className="flex items-center gap-3 mb-4">
<CircleAlert className="text-emerald-600" size={18} /> <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>
</div> </div>
<h2 className="text-md font-bold text-emerald-800">
Panduan Pengambilan Foto
</h2>
</div>
<ul className="space-y-3"> <ul className="space-y-3">
<li className="flex items-center gap-3"> <li className="flex items-center gap-3">
<div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0"> <div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
<ZoomIn className="text-emerald-600" size={18} /> <ZoomIn className="text-emerald-600" size={20} />
</div> </div>
<div className="text-sm text-slate-700"> <div className="text-sm text-slate-700">
Jarak 15–30 cm dari daun Jarak 15–30 cm dari daun
</div> </div>
</li> </li>
<li className="flex items-center gap-3"> <li className="flex items-center gap-3">
<div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0"> <div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
<Sun className="text-emerald-600" size={18} /> <Sun className="text-emerald-600" size={20} />
</div> </div>
<div className="text-sm text-slate-700"> <div className="text-sm text-slate-700">
Pencahayaan cukup merata Pencahayaan cukup merata
</div> </div>
</li> </li>
<li className="flex items-center gap-3"> <li className="flex items-center gap-3">
<div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0"> <div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
<AlignCenter className="text-emerald-600" size={18} /> <AlignCenter className="text-emerald-600" size={20} />
</div> </div>
<div className="text-sm text-slate-700"> <div className="text-sm text-slate-700">
Posisi daun mengisi bingkai dengan jelas Posisi daun mengisi bingkai dengan jelas
</div> </div>
</li> </li>
<li className="flex items-center gap-3"> <li className="flex items-center gap-3">
<div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0"> <div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
<Camera className="text-emerald-600" size={18} /> <Camera className="text-emerald-600" size={20} />
</div> </div>
<div className="text-sm text-slate-700"> <div className="text-sm text-slate-700">
Hindari bayangan atau pantulan pada daun & blur pada gambar Hindari bayangan atau pantulan pada daun & blur pada gambar
</div> </div>
</li> </li>
</ul> </ul>
<div className="mt-4"> <div className="mt-4">
<div className="rounded-lg overflow-hidden mt-4"> <div className="rounded-lg overflow-hidden mt-4">
<div className="relative h-36 overflow-hidden bg-[url('/src/assets/images/scan-guide-bg.png')] bg-cover bg-center text-white md:h-44"> <div className="relative h-36 overflow-hidden bg-[url('/src/assets/images/scan-guide-bg.png')] bg-cover bg-center text-white md:h-44">
<div className="absolute inset-0 bg-black/25" /> <div className="absolute inset-0 bg-black/25" />
<div className="absolute inset-0 bg-linear-to-b from-black/5 via-transparent to-black/35" /> <div className="absolute inset-0 bg-linear-to-b from-black/5 via-transparent to-black/35" />
<div className="relative z-10 flex h-full flex-col items-center justify-center gap-5 text-center"> <div className="relative z-10 flex h-full flex-col items-center justify-center gap-5 text-center">
<div className="relative flex h-full w-30 items-center justify-center mt-8"> <div className="relative flex h-full w-30 items-center justify-center mt-8">
<span className="absolute left-0 top-0 h-4 w-4 border-l-2 border-t-2 border-l-lime-300 border-t-lime-300" /> <span className="absolute left-0 top-0 h-4 w-4 border-l-2 border-t-2 border-l-lime-300 border-t-lime-300" />
<span className="absolute right-0 top-0 h-4 w-4 border-r-2 border-t-2 border-r-lime-300 border-t-lime-300" /> <span className="absolute right-0 top-0 h-4 w-4 border-r-2 border-t-2 border-r-lime-300 border-t-lime-300" />
<span className="absolute bottom-0 left-0 h-4 w-4 border-b-2 border-l-2 border-b-lime-300 border-l-lime-300" /> <span className="absolute bottom-0 left-0 h-4 w-4 border-b-2 border-l-2 border-b-lime-300 border-l-lime-300" />
<span className="absolute bottom-0 right-0 h-4 w-4 border-b-2 border-r-2 border-b-lime-300 border-r-lime-300" /> <span className="absolute bottom-0 right-0 h-4 w-4 border-b-2 border-r-2 border-b-lime-300 border-r-lime-300" />
<span className="relative z-10 text-xs font-semibold tracking-[0.28em] text-white"> <span className="relative z-10 text-xs font-semibold tracking-[0.28em] text-white">
AREA SCAN AREA SCAN
</span> </span>
</div> </div>
<div className="text-[11px] font-medium text-lime-100 bg-black/30 w-full py-1 rounded"> <div className="text-[11px] font-medium text-lime-100 bg-black/30 w-full py-1 rounded">
Posisi ideal: daun memenuhi bingkai Posisi ideal: daun memenuhi bingkai
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </CardContent>
</div> </Card>
{/* Card 2: Persyaratan Berkas */} {/* Card 2: Persyaratan Berkas */}
<div className="bg-white rounded-2xl shadow-sm p-5"> <Card className="w-full h-max">
<h3 className="text-md font-bold text-emerald-800 flex items-center gap-3 mb-4"> <CardContent className="px-6 py-4">
Persyaratan Berkas <h3 className="font-bold text-emerald-800 flex items-center gap-3 mb-4">
</h3> Persyaratan Berkas
<div className="flex flex-col gap-2"> </h3>
{[ <div className="flex flex-col gap-2">
{ label: "Format", value: "PNG, JPG, JPEG" }, {[
{ label: "Ukuran Maks.", value: "5 MB" }, { label: "Format", value: "PNG, JPG, JPEG" },
{ label: "Resolusi Min.", value: "512 × 512 px" }, { label: "Ukuran Maks.", value: "5 MB" },
{ label: "Objek Foto", value: "Daun jagung tunggal" }, { label: "Resolusi Min.", value: "512 × 512 px" },
].map((r, i) => ( { label: "Objek Foto", value: "Daun jagung tunggal" },
<div ].map((r, i) => (
key={i} <div
className="flex items-center justify-between py-1.5" key={i}
style={{ borderBottom: i < 3 ? "1px solid #f0f0f0" : "none" }} className="flex items-center justify-between py-1.5"
> style={{
<span borderBottom: i < 3 ? "1px solid #f0f0f0" : "none",
className="text-gray-400" }}
style={{ fontSize: "0.75rem" }}
> >
{r.label} <span
</span> className="text-gray-400"
<span className="text-sm font-medium text-gray-700"> style={{ fontSize: "0.75rem" }}
{r.value} >
</span> {r.label}
</div> </span>
))} <span className="text-sm font-medium text-gray-700">
</div> {r.value}
</div> </span>
</div> </div>
))}
</div>
</CardContent>
</Card>
</aside>
</div> </div>
{/* Modal Section */} {/* Result Modal */}
<Modal <Modal
open={previewOpen} open={previewOpen}
onClose={() => { onClose={() => {
@@ -429,6 +483,6 @@ export function ScanPage() {
</div> </div>
) : null} ) : null}
</Modal> </Modal>
</main> </div>
); );
} }