diff --git a/THIRD_PARTY_NOTICES.md b/THIRD_PARTY_NOTICES.md new file mode 100644 index 000000000..ff6a1191d --- /dev/null +++ b/THIRD_PARTY_NOTICES.md @@ -0,0 +1 @@ +AMD and the AMD Arrow logo are trademarks of Advanced Micro Devices, Inc. \ No newline at end of file diff --git a/apps/desktop-ui/public/assets/images/amd-rocm-logo.png b/apps/desktop-ui/public/assets/images/amd-rocm-logo.png new file mode 100644 index 000000000..82de495cd Binary files /dev/null and b/apps/desktop-ui/public/assets/images/amd-rocm-logo.png differ diff --git a/apps/desktop-ui/src/components/install/GpuPicker.stories.ts b/apps/desktop-ui/src/components/install/GpuPicker.stories.ts new file mode 100644 index 000000000..d49893c38 --- /dev/null +++ b/apps/desktop-ui/src/components/install/GpuPicker.stories.ts @@ -0,0 +1,84 @@ +// eslint-disable-next-line storybook/no-renderer-packages +import type { Meta, StoryObj } from '@storybook/vue3' +import type { + ElectronAPI, + TorchDeviceType +} from '@comfyorg/comfyui-electron-types' +import { ref } from 'vue' + +import GpuPicker from './GpuPicker.vue' + +type Platform = ReturnType +type ElectronAPIStub = Pick +type WindowWithElectron = Window & { electronAPI?: ElectronAPIStub } + +const meta: Meta = { + title: 'Desktop/Components/GpuPicker', + component: GpuPicker, + parameters: { + layout: 'padded', + backgrounds: { + default: 'dark', + values: [ + { name: 'dark', value: '#0a0a0a' }, + { name: 'neutral-900', value: '#171717' }, + { name: 'neutral-950', value: '#0a0a0a' } + ] + } + } +} + +export default meta +type Story = StoryObj + +function createElectronDecorator(platform: Platform) { + function getPlatform() { + return platform + } + + return function ElectronDecorator() { + const windowWithElectron = window as WindowWithElectron + windowWithElectron.electronAPI = { getPlatform } + return { template: '' } + } +} + +function renderWithDevice(device: TorchDeviceType | null) { + return function Render() { + return { + components: { GpuPicker }, + setup() { + const selected = ref(device) + return { selected } + }, + template: ` +
+ +
+ ` + } + } +} + +const windowsDecorator = createElectronDecorator('win32') +const macDecorator = createElectronDecorator('darwin') + +export const WindowsNvidiaSelected: Story = { + decorators: [windowsDecorator], + render: renderWithDevice('nvidia') +} + +export const WindowsAmdSelected: Story = { + decorators: [windowsDecorator], + render: renderWithDevice('amd') +} + +export const WindowsCpuSelected: Story = { + decorators: [windowsDecorator], + render: renderWithDevice('cpu') +} + +export const MacMpsSelected: Story = { + decorators: [macDecorator], + render: renderWithDevice('mps') +} diff --git a/apps/desktop-ui/src/components/install/GpuPicker.vue b/apps/desktop-ui/src/components/install/GpuPicker.vue index 98dddb762..217e99ce5 100644 --- a/apps/desktop-ui/src/components/install/GpuPicker.vue +++ b/apps/desktop-ui/src/components/install/GpuPicker.vue @@ -11,29 +11,32 @@ - + @@ -41,7 +44,6 @@ @@ -81,13 +83,15 @@ const selected = defineModel('device', { const electron = electronAPI() const platform = electron.getPlatform() -const showRecommendedBadge = computed( - () => selected.value === 'mps' || selected.value === 'nvidia' +const recommendedDevices: TorchDeviceType[] = ['mps', 'nvidia', 'amd'] +const showRecommendedBadge = computed(() => + selected.value ? recommendedDevices.includes(selected.value) : false ) const descriptionKeys = { mps: 'appleMetal', nvidia: 'nvidia', + amd: 'amd', cpu: 'cpu', unsupported: 'manual' } as const @@ -97,7 +101,7 @@ const descriptionText = computed(() => { return st(`install.gpuPicker.${key}Description`, '') }) -const pickGpu = (value: TorchDeviceType) => { +function pickGpu(value: TorchDeviceType) { selected.value = value } diff --git a/apps/desktop-ui/src/components/install/HardwareOption.stories.ts b/apps/desktop-ui/src/components/install/HardwareOption.stories.ts index d830af49f..fc0e56713 100644 --- a/apps/desktop-ui/src/components/install/HardwareOption.stories.ts +++ b/apps/desktop-ui/src/components/install/HardwareOption.stories.ts @@ -29,7 +29,6 @@ export const AppleMetalSelected: Story = { imagePath: '/assets/images/apple-mps-logo.png', placeholderText: 'Apple Metal', subtitle: 'Apple Metal', - value: 'mps', selected: true } } @@ -39,7 +38,6 @@ export const AppleMetalUnselected: Story = { imagePath: '/assets/images/apple-mps-logo.png', placeholderText: 'Apple Metal', subtitle: 'Apple Metal', - value: 'mps', selected: false } } @@ -48,7 +46,6 @@ export const CPUOption: Story = { args: { placeholderText: 'CPU', subtitle: 'Subtitle', - value: 'cpu', selected: false } } @@ -57,7 +54,6 @@ export const ManualInstall: Story = { args: { placeholderText: 'Manual Install', subtitle: 'Subtitle', - value: 'unsupported', selected: false } } @@ -67,7 +63,6 @@ export const NvidiaSelected: Story = { imagePath: '/assets/images/nvidia-logo-square.jpg', placeholderText: 'NVIDIA', subtitle: 'NVIDIA', - value: 'nvidia', selected: true } } diff --git a/apps/desktop-ui/src/components/install/HardwareOption.vue b/apps/desktop-ui/src/components/install/HardwareOption.vue index ae254fd8f..9acc9e79c 100644 --- a/apps/desktop-ui/src/components/install/HardwareOption.vue +++ b/apps/desktop-ui/src/components/install/HardwareOption.vue @@ -36,17 +36,13 @@