mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-02-16 18:32:25 +01:00
Simplify the UI of the model merge tab; Allows a user to merge a single model, or a batch of variations; Also fixes a few logging bugs in the model merge tab
This commit is contained in:
cmdr2
parent
0b3a35c4b6
commit
d0c4e95de3
@ -36,6 +36,8 @@
|
||||
|
||||
// Scroll to the bottom of the log
|
||||
logContainer.scrollTop = logContainer.scrollHeight;
|
||||
|
||||
document.querySelector('#merge-log-container').style.display = 'block'
|
||||
}
|
||||
|
||||
function addLogSeparator() {
|
||||
@ -46,8 +48,9 @@
|
||||
}
|
||||
|
||||
function drawDiagram(fn) {
|
||||
const SIZE = 300
|
||||
const canvas = document.getElementById('merge-canvas');
|
||||
canvas.width=canvas.width
|
||||
canvas.height = canvas.width = SIZE
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Draw coordinate system
|
||||
@ -57,15 +60,16 @@
|
||||
ctx.beginPath();
|
||||
|
||||
ctx.strokeStyle = 'white'
|
||||
ctx.moveTo(0,0); ctx.lineTo(0,400); ctx.lineTo(400,400); ctx.lineTo(400,0); ctx.lineTo(0,0); ctx.lineTo(400,400);
|
||||
ctx.moveTo(0,0); ctx.lineTo(0,SIZE); ctx.lineTo(SIZE,SIZE); ctx.lineTo(SIZE,0); ctx.lineTo(0,0); ctx.lineTo(SIZE,SIZE);
|
||||
ctx.stroke()
|
||||
ctx.beginPath()
|
||||
ctx.setLineDash([1,2])
|
||||
for (let i=40; i<400; i+=40) {
|
||||
const n = SIZE / 10
|
||||
for (let i=n; i<SIZE; i+=n) {
|
||||
ctx.moveTo(0,i)
|
||||
ctx.lineTo(400,i)
|
||||
ctx.lineTo(SIZE,i)
|
||||
ctx.moveTo(i,0)
|
||||
ctx.lineTo(i,400)
|
||||
ctx.lineTo(i,SIZE)
|
||||
}
|
||||
ctx.stroke()
|
||||
ctx.beginPath()
|
||||
@ -79,8 +83,8 @@
|
||||
const x = i / numSamples;
|
||||
const y = fn(x);
|
||||
|
||||
const canvasX = x * 400;
|
||||
const canvasY = y * 400;
|
||||
const canvasX = x * SIZE;
|
||||
const canvasY = y * SIZE;
|
||||
|
||||
if (i === 0) {
|
||||
ctx.moveTo(canvasX, canvasY);
|
||||
@ -97,14 +101,14 @@
|
||||
ctx.fillStyle = "yellow"
|
||||
for (let i=0; i< iterations; i++) {
|
||||
const alpha = ( start + i * step ) / 100
|
||||
const x = alpha*400
|
||||
const y = fn(alpha) * 400
|
||||
if (x <= 400) {
|
||||
const x = alpha*SIZE
|
||||
const y = fn(alpha) * SIZE
|
||||
if (x <= SIZE) {
|
||||
ctx.rect(x-3,y-3,6,6)
|
||||
ctx.fill()
|
||||
} else {
|
||||
ctx.strokeStyle = 'red'
|
||||
ctx.moveTo(0,0); ctx.lineTo(0,400); ctx.lineTo(400,400); ctx.lineTo(400,0); ctx.lineTo(0,0); ctx.lineTo(400,400);
|
||||
ctx.moveTo(0,0); ctx.lineTo(0,SIZE); ctx.lineTo(SIZE,SIZE); ctx.lineTo(SIZE,0); ctx.lineTo(0,0); ctx.lineTo(SIZE,SIZE);
|
||||
ctx.stroke()
|
||||
addLogMessage('<i>Warning: maximum ratio is ≥ 100%</i>')
|
||||
}
|
||||
@ -128,7 +132,7 @@
|
||||
}
|
||||
|
||||
/////////////////////// Tab implementation
|
||||
document.querySelector('#tab-container')?.insertAdjacentHTML('beforeend', `
|
||||
document.querySelector('.tab-container')?.insertAdjacentHTML('beforeend', `
|
||||
<span id="tab-merge" class="tab">
|
||||
<span><i class="fa fa-code-merge icon"></i> Merge models <small>(beta)</small></span>
|
||||
</span>
|
||||
@ -156,7 +160,6 @@
|
||||
<style>
|
||||
#tab-content-merge .tab-content-inner {
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
padding: 10pt;
|
||||
}
|
||||
.merge-container {
|
||||
@ -172,6 +175,17 @@
|
||||
"merge-input merge-config"
|
||||
"merge-buttons merge-buttons";
|
||||
}
|
||||
.merge-container p {
|
||||
margin-top: 3pt;
|
||||
margin-bottom: 3pt;
|
||||
}
|
||||
.merge-config .tab-content {
|
||||
background: var(--background-color1);
|
||||
border-radius: 3pt;
|
||||
}
|
||||
.merge-config .tab-content-inner {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.merge-input {
|
||||
grid-area: merge-input;
|
||||
@ -201,6 +215,7 @@
|
||||
overflow-x:hidden;
|
||||
overflow-y:scroll;
|
||||
background:var(--background-color1);
|
||||
border-radius: 3pt;
|
||||
}
|
||||
div#merge-log i {
|
||||
color: hsl(var(--accent-hue), 100%, calc(2*var(--accent-lightness)));
|
||||
@ -210,13 +225,21 @@
|
||||
background: var(--background-color4);
|
||||
color: var(--text-color);
|
||||
}
|
||||
#merge-type-tabs {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
#merge-log-container {
|
||||
display: none;
|
||||
}
|
||||
.merge-container #merge-warning {
|
||||
color: rgb(153, 153, 153);
|
||||
}
|
||||
</style>
|
||||
`)
|
||||
|
||||
merge.innerHTML = `
|
||||
<div class="merge-container panel-box">
|
||||
<div class="merge-input">
|
||||
<h1>Batch merger</h1>
|
||||
<p><label for="#mergeModelA">Select Model A:</label></p>
|
||||
<select id="mergeModelA">
|
||||
<option>A</option>
|
||||
@ -225,52 +248,95 @@
|
||||
<select id="mergeModelB">
|
||||
<option>A</option>
|
||||
</select>
|
||||
<p><small><b>Important:</b> Please merge models of similar type.<br/>For e.g. <code>SD 1.4</code> models with only <code>SD 1.4/1.5</code> models,<br/> <code>SD 2.0</code> with <code>SD 2.0</code>-type, and <code>SD 2.1</code> with <code>SD 2.1</code>-type models.</small></p>
|
||||
<p><label for="#merge-log">Log messages:</label></p>
|
||||
<div id="merge-log"></div>
|
||||
</div>
|
||||
<div class="merge-config">
|
||||
<br/><br/>
|
||||
<p id="merge-warning"><small><b>Important:</b> Please merge models of similar type.<br/>For e.g. <code>SD 1.4</code> models with only <code>SD 1.4/1.5</code> models,<br/><code>SD 2.0</code> with <code>SD 2.0</code>-type, and <code>SD 2.1</code> with <code>SD 2.1</code>-type models.</small></p>
|
||||
<br/>
|
||||
<table>
|
||||
<tr><td><label for="#merge-filename">Output file name:</label></td>
|
||||
<td> <input id="merge-filename" size=24></td>
|
||||
<td> <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Base name of the output file.<br>Mix ratio and file suffix will be appended to this.</span></i></td></tr>
|
||||
<tr><td><label for="#merge-format">File format:</label></td><td> <select id="merge-format">
|
||||
<option value="safetensors">Safetensors (recommended)</option>
|
||||
<option value="ckpt">CKPT (legacy format)</option>
|
||||
</select></td>
|
||||
<td> <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Use safetensors. It's the better format. Only use ckpt if you want to use<br>the models in legacy software not supporting saftensors.</span></i></td></tr>
|
||||
<tr><td> </td></tr>
|
||||
<tr><td><label for="#merge-count">Step count:</label></td>
|
||||
<td> <input id="merge-count" size=2 value="5"></td>
|
||||
<td> <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Number of models to create</span></i></td></tr>
|
||||
<tr><td><label for="#merge-start">Start batch from:</label></td>
|
||||
<td> <input id="merge-start" size=2 value="5">%</td>
|
||||
<td> <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Smallest share of model A in the mix</span></i></td></tr>
|
||||
<tr><td><label for="#merge-step">Step size:</label></td>
|
||||
<td> <input id="merge-step" size=2 value="10">%</td>
|
||||
<td> <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Share of model A added into the mix per step</span></i></td></tr>
|
||||
<tr><td><label for="#merge-interpolation">Interpolation model:</label></td>
|
||||
<td> <select id="merge-interpolation">
|
||||
<option>Exact</option>
|
||||
<option>SmoothStep</option>
|
||||
<option>SmootherStep</option>
|
||||
<option>SmoothestStep</option>
|
||||
</select></td>
|
||||
<td> <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Sigmoid function to be applied to the model share before mixing</span></i></td></tr>
|
||||
<tr><td><label for="#merge-fp">Float precision:</label></td><td> <select id="merge-fp">
|
||||
<option value="fp16">fp16 - Half precision (compact file size)</option>
|
||||
<option value="fp32">fp32 - Full precision (larger file size)</option>
|
||||
</select></td>
|
||||
<td> <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Image generation uses fp16, so it's a good choice.<br>Use fp32 if you want to use the result models for more mixes</span></i></td></tr>
|
||||
<tr>
|
||||
<td><label for="#merge-filename">Output file name:</label></td>
|
||||
<td><input id="merge-filename" size=24> <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Base name of the output file.<br>Mix ratio and file suffix will be appended to this.</span></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="#merge-fp">Output precision:</label></td>
|
||||
<td><select id="merge-fp">
|
||||
<option value="fp16">fp16 (smaller file size)</option>
|
||||
<option value="fp32">fp32 (larger file size)</option>
|
||||
</select>
|
||||
<i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Image generation uses fp16, so it's a good choice.<br>Use fp32 if you want to use the result models for more mixes</span></i>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="#merge-format">Output file format:</label></td>
|
||||
<td><select id="merge-format">
|
||||
<option value="safetensors">Safetensors (recommended)</option>
|
||||
<option value="ckpt">CKPT/Pickle (legacy format)</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br/>
|
||||
<canvas id="merge-canvas" width="400" height="400"></canvas>
|
||||
<div id="merge-log-container">
|
||||
<p><label for="#merge-log">Log messages:</label></p>
|
||||
<div id="merge-log"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="merge-config">
|
||||
<div class="tab-container">
|
||||
<span id="tab-merge-opts-single" class="tab active">
|
||||
<span>Make a single file</small></span>
|
||||
</span>
|
||||
<span id="tab-merge-opts-batch" class="tab">
|
||||
<span>Make multiple variations</small></span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div id="tab-content-merge-opts-single" class="tab-content active">
|
||||
<div class="tab-content-inner">
|
||||
<small>Saves a single merged model file, at the specified merge ratio.</small><br/><br/>
|
||||
<label for="#single-merge-ratio-slider">Merge ratio:</label>
|
||||
<input id="single-merge-ratio-slider" name="single-merge-ratio-slider" class="editor-slider" value="50" type="range" min="1" max="1000">
|
||||
<input id="single-merge-ratio" size=2 value="5">%
|
||||
<i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Model A's contribution to the mix. The rest will be from Model B.</span></i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-content-merge-opts-batch" class="tab-content">
|
||||
<div class="tab-content-inner">
|
||||
<small>Saves multiple variations of the model, at different merge ratios.<br/>Each variation will be saved as a separate file.</small><br/><br/>
|
||||
<table>
|
||||
<tr><td><label for="#merge-count">Number of variations:</label></td>
|
||||
<td> <input id="merge-count" size=2 value="5"></td>
|
||||
<td> <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Number of models to create</span></i></td></tr>
|
||||
<tr><td><label for="#merge-start">Starting merge ratio:</label></td>
|
||||
<td> <input id="merge-start" size=2 value="5">%</td>
|
||||
<td> <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Smallest share of model A in the mix</span></i></td></tr>
|
||||
<tr><td><label for="#merge-step">Increment each step:</label></td>
|
||||
<td> <input id="merge-step" size=2 value="10">%</td>
|
||||
<td> <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Share of model A added into the mix per step</span></i></td></tr>
|
||||
<tr><td><label for="#merge-interpolation">Interpolation model:</label></td>
|
||||
<td> <select id="merge-interpolation">
|
||||
<option>Exact</option>
|
||||
<option>SmoothStep</option>
|
||||
<option>SmootherStep</option>
|
||||
<option>SmoothestStep</option>
|
||||
</select></td>
|
||||
<td> <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Sigmoid function to be applied to the model share before mixing</span></i></td></tr>
|
||||
</table>
|
||||
<br/>
|
||||
<small>Preview of variation ratios:</small><br/>
|
||||
<canvas id="merge-canvas" width="400" height="400"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="merge-buttons">
|
||||
<button id="merge-button" class="primaryButton">Merge models</button>
|
||||
</div>
|
||||
</div>`
|
||||
|
||||
const tabSettingsSingle = document.querySelector('#tab-merge-opts-single')
|
||||
const tabSettingsBatch = document.querySelector('#tab-merge-opts-batch')
|
||||
linkTabContents(tabSettingsSingle)
|
||||
linkTabContents(tabSettingsBatch)
|
||||
|
||||
/////////////////////// Event Listener
|
||||
document.addEventListener('tabClick', (e) => {
|
||||
@ -278,16 +344,38 @@
|
||||
console.log('Activate')
|
||||
let modelList = stableDiffusionModelField.cloneNode(true)
|
||||
modelList.id = "mergeModelA"
|
||||
modelList.size = 8
|
||||
document.querySelector("#mergeModelA").replaceWith(modelList)
|
||||
modelList = stableDiffusionModelField.cloneNode(true)
|
||||
modelList.id = "mergeModelB"
|
||||
modelList.size = 8
|
||||
document.querySelector("#mergeModelB").replaceWith(modelList)
|
||||
updateChart()
|
||||
}
|
||||
})
|
||||
|
||||
// slider
|
||||
const singleMergeRatioField = document.querySelector('#single-merge-ratio')
|
||||
const singleMergeRatioSlider = document.querySelector('#single-merge-ratio-slider')
|
||||
|
||||
function updateSingleMergeRatio() {
|
||||
singleMergeRatioField.value = singleMergeRatioSlider.value / 10
|
||||
singleMergeRatioField.dispatchEvent(new Event("change"))
|
||||
}
|
||||
|
||||
function updateSingleMergeRatioSlider() {
|
||||
if (singleMergeRatioField.value < 0) {
|
||||
singleMergeRatioField.value = 0
|
||||
} else if (singleMergeRatioField.value > 100) {
|
||||
singleMergeRatioField.value = 100
|
||||
}
|
||||
|
||||
singleMergeRatioSlider.value = singleMergeRatioField.value * 10
|
||||
singleMergeRatioSlider.dispatchEvent(new Event("change"))
|
||||
}
|
||||
|
||||
singleMergeRatioSlider.addEventListener('input', updateSingleMergeRatio)
|
||||
singleMergeRatioField.addEventListener('input', updateSingleMergeRatioSlider)
|
||||
updateSingleMergeRatio()
|
||||
|
||||
document.querySelector('.merge-config').addEventListener('change', updateChart)
|
||||
|
||||
document.querySelector('#merge-button').addEventListener('click', async function(e) {
|
||||
@ -299,12 +387,20 @@
|
||||
let iterations = document.querySelector('#merge-count').value>>0
|
||||
let start = parseFloat( document.querySelector('#merge-start').value )
|
||||
let step = parseFloat( document.querySelector('#merge-step').value )
|
||||
addLogMessage(`start = ${start}%`)
|
||||
addLogMessage(`step = ${step}%`)
|
||||
|
||||
if (start + iterations * (step-1) >= 100) {
|
||||
if (isTabActive(tabSettingsSingle)) {
|
||||
start = parseFloat(singleMergeRatioField.value)
|
||||
step = 0
|
||||
iterations = 1
|
||||
addLogMessage(`merge ratio = ${start}%`)
|
||||
} else {
|
||||
addLogMessage(`start = ${start}%`)
|
||||
addLogMessage(`step = ${step}%`)
|
||||
}
|
||||
|
||||
if (start + (iterations-1) * step >= 100) {
|
||||
addLogMessage('<i>Aborting: maximum ratio is ≥ 100%</i>')
|
||||
addLogMessage('Reduce the number of steps or the step size')
|
||||
addLogMessage('Reduce the number of variations or the step size')
|
||||
addLogSeparator()
|
||||
document.querySelector('#merge-count').focus()
|
||||
return
|
||||
@ -332,12 +428,6 @@
|
||||
// Batch main loop
|
||||
for (let i=0; i<iterations; i++) {
|
||||
let alpha = ( start + i * step ) / 100
|
||||
addLogMessage(`merging batch job ${i+1}/${iterations}, alpha = ${alpha}...`)
|
||||
|
||||
request['out_path'] = document.querySelector('#merge-filename').value
|
||||
request['out_path'] += '-' +alpha+ '.' + document.querySelector('#merge-format').value
|
||||
addLogMessage(` filename: ${request['out_path']}`)
|
||||
|
||||
switch (document.querySelector('#merge-interpolation').value) {
|
||||
case 'SmoothStep':
|
||||
alpha = smoothstep(alpha)
|
||||
@ -349,6 +439,12 @@
|
||||
alpha = smootheststep(alpha)
|
||||
break
|
||||
}
|
||||
addLogMessage(`merging batch job ${i+1}/${iterations}, alpha = ${alpha.toFixed(5)}...`)
|
||||
|
||||
request['out_path'] = document.querySelector('#merge-filename').value
|
||||
request['out_path'] += '-' + alpha.toFixed(5) + '.' + document.querySelector('#merge-format').value
|
||||
addLogMessage(` filename: ${request['out_path']}`)
|
||||
|
||||
request['ratio'] = alpha
|
||||
let res = await fetch('/model/merge', {
|
||||
method: 'POST',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user