-
Notifications
You must be signed in to change notification settings - Fork 138
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add GPU selection to desktop installer (#1888)
* Remove redundant code * Add GPU picker screen to installer * Permit jumping installation steps when visited * Prevent sad girl from covering buttons * Update gpu options to match availability * Ensure install screen renders inside bounds * Pre-select GPU detected by desktop native * Redesign GPU selection screen * Prevent text highlight on installer stepper * Add translations for GPU picker * Rename for clarity * Remove unused code * Update electron types * Update locales [skip ci] --------- Co-authored-by: huchenlei <[email protected]> Co-authored-by: github-actions <[email protected]>
- Loading branch information
3 people
authored
Dec 16, 2024
1 parent
a441908
commit 601b739
Showing
14 changed files
with
440 additions
and
67 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,203 @@ | ||
| <template> | ||
| <div class="flex flex-col gap-6 w-[600px] h-[30rem] select-none"> | ||
| <!-- Installation Path Section --> | ||
| <div class="grow flex flex-col gap-4 text-neutral-300"> | ||
| <h2 class="text-2xl font-semibold text-neutral-100"> | ||
| {{ $t('install.gpuSelection.selectGpu') }} | ||
| </h2> | ||
|
|
||
| <p class="m-1 text-neutral-400"> | ||
| {{ $t('install.gpuSelection.selectGpuDescription') }}: | ||
| </p> | ||
|
|
||
| <!-- GPU Selection buttons --> | ||
| <div | ||
| class="flex gap-2 text-center transition-opacity" | ||
| :class="{ selected: selected }" | ||
| > | ||
| <!-- NVIDIA --> | ||
| <div | ||
| v-if="platform !== 'darwin'" | ||
| class="gpu-button" | ||
| :class="{ selected: selected === 'nvidia' }" | ||
| role="button" | ||
| @click="pickGpu('nvidia')" | ||
| > | ||
| <img | ||
| class="m-12" | ||
| alt="NVIDIA logo" | ||
| width="196" | ||
| height="32" | ||
| src="/assets/images/nvidia-logo.svg" | ||
| /> | ||
| </div> | ||
| <!-- MPS --> | ||
| <div | ||
| v-if="platform === 'darwin'" | ||
| class="gpu-button" | ||
| :class="{ selected: selected === 'mps' }" | ||
| role="button" | ||
| @click="pickGpu('mps')" | ||
| > | ||
| <img | ||
| class="rounded-lg hover-brighten" | ||
| alt="Apple Metal Performance Shaders Logo" | ||
| width="292" | ||
| ratio | ||
| src="/assets/images/apple-mps-logo.png" | ||
| /> | ||
| </div> | ||
| <!-- Manual configuration --> | ||
| <div | ||
| class="gpu-button" | ||
| :class="{ selected: selected === 'unsupported' }" | ||
| role="button" | ||
| @click="pickGpu('unsupported')" | ||
| > | ||
| <img | ||
| class="m-12" | ||
| alt="Manual configuration" | ||
| width="196" | ||
| src="/assets/images/manual-configuration.svg" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Details on selected GPU --> | ||
| <p v-if="selected === 'nvidia'" class="m-1"> | ||
| <Tag icon="pi pi-check" severity="success" :value="'CUDA'" /> | ||
| {{ $t('install.gpuSelection.nvidiaDescription') }} | ||
| </p> | ||
|
|
||
| <p v-if="selected === 'mps'" class="m-1"> | ||
| <Tag icon="pi pi-check" severity="success" :value="'MPS'" /> | ||
| {{ $t('install.gpuSelection.mpsDescription') }} | ||
| </p> | ||
|
|
||
| <div v-if="selected === 'unsupported'" class="text-neutral-300"> | ||
| <p class="m-1"> | ||
| <Tag | ||
| icon="pi pi-exclamation-triangle" | ||
| severity="warn" | ||
| :value="t('icon.exclamation-triangle')" | ||
| /> | ||
| {{ $t('install.gpuSelection.customSkipsPython') }} | ||
| </p> | ||
|
|
||
| <ul> | ||
| <li> | ||
| <strong> | ||
| {{ $t('install.gpuSelection.customComfyNeedsPython') }} | ||
| </strong> | ||
| </li> | ||
| <li>{{ $t('install.gpuSelection.customManualVenv') }}</li> | ||
| <li>{{ $t('install.gpuSelection.customInstallRequirements') }}</li> | ||
| <li>{{ $t('install.gpuSelection.customMayNotWork') }}</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div v-if="selected === 'cpu'"> | ||
| <p class="m-1"> | ||
| <Tag | ||
| icon="pi pi-exclamation-triangle" | ||
| severity="warn" | ||
| :value="t('icon.exclamation-triangle')" | ||
| ></Tag> | ||
| {{ $t('install.gpuSelection.cpuModeDescription') }} | ||
| </p> | ||
| <p class="m-1"> | ||
| {{ $t('install.gpuSelection.cpuModeDescription2') }} | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div | ||
| class="transition-opacity flex gap-3 h-0" | ||
| :class="{ | ||
| 'opacity-40': selected && selected !== 'cpu' | ||
| }" | ||
| > | ||
| <ToggleSwitch | ||
| v-model="cpuMode" | ||
| inputId="cpu-mode" | ||
| class="-translate-y-40" | ||
| /> | ||
| <label for="cpu-mode" class="select-none"> | ||
| {{ $t('install.gpuSelection.enableCpuMode') }} | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { computed } from 'vue' | ||
| import { electronAPI, TorchDeviceType } from '@/utils/envUtil' | ||
| import ToggleSwitch from 'primevue/toggleswitch' | ||
| import Tag from 'primevue/tag' | ||
| import { useI18n } from 'vue-i18n' | ||
| const { t } = useI18n() | ||
| const cpuMode = computed({ | ||
| get: () => selected.value === 'cpu', | ||
| set: (value) => { | ||
| selected.value = value ? 'cpu' : null | ||
| } | ||
| }) | ||
| const selected = defineModel<TorchDeviceType>('device', { | ||
| required: true | ||
| }) | ||
| const electron = electronAPI() | ||
| const platform = electron.getPlatform() | ||
| const pickGpu = (value: typeof selected.value) => { | ||
| const newValue = selected.value === value ? null : value | ||
| selected.value = newValue | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="postcss"> | ||
| :root { | ||
| --p-tag-gap: 0.5rem; | ||
| } | ||
| .hover-brighten { | ||
| @apply transition-colors; | ||
| transition-property: filter, box-shadow; | ||
| &:hover { | ||
| filter: brightness(107%) contrast(105%); | ||
| box-shadow: 0 0 0.25rem #ffffff79; | ||
| } | ||
| } | ||
| .p-accordioncontent-content { | ||
| @apply bg-neutral-900 rounded-lg transition-colors; | ||
| } | ||
| div.selected { | ||
| .gpu-button:not(.selected) { | ||
| @apply opacity-50 hover:opacity-100; | ||
| } | ||
| } | ||
| .gpu-button { | ||
| @apply w-1/2 m-0 cursor-pointer rounded-lg flex flex-col items-center justify-around bg-neutral-800 bg-opacity-50 hover:bg-opacity-75 transition-colors; | ||
| &.selected { | ||
| @apply opacity-100 bg-neutral-700 bg-opacity-50 hover:bg-opacity-60; | ||
| } | ||
| } | ||
| .disabled { | ||
| @apply pointer-events-none opacity-40; | ||
| } | ||
| .p-card-header { | ||
| @apply text-center grow; | ||
| } | ||
| .p-card-body { | ||
| @apply text-center pt-0; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.