mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-28 18:22:40 +00:00
[Draft] Model library sidebar tab (#837)
* basic/empty model library sidebar tab in-progress * make it actually list out models * extremely primitive search impl * list out available folders (incomplete list atm) * load list dynamically * nice lil loading icon * that's not doing anything * run autoformatter * fix up some absolute vue shenanigans * swap to pi-box * is_fake_object * i think apply the tailwind thingo * trim '.safetensors' from end of display title * oop * after load, retain title if no new title is given * is_load_requested to prevent duplication * dirty initial model metadata load & preview based on node preview code * update model store tests * initial image icon for model lib * i hate this * better empty spacer * add api handler for '/models' * load model folders list instead of hardcoding * add a 'no content' placeholder for empty folders * autoformat * autoload model metadata * error handling on metadata loading * larger model icons * click a model to spawn a node for it * draggable model nodes * add a setting for whether to autoload or not * autoformat will be the death of me * cleanup promise code * make the model preview actually half-decent * revert bad unchecked change * put registration back
This commit is contained in:
Alex "mcmonkey" Goodwin
committed by
Chenlei Hu
Chenlei Hu
parent
bf7652227a
commit
6a158d46b8
209
src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
Normal file
209
src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<SidebarTabTemplate :title="$t('sideToolbar.modelLibrary')">
|
||||
<template #tool-buttons> </template>
|
||||
<template #body>
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="flex-shrink-0">
|
||||
<SearchBox
|
||||
class="model-lib-search-box mx-4 mt-4"
|
||||
v-model:modelValue="searchQuery"
|
||||
@search="handleSearch"
|
||||
:placeholder="$t('searchModels') + '...'"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-grow overflow-y-auto">
|
||||
<TreeExplorer
|
||||
class="model-lib-tree-explorer mt-1"
|
||||
:roots="renderedRoot.children"
|
||||
v-model:expandedKeys="expandedKeys"
|
||||
@nodeClick="handleNodeClick"
|
||||
>
|
||||
<template #node="{ node }">
|
||||
<ModelTreeLeaf :node="node" />
|
||||
</template>
|
||||
</TreeExplorer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</SidebarTabTemplate>
|
||||
<div id="model-library-model-preview-container" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SearchBox from '@/components/common/SearchBox.vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import TreeExplorer from '@/components/common/TreeExplorer.vue'
|
||||
import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
|
||||
import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue'
|
||||
import { ComfyModelDef, useModelStore } from '@/stores/modelStore'
|
||||
import { useModelToNodeStore } from '@/stores/modelToNodeStore'
|
||||
import { useSettingStore } from '@/stores/settingStore'
|
||||
import { useTreeExpansion } from '@/hooks/treeHooks'
|
||||
import type {
|
||||
RenderedTreeExplorerNode,
|
||||
TreeExplorerNode
|
||||
} from '@/types/treeExplorerTypes'
|
||||
import { computed, ref, type ComputedRef, watch, toRef } from 'vue'
|
||||
import type { TreeNode } from 'primevue/treenode'
|
||||
import { app } from '@/scripts/app'
|
||||
import { buildTree } from '@/utils/treeUtil'
|
||||
const { t } = useI18n()
|
||||
const modelStore = useModelStore()
|
||||
const modelToNodeStore = useModelToNodeStore()
|
||||
const settingStore = useSettingStore()
|
||||
const searchQuery = ref<string>('')
|
||||
const expandedKeys = ref<Record<string, boolean>>({})
|
||||
const { toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
|
||||
|
||||
const root: ComputedRef<TreeNode> = computed(() => {
|
||||
let modelList: ComfyModelDef[] = []
|
||||
if (!modelStore.modelFolders.length) {
|
||||
modelStore.getModelFolders()
|
||||
}
|
||||
if (settingStore.get('Comfy.ModelLibrary.AutoLoadAll')) {
|
||||
for (let folder of modelStore.modelFolders) {
|
||||
modelStore.getModelsInFolderCached(folder)
|
||||
}
|
||||
}
|
||||
for (let folder of modelStore.modelFolders) {
|
||||
const models = modelStore.modelStoreMap[folder]
|
||||
if (models) {
|
||||
if (Object.values(models.models).length) {
|
||||
modelList.push(...Object.values(models.models))
|
||||
} else {
|
||||
const fakeModel = new ComfyModelDef('(No Content)', folder)
|
||||
fakeModel.is_fake_object = true
|
||||
modelList.push(fakeModel)
|
||||
}
|
||||
} else {
|
||||
const fakeModel = new ComfyModelDef('Loading', folder)
|
||||
fakeModel.is_fake_object = true
|
||||
modelList.push(fakeModel)
|
||||
}
|
||||
}
|
||||
if (searchQuery.value) {
|
||||
const search = searchQuery.value.toLocaleLowerCase()
|
||||
modelList = modelList.filter((model: ComfyModelDef) => {
|
||||
return model.name.toLocaleLowerCase().includes(search)
|
||||
})
|
||||
}
|
||||
const tree: TreeNode = buildTree(modelList, (model: ComfyModelDef) => {
|
||||
return [model.directory, ...model.name.replaceAll('\\', '/').split('/')]
|
||||
})
|
||||
return tree
|
||||
})
|
||||
|
||||
const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
|
||||
const fillNodeInfo = (node: TreeNode): TreeExplorerNode<ComfyModelDef> => {
|
||||
const children = node.children?.map(fillNodeInfo)
|
||||
const model: ComfyModelDef | null =
|
||||
node.leaf && node.data ? node.data : null
|
||||
if (model?.is_fake_object) {
|
||||
if (model.name === '(No Content)') {
|
||||
return {
|
||||
key: node.key,
|
||||
label: t('noContent'),
|
||||
leaf: true,
|
||||
data: node.data,
|
||||
getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
|
||||
return 'pi pi-file'
|
||||
},
|
||||
children: []
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
key: node.key,
|
||||
label: t('loading') + '...',
|
||||
leaf: true,
|
||||
data: node.data,
|
||||
getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
|
||||
return 'pi pi-spin pi-spinner'
|
||||
},
|
||||
children: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
key: node.key,
|
||||
label: model ? model.title : node.label,
|
||||
leaf: node.leaf,
|
||||
data: node.data,
|
||||
getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
|
||||
if (node.leaf) {
|
||||
if (node.data && node.data.image) {
|
||||
return 'pi pi-fake-spacer'
|
||||
}
|
||||
return 'pi pi-file'
|
||||
}
|
||||
},
|
||||
children,
|
||||
draggable: node.leaf,
|
||||
handleClick: (
|
||||
node: RenderedTreeExplorerNode<ComfyModelDef>,
|
||||
e: MouseEvent
|
||||
) => {
|
||||
if (node.leaf) {
|
||||
const provider = modelToNodeStore.getNodeProvider(model.directory)
|
||||
if (provider) {
|
||||
const node = app.addNodeOnGraph(provider.nodeDef, {
|
||||
pos: app.getCanvasCenter()
|
||||
})
|
||||
const widget = node.widgets.find(
|
||||
(widget) => widget.name === provider.key
|
||||
)
|
||||
if (widget) {
|
||||
widget.value = model.name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return fillNodeInfo(root.value)
|
||||
})
|
||||
|
||||
const handleSearch = (query: string) => {
|
||||
// TODO
|
||||
}
|
||||
|
||||
const handleNodeClick = (
|
||||
node: RenderedTreeExplorerNode<ComfyModelDef>,
|
||||
e: MouseEvent
|
||||
) => {
|
||||
if (node.leaf) {
|
||||
// TODO
|
||||
} else {
|
||||
toggleNodeOnEvent(e, node)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
toRef(expandedKeys, 'value'),
|
||||
(newExpandedKeys) => {
|
||||
Object.entries(newExpandedKeys).forEach(([key, isExpanded]) => {
|
||||
if (isExpanded) {
|
||||
const folderPath = key.split('/').slice(1).join('/')
|
||||
if (folderPath && !folderPath.includes('/')) {
|
||||
// Trigger (async) load of model data for this folder
|
||||
modelStore.getModelsInFolderCached(folderPath)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.pi-fake-spacer {
|
||||
height: 1px;
|
||||
width: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
:deep(.comfy-vue-side-bar-body) {
|
||||
background: var(--p-tree-background);
|
||||
}
|
||||
</style>
|
||||
89
src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
Normal file
89
src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div class="model_preview">
|
||||
<div class="model_preview_title">
|
||||
{{ modelDef.title }}
|
||||
</div>
|
||||
<div class="model_preview_top_container">
|
||||
<div class="model_preview_architecture" v-if="modelDef.architecture_id">
|
||||
<span class="model_preview_prefix">Architecture: </span>
|
||||
{{ modelDef.architecture_id }}
|
||||
</div>
|
||||
<div class="model_preview_author" v-if="modelDef.author">
|
||||
<span class="model_preview_prefix">Author: </span>
|
||||
{{ modelDef.author }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="model_preview_image" v-if="modelDef.image">
|
||||
<img :src="modelDef.image" />
|
||||
</div>
|
||||
<div class="model_preview_usage_hint" v-if="modelDef.usage_hint">
|
||||
<span class="model_preview_prefix">Usage hint: </span>
|
||||
{{ modelDef.usage_hint }}
|
||||
</div>
|
||||
<div class="model_preview_trigger_phrase" v-if="modelDef.trigger_phrase">
|
||||
<span class="model_preview_prefix">Trigger phrase: </span>
|
||||
{{ modelDef.trigger_phrase }}
|
||||
</div>
|
||||
<div class="model_preview_description" v-if="modelDef.description">
|
||||
<span class="model_preview_prefix">Description: </span>
|
||||
{{ modelDef.description }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ComfyModelDef } from '@/stores/modelStore'
|
||||
|
||||
const props = defineProps({
|
||||
modelDef: {
|
||||
type: ComfyModelDef,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const modelDef = props.modelDef
|
||||
</script>
|
||||
<style scoped>
|
||||
.model_preview {
|
||||
background-color: var(--comfy-menu-bg);
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
color: var(--descrip-text);
|
||||
border: 1px solid var(--descrip-text);
|
||||
min-width: 300px;
|
||||
max-width: 500px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
z-index: 9999;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
padding: 10px;
|
||||
}
|
||||
.model_preview_image {
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
}
|
||||
.model_preview_image img {
|
||||
max-width: 100%;
|
||||
max-height: 150px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.model_preview_title {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.model_preview_top_container {
|
||||
text-align: center;
|
||||
}
|
||||
.model_preview_author,
|
||||
.model_preview_architecture {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.model_preview_prefix {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
130
src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
Normal file
130
src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div ref="container" class="model-lib-node-container h-full w-full">
|
||||
<TreeExplorerTreeNode :node="node">
|
||||
<template #before-label>
|
||||
<span
|
||||
v-if="modelDef && modelDef.image"
|
||||
class="model-lib-model-icon-container"
|
||||
>
|
||||
<span
|
||||
class="model-lib-model-icon"
|
||||
:style="{ backgroundImage: `url(${modelDef.image})` }"
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</TreeExplorerTreeNode>
|
||||
|
||||
<teleport v-if="isHovered" to="#model-library-model-preview-container">
|
||||
<div class="model-lib-model-preview" :style="modelPreviewStyle">
|
||||
<ModelPreview ref="previewRef" :modelDef="modelDef"></ModelPreview>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
|
||||
import ModelPreview from './ModelPreview.vue'
|
||||
import { ComfyModelDef } from '@/stores/modelStore'
|
||||
import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
|
||||
import {
|
||||
computed,
|
||||
CSSProperties,
|
||||
nextTick,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
ref
|
||||
} from 'vue'
|
||||
import { useSettingStore } from '@/stores/settingStore'
|
||||
|
||||
const props = defineProps<{
|
||||
node: RenderedTreeExplorerNode<ComfyModelDef>
|
||||
}>()
|
||||
|
||||
const modelDef = computed(() => props.node.data)
|
||||
|
||||
const previewRef = ref<InstanceType<typeof ModelPreview> | null>(null)
|
||||
const modelPreviewStyle = ref<CSSProperties>({
|
||||
position: 'absolute',
|
||||
top: '0px',
|
||||
left: '0px'
|
||||
})
|
||||
|
||||
const settingStore = useSettingStore()
|
||||
const sidebarLocation = computed<'left' | 'right'>(() =>
|
||||
settingStore.get('Comfy.Sidebar.Location')
|
||||
)
|
||||
|
||||
const handleModelHover = async () => {
|
||||
if (modelDef.value.is_fake_object) {
|
||||
return
|
||||
}
|
||||
const hoverTarget = modelContentElement.value
|
||||
const targetRect = hoverTarget.getBoundingClientRect()
|
||||
|
||||
const previewHeight = previewRef.value?.$el.offsetHeight || 0
|
||||
const availableSpaceBelow = window.innerHeight - targetRect.bottom
|
||||
|
||||
modelPreviewStyle.value.top =
|
||||
previewHeight > availableSpaceBelow
|
||||
? `${Math.max(0, targetRect.top - (previewHeight - availableSpaceBelow) - 20)}px`
|
||||
: `${targetRect.top - 40}px`
|
||||
if (sidebarLocation.value === 'left') {
|
||||
modelPreviewStyle.value.left = `${targetRect.right}px`
|
||||
} else {
|
||||
modelPreviewStyle.value.left = `${targetRect.left - 400}px`
|
||||
}
|
||||
|
||||
modelDef.value.load()
|
||||
}
|
||||
|
||||
const container = ref<HTMLElement | null>(null)
|
||||
const modelContentElement = ref<HTMLElement | null>(null)
|
||||
const isHovered = ref(false)
|
||||
const handleMouseEnter = async () => {
|
||||
if (modelDef.value.is_fake_object) {
|
||||
return
|
||||
}
|
||||
isHovered.value = true
|
||||
await nextTick()
|
||||
handleModelHover()
|
||||
}
|
||||
const handleMouseLeave = () => {
|
||||
isHovered.value = false
|
||||
}
|
||||
onMounted(() => {
|
||||
modelContentElement.value = container.value?.closest('.p-tree-node-content')
|
||||
modelContentElement.value?.addEventListener('mouseenter', handleMouseEnter)
|
||||
modelContentElement.value?.addEventListener('mouseleave', handleMouseLeave)
|
||||
if (!modelDef.value.is_fake_object) {
|
||||
modelDef.value.load()
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
modelContentElement.value?.removeEventListener('mouseenter', handleMouseEnter)
|
||||
modelContentElement.value?.removeEventListener('mouseleave', handleMouseLeave)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.model-lib-model-icon-container {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 0;
|
||||
height: 1.5rem;
|
||||
vertical-align: top;
|
||||
width: 0px;
|
||||
}
|
||||
.model-lib-model-icon {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: -2.5rem;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user