tag-calssify

javascript/index.js

@@ -8,7 +8,7 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
-    <script type="module" crossorigin src="/infinite_image_browsing/fe-static/assets/index-a611bdd6.js"></script>
+    <script type="module" crossorigin src="/infinite_image_browsing/fe-static/assets/index-43060d2f.js"></script>
     <link rel="stylesheet" href="/infinite_image_browsing/fe-static/assets/index-7059ac8b.css">
   </head>
 

vue/dist/assets/MatchedImageGrid-152705e1.js

@@ -1 +0,0 @@
-import{d as D,r as k,aW as F,a$ as G,n as N,K as U,L as V,c as n,N as o,O as s,Q as w,T as x,U as h,Y as $,aR as B,a6 as R,a8 as E}from"./index-a611bdd6.js";import{u as O,b as Q,f as q,d as j,h as H,j as K,k as L,t as W,M as Y,S as J}from"./FileItem-abbf3bc9.js";import{g as P}from"./db-3a3d4966.js";import"./index-5ea3e347.js";import"./button-10bad693.js";const X={class:"hint"},Z=D({__name:"MatchedImageGrid",props:{tabIdx:null,paneIdx:null,selectedTagIds:null,id:null},setup(y){const u=y,d=k(),p=F(new G(-1,0,-1,"throw"));N(()=>u.selectedTagIds,async()=>{var e;const{res:i}=p.pushAction(()=>P(u.selectedTagIds));d.value=(await i).sort((a,l)=>Date.parse(l.date)-Date.parse(a.date)),(e=m.value)==null||e.scrollToItem(0)},{immediate:!0});const m=k(),f={tabIdx:-1,target:"local",paneIdx:-1},{stackViewEl:b,multiSelectedIdxs:v}=O().toRefs(),{itemSize:g,gridItems:M}=Q(f),{showMenuIdx:c}=q(),{showGenInfo:r,imageGenInfo:I,q:C,onContextMenuClick:S}=j(f,{openNext:B}),T=async(i,e,a)=>{if(await S(i,e,a),i.key==="deleteFiles"){const l=v.value.includes(a)?v.value:[a];d.value=d.value.filter((_,t)=>!l.includes(t))}};return(i,e)=>{const a=R,l=Y,_=J;return U(),V("div",{class:"container",ref_key:"stackViewEl",ref:b},[n(_,{size:"large",spinning:!p.isIdle},{default:o(()=>[n(l,{visible:s(r),"onUpdate:visible":e[1]||(e[1]=t=>w(r)?r.value=t:null),width:"70vw","mask-closable":"",onOk:e[2]||(e[2]=t=>r.value=!1)},{cancelText:o(()=>[]),default:o(()=>[n(a,{active:"",loading:!s(C).isIdle},{default:o(()=>[x("div",{style:{width:"100%","word-break":"break-all","white-space":"pre-line","max-height":"70vh",overflow:"auto"},onDblclick:e[0]||(e[0]=t=>s(H)(s(I),"copied"))},[x("div",X,h(i.$t("doubleClickToCopy")),1),$(" "+h(s(I)),1)],32)]),_:1},8,["loading"])]),_:1},8,["visible"]),n(s(K),{ref_key:"scroller",ref:m,class:"file-list",items:d.value||[],"item-size":s(g).first,"key-field":"fullpath","item-secondary-size":s(g).second,gridItems:s(M)},{default:o(({item:t,index:z})=>[n(L,{idx:z,file:t,"show-menu-idx":s(c),"onUpdate:showMenuIdx":e[3]||(e[3]=A=>w(c)?c.value=A:null),"full-screen-preview-image-url":s(W)(t),onContextMenuClick:T},null,8,["idx","file","show-menu-idx","full-screen-preview-image-url"])]),_:1},8,["items","item-size","item-secondary-size","gridItems"])]),_:1},8,["spinning"])],512)}}});const le=E(Z,[["__scopeId","data-v-177e33f1"]]);export{le as default};

vue/dist/assets/MatchedImageGrid-84a4c982.js

