From 4df0ad3dc7a91c0e1e39d51d84362d692b1287ba Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Mon, 29 Dec 2025 20:22:32 -0800
Subject: [PATCH] Add AMD as an install option + lint fixes

---
 .../src/components/install/GpuPicker.vue      | 30 +++++++++++--------
 .../install/HardwareOption.stories.ts         |  5 ----
 .../src/components/install/HardwareOption.vue |  4 ---
 .../install/InstallLocationPicker.vue         |  7 +++--
 .../components/maintenance/TaskListPanel.vue  |  1 -
 .../src/types/desktop/torchTypes.ts           |  3 ++
 apps/desktop-ui/src/views/InstallView.vue     | 28 ++++++++++-------
 apps/desktop-ui/src/views/MaintenanceView.vue |  1 -
 src/locales/en/main.json                      |  4 ++-
 9 files changed, 45 insertions(+), 38 deletions(-)
 create mode 100644 apps/desktop-ui/src/types/desktop/torchTypes.ts

diff --git a/apps/desktop-ui/src/components/install/GpuPicker.vue b/apps/desktop-ui/src/components/install/GpuPicker.vue
index 98dddb762..719977087 100644
--- a/apps/desktop-ui/src/components/install/GpuPicker.vue
+++ b/apps/desktop-ui/src/components/install/GpuPicker.vue
@@ -11,29 +11,31 @@
       <!-- Apple Metal / NVIDIA -->
       <HardwareOption
         v-if="platform === 'darwin'"
-        :image-path="'./assets/images/apple-mps-logo.png'"
+        image-path="./assets/images/apple-mps-logo.png"
         placeholder-text="Apple Metal"
         subtitle="Apple Metal"
-        :value="'mps'"
         :selected="selected === 'mps'"
-        :recommended="true"
         @click="pickGpu('mps')"
       />
       <HardwareOption
         v-else
-        :image-path="'./assets/images/nvidia-logo-square.jpg'"
+        image-path="./assets/images/nvidia-logo-square.jpg"
         placeholder-text="NVIDIA"
         :subtitle="$t('install.gpuPicker.nvidiaSubtitle')"
-        :value="'nvidia'"
         :selected="selected === 'nvidia'"
-        :recommended="true"
         @click="pickGpu('nvidia')"
       />
+      <HardwareOption
+        v-if="isWindows"
+        placeholder-text="AMD"
+        :subtitle="$t('install.gpuPicker.amdSubtitle')"
+        :selected="selected === 'amd'"
+        @click="pickGpu('amd')"
+      />
       <!-- CPU -->
       <HardwareOption
         placeholder-text="CPU"
         :subtitle="$t('install.gpuPicker.cpuSubtitle')"
-        :value="'cpu'"
         :selected="selected === 'cpu'"
         @click="pickGpu('cpu')"
       />
@@ -41,7 +43,6 @@
       <HardwareOption
         placeholder-text="Manual Install"
         :subtitle="$t('install.gpuPicker.manualSubtitle')"
-        :value="'unsupported'"
         :selected="selected === 'unsupported'"
         @click="pickGpu('unsupported')"
       />
@@ -66,28 +67,31 @@
 </template>
 
 <script setup lang="ts">
-import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
 
 import HardwareOption from '@/components/install/HardwareOption.vue'
 import { st } from '@/i18n'
+import type { DesktopTorchDeviceType } from '@/types/desktop/torchTypes'
 import { electronAPI } from '@/utils/envUtil'
 
