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

fix(diagnosis): correct risk level mapping and dynamic confidence UI

Browse Source 
- Fix `getRiskLevelKey` to properly recognize English risk level values ("low", "high"), preventing "Healthy Leaf" from incorrectly defaulting to medium risk.
- Update confidence bar text and colors to dynamically show warning alerts when AI confidence falls below the 75% threshold.
This commit is contained in:
seriouselly
2026-06-15 20:38:26 +07:00
parent 528a1622d0
commit 8f1308c8af
1 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/diagnose-result-view.tsx
+26 -9
View File
@@ -15,7 +15,7 @@ import { RiskBadge } from "@/components/risk-badge";
type Props = {
imageUrl: string;
confidence: number; // contoh: 0.95
confidence: number;
diseaseName: string;
scientificName: string;
riskLevel: string;
@@ -42,8 +42,8 @@ export function DiagnosisResultView({
const getRiskLevelKey = (level: string): "low" | "medium" | "high" => {
const normalized = level.toLowerCase();
if (normalized.includes("rendah")) return "low";
if (normalized.includes("tinggi")) return "high";
if (normalized.includes("rendah") || normalized === "low") return "low";
if (normalized.includes("tinggi") || normalized === "high") return "high";
return "medium";
};
@@ -85,18 +85,35 @@ export function DiagnosisResultView({
<div className="space-y-2 mb-4">
<div className="flex justify-between text-sm font-bold text-slate-700">
<span>Tingkat Keyakinan AI</span>
<span className="text-emerald-600">{confidencePercent}%</span>
<span
className={
confidencePercent >= 75
? "text-emerald-600"
: "text-amber-500"
}
>
{confidencePercent}%
</span>
</div>
<div className="w-full bg-slate-200 rounded-full h-2.5 overflow-hidden">
<div
className="bg-emerald-500 h-2.5 rounded-full transition-all duration-1000"
className={`h-2.5 rounded-full transition-all duration-1000 ${
confidencePercent >= 75 ? "bg-emerald-500" : "bg-amber-500"
}`}
style={{ width: `${confidencePercent}%` }}
></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%)
</p>
{confidencePercent >= 75 ? (
<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%)
</p>
) : (
<p className="text-[11px] text-amber-600 flex items-center gap-1 font-medium">
<AlertTriangle className="w-3 h-3" /> Di bawah ambang batas
minimum (75%)
</p>
)}
</div>
<div className="flex items-center gap-3 pt-4 border-t border-amber-200/50">