From ea605887fa7b55c7ec677aacc6c2fd299644d0ee Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Mon, 5 May 2025 14:25:19 -0400
Subject: [PATCH] [API Nodes] Add cost badge for api nodes (#3768)

---
 src/components/graph/NodeBadge.vue | 31 +++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/graph/NodeBadge.vue b/src/components/graph/NodeBadge.vue
index 80ce22b50..f52aabb40 100644
--- a/src/components/graph/NodeBadge.vue
+++ b/src/components/graph/NodeBadge.vue
@@ -5,9 +5,11 @@
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode } from '@comfyorg/litegraph'
-import { BadgePosition } from '@comfyorg/litegraph'
-import { LGraphBadge } from '@comfyorg/litegraph'
+import {
+  BadgePosition,
+  LGraphBadge,
+  type LGraphNode
+} from '@comfyorg/litegraph'
 import _ from 'lodash'
 import { computed, onMounted, watch } from 'vue'
 
@@ -83,6 +85,29 @@ onMounted(() => {
       })
 
       node.badges.push(() => badge.value)
+
+      if (node.constructor.nodeData?.api_node) {
+        const creditsBadge = computed(() => {
+          return new LGraphBadge({
+            text: '',
+            iconOptions: {
+              unicode: '\ue96b',
+              fontFamily: 'PrimeIcons',
+              color: '#FABC25',
+              bgColor: '#353535',
+              fontSize: 8
+            },
+            fgColor:
+              colorPaletteStore.completedActivePalette.colors.litegraph_base
+                .BADGE_FG_COLOR,
+            bgColor:
+              colorPaletteStore.completedActivePalette.colors.litegraph_base
+                .BADGE_BG_COLOR
+          })
+        })
+
+        node.badges.push(() => creditsBadge.value)
+      }
     }
   })
 })