-const selected = defineModel<TorchDeviceType | null>('device', {
+const selected = defineModel<DesktopTorchDeviceType | null>('device', {
   required: true
 })
 
 const electron = electronAPI()
 const platform = electron.getPlatform()
+const isWindows = platform === 'win32'
 
-const showRecommendedBadge = computed(
-  () => selected.value === 'mps' || selected.value === 'nvidia'
+const recommendedDevices: DesktopTorchDeviceType[] = ['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: DesktopTorchDeviceType) {
   selected.value = value
 }
 </script>
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 @@
 </template>
 
 <script setup lang="ts">
-import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
-
 import { cn } from '@/utils/tailwindUtil'
 
 interface Props {
   imagePath?: string
   placeholderText: string
   subtitle?: string
-  value: TorchDeviceType
   selected?: boolean
-  recommended?: boolean
 }
 
 defineProps<Props>()
diff --git a/apps/desktop-ui/src/components/install/InstallLocationPicker.vue b/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
index 2122a136e..6e4997160 100644
--- a/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
+++ b/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
@@ -104,7 +104,6 @@
 </template>
 
 <script setup lang="ts">
-import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
 import { TorchMirrorUrl } from '@comfyorg/comfyui-electron-types'
 import { isInChina } from '@comfyorg/shared-frontend-utils/networkUtil'
 import Accordion from 'primevue/accordion'
@@ -121,6 +120,7 @@ import { useI18n } from 'vue-i18n'
 
 import { PYPI_MIRROR, PYTHON_MIRROR } from '@/constants/uvMirrors'
 import type { UVMirror } from '@/constants/uvMirrors'
+import type { DesktopTorchDeviceType } from '@/types/desktop/torchTypes'
 import { electronAPI } from '@/utils/envUtil'
 import { ValidationState } from '@/utils/validationUtil'
 
@@ -143,7 +143,7 @@ const torchMirror = defineModel<string>('torchMirror', {
   default: ''
 })
 
-const { device } = defineProps<{ device: TorchDeviceType | null }>()
+const { device } = defineProps<{ device: DesktopTorchDeviceType | null }>()
 
 const pathExists = ref(false)
 const nonDefaultDrive = ref(false)
@@ -155,7 +155,7 @@ const activeAccordionIndex = ref<string[] | undefined>(undefined)
 const electron = electronAPI()
 
 // Mirror configuration logic
-const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
+function getTorchMirrorItem(device: DesktopTorchDeviceType): UVMirror {
   const settingId = 'Comfy-Desktop.UV.TorchInstallMirror'
   switch (device) {
     case 'mps':
@@ -170,6 +170,7 @@ const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
         mirror: TorchMirrorUrl.Cuda,
         fallbackMirror: TorchMirrorUrl.Cuda
       }
+    case 'amd':
     case 'cpu':
     default:
       return {
diff --git a/apps/desktop-ui/src/components/maintenance/TaskListPanel.vue b/apps/desktop-ui/src/components/maintenance/TaskListPanel.vue
index c70db0af0..2d8fd7484 100644
--- a/apps/desktop-ui/src/components/maintenance/TaskListPanel.vue
+++ b/apps/desktop-ui/src/components/maintenance/TaskListPanel.vue
@@ -63,7 +63,6 @@ const taskStore = useMaintenanceTaskStore()
 defineProps<{
   displayAsList: string
   filter: MaintenanceFilter
-  isRefreshing: boolean
 }>()
 
 const executeTask = async (task: MaintenanceTask) => {
diff --git a/apps/desktop-ui/src/types/desktop/torchTypes.ts b/apps/desktop-ui/src/types/desktop/torchTypes.ts
new file mode 100644
index 000000000..9400ce1dd
--- /dev/null
+++ b/apps/desktop-ui/src/types/desktop/torchTypes.ts
@@ -0,0 +1,3 @@
+import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
+
+export type DesktopTorchDeviceType = TorchDeviceType | 'amd'
diff --git a/apps/desktop-ui/src/views/InstallView.vue b/apps/desktop-ui/src/views/InstallView.vue
index 6b170937c..282d3082e 100644
--- a/apps/desktop-ui/src/views/InstallView.vue
+++ b/apps/desktop-ui/src/views/InstallView.vue
@@ -53,10 +53,7 @@
 </template>
 
 <script setup lang="ts">
-import type {
-  InstallOptions,
-  TorchDeviceType
-} from '@comfyorg/comfyui-electron-types'
+import type { InstallOptions } from '@comfyorg/comfyui-electron-types'
 import StepPanel from 'primevue/steppanel'
 import StepPanels from 'primevue/steppanels'
 import Stepper from 'primevue/stepper'
@@ -67,10 +64,15 @@ import DesktopSettingsConfiguration from '@/components/install/DesktopSettingsCo
 import GpuPicker from '@/components/install/GpuPicker.vue'
 import InstallFooter from '@/components/install/InstallFooter.vue'
 import InstallLocationPicker from '@/components/install/InstallLocationPicker.vue'
+import type { DesktopTorchDeviceType } from '@/types/desktop/torchTypes'
 import { electronAPI } from '@/utils/envUtil'
 import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
 
-const device = ref<TorchDeviceType | null>(null)
+type DesktopInstallOptions = Omit<InstallOptions, 'device'> & {
+  device: DesktopTorchDeviceType
+}
+
+const device = ref<DesktopTorchDeviceType | null>(null)
 
 const installPath = ref('')
 const pathError = ref('')
@@ -143,7 +145,9 @@ const goToPreviousStep = () => {
 const electron = electronAPI()
 const router = useRouter()
 const install = async () => {
-  const options: InstallOptions = {
+  if (!device.value) return
+
+  const options: DesktopInstallOptions = {
     installPath: installPath.value,
     autoUpdate: autoUpdate.value,
     allowMetrics: allowMetrics.value,
@@ -152,10 +156,9 @@ const install = async () => {
     pythonMirror: pythonMirror.value,
     pypiMirror: pypiMirror.value,
     torchMirror: torchMirror.value,
-    // @ts-expect-error fixme ts strict error
     device: device.value
   }
-  electron.installComfyUI(options)
+  electron.installComfyUI(options as InstallOptions)
 
   const nextPage =
     options.device === 'unsupported' ? '/manual-configuration' : '/server-start'
@@ -165,8 +168,13 @@ const install = async () => {
 onMounted(async () => {
   if (!electron) return
 
-  const detectedGpu = await electron.Config.getDetectedGpu()
-  if (detectedGpu === 'mps' || detectedGpu === 'nvidia') {
+  const detectedGpu =
+    (await electron.Config.getDetectedGpu()) as DesktopTorchDeviceType | null
+  if (
+    detectedGpu === 'mps' ||
+    detectedGpu === 'nvidia' ||
+    detectedGpu === 'amd'
+  ) {
     device.value = detectedGpu
   }
 
diff --git a/apps/desktop-ui/src/views/MaintenanceView.vue b/apps/desktop-ui/src/views/MaintenanceView.vue
index 433dda54d..0733f80fc 100644
--- a/apps/desktop-ui/src/views/MaintenanceView.vue
+++ b/apps/desktop-ui/src/views/MaintenanceView.vue
@@ -74,7 +74,6 @@
           class="border-neutral-700 border-solid border-x-0 border-y"
           :filter
           :display-as-list
-          :is-refreshing
         />
 
         <!-- Actions -->
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 1953cfb7e..6a7aa909b 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -508,10 +508,12 @@
       "title": "Choose your hardware setup",
       "recommended": "RECOMMENDED",
       "nvidiaSubtitle": "NVIDIA CUDA",
+      "amdSubtitle": "AMD ROCm",
       "cpuSubtitle": "CPU Mode",
       "manualSubtitle": "Manual Setup",
       "appleMetalDescription": "Leverages your Mac's GPU for faster speed and a better overall experience",
       "nvidiaDescription": "Use your NVIDIA GPU with CUDA acceleration for the best performance.",
+      "amdDescription": "Use your AMD GPU with ROCm acceleration for the best performance on Windows.",
       "cpuDescription": "Use CPU mode for compatibility when GPU acceleration is not available",
       "manualDescription": "Configure ComfyUI manually for advanced setups or unsupported hardware"
     },
@@ -2449,4 +2451,4 @@
     "recentReleases": "Recent releases",
     "helpCenterMenu": "Help Center Menu"
   }
-}
\ No newline at end of file
+}