[API Nodes] Add API Nodes new feature dialog (#3755)

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

browser_tests/fixtures/ComfyPage.ts

@@ -270,6 +270,7 @@ export class ComfyPage {
         localStorage.clear()
         sessionStorage.clear()
         localStorage.setItem('Comfy.userId', id)
+        localStorage.setItem('api-nodes-news-seen', 'true')
       }, this.id)
     }
     await this.goto()

src/components/dialog/content/ApiNodesNewsContent.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="flex flex-col gap-12 p-2 w-96">
+    <img src="@/assets/images/api-nodes-news.webp" alt="API Nodes News" />
+    <div class="flex flex-col gap-2 justify-center items-center">
+      <div class="text-xl">
+        {{ $t('apiNodesNews.introducing') }}
+        <span class="text-amber-500">API NODES</span>
+      </div>
+      <div class="text-muted">{{ $t('apiNodesNews.subtitle') }}</div>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <div
+        v-for="(step, index) in steps"
+        :key="index"
+        class="grid grid-cols-[auto_1fr] gap-2 items-center"
+      >
+        <Tag class="w-8 h-8" :value="index + 1" rounded />
+        <div class="flex flex-col gap-2">
+          <div>{{ step.title }}</div>
+          <div v-if="step.subtitle" class="text-muted">
+            {{ step.subtitle }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-row justify-between">
+      <Button label="Learn More" text @click="handleLearnMore" />
+      <Button label="Close" @click="onClose" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Tag from 'primevue/tag'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const steps: {
+  title: string
+  subtitle?: string
+}[] = [
+  {
+    title: t('apiNodesNews.steps.step1.title'),
+    subtitle: t('apiNodesNews.steps.step1.subtitle')
+  },
+  {
+    title: t('apiNodesNews.steps.step2.title'),
+    subtitle: t('apiNodesNews.steps.step2.subtitle')
+  },
+  {
+    title: t('apiNodesNews.steps.step3.title')
+  },
+  {
+    title: t('apiNodesNews.steps.step4.title')
+  }
+]
+
+const { onClose } = defineProps<{
+  onClose: () => void
+}>()
+
+const handleLearnMore = () => {
+  window.open('https://blog.comfy.org/', '_blank')
+}
+</script>

src/locales/en/main.json

@@ -1182,5 +1182,25 @@
     "provider": "Sign-in Provider",
     "notSet": "Not set",
     "updatePassword": "Update Password"
+  },
+  "apiNodesNews": {
+    "introducing": "Introducing",
+    "subtitle": "All External Models now available in ComfyUI",
+    "steps": {
+      "step1": {
+        "title": "Login/Create an account:",
+        "subtitle": "Settings > User > Login"
+      },
+      "step2": {
+        "title": "Purchase credits:",
+        "subtitle": "Settings > Credits > Buy Credits"
+      },
+      "step3": {
+        "title": "Locate new API Nodes under 'API Node' section and add to the canvas"
+      },
+      "step4": {
+        "title": "Run!"
+      }
+    }
   }
 }

src/locales/es/main.json

@@ -4,6 +4,26 @@
     "title": "Nodo(s) de API",
     "totalCost": "Costo total"
   },
+  "apiNodesNews": {
+    "introducing": "Presentamos",
+    "steps": {
+      "step1": {
+        "subtitle": "Configuración > Usuario > Iniciar sesión",
+        "title": "Inicia sesión/Crea una cuenta:"
+      },
+      "step2": {
+        "subtitle": "Configuración > Créditos > Comprar créditos",
+        "title": "Compra créditos:"
+      },
+      "step3": {
+        "title": "Ubica los nuevos nodos API en la sección 'API Node' y agrégalos al lienzo"
+      },
+      "step4": {
+        "title": "¡Ejecuta!"
+      }
+    },
+    "subtitle": "Todos los modelos externos ahora disponibles en ComfyUI"
+  },
   "apiNodesSignInDialog": {
     "message": "Este flujo de trabajo contiene nodos de API, que requieren que inicies sesión en tu cuenta para poder ejecutar.",
     "title": "Se requiere iniciar sesión para usar los nodos de API"

src/locales/fr/main.json

@@ -4,6 +4,26 @@
     "title": "Nœud(s) API",
     "totalCost": "Coût total"
   },
+  "apiNodesNews": {
+    "introducing": "Présentation",
+    "steps": {
+      "step1": {
+        "subtitle": "Paramètres > Utilisateur > Connexion",
+        "title": "Connectez-vous / Créez un compte :"
+      },
+      "step2": {
+        "subtitle": "Paramètres > Crédits > Acheter des crédits",
+        "title": "Achetez des crédits :"
+      },
+      "step3": {
+        "title": "Trouvez les nouveaux nœuds API dans la section 'API Node' et ajoutez-les à la toile"
+      },
+      "step4": {
+        "title": "Lancez !"
+      }
+    },
+    "subtitle": "Tous les modèles externes sont désormais disponibles dans ComfyUI"
+  },
   "apiNodesSignInDialog": {
     "message": "Ce flux de travail contient des nœuds API, qui nécessitent que vous soyez connecté à votre compte pour pouvoir fonctionner.",
     "title": "Connexion requise pour utiliser les nœuds API"

src/locales/ja/main.json

@@ -4,6 +4,26 @@
     "title": "APIノード",
     "totalCost": "合計コスト"
   },
