happyz
/
stable-diffusion-for-fun
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[FE] configurable mask stroke size and supports undo/redo

This commit is contained in:
HappyZ 2023-05-14 22:01:58 -07:00
parent 605b05aa8b
commit e04194de0d
3 changed files with 57 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
BUILD
View File

@ -17,6 +17,7 @@ par_binary(
"static/bootstrap.bundle.min.js", "static/bootstrap.bundle.min.js",
"static/jquery.sketchable.min.js", "static/jquery.sketchable.min.js",
"static/jsketch.min.js", "static/jsketch.min.js",
"static/jquery.sketchable.memento.min.js",
], ],
) )

1
static/jquery.sketchable.memento.min.js vendored Normal file
View File

@ -0,0 +1 @@
!function(a){function b(b){function c(a,c){b.sketchable("handler",function(b,d){d.sketch.clear(),d.sketch.context.drawImage(a,0,0),d.strokes=c.strokes.slice(),d.sketch.callStack=c.callStack.slice()})}function d(a){if(a.ctrlKey)switch(a.which){case 26:a.shiftKey?g.redo():g.undo();break;case 25:g.redo()}}var e=[],f=-1,g=this;this.undo=function(){return f>0&&(f--,this.restore()),this},this.redo=function(){return f<e.length-1&&(f++,this.restore()),this},this.reset=function(){return e=[],f=-1,this.save()},this.save=function(a){return b.sketchable("handler",function(b,c){a&&a.identifier>0?e[f].strokes=c.strokes.slice():(e.push({image:b.get(0).toDataURL(),strokes:c.strokes.slice(),callStack:c.sketch.callStack.slice()}),f++)}),this},this.state=function(){return JSON.parse(JSON.stringify(e[f]))},this.restore=function(a){a||(a=e[f]);var b=new Image;return b.src=a.image,b.onload=function(){c(this,a)},this},this.init=function(){return a(document).off("keypress",d),a(document).on("keypress",d),this.save()},this.destroy=function(){return a(document).off("keypress",d),this.reset()}}var c="sketchable";a.fn.sketchable.plugins.memento=function(d){for(var e={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},f="mouseup clear destroy".split(" "),g=0;g<f.length;g++){var h=f[g];d.sketchable("decorate",h,e[h],"memento")}a.extend(a.fn.sketchable.api,{memento:{undo:function(){var b=a(this).data(c);return b.memento.undo(),d},redo:function(){var b=a(this).data(c);return b.memento.redo(),d},save:function(){var b=a(this).data(c);return b.memento.save(),d},state:function(){var b=a(this).data(c);return b.memento.state()},restore:function(b){var e=a(this).data(c);return e.memento.restore(b),d}}});var i=d.sketchable("data");i.memento=new b(d),i.memento.init()}}(jQuery);

76
templates/index.html
View File

