mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-10 01:50:08 +00:00
[feat] Rename license filter to 'Runs On' filter in template selector (#6543)
## Summary Renamed the templates license filter to better reflect its actual purpose - showing where a template executes (locally in ComfyUI vs external/remote API). The current "License" filter has been causing confusion with model licensing terms (e.g., Apache vs flux-dev licensing). This PR clarifies the filter's purpose by renaming it to "Runs On" and updating the options to be more descriptive of inference location. <img width="196" height="230" alt="image" src="https://github.com/user-attachments/assets/8cbea263-f399-4945-82c1-357ec185f5a7" /> <img width="861" height="597" alt="image" src="https://github.com/user-attachments/assets/af116876-d7a5-49c5-b791-1fda637ff3a3" /> ## Changes - **Filter name**: "License" → "Runs On" - **Filter options**: - "Open Source" → "ComfyUI" - "Closed Source (API Nodes)" → "External or Remote API" - **Icon**: Changed from `file-text` to `server` for better visual representation - **Variable naming**: Updated all related variables, types, and tests to use `runsOn` naming convention - **Telemetry**: Updated metadata to track `selected_runs_on` instead of `selected_licenses` ## Why "Runs On"? - **Clear intent**: Users want to know if a template runs locally or requires an API call - **Avoids confusion**: Separates the concept from model licensing terms - **Inclusive wording**: "Remote" is included alongside "API" to help users who may not be familiar with API terminology - **Cloud-agnostic**: "Runs On" works whether the app itself is running locally or in the cloud ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6543-feat-Rename-license-filter-to-Runs-On-filter-in-template-selector-29f6d73d3650811f935bc1f3fce7d7ad) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -68,17 +68,17 @@
|
||||
</template>
|
||||
</MultiSelect>
|
||||
|
||||
<!-- License Filter -->
|
||||
<!-- Runs On Filter -->
|
||||
<MultiSelect
|
||||
v-model="selectedLicenseObjects"
|
||||
:label="licenseFilterLabel"
|
||||
:options="licenseOptions"
|
||||
v-model="selectedRunsOnObjects"
|
||||
:label="runsOnFilterLabel"
|
||||
:options="runsOnOptions"
|
||||
:show-search-box="true"
|
||||
:show-selected-count="true"
|
||||
:show-clear-button="true"
|
||||
>
|
||||
<template #icon>
|
||||
<i class="icon-[lucide--file-text]" />
|
||||
<i class="icon-[lucide--server]" />
|
||||
</template>
|
||||
</MultiSelect>
|
||||
</div>
|
||||
@@ -528,12 +528,12 @@ const {
|
||||
searchQuery,
|
||||
selectedModels,
|
||||
selectedUseCases,
|
||||
selectedLicenses,
|
||||
selectedRunsOn,
|
||||
sortBy,
|
||||
filteredTemplates,
|
||||
availableModels,
|
||||
availableUseCases,
|
||||
availableLicenses,
|
||||
availableRunsOn,
|
||||
filteredCount,
|
||||
totalCount,
|
||||
resetFilters
|
||||
@@ -561,15 +561,15 @@ const selectedUseCaseObjects = computed({
|
||||
}
|
||||
})
|
||||
|
||||
const selectedLicenseObjects = computed({
|
||||
const selectedRunsOnObjects = computed({
|
||||
get() {
|
||||
return selectedLicenses.value.map((license) => ({
|
||||
name: license,
|
||||
value: license
|
||||
return selectedRunsOn.value.map((runsOn) => ({
|
||||
name: runsOn,
|
||||
value: runsOn
|
||||
}))
|
||||
},
|
||||
set(value: { name: string; value: string }[]) {
|
||||
selectedLicenses.value = value.map((item) => item.value)
|
||||
selectedRunsOn.value = value.map((item) => item.value)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -602,10 +602,10 @@ const useCaseOptions = computed(() =>
|
||||
}))
|
||||
)
|
||||
|
||||
const licenseOptions = computed(() =>
|
||||
availableLicenses.value.map((license) => ({
|
||||
name: license,
|
||||
value: license
|
||||
const runsOnOptions = computed(() =>
|
||||
availableRunsOn.value.map((runsOn) => ({
|
||||
name: runsOn,
|
||||
value: runsOn
|
||||
}))
|
||||
)
|
||||
|
||||
@@ -634,14 +634,14 @@ const useCaseFilterLabel = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
const licenseFilterLabel = computed(() => {
|
||||
if (selectedLicenseObjects.value.length === 0) {
|
||||
return t('templateWorkflows.licenseFilter', 'License')
|
||||
} else if (selectedLicenseObjects.value.length === 1) {
|
||||
return selectedLicenseObjects.value[0].name
|
||||
const runsOnFilterLabel = computed(() => {
|
||||
if (selectedRunsOnObjects.value.length === 0) {
|
||||
return t('templateWorkflows.runsOnFilter', 'Runs On')
|
||||
} else if (selectedRunsOnObjects.value.length === 1) {
|
||||
return selectedRunsOnObjects.value[0].name
|
||||
} else {
|
||||
return t('templateWorkflows.licensesSelected', {
|
||||
count: selectedLicenseObjects.value.length
|
||||
return t('templateWorkflows.runsOnSelected', {
|
||||
count: selectedRunsOnObjects.value.length
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -708,7 +708,7 @@ watch(
|
||||
sortBy,
|
||||
selectedModels,
|
||||
selectedUseCases,
|
||||
selectedLicenses
|
||||
selectedRunsOn
|
||||
],
|
||||
() => {
|
||||
resetPagination()
|
||||
|
||||
Reference in New Issue
Block a user