diff --git a/CHANGES.md b/CHANGES.md
index 1382322d..e9f06929 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -17,6 +17,9 @@
 - **Major rewrite of the code** - We've switched to using diffusers under-the-hood, which allows us to release new features faster, and focus on making the UI and installer even easier to use.
 
 ### Detailed changelog
+* 3.0.6 - 18 Sep 2023 - Add thumbnails to embeddings from the UI, using the new `Upload Thumbnail` button in the Embeddings popup. Thanks @JeLuf.
+* 3.0.6 - 15 Sep 2023 - Fix broken embeddings dialog when LoRA information couldn't be fetched.
+* 3.0.6 - 14 Sep 2023 - UI for adding notes to LoRA files (to help you remember which prompts to use). Also added a button to automatically fetch prompts from Civitai for a LoRA file, using the `Import from Civitai` button. Thanks @JeLuf.
 * 3.0.5 - 2 Sep 2023 - Support SDXL ControlNets.
 * 3.0.4 - 1 Sep 2023 - Fix incorrect metadata generated for embeddings, when the exact word doesn't match the case, or is part of a larger word.
 * 3.0.4 - 1 Sep 2023 - Simplify the installation for AMD users on Linux. Thanks @JeLuf.
diff --git a/scripts/check_modules.py b/scripts/check_modules.py
index d522a9c5..aa96acb3 100644
--- a/scripts/check_modules.py
+++ b/scripts/check_modules.py
@@ -21,7 +21,7 @@ os_name = platform.system()
 modules_to_check = {
     "torch": ("1.11.0", "1.13.1", "2.0.0", "2.0.1"),
     "torchvision": ("0.12.0", "0.14.1", "0.15.1", "0.15.2"),
-    "sdkit": "2.0.10",
+    "sdkit": "2.0.12",
     "stable-diffusion-sdkit": "2.1.4",
     "rich": "12.6.0",
     "uvicorn": "0.19.0",
diff --git a/scripts/on_sd_start.bat b/scripts/on_sd_start.bat
index ccbb97fe..51668fbd 100644
--- a/scripts/on_sd_start.bat
+++ b/scripts/on_sd_start.bat
@@ -34,6 +34,7 @@ call conda activate
 
 @REM remove the old version of the dev console script, if it's still present
 if exist "Open Developer Console.cmd" del "Open Developer Console.cmd"
+if exist "ui\plugins\ui\merge.plugin.js" del "ui\plugins\ui\merge.plugin.js"
 
 @rem create the stable-diffusion folder, to work with legacy installations
 if not exist "stable-diffusion" mkdir stable-diffusion
diff --git a/scripts/on_sd_start.sh b/scripts/on_sd_start.sh
index 48161cd3..fbd39f8c 100755
--- a/scripts/on_sd_start.sh
+++ b/scripts/on_sd_start.sh
@@ -6,6 +6,7 @@ cp sd-ui-files/scripts/bootstrap.sh scripts/
 cp sd-ui-files/scripts/check_modules.py scripts/
 cp sd-ui-files/scripts/get_config.py scripts/
 cp sd-ui-files/scripts/config.yaml.sample scripts/
+     
 
 source ./scripts/functions.sh
 
@@ -20,6 +21,10 @@ if [ -e "open_dev_console.sh" ]; then
     rm "open_dev_console.sh"
 fi
 
+if [ -e "ui/plugins/ui/merge.plugin.js" ]; then
+    rm "ui/plugins/ui/merge.plugin.js"
+fi
+
 # set the correct installer path (current vs legacy)
 if [ -e "installer_files/env" ]; then
     export INSTALL_ENV_DIR="$(pwd)/installer_files/env"
diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py
index 60a4ed6c..c4f4c7e1 100644
--- a/ui/easydiffusion/bucket_manager.py
+++ b/ui/easydiffusion/bucket_manager.py
@@ -55,8 +55,13 @@ def init():
             return bucketfiles
 
         else:
-            bucket_id = crud.get_bucket_by_path(db, path).id
+            bucket = crud.get_bucket_by_path(db, path)
+            if bucket == None:
+                raise HTTPException(status_code=404, detail="Bucket not found")
+            bucket_id = bucket.id
             bucketfile = db.query(models.BucketFile).filter(models.BucketFile.bucket_id == bucket_id, models.BucketFile.filename == filename).first()
+            if bucketfile == None:
+                raise HTTPException(status_code=404, detail="File not found")
 
             suffix = get_suffix_from_filename(filename)
 
diff --git a/ui/easydiffusion/server.py b/ui/easydiffusion/server.py
index 311b3a03..5ca4f452 100644
--- a/ui/easydiffusion/server.py
+++ b/ui/easydiffusion/server.py
@@ -470,7 +470,6 @@ def modify_package_internal(package_name: str, req: dict):
 
 
 def get_sha256_internal(obj_path):
-    import hashlib
     from easydiffusion.utils import sha256sum
 
     path = obj_path.split("/")
diff --git a/ui/easydiffusion/utils/__init__.py b/ui/easydiffusion/utils/__init__.py
index f6758809..a930725b 100644
--- a/ui/easydiffusion/utils/__init__.py
+++ b/ui/easydiffusion/utils/__init__.py
@@ -1,4 +1,5 @@
 import logging
+import hashlib
 
 log = logging.getLogger("easydiffusion")
 
diff --git a/ui/index.html b/ui/index.html
index 85899647..a830ce70 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -35,7 +35,7 @@
             <h1>
                 <img id="logo_img" src="/media/images/icon-512x512.png" >
                 Easy Diffusion
-                <small><span id="version">v3.0.5</span> <span id="updateBranchLabel"></span></small>
+                <small><span id="version">v3.0.6</span> <span id="updateBranchLabel"></span></small>
             </h1>
         </div>
         <div id="server-status">
@@ -291,7 +291,9 @@
                             <option value="2048">2048</option>
                         </select>
                         <label id="widthLabel" for="width"><small><span>(width)</span></small></label>
-                        <span id="swap-width-height" class="clickable smallButton" style="margin-left: 2px; margin-right:2px;"><i class="fa-solid fa-right-left"><span class="simple-tooltip top-left"> Swap width and height </span></i></span>
+                        <div class="tooltip-container">
+                            <span id="swap-width-height" class="clickable smallButton" style="margin-left: 2px; margin-right:2px;"><i class="fa-solid fa-right-left"><span class="simple-tooltip top-left"> Swap width and height </span></i></span>
+                        </div>
                         <select id="height" name="height" value="512">
                             <option value="128">128</option>
                             <option value="192">192</option>
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 32d7df88..009c13d5 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -1214,6 +1214,12 @@ input::file-selector-button {
         visibility: visible;
     }
 }