+  "apiNodesNews": {
+    "introducing": "紹介",
+    "steps": {
+      "step1": {
+        "subtitle": "設定 > ユーザー > ログイン",
+        "title": "ログイン／アカウント作成："
+      },
+      "step2": {
+        "subtitle": "設定 > クレジット > クレジットを購入",
+        "title": "クレジットを購入："
+      },
+      "step3": {
+        "title": "「APIノード」セクションで新しいAPIノードを見つけてキャンバスに追加"
+      },
+      "step4": {
+        "title": "実行！"
+      }
+    },
+    "subtitle": "すべての外部モデルがComfyUIで利用可能になりました"
+  },
   "apiNodesSignInDialog": {
     "message": "このワークフローにはAPIノードが含まれており、実行するためにはアカウントにサインインする必要があります。",
     "title": "APIノードを使用するためにはサインインが必要です"

src/locales/ko/main.json

@@ -4,6 +4,26 @@
     "title": "API 노드(들)",
     "totalCost": "총 비용"
   },
+  "apiNodesNews": {
+    "introducing": "소개합니다",
+    "steps": {
+      "step1": {
+        "subtitle": "설정 > 사용자 > 로그인",
+        "title": "로그인/계정 생성:"
+      },
+      "step2": {
+        "subtitle": "설정 > 크레딧 > 크레딧 구매",
+        "title": "크레딧 구매:"
+      },
+      "step3": {
+        "title": "'API Node' 섹션에서 새로운 API 노드를 찾아 캔버스에 추가하세요"
+      },
+      "step4": {
+        "title": "실행!"
+      }
+    },
+    "subtitle": "모든 외부 모델이 이제 ComfyUI에서 사용 가능합니다"
+  },
   "apiNodesSignInDialog": {
     "message": "이 워크플로우에는 API 노드가 포함되어 있으며, 실행하려면 계정에 로그인해야 합니다.",
     "title": "API 노드 사용에 필요한 로그인"

src/locales/ru/main.json

@@ -4,6 +4,26 @@
     "title": "API Node(s)",
     "totalCost": "Общая стоимость"
   },
+  "apiNodesNews": {
+    "introducing": "Представляем",
+    "steps": {
+      "step1": {
+        "subtitle": "Настройки > Пользователь > Войти",
+        "title": "Войти/Создать аккаунт:"
+      },
+      "step2": {
+        "subtitle": "Настройки > Кредиты > Купить кредиты",
+        "title": "Купить кредиты:"
+      },
+      "step3": {
+        "title": "Найдите новые API-узлы в разделе 'API Node' и добавьте их на холст"
+      },
+      "step4": {
+        "title": "Запустить!"
+      }
+    },
+    "subtitle": "Все внешние модели теперь доступны в ComfyUI"
+  },
   "apiNodesSignInDialog": {
     "message": "Этот рабочий процесс содержит API Nodes, которые требуют входа в вашу учетную запись для выполнения.",
     "title": "Требуется вход для использования API Nodes"

src/locales/zh/main.json

@@ -4,6 +4,26 @@
     "title": "API节点",
     "totalCost": "总成本"
   },
+  "apiNodesNews": {
+    "introducing": "介绍",
+    "steps": {
+      "step1": {
+        "subtitle": "设置 > 用户 > 登录",
+        "title": "登录/创建账户："
+      },
+      "step2": {
+        "subtitle": "设置 > 积分 > 购买积分",
+        "title": "购买积分："
+      },
+      "step3": {
+        "title": "在“API 节点”部分找到新的 API 节点并添加到画布"
+      },
+      "step4": {
+        "title": "运行！"
+      }
+    },
+    "subtitle": "所有外部模型现已在 ComfyUI 中可用"
+  },
   "apiNodesSignInDialog": {
     "message": "此工作流包含API节点，需要您登录账户才能运行。",
     "title": "使用API节点需要登录"

src/services/dialogService.ts

@@ -1,3 +1,4 @@
+import ApiNodesNewsContent from '@/components/dialog/content/ApiNodesNewsContent.vue'
 import ApiNodesSignInContent from '@/components/dialog/content/ApiNodesSignInContent.vue'
 import ConfirmationDialogContent from '@/components/dialog/content/ConfirmationDialogContent.vue'
 import ErrorDialogContent from '@/components/dialog/content/ErrorDialogContent.vue'
@@ -379,6 +380,31 @@ export const useDialogService = () => {
     })
   }
 
+  /**
+   * Shows a dialog for the API nodes news.
+   * TODO: Remove the news dialog on next major feature release.
+   */
+  function showApiNodesNewsDialog() {
+    if (localStorage.getItem('api-nodes-news-seen') === 'true') {
+      return
+    }
+
+    return dialogStore.showDialog({
+      key: 'api-nodes-news',
+      component: ApiNodesNewsContent,
+      props: {
+        onClose: () => {
+          dialogStore.closeDialog({ key: 'api-nodes-news' })
+          localStorage.setItem('api-nodes-news-seen', 'true')
+        }
+      },
+      dialogComponentProps: {
+        modal: false,
+        position: 'bottomright'
+      }
+    })
+  }
+
   return {
     showLoadWorkflowWarning,
     showMissingModelsWarning,
@@ -394,6 +420,7 @@ export const useDialogService = () => {
     showSignInDialog,
     showTopUpCreditsDialog,
     showUpdatePasswordDialog,
+    showApiNodesNewsDialog,
     prompt,
     confirm
   }

src/views/GraphView.vue

@@ -42,6 +42,7 @@ import { StatusWsMessageStatus } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { setupAutoQueueHandler } from '@/services/autoQueueService'
+import { useDialogService } from '@/services/dialogService'
 import { useKeybindingService } from '@/services/keybindingService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
@@ -241,6 +242,8 @@ const onGraphReady = () => {
       // Explicitly initialize nodeSearchService to avoid indexing delay when
       // node search is triggered
       useNodeDefStore().nodeSearchService.searchNode('')
+
+      useDialogService().showApiNodesNewsDialog()
     },
     { timeout: 1000 }
   )