@@ -461,7 +531,7 @@
link.click();
}
- function waitForImage(apikeyVal, uuidValue) {
+ function waitForImage(apikeyVal, uuidValue, jobType) {
// Wait until image is done
$.ajax({
type: 'POST',
@@ -472,7 +542,7 @@
success: function (response) {
console.log(response);
if (response.jobs.length == 1) {
- if (response.jobs[0].type == 'txt') {
+ if (jobType == 'txt') {
$('#txt2ImgStatus').html(response.jobs[0].status);
$('#txt2ImgSeed').html(response.jobs[0].seed);
$('#txt2ImgJobUUID').html(uuidValue);
@@ -483,7 +553,7 @@
if (response.jobs[0].status == "failed") {
return;
}
- } else if (response.jobs[0].type == 'img') {
+ } else if (jobType == 'img') {
$('#img2ImgStatus').html(response.jobs[0].status);
$('#img2ImgSeed').html(response.jobs[0].seed);
$('#img2ImgJobUUID').html(uuidValue);
@@ -494,7 +564,18 @@
if (response.jobs[0].status == "failed") {
return;
}
- } else if (response.jobs[0].type == 'inpaint') {
+ } else if (jobType == 'draw') {
+ $('#drawingStatus').html(response.jobs[0].status);
+ $('#drawingSeed').html(response.jobs[0].seed);
+ $('#drawingJobUUID').html(uuidValue);
+ if (response.jobs[0].status == "done") {
+ $('#drawingImg').attr('src', response.jobs[0].img).attr('download', uuidValue + ".png");
+ return;
+ }
+ if (response.jobs[0].status == "failed") {
+ return;
+ }
+ } else if (jobType == 'inpaint') {
$('#inpaintStatus').html(response.jobs[0].status);
$('#inpaintSeed').html(response.jobs[0].seed);
$('#inpaintJobUUID').html(uuidValue);
@@ -507,11 +588,11 @@
}
}
}
- setTimeout(function () { waitForImage(apikeyVal, uuidValue); }, 1500); // refresh every 1.5 second
+ setTimeout(function () { waitForImage(apikeyVal, uuidValue, jobType); }, 1500); // refresh every 1.5 second
},
error: function (xhr, status, error) {
console.log(error);
- setTimeout(function () { waitForImage(apikeyVal, uuidValue); }, 1500); // refresh every 1.5 second
+ setTimeout(function () { waitForImage(apikeyVal, uuidValue, jobType); }, 1500); // refresh every 1.5 second
}
});
}
@@ -551,6 +632,13 @@
return result;
}
+
+ // Helper function to get input field value or a default value if empty
+ function getInputValue(id, defaultValue) {
+ var value = $(id).val().trim();
+ return value !== '' ? value : defaultValue;
+ }
+
$(document).ready(function () {
$(document).on("click", ".negative-prompt-example, .prompt-example", function () {
var clickedText = $(this).text();
@@ -620,7 +708,7 @@
$(document).on('click', '.downloadable-img', function () {
var img = $(this);
- downloadImage(img.attr('src'), img.attr('download') ? img.attr('download'): 'result.png');
+ downloadImage(img.attr('src'), img.attr('download') ? img.attr('download') : 'result.png');
});
// Cache variable to store the selected image data for img2img
@@ -782,7 +870,7 @@
});
- function submitJob(formData, uuidSelector, statusSelector) {
+ function submitJob(formData, uuidSelector, statusSelector, jobType) {
$.ajax({
type: 'POST',
url: '/add_job',
@@ -794,7 +882,7 @@
$(uuidSelector).html(response.uuid);
}
$(statusSelector).html('Submitting new job..');
- waitForImage(formData.apikey, response.uuid);
+ waitForImage(formData.apikey, response.uuid, jobType);
},
error: function (xhr, status, error) {
// Handle error response
@@ -806,19 +894,13 @@
$('#newTxt2ImgJob').click(function (e) {
e.preventDefault(); // Prevent the default form submission
- // Helper function to get input field value or a default value if empty
- function getInputValue(id, defaultValue) {
- var value = $(id).val().trim();
- return value !== '' ? value : defaultValue;
- }
-
// Validate input field values
var promptVal = getInputValue('#prompt', '');
var guidanceScaleVal = parseFloat(getInputValue('#inputGuidanceScale', '7.5'));
var stepsVal = parseInt(getInputValue('#inputSteps', '50'));
var widthVal = parseInt(getInputValue('#inputWidth', '512'));
var heightVal = parseInt(getInputValue('#inputHeight', '512'));
-
+
if (promptVal === '') {
alert("Missing prompt!");
return;
@@ -857,7 +939,7 @@
'is_private': $('#isPrivate').is(":checked") ? 1 : 0
};
- submitJob(formData, '#txt2ImgJobUUID', '#txt2ImgStatus');
+ submitJob(formData, '#txt2ImgJobUUID', '#txt2ImgStatus', 'txt');
});
$('#newImg2ImgJob').click(function (e) {
@@ -868,12 +950,6 @@
return;
}
- // Helper function to get input field value or a default value if empty
- function getInputValue(id, defaultValue) {
- var value = $(id).val().trim();
- return value !== '' ? value : defaultValue;
- }
-
// Validate input field values
var promptVal = getInputValue('#prompt', '');
var guidanceScaleVal = parseFloat(getInputValue('#inputGuidanceScale', '25.0'));
@@ -932,7 +1008,98 @@
'is_private': $('#isPrivate').is(":checked") ? 1 : 0
};
- submitJob(formData, '#img2ImgJobUUID', '#img2ImgStatus');
+ submitJob(formData, '#img2ImgJobUUID', '#img2ImgStatus', 'img');
+ });
+
+
+ $('#newDrawingJob').click(function (e) {
+ e.preventDefault(); // Prevent the default form submission
+
+ // Validate input field values
+ var promptVal = getInputValue('#prompt', '');
+ var guidanceScaleVal = parseFloat(getInputValue('#inputGuidanceScale', '25.0'));
+ var stepsVal = parseInt(getInputValue('#inputSteps', '50'));
+ var widthVal = parseInt(getInputValue('#inputWidth', '512'));
+ var heightVal = parseInt(getInputValue('#inputHeight', '512'));
+
+ if (promptVal === '') {
+ alert("Missing prompt!");
+ return;
+ }
+
+ if (guidanceScaleVal < 1 || guidanceScaleVal > 30) {
+ alert("Guidance scale must be between 1 and 30!");
+ return;
+ }
+
+ if (widthVal < 8 || widthVal > 960 || widthVal % 8 !== 0) {
+ alert("Width must be between 8 and 960 and divisible by 8!");
+ return;
+ }
+
+ if (heightVal < 8 || heightVal > 960 || heightVal % 8 !== 0) {
+ alert("Height must be between 8 and 960 and divisible by 8!");
+ return;
+ }
+
+ var apikeyVal = $('#apiKey').val();
+ var negPromptVal = $('#negPrompt').val();
+ var seedVal = $('#inputSeed').val();
+
+ if (seedVal == "0" || seedVal == "") {
+ seedVal = "0";
+ }
+
+ var strengthVal = parseFloat(getInputValue('#inputStrength', '0.5'));
+
+ if (strengthVal < 0 || strengthVal > 1) {
+ alert("Strength must be between 0 and 1!");
+ return;
+ }
+
+ var canvas = $('#drawing-img-mask')[0];
+ var ctx = canvas.getContext('2d');
+ var sketchImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+ // Loop through the pixels and change the colors
+ for (var i = 0; i < sketchImageData.data.length; i += 4) {
+ if (sketchImageData.data[i + 3] == 0) { // If pixel is transparent, change to white
+ sketchImageData.data[i] = 255;
+ sketchImageData.data[i + 1] = 255;
+ sketchImageData.data[i + 2] = 255;
+ sketchImageData.data[i + 3] = 255;
+ } else { // If pixel is not transparent, change to black
+ sketchImageData.data[i] = 0;
+ sketchImageData.data[i + 1] = 0;
+ sketchImageData.data[i + 2] = 0;
+ sketchImageData.data[i + 3] = 255;
+ }
+ }
+
+ var tempCanvas = document.createElement('canvas'); // Create a new canvas element
+ tempCanvas.width = canvas.width; // Set the width of the new canvas to match the original canvas
+ tempCanvas.height = canvas.height; // Set the height of the new canvas to match the original canvas
+ var tempCtx = tempCanvas.getContext('2d');
+ tempCtx.putImageData(sketchImageData, 0, 0); // Put modified image data onto the new canvas
+ var drawingSketchImg = tempCanvas.toDataURL(); // Get the modified base64-encoded image data
+
+ var formData = {
+ 'apikey': apikeyVal,
+ 'type': 'img',
+ 'ref_img': drawingSketchImg,
+ 'prompt': promptVal,
+ 'seed': seedVal,
+ 'steps': stepsVal,
+ 'width': widthVal,
+ 'height': heightVal,
+ 'lang': $("#language option:selected").val(),
+ 'guidance_scale': guidanceScaleVal,
+ 'strength': strengthVal,
+ 'neg_prompt': negPromptVal,
+ 'is_private': $('#isPrivate').is(":checked") ? 1 : 0
+ };
+
+ submitJob(formData, '#drawingJobUUID', '#drawingStatus', 'draw');
});
$('#newInpaintingJob').click(function (e) {
@@ -969,11 +1136,6 @@
tempCtx.putImageData(maskImageData, 0, 0); // Put modified image data onto the new canvas
var inpaintMaskImg = tempCanvas.toDataURL(); // Get the modified base64-encoded image data
- // Helper function to get input field value or a default value if empty
- function getInputValue(id, defaultValue) {
- var value = $(id).val().trim();
- return value !== '' ? value : defaultValue;
- }
// Validate input field values
var apikeyVal = $('#apiKey').val();
@@ -1021,7 +1183,7 @@
'is_private': $('#isPrivate').is(":checked") ? 1 : 0
};
- submitJob(formData, '#inpaintJobUUID', '#inpaintStatus');
+ submitJob(formData, '#inpaintJobUUID', '#inpaintStatus', 'inpaint');
});
// Define the function to update the text based on the selected language
@@ -1099,10 +1261,10 @@
$("#inpaint-strike-size").on("input", function () {
var strikeSize = $(this).val();
- $('#range-value').val(strikeSize);
+ $('#inpaint-range-value').val(strikeSize);
$("#inpaint-strike-size").trigger("inputChange", strikeSize);
});
- $('#range-value').val($('#inpaint-strike-size').val());
+ $('#inpaint-range-value').val($('#inpaint-strike-size').val());
$("#inpaint-img").on("change", function () {
var src = $(this).attr("src");
@@ -1131,6 +1293,53 @@
$sketcher.sketchable('config', { graphics: { lineWidth: strikeSize } });
});
});
+
+ $("#drawing-strike-size").on("input", function () {
+ var strikeSize = $(this).val();
+ $('#drawing-range-value').val(strikeSize);
+ $("#drawing-strike-size").trigger("inputChange", strikeSize);
+ });
+ $('#drawing-range-value').val($('#drawing-strike-size').val());
+
+ $(document).on('change', "#inputWidth, #inputHeight", function () {
+ var widthVal = parseInt(getInputValue('#inputWidth', '512'));
+ var heightVal = parseInt(getInputValue('#inputHeight', '512'));
+ if (widthVal < 8 || widthVal > 960 || widthVal % 8 !== 0) {
+ alert("Width must be between 8 and 960 and divisible by 8!");
+ return;
+ }
+
+ if (heightVal < 8 || heightVal > 960 || heightVal % 8 !== 0) {
+ alert("Height must be between 8 and 960 and divisible by 8!");
+ return;
+ }
+
+ $("#drawing-mask-canvas-container").html("