mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-03 12:42:01 +00:00
Decouple Desktop UI into monorepo app (#5912)
## Summary Extracts desktop UI into apps/desktop-ui package with minimal changes. ## Changes - **What**: - Separates desktop-specific code into standalone package with independent Vite config, router, and i18n - Drastically simplifies the main app router by removing all desktop routes - Adds a some code duplication, most due to the existing design - Some duplication can be refactored to be *simpler* on either side - no need to split things by `isElectron()` - Rudimentary storybook support has been added - **Breaking**: Stacked PR for publishing must be merged before this PR makes it to stable core (but publishing _could_ be done manually) - #5915 - **Dependencies**: Takes full advantage of pnpm catalog. No additional dependencies added. ## Review Focus - Should be no changes to normal frontend operation - Scripts added to root package.json are acceptable - The duplication in this PR is copied as is, wherever possible. Any corrections or fix-ups beyond the scope of simply migrating the functionality as-is, can be addressed in later PRs. That said, if any changes are made, it instantly becomes more difficult to separate the duplicated code out into a shared utility. - Tracking issue to address concerns: #5925 ### i18n Fixing i18n is out of scope for this PR. It is a larger task that we should consider carefully and implement properly. Attempting to isolate the desktop i18n and duplicate the _current_ localisation scripts would be wasted energy.
This commit is contained in:
86
apps/desktop-ui/src/views/ManualConfigurationView.vue
Normal file
86
apps/desktop-ui/src/views/ManualConfigurationView.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<BaseViewTemplate dark>
|
||||
<!-- Installation Path Section -->
|
||||
<div
|
||||
class="comfy-installer grow flex flex-col gap-4 text-neutral-300 max-w-110"
|
||||
>
|
||||
<h2 class="text-2xl font-semibold text-neutral-100">
|
||||
{{ $t('install.manualConfiguration.title') }}
|
||||
</h2>
|
||||
|
||||
<p class="m-1 text-neutral-300">
|
||||
<Tag
|
||||
icon="pi pi-exclamation-triangle"
|
||||
severity="warn"
|
||||
:value="t('icon.exclamation-triangle')"
|
||||
/>
|
||||
<strong class="ml-2">{{
|
||||
$t('install.gpuSelection.customComfyNeedsPython')
|
||||
}}</strong>
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<p class="m-1 mb-4">
|
||||
{{ $t('install.manualConfiguration.requirements') }}:
|
||||
</p>
|
||||
<ul class="m-0">
|
||||
<li>{{ $t('install.gpuSelection.customManualVenv') }}</li>
|
||||
<li>{{ $t('install.gpuSelection.customInstallRequirements') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p class="m-1">{{ $t('install.manualConfiguration.createVenv') }}:</p>
|
||||
|
||||
<Panel :header="t('install.manualConfiguration.virtualEnvironmentPath')">
|
||||
<span class="font-mono">{{ `${basePath}${sep}.venv${sep}` }}</span>
|
||||
</Panel>
|
||||
|
||||
<p class="m-1">
|
||||
{{ $t('install.manualConfiguration.restartWhenFinished') }}
|
||||
</p>
|
||||
|
||||
<Button
|
||||
class="place-self-end"
|
||||
:label="t('menuLabels.Restart')"
|
||||
severity="warn"
|
||||
icon="pi pi-refresh"
|
||||
@click="restartApp('Manual configuration complete')"
|
||||
/>
|
||||
</div>
|
||||
</BaseViewTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Button from 'primevue/button'
|
||||
import Panel from 'primevue/panel'
|
||||
import Tag from 'primevue/tag'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { electronAPI } from '@/utils/envUtil'
|
||||
import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const electron = electronAPI()
|
||||
|
||||
const basePath = ref<string | null>(null)
|
||||
const sep = ref<'\\' | '/'>('/')
|
||||
|
||||
const restartApp = (message?: string) => electron.restartApp(message)
|
||||
|
||||
onMounted(async () => {
|
||||
basePath.value = await electron.getBasePath()
|
||||
if (basePath.value.indexOf('/') === -1) sep.value = '\\'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.p-tag {
|
||||
--p-tag-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.comfy-installer {
|
||||
margin-top: max(1rem, max(0px, calc((100vh - 42rem) * 0.5)));
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user