86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
/**
|
|
* Compute Backend Label
|
|
*
|
|
* Displays the active compute backend (CUDA, Metal, or CPU) with color-coding.
|
|
* Fetches the actual runtime backend from the Rust backend.
|
|
*/
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { getComputeBackend } from "../lib/simulation";
|
|
import type { ComputeBackendInfo, ComputeBackend } from "../lib/types";
|
|
|
|
const BACKEND_STYLES: Record<
|
|
ComputeBackend,
|
|
{ bg: string; border: string; text: string }
|
|
> = {
|
|
CUDA: { bg: "rgba(34, 197, 94, 0.2)", border: "#22c55e", text: "#22c55e" },
|
|
METAL: { bg: "rgba(78, 205, 196, 0.2)", border: "#4ECDC4", text: "#4ECDC4" },
|
|
CPU: { bg: "rgba(251, 146, 60, 0.2)", border: "#fb923c", text: "#fb923c" },
|
|
};
|
|
|
|
export function ComputeBackendLabel() {
|
|
const [info, setInfo] = useState<ComputeBackendInfo | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
getComputeBackend()
|
|
.then(setInfo)
|
|
.catch((e) => {
|
|
console.error("Failed to get compute backend:", e);
|
|
setError(e instanceof Error ? e.message : String(e));
|
|
});
|
|
}, []);
|
|
|
|
if (error) {
|
|
return (
|
|
<div style={styles.container}>
|
|
<span style={{ ...styles.label, color: "#f44336" }}>ERROR</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!info) {
|
|
return (
|
|
<div style={styles.container}>
|
|
<span style={{ ...styles.label, color: "#888" }}>...</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const colorStyle = BACKEND_STYLES[info.backend] || BACKEND_STYLES.CPU;
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
...styles.container,
|
|
backgroundColor: colorStyle.bg,
|
|
borderColor: colorStyle.border,
|
|
}}
|
|
title={`Available backends: ${info.available.join(", ")}`}
|
|
>
|
|
<span style={{ ...styles.label, color: colorStyle.text }}>
|
|
{info.backend}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const styles: Record<string, React.CSSProperties> = {
|
|
container: {
|
|
padding: "6px 12px",
|
|
borderRadius: "6px",
|
|
border: "1px solid",
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
label: {
|
|
fontSize: "12px",
|
|
fontWeight: 600,
|
|
fontFamily: "monospace",
|
|
letterSpacing: "0.5px",
|
|
},
|
|
};
|
|
|
|
export default ComputeBackendLabel;
|