Add manual configuration screen (#1926)

* Add manual configuration screen

* nit

* Update locales [skip ci]

---------

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

src/locales/en/main.json

@@ -146,6 +146,13 @@
       "customInstallRequirements": "Install all requirements and dependencies (e.g. custom torch)",
       "customMayNotWork": "This is entirely unsupported, and may simply not work"
     },
+    "manualConfiguration": {
+      "title": "Manual Configuration",
+      "requirements": "Requirements",
+      "createVenv": "You will need to create a virtual environment in the following directory",
+      "virtualEnvironmentPath": "Virtual environment path",
+      "restartWhenFinished": "When you have finished configuring the virtual environment, please restart ComfyUI."
+    },
     "settings": {
       "autoUpdate": "Automatic Updates",
       "allowMetrics": "Crash Reports",

src/locales/ja/main.json

@@ -177,6 +177,13 @@
     "installLocation": "インストール先",
     "installLocationDescription": "ComfyUIのユーザーデータを保存するディレクトリを選択してください。Python環境が選択した場所にインストールされます。選択したディスクに約15GBの空き容量が必要です。",
     "installLocationTooltip": "ComfyUIのユーザーデータディレクトリ。保存内容:\n- Python環境\n- モデル\n- カスタムノード\n",
+    "manualConfiguration": {
+      "createVenv": "次のディレクトリに仮想環境を作成する必要があります",
+      "requirements": "要件",
+      "restartWhenFinished": "仮想環境の設定が完了したら、ComfyUIを再起動してください。",
+      "title": "マニュアル設定",
+      "virtualEnvironmentPath": "仮想環境のパス"
+    },
     "migrateFromExistingInstallation": "既存のインストールから移行",
     "migration": "移行",
     "migrationOptional": "移行は任意です。既存のインストールがない場合、このステップをスキップできます。",

src/locales/ko/main.json

@@ -177,6 +177,13 @@
     "installLocation": "설치 위치",
     "installLocationDescription": "ComfyUI의 사용자 데이터 디렉토리를 선택하십시오. 선택한 위치에 Python 환경이 설치됩니다. 선택한 디스크에 충분한 공간(~15GB)이 남아 있는지 확인하십시오.",
     "installLocationTooltip": "ComfyUI의 사용자 데이터 디렉토리. 저장소:\n- Python 환경\n- 모델\n- 사용자 정의 노드\n",
+    "manualConfiguration": {
+      "createVenv": "다음 디렉토리에 가상 환경을 생성해야 합니다",
+      "requirements": "요구 사항",
+      "restartWhenFinished": "가상 환경 구성을 완료하면 ComfyUI를 다시 시작해주세요.",
+      "title": "수동 구성",
+      "virtualEnvironmentPath": "가상 환경 경로"
+    },
     "migrateFromExistingInstallation": "기존 설치에서 마이그레이션",
     "migration": "마이그레이션",
     "migrationOptional": "마이그레이션은 선택 사항입니다. 기존에 설치된 것이 없다면, 이 단계를 건너뛸 수 있습니다.",

src/locales/ru/main.json

@@ -177,6 +177,13 @@
     "installLocation": "Место установки",
     "installLocationDescription": "Выберите директорию для пользовательских данных ComfyUI. В выбранном месте будет установлена среда Python. Пожалуйста, убедитесь, что на выбранном диске достаточно места (~15 ГБ).",
     "installLocationTooltip": "Директория пользовательских данных ComfyUI. Хранит:\n- Среда Python\n- Модели\n- Пользовательские узлы\n",
+    "manualConfiguration": {
+      "createVenv": "Вам потребуется создать виртуальное окружение в следующем каталоге",
+      "requirements": "Требования",
+      "restartWhenFinished": "После завершения настройки виртуального окружения, пожалуйста, перезапустите ComfyUI.",
+      "title": "Ручная Конфигурация",
+      "virtualEnvironmentPath": "Путь виртуального окружения"
+    },
     "migrateFromExistingInstallation": "Миграция из существующей установки",
     "migration": "Миграция",
     "migrationOptional": "Миграция является необязательной. Если у вас нет существующей установки, вы можете пропустить этот шаг.",

src/locales/zh/main.json

@@ -177,6 +177,13 @@
     "installLocation": "安装位置",
     "installLocationDescription": "选择 ComfyUI 用户数据的目录。将安装一个 Python 环境到所选位置。请确保所选磁盘有足够的空间（约 15GB）。",
     "installLocationTooltip": "ComfyUI 的用户数据目录。存储：\n- Python 环境\n- 模型\n- 自定义节点\n",
+    "manualConfiguration": {
+      "createVenv": "您需要在以下目录中创建虚拟环境",
+      "requirements": "需求",
+      "restartWhenFinished": "配置虚拟环境完成后，请重新启动ComfyUI。",
+      "title": "手动配置",
+      "virtualEnvironmentPath": "虚拟环境路径"
+    },
     "migrateFromExistingInstallation": "从现有安装迁移",
     "migration": "迁移",
     "migrationOptional": "迁移是可选的。如果您没有现有安装，可以跳过此步骤。",

src/views/InstallView.vue

@@ -151,7 +151,10 @@ const install = () => {
     device: device.value
   }
   electron.installComfyUI(options)
-  router.push('/server-start')
+
+  const nextPage =
+    options.device === 'unsupported' ? '/manual-configuration' : '/server-start'
+  router.push(nextPage)
 }
 
 onMounted(async () => {

src/views/ManualConfigurationView.vue

@@ -0,0 +1,86 @@
+<template>
+  <div
+    class="flex flex-col select-none font-sans items-center h-screen m-0 text-neutral-300 bg-neutral-900 dark-theme pointer-events-auto"
+  >
+    <!-- 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')"
+        ></Tag>
+        <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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Panel from 'primevue/panel'
+import Tag from 'primevue/tag'
+import { electronAPI } from '@/utils/envUtil'
+import { useI18n } from 'vue-i18n'
+import { onMounted, ref } from 'vue'
+
+const { t } = useI18n()
+
+const electron = electronAPI()
+
+const basePath = ref<string>(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>
+:root {
+  --p-tag-gap: 0.5rem;
+}
+
+.comfy-installer {
+  margin-top: max(1rem, max(0px, calc((100vh - 42rem) * 0.5)));
+}
+</style>