+
+.tooltip-container {
+    display: inline-block;
+    position: relative;
+}
+
 .simple-tooltip.right {
     right: 0px;
     top: 50%;
@@ -2033,4 +2039,4 @@ div#enlarge-buttons {
     border-radius: 4pt;
     padding-top: 6pt;
     color: var(--small-label-color);
-}
\ No newline at end of file
+}
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 744568ec..101a88e7 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -511,10 +511,10 @@ function showImages(reqBody, res, outputContainer, livePreview) {
                     { text: "Upscale", on_click: onUpscaleClick },
                     { text: "Fix Faces", on_click: onFixFacesClick },
                 ],
-                {
+                { 
                     text: "Use as Thumbnail",
                     on_click: onUseAsThumbnailClick,
-                    filter: (req, img) => "use_embeddings_model" in req,
+                    filter: (req, img) => "use_embeddings_model" in req || "use_lora_model" in req
                 },
             ]
 
@@ -748,25 +748,45 @@ function onUseAsThumbnailClick(req, img) {
         onUseAsThumbnailClick.croppr.setImage(img.src)
     }
 
-    let embeddings = req.use_embeddings_model.map((e) => e.split("/").pop())
-    let LORA = []
+    useAsThumbSelect.innerHTML=""
 
-    if ("use_lora_model" in req) {
-        LORA = req.use_lora_model
+    if ("use_embeddings_model" in req) {
+        let embeddings = req.use_embeddings_model.map((e) => e.split("/").pop())
+
+        let embOptions = document.createElement("optgroup")
+        embOptions.label = "Embeddings"
+        embOptions.replaceChildren(
+            ...embeddings.map((e) => {
+                let option = document.createElement("option")
+                option.innerText = e
+                option.dataset["type"] = "embeddings"
+                return option
+            })
+        )
+        useAsThumbSelect.appendChild(embOptions)
     }
 
-    let optgroup = document.createElement("optgroup")
-    optgroup.label = "Embeddings"
-    optgroup.replaceChildren(
-        ...embeddings.map((e) => {
-            let option = document.createElement("option")
-            option.innerText = e
-            option.dataset["type"] = "embeddings"
-            return option
-        })
-    )
 
-    useAsThumbSelect.replaceChildren(optgroup)
+    if ("use_lora_model" in req) {
+        let LORA = req.use_lora_model
+        if (typeof LORA == "string") {
+            LORA = [LORA]
+        }
+        LORA = LORA.map((e) => e.split("/").pop())
+
+        let loraOptions = document.createElement("optgroup")
+        loraOptions.label = "LORA"
+        loraOptions.replaceChildren(
+            ...LORA.map((e) => {
+                let option = document.createElement("option")
+                option.innerText = e
+                option.dataset["type"] = "lora"
+                return option
+            })
+        )
+        useAsThumbSelect.appendChild(loraOptions)
+    }
+
     useAsThumbDialog.showModal()
     onUseAsThumbnailClick.scale = scale
 }
@@ -782,6 +802,50 @@ useAsThumbCancelBtn.addEventListener("click", () => {
     useAsThumbDialog.close()
 })
 
