" +
+ var isPrivate = response.jobs[i].is_private;
+ var element = $("");
+ // Add event handler for click to toggle blurriness
+ if (isPrivate === 1) {
+ element.find('.card').addClass('private-card');
+ element.append("");
+
+ element.on('click', function (event) {
+ if ($(event.target).hasClass('negative-prompt-example') || $(event.target).hasClass('prompt-example')) {
+ return; // Ignore the click event for those elements
+ }
+ $(this).find('.card').toggleClass('private-card');
+ $(this).find('.reveal-text').toggle();
+ });
+ }
+ $grid.append(element);
+ };
+ $grid.imagesLoaded().progress(function () {
+ $grid.masonry({
+ itemSelector: '.col',
+ columnWidth: '.col',
+ percentPosition: true
+ });
+ });
+
+ },
+ error: function (xhr, status, error) {
+ // Handle error response
+ console.log(xhr.responseText);
+ $('#joblist').html("found nothing");
+ }
+ });
+ });
+
+ $('#feelingLucky').click(function () {
+ $.ajax({
+ type: 'GET',
+ url: '/random_jobs',
+ contentType: 'application/json; charset=utf-8',
+ dataType: 'json',
+ success: function (response) {
+ var jobsLength = response.jobs.length;
+ if (jobsLength == 0) {
+ $('#joblist').html("found nothing");
+ return;
+ }
+
+ var $joblist = $('#joblist');
+ var $grid = $('');
+ $joblist.html($grid);
+ for (var i = 0; i < jobsLength; i++) {
+ var element = ("")
$grid.append(element);
};
@@ -542,71 +667,14 @@
});
});
- function shuffle(arr) {
- var j, x, index;
- for (index = arr.length - 1; index > 0; index--) {
- j = Math.floor(Math.random() * (index + 1));
- x = arr[index];
- arr[index] = arr[j];
- arr[j] = x;
- }
- return arr;
- }
- $('#feelingLucky').click(function () {
- $.ajax({
- type: 'GET',
- url: '/random_jobs',
- contentType: 'application/json; charset=utf-8',
- dataType: 'json',
- success: function (response) {
- var jobsLength = response.jobs.length;
- if (jobsLength == 0) {
- $('#joblist').html("found nothing");
- return;
- }
- var shuffled = response.jobs.map(value => ({ value, sort: Math.random() })).sort((a, b) => a.sort - b.sort).map(({ value }) => value)
-
- var $joblist = $('#joblist');
- var $grid = $('');
- $joblist.html($grid);
- for (var i = 0; i < jobsLength; i++) {
- var element = ("")
- $grid.append(element);
- };
- $grid.imagesLoaded().progress(function () {
- $grid.masonry({
- itemSelector: '.col',
- columnWidth: '.col',
- percentPosition: true
- });
- });
-
- },
- error: function (xhr, status, error) {
- // Handle error response
- console.log(xhr.responseText);
- $('#joblist').html("found nothing");
- }
- });
- });
-
$("#upload-img").click(function () {
- var input = $("");
- input.on("change", function () {
+ var input = $("").on("change", function () {
var reader = new FileReader();
reader.onload = function (e) {
imageData = e.target.result;
$("#reference-img").attr("src", imageData);
};
- reader.readAsDataURL(input[0].files[0]);
+ reader.readAsDataURL(this.files[0]);
});
input.click();
});
@@ -630,221 +698,165 @@
localStorage.setItem('activeLink', target);
});
- $('#newTxt2ImgJob').click(function (e) {
- e.preventDefault(); // Prevent the default form submission
-
- // Gather input field values
- var apikeyVal = $('#apiKey').val();
- var promptVal = $('#prompt').val();
- var negPromptVal = $('#negPrompt').val();
- var seedVal = $('#inputSeed').val();
- if (seedVal == "0" || seedVal == "") {
- seedVal = "0";
- }
- var guidanceScaleVal = parseFloat($('#inputGuidanceScale').val())
- if (isNaN(guidanceScaleVal)) {
- guidanceScaleVal = 7.5;
- }
- var stepsVal = parseInt($('#inputSteps').val());
- if (isNaN(stepsVal)) {
- stepsVal = 50;
- }
- var widthVal = parseInt($('#inputWidth').val());
- if (isNaN(widthVal)) {
- widthVal = 512;
- }
- var heightVal = parseInt($('#inputHeight').val());
- if (isNaN(heightVal)) {
- heightVal = 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) {
- alert("width must be between 8 and 960!");
- return;
- }
-
- if (widthVal % 8 != 0) {
- alert("width must be divisible by 8!");
- return;
- }
-
- if (heightVal < 8 || heightVal > 960) {
- alert("height must be between 8 and 960!");
- return;
- }
-
- if (heightVal % 8 != 0) {
- alert("height must be divisible by 8!");
- return;
- }
-
- if (stepsVal > 200 || stepsVal < 1) {
- alert("steps value must be between 1 and 200!");
- return;
- }
+ function submitJob(formData, uuidSelector, statusSelector) {
$.ajax({
type: 'POST',
url: '/add_job',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
- data: JSON.stringify({
- 'apikey': apikeyVal,
- 'type': 'txt',
- 'prompt': promptVal,
- 'seed': seedVal,
- 'steps': stepsVal,
- 'width': widthVal,
- 'height': heightVal,
- 'lang': $("#language option:selected").val(),
- 'guidance_scale': guidanceScaleVal,
- 'neg_prompt': negPromptVal,
- 'is_private': $('#isPrivate').is(":checked") ? 1 : 0
- }),
+ data: JSON.stringify(formData),
success: function (response) {
- console.log(response);
if (response.uuid) {
- $('#txt2ImgJobUUID').html(response.uuid);
+ $(uuidSelector).html(response.uuid);
}
- $('#txt2ImgStatus').html('submitting new job..');
- waitForImage(apikeyVal, response.uuid);
+ $(statusSelector).html('Submitting new job..');
+ waitForImage(formData.apikey, response.uuid);
},
error: function (xhr, status, error) {
// Handle error response
console.log(xhr.responseText);
- $('#txt2ImgStatus').html('failed');
+ $(statusSelector).html('Failed');
}
});
+ }
+ $('#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;
+ }
+
+ 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 = getInputValue('#inputSeed', '0');
+
+ var formData = {
+ 'apikey': apikeyVal,
+ 'type': 'txt',
+ 'prompt': promptVal,
+ 'seed': seedVal,
+ 'steps': stepsVal,
+ 'width': widthVal,
+ 'height': heightVal,
+ 'lang': $("#language option:selected").val(),
+ 'guidance_scale': guidanceScaleVal,
+ 'neg_prompt': negPromptVal,
+ 'is_private': $('#isPrivate').is(":checked") ? 1 : 0
+ };
+
+ submitJob(formData, '#txt2ImgJobUUID', '#txt2ImgStatus');
});
$('#newImg2ImgJob').click(function (e) {
e.preventDefault(); // Prevent the default form submission
if (imageData == null) {
- alert("No image cached")
+ alert("No image cached");
return;
}
- // Gather input field values
- var apikeyVal = $('#apiKey').val();
- var promptVal = $('#prompt').val();
- var negPromptVal = $('#negPrompt').val();
- var seedVal = $('#inputSeed').val();
- if (seedVal == "0" || seedVal == "") {
- seedVal = "0";
- }
- var guidanceScaleVal = parseFloat($('#inputGuidanceScale').val())
- if (isNaN(guidanceScaleVal)) {
- guidanceScaleVal = 25.0;
- }
- var stepsVal = parseInt($('#inputSteps').val());
- if (isNaN(stepsVal)) {
- stepsVal = 50;
- }
- var widthVal = parseInt($('#inputWidth').val());
- if (isNaN(widthVal)) {
- widthVal = 512;
- }
- var heightVal = parseInt($('#inputHeight').val());
- if (isNaN(heightVal)) {
- heightVal = 512;
- }
- var strengthVal = parseFloat($('#inputStrength').val());
- if (isNaN(strengthVal)) {
- strengthVal = 0.5;
+ // 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;
}
- if (promptVal == "") {
- alert("missing prompt!");
+ // 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");
+ 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");
+ alert("Strength must be between 0 and 1!");
return;
}
- if (widthVal < 8 || widthVal > 960) {
- alert("width must be between 8 and 960!");
- return;
- }
+ var formData = {
+ 'apikey': apikeyVal,
+ 'type': 'img',
+ 'ref_img': imageData,
+ '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
+ };
- if (widthVal % 8 != 0) {
- alert("width must be divisible by 8!");
- return;
- }
-
- if (heightVal < 8 || heightVal > 960) {
- alert("height must be between 8 and 960!");
- return;
- }
-
- if (heightVal % 8 != 0) {
- alert("height must be divisible by 8!");
- return;
- }
- if (stepsVal > 200 || stepsVal < 1) {
- alert("steps value must be between 1 and 200!");
- return;
- }
-
- // Send POST request using Ajax
- $.ajax({
- type: 'POST',
- url: '/add_job',
- contentType: 'application/json; charset=utf-8',
- dataType: 'json',
- data: JSON.stringify({
- 'apikey': apikeyVal,
- 'type': 'img',
- 'ref_img': imageData,
- '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
- }),
- success: function (response) {
- console.log(response);
- if (response.uuid) {
- $('#img2ImgJobUUID').html(response.uuid);
- }
- $('#img2ImgStatus').html('submitting new job..');
- waitForImage(apikeyVal, response.uuid);
- },
- error: function (xhr, status, error) {
- // Handle error response
- console.log(xhr.responseText);
- $('#img2ImgStatus').html('failed');
- }
- });
+ submitJob(formData, '#img2ImgJobUUID', '#img2ImgStatus');
});
$('#newInpaintingJob').click(function (e) {
e.preventDefault(); // Prevent the default form submission
if (inpaintOriginalImg == null) {
- alert("No image cached")
+ alert("No image cached");
return;
}
@@ -874,102 +886,68 @@
tempCtx.putImageData(maskImageData, 0, 0); // Put modified image data onto the new canvas
var inpaintMaskImg = tempCanvas.toDataURL(); // Get the modified base64-encoded image data
- // Gather input field values
- var apikeyVal = $('#apiKey').val();
- var promptVal = $('#prompt').val();
- var negPromptVal = $('#negPrompt').val();
- var seedVal = $('#inputSeed').val();
- if (seedVal == "0" || seedVal == "") {
- seedVal = "0";
- }
- var guidanceScaleVal = parseFloat($('#inputGuidanceScale').val())
- if (isNaN(guidanceScaleVal)) {
- guidanceScaleVal = 25.0;
- }
- var stepsVal = parseInt($('#inputSteps').val());
- if (isNaN(stepsVal)) {
- stepsVal = 50;
- }
- var widthVal = parseInt($('#inputWidth').val());
- if (isNaN(widthVal)) {
- widthVal = 512;
- }
- var heightVal = parseInt($('#inputHeight').val());
- if (isNaN(heightVal)) {
- heightVal = 512;
+ // 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;
}
- if (promptVal == "") {
- alert("missing prompt!");
+ // Validate input field values
+ var apikeyVal = $('#apiKey').val();
+ var promptVal = getInputValue('#prompt', '');
+ var negPromptVal = $('#negPrompt').val();
+ var seedVal = getInputValue('#inputSeed', '0');
+ 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");
+ alert("Guidance scale must be between 1 and 30!");
return;
}
- if (widthVal < 8 || widthVal > 960) {
- alert("width must be between 8 and 960!");
+ if (widthVal < 8 || widthVal > 960 || widthVal % 8 !== 0) {
+ alert("Width must be between 8 and 960 and divisible by 8!");
return;
}
- if (widthVal % 8 != 0) {
- alert("width must be divisible by 8!");
+ if (heightVal < 8 || heightVal > 960 || heightVal % 8 !== 0) {
+ alert("Height must be between 8 and 960 and divisible by 8!");
return;
}
- if (heightVal < 8 || heightVal > 960) {
- alert("height must be between 8 and 960!");
- return;
- }
+ var formData = {
+ 'apikey': apikeyVal,
+ 'type': 'inpaint',
+ 'ref_img': inpaintOriginalImg,
+ 'mask_img': inpaintMaskImg,
+ 'prompt': promptVal,
+ 'seed': seedVal,
+ 'steps': stepsVal,
+ 'width': widthVal,
+ 'height': heightVal,
+ 'lang': $("#language option:selected").val(),
+ 'guidance_scale': guidanceScaleVal,
+ 'neg_prompt': negPromptVal,
+ 'is_private': $('#isPrivate').is(":checked") ? 1 : 0
+ };
- if (heightVal % 8 != 0) {
- alert("height must be divisible by 8!");
- return;
- }
- if (stepsVal > 200 || stepsVal < 1) {
- alert("steps value must be between 1 and 200!");
- return;
- }
-
- // Send POST request using Ajax
- $.ajax({
- type: 'POST',
- url: '/add_job',
- contentType: 'application/json; charset=utf-8',
- dataType: 'json',
- data: JSON.stringify({
- 'apikey': apikeyVal,
- 'type': 'inpaint',
- 'ref_img': inpaintOriginalImg,
- 'mask_img': inpaintMaskImg,
- 'prompt': promptVal,
- 'seed': seedVal,
- 'steps': stepsVal,
- 'width': widthVal,
- 'height': heightVal,
- 'lang': $("#language option:selected").val(),
- 'guidance_scale': guidanceScaleVal,
- 'neg_prompt': negPromptVal,
- 'is_private': $('#isPrivate').is(":checked") ? 1 : 0
- }),
- success: function (response) {
- console.log(response);
- if (response.uuid) {
- $('#inpaintJobUUID').html(response.uuid);
- }
- $('#inpaintStatus').html('submitting new job..');
- waitForImage(apikeyVal, response.uuid);
- },
- error: function (xhr, status, error) {
- // Handle error response
- console.log(xhr.responseText);
- $('#inpaintStatus').html('failed');
- }
- });
+ submitJob(formData, '#inpaintJobUUID', '#inpaintStatus');
});
+ // Define the function to update the text based on the selected language
+ function updateText(language) {
+ $("[data-" + language + "]").each(function () {
+ $(this).text($(this).data(language.toLowerCase()));
+ });
+ }
+
// Listen for changes to the select element
$("#language").change(function () {
// Get the newly selected value
@@ -978,9 +956,8 @@
// Store the selected value in cache
localStorage.setItem("selectedLanguage", newLanguage);
- $("[data-" + newLanguage + "]").each(function () {
- $(this).text($(this).data(newLanguage.toLowerCase()));
- });
+ // Update the text based on the selected language
+ updateText(newLanguage);
});
// Get the selected value from cache (if it exists)
@@ -989,33 +966,35 @@
// Set the selected value
$("#language").val(cachedLanguage);
- // Trigger a change event to update the text and store in cache
- $("#language").change();
+ // Update the text based on the selected language
+ updateText(cachedLanguage);
}
// Cache variable to store the selected image data for inpainting
var inpaintOriginalImg = null;
- $("#copy-txt-to-img-inpaint").click(function () {
- data = $("#txt2ImgImg").attr("src");
- if (data == null || data == "") {
- alert("nothing found from txt-to-img result");
- return;
- }
- inpaintOriginalImg = data
- $("#inpaint-img").attr("src", inpaintOriginalImg);
- $("#inpaint-img").trigger("change");
- });
-
- $("#copy-last-img-inpaint").click(function () {
- data = $("#img2ImgImg").attr("src");
- if (data == null || data == "") {
- alert("nothing found from img-to-img result");
- return;
- }
+ function setInpaintOriginalImg(data) {
inpaintOriginalImg = data;
$("#inpaint-img").attr("src", inpaintOriginalImg);
$("#inpaint-img").trigger("change");
+ }
+
+ $("#copy-txt-to-img-inpaint").click(function () {
+ var data = $("#txt2ImgImg").attr("src");
+ if (!data) {
+ alert("Nothing found from txt-to-img result");
+ return;
+ }
+ setInpaintOriginalImg(data);
+ });
+
+ $("#copy-last-img-inpaint").click(function () {
+ var data = $("#img2ImgImg").attr("src");
+ if (!data) {
+ alert("Nothing found from img-to-img result");
+ return;
+ }
+ setInpaintOriginalImg(data);
});
$("#upload-img-inpaint").click(function () {
@@ -1023,8 +1002,7 @@
input.on("change", function () {
var reader = new FileReader();
reader.onload = function (e) {
- inpaintOriginalImg = e.target.result;
- $("#inpaint-img").attr("src", inpaintOriginalImg);
+ setInpaintOriginalImg(e.target.result);
var img = new Image();
img.src = inpaintOriginalImg;
img.onload = function () {
@@ -1037,7 +1015,9 @@
});
$("#inpaint-strike-size").on("input", function () {
- $('#range-value').val($(this).val());
+ var strikeSize = $(this).val();
+ $('#range-value').val(strikeSize);
+ $("#inpaint-strike-size").trigger("inputChange", strikeSize);
});
$('#range-value').val($('#inpaint-strike-size').val());
@@ -1064,12 +1044,12 @@
$('#inpaint-redo').click(function () {
$sketcher.sketchable('memento.redo');
});
- $("#inpaint-strike-size").on("input", function () {
- $sketcher.sketchable('config', { graphics: { lineWidth: $(this).val() } });
+ $("#inpaint-strike-size").on("inputChange", function (e, strikeSize) {
+ $sketcher.sketchable('config', { graphics: { lineWidth: strikeSize } });
});
});
-
});
+
" +
(response.jobs[i].img ? ("![](" + response.jobs[i].img + ")
") : "") +
"
- " +
"
- status: " + response.jobs[i].status + " " + - "
- is_private: " + response.jobs[i].is_private + " " + - "
- prompt: " + truncateText(response.jobs[i].prompt, 500) + " " + - "
- neg prompt: " + truncateText(response.jobs[i].neg_prompt, 500) + " " + + "
- prompt: " + parsePromptString(response.jobs[i].prompt, false) + " " + + "
- neg prompt: " + parsePromptString(response.jobs[i].neg_prompt, true) + " " + "
- seed: " + response.jobs[i].seed + " " + "
- uuid: " + response.jobs[i].uuid + " " + "
- w x h: " + response.jobs[i].width + " x " + response.jobs[i].height + " " + "
" +
+ (response.jobs[i].img ? ("
") : "") +
+ "
- " +
+ "
- prompt: " + parsePromptString(response.jobs[i].prompt, false) + " " + + "
- neg prompt: " + parsePromptString(response.jobs[i].neg_prompt, true) + " " + + "
- seed: " + response.jobs[i].seed + " " + + "
- w x h: " + response.jobs[i].width + " x " + response.jobs[i].height + " " + + "
" +
- (shuffled[i].img ? ("![](" + shuffled[i].img + ")
") : "") +
- "
- " +
- "
- prompt: " + truncateText(shuffled[i].prompt, 500) + " " + - "
- neg prompt: " + truncateText(shuffled[i].neg_prompt, 500) + " " + - "
- seed: " + shuffled[i].seed + " " + - "
- w x h: " + shuffled[i].width + " x " + shuffled[i].height + " " + - "