mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-04 21:22:07 +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:
filtered
253
apps/desktop-ui/src/views/ServerStartView.vue
Normal file
253
apps/desktop-ui/src/views/ServerStartView.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<BaseViewTemplate dark>
|
||||
<div class="relative min-h-screen">
|
||||
<!-- Terminal Background Layer (always visible during loading) -->
|
||||
<div v-if="!isError" class="fixed inset-0 overflow-hidden z-0">
|
||||
<div class="h-full w-full">
|
||||
<BaseTerminal @created="terminalCreated" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Semi-transparent overlay -->
|
||||
<div v-if="!isError" class="fixed inset-0 bg-neutral-900/80 z-5"></div>
|
||||
|
||||
<!-- Smooth radial gradient overlay -->
|
||||
<div
|
||||
v-if="!isError"
|
||||
class="fixed inset-0 z-8"
|
||||
style="
|
||||
background: radial-gradient(
|
||||
ellipse 800px 600px at center,
|
||||
rgba(23, 23, 23, 0.95) 0%,
|
||||
rgba(23, 23, 23, 0.93) 10%,
|
||||
rgba(23, 23, 23, 0.9) 20%,
|
||||
rgba(23, 23, 23, 0.85) 30%,
|
||||
rgba(23, 23, 23, 0.75) 40%,
|
||||
rgba(23, 23, 23, 0.6) 50%,
|
||||
rgba(23, 23, 23, 0.4) 60%,
|
||||
rgba(23, 23, 23, 0.2) 70%,
|
||||
rgba(23, 23, 23, 0.1) 80%,
|
||||
rgba(23, 23, 23, 0.05) 90%,
|
||||
transparent 100%
|
||||
);
|
||||
"
|
||||
></div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<!-- Main startup display using StartupDisplay component -->
|
||||
<StartupDisplay
|
||||
:title="displayTitle"
|
||||
:status-text="displayStatusText"
|
||||
:progress-percentage="installStageProgress"
|
||||
:hide-progress="isError"
|
||||
/>
|
||||
|
||||
<!-- Error Section (positioned at bottom) -->
|
||||
<div
|
||||
v-if="isError"
|
||||
class="absolute bottom-20 left-0 right-0 flex flex-col items-center gap-4"
|
||||
>
|
||||
<div class="flex gap-4 justify-center">
|
||||
<Button
|
||||
icon="pi pi-flag"
|
||||
:label="$t('serverStart.reportIssue')"
|
||||
severity="secondary"
|
||||
@click="reportIssue"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-file"
|
||||
:label="$t('serverStart.openLogs')"
|
||||
severity="secondary"
|
||||
@click="openLogs"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-wrench"
|
||||
:label="$t('serverStart.troubleshoot')"
|
||||
@click="troubleshoot"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<button
|
||||
v-if="!terminalVisible"
|
||||
class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors flex items-center gap-2 mx-auto"
|
||||
@click="terminalVisible = true"
|
||||
>
|
||||
<i class="pi pi-search"></i>
|
||||
{{ $t('serverStart.showTerminal') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Terminal Output (positioned at bottom when manually toggled in error state) -->
|
||||
<div
|
||||
v-if="terminalVisible && isError"
|
||||
class="absolute bottom-4 left-4 right-4 max-w-4xl mx-auto z-10"
|
||||
>
|
||||
<div
|
||||
class="bg-neutral-900/95 rounded-lg p-4 border border-neutral-700 h-[300px]"
|
||||
>
|
||||
<BaseTerminal @created="terminalCreated" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseViewTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
InstallStage,
|
||||
type InstallStageInfo,
|
||||
type InstallStageName,
|
||||
ProgressStatus
|
||||
} from '@comfyorg/comfyui-electron-types'
|
||||
import type { Terminal } from '@xterm/xterm'
|
||||
import Button from 'primevue/button'
|
||||
import type { Ref } from 'vue'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
|
||||
import StartupDisplay from '@/components/common/StartupDisplay.vue'
|
||||
import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
|
||||
import { electronAPI } from '@/utils/envUtil'
|
||||
import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const electron = electronAPI()
|
||||
|
||||
const status = ref<ProgressStatus>(ProgressStatus.INITIAL_STATE)
|
||||
const electronVersion = ref<string>('')
|
||||
const terminalVisible = ref(false)
|
||||
|
||||
const installStage = ref<InstallStageName | null>(null)
|
||||
const installStageMessage = ref<string>('')
|
||||
const installStageProgress = ref<number | undefined>(undefined)
|
||||
|
||||
let xterm: Terminal | undefined
|
||||
|
||||
/**
|
||||
* Handles installation stage updates from the desktop
|
||||
*/
|
||||
const updateInstallStage = (stageInfo: InstallStageInfo) => {
|
||||
console.warn('[InstallStage.onUpdate] Received:', {
|
||||
stage: stageInfo.stage,
|
||||
progress: stageInfo.progress,
|
||||
message: stageInfo.message,
|
||||
error: stageInfo.error,
|
||||
timestamp: stageInfo.timestamp,
|
||||
fullInfo: stageInfo
|
||||
})
|
||||
|
||||
installStage.value = stageInfo.stage
|
||||
installStageMessage.value = stageInfo.message || ''
|
||||
installStageProgress.value = stageInfo.progress
|
||||
}
|
||||
|
||||
const currentStatusLabel = computed(() => {
|
||||
// Use the message from the Electron API if available
|
||||
if (installStageMessage.value) {
|
||||
return installStageMessage.value
|
||||
}
|
||||
return t(`serverStart.process.${status.value}`)
|
||||
})
|
||||
|
||||
const isError = computed(
|
||||
() =>
|
||||
status.value === ProgressStatus.ERROR ||
|
||||
installStage.value === InstallStage.ERROR
|
||||
)
|
||||
|
||||
const isInstallationStage = computed(() => {
|
||||
const installationStages: InstallStageName[] = [
|
||||
InstallStage.WELCOME_SCREEN,
|
||||
InstallStage.INSTALL_OPTIONS_SELECTION,
|
||||
InstallStage.CREATING_DIRECTORIES,
|
||||
InstallStage.INITIALIZING_CONFIG,
|
||||
InstallStage.PYTHON_ENVIRONMENT_SETUP,
|
||||
InstallStage.INSTALLING_REQUIREMENTS,
|
||||
InstallStage.INSTALLING_PYTORCH,
|
||||
InstallStage.INSTALLING_COMFYUI_REQUIREMENTS,
|
||||
InstallStage.INSTALLING_MANAGER_REQUIREMENTS,
|
||||
InstallStage.MIGRATING_CUSTOM_NODES
|
||||
]
|
||||
return (
|
||||
installStage.value !== null &&
|
||||
installationStages.includes(installStage.value)
|
||||
)
|
||||
})
|
||||
|
||||
const displayTitle = computed(() => {
|
||||
if (isError.value) {
|
||||
return t('serverStart.errorMessage')
|
||||
}
|
||||
if (isInstallationStage.value) {
|
||||
return t('serverStart.installation.title')
|
||||
}
|
||||
return t('serverStart.title')
|
||||
})
|
||||
|
||||
const displayStatusText = computed(() => {
|
||||
if (isError.value && electronVersion.value) {
|
||||
return `v${electronVersion.value}`
|
||||
}
|
||||
return currentStatusLabel.value
|
||||
})
|
||||
|
||||
const updateProgress = ({ status: newStatus }: { status: ProgressStatus }) => {
|
||||
status.value = newStatus
|
||||
|
||||
// Make critical error screen more obvious.
|
||||
if (newStatus === ProgressStatus.ERROR) terminalVisible.value = false
|
||||
}
|
||||
|
||||
const terminalCreated = (
|
||||
{ terminal, useAutoSize }: ReturnType<typeof useTerminal>,
|
||||
root: Ref<HTMLElement | undefined>
|
||||
) => {
|
||||
xterm = terminal
|
||||
|
||||
useAutoSize({ root, autoRows: true, autoCols: true })
|
||||
electron.onLogMessage((message: string) => {
|
||||
terminal.write(message)
|
||||
})
|
||||
|
||||
terminal.options.cursorBlink = false
|
||||
terminal.options.disableStdin = true
|
||||
terminal.options.cursorInactiveStyle = 'block'
|
||||
}
|
||||
|
||||
const troubleshoot = () => electron.startTroubleshooting()
|
||||
const reportIssue = () => {
|
||||
window.open('https://forum.comfy.org/c/v1-feedback/', '_blank')
|
||||
}
|
||||
const openLogs = () => electron.openLogsFolder()
|
||||
|
||||
let cleanupInstallStageListener: (() => void) | undefined
|
||||
|
||||
onMounted(async () => {
|
||||
electron.sendReady()
|
||||
electron.onProgressUpdate(updateProgress)
|
||||
cleanupInstallStageListener =
|
||||
electron.InstallStage.onUpdate(updateInstallStage)
|
||||
|
||||
const stageInfo = await electron.InstallStage.getCurrent()
|
||||
updateInstallStage(stageInfo)
|
||||
electronVersion.value = await electron.getElectronVersion()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
xterm?.dispose()
|
||||
cleanupInstallStageListener?.()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference '../assets/css/style.css';
|
||||
|
||||
/* Hide the xterm scrollbar completely */
|
||||
:deep(.p-terminal) .xterm-viewport {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user