mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-28 02:34:10 +00:00
675a67cfda
Add AMD ROCm GPU option to the desktop installer ## What changed - Add an AMD GPU choice to the installer picker with updated recommended badge logic, logo asset, and i18n copy. - Accept and auto-select the new `amd` device type in the install flow when it is detected. - Update `@comfyorg/comfyui-electron-types` and lockfile entries required for the new device enum. ## Why - Desktop users with AMD GPUs need a first-class install path instead of falling back to CPU/manual options. - This reuses the existing picker/device model to keep the change scoped and consistent with current UX. - Tradeoffs: torch mirror selection still falls back to the CPU mirror for AMD until a dedicated ROCm mirror is available. ## Evidence - Interactive Storybook file `apps/desktop-ui/src/components/install/GpuPicker.stories.ts` <img width="1377" height="834" alt="image" src="https://github.com/user-attachments/assets/34145f46-d8cc-4e59-b587-0ab5ee79f888" />
52 lines
1.4 KiB
Vue
52 lines
1.4 KiB
Vue
<template>
|
|
<div class="relative">
|
|
<!-- Recommended Badge -->
|
|
<button
|
|
:class="
|
|
cn(
|
|
'hardware-option w-[170px] h-[190px] p-5 flex flex-col items-center rounded-3xl transition-all duration-200 bg-neutral-900/70 border-4',
|
|
selected ? 'border-solid border-brand-yellow' : 'border-transparent'
|
|
)
|
|
"
|
|
@click="$emit('click')"
|
|
>
|
|
<!-- Icon/Logo Area - Rounded square container -->
|
|
<div
|
|
class="icon-container w-[110px] h-[110px] shrink-0 rounded-2xl bg-neutral-800 flex items-center justify-center overflow-hidden"
|
|
>
|
|
<img
|
|
v-if="imagePath"
|
|
:src="imagePath"
|
|
:alt="placeholderText"
|
|
class="w-full h-full object-cover"
|
|
style="object-position: 57% center"
|
|
draggable="false"
|
|
/>
|
|
<span v-else class="text-xl font-medium text-neutral-400">
|
|
{{ placeholderText }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Text Content -->
|
|
<div v-if="subtitle" class="text-center mt-4">
|
|
<div class="text-sm text-neutral-500">{{ subtitle }}</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
interface Props {
|
|
imagePath?: string
|
|
placeholderText: string
|
|
subtitle?: string
|
|
selected?: boolean
|
|
}
|
|
|
|
defineProps<Props>()
|
|
|
|
defineEmits<{ click: [] }>()
|
|
</script>
|