@@ -0,0 +1 @@
+import{d as D,r as k,aW as F,a$ as G,n as N,K as U,L as V,c as o,N as n,O as s,Q as w,T as x,U as h,Y as $,aR as B,a6 as R,a8 as E}from"./index-43060d2f.js";import{u as O,b as Q,f as q,d as j,h as H,j as K,k as L,t as W,M as Y,S as J}from"./FileItem-16f74fd5.js";import{g as P}from"./db-c23bc74f.js";import"./index-41941492.js";import"./_baseIteratee-e73bfe8e.js";import"./button-bd7116ce.js";const X={class:"hint"},Z=D({__name:"MatchedImageGrid",props:{tabIdx:null,paneIdx:null,selectedTagIds:null,id:null},setup(y){const u=y,d=k(),p=F(new G(-1,0,-1,"throw"));N(()=>u.selectedTagIds,async()=>{var e;const{res:i}=p.pushAction(()=>P(u.selectedTagIds));d.value=(await i).sort((a,l)=>Date.parse(l.date)-Date.parse(a.date)),(e=m.value)==null||e.scrollToItem(0)},{immediate:!0});const m=k(),f={tabIdx:-1,target:"local",paneIdx:-1},{stackViewEl:b,multiSelectedIdxs:v}=O().toRefs(),{itemSize:g,gridItems:M}=Q(f),{showMenuIdx:c}=q(),{showGenInfo:r,imageGenInfo:I,q:C,onContextMenuClick:S}=j(f,{openNext:B}),T=async(i,e,a)=>{if(await S(i,e,a),i.key==="deleteFiles"){const l=v.value.includes(a)?v.value:[a];d.value=d.value.filter((_,t)=>!l.includes(t))}};return(i,e)=>{const a=R,l=Y,_=J;return U(),V("div",{class:"container",ref_key:"stackViewEl",ref:b},[o(_,{size:"large",spinning:!p.isIdle},{default:n(()=>[o(l,{visible:s(r),"onUpdate:visible":e[1]||(e[1]=t=>w(r)?r.value=t:null),width:"70vw","mask-closable":"",onOk:e[2]||(e[2]=t=>r.value=!1)},{cancelText:n(()=>[]),default:n(()=>[o(a,{active:"",loading:!s(C).isIdle},{default:n(()=>[x("div",{style:{width:"100%","word-break":"break-all","white-space":"pre-line","max-height":"70vh",overflow:"auto"},onDblclick:e[0]||(e[0]=t=>s(H)(s(I),"copied"))},[x("div",X,h(i.$t("doubleClickToCopy")),1),$(" "+h(s(I)),1)],32)]),_:1},8,["loading"])]),_:1},8,["visible"]),o(s(K),{ref_key:"scroller",ref:m,class:"file-list",items:d.value||[],"item-size":s(g).first,"key-field":"fullpath","item-secondary-size":s(g).second,gridItems:s(M)},{default:n(({item:t,index:z})=>[o(L,{idx:z,file:t,"show-menu-idx":s(c),"onUpdate:showMenuIdx":e[3]||(e[3]=A=>w(c)?c.value=A:null),"full-screen-preview-image-url":s(W)(t),onContextMenuClick:T},null,8,["idx","file","show-menu-idx","full-screen-preview-image-url"])]),_:1},8,["items","item-size","item-secondary-size","gridItems"])]),_:1},8,["spinning"])],512)}}});const oe=E(Z,[["__scopeId","data-v-177e33f1"]]);export{oe as default};

vue/dist/assets/TagSearch-204b2717.css

@@ -1 +0,0 @@
-.container[data-v-25cc8f3d]{height:var(--pane-max-height);overflow:auto;display:flex;flex-direction:column;align-items:stretch}.container .select[data-v-25cc8f3d]{padding:8px}.container .search-bar[data-v-25cc8f3d]{padding:8px;display:flex}.container .tag-list[data-v-25cc8f3d]{list-style:none;padding:0;overflow:scroll}.container .tag-list .tag[data-v-25cc8f3d]{border:2px solid var(--zp-secondary);color:var(--zp-primary);border-radius:999px;padding:4px 16px;margin:4px;display:inline-block;cursor:pointer}.container .tag-list .tag.selected[data-v-25cc8f3d]{color:var(--primary-color);border:2px solid var(--primary-color)}