+const Bucket = {
+    upload(path, blob) {
+        const formData = new FormData()
+        formData.append("file", blob)
+        return fetch(`bucket/${path}`, {
+            method: "POST",
+            body: formData,
+        })
+    },
+
+    getImageAsDataURL(path) {
+        return fetch(`bucket/${path}`)
+            .then((response) => {
+                if (response.status == 200) {
+                    return response.blob()
+                } else {
+                    throw new Error("Bucket error")
+                }
+            })
+            .then((blob) => {
+                return new Promise((resolve, reject) => {
+                    const reader = new FileReader()
+                    reader.onload = () => resolve(reader.result)
+                    reader.onerror = reject
+                    reader.readAsDataURL(blob)
+                })
+            })
+    },
+
+    getList(path) {
+        return fetch(`bucket/${path}`)
+            .then((response) => (response.status == 200 ? response.json() : []))
+    },
+
+    store(path, data) {
+        return Bucket.upload(`${path}.json`, JSON.stringify(data))
+    },
+
+    retrieve(path) {
+        return fetch(`bucket/${path}.json`)
+            .then((response) => (response.status == 200 ? response.json() : null))
+    },
+}
+
 useAsThumbSaveBtn.addEventListener("click", (e) => {
     let scale = 1 / onUseAsThumbnailClick.scale
     let crop = onUseAsThumbnailClick.croppr.getValue()
@@ -793,22 +857,18 @@ useAsThumbSaveBtn.addEventListener("click", (e) => {
         .then((thumb) => fetch(thumb))
         .then((response) => response.blob())
         .then(async function(blob) {
-            const formData = new FormData()
-            formData.append("file", blob)
             let options = useAsThumbSelect.selectedOptions
             let promises = []
             for (let embedding of options) {
                 promises.push(
-                    fetch(`bucket/${profileName}/${embedding.dataset["type"]}/${embedding.value}.png`, {
-                        method: "POST",
-                        body: formData,
-                    })
+                    Bucket.upload(`${profileName}/${embedding.dataset["type"]}/${embedding.value}.png`, blob)
                 )
             }
             return Promise.all(promises)
         })
         .then(() => {
             useAsThumbDialog.close()
+            document.dispatchEvent(new CustomEvent("saveThumb", { detail: useAsThumbSelect.selectedOptions }))
         })
         .catch((error) => {
             console.error(error)
@@ -2362,20 +2422,10 @@ function loadThumbnailImageFromFile() {
 }
 
 function updateEmbeddingsList(filter = "") {
-    function html(model, iconlist = [], prefix = "", filter = "") {
+    function html(model, iconMap = {}, prefix = "", filter = "") {
         filter = filter.toLowerCase()
         let toplevel = document.createElement("div")
         let folders = document.createElement("div")
-        let embIcon = Object.assign(
-            {},
-            ...iconlist.map((x) => ({
-                [x
-                    .toLowerCase()
-                    .split(".")
-                    .slice(0, -1)
-                    .join(".")]: x,
-            }))
-        )
 
         let profileName = profileNameField.value
         model?.forEach((m) => {
@@ -2383,13 +2433,9 @@ function updateEmbeddingsList(filter = "") {
                 let token = m.toLowerCase()
                 if (token.search(filter) != -1) {
                     let button
-                    // if (iconlist.length==0) {
-                    //     button = document.createElement("button")
-                    //     button.innerText = m
-                    // } else {
                     let img = "/media/images/noimg.png"
-                    if (token in embIcon) {
-                        img = `/bucket/${profileName}/embeddings/${embIcon[token]}`
+                    if (token in iconMap) {
+                        img = `/bucket/${profileName}/${iconMap[token]}`
                     }
                     button = createModifierCard(m, [img, img], true)
                     // }
@@ -2398,7 +2444,7 @@ function updateEmbeddingsList(filter = "") {
                     toplevel.appendChild(button)
                 }
             } else {
-                let subdir = html(m[1], iconlist, prefix + m[0] + "/", filter)
+                let subdir = html(m[1], iconMap, prefix + m[0] + "/", filter)
                 if (typeof subdir == "object") {
                     let div1 = document.createElement("div")
                     let div2 = document.createElement("div")
@@ -2457,11 +2503,44 @@ function updateEmbeddingsList(filter = "") {
         </div>
     `
 
+    let loraTokens = []
     let profileName = profileNameField.value
-    fetch(`/bucket/${profileName}/embeddings/`)
-        .then((response) => (response.status == 200 ? response.json() : []))
-        .then(async function(iconlist) {
-            embeddingsList.replaceChildren(html(modelsOptions.embeddings, iconlist, "", filter))
+    let iconMap = {}
+
+    Bucket.getList(`${profileName}/embeddings/`)
+        .then((icons) => {
+            iconMap = Object.assign(
+                {},
+                ...icons.map((x) => ({
+                    [x
+                        .toLowerCase()
+                        .split(".")
+                        .slice(0, -1)
+                        .join(".")]: `embeddings/${x}`,
+                }))
+            )
+
+            return Bucket.getList(`${profileName}/lora/`)
+        })
+        .then(async function (icons) {
+            for (let lora of loraModelField.value.modelNames) {
+                let keywords = await getLoraKeywords(lora)
+                loraTokens = loraTokens.concat(keywords)
+                let loraname = lora.split("/").pop()
+
+                if (icons.includes(`${loraname}.png`)) {
+                    keywords.forEach((kw) => {
+                        iconMap[kw.toLowerCase()] = `lora/${loraname}.png`
+                        
+                    })
+                }
+            }
+
+            let tokenList = [...modelsOptions.embeddings]
+            if (loraTokens.length != 0) {
+                tokenList.unshift(['LORA Keywords', loraTokens])
+            }
+            embeddingsList.replaceChildren(html(tokenList, iconMap, "", filter))
             createCollapsibles(embeddingsList)
             if (filter != "") {
                 embeddingsExpandAll()
diff --git a/ui/media/js/parameters.js b/ui/media/js/parameters.js
index 96d119ef..a3206167 100644
--- a/ui/media/js/parameters.js
+++ b/ui/media/js/parameters.js
@@ -737,6 +737,7 @@ async function getSystemInfo() {
             if (force == true) {
                 saveToDiskField.checked = true
                 metadataOutputFormatField.disabled = false
+                metadataOutputFormatField.value = "json"
             }
             saveToDiskField.disabled = force
             diskPathField.disabled = force
diff --git a/ui/plugins/ui/merge.plugin.js b/ui/plugins/ui/merge.plugin.js
deleted file mode 100644
index d3ddedbf..00000000
--- a/ui/plugins/ui/merge.plugin.js
+++ /dev/null
@@ -1,454 +0,0 @@
-;(function() {
-    "use strict"
-
-    ///////////////////// Function section
-    function smoothstep(x) {
-        return x * x * (3 - 2 * x)
-    }
-
-    function smootherstep(x) {
-        return x * x * x * (x * (x * 6 - 15) + 10)
-    }
-
-    function smootheststep(x) {
-        let y = -20 * Math.pow(x, 7)
-        y += 70 * Math.pow(x, 6)
-        y -= 84 * Math.pow(x, 5)
-        y += 35 * Math.pow(x, 4)
-        return y
-    }
-    function getCurrentTime() {
-        const now = new Date()
-        let hours = now.getHours()
-        let minutes = now.getMinutes()
-        let seconds = now.getSeconds()
-
-        hours = hours < 10 ? `0${hours}` : hours
-        minutes = minutes < 10 ? `0${minutes}` : minutes
-        seconds = seconds < 10 ? `0${seconds}` : seconds
-
-        return `${hours}:${minutes}:${seconds}`
-    }
-
-    function addLogMessage(message) {
-        const logContainer = document.getElementById("merge-log")
-        logContainer.innerHTML += `<i>${getCurrentTime()}</i> ${message}<br>`
-
-        // Scroll to the bottom of the log
-        logContainer.scrollTop = logContainer.scrollHeight
-
-        document.querySelector("#merge-log-container").style.display = "block"
-    }
-
-    function addLogSeparator() {
-        const logContainer = document.getElementById("merge-log")
-        logContainer.innerHTML += "<hr>"
-
-        logContainer.scrollTop = logContainer.scrollHeight
-    }
-
-    function drawDiagram(fn) {
-        const SIZE = 300
-        const canvas = document.getElementById("merge-canvas")
-        canvas.height = canvas.width = SIZE
-        const ctx = canvas.getContext("2d")
-
-        // Draw coordinate system
-        ctx.scale(1, -1)
-        ctx.translate(0, -canvas.height)
-        ctx.lineWidth = 1
-        ctx.beginPath()
-
-        ctx.strokeStyle = "white"
-        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])
-        const n = SIZE / 10
-        for (let i = n; i < SIZE; i += n) {
-            ctx.moveTo(0, i)
-            ctx.lineTo(SIZE, i)
-            ctx.moveTo(i, 0)
-            ctx.lineTo(i, SIZE)
-        }
-        ctx.stroke()
-        ctx.beginPath()
-        ctx.setLineDash([])
-        ctx.beginPath()
-        ctx.strokeStyle = "black"
-        ctx.lineWidth = 3
-        // Plot function
-        const numSamples = 20
-        for (let i = 0; i <= numSamples; i++) {
-            const x = i / numSamples
-            const y = fn(x)
-
-            const canvasX = x * SIZE
-            const canvasY = y * SIZE
-
-            if (i === 0) {
-                ctx.moveTo(canvasX, canvasY)
-            } else {
-                ctx.lineTo(canvasX, canvasY)
-            }
-        }
-        ctx.stroke()
-        // Plot alpha values (yellow boxes)
-        let start = parseFloat(document.querySelector("#merge-start").value)
-        let step = parseFloat(document.querySelector("#merge-step").value)
-        let iterations = document.querySelector("#merge-count").value >> 0
-        ctx.beginPath()
-        ctx.fillStyle = "yellow"
-        for (let i = 0; i < iterations; i++) {
-            const alpha = (start + i * step) / 100
-            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, 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 &#8805; 100%</i>")
-            }
-        }
-    }
-
-    function updateChart() {
-        let fn = (x) => x
-        switch (document.querySelector("#merge-interpolation").value) {
-            case "SmoothStep":
-                fn = smoothstep
-                break
-            case "SmootherStep":
-                fn = smootherstep
-                break
-            case "SmoothestStep":
-                fn = smootheststep
-                break
-        }
-        drawDiagram(fn)
-    }
-    createTab({
-        id: "merge",
-        icon: "fa-code-merge",
-        label: "Merge models",
-        css: `
-        #tab-content-merge .tab-content-inner {
-            max-width: 100%;
-            padding: 10pt;
-        }
-        .merge-container {  
-            margin-left: 15%;
-            margin-right: 15%;
-            text-align: left;
-            display: inline-grid;
-            grid-template-columns: 1fr 1fr;
-            grid-template-rows: auto auto auto;
-            gap: 0px 0px;
-            grid-auto-flow: row;
-            grid-template-areas:
-              "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; 
-            padding-left:1em;
-        }
-        .merge-config { 
-            grid-area: merge-config; 
-            padding:1em;
-        }
-        .merge-config input { 
-            margin-bottom: 3px; 
-        }
-        .merge-config select { 
-            margin-bottom: 3px; 
-        }
-        .merge-buttons { 
-            grid-area: merge-buttons; 
-            padding:1em; 
-            text-align: center;
-        }
-        #merge-button  { 
-            padding: 8px; 
-            width:20em; 
-        }
-        div#merge-log {
-            height:150px; 
-            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))); 
-            font-family: monospace;
-        }
-        .disabled { 
-            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);
-        }`,
-        content: `
-        <div class="merge-container panel-box">
-          <div class="merge-input">
-             <p><label for="#mergeModelA">Select Model A:</label></p>
-             <input id="mergeModelA" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
-             <p><label for="#mergeModelB">Select Model B:</label></p>
-             <input id="mergeModelB" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
-             <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> <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/>
-             <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>`,
-        onOpen: ({ firstOpen }) => {
-            if (!firstOpen) {
-                return
-            }
-
-            const tabSettingsSingle = document.querySelector("#tab-merge-opts-single")
-            const tabSettingsBatch = document.querySelector("#tab-merge-opts-batch")
-            linkTabContents(tabSettingsSingle)
-            linkTabContents(tabSettingsBatch)
-
-            console.log("Activate")
-            let mergeModelAField = new ModelDropdown(document.querySelector("#mergeModelA"), "stable-diffusion")
-            let mergeModelBField = new ModelDropdown(document.querySelector("#mergeModelB"), "stable-diffusion")
-            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) {
-                // Build request template
-                let model0 = mergeModelAField.value
-                let model1 = mergeModelBField.value
-                let request = { model0: model0, model1: model1 }
-                request["use_fp16"] = document.querySelector("#merge-fp").value == "fp16"
-                let iterations = document.querySelector("#merge-count").value >> 0
-                let start = parseFloat(document.querySelector("#merge-start").value)
-                let step = parseFloat(document.querySelector("#merge-step").value)
-
-                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("Reduce the number of variations or the step size")
-                    addLogSeparator()
-                    document.querySelector("#merge-count").focus()
-                    return
-                }
-
-                if (document.querySelector("#merge-filename").value == "") {
-                    addLogMessage("<i>Aborting: No output file name specified</i>")
-                    addLogSeparator()
-                    document.querySelector("#merge-filename").focus()
-                    return
-                }
-
-                // Disable merge button
-                e.target.disabled = true
-                e.target.classList.add("disabled")
-                let cursor = $("body").css("cursor")
-                let label = document.querySelector("#merge-button").innerHTML
-                $("body").css("cursor", "progress")
-                document.querySelector("#merge-button").innerHTML = "Merging models ..."
-
-                addLogMessage("Merging models")
-                addLogMessage("Model A: " + model0)
-                addLogMessage("Model B: " + model1)
-
-                // Batch main loop
-                for (let i = 0; i < iterations; i++) {
-                    let alpha = (start + i * step) / 100
-
-                    if (isTabActive(tabSettingsBatch)) {
-                        switch (document.querySelector("#merge-interpolation").value) {
-                            case "SmoothStep":
-                                alpha = smoothstep(alpha)
-                                break
-                            case "SmootherStep":
-                                alpha = smootherstep(alpha)
-                                break
-                            case "SmoothestStep":
-                                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(`&nbsp;&nbsp;filename: ${request["out_path"]}`)
-
-                    // sdkit documentation: "ratio - the ratio of the second model. 1 means only the second model will be used."
-                    request["ratio"] = 1-alpha 
-                    let res = await fetch("/model/merge", {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify(request),
-                    })
-                    const data = await res.json()
-                    addLogMessage(JSON.stringify(data))
-                }
-                addLogMessage(
-                    "<b>Done.</b> The models have been saved to your <tt>models/stable-diffusion</tt> folder."
-                )
-                addLogSeparator()
-                // Re-enable merge button
-                $("body").css("cursor", cursor)
-                document.querySelector("#merge-button").innerHTML = label
-                e.target.disabled = false
-                e.target.classList.remove("disabled")
-
-                // Update model list
-                stableDiffusionModelField.innerHTML = ""
-                vaeModelField.innerHTML = ""
-                hypernetworkModelField.innerHTML = ""
-                await getModels()
-            })
-        },
-    })
-})()
diff --git a/ui/plugins/ui/model-tools.plugin.js b/ui/plugins/ui/model-tools.plugin.js
new file mode 100644
index 00000000..09fd6499
--- /dev/null
+++ b/ui/plugins/ui/model-tools.plugin.js
@@ -0,0 +1,770 @@
+;(function() {
+    "use strict"
+
+    let mergeCSS = `
+        /*********** Main tab ***********/
+        .tab-centered {
+            justify-content: center;
+        }
+
+        #model-tool-tab-content {
+            background-color: var(--background-color3);
+        }
+
+        #model-tool-tab-content .tab-content-inner {
+            text-align: initial;
+        }
+
+        #model-tool-tab-bar .tab {
+            margin-bottom: 0px;
+            border-top-left-radius: var(--input-border-radius);
+            background-color: var(--background-color3);
+            padding: 6px 6px 0.8em 6px;
+        }
+        #tab-content-merge .tab-content-inner {
+            max-width: 100%;
+            padding: 10pt;
+        }
+
+        /*********** Merge UI ***********/
+        .merge-model-container {  
+            margin-left: 15%;
+            margin-right: 15%;
+            text-align: left;
+            display: inline-grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: auto auto auto;
+            gap: 0px 0px;
+            grid-auto-flow: row;
+            grid-template-areas:
+              "merge-input merge-config"
+              "merge-buttons merge-buttons";
+        }
+        .merge-model-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; 
+            padding-left:1em;
+        }
+        .merge-config { 
+            grid-area: merge-config; 
+            padding:1em;
+        }
+        .merge-config input { 
+            margin-bottom: 3px; 
+        }
+        .merge-config select { 
+            margin-bottom: 3px; 
+        }
+        .merge-buttons { 
+            grid-area: merge-buttons; 
+            padding:1em; 
+            text-align: center;
+        }
+        #merge-button  { 
+            padding: 8px; 
+            width:20em; 
+        }
+        div#merge-log {
+            height:150px; 
+            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))); 
+            font-family: monospace;
+        }
+        .disabled { 
+            background: var(--background-color4); 
+            color: var(--text-color); 
+        }
+        #merge-type-tabs {
+            border-bottom: 1px solid black;
+        }
+        #merge-log-container {
+            display: none;
+        }
+        .merge-model-container #merge-warning {
+            color: var(--small-label-color);
+        }
+
+        /*********** LORA UI ***********/
+        .lora-manager-grid {  
+            display: grid;
+            gap: 0px 8px;
+            grid-auto-flow: row;
+        }
+
+        @media screen and (min-width: 1501px) {
+            .lora-manager-grid textarea {
+                height:350px;
+            }
+
+            .lora-manager-grid {  
+                grid-template-columns: auto 1fr 1fr;
+                grid-template-rows: auto 1fr;
+                grid-template-areas:
+                    "selector  selector selector"
+                    "thumbnail keywords notes";
+            }
+        }
+
+        @media screen and (min-width: 1001px) and (max-width: 1500px) {
+            .lora-manager-grid textarea {
+                height:250px;
+            }
+
+            .lora-manager-grid {  
+                grid-template-columns: auto auto;
+                grid-template-rows: auto auto auto;
+                grid-template-areas:
+                    "selector  selector"
+                    "thumbnail keywords"
+                    "thumbnail notes";
+            }
+
+        }
+
+        @media screen and (max-width: 1000px) {
+            .lora-manager-grid textarea {
+                height:200px;
+            }
+
+            .lora-manager-grid {  
+                grid-template-columns: auto;
+                grid-template-rows: auto auto auto auto;
+                grid-template-areas:
+                    "selector"
+                    "keywords"
+                    "thumbnail"
+                    "notes";
+            }
+
+        }
+
+        .lora-manager-grid-selector { 
+            grid-area: selector; 
+            justify-self: start;
+        }
+
+        .lora-manager-grid-thumbnail { 
+            grid-area: thumbnail; 
+            justify-self: center;
+        }
+
+        .lora-manager-grid-keywords { 
+            grid-area: keywords; 
+        }
+
+        .lora-manager-grid-notes { 
+            grid-area: notes; 
+        }
+        
+        .lora-manager-grid p {
+            margin-bottom: 2px;
+        }
+
+
+        `
+
+    let mergeUI = `
+        <div class="merge-model-container panel-box">
+          <div class="merge-input">
+             <p><label for="#mergeModelA">Select Model A:</label></p>
+             <input id="mergeModelA" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
+             <p><label for="#mergeModelB">Select Model B:</label></p>
+             <input id="mergeModelB" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
+             <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> <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/>
+             <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>`
+
+        
+    let loraUI=`
+        <div class="panel-box lora-manager-grid">
+            <div class="lora-manager-grid-selector">
+                <label for="#loraModel">Select Lora:</label>
+                <input id="loraModel" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
+            </div>
+            <div class="lora-manager-grid-thumbnail">
+                <p style="height:2em;">Thumbnail:</p>
+                <div style="position:relative; height:256px; width:256px;background-color:#222;border-radius:1em;margin-bottom:1em;">
+                    <i id="lora-manager-image-placeholder" class="fa-regular fa-image" style="font-size:500%;color:#555;position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);"></i>
+                    <img id="lora-manager-image" class="displayNone" style="border-radius:6px;max-height:256px;max-width:256px;"/>
+                </div>
+                <div style="text-align:center;">
+                    <button class="tertiaryButton" id="lora-manager-upload-button"><i class="fa-solid fa-upload"></i> Upload new thumbnail</button>
+                    <input id="lora-manager-upload-input" name="lora-manager-upload-input" type="file" class="displayNone">
+                    <!-- button class="tertiaryButton"><i class="fa-solid fa-trash-can"></i> Remove</button -->
+                </div>
+            </div>
+            <div class="lora-manager-grid-keywords">
+                <p style="height:2em;">Keywords:
+                <span style="float:right;margin-bottom:4px;"><button id="lora-keyword-from-civitai" class="tertiaryButton smallButton">Import from Civitai</button></span></p>
+                <textarea style="width:100%;resize:vertical;" id="lora-manager-keywords" placeholder="Put LORA specific keywords here..."></textarea>
+                <p style="color:var(--small-label-color);">
+                    <b>LORA model keywords</b> can be used via the <code>+&nbsp;Embeddings</code> button. They get added to the embedding 
+                    keyword menu when the LORA has been selected in the image settings.
+                </p>
+            </div>
+            <div class="lora-manager-grid-notes">
+                <p style="height:2em;">Notes:</p>
+                <textarea style="width:100%;resize:vertical;"  id="lora-manager-notes" placeholder="Place for things you want to remember..."></textarea>
+                <p id="civitai-section" class="displayNone">
+                    <b>Civitai model page:</b>
+                    <a id="civitai-model-page" target="_blank"></a>
+                </p>
+            </div>
+        </div>`
+
+    let tabHTML=`
+        <div id="model-tool-tab-bar" class="tab-container tab-centered">
+            <span id="tab-model-loraUI" class="tab active">
+                <span><i class="fa-solid fa-key"></i> Lora Keywords</small></span>
+            </span>
+            <span id="tab-model-mergeUI" class="tab">
+                <span><i class="fa-solid fa-code-merge"></i> Merge Models</small></span>
+            </span>
+        </div>
+        <div id="model-tool-tab-content" class="panel-box">
+            <div id="tab-content-model-loraUI" class="tab-content active">
+                <div class="tab-content-inner">
+                    ${loraUI}
+                </div>
+            </div>
+
+            <div id="tab-content-model-mergeUI" class="tab-content">
+                <div class="tab-content-inner">
+                    ${mergeUI}
+                </div>
+            </div>
+        </div>`
+
+
+    ///////////////////// Function section
+    function smoothstep(x) {
+        return x * x * (3 - 2 * x)
+    }
+
+    function smootherstep(x) {
+        return x * x * x * (x * (x * 6 - 15) + 10)
+    }
+
+    function smootheststep(x) {
+        let y = -20 * Math.pow(x, 7)
+        y += 70 * Math.pow(x, 6)
+        y -= 84 * Math.pow(x, 5)
+        y += 35 * Math.pow(x, 4)
+        return y
+    }
+    function getCurrentTime() {
+        const now = new Date()
+        let hours = now.getHours()
+        let minutes = now.getMinutes()
+        let seconds = now.getSeconds()
+
+        hours = hours < 10 ? `0${hours}` : hours
+        minutes = minutes < 10 ? `0${minutes}` : minutes
+        seconds = seconds < 10 ? `0${seconds}` : seconds
+
+        return `${hours}:${minutes}:${seconds}`
+    }
+
+    function addLogMessage(message) {
+        const logContainer = document.getElementById("merge-log")
+        logContainer.innerHTML += `<i>${getCurrentTime()}</i> ${message}<br>`
+
+        // Scroll to the bottom of the log
+        logContainer.scrollTop = logContainer.scrollHeight
+
+        document.querySelector("#merge-log-container").style.display = "block"
+    }
+
+    function addLogSeparator() {
+        const logContainer = document.getElementById("merge-log")
+        logContainer.innerHTML += "<hr>"
+
+        logContainer.scrollTop = logContainer.scrollHeight
+    }
+
+    function drawDiagram(fn) {
+        const SIZE = 300
+        const canvas = document.getElementById("merge-canvas")
+        canvas.height = canvas.width = SIZE
+        const ctx = canvas.getContext("2d")
+
+        // Draw coordinate system
+        ctx.scale(1, -1)
+        ctx.translate(0, -canvas.height)
+        ctx.lineWidth = 1
+        ctx.beginPath()
+
+        ctx.strokeStyle = "white"
+        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])
+        const n = SIZE / 10
+        for (let i = n; i < SIZE; i += n) {
+            ctx.moveTo(0, i)
+            ctx.lineTo(SIZE, i)
+            ctx.moveTo(i, 0)
+            ctx.lineTo(i, SIZE)
+        }
+        ctx.stroke()
+        ctx.beginPath()
+        ctx.setLineDash([])
+        ctx.beginPath()
+        ctx.strokeStyle = "black"
+        ctx.lineWidth = 3
+        // Plot function
+        const numSamples = 20
+        for (let i = 0; i <= numSamples; i++) {
+            const x = i / numSamples
+            const y = fn(x)
+
+            const canvasX = x * SIZE
+            const canvasY = y * SIZE
+
+            if (i === 0) {
+                ctx.moveTo(canvasX, canvasY)
+            } else {
+                ctx.lineTo(canvasX, canvasY)
+            }
+        }
+        ctx.stroke()
+        // Plot alpha values (yellow boxes)
+        let start = parseFloat(document.querySelector("#merge-start").value)
+        let step = parseFloat(document.querySelector("#merge-step").value)
+        let iterations = document.querySelector("#merge-count").value >> 0
+        ctx.beginPath()
+        ctx.fillStyle = "yellow"
+        for (let i = 0; i < iterations; i++) {
+            const alpha = (start + i * step) / 100
+            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, 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 &#8805; 100%</i>")
+            }
+        }
+    }
+
+    function updateChart() {
+        let fn = (x) => x
+        switch (document.querySelector("#merge-interpolation").value) {
+            case "SmoothStep":
+                fn = smoothstep
+                break
+            case "SmootherStep":
+                fn = smootherstep
+                break
+            case "SmoothestStep":
+                fn = smootheststep
+                break
+        }
+        drawDiagram(fn)
+    }
+
+    function initMergeUI() {
+        const tabSettingsSingle = document.querySelector("#tab-merge-opts-single")
+        const tabSettingsBatch = document.querySelector("#tab-merge-opts-batch")
+        linkTabContents(tabSettingsSingle)
+        linkTabContents(tabSettingsBatch)
+
+        let mergeModelAField = new ModelDropdown(document.querySelector("#mergeModelA"), "stable-diffusion")
+        let mergeModelBField = new ModelDropdown(document.querySelector("#mergeModelB"), "stable-diffusion")
+        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) {
+            // Build request template
+            let model0 = mergeModelAField.value
+            let model1 = mergeModelBField.value
+            let request = { model0: model0, model1: model1 }
+            request["use_fp16"] = document.querySelector("#merge-fp").value == "fp16"
+            let iterations = document.querySelector("#merge-count").value >> 0
+            let start = parseFloat(document.querySelector("#merge-start").value)
+            let step = parseFloat(document.querySelector("#merge-step").value)
+
+            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("Reduce the number of variations or the step size")
+                addLogSeparator()
+                document.querySelector("#merge-count").focus()
+                return
+            }
+
+            if (document.querySelector("#merge-filename").value == "") {
+                addLogMessage("<i>Aborting: No output file name specified</i>")
+                addLogSeparator()
+                document.querySelector("#merge-filename").focus()
+                return
+            }
+
+            // Disable merge button
+            e.target.disabled = true
+            e.target.classList.add("disabled")
+            let cursor = $("body").css("cursor")
+            let label = document.querySelector("#merge-button").innerHTML
+            $("body").css("cursor", "progress")
+            document.querySelector("#merge-button").innerHTML = "Merging models ..."
+
+            addLogMessage("Merging models")
+            addLogMessage("Model A: " + model0)
+            addLogMessage("Model B: " + model1)
+
+            // Batch main loop
+            for (let i = 0; i < iterations; i++) {
+                let alpha = (start + i * step) / 100
+
+                if (isTabActive(tabSettingsBatch)) {
+                    switch (document.querySelector("#merge-interpolation").value) {
+                        case "SmoothStep":
+                            alpha = smoothstep(alpha)
+                            break
+                        case "SmootherStep":
+                            alpha = smootherstep(alpha)
+                            break
+                        case "SmoothestStep":
+                            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(`&nbsp;&nbsp;filename: ${request["out_path"]}`)
+
+                // sdkit documentation: "ratio - the ratio of the second model. 1 means only the second model will be used."
+                request["ratio"] = 1-alpha 
+                let res = await fetch("/model/merge", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify(request),
+                })
+                const data = await res.json()
+                addLogMessage(JSON.stringify(data))
+            }
+            addLogMessage(
+                "<b>Done.</b> The models have been saved to your <tt>models/stable-diffusion</tt> folder."
+            )
+            addLogSeparator()
+            // Re-enable merge button
+            $("body").css("cursor", cursor)
+            document.querySelector("#merge-button").innerHTML = label
+            e.target.disabled = false
+            e.target.classList.remove("disabled")
+
+            // Update model list
+            stableDiffusionModelField.innerHTML = ""
+            vaeModelField.innerHTML = ""
+            hypernetworkModelField.innerHTML = ""
+            await getModels()
+        })
+    }
+
+    const LoraUI = {
+        modelField: undefined,
+        keywordsField: undefined,
+        notesField: undefined,
+        civitaiImportBtn: undefined,
+        civitaiSecion: undefined,
+        civitaiAnchor: undefined,
+        image: undefined,
+        imagePlaceholder: undefined,
+
+        init() {
+            LoraUI.modelField = new ModelDropdown(document.querySelector("#loraModel"), "lora")
+            LoraUI.keywordsField = document.querySelector("#lora-manager-keywords")
+            LoraUI.notesField = document.querySelector("#lora-manager-notes")
+            LoraUI.civitaiImportBtn = document.querySelector("#lora-keyword-from-civitai")
+            LoraUI.civitaiSection = document.querySelector("#civitai-section")
+            LoraUI.civitaiAnchor = document.querySelector("#civitai-model-page")
+            LoraUI.image = document.querySelector("#lora-manager-image")
+            LoraUI.imagePlaceholder = document.querySelector("#lora-manager-image-placeholder")
+            LoraUI.uploadBtn = document.querySelector("#lora-manager-upload-button")
+            LoraUI.uploadInput = document.querySelector("#lora-manager-upload-input")
+
+            LoraUI.modelField.addEventListener("change", LoraUI.updateFields)
+            LoraUI.keywordsField.addEventListener("focusout", LoraUI.saveInfos)
+            LoraUI.notesField.addEventListener("focusout", LoraUI.saveInfos)
+            LoraUI.civitaiImportBtn.addEventListener("click", LoraUI.importFromCivitai)
+
+            LoraUI.uploadBtn.addEventListener("click", (e) => LoraUI.uploadInput.click())
+            LoraUI.uploadInput.addEventListener("change", LoraUI.uploadLoraThumb)
+
+            document.addEventListener("saveThumb", LoraUI.updateFields)
+
+            LoraUI.updateFields()
+        },
+
+        uploadLoraThumb(e) {
+            console.log(e)
+            if (LoraUI.uploadInput.files.length === 0) {
+                return
+            }
+
+            let reader = new FileReader()
+            let file = LoraUI.uploadInput.files[0]
+
+            reader.addEventListener("load", (event) => {
+                let img = document.createElement("img")
+                img.src = reader.result
+                onUseAsThumbnailClick(
+                    {
+                        use_lora_model: LoraUI.modelField.value,
+                    },
+                    img
+                )
+            })
+
+            if (file) {
+                reader.readAsDataURL(file)
+            }
+        },
+
+        updateFields() {
+            document.getElementById("civitai-section").classList.add("displayNone")
+            Bucket.retrieve(`modelinfo/lora/${LoraUI.modelField.value}`)
+                .then((info) => {
+                    if (info == null) {
+                        LoraUI.keywordsField.value = ""
+                        LoraUI.notesField.value = ""
+                        LoraUI.hideCivitaiLink()
+                    } else {
+                        LoraUI.keywordsField.value = info.keywords.join("\n")
+                        LoraUI.notesField.value = info.notes
+                        if ("civitai" in info && info["civitai"] != null) {
+                            LoraUI.showCivitaiLink(info.civitai)
+                        } else {
+                            LoraUI.hideCivitaiLink()
+                        }
+                    }
+                })
+            Bucket.getImageAsDataURL(`${profileNameField.value}/lora/${LoraUI.modelField.value}.png`)
+                .then((data) => {
+                    LoraUI.image.src=data
+                    LoraUI.image.classList.remove("displayNone")
+                    LoraUI.imagePlaceholder.classList.add("displayNone")
+                })
+                .catch((error) => {
+                    LoraUI.image.classList.add("displayNone")
+                    LoraUI.imagePlaceholder.classList.remove("displayNone")
+                })
+        },
+
+        saveInfos() {
+            let info = {
+                keywords: LoraUI.keywordsField.value
+                            .split("\n")
+                            .filter((x) => (x != "")),
+                notes: LoraUI.notesField.value,
+                civitai: LoraUI.civitaiSection.checkVisibility() ? LoraUI.civitaiAnchor.href : null, 
+            }
+            Bucket.store(`modelinfo/lora/${LoraUI.modelField.value}`, info)
+        },
+
+        importFromCivitai() {
+            document.body.style["cursor"] = "progress"
+            fetch("/sha256/lora/"+LoraUI.modelField.value)
+                .then((result) => result.json())
+                .then((json) => fetch("https://civitai.com/api/v1/model-versions/by-hash/" + json.digest))
+                .then((result) => result.json())
+                .then((json) => {
+                    document.body.style["cursor"] = "default"
+                    if (json == null) {
+                        return
+                    }
+                    if ("trainedWords" in json) {
+                        LoraUI.keywordsField.value = json["trainedWords"].join("\n")
+                    } else {
+                        showToast("No keyword info found.")
+                    }
+                    if ("modelId" in json) {
+                        LoraUI.showCivitaiLink("https://civitai.com/models/" + json.modelId)
+                    } else {
+                        LoraUI.hideCivitaiLink()
+                    }
+
+                    LoraUI.saveInfos()
+                })
+        },
+
+        showCivitaiLink(href) {
+            LoraUI.civitaiSection.classList.remove("displayNone")
+            LoraUI.civitaiAnchor.href = href
+            LoraUI.civitaiAnchor.innerHTML = LoraUI.civitaiAnchor.href
+        },
+
+        hideCivitaiLink() {
+            LoraUI.civitaiSection.classList.add("displayNone")
+        }
+    }
+
+    createTab({
+        id: "merge",
+        icon: "fa-toolbox",
+        label: "Model tools",
+        css: mergeCSS,
+        content: tabHTML, 
+        onOpen: ({ firstOpen }) => {
+            if (!firstOpen) {
+                return
+            }
+            initMergeUI()
+            LoraUI.init()
+            const tabMergeUI = document.querySelector("#tab-model-mergeUI")
+            const tabLoraUI = document.querySelector("#tab-model-loraUI")
+            linkTabContents(tabMergeUI)
+            linkTabContents(tabLoraUI)
+        },
+    })
+})()
+async function getLoraKeywords(model) {
+    return Bucket.retrieve(`modelinfo/lora/${model}`)
+        .then((info) => info ? info.keywords : [])
+}