mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-05 21:54:50 +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
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