vue/dist/assets/TagSearch-4cc65047.js

@@ -0,0 +1 @@
+import{ax as N,aw as V,cc as D,b$ as E,d as U,V as q,aW as G,a$ as L,r as B,A as I,aa as M,p as P,K as c,L as p,$ as y,x as b,T as v,c as j,O as m,a2 as z,W as x,N as A,Y as k,U as w,Z as C,a4 as W,cg as K,a8 as Q}from"./index-43060d2f.js";/* empty css              */import{a as $,u as Y}from"./db-c23bc74f.js";import{b as Z}from"./_baseIteratee-e73bfe8e.js";import{B as H}from"./button-bd7116ce.js";function J(s,n,a,r){for(var e=-1,t=s==null?0:s.length;++e<t;){var i=s[e];n(r,i,a(i),s)}return r}function R(s){return function(n,a,r){for(var e=-1,t=Object(n),i=r(n),f=i.length;f--;){var g=i[s?f:++e];if(a(t[g],g,t)===!1)break}return n}}var X=R();const ee=X;function ae(s,n){return s&&ee(s,n,N)}function te(s,n){return function(a,r){if(a==null)return a;if(!V(a))return s(a,r);for(var e=a.length,t=n?e:-1,i=Object(a);(n?t--:++t<e)&&r(i[t],t,i)!==!1;);return a}}var se=te(ae);const ne=se;function re(s,n,a,r){return ne(s,function(e,t,i){n(r,e,a(e),i)}),r}function oe(s,n){return function(a,r){var e=D(a)?J:re,t=n?n():{};return e(a,s,Z(r),t)}}var ie=Object.prototype,le=ie.hasOwnProperty,ce=oe(function(s,n,a){le.call(s,a)?s[a].push(n):E(s,a,[n])});const ue=ce,de={class:"container"},pe={class:"search-bar"},fe={class:"list-container"},ge={class:"cat-name"},he=["onClick"],ve=U({__name:"TagSearch",props:{tabIdx:null,paneIdx:null},setup(s){const n=s,a=q(),r=G(new L(-1,0,-1,"throw")),e=B(),t=B(new Set),i=I(()=>e.value?e.value.tags.slice().sort((o,l)=>l.count-o.count):[]),f=["Model","Sampler","lora","pos","size"].reduce((o,l,h)=>(o[l]=h,o),{}),g=I(()=>Object.entries(ue(i.value,o=>o.type)).sort((o,l)=>f[o[0]]-f[l[0]])),O=M();P(async()=>{e.value=await $(),e.value.img_count&&e.value.expired&&S()});const S=async()=>{r.pushAction(async()=>{await Y(),e.value=await $()})},T=()=>{a.openTagSearchMatchedImageGridInRight(n.tabIdx,O,Array.from(t.value))},_=(o,l=!1)=>(l?`[${o.type}] `:"")+(o.display_name?`${o.display_name} : ${o.name}`:o.name);return(o,l)=>{const h=H;return c(),p("div",de,[y("",!0),e.value?(c(),p(b,{key:1},[v("div",null,[v("div",pe,[j(m(z),{conv:{value:u=>u.id,text:_,optionText:u=>_(u,!0)},mode:"multiple",style:{width:"100%"},options:m(i),value:Array.from(t.value),placeholder:"Select tags to match images","onUpdate:value":l[0]||(l[0]=u=>t.value=new Set(u))},null,8,["conv","options","value"]),e.value.expired||!e.value.img_count?(c(),x(h,{key:0,onClick:S,loading:!r.isIdle,type:"primary"},{default:A(()=>[k(w(e.value.img_count===0?"Generate index for search image":"Update index"),1)]),_:1},8,["loading"])):(c(),x(h,{key:1,type:"primary",onClick:T,loading:!r.isIdle,disabled:!t.value.size},{default:A(()=>[k("Search ")]),_:1},8,["loading","disabled"]))])]),v("div",fe,[(c(!0),p(b,null,C(m(g),([u,F])=>(c(),p("ul",{class:"tag-list",key:u},[v("h3",ge,w(u),1),(c(!0),p(b,null,C(F,d=>(c(),p("li",{key:d.id,class:W(["tag",{selected:t.value.has(d.id)}]),onClick:me=>t.value.has(d.id)?t.value.delete(d.id):t.value.add(d.id)},[t.value.has(d.id)?(c(),x(m(K),{key:0})):y("",!0),k(" "+w(_(d)),1)],10,he))),128))]))),128))])],64)):y("",!0)])}}});const we=Q(ve,[["__scopeId","data-v-7bf44f69"]]);export{we as default};

