652418017c
Some checks failed
Auto Tag / auto-tag (push) Successful in 4s
Test / rust-fmt-check (push) Failing after 1m1s
Release / build-macos-arm64 (push) Successful in 3m2s
Test / rust-clippy (push) Successful in 7m16s
Test / frontend-typecheck (push) Has been cancelled
Test / frontend-tests (push) Has been cancelled
Test / rust-tests (push) Has been cancelled
Release / build-linux-amd64 (push) Has been cancelled
Release / build-windows-amd64 (push) Has been cancelled
Release / build-linux-arm64 (push) Has been cancelled
105 lines
3.6 KiB
TypeScript
105 lines
3.6 KiB
TypeScript
import React from "react";
|
|
import type { HardwareInfo, ModelRecommendation } from "@/lib/tauriCommands";
|
|
import { Badge, Progress } from "@/components/ui";
|
|
import { Cpu, HardDrive, Monitor } from "lucide-react";
|
|
|
|
interface HardwareReportProps {
|
|
hardware: HardwareInfo | null;
|
|
recommendations: ModelRecommendation[];
|
|
}
|
|
|
|
export function HardwareReport({ hardware, recommendations }: HardwareReportProps) {
|
|
if (!hardware) {
|
|
return (
|
|
<div className="text-sm text-muted-foreground p-4">
|
|
Loading hardware information...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const maxRamDisplay = 64;
|
|
const ramPercentage = Math.min(100, (hardware.total_ram_gb / maxRamDisplay) * 100);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Hardware Info */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{/* CPU */}
|
|
<div className="flex items-start gap-3 rounded-lg border p-4">
|
|
<Cpu className="w-5 h-5 text-muted-foreground mt-0.5" />
|
|
<div>
|
|
<p className="text-sm font-medium">CPU</p>
|
|
<Badge variant="secondary" className="mt-1">
|
|
{hardware.cpu_arch}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
{/* RAM */}
|
|
<div className="flex items-start gap-3 rounded-lg border p-4">
|
|
<HardDrive className="w-5 h-5 text-muted-foreground mt-0.5" />
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium">RAM</p>
|
|
<p className="text-xs text-muted-foreground mt-1 mb-2">
|
|
{hardware.total_ram_gb.toFixed(1)} GB / {maxRamDisplay} GB
|
|
</p>
|
|
<Progress value={ramPercentage} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* GPU */}
|
|
<div className="flex items-start gap-3 rounded-lg border p-4">
|
|
<Monitor className="w-5 h-5 text-muted-foreground mt-0.5" />
|
|
<div>
|
|
<p className="text-sm font-medium">GPU</p>
|
|
{hardware.gpu_vendor ? (
|
|
<>
|
|
<p className="text-xs mt-1">{hardware.gpu_vendor}</p>
|
|
{hardware.gpu_vram_gb && (
|
|
<p className="text-xs text-muted-foreground">
|
|
{hardware.gpu_vram_gb} GB VRAM
|
|
</p>
|
|
)}
|
|
</>
|
|
) : (
|
|
<p className="text-xs text-muted-foreground mt-1">No GPU detected</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Model Recommendations */}
|
|
{recommendations.length > 0 && (
|
|
<div>
|
|
<h4 className="text-sm font-medium mb-3">Model Recommendations</h4>
|
|
<div className="space-y-2">
|
|
{recommendations.map((rec) => (
|
|
<div
|
|
key={rec.name}
|
|
className={`flex items-center justify-between rounded-lg border p-3 ${
|
|
rec.recommended ? "border-green-600 bg-green-50 dark:bg-green-950" : ""
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
{rec.recommended && (
|
|
<Badge variant="success">RECOMMENDED</Badge>
|
|
)}
|
|
<div>
|
|
<p className="text-sm font-medium">{rec.name}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{rec.size} | Min RAM: {rec.min_ram_gb} GB
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground max-w-[200px] text-right">
|
|
{rec.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|