[Desktop] Add desktop updating page (#2454)

Co-authored-by: github-actions <github-actions@github.com>

src/locales/en/main.json

@@ -759,5 +759,10 @@
     "doNotAskAgain": "Don't show this again",
     "missingModels": "Missing Models",
     "missingModelsMessage": "When loading the graph, the following models were not found"
+  },
+  "desktopUpdate": {
+    "title": "Updating ComfyUI Desktop",
+    "description": "ComfyUI Desktop is installing new dependencies.  This may take a few minutes.",
+    "terminalDefaultMessage": "Any console output from the update will be shown here."
   }
 }

src/locales/fr/main.json

@@ -81,6 +81,11 @@
     "quit": "Quitter",
     "reinstall": "Réinstaller"
   },
+  "desktopUpdate": {
+    "description": "ComfyUI Desktop installe de nouvelles dépendances. Cela peut prendre quelques minutes.",
+    "terminalDefaultMessage": "Toute sortie de console de la mise à jour sera affichée ici.",
+    "title": "Mise à jour de ComfyUI Desktop"
+  },
   "downloadGit": {
     "gitWebsite": "Télécharger git",
     "instructions": "Veuillez télécharger et installer la dernière version pour votre système d'exploitation. Le bouton Télécharger git ci-dessous ouvre la page de téléchargement de git-scm.com.",

src/locales/ja/main.json

@@ -81,6 +81,11 @@
     "quit": "終了",
     "reinstall": "再インストール"
   },
+  "desktopUpdate": {
+    "description": "ComfyUIデスクトップは新しい依存関係をインストールしています。これには数分かかる場合があります。",
+    "terminalDefaultMessage": "更新からの任意のコンソール出力はここに表示されます。",
+    "title": "ComfyUIデスクトップの更新"
+  },
   "downloadGit": {
     "gitWebsite": "Gitをダウンロード",
     "instructions": "お使いのオペレーティングシステムに最新バージョンをダウンロードしてインストールしてください。以下の「Gitをダウンロード」ボタンをクリックすると、git-scm.comのダウンロードページが開きます。",

src/locales/ko/main.json

@@ -81,6 +81,11 @@
     "quit": "종료",
     "reinstall": "재설치"
   },
+  "desktopUpdate": {
+    "description": "ComfyUI 데스크톱은 새로운 종속성을 설치하고 있습니다. 이 작업은 몇 분 정도 걸릴 수 있습니다.",
+    "terminalDefaultMessage": "업데이트로부터의 콘솔 출력은 여기에 표시됩니다.",
+    "title": "ComfyUI 데스크톱 업데이트 중"
+  },
   "downloadGit": {
     "gitWebsite": "git 프로그램 다운로드",
     "instructions": "운영 체제에 맞는 최신 버전을 다운로드하여 설치하십시오. 아래의 'git 프로그램 다운로드' 버튼을 클릭하면 git-scm.com 다운로드 페이지가 열립니다.",

src/locales/ru/main.json

@@ -81,6 +81,11 @@
     "quit": "Выйти",
     "reinstall": "Переустановить"
   },
+  "desktopUpdate": {
+    "description": "ComfyUI Desktop устанавливает новые зависимости. Это может занять несколько минут.",
+    "terminalDefaultMessage": "Любой вывод консоли из обновления будет отображаться здесь.",
+    "title": "Обновление ComfyUI Desktop"
+  },
   "downloadGit": {
     "gitWebsite": "Скачать git",
     "instructions": "Пожалуйста, скачайте и установите последнюю версию для вашей операционной системы. Кнопка «Скачать git» ниже открывает страницу загрузок git-scm.com.",

src/locales/zh/main.json

@@ -81,6 +81,11 @@
     "quit": "退出",
     "reinstall": "重新安装"
   },
+  "desktopUpdate": {
+    "description": "ComfyUI桌面正在安装新的依赖项。这可能需要几分钟的时间。",
+    "terminalDefaultMessage": "更新过程中的任何控制台输出都将在这里显示。",
+    "title": "正在更新ComfyUI桌面"
+  },
   "downloadGit": {
     "gitWebsite": "下载 git",
     "instructions": "请下载并安装适合您操作系统的最新版本。下面的下载 git 按钮将打开 git-scm.com 下载页面。",

src/router.ts

@@ -110,6 +110,12 @@ const router = createRouter({
           name: 'MaintenanceView',
           component: () => import('@/views/MaintenanceView.vue'),
           beforeEnter: guardElectronAccess
+        },
+        {
+          path: 'desktop-update',
+          name: 'DesktopUpdateView',
+          component: () => import('@/views/DesktopUpdate.vue'),
+          beforeEnter: guardElectronAccess
         }
       ]
     }

