Skip to content

Allow saving generated ControlNet previews #1364

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jtreminio wants to merge 4 commits into
base: master
Choose a base branch
from
+50 −6
Open

Allow saving generated ControlNet previews #1364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6ad69f7
Allow saving generated ControlNet previews
jtreminio May 2, 2026
1a2b5b3
Save to root inputs/controlnet
jtreminio May 6, 2026
423d77e
Use controlnet video fps when saving preview; pull from correct locat…
jtreminio May 10, 2026
ed7b280
Rollback FPS sync
jtreminio May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Text2Image/T2IParamTypes.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1125,7 +1125,7 @@ public static string ValidateParam(T2IParamType type, string val, Session sessio

public static string FilePathToDataString(Session session, string filePath, string errorContext)
{
string root = WebServer.GetUserOutputRoot(session.User);
string root = Utilities.CombinePathWithAbsolute(Environment.CurrentDirectory, session.User.OutputDirectory);
Copy link
Copy Markdown
Contributor Author

@jtreminio jtreminio May 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selecting from the "Select" modal would try to pull from the wrong location when generating workflow.

(string path, string consoleError, string userError) = WebServer.CheckFilePath(root, filePath);
if (consoleError is not null)
{
Expand Down
54 changes: 49 additions & 5 deletions src/wwwroot/js/genpage/gentab/params.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -814,7 +814,7 @@ function genInputs(delay_final = false) {
let controlnetGroup = document.getElementById('input_group_content_controlnet');
if (controlnetGroup) {
let firstGroup = controlnetGroup.querySelector('.input-group');
let buttonDiv = createDiv(`controlnet_button_preview`, null, `<button class="basic-button" onclick="controlnetShowPreview()">Preview</button>`);
let buttonDiv = createDiv(`controlnet_button_preview`, null, `<button class="basic-button" onclick="controlnetShowPreview()">Preview</button> <button class="basic-button" onclick="controlnetSavePreviewToServer()">Save to Server</button>`);
if (firstGroup) {
controlnetGroup.insertBefore(buttonDiv, firstGroup);
}
Expand Down Expand Up @@ -1452,7 +1452,7 @@ function debugShowHiddenParams() {
}

/** Loads and shows a preview of ControlNet preprocessing to the user. */
function controlnetShowPreview() {
function controlnetShowPreview(callback) {
let toggler = getRequiredElementById('input_group_content_controlnet_toggle');
if (!toggler.checked) {
toggler.checked = true;
Expand All @@ -1465,10 +1465,10 @@ function controlnetShowPreview() {
}
let previewArea = getRequiredElementById('controlnet_button_preview');
let clearPreview = () => {
let lastResult = previewArea.querySelector('.controlnet-preview-result');
if (lastResult) {
lastResult.remove();
for (let result of previewArea.querySelectorAll('.controlnet-preview-result, .controlnet-save-result')) {
result.remove();
}
delete previewArea.dataset.controlnetPreviewImage;
};
clearPreview();
let imgInput = getRequiredElementById('input_controlnetimageinput');
Expand Down Expand Up @@ -1510,11 +1510,55 @@ function controlnetShowPreview() {
resultBox.append(imgElem);
}
clearPreview();
previewArea.dataset.controlnetPreviewImage = data.image;
previewArea.append(resultBox);
if (callback) {
callback(data);
}
});
});
}

/** Saves a ControlNet preview data URL through the existing history save route. */
function controlnetSavePreviewDataToServer(image) {
let now = new Date();
let pad = (val) => `${val}`.padStart(2, '0');
let millis = `${now.getMilliseconds()}`.padStart(3, '0');
let name = `controlnet-preview-${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}_${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}-${millis}`;
let data = {
image: image,
['Override Outpath Format']: `inputs/controlnet/${name}`
};
genericRequest('AddImageToHistory', data, res => {
let previewArea = getRequiredElementById('controlnet_button_preview');
let oldSaveResult = previewArea.querySelector('.controlnet-save-result');
if (oldSaveResult) {
oldSaveResult.remove();
}
let saveResult = createDiv(null, 'controlnet-save-result modal_success_bottom', 'Saved ControlNet preview.');
previewArea.append(saveResult);
setTimeout(() => {
saveResult.remove();
}, 5000);
});
}

/** Saves the current ControlNet preview, generating it first if needed. */
function controlnetSavePreviewToServer() {
let previewArea = getRequiredElementById('controlnet_button_preview');
let image = previewArea.dataset.controlnetPreviewImage;
if (image) {
controlnetSavePreviewDataToServer(image);
return;
}
controlnetShowPreview(data => {
if (!data || !data.image) {
return;
}
controlnetSavePreviewDataToServer(data.image);
});
}

/** Gets the parameter with a given ID, from either the current param set, or the raw set from server. If unavailable, returns null. */
function getParamById(id) {
if (!gen_param_types) {
Expand Down
Loading