DemonGatanjieuandClaude Opus 5.5
6374c914b5
With many models, or models on a network drive, every visit to the scan page read every folder and, after a restart, every new model's header again (79 s for 1041 models on an AutoDL model disk). api/model_heads.py keeps what each file's header says by real path, size and time in user/anomalous/model_heads.json (at most 50,000 files, the longest unused dropped first, written a few seconds after the last change, only once setup_routes called keep_on_disk); get_metadata reads headers through it, so a header is read once per file version. scan_summary keeps the last summary (memory, and scan_summary.json when it changed); ?quick=1 hands it out at once and the page shows it with "showing the last counts while they are updated", then the fresh ones. Requests meanwhile await one count (_fresh). The models found on Civitai (components apart, at most 5000 kept) are listed by GET /anomalous/scan_matched; the page's "Found on Civitai" count opens them, with Civitai's name, base model, a box to find one by name and Open. Checked on the isolated ComfyUI reading the real loras and checkpoints read-only (scans stubbed; no file there changed): the last counts showed at once also after a restart, the fresh ones replaced them, the found list had 68 models with names, the box filtered, Open and Back returned to it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
553 lines
12 KiB
CSS
553 lines
12 KiB
CSS
/* The scan settings' model picker (ui_scan_picker.js): folders on the left, then the state
|
|
chips, what to do with the shown models, and the models as a list or as covers. */
|
|
|
|
.anomalous-pick-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000001;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
background: var(--amb-lt-scrim, rgba(0, 0, 0, 0.6));
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-pick-dialog {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: min(1180px, 100%);
|
|
height: min(880px, 100%);
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 14px;
|
|
background: var(--amb-bg-panel, var(--amb-bg-card));
|
|
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
|
|
color: var(--amb-text-main);
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-pick-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--amb-border);
|
|
}
|
|
|
|
.anomalous-pick-title {
|
|
margin: 0 8px 0 0;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-pick-search {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
max-width: 380px;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 9px;
|
|
background: var(--amb-bg-input);
|
|
color: var(--amb-text-main);
|
|
font-size: 14px;
|
|
outline: none;
|
|
}
|
|
|
|
.anomalous-pick-search:focus {
|
|
border-color: color-mix(in srgb, var(--amb-link) 55%, transparent);
|
|
}
|
|
|
|
.anomalous-pick-views {
|
|
display: inline-flex;
|
|
margin-left: auto;
|
|
padding: 3px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 9px;
|
|
background: var(--amb-bg-sunken);
|
|
}
|
|
|
|
.anomalous-pick-view {
|
|
padding: 5px 12px;
|
|
border: none;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-pick-view.is-on {
|
|
background: color-mix(in srgb, var(--amb-link) 18%, transparent);
|
|
color: var(--amb-text-main);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-pick-close {
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-pick-close:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.08);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-pick-body {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Folders: each with its model count, and how many are picked in it. */
|
|
.anomalous-pick-folders {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
flex: 0 0 230px;
|
|
padding: 10px 8px;
|
|
border-right: 1px solid var(--amb-border);
|
|
background: var(--amb-bg-sunken);
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-pick-folder {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 10px;
|
|
border: none;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font-size: 13px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-pick-folder.is-root {
|
|
margin-top: 8px;
|
|
color: var(--amb-text-soft);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-pick-folder:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.anomalous-pick-folder:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.05);
|
|
}
|
|
|
|
.anomalous-pick-folder.is-on {
|
|
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-pick-folder-name {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-pick-folder-count {
|
|
color: var(--amb-text-dim);
|
|
font-size: 12px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.anomalous-pick-folder-picked {
|
|
min-width: 18px;
|
|
padding: 0 6px;
|
|
border-radius: 999px;
|
|
background: var(--amb-btn-primary-bg);
|
|
color: var(--amb-btn-primary-text);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-pick-main {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-pick-note {
|
|
margin: 10px 16px 0;
|
|
color: var(--amb-warn-text);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* The states, each with how many of the shown models have it. */
|
|
.anomalous-pick-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
padding: 12px 16px 0;
|
|
}
|
|
|
|
.anomalous-pick-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 12px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-pick-chip strong {
|
|
color: var(--amb-text-main);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.anomalous-pick-chip:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.05);
|
|
}
|
|
|
|
.anomalous-pick-chip.is-on {
|
|
border-color: color-mix(in srgb, var(--amb-link) 55%, transparent);
|
|
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-pick-chip.is-new strong { color: var(--amb-link); }
|
|
.anomalous-pick-chip.is-damaged strong { color: var(--amb-danger-text); }
|
|
.anomalous-pick-chip.is-matched strong { color: var(--amb-ok-text); }
|
|
|
|
.anomalous-pick-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 16px;
|
|
border-bottom: 1px solid var(--amb-border);
|
|
}
|
|
|
|
.anomalous-pick-only {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-left: 6px;
|
|
color: var(--amb-text-soft);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-pick-link {
|
|
margin-left: auto;
|
|
padding: 4px 6px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--amb-link);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-scan-actions .anomalous-pick-link {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.anomalous-pick-link:disabled {
|
|
color: var(--amb-text-dim);
|
|
cursor: default;
|
|
}
|
|
|
|
.anomalous-pick-list {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
padding: 8px 12px 16px;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-pick-list.is-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.anomalous-pick-list.is-covers {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
grid-auto-rows: max-content;
|
|
align-content: start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.anomalous-pick-empty {
|
|
grid-column: 1 / -1;
|
|
margin: 40px 0;
|
|
color: var(--amb-text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.anomalous-pick-more {
|
|
grid-column: 1 / -1;
|
|
height: 1px;
|
|
}
|
|
|
|
/* One model: its check, cover, name and where it is, then its state, base model and size. */
|
|
.anomalous-pick-row {
|
|
display: grid;
|
|
grid-template-columns: 20px 40px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 6px 10px;
|
|
border: 1px solid transparent;
|
|
border-radius: 9px;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.anomalous-pick-row:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.05);
|
|
}
|
|
|
|
.anomalous-pick-row.is-picked {
|
|
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
|
|
background: color-mix(in srgb, var(--amb-link) 10%, transparent);
|
|
}
|
|
|
|
.anomalous-pick-check {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid var(--amb-border-strong);
|
|
border-radius: 50%;
|
|
color: transparent;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-pick-row.is-picked .anomalous-pick-check {
|
|
border-color: var(--amb-link);
|
|
background: var(--amb-link);
|
|
color: var(--amb-bg-panel, #000);
|
|
}
|
|
|
|
.anomalous-pick-cover {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 7px;
|
|
background: var(--amb-bg-sunken);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.anomalous-pick-cover img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.anomalous-pick-names {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-pick-name,
|
|
.anomalous-pick-path {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-pick-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-pick-path {
|
|
color: var(--amb-text-dim);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* In the list, the same columns on every row (a model without a base model leaves its column empty). */
|
|
.anomalous-pick-facts {
|
|
display: grid;
|
|
grid-template-columns: 76px 130px 68px;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-pick-state {
|
|
justify-self: start;
|
|
}
|
|
|
|
.anomalous-pick-state {
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
background: rgba(var(--amb-ink-rgb), 0.06);
|
|
color: var(--amb-text-muted);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-pick-state.is-new {
|
|
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
|
|
color: var(--amb-link);
|
|
}
|
|
|
|
.anomalous-pick-state.is-damaged {
|
|
background: color-mix(in srgb, var(--amb-danger-text) 16%, transparent);
|
|
color: var(--amb-danger-text);
|
|
}
|
|
|
|
.anomalous-pick-state.is-matched {
|
|
background: color-mix(in srgb, var(--amb-ok-text) 14%, transparent);
|
|
color: var(--amb-ok-text);
|
|
}
|
|
|
|
.anomalous-pick-base {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--amb-text-soft);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-pick-size {
|
|
min-width: 64px;
|
|
color: var(--amb-text-dim);
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* As covers: the cover on top, the check in its corner, the state and size under the name. */
|
|
.is-covers .anomalous-pick-row {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 6px;
|
|
padding: 6px;
|
|
border-color: var(--amb-border);
|
|
}
|
|
|
|
.is-covers .anomalous-pick-check {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
z-index: 1;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
border-color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.is-covers .anomalous-pick-cover {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 2 / 3;
|
|
}
|
|
|
|
.is-covers .anomalous-pick-path,
|
|
.is-covers .anomalous-pick-base {
|
|
display: none;
|
|
}
|
|
|
|
.is-covers .anomalous-pick-facts {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.is-covers .anomalous-pick-size {
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-pick-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 18px;
|
|
border-top: 1px solid var(--amb-border);
|
|
}
|
|
|
|
.anomalous-pick-summary {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-pick-hint {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--amb-text-dim);
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.anomalous-pick-overlay { padding: 8px; }
|
|
.anomalous-pick-head { flex-wrap: wrap; }
|
|
.anomalous-pick-title { flex: 1 1 100%; }
|
|
.anomalous-pick-folders { display: none; }
|
|
.anomalous-pick-base, .anomalous-pick-hint { display: none; }
|
|
}
|
|
|
|
/* The scan page's lists: the box to find a model among those found on Civitai. */
|
|
.anomalous-scan-card > .anomalous-pick-search {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: none;
|
|
margin: 0 0 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* The last counts shown while fresh ones are worked out. */
|
|
.anomalous-scan-updating {
|
|
margin: 0;
|
|
color: var(--amb-text-muted);
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.anomalous-scan-updating::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 7px;
|
|
height: 7px;
|
|
margin-right: 8px;
|
|
border-radius: 50%;
|
|
background: var(--amb-link);
|
|
vertical-align: middle;
|
|
animation: anomalous-scan-updating 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes anomalous-scan-updating {
|
|
50% { opacity: 0.25; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.anomalous-scan-updating::before { animation: none; }
|
|
}
|