src/views/DesktopStartView.vue

@@ -1,13 +1,11 @@
 <template>
   <BaseViewTemplate dark>
-    <div class="max-w-screen-sm w-screen p-8">
+    <ProgressSpinner class="m-8 w-48 h-48" />
-      <ProgressBar mode="indeterminate" />
-    </div>
   </BaseViewTemplate>
 </template>
 
 <script setup lang="ts">
-import ProgressBar from 'primevue/progressbar'
+import ProgressSpinner from 'primevue/progressspinner'
 
 import BaseViewTemplate from './templates/BaseViewTemplate.vue'
 </script>

src/views/DesktopUpdate.vue

@@ -0,0 +1,122 @@
+<template>
+  <BaseViewTemplate dark>
+    <div
+      class="h-screen w-screen grid items-center justify-around overflow-y-auto"
+    >
+      <div class="relative m-8 text-center">
+        <!-- Header -->
+        <h1 class="download-bg pi-download text-4xl font-bold">
+          {{ t('desktopUpdate.title') }}
+        </h1>
+
+        <div class="m-8">
+          <span>{{ t('desktopUpdate.description') }}</span>
+        </div>
+
+        <ProgressSpinner class="m-8 w-48 h-48" />
+
+        <!-- Console button -->
+        <Button
+          style="transform: translateX(-50%)"
+          class="fixed bottom-0 left-1/2 my-8"
+          :label="t('maintenance.consoleLogs')"
+          icon="pi pi-desktop"
+          icon-pos="left"
+          severity="secondary"
+          @click="toggleConsoleDrawer"
+        />
+
+        <Drawer
+          v-model:visible="terminalVisible"
+          :header="t('g.terminal')"
+          position="bottom"
+          style="height: max(50vh, 34rem)"
+        >
+          <BaseTerminal
+            @created="terminalCreated"
+            @unmounted="terminalUnmounted"
+          />
+        </Drawer>
+      </div>
+    </div>
+    <Toast />
+  </BaseViewTemplate>
+</template>
+
+<script setup lang="ts">
+import { Terminal } from '@xterm/xterm'
+import Button from 'primevue/button'
+import Drawer from 'primevue/drawer'
+import ProgressSpinner from 'primevue/progressspinner'
+import Toast from 'primevue/toast'
+import { Ref, onMounted, onUnmounted, ref } from 'vue'
+
+import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
+import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
+import { useTerminalBuffer } from '@/composables/bottomPanelTabs/useTerminalBuffer'
+import { t } from '@/i18n'
+import { electronAPI } from '@/utils/envUtil'
+
+import BaseViewTemplate from './templates/BaseViewTemplate.vue'
+
+const electron = electronAPI()
+
+const terminalVisible = ref(false)
+
+/** The actual output of all terminal commands - not rendered */
+const buffer = useTerminalBuffer()
+let xterm: Terminal | null = null
+
+// Created and destroyed with the Drawer - contents copied from hidden buffer
+const terminalCreated = (
+  { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
+  root: Ref<HTMLElement>
+) => {
+  xterm = terminal
+  useAutoSize({ root, autoRows: true, autoCols: true })
+  terminal.write(t('desktopUpdate.terminalDefaultMessage'))
+  buffer.copyTo(terminal)
+
+  terminal.options.cursorBlink = false
+  terminal.options.cursorStyle = 'bar'
+  terminal.options.cursorInactiveStyle = 'bar'
+  terminal.options.disableStdin = true
+}
+
+const terminalUnmounted = () => {
+  xterm = null
+}
+
+const toggleConsoleDrawer = () => {
+  terminalVisible.value = !terminalVisible.value
+}
+
+onMounted(async () => {
+  electron.onLogMessage((message: string) => {
+    buffer.write(message)
+    xterm?.write(message)
+  })
+})
+
+onUnmounted(() => electron.Validation.dispose())
+</script>
+
+<style scoped>
+.download-bg::before {
+  @apply m-0 absolute text-muted;
+  font-family: 'primeicons';
+  top: -2rem;
+  right: 2rem;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  display: inline-block;
+  -webkit-font-smoothing: antialiased;
+  opacity: 0.02;
+  font-size: min(14rem, 90vw);
+  z-index: 0;
+}
+</style>