mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-06-05 12:44:23 +00:00
Compare commits
7 Commits
batch-disp
...
review/clo
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
046e31dadc | ||
|
|
4b5de51e99 | ||
|
|
93ec2c74ab | ||
|
|
f5c26130f2 | ||
|
|
7bba8f09f6 | ||
|
|
de39ece33f | ||
|
|
e5ba351dcc |
126
src/components/dialog/content/CloudNotificationContent.vue
Normal file
126
src/components/dialog/content/CloudNotificationContent.vue
Normal file
@@ -0,0 +1,126 @@
|
|||||||
|
<template>
|
||||||
|
<div class="w-[480px] p-6">
|
||||||
|
<!-- Header with Logo -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<div class="mb-2 flex items-center gap-3">
|
||||||
|
<img
|
||||||
|
src="/assets/images/comfy-cloud-logo.svg"
|
||||||
|
alt="Comfy Cloud"
|
||||||
|
class="h-8 w-8 shrink-0"
|
||||||
|
/>
|
||||||
|
<h1 class="text-2xl font-semibold">
|
||||||
|
{{ t('cloudNotification.title') }}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<p class="text-base text-muted">
|
||||||
|
{{ t('cloudNotification.message') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<div class="mb-6 space-y-4">
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<i class="pi pi-check-circle mt-0.5 shrink-0 text-xl text-blue-500"></i>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="mb-1 font-medium">
|
||||||
|
{{ t('cloudNotification.feature1Title') }}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-muted">
|
||||||
|
{{ t('cloudNotification.feature1') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<i class="pi pi-server mt-0.5 shrink-0 text-xl text-blue-500"></i>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="mb-1 font-medium">
|
||||||
|
{{ t('cloudNotification.feature2Title') }}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-muted">
|
||||||
|
{{ t('cloudNotification.feature2') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<i class="pi pi-tag mt-0.5 shrink-0 text-xl text-blue-500"></i>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="mb-1 font-medium">
|
||||||
|
{{ t('cloudNotification.feature3Title') }}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-muted">
|
||||||
|
{{ t('cloudNotification.feature3') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer Note -->
|
||||||
|
<div
|
||||||
|
class="mb-6 rounded border-l-2 border-blue-500 bg-blue-500/5 py-2.5 pl-3 pr-4"
|
||||||
|
>
|
||||||
|
<p class="whitespace-pre-line text-sm text-muted">
|
||||||
|
{{ t('cloudNotification.feature4') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Actions -->
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<Button
|
||||||
|
:label="t('cloudNotification.continueLocally')"
|
||||||
|
severity="secondary"
|
||||||
|
outlined
|
||||||
|
class="flex-1"
|
||||||
|
@click="onDismiss"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
:label="t('cloudNotification.exploreCloud')"
|
||||||
|
icon="pi pi-arrow-right"
|
||||||
|
icon-pos="right"
|
||||||
|
class="flex-1"
|
||||||
|
@click="onExplore"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import Button from 'primevue/button'
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
|
import { useTelemetry } from '@/platform/telemetry'
|
||||||
|
import { useDialogStore } from '@/stores/dialogStore'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// Track when modal is shown
|
||||||
|
onMounted(() => {
|
||||||
|
useTelemetry()?.trackUiButtonClicked({
|
||||||
|
button_id: 'cloud_notification_modal_shown'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const onDismiss = () => {
|
||||||
|
useTelemetry()?.trackUiButtonClicked({
|
||||||
|
button_id: 'cloud_notification_continue_locally_clicked'
|
||||||
|
})
|
||||||
|
useDialogStore().closeDialog()
|
||||||
|
}
|
||||||
|
|
||||||
|
const onExplore = () => {
|
||||||
|
useTelemetry()?.trackUiButtonClicked({
|
||||||
|
button_id: 'cloud_notification_explore_cloud_clicked'
|
||||||
|
})
|
||||||
|
|
||||||
|
// Add UTM parameters for attribution tracking
|
||||||
|
const url = new URL('https://www.comfy.org/cloud')
|
||||||
|
url.searchParams.set('utm_source', 'desktop')
|
||||||
|
url.searchParams.set('utm_medium', 'notification')
|
||||||
|
url.searchParams.set('utm_campaign', 'macos_first_launch')
|
||||||
|
|
||||||
|
window.open(url.toString(), '_blank')
|
||||||
|
useDialogStore().closeDialog()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -2212,5 +2212,18 @@
|
|||||||
"description": "This workflow uses custom nodes you haven't installed yet.",
|
"description": "This workflow uses custom nodes you haven't installed yet.",
|
||||||
"replacementInstruction": "Install these nodes to run this workflow, or replace them with installed alternatives. Missing nodes are highlighted in red on the canvas."
|
"replacementInstruction": "Install these nodes to run this workflow, or replace them with installed alternatives. Missing nodes are highlighted in red on the canvas."
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"cloudNotification": {
|
||||||
|
"title": "Discover Comfy Cloud",
|
||||||
|
"message": "Get access to industry-grade GPUs and run workflows up to 10x faster",
|
||||||
|
"feature1Title": "No Setup Required",
|
||||||
|
"feature1": "Start creating instantly with popular models pre-installed",
|
||||||
|
"feature2Title": "Powerful GPUs",
|
||||||
|
"feature2": "A100 and RTX PRO 6000 GPUs for heavy video models",
|
||||||
|
"feature3Title": "$20/month",
|
||||||
|
"feature3": "Simple subscription with unlimited workflow runs",
|
||||||
|
"feature4": "ComfyUI stays free and open source.\nCloud is optional—for instant access to high-end GPUs.",
|
||||||
|
"continueLocally": "Continue Locally",
|
||||||
|
"exploreCloud": "Explore Cloud"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -293,6 +293,12 @@ export const CORE_SETTINGS: SettingParams[] = [
|
|||||||
type: 'boolean',
|
type: 'boolean',
|
||||||
defaultValue: true
|
defaultValue: true
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'Comfy.Desktop.CloudNotificationShown',
|
||||||
|
name: 'Cloud notification shown',
|
||||||
|
type: 'hidden',
|
||||||
|
defaultValue: false
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'Comfy.Graph.ZoomSpeed',
|
id: 'Comfy.Graph.ZoomSpeed',
|
||||||
category: ['LiteGraph', 'Canvas', 'ZoomSpeed'],
|
category: ['LiteGraph', 'Canvas', 'ZoomSpeed'],
|
||||||
|
|||||||
@@ -45,6 +45,7 @@ function onChange(
|
|||||||
export const useSettingStore = defineStore('setting', () => {
|
export const useSettingStore = defineStore('setting', () => {
|
||||||
const settingValues = ref<Record<string, any>>({})
|
const settingValues = ref<Record<string, any>>({})
|
||||||
const settingsById = ref<Record<string, SettingParams>>({})
|
const settingsById = ref<Record<string, SettingParams>>({})
|
||||||
|
const isInitialized = ref(false)
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Check if a setting's value exists, i.e. if the user has set it manually.
|
* Check if a setting's value exists, i.e. if the user has set it manually.
|
||||||
@@ -196,6 +197,7 @@ export const useSettingStore = defineStore('setting', () => {
|
|||||||
|
|
||||||
// Migrate old zoom threshold setting to new font size setting
|
// Migrate old zoom threshold setting to new font size setting
|
||||||
await migrateZoomThresholdToFontSize()
|
await migrateZoomThresholdToFontSize()
|
||||||
|
isInitialized.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -240,6 +242,7 @@ export const useSettingStore = defineStore('setting', () => {
|
|||||||
return {
|
return {
|
||||||
settingValues,
|
settingValues,
|
||||||
settingsById,
|
settingsById,
|
||||||
|
isInitialized,
|
||||||
addSetting,
|
addSetting,
|
||||||
loadSettingValues,
|
loadSettingValues,
|
||||||
set,
|
set,
|
||||||
|
|||||||
68
src/platform/updates/common/cloudNotificationStore.ts
Normal file
68
src/platform/updates/common/cloudNotificationStore.ts
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
import { until } from '@vueuse/core'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
|
||||||
|
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||||
|
import { useSystemStatsStore } from '@/stores/systemStatsStore'
|
||||||
|
import { isElectron } from '@/utils/envUtil'
|
||||||
|
|
||||||
|
export const useCloudNotificationStore = defineStore(
|
||||||
|
'cloudNotification',
|
||||||
|
() => {
|
||||||
|
const settingStore = useSettingStore()
|
||||||
|
const systemStatsStore = useSystemStatsStore()
|
||||||
|
|
||||||
|
const isReady = ref(false)
|
||||||
|
const hasShownThisSession = ref(false)
|
||||||
|
|
||||||
|
async function initialize() {
|
||||||
|
if (isReady.value) return
|
||||||
|
await until(settingStore.isInitialized)
|
||||||
|
await until(systemStatsStore.isInitialized)
|
||||||
|
isReady.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const isEligiblePlatform = computed(() => {
|
||||||
|
if (!isReady.value) return false
|
||||||
|
if (!isElectron()) return false
|
||||||
|
|
||||||
|
const osString =
|
||||||
|
systemStatsStore.systemStats?.system?.os?.toLowerCase() ?? ''
|
||||||
|
const platformString =
|
||||||
|
typeof navigator === 'undefined' ? '' : navigator.platform.toLowerCase()
|
||||||
|
|
||||||
|
return (
|
||||||
|
osString.includes('darwin') ||
|
||||||
|
osString.includes('mac') ||
|
||||||
|
platformString.includes('mac')
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
const hasSeenNotification = computed(() => {
|
||||||
|
if (!isReady.value) return true
|
||||||
|
return !!settingStore.get('Comfy.Desktop.CloudNotificationShown')
|
||||||
|
})
|
||||||
|
|
||||||
|
const shouldShowNotification = computed(() => {
|
||||||
|
if (!isReady.value) return false
|
||||||
|
if (!isEligiblePlatform.value) return false
|
||||||
|
|
||||||
|
return !hasSeenNotification.value && !hasShownThisSession.value
|
||||||
|
})
|
||||||
|
|
||||||
|
function markSessionShown() {
|
||||||
|
hasShownThisSession.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function persistNotificationShown() {
|
||||||
|
await settingStore.set('Comfy.Desktop.CloudNotificationShown', true)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
initialize,
|
||||||
|
shouldShowNotification,
|
||||||
|
markSessionShown,
|
||||||
|
persistNotificationShown
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
<template>
|
||||||
|
<span class="sr-only" aria-hidden="true" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onBeforeUnmount, onMounted, watch } from 'vue'
|
||||||
|
import type { WatchStopHandle } from 'vue'
|
||||||
|
|
||||||
|
import { useCloudNotificationStore } from '@/platform/updates/common/cloudNotificationStore'
|
||||||
|
import { useDialogService } from '@/services/dialogService'
|
||||||
|
|
||||||
|
const dialogService = useDialogService()
|
||||||
|
const cloudNotificationStore = useCloudNotificationStore()
|
||||||
|
|
||||||
|
let stopWatcher: WatchStopHandle | null = null
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await cloudNotificationStore.initialize()
|
||||||
|
|
||||||
|
stopWatcher = watch(
|
||||||
|
() => cloudNotificationStore.shouldShowNotification,
|
||||||
|
(shouldShow) => {
|
||||||
|
if (shouldShow) {
|
||||||
|
cloudNotificationStore.markSessionShown()
|
||||||
|
dialogService.showCloudNotification()
|
||||||
|
|
||||||
|
void cloudNotificationStore
|
||||||
|
.persistNotificationShown()
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('[CloudNotification] Failed to persist flag', error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
stopWatcher?.()
|
||||||
|
stopWatcher = null
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@@ -374,6 +374,7 @@ const zSettings = z.object({
|
|||||||
'Comfy.Workflow.ShowMissingNodesWarning': z.boolean(),
|
'Comfy.Workflow.ShowMissingNodesWarning': z.boolean(),
|
||||||
'Comfy.Workflow.ShowMissingModelsWarning': z.boolean(),
|
'Comfy.Workflow.ShowMissingModelsWarning': z.boolean(),
|
||||||
'Comfy.Workflow.WarnBlueprintOverwrite': z.boolean(),
|
'Comfy.Workflow.WarnBlueprintOverwrite': z.boolean(),
|
||||||
|
'Comfy.Desktop.CloudNotificationShown': z.boolean(),
|
||||||
'Comfy.DisableFloatRounding': z.boolean(),
|
'Comfy.DisableFloatRounding': z.boolean(),
|
||||||
'Comfy.DisableSliders': z.boolean(),
|
'Comfy.DisableSliders': z.boolean(),
|
||||||
'Comfy.DOMClippingEnabled': z.boolean(),
|
'Comfy.DOMClippingEnabled': z.boolean(),
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import { merge } from 'es-toolkit/compat'
|
|||||||
import type { Component } from 'vue'
|
import type { Component } from 'vue'
|
||||||
|
|
||||||
import ApiNodesSignInContent from '@/components/dialog/content/ApiNodesSignInContent.vue'
|
import ApiNodesSignInContent from '@/components/dialog/content/ApiNodesSignInContent.vue'
|
||||||
|
import CloudNotificationContent from '@/components/dialog/content/CloudNotificationContent.vue'
|
||||||
import MissingNodesContent from '@/components/dialog/content/MissingNodesContent.vue'
|
import MissingNodesContent from '@/components/dialog/content/MissingNodesContent.vue'
|
||||||
import MissingNodesFooter from '@/components/dialog/content/MissingNodesFooter.vue'
|
import MissingNodesFooter from '@/components/dialog/content/MissingNodesFooter.vue'
|
||||||
import MissingNodesHeader from '@/components/dialog/content/MissingNodesHeader.vue'
|
import MissingNodesHeader from '@/components/dialog/content/MissingNodesHeader.vue'
|
||||||
@@ -541,6 +542,16 @@ export const useDialogService = () => {
|
|||||||
show()
|
show()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function showCloudNotification() {
|
||||||
|
dialogStore.showDialog({
|
||||||
|
key: 'global-cloud-notification',
|
||||||
|
component: CloudNotificationContent,
|
||||||
|
dialogComponentProps: {
|
||||||
|
closable: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
showLoadWorkflowWarning,
|
showLoadWorkflowWarning,
|
||||||
showMissingModelsWarning,
|
showMissingModelsWarning,
|
||||||
@@ -555,6 +566,7 @@ export const useDialogService = () => {
|
|||||||
showTopUpCreditsDialog,
|
showTopUpCreditsDialog,
|
||||||
showUpdatePasswordDialog,
|
showUpdatePasswordDialog,
|
||||||
showExtensionDialog,
|
showExtensionDialog,
|
||||||
|
showCloudNotification,
|
||||||
prompt,
|
prompt,
|
||||||
showErrorDialog,
|
showErrorDialog,
|
||||||
confirm,
|
confirm,
|
||||||
|
|||||||
@@ -18,6 +18,7 @@
|
|||||||
<GlobalToast />
|
<GlobalToast />
|
||||||
<RerouteMigrationToast />
|
<RerouteMigrationToast />
|
||||||
<VueNodesMigrationToast />
|
<VueNodesMigrationToast />
|
||||||
|
<CloudNotificationOrchestrator />
|
||||||
<UnloadWindowConfirmDialog v-if="!isElectron()" />
|
<UnloadWindowConfirmDialog v-if="!isElectron()" />
|
||||||
<MenuHamburger />
|
<MenuHamburger />
|
||||||
</template>
|
</template>
|
||||||
@@ -56,6 +57,7 @@ import { useSettingStore } from '@/platform/settings/settingStore'
|
|||||||
import { useTelemetry } from '@/platform/telemetry'
|
import { useTelemetry } from '@/platform/telemetry'
|
||||||
import { useFrontendVersionMismatchWarning } from '@/platform/updates/common/useFrontendVersionMismatchWarning'
|
import { useFrontendVersionMismatchWarning } from '@/platform/updates/common/useFrontendVersionMismatchWarning'
|
||||||
import { useVersionCompatibilityStore } from '@/platform/updates/common/versionCompatibilityStore'
|
import { useVersionCompatibilityStore } from '@/platform/updates/common/versionCompatibilityStore'
|
||||||
|
import CloudNotificationOrchestrator from '@/platform/updates/components/CloudNotificationOrchestrator.vue'
|
||||||
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
||||||
import type { StatusWsMessageStatus } from '@/schemas/apiSchema'
|
import type { StatusWsMessageStatus } from '@/schemas/apiSchema'
|
||||||
import { api } from '@/scripts/api'
|
import { api } from '@/scripts/api'
|
||||||
|
|||||||
Reference in New Issue
Block a user