vue/dist/assets/TagSearch-68915867.js

@@ -1 +0,0 @@
-import{d as b,V as T,aW as N,a$ as A,r as y,A as V,aa as $,p as D,K as o,L as l,$ as d,x as g,T as r,c as U,O as c,a2 as q,W as u,N as f,Y as p,U as x,Z as G,a4 as z,cj as F,a8 as L}from"./index-a611bdd6.js";/* empty css              */import{a as k,u as M}from"./db-3a3d4966.js";import{B as O}from"./button-10bad693.js";const W={class:"container"},j={class:"search-bar"},E={class:"tag-list"},K=["onClick"],Q=b({__name:"TagSearch",props:{tabIdx:null,paneIdx:null},setup(I){const S=I,C=T(),i=N(new A(-1,0,-1,"throw")),a=y(),t=y(new Set),m=V(()=>a.value?a.value.tags.slice().sort((s,n)=>n.count-s.count):[]),w=$();D(async()=>{a.value=await k(),a.value.img_count&&a.value.expired&&_()});const _=async()=>{i.pushAction(async()=>{await M(),a.value=await k()})},B=()=>{C.openTagSearchMatchedImageGridInRight(S.tabIdx,w,Array.from(t.value))},v=s=>s.display_name?`${s.display_name} : ${s.name}`:s.name;return(s,n)=>{const h=O;return o(),l("div",W,[d("",!0),a.value?(o(),l(g,{key:1},[r("div",null,[r("div",j,[U(c(q),{conv:{value:e=>e.id,text:v},mode:"multiple",style:{width:"100%"},options:c(m),value:Array.from(t.value),placeholder:"Select tags to match images","onUpdate:value":n[0]||(n[0]=e=>t.value=new Set(e))},null,8,["conv","options","value"]),a.value.expired||!a.value.img_count?(o(),u(h,{key:0,onClick:_,loading:!i.isIdle,type:"primary"},{default:f(()=>[p(x(a.value.img_count===0?"Generate index for search image":"Update index"),1)]),_:1},8,["loading"])):(o(),u(h,{key:1,type:"primary",onClick:B,loading:!i.isIdle,disabled:!t.value.size},{default:f(()=>[p("Search ")]),_:1},8,["loading","disabled"]))])]),r("ul",E,[(o(!0),l(g,null,G(c(m),e=>(o(),l("li",{key:e.id,class:z(["tag",{selected:t.value.has(e.id)}]),onClick:R=>t.value.has(e.id)?t.value.delete(e.id):t.value.add(e.id)},[t.value.has(e.id)?(o(),u(c(F),{key:0})):d("",!0),p(" "+x(v(e)),1)],10,K))),128))])],64)):d("",!0)])}}});const P=L(Q,[["__scopeId","data-v-25cc8f3d"]]);export{P as default};

vue/dist/assets/TagSearch-8724ecbf.css

@@ -0,0 +1 @@
+.container[data-v-7bf44f69]{height:var(--pane-max-height);overflow:auto;display:flex;flex-direction:column;align-items:stretch}.container .select[data-v-7bf44f69]{padding:8px}.container .search-bar[data-v-7bf44f69]{padding:8px;display:flex}.container .list-container[data-v-7bf44f69]{background:var(--zp-secondary-variant-background);overflow:scroll}.container .tag-list[data-v-7bf44f69]{list-style:none;margin:16px;border-radius:16px;background-color:var(--zp-tertiary-background);padding:8px}.container .tag-list .cat-name[data-v-7bf44f69]{position:sticky;top:0;padding:4px 16px;background:white;border-left:4px solid var(--primary-color);margin:4px}.container .tag-list .tag[data-v-7bf44f69]{border:2px solid var(--zp-secondary);color:var(--zp-primary);border-radius:999px;padding:4px 16px;margin:4px;display:inline-block;cursor:pointer}.container .tag-list .tag.selected[data-v-7bf44f69]{color:var(--primary-color);border:2px solid var(--primary-color)}

