[FE] improves javascript using ChatGPT to optimize more

BUILD

@@ -3,6 +3,7 @@ load("@subpar//:subpar.bzl", "par_binary")
 
 package(default_visibility=["//visibility:public"])
 
+# subpar broke flask file path, don't buidl with .par
 par_binary(
     name="frontend",
     srcs=["frontend.py"],

templates/index.html

@@ -365,6 +365,36 @@
         </div>
     </div>
 
+    <!-- CSS code -->
+    <style>
+        .private-card {
+            filter: blur(12px);
+            opacity: 0.7;
+            transition: filter 0.3s ease, opacity 0.3s ease;
+        }
+
+        .reveal-text {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            color: white;
+            border-radius: 10px;
+            transition: filter 0.3s ease, opacity 0.3s ease;
+            text-align: center;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .reveal-text svg {
+            width: 80px;
+            height: 80px;
+            fill: white;
+            filter: drop-shadow(2px 2px 4px rgba(126, 126, 126, 0.8));
+        }
+    </style>
     <script src="{{ url_for('static',filename='jquery-3.6.1.min.js') }}"></script>
     <script src="{{ url_for('static',filename='bootstrap.bundle.min.js') }}"></script>
     <script src="{{ url_for('static',filename='jsketch.min.js') }}"></script>
@@ -439,52 +469,89 @@
             return text.slice(0, maxLength) + '...';
         }
 
+        function parsePromptString(prompt, is_negative) {
+            // Split the prompt input by ","
+            var promptArray = prompt.replace(/[^\w\s,\p{Script=Han}]/gu, '').split(/[,，]/);
+
+            var result = "";
+            for (var i = 0; i < promptArray.length; i++) {
+                var trimmedString = promptArray[i].trim();
+
+                // Truncate the split string if it exceeds 100 words
+                if (trimmedString.split(' ').length > 100) {
+                    trimmedString = trimmedString.split(' ').slice(0, 100).join(' ') + '...';
+                }
+
+                if (trimmedString.length > 0) {
+                    // Wrap the string in a <span> element with required attributes and events
+                    var spanElement = $("<span class='" + (is_negative ? "negative-prompt-example" : "prompt-example") + " badge rounded-pill text-bg-light'>")
+                        .text(trimmedString)
+                        .css("cursor", "pointer");
+
+                    result += spanElement[0].outerHTML;
+                }
+            }
+
+            return result;
+        }
+
         $(document).ready(function () {
-            $('input').each(function () {
+            $(document).on("click", ".negative-prompt-example, .prompt-example", function () {
+                var clickedText = $(this).text();
+                var inputId = ($(this).hasClass("negative-prompt-example")) ? "#negPrompt" : "#prompt";
+                var input = $(inputId);
+                var key = input.attr('id');
+                var currentValue = input.val();
+                if (currentValue && currentValue.includes(clickedText)) {
+                    // If currentValue already contains clickedText, do nothing
+                    return;
+                }
+                var newValue = (currentValue === "" ? "" : (currentValue + ", ")) + clickedText;
+                input.val(newValue);
+                localStorage.setItem(key, newValue);
+            });
+
+            $(document).on({
+                mouseenter: function () {
+                    $(this).toggleClass("text-bg-light text-bg-dark");
+                },
+                mouseleave: function () {
+                    $(this).toggleClass("text-bg-light text-bg-dark");
+                }
+            }, ".negative-prompt-example, .prompt-example");
+
+            $('input[id]').on('input', function () {
+                var input = $(this);
+                var key = input.attr('id');
+                var value = input.val();
+                localStorage.setItem(key, value);
+            }).each(function () {
                 var input = $(this);
                 var key = input.attr('id');
                 var value = localStorage.getItem(key);
-
                 if (value) {
                     input.val(value);
                 }
-
-                input.on('input', function () {
-                    localStorage.setItem(key, input.val());
-                });
             });
 
             // Cache variable to store the selected image data for img2img
             var imageData = null;
 
-            $("#copy-txt-to-img").click(function () {
+            $("#copy-txt-to-img, #copy-last-img").click(function () {
-                data = $("#txt2ImgImg").attr("src");
+                var data;
+                var sourceId = $(this).data("source-id");
+                data = $("#" + sourceId).attr("src");
                 if (data == null || data == "") {
-                    alert("nothing found from txt-to-img result");
+                    alert("Nothing found from the result");
                     return;
                 }
                 imageData = data;
                 $("#reference-img").attr("src", imageData);
             });
 
-            $("#copy-last-img").click(function () {
+            $('#txt2ImgJobUUID, #img2ImgJobUUID, #inpaintJobUUID').click(function () {
-                data = $("#img2ImgImg").attr("src");
+                var jobUUID = $(this).html();
-                if (data == null || data == "") {
+                $('#lookupUUID').val(jobUUID);
-                    alert("nothing found from img-to-img result");
-                    return;
-                }
-                imageData = data;
-                $("#reference-img").attr("src", imageData);
-            });
-
-            $('#txt2ImgJobUUID').click(function () {
-                $('#lookupUUID').val($('#txt2ImgJobUUID').html());
-            });
-            $('#img2ImgJobUUID').click(function () {
-                $('#lookupUUID').val($('#img2ImgJobUUID').html());
-            });
-            $('#inpaintJobUUID').click(function () {
-                $('#lookupUUID').val($('#inpaintJobUUID').html());
             });
 
             $('#getJobHistory').click(function () {
@@ -511,17 +578,75 @@
                         var $grid = $('<div class="row"></div>');
                         $joblist.html($grid);
                         for (var i = 0; i < jobsLength; i++) {
-                            var element = ("<div class='col col-sm-1 col-md-3 col-lg-4 mb-3'><div class='card'>" +
+                            var isPrivate = response.jobs[i].is_private;
+                            var element = $("<div class='col col-sm-6 col-md-6 col-lg-4 mb-3'><div class='card'>" +
                                 (response.jobs[i].img ? ("<img src='" + response.jobs[i].img + "' class='card-img-top'><div class='card-body'>") : "") +
                                 "<ul class='list-group list-group-flush'>" +
                                 "<li class='list-group-item'>status: " + response.jobs[i].status + "</li>" +
-                                "<li class='list-group-item'>is_private: " + response.jobs[i].is_private + "</li>" +
+                                "<li class='list-group-item'>prompt: " + parsePromptString(response.jobs[i].prompt, false) + "</li>" +
-                                "<li class='list-group-item'>prompt: " + truncateText(response.jobs[i].prompt, 500) + "</li>" +
+                                "<li class='list-group-item'>neg prompt: " + parsePromptString(response.jobs[i].neg_prompt, true) + "</li>" +
-                                "<li class='list-group-item'>neg prompt: " + truncateText(response.jobs[i].neg_prompt, 500) + "</li>" +
                                 "<li class='list-group-item'>seed: " + response.jobs[i].seed + "</li>" +
                                 "<li class='list-group-item'>uuid: " + response.jobs[i].uuid + "</li>" +
                                 "<li class='list-group-item'>w x h: " + response.jobs[i].width + " x " + response.jobs[i].height + "</li>" +
                                 "</ul>" +
+                                "</div></div></div>");
+                            // Add event handler for click to toggle blurriness
+                            if (isPrivate === 1) {
+                                element.find('.card').addClass('private-card');
+                                element.append("<div class='reveal-text'><svg viewBox='0 0 16 16'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/></svg></div>");
+
+                                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 = $('<div class="row"></div>');
+                        $joblist.html($grid);
+                        for (var i = 0; i < jobsLength; i++) {
+                            var element = ("<div class='col col-sm-6 col-md-6 col-lg-4 mb-3'><div class='card'>" +
+                                (response.jobs[i].img ? ("<img src='" + response.jobs[i].img + "' class='card-img-top'><div class='card-body'>") : "") +
+                                "<ul class='list-group list-group-flush'>" +
+                                "<li class='list-group-item'>prompt: " + parsePromptString(response.jobs[i].prompt, false) + "</li>" +
+                                "<li class='list-group-item'>neg prompt: " + parsePromptString(response.jobs[i].neg_prompt, true) + "</li>" +
+                                "<li class='list-group-item'>seed: " + response.jobs[i].seed + "</li>" +
+                                "<li class='list-group-item'>w x h: " + response.jobs[i].width + " x " + response.jobs[i].height + "</li>" +
+                                "</ul>" +
                                 "</div></div></div>")
                             $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 = $('<div class="row"></div>');
-                        $joblist.html($grid);
-                        for (var i = 0; i < jobsLength; i++) {
-                            var element = ("<div class='col col-sm-1 col-md-3 col-lg-4 mb-3'><div class='card'>" +
-                                (shuffled[i].img ? ("<img src='" + shuffled[i].img + "' class='card-img-top'><div class='card-body'>") : "") +
-                                "<ul class='list-group list-group-flush'>" +
-                                "<li class='list-group-item'>prompt: " + truncateText(shuffled[i].prompt, 500) + "</li>" +
-                                "<li class='list-group-item'>neg prompt: " + truncateText(shuffled[i].neg_prompt, 500) + "</li>" +
-                                "<li class='list-group-item'>seed: " + shuffled[i].seed + "</li>" +
-                                "<li class='list-group-item'>w x h: " + shuffled[i].width + " x " + shuffled[i].height + "</li>" +
-                                "</ul>" +
-                                "</div></div></div>")
-                            $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 type='file' accept='image/*'>");
+                var input = $("<input type='file' accept='image/*'>").on("change", function () {
-                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,75 +698,69 @@
                 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({
+                    data: JSON.stringify(formData),
+                    success: function (response) {
+                        if (response.uuid) {
+                            $(uuidSelector).html(response.uuid);
+                        }
+                        $(statusSelector).html('Submitting new job..');
+                        waitForImage(formData.apikey, response.uuid);
+                    },
+                    error: function (xhr, status, error) {
+                        // Handle error response
+                        console.log(xhr.responseText);
+                        $(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,
@@ -710,106 +772,68 @@
                     'guidance_scale': guidanceScaleVal,
                     'neg_prompt': negPromptVal,
                     'is_private': $('#isPrivate').is(":checked") ? 1 : 0
-                    }),
+                };
-                    success: function (response) {
+
-                        console.log(response);
+                submitJob(formData, '#txt2ImgJobUUID', '#txt2ImgStatus');
-                        if (response.uuid) {
-                            $('#txt2ImgJobUUID').html(response.uuid);
-                        }
-                        $('#txt2ImgStatus').html('submitting new job..');
-                        waitForImage(apikeyVal, response.uuid);
-                    },
-                    error: function (xhr, status, error) {
-                        // Handle error response
-                        console.log(xhr.responseText);
-                        $('#txt2ImgStatus').html('failed');
-                    }
-                });
             });
 
             $('#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
+                // Helper function to get input field value or a default value if empty
-                var apikeyVal = $('#apiKey').val();
+                function getInputValue(id, defaultValue) {
-                var promptVal = $('#prompt').val();
+                    var value = $(id).val().trim();
-                var negPromptVal = $('#negPrompt').val();
+                    return value !== '' ? value : defaultValue;
-                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;
                 }
 
-                if (promptVal == "") {
+                // Validate input field values
-                    alert("missing prompt!");
+                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) {
+                var formData = {
-                    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;
-                }
-
-                // 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,
@@ -823,28 +847,16 @@
                     'strength': strengthVal,
                     'neg_prompt': negPromptVal,
                     'is_private': $('#isPrivate').is(":checked") ? 1 : 0
-                    }),
+                };
-                    success: function (response) {
+
-                        console.log(response);
+                submitJob(formData, '#img2ImgJobUUID', '#img2ImgStatus');
-                        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');
-                    }
-                });
             });
 
             $('#newInpaintingJob').click(function (e) {
                 e.preventDefault(); // Prevent the default form submission
 
                 if (inpaintOriginalImg == null) {
-                    alert("No image cached")
+                    alert("No image cached");
                     return;
                 }
 
@@ -874,72 +886,43 @@
                 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
+                // Helper function to get input field value or a default value if empty
-                var apikeyVal = $('#apiKey').val();
+                function getInputValue(id, defaultValue) {
-                var promptVal = $('#prompt').val();
+                    var value = $(id).val().trim();
-                var negPromptVal = $('#negPrompt').val();
+                    return value !== '' ? value : defaultValue;
-                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;
                 }
 
-                if (promptVal == "") {
+                // Validate input field values
-                    alert("missing prompt!");
+                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) {
+                if (widthVal < 8 || widthVal > 960 || widthVal % 8 !== 0) {
-                    alert("width must be between 8 and 960!");
+                    alert("Width must be between 8 and 960 and divisible by 8!");
                     return;
                 }
 
-                if (widthVal % 8 != 0) {
+                if (heightVal < 8 || heightVal > 960 || heightVal % 8 !== 0) {
-                    alert("width must be divisible by 8!");
+                    alert("Height must be between 8 and 960 and divisible by 8!");
                     return;
                 }
 
-                if (heightVal < 8 || heightVal > 960) {
+                var formData = {
-                    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': 'inpaint',
                     'ref_img': inpaintOriginalImg,
@@ -953,22 +936,17 @@
                     'guidance_scale': guidanceScaleVal,
                     'neg_prompt': negPromptVal,
                     'is_private': $('#isPrivate').is(":checked") ? 1 : 0
-                    }),
+                };
-                    success: function (response) {
+
-                        console.log(response);
+                submitJob(formData, '#inpaintJobUUID', '#inpaintStatus');
-                        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');
-                    }
             });
+
+            // 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 () {
@@ -978,9 +956,8 @@
                 // Store the selected value in cache
                 localStorage.setItem("selectedLanguage", newLanguage);
 
-                $("[data-" + newLanguage + "]").each(function () {
+                // Update the text based on the selected language
-                    $(this).text($(this).data(newLanguage.toLowerCase()));
+                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
+                // Update the text based on the selected language
-                $("#language").change();
+                updateText(cachedLanguage);
             }
 
             // Cache variable to store the selected image data for inpainting
             var inpaintOriginalImg = null;
 
-            $("#copy-txt-to-img-inpaint").click(function () {
+            function setInpaintOriginalImg(data) {
-                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;
-                }
                 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;
+                        setInpaintOriginalImg(e.target.result);
-                        $("#inpaint-img").attr("src", inpaintOriginalImg);
                         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 () {
+                $("#inpaint-strike-size").on("inputChange", function (e, strikeSize) {
-                    $sketcher.sketchable('config', { graphics: { lineWidth: $(this).val() } });
+                    $sketcher.sketchable('config', { graphics: { lineWidth: strikeSize } });
+                });
             });
         });
 
-        });
     </script>
 </body>