mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
bf63a5cc71
Add a frontend heuristic that estimates peak VRAM consumption by detecting model-loading nodes in the workflow graph and summing approximate memory costs per model category (checkpoints, LoRAs, ControlNets, VAEs, etc.). The estimate uses only the largest base model (checkpoint or diffusion_model) since ComfyUI offloads others, plus all co-resident models and a flat runtime overhead. Surfaces the estimate in three places: 1. Template publishing wizard (metadata step) — auto-detects VRAM on mount using the same graph traversal pattern as custom node detection, with a manual GB override input for fine-tuning. 2. Template marketplace cards — displays a VRAM badge in the top-left corner of template thumbnails using the existing SquareChip and CardTop slot infrastructure. 3. Workflow editor — floating indicator in the bottom-right of the graph canvas showing estimated VRAM for the current workflow. Bumps version to 1.46.0. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
32 lines
919 B
Vue
32 lines
919 B
Vue
<!--
|
|
Floating indicator that displays the estimated VRAM requirement
|
|
for the currently loaded workflow graph.
|
|
-->
|
|
<template>
|
|
<div
|
|
v-if="vramEstimate > 0"
|
|
class="pointer-events-auto absolute bottom-3 right-3 z-10 inline-flex items-center gap-1.5 rounded-lg bg-zinc-500/40 px-2.5 py-1.5 text-xs font-medium text-white/90 backdrop-blur-sm"
|
|
:title="t('templateWorkflows.vramEstimateTooltip')"
|
|
>
|
|
<i class="icon-[lucide--cpu] h-3.5 w-3.5" />
|
|
{{ formatSize(vramEstimate) }}
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { formatSize } from '@/utils/formatUtil'
|
|
import { ref, watchEffect } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import { estimateWorkflowVram } from '@/composables/useVramEstimation'
|
|
import { app } from '@/scripts/app'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const vramEstimate = ref(0)
|
|
|
|
watchEffect(() => {
|
|
vramEstimate.value = estimateWorkflowVram(app.rootGraph)
|
|
})
|
|
</script>
|