vue/dist/assets/_baseIteratee-e73bfe8e.js

@@ -0,0 +1 @@
+import{ce as M,ch as c,bw as _,ax as g,aS as d,ci as h,aU as E,cj as p,aR as y,cc as C}from"./index-43060d2f.js";function I(n){return function(r){return r==null?void 0:r[n]}}var L=1,w=2;function D(n,r,e,i){var t=e.length,a=t,A=!i;if(n==null)return!a;for(n=Object(n);t--;){var f=e[t];if(A&&f[2]?f[1]!==n[f[0]]:!(f[0]in n))return!1}for(;++t<a;){f=e[t];var u=f[0],s=n[u],o=f[1];if(A&&f[2]){if(s===void 0&&!(u in n))return!1}else{var R=new M;if(i)var l=i(s,o,u,n,r,R);if(!(l===void 0?c(o,s,L|w,i,R):l))return!1}}return!0}function O(n){return n===n&&!_(n)}function G(n){for(var r=g(n),e=r.length;e--;){var i=r[e],t=n[i];r[e]=[i,t,O(t)]}return r}function P(n,r){return function(e){return e==null?!1:e[n]===r&&(r!==void 0||n in Object(e))}}function F(n){var r=G(n);return r.length==1&&r[0][2]?P(r[0][0],r[0][1]):function(e){return e===n||D(e,n,r)}}function S(n,r,e){var i=n==null?void 0:d(n,r);return i===void 0?e:i}var x=1,U=2;function m(n,r){return h(n)&&O(r)?P(E(n),r):function(e){var i=S(e,n);return i===void 0&&i===r?p(e,n):c(r,i,x|U)}}function K(n){return function(r){return d(r,n)}}function N(n){return h(n)?I(E(n)):K(n)}function $(n){return typeof n=="function"?n:n==null?y:typeof n=="object"?C(n)?m(n[0],n[1]):F(n):N(n)}export{$ as b};

vue/dist/assets/db-c23bc74f.js

@@ -1 +1 @@
-import{bC as a}from"./index-a611bdd6.js";const n=async()=>(await a.get("/db/basic_info")).data,i=async()=>{await a.post("/db/update_image_data",{},{timeout:1/0})},o=async t=>(await a.get("/db/match_images_by_tags",{params:{tag_ids:t.join()}})).data;export{n as a,o as g,i as u};
+import{bC as a}from"./index-43060d2f.js";const n=async()=>(await a.get("/db/basic_info")).data,i=async()=>{await a.post("/db/update_image_data",{},{timeout:1/0})},o=async t=>(await a.get("/db/match_images_by_tags",{params:{tag_ids:t.join()}})).data;export{n as a,o as g,i as u};

vue/dist/index.html

@@ -7,7 +7,7 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
-    <script type="module" crossorigin src="/infinite_image_browsing/fe-static/assets/index-a611bdd6.js"></script>
+    <script type="module" crossorigin src="/infinite_image_browsing/fe-static/assets/index-43060d2f.js"></script>
     <link rel="stylesheet" href="/infinite_image_browsing/fe-static/assets/index-7059ac8b.css">
   </head>
 

vue/src/page/TagSearch/TagSearch.vue

@@ -4,7 +4,8 @@ import { getDbBasicInfo, updateImageData, type DataBaseBasicInfo, type Tag } fro
 import { FetchQueue, SearchSelect } from 'vue3-ts-util'
 import { CheckOutlined } from '@/icon'
 import { useGlobalStore } from '@/store/useGlobalStore'
-import { uniqueId } from 'lodash-es'
+import { groupBy, uniqueId } from 'lodash-es'
+import type { Dict } from '@/util'
 
 const props = defineProps<{ tabIdx: number, paneIdx: number }>()
 const global = useGlobalStore()
