Use more widely-supported method to get GPU name

Author: vinhowe

examples/piston-train-toy/src/lib/components/controls/Controls.svelte

@@ -17,6 +17,7 @@
 		controlSectionsOpen,
 		getGpuName,
 		gpuPowerPreference,
+		hasWebGPU,
 		setGpuName,
 		toggleControlSection
 	} from '$lib/workspace/ui.svelte';
@@ -78,12 +79,34 @@
 		JSON.stringify(config.model);
 		JSON.stringify(config.data);
 		JSON.stringify(gpuPowerPreference.current);
-		setGpuName(null);
 
 		// Trigger parameter count when config changes, but triggerParameterCount itself needs to be untracked
 		untrack(() => triggerModelInspection());
 	});
 
+	$effect(() => {
+		// Recompute GPU name whenever WebGPU availability or power preference changes
+		JSON.stringify(gpuPowerPreference.current);
+		const has = hasWebGPU.current;
+		if (!has || typeof navigator === 'undefined' || !('gpu' in navigator)) {
+			setGpuName(null);
+			return;
+		}
+		void (async () => {
+			try {
+				const adapter = await navigator.gpu.requestAdapter({
+					powerPreference: gpuPowerPreference.current
+				});
+				// Use info.description if available
+				const name = adapter?.info?.description;
+				setGpuName(typeof name === 'string' && name.length > 0 ? name : null);
+			} catch (error) {
+				console.error('Error requesting WebGPU adapter:', error);
+				setGpuName(null);
+			}
+		})();
+	});
+
 	// Preset selection wiring: local selection drives setPreset, stays in sync with config
 	let lastAppliedPreset = $state<string | null>(null);
 	let selectedPresetId = $state<string>('');

examples/piston-train-toy/src/lib/train/moduleWorker.ts

@@ -312,10 +312,8 @@ self.addEventListener('message', async (event) => {
 
 				// Apply GPU power preference before any GPU usage
 				if (gpuPowerPreference) {
-					const name =
-						(await piston.applyGpuPowerPreference(gpuPowerPreference))?.adapterInfo?.description ??
-						null;
-					self.postMessage({ type: 'gpu.info', name: name ?? null });
+					await piston.applyGpuPowerPreference(gpuPowerPreference);
+					(globalThis as unknown as { piston: typeof piston }).piston = piston;
 				}
 
 				console.debug('Inspecting model...');

examples/piston-train-toy/src/lib/workspace/ui.svelte.ts

@@ -42,12 +42,12 @@ export const gpuPowerPreference = new LocalStorage<'high-performance' | 'low-pow
 	'gpuPowerPreference',
 	'high-performance'
 );
-let gpuName = $state<string | null>(null);
+const gpuName = $state<{ current: string | null }>({ current: null });
 export function setGpuName(name: string | null) {
-	gpuName = name;
+	gpuName.current = name;
 }
 export function getGpuName() {
-	return gpuName;
+	return gpuName.current;
 }
 
 export const setupUI = () => {

examples/piston-train-toy/src/lib/workspace/workers.svelte.ts

@@ -9,7 +9,6 @@ import { lastSessionStore } from './lastSessionStore';
 import { currentRun, log, runsMap } from './runs.svelte';
 import {
 	gpuPowerPreference,
-	setGpuName,
 	triggerLowDiversityDatasetError,
 	triggerVramLimitFlash
 } from './ui.svelte';
@@ -451,11 +450,6 @@ export async function initializeModelInspectionWorker() {
 					case 'error':
 						console.error('[Main] Model inspection worker error:', data.message);
 						break;
-					case 'gpu.info': {
-						const name = (data as { name?: string | null }).name ?? null;
-						setGpuName(name ?? null);
-						break;
-					}
 				}
 			};