mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-25 15:15:47 +00:00
5feefc7783
When hubSlug is absent: show Download (HF link, solid) + Run on Cloud instead of a generic workflows link. Variant logic: the first available button is solid, subsequent are outline.
138 lines
3.5 KiB
Vue
138 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { cn } from '@comfyorg/tailwind-utils'
|
|
import BrandButton from '../common/BrandButton.vue'
|
|
import { t } from '../../i18n/translations'
|
|
|
|
const {
|
|
displayName,
|
|
huggingFaceUrl,
|
|
docsUrl,
|
|
blogUrl,
|
|
hubSlug,
|
|
workflowCount,
|
|
directory
|
|
} = defineProps<{
|
|
displayName: string
|
|
huggingFaceUrl: string
|
|
docsUrl?: string
|
|
blogUrl?: string
|
|
hubSlug?: string
|
|
workflowCount: number
|
|
directory: string
|
|
}>()
|
|
|
|
const workflowsUrl = hubSlug
|
|
? `https://www.comfy.org/workflows/model/${hubSlug}`
|
|
: null
|
|
|
|
const dirDisplayMap: Record<string, string> = {
|
|
diffusion_models: 'Diffusion Model',
|
|
checkpoints: 'Checkpoint',
|
|
loras: 'LoRA',
|
|
controlnet: 'ControlNet',
|
|
clip_vision: 'CLIP Vision',
|
|
model_patches: 'Model Patch',
|
|
vae: 'VAE',
|
|
text_encoders: 'Text Encoder',
|
|
audio_encoders: 'Audio Encoder',
|
|
latent_upscale_models: 'Latent Upscale Model',
|
|
upscale_models: 'Upscale Model',
|
|
style_models: 'Style Model',
|
|
partner_nodes: 'Partner Node'
|
|
}
|
|
|
|
const eyebrow = dirDisplayMap[directory] ?? directory
|
|
const isPartnerNode = directory === 'partner_nodes'
|
|
</script>
|
|
|
|
<template>
|
|
<section
|
|
:class="
|
|
cn(
|
|
'mx-auto flex max-w-7xl flex-col gap-8 px-6 py-16',
|
|
'lg:flex-row lg:items-center lg:gap-16 lg:px-8 lg:py-24'
|
|
)
|
|
"
|
|
>
|
|
<div class="flex max-w-2xl flex-1 flex-col gap-6">
|
|
<p
|
|
class="text-sm font-medium uppercase tracking-widest text-primary-comfy-yellow"
|
|
>
|
|
{{ eyebrow }}
|
|
</p>
|
|
|
|
<h1 class="text-4xl font-bold text-primary-comfy-canvas lg:text-6xl">
|
|
{{ displayName }} in ComfyUI
|
|
</h1>
|
|
|
|
<p class="text-sm text-primary-comfy-canvas/60">
|
|
{{
|
|
t('models.hero.workflowCount').replace(
|
|
'{count}',
|
|
String(workflowCount)
|
|
)
|
|
}}
|
|
</p>
|
|
|
|
<div class="flex flex-col gap-3 sm:flex-row">
|
|
<BrandButton
|
|
v-if="workflowsUrl"
|
|
:href="workflowsUrl"
|
|
variant="solid"
|
|
size="lg"
|
|
class="w-full uppercase sm:w-auto sm:min-w-48"
|
|
>
|
|
{{ t('models.hero.primaryCta') }}
|
|
</BrandButton>
|
|
|
|
<BrandButton
|
|
v-if="!isPartnerNode && huggingFaceUrl"
|
|
:href="huggingFaceUrl"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
:variant="workflowsUrl ? 'outline' : 'solid'"
|
|
size="lg"
|
|
class="w-full uppercase sm:w-auto sm:min-w-48"
|
|
>
|
|
{{ t('models.hero.secondaryCta') }}
|
|
</BrandButton>
|
|
|
|
<BrandButton
|
|
v-if="!workflowsUrl"
|
|
href="https://www.comfy.org/cloud"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
:variant="huggingFaceUrl && !isPartnerNode ? 'outline' : 'solid'"
|
|
size="lg"
|
|
class="w-full uppercase sm:w-auto sm:min-w-48"
|
|
>
|
|
{{ t('models.hero.cloudCta') }}
|
|
</BrandButton>
|
|
|
|
<BrandButton
|
|
v-if="docsUrl"
|
|
:href="docsUrl"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
variant="outline"
|
|
size="lg"
|
|
class="w-full uppercase sm:w-auto sm:min-w-48"
|
|
>
|
|
{{ t('models.hero.tutorialCta') }}
|
|
</BrandButton>
|
|
</div>
|
|
|
|
<div v-if="blogUrl" class="text-sm text-primary-comfy-canvas/60">
|
|
<a
|
|
:href="blogUrl"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="hover:text-primary-comfy-canvas underline"
|
|
>
|
|
{{ t('models.hero.blogLink') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|