@@ -12,6 +13,13 @@ const queue = reactive(new FetchQueue(-1, 0, -1, 'throw'))
 const info = ref<DataBaseBasicInfo>()
 const selectedId = ref(new Set<number>())
 const tags = computed(() => info.value ? info.value.tags.slice().sort((a, b) => b.count - a.count) : [])
+const classSort = (["Model", "Sampler", "lora", "pos", "size"]).reduce((p, c, i) => {
+  p[c] = i
+  return p
+}, {} as Dict<number>)
+const classifyTags = computed(() => {
+  return Object.entries(groupBy(tags.value, v => v.type)).sort((a, b) => classSort[a[0]] - classSort[b[0]])
+})
 const pairid = uniqueId()
 onMounted(async () => {
   info.value = await getDbBasicInfo()
@@ -32,7 +40,7 @@ const query = () => {
   global.openTagSearchMatchedImageGridInRight(props.tabIdx, pairid, Array.from(selectedId.value))
 }
 
-const toTagDisplayName = (v: Tag) => v.display_name ? `${v.display_name} : ${v.name}` : v.name
+const toTagDisplayName = (v: Tag, withType = false) => (withType ? `[${v.type}] ` : '') + (v.display_name ? `${v.display_name} : ${v.name}` : v.name)
 
 </script>
 <template>
@@ -41,9 +49,9 @@ const toTagDisplayName = (v: Tag) => v.display_name ? `${v.display_name} : ${v.n
     <template v-if="info">
       <div>
         <div class="search-bar">
-          <SearchSelect :conv="{ value: v => v.id, text: toTagDisplayName, }" mode="multiple" style="width: 100%;"
-            :options="tags" :value="Array.from(selectedId)" placeholder="Select tags to match images"
-            @update:value="v => selectedId = new Set(v)" />
+          <SearchSelect :conv="{ value: v => v.id, text: toTagDisplayName, optionText: v => toTagDisplayName(v, true) }"
+            mode="multiple" style="width: 100%;" :options="tags" :value="Array.from(selectedId)"
+            placeholder="Select tags to match images" @update:value="v => selectedId = new Set(v)" />
           <AButton @click="onUpdateBtnClick" :loading="!queue.isIdle" type="primary"
             v-if="info.expired || !info.img_count">
             {{
@@ -52,13 +60,17 @@ const toTagDisplayName = (v: Tag) => v.display_name ? `${v.display_name} : ${v.n
           </AButton>
         </div>
       </div>
-      <ul class="tag-list">
-        <li v-for="tag in tags" :key="tag.id" class="tag " :class="{ selected: selectedId.has(tag.id) }"
-          @click="selectedId.has(tag.id) ? selectedId.delete(tag.id) : selectedId.add(tag.id)">
-          <CheckOutlined v-if="selectedId.has(tag.id)" />
-          {{ toTagDisplayName(tag) }}
-        </li>
-      </ul>
+      <div class="list-container">
+
+        <ul class="tag-list" v-for="([name, list]) in classifyTags" :key="name">
+          <h3 class="cat-name">{{ name }}</h3>
+          <li v-for="tag in list" :key="tag.id" class="tag " :class="{ selected: selectedId.has(tag.id) }"
+            @click="selectedId.has(tag.id) ? selectedId.delete(tag.id) : selectedId.add(tag.id)">
+            <CheckOutlined v-if="selectedId.has(tag.id)" />
+            {{ toTagDisplayName(tag) }}
+          </li>
+        </ul>
+      </div>
     </template>
   </div>
 </template>
@@ -80,10 +92,27 @@ const toTagDisplayName = (v: Tag) => v.display_name ? `${v.display_name} : ${v.n
     display: flex;
   }
 
+  .list-container {
+    background: var(--zp-secondary-variant-background);
+    overflow: scroll;
+  }
+
   .tag-list {
     list-style: none;
     padding: 0;
-    overflow: scroll;
+    margin: 16px;
+    border-radius: 16px;
+    background-color: var(--zp-tertiary-background);
+    padding: 8px;
+
+    .cat-name {
+      position: sticky;
+      top: 0;
+      padding: 4px 16px;
+      background: white;
+      border-left: 4px solid var(--primary-color);
+      margin: 4px;
+    }
 
     .tag {
       border: 2px solid var(--zp-secondary);