mirror of
https://github.com/vladmandic/automatic
synced 2026-09-06 13:00:44 +02:00
add more job state updates and update history tab
Signed-off-by: Vladimir Mandic <mandic00@live.com>
This commit is contained in:
Vladimir Mandic
@@ -44,7 +44,6 @@ async function updateGPU() {
|
||||
}
|
||||
const gpuTbody = gpuTable.querySelector('tbody');
|
||||
for (const gpu of data) {
|
||||
console.log(gpu);
|
||||
let rows = `<tr><td>GPU</td><td>${gpu.name}</td></tr>`;
|
||||
for (const item of Object.entries(gpu.data)) rows += `<tr><td>${item[0]}</td><td>${item[1]}</td></tr>`;
|
||||
gpuTbody.innerHTML = rows;
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
const inferenceTypes = ['inference', 'vae', 'te'];
|
||||
const ioTypes = ['load', 'save'];
|
||||
|
||||
function refreshHistory() {
|
||||
log('refreshHistory');
|
||||
fetch(`${window.api}/history`, { priority: 'low' }).then((res) => {
|
||||
const timeline = document.getElementById('history_timeline');
|
||||
const table = document.getElementById('history_table');
|
||||
timeline.innerHTML = '';
|
||||
res.json().then((data) => {
|
||||
if (!data || !data.length) {
|
||||
table.innerHTML = '<p>No history data available.</p>';
|
||||
@@ -37,10 +41,13 @@ function refreshHistory() {
|
||||
if (entry.op === 'begin') {
|
||||
const start = entry.timestamp;
|
||||
const end = data.find((e) => (e.id === entry.id && e.op === 'end')) || data[data.length - 1].timestamp;
|
||||
ts.push({ start, end: end.timestamp, label: entry.job, type: '' });
|
||||
if (end.timestamp - start < 0.02) continue; // skip very short entries
|
||||
if (inferenceTypes.some((type) => entry.job.toLowerCase().startsWith(type))) entry.type = 'inference';
|
||||
else if (ioTypes.some((type) => entry.job.toLowerCase().startsWith(type))) entry.type = 'io';
|
||||
else entry.type = 'default';
|
||||
ts.push({ start, end: end.timestamp, label: entry.job, type: entry.type });
|
||||
}
|
||||
}
|
||||
timeline.innerHTML = '';
|
||||
if (!ts.length) return;
|
||||
new Timesheet(timeline, ts); // eslint-disable-line no-undef, no-new
|
||||
});
|
||||
|
||||
@@ -7,36 +7,6 @@
|
||||
background-color: var(--sd-main-background-color);
|
||||
position: relative;
|
||||
}
|
||||
.timesheet.color-scheme-default .bubble-default {
|
||||
background-color: RGBA(252, 70, 74, 1);
|
||||
}
|
||||
.timesheet.color-scheme-default .bubble-lorem {
|
||||
background-color: RGBA(154, 202, 39, 1);
|
||||
}
|
||||
.timesheet.color-scheme-default .bubble-ipsum {
|
||||
background-color: RGBA(60, 182, 227, 1);
|
||||
}
|
||||
.timesheet.color-scheme-default .bubble-dolor {
|
||||
background-color: RGBA(244, 207, 48, 1);
|
||||
}
|
||||
.timesheet.color-scheme-default .bubble-sit {
|
||||
background-color: RGBA(169, 105, 202, 1);
|
||||
}
|
||||
.timesheet.color-scheme-alternative .bubble-default {
|
||||
background-color: #f3552e;
|
||||
}
|
||||
.timesheet.color-scheme-alternative .bubble-lorem {
|
||||
background-color: #88c33a;
|
||||
}
|
||||
.timesheet.color-scheme-alternative .bubble-ipsum {
|
||||
background-color: #436ae0;
|
||||
}
|
||||
.timesheet.color-scheme-alternative .bubble-dolor {
|
||||
background-color: #f4d234;
|
||||
}
|
||||
.timesheet.color-scheme-alternative .bubble-sit {
|
||||
background-color: #707d86;
|
||||
}
|
||||
.timesheet .scale {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
@@ -52,7 +22,8 @@
|
||||
line-height: 24px;
|
||||
font-weight: lighter;
|
||||
border-left: 1px dashed rgba(250, 250, 250, 0.2);
|
||||
height: 100%}
|
||||
height: 100%;
|
||||
}
|
||||
.timesheet .data {
|
||||
margin: 10px 0 10px 0;
|
||||
padding: 0;
|
||||
@@ -93,29 +64,16 @@
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 7px;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
margin: 0 10px 0 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.bubble-default {
|
||||
background: var(--sd-main-accent-color);
|
||||
}
|
||||
#timesheet-alternative {
|
||||
background-color: RGBA(247, 247, 247, 1);
|
||||
border-radius: 5px;
|
||||
.bubble-inference {
|
||||
background-color: violet;
|
||||
}
|
||||
#timesheet-alternative section {
|
||||
color: RGBA(63, 68, 72, 1);
|
||||
border-left: 1px dashed RGBA(63, 68, 72, 0.2);
|
||||
}
|
||||
#timesheet-alternative section:first-child {
|
||||
border-left: 1px dashed transparent;
|
||||
}
|
||||
#timesheet-alternative .date {
|
||||
display: none;
|
||||
}
|
||||
#timesheet-alternative .bubble {
|
||||
margin-right: 7px;
|
||||
}
|
||||
#timesheet-alternative .label {
|
||||
padding-left: 0px;
|
||||
color: RGBA(48, 48, 48, 1);
|
||||
.bubble-io {
|
||||
background-color: rgb(75, 75, 150);
|
||||
}
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
/* eslint max-classes-per-file: ["error", 2] */
|
||||
|
||||
class Bubble {
|
||||
constructor(min, start, end, label, scale) {
|
||||
constructor(min, start, end, label, scale, type) {
|
||||
this.type = type;
|
||||
this.label = label;
|
||||
this.min = min;
|
||||
this.start = start;
|
||||
this.end = end;
|
||||
this.scale = scale;
|
||||
this.offset = Math.round(this.scale * (this.start - this.min));
|
||||
this.width = Math.round(this.scale * (this.end - this.start));
|
||||
this.label = label;
|
||||
this.duration = Math.round(1000 * (this.end - this.start)) / 1000;
|
||||
this.title = `Job: ${this.label}\nDuration: ${this.duration}s\nStart: ${new Date(1000 * this.start).toLocaleString()}\nEnd: ${new Date(1000 * this.end).toLocaleString()}`;
|
||||
}
|
||||
@@ -38,11 +39,11 @@ class Timesheet {
|
||||
html = [];
|
||||
for (let n = 0, m = this.data.length; n < m; n++) {
|
||||
const cur = this.data[n];
|
||||
const bubble = new Bubble(this.min, cur.start, cur.end, cur.label, this.scale);
|
||||
const bubble = new Bubble(this.min, cur.start, cur.end, cur.label, this.scale, cur.type);
|
||||
const line = [
|
||||
`<span title="${bubble.title}" style="margin-left: ${bubble.offset}px; width: ${bubble.width}px;" class="bubble" data-duration="${bubble.duration}"></span>`,
|
||||
`<span class="date">${bubble.duration}</span> `,
|
||||
`<span class="label">${bubble.label}</span>`,
|
||||
`<span title="${bubble.title}" style="margin-left: ${bubble.offset}px; width: ${bubble.width}px;" class="bubble bubble-${bubble.type}" data-duration="${bubble.duration}"></span>`,
|
||||
`<span class="date" title="${bubble.title}">${bubble.duration}</span> `,
|
||||
`<span class="label" title="${bubble.title}">${bubble.label}</span>`,
|
||||
].join('');
|
||||
html.push(`<li>${line}</li>`);
|
||||
}
|
||||
|
||||
@@ -189,7 +189,6 @@ function get_tab_index(tabId) {
|
||||
.forEach((button, i) => {
|
||||
if (button.className.indexOf('selected') !== -1) res = i;
|
||||
});
|
||||
console.log('get_tab_index', tabId, res);
|
||||
return res;
|
||||
}
|
||||
|
||||
@@ -297,7 +296,6 @@ function submit_video_wrapper(...args) {
|
||||
log('submitVideoWrapper', id);
|
||||
const btn = gradioApp().getElementById(`${id}_generate_btn`);
|
||||
if (btn) btn.click();
|
||||
else console.log('submit_video_wrapper: no button found', id);
|
||||
}
|
||||
|
||||
function submit_postprocessing(...args) {
|
||||
|
||||
Reference in New Issue
Block a user