Add ComfyUI Examples workflows to in-app templates (#2541)

Co-authored-by: jojodecayz <121620462+jojodecayz@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>

src/components/templates/TemplateWorkflowCard.vue

@@ -1,26 +1,34 @@
 <template>
-  <Card :data-testid="`template-workflow-${props.workflowName}`">
+  <Card :data-testid="`template-workflow-${template.name}`" class="w-64">
     <template #header>
       <div class="flex items-center justify-center">
-        <div
-          class="relative overflow-hidden rounded-t-lg cursor-pointer w-64 h-64"
-        >
-          <img
-            v-if="!imageError"
-            :src="
-              props.moduleName === 'default'
-                ? `templates/${props.workflowName}.jpg`
-                : `api/workflow_templates/${props.moduleName}/${props.workflowName}.jpg`
-            "
-            @error="imageError = true"
-            class="w-64 h-64 rounded-t-lg object-cover thumbnail"
-          />
-          <div v-else class="w-64 h-64 content-center text-center">
-            <i class="pi pi-file" style="font-size: 4rem"></i>
-          </div>
-          <a>
+        <div class="relative overflow-hidden rounded-t-lg cursor-pointer">
+          <template v-if="template.mediaType === 'audio'">
+            <div class="w-64 h-64 flex items-center justify-center p-4 z-20">
+              <audio
+                controls
+                class="w-full relative z-20"
+                :src="thumbnailSrc"
+                @error="imageError = true"
+                @click.stop
+              />
+            </div>
+          </template>
+          <template v-else>
+            <img
+              v-if="!imageError"
+              :src="thumbnailSrc"
+              :alt="title"
+              class="w-64 h-64 rounded-t-lg object-cover thumbnail"
+              @error="imageError = true"
+            />
+            <div v-else class="w-64 h-64 content-center text-center">
+              <i class="pi pi-file" style="font-size: 4rem"></i>
+            </div>
+          </template>
+          <a @click="$emit('loadWorkflow', template.name)">
             <div
-              class="absolute top-0 left-0 w-64 h-64 overflow-hidden opacity-0 transition duration-300 ease-in-out hover:opacity-100 bg-opacity-50 bg-black flex items-center justify-center"
+              class="absolute top-0 left-0 w-64 h-64 overflow-hidden opacity-0 transition duration-300 ease-in-out hover:opacity-100 bg-opacity-50 bg-black flex items-center justify-center z-10"
             >
               <i class="pi pi-play-circle" style="color: white"></i>
             </div>
@@ -33,18 +41,9 @@
       </div>
     </template>
     <template #subtitle>
-      <!--Default templates have translations-->
-      <template v-if="props.moduleName === 'default'">
-        {{
-          $t(
-            `templateWorkflows.template.${props.workflowName}`,
-            props.workflowName
-          )
-        }}
-      </template>
-      <template v-else>
-        {{ props.workflowName }}
-      </template>
+      <div class="text-center">
+        {{ title }}
+      </div>
     </template>
   </Card>
 </template>
@@ -52,15 +51,39 @@
 <script setup lang="ts">
 import Card from 'primevue/card'
 import ProgressSpinner from 'primevue/progressspinner'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-const props = defineProps<{
-  moduleName: string
-  workflowName: string
+import { TemplateInfo } from '@/types/workflowTemplateTypes'
+
+const { sourceModule, categoryTitle, loading, template } = defineProps<{
+  sourceModule: string
+  categoryTitle: string
   loading: boolean
+  template: TemplateInfo
 }>()
 
+const { t } = useI18n()
+
 const imageError = ref(false)
+
+const thumbnailSrc = computed(() =>
+  sourceModule === 'default'
+    ? `/templates/${template.name}.${template.mediaSubtype}`
+    : `/api/workflow_templates/${sourceModule}/${template.name}.${template.mediaSubtype}`
+)
+const title = computed(() => {
+  return sourceModule === 'default'
+    ? t(
+        `templateWorkflows.template.${categoryTitle}.${template.name}`,
+        template.name
+      )
+    : template.name ?? `${sourceModule} Template`
+})
+
+defineEmits<{
+  loadWorkflow: [name: string]
+}>()
 </script>
 
 <style lang="css" scoped>
@@ -68,8 +91,4 @@ const imageError = ref(false)
   --p-card-body-padding: 10px 0 0 0;
   overflow: hidden;
 }
-
-:deep(.p-card-subtitle) {
-  text-align: center;
-}
 </style>