extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-05-30 14:49:55 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
cmdr2 2023-02-06 13:49:15 +05:30
parent 0b3a35c4b6
commit d0c4e95de3
1 changed files with 159 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
ui/plugins/ui/merge.plugin.js
View File

@ -36,6 +36,8 @@
// Scroll to the bottom of the log // Scroll to the bottom of the log
logContainer.scrollTop = logContainer.scrollHeight; logContainer.scrollTop = logContainer.scrollHeight;
document.querySelector('#merge-log-container').style.display = 'block'
} }
function addLogSeparator() { function addLogSeparator() {
@ -46,8 +48,9 @@
} }
function drawDiagram(fn) { function drawDiagram(fn) {
const SIZE = 300
const canvas = document.getElementById('merge-canvas'); const canvas = document.getElementById('merge-canvas');
canvas.width=canvas.width canvas.height = canvas.width = SIZE
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
// Draw coordinate system // Draw coordinate system
@ -57,15 +60,16 @@
ctx.beginPath(); ctx.beginPath();
ctx.strokeStyle = 'white' 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.stroke()
ctx.beginPath() ctx.beginPath()
ctx.setLineDash([1,2]) 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.moveTo(0,i)
ctx.lineTo(400,i) ctx.lineTo(SIZE,i)
ctx.moveTo(i,0) ctx.moveTo(i,0)
ctx.lineTo(i,400) ctx.lineTo(i,SIZE)
} }
ctx.stroke() ctx.stroke()
ctx.beginPath() ctx.beginPath()
@ -79,8 +83,8 @@
const x = i / numSamples; const x = i / numSamples;
const y = fn(x); const y = fn(x);
const canvasX = x * 400; const canvasX = x * SIZE;
const canvasY = y * 400; const canvasY = y * SIZE;
if (i === 0) { if (i === 0) {
ctx.moveTo(canvasX, canvasY); ctx.moveTo(canvasX, canvasY);
@ -97,14 +101,14 @@
ctx.fillStyle = "yellow" ctx.fillStyle = "yellow"
for (let i=0; i< iterations; i++) { for (let i=0; i< iterations; i++) {
const alpha = ( start + i * step ) / 100 const alpha = ( start + i * step ) / 100
const x = alpha*400 const x = alpha*SIZE
const y = fn(alpha) * 400 const y = fn(alpha) * SIZE
if (x <= 400) { if (x <= SIZE) {
ctx.rect(x-3,y-3,6,6) ctx.rect(x-3,y-3,6,6)
ctx.fill() ctx.fill()
} else { } else {
ctx.strokeStyle = 'red' 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() ctx.stroke()
addLogMessage('<i>Warning: maximum ratio is &#8805; 100%</i>') addLogMessage('<i>Warning: maximum ratio is &#8805; 100%</i>')
} }
@ -128,7 +132,7 @@
} }
/////////////////////// Tab implementation /////////////////////// Tab implementation
document.querySelector('#tab-container')?.insertAdjacentHTML('beforeend', ` document.querySelector('.tab-container')?.insertAdjacentHTML('beforeend', `
<span id="tab-merge" class="tab"> <span id="tab-merge" class="tab">
<span><i class="fa fa-code-merge icon"></i> Merge models <small>(beta)</small></span> <span><i class="fa fa-code-merge icon"></i> Merge models <small>(beta)</small></span>
</span> </span>
@ -156,7 +160,6 @@
<style> <style>
#tab-content-merge .tab-content-inner { #tab-content-merge .tab-content-inner {
max-width: 100%; max-width: 100%;
text-align: center;
padding: 10pt; padding: 10pt;
} }
.merge-container { .merge-container {
@ -172,6 +175,17 @@
"merge-input merge-config" "merge-input merge-config"
"merge-buttons merge-buttons"; "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 { .merge-input {
grid-area: merge-input; grid-area: merge-input;
@ -201,6 +215,7 @@
overflow-x:hidden; overflow-x:hidden;
overflow-y:scroll; overflow-y:scroll;
background:var(--background-color1); background:var(--background-color1);
border-radius: 3pt;
} }
div#merge-log i { div#merge-log i {
color: hsl(var(--accent-hue), 100%, calc(2*var(--accent-lightness))); color: hsl(var(--accent-hue), 100%, calc(2*var(--accent-lightness)));
@ -210,13 +225,21 @@
background: var(--background-color4); background: var(--background-color4);
color: var(--text-color); 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> </style>
`) `)
merge.innerHTML = ` merge.innerHTML = `
<div class="merge-container panel-box"> <div class="merge-container panel-box">
<div class="merge-input"> <div class="merge-input">
<h1>Batch merger</h1>
<p><label for="#mergeModelA">Select Model A:</label></p> <p><label for="#mergeModelA">Select Model A:</label></p>
<select id="mergeModelA"> <select id="mergeModelA">
<option>A</option> <option>A</option>
@ -225,52 +248,95 @@
<select id="mergeModelB"> <select id="mergeModelB">
<option>A</option> <option>A</option>
</select> </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> <br/><br/>
<p><label for="#merge-log">Log messages:</label></p> <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>
<div id="merge-log"></div> <br/>
</div>
<div class="merge-config">
<table> <table>
<tr><td><label for="#merge-filename">Output file name:</label></td> <tr>
<td> <input id="merge-filename" size=24></td> <td><label for="#merge-filename">Output file name:</label></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> <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><td><label for="#merge-format">File format:</label></td><td> <select id="merge-format"> </tr>
<option value="safetensors">Safetensors (recommended)</option> <tr>
<option value="ckpt">CKPT (legacy format)</option> <td><label for="#merge-fp">Output precision:</label></td>
</select></td> <td><select id="merge-fp">
<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> <option value="fp16">fp16 (smaller file size)</option>
<tr><td>&nbsp;</td></tr> <option value="fp32">fp32 (larger file size)</option>
<tr><td><label for="#merge-count">Step count:</label></td> </select>
<td> <input id="merge-count" size=2 value="5"></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> <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Number of models to create</span></i></td></tr> </td>
<tr><td><label for="#merge-start">Start batch from:</label></td> </tr>
<td> <input id="merge-start" size=2 value="5">%</td> <tr>
<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> <td><label for="#merge-format">Output file format:</label></td>
<tr><td><label for="#merge-step">Step size:</label></td> <td><select id="merge-format">
<td> <input id="merge-step" size=2 value="10">%</td> <option value="safetensors">Safetensors (recommended)</option>
<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> <option value="ckpt">CKPT/Pickle (legacy format)</option>
<tr><td><label for="#merge-interpolation">Interpolation model:</label></td> </select>
<td> <select id="merge-interpolation"> </td>
<option>Exact</option> </tr>
<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>
</table> </table>
<br/> <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>
<div class="merge-buttons"> <div class="merge-buttons">
<button id="merge-button" class="primaryButton">Merge models</button> <button id="merge-button" class="primaryButton">Merge models</button>
</div> </div>
</div>` </div>`
const tabSettingsSingle = document.querySelector('#tab-merge-opts-single')
const tabSettingsBatch = document.querySelector('#tab-merge-opts-batch')
linkTabContents(tabSettingsSingle)
linkTabContents(tabSettingsBatch)
/////////////////////// Event Listener /////////////////////// Event Listener
document.addEventListener('tabClick', (e) => { document.addEventListener('tabClick', (e) => {
@ -278,16 +344,38 @@
console.log('Activate') console.log('Activate')
let modelList = stableDiffusionModelField.cloneNode(true) let modelList = stableDiffusionModelField.cloneNode(true)
modelList.id = "mergeModelA" modelList.id = "mergeModelA"
modelList.size = 8
document.querySelector("#mergeModelA").replaceWith(modelList) document.querySelector("#mergeModelA").replaceWith(modelList)
modelList = stableDiffusionModelField.cloneNode(true) modelList = stableDiffusionModelField.cloneNode(true)
modelList.id = "mergeModelB" modelList.id = "mergeModelB"
modelList.size = 8
document.querySelector("#mergeModelB").replaceWith(modelList) document.querySelector("#mergeModelB").replaceWith(modelList)
updateChart() 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-config').addEventListener('change', updateChart)
document.querySelector('#merge-button').addEventListener('click', async function(e) { document.querySelector('#merge-button').addEventListener('click', async function(e) {
@ -299,12 +387,20 @@
let iterations = document.querySelector('#merge-count').value>>0 let iterations = document.querySelector('#merge-count').value>>0
let start = parseFloat( document.querySelector('#merge-start').value ) let start = parseFloat( document.querySelector('#merge-start').value )
let step = parseFloat( document.querySelector('#merge-step').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 &#8805; 100%</i>') addLogMessage('<i>Aborting: maximum ratio is &#8805; 100%</i>')
addLogMessage('Reduce the number of steps or the step size') addLogMessage('Reduce the number of variations or the step size')
addLogSeparator() addLogSeparator()
document.querySelector('#merge-count').focus() document.querySelector('#merge-count').focus()
return return
@ -332,12 +428,6 @@
// Batch main loop // Batch main loop
for (let i=0; i<iterations; i++) { for (let i=0; i<iterations; i++) {
let alpha = ( start + i * step ) / 100 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(`&nbsp;&nbsp;filename: ${request['out_path']}`)
switch (document.querySelector('#merge-interpolation').value) { switch (document.querySelector('#merge-interpolation').value) {
case 'SmoothStep': case 'SmoothStep':
alpha = smoothstep(alpha) alpha = smoothstep(alpha)
@ -349,6 +439,12 @@
alpha = smootheststep(alpha) alpha = smootheststep(alpha)
break 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(`&nbsp;&nbsp;filename: ${request['out_path']}`)
request['ratio'] = alpha request['ratio'] = alpha
let res = await fetch('/model/merge', { let res = await fetch('/model/merge', {
method: 'POST', method: 'POST',