@ -80,7 +80,7 @@
<input type="number" class="form-control" id="inputHeight" placeholder="512" min="1" <input type="number" class="form-control" id="inputHeight" placeholder="512" min="1"
max="1024"> max="1024">
</div> </div>
<div class="form-row"> <div class="form-row mb-3">
<label for="guidanceScale" data-en_XX="Guidance Scale" data-zh_CN="指导强度">Guidance <label for="guidanceScale" data-en_XX="Guidance Scale" data-zh_CN="指导强度">Guidance
Scale</label> Scale</label>
<input type="number" class="form-control" id="inputGuidanceScale" <input type="number" class="form-control" id="inputGuidanceScale"
@ -119,8 +119,9 @@
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<div class="card"> <div class="card">
<div class="card-header" data-en_XX="Reference Image" data-zh_CN="参照图"> <div class="card-header" data-en_XX="1. Choose Reference Image"
Reference Image data-zh_CN="1. 选择参照图">
1. Choose Reference Image
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
@ -157,8 +158,8 @@
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
<div class="card"> <div class="card">
<div class="card-header" data-en_XX="Result" data-zh_CN="结果"> <div class="card-header" data-en_XX="2. Result" data-zh_CN="2. 结果">
Result 2. Result
</div> </div>
<div class="card-body"> <div class="card-body">
<ul class="list-group"> <ul class="list-group">
@ -179,8 +180,9 @@
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<div class="card"> <div class="card">
<div class="card-header" data-en_XX="Original Image" data-zh_CN="原图"> <div class="card-header" data-en_XX="1. Choose Original Image"
Original Image data-zh_CN="1. 选择原图">
1. Choose Original Image
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
@ -201,30 +203,45 @@
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card"> <div class="card">
<div class="card-header" data-en_XX="Mask Image" data-zh_CN="修复部分"> <div class="card-header" data-en_XX="2. Remove Area (Mask)"
Mask Image data-zh_CN="2. 抹去要修复的部分">
2. Remove Area (Mask)
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="row">
</div>
<div class="row"> <div class="row">
<button id="newInpaintingJob" class="btn btn-primary mb-3" <button id="newInpaintingJob" class="btn btn-primary mb-3"
data-en_XX="Let's Go with Image + Mask Below!" data-en_XX="Let's Go with Image + Mask Below!"
data-zh_CN="就用下面的图进行修复！">Let's data-zh_CN="进行修复！">Let's
Go with Image + Mask Below!</button> Go with Image + Mask Below!</button>
</div> </div>
<div class="input-group mb-3">
<button id="inpaint-reset" class="btn btn-outline-secondary"
data-en_XX="Reset" data-zh_CN="重置">Reset</button>
<button id="inpaint-undo" class="btn btn-outline-secondary"
data-en_XX="Undo" data-zh_CN="撤销">Undo</button>
<button id="inpaint-redo" class="btn btn-outline-secondary"
data-en_XX="Redo" data-zh_CN="重做">Redo</button>
</div>
<div class="form-row">
<label for="inpaint-strike-size" class="form-label"
data-en_XX="Strike Size" data-zh_CN="笔触大小">Strike Size</label>
<input type="range" class="form-range" min="1" max="30"
id="inpaint-strike-size">
<output id='range-value'></output>
</div>
</div> </div>
<div class="card-img-bottom" style="position: relative;"> <div class="card-img-bottom" style="position: relative;">
<img id="inpaint-img-for-mask" width="100%"> <img id="inpaint-img-for-mask" width="100%">
<canvas style="cursor: pointer; position: absolute; top: 0; left: 0;" <div id="inpaint-mask-canvas-container"
id="inpaint-img-mask"> style="cursor: pointer; position: absolute; top: 0; left: 0;">
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card"> <div class="card">
<div class="card-header" data-en_XX="Result" data-zh_CN="结果"> <div class="card-header" data-en_XX="3. Result" data-zh_CN="3. 结果">
Result 3. Result
</div> </div>
<div class="card-body"> <div class="card-body">
<ul class="list-group"> <ul class="list-group">
@ -285,6 +302,7 @@
<script src="{{ url_for('static',filename='bootstrap.bundle.min.js') }}"></script> <script src="{{ url_for('static',filename='bootstrap.bundle.min.js') }}"></script>
<script src="{{ url_for('static',filename='jsketch.min.js') }}"></script> <script src="{{ url_for('static',filename='jsketch.min.js') }}"></script>
<script src="{{ url_for('static',filename='jquery.sketchable.min.js') }}"></script> <script src="{{ url_for('static',filename='jquery.sketchable.min.js') }}"></script>
<script src="{{ url_for('static',filename='jquery.sketchable.memento.min.js') }}"></script>
<script> <script>
function waitForImage(apikeyVal, uuidValue) { function waitForImage(apikeyVal, uuidValue) {
@ -819,7 +837,7 @@
$("#inpaint-img").attr("src", inpaintOriginalImg); $("#inpaint-img").attr("src", inpaintOriginalImg);
var img = new Image(); var img = new Image();
img.src = inpaintOriginalImg; img.src = inpaintOriginalImg;
img.onload = function() { img.onload = function () {
$("#inpaint-img").trigger("change"); $("#inpaint-img").trigger("change");
}; };
}; };
@ -828,21 +846,37 @@
input.click(); input.click();
}); });
$("#inpaint-strike-size").on("input", function () {
$('#range-value').val($(this).val());
});
$('#range-value').val($('#inpaint-strike-size').val());
$("#inpaint-img").on("change", function () { $("#inpaint-img").on("change", function () {
var src = $(this).attr("src"); var src = $(this).attr("src");
$("#inpaint-img-for-mask").attr("src", src); $("#inpaint-img-for-mask").attr("src", src);
$('#inpaint-img-mask').width($(this).width()); $("#inpaint-mask-canvas-container").html("<canvas id='inpaint-img-mask' width=" + $(this).width() + " height=" + $(this).height() + ">");
$('#inpaint-img-mask').height($(this).height());
var options = { var options = {
graphics: { graphics: {
firstPointSize: 0, firstPointSize: 0,
lineWidth: 5, lineWidth: 10,
strokeStyle: 'black', strokeStyle: 'black',
} }
}; };
var $sketcher = $('#inpaint-img-mask').sketchable(options); $sketcher = $('#inpaint-img-mask').sketchable(options);
$('#inpaint-reset').click(function () {
$sketcher.sketchable('clear');
});
$('#inpaint-undo').click(function () {
$sketcher.sketchable('memento.undo');
});
$('#inpaint-redo').click(function () {
$sketcher.sketchable('memento.redo');
});
$("#inpaint-strike-size").on("input", function () {
$sketcher.sketchable('config', { graphics: { lineWidth: $(this).val() } });
});
}); });
}); });