Real per-step progress bars for local GPU inference
Backend: - local_diffusion.py: add _make_step_cb() that writes step/total_steps/ progress into _states on every diffusers callback_on_step_end; wired into txt2img, inpaint, img2img with TypeError fallback for older diffusers - ai_tools.py: GET /api/generate/progress SSE endpoint — streams _states as JSON array every 200ms so clients get live denoising step counts Frontend: - progress_overlay.js: add connectProgressSSE(pipeType, baseUrl) / disconnectProgressSSE() — opens EventSource, maps step/total_steps to bar percentage (0→85% during denoising, 85→100 for decode/place) - text_to_image.js: connect SSE before POST, disconnect on done/error - selection_actions.js: connect SSE for AI edit / asymmetry operations Result: for local GPU, progress bar shows "Step 12 / 30" with exact fill; for remote providers and upscale (no step callbacks), shimmer animates. https://claude.ai/code/session_01WVDg7amsy1TTtxvpku7bcM
This commit is contained in:
@@ -18,7 +18,7 @@ import app from './../app.js';
|
||||
import config from './../config.js';
|
||||
import Base_layers_class from './../core/base-layers.js';
|
||||
import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
|
||||
import { showProgress, hideProgress } from './../libs/progress_overlay.js';
|
||||
import { showProgress, updateProgress, hideProgress, connectProgressSSE, disconnectProgressSSE } from './../libs/progress_overlay.js';
|
||||
|
||||
const BASE = window.API_BASE_URL || '';
|
||||
|
||||
@@ -196,6 +196,7 @@ export class SelectionActions {
|
||||
async _makeAsymmetric() {
|
||||
if (!this._check()) return;
|
||||
this.hide();
|
||||
connectProgressSSE('inpaint', window.API_BASE_URL || '');
|
||||
showProgress('AI is adding natural asymmetry…', 60);
|
||||
try {
|
||||
var res = await _post('/api/image/ai-edit-region', {
|
||||
@@ -208,9 +209,11 @@ export class SelectionActions {
|
||||
});
|
||||
this.tool.updateLayerWithResult(res.result);
|
||||
this.tool.clearSelection();
|
||||
disconnectProgressSSE();
|
||||
hideProgress();
|
||||
alertify.success('Made less symmetrical!');
|
||||
} catch (e) {
|
||||
disconnectProgressSSE();
|
||||
hideProgress();
|
||||
alertify.error('AI edit failed: ' + e.message);
|
||||
}
|
||||
@@ -219,6 +222,7 @@ export class SelectionActions {
|
||||
async _aiEditRegion(instruction) {
|
||||
if (!this._check()) return;
|
||||
this.hide();
|
||||
connectProgressSSE('inpaint', window.API_BASE_URL || '');
|
||||
showProgress('AI is editing the region…', 60);
|
||||
try {
|
||||
var res = await _post('/api/image/ai-edit-region', {
|
||||
@@ -230,9 +234,11 @@ export class SelectionActions {
|
||||
});
|
||||
this.tool.updateLayerWithResult(res.result);
|
||||
this.tool.clearSelection();
|
||||
disconnectProgressSSE();
|
||||
hideProgress();
|
||||
alertify.success('Done!');
|
||||
} catch (e) {
|
||||
disconnectProgressSSE();
|
||||
hideProgress();
|
||||
alertify.error('AI edit failed: ' + e.message);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user