Abdullah Alfaraj
GitHub
commit
006b42e20a
157
index.html
157
index.html
|
|
@ -117,7 +117,7 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail-image-button{
|
.thumbnail-image-button {
|
||||||
display: none;
|
display: none;
|
||||||
/* background-color: #495b79; */
|
/* background-color: #495b79; */
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -134,24 +134,24 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail-image-button:nth-child(2) {
|
.thumbnail-image-button:nth-child(2) {
|
||||||
border-color:green;
|
border-color: green;
|
||||||
bottom:0;
|
bottom: 0;
|
||||||
left:0;
|
left: 0;
|
||||||
}
|
}
|
||||||
.thumbnail-image-button:nth-child(3) {
|
.thumbnail-image-button:nth-child(3) {
|
||||||
border-color:pink;
|
border-color: pink;
|
||||||
bottom:0;
|
bottom: 0;
|
||||||
right:0;
|
right: 0;
|
||||||
}
|
}
|
||||||
.thumbnail-image-button:nth-child(4) {
|
.thumbnail-image-button:nth-child(4) {
|
||||||
border-color:yellow;
|
border-color: yellow;
|
||||||
top:0;
|
top: 0;
|
||||||
left:0;
|
left: 0;
|
||||||
}
|
}
|
||||||
.thumbnail-image-button:nth-child(5) {
|
.thumbnail-image-button:nth-child(5) {
|
||||||
border-color:red;
|
border-color: red;
|
||||||
top:0;
|
top: 0;
|
||||||
right:0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-item {
|
.column-item {
|
||||||
|
|
@ -568,6 +568,12 @@
|
||||||
.line-divider {
|
.line-divider {
|
||||||
background-color: #3e3e3e;
|
background-color: #3e3e3e;
|
||||||
}
|
}
|
||||||
|
.res-increase {
|
||||||
|
color: #6db579;
|
||||||
|
}
|
||||||
|
.res-decrease {
|
||||||
|
color: #ff595e;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -582,9 +588,17 @@
|
||||||
<div class="sp-tab" id="sp-viewer-tab">
|
<div class="sp-tab" id="sp-viewer-tab">
|
||||||
<sp-label>Viewer</sp-label>
|
<sp-label>Viewer</sp-label>
|
||||||
</div>
|
</div>
|
||||||
<div class="sp-tab" id="sp-history-tab">
|
<div class="sp-tab" id="sp-history-tab" style="display: none">
|
||||||
<sp-label>History</sp-label>
|
<sp-label>History</sp-label>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="sp-tab"
|
||||||
|
id="sp-image_search-tab"
|
||||||
|
style="display: none"
|
||||||
|
>
|
||||||
|
<sp-label>Image Search</sp-label>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="sp-tab" id="sp-prompts-library-tab">
|
<div class="sp-tab" id="sp-prompts-library-tab">
|
||||||
<sp-label>Prompts library</sp-label>
|
<sp-label>Prompts library</sp-label>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -615,6 +629,36 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sp-tab-page" id="sp-viewer-tab-page">
|
<div class="sp-tab-page" id="sp-viewer-tab-page">
|
||||||
|
<div class="subTabOptionsContainer">
|
||||||
|
<sp-radio-group id="rgSubTab">
|
||||||
|
<sp-radio
|
||||||
|
title=""
|
||||||
|
class="rbSubTab"
|
||||||
|
id="rbHistoryTab"
|
||||||
|
checked
|
||||||
|
value="viewer"
|
||||||
|
data-tab-name="sp-viewer-tab"
|
||||||
|
>Viewer</sp-radio
|
||||||
|
>
|
||||||
|
<sp-radio
|
||||||
|
title=""
|
||||||
|
class="rbSubTab"
|
||||||
|
id="rbHistoryTab"
|
||||||
|
value="history"
|
||||||
|
data-tab-name="sp-history-tab"
|
||||||
|
>History</sp-radio
|
||||||
|
>
|
||||||
|
<sp-radio
|
||||||
|
title=""
|
||||||
|
class="rbSubTab"
|
||||||
|
id="rbImageSearch"
|
||||||
|
data-tab-name="sp-image_search-tab"
|
||||||
|
value="image_search"
|
||||||
|
>Image Search</sp-radio
|
||||||
|
>
|
||||||
|
</sp-radio-group>
|
||||||
|
</div>
|
||||||
|
<div id="viewerSubTab">
|
||||||
<div class="flexContainer">
|
<div class="flexContainer">
|
||||||
<sp-label slot="label"
|
<sp-label slot="label"
|
||||||
>View your generated images on the canvas</sp-label
|
>View your generated images on the canvas</sp-label
|
||||||
|
|
@ -628,7 +672,10 @@
|
||||||
<button class="btnSquare" id="btnSetInitImageViewer">
|
<button class="btnSquare" id="btnSetInitImageViewer">
|
||||||
Set Init Image
|
Set Init Image
|
||||||
</button>
|
</button>
|
||||||
<button class="btnSquare btnGenerateClass" id="btnGenerate">
|
<button
|
||||||
|
class="btnSquare btnGenerateClass"
|
||||||
|
id="btnGenerate"
|
||||||
|
>
|
||||||
Generate txt2img
|
Generate txt2img
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
|
@ -733,8 +780,40 @@
|
||||||
<!-- <img class="viewer-image" id="viewer_output_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
|
<!-- <img class="viewer-image" id="viewer_output_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- </div> -->
|
||||||
|
</div>
|
||||||
<div class="sp-tab-page" id="sp-history-tab-page">
|
<div class="sp-tab-page" id="sp-history-tab-page">
|
||||||
|
<div class="subTabOptionsContainer"></div>
|
||||||
|
|
||||||
|
<div class="flexContainer">
|
||||||
|
<sp-label slot="label"
|
||||||
|
>history of all the images you generated</sp-label
|
||||||
|
>
|
||||||
|
<div id="historySeedLabelContainer">
|
||||||
|
<sp-label slot="label">Seed:</sp-label
|
||||||
|
><sp-label slot="label" id="historySeedLabel"
|
||||||
|
>00000000000</sp-label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
<div>
|
||||||
|
<button class="btnSquare" id="btnLoadHistory">
|
||||||
|
Load Previous Generations
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="viewer-container" id="divHistoryImagesContainer">
|
||||||
|
<img
|
||||||
|
class="history-image"
|
||||||
|
id="history_image_test"
|
||||||
|
data-metadata_json_string='{"a":1}'
|
||||||
|
src="https://source.unsplash.com/random"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sp-tab-page" id="sp-image_search-tab-page">
|
||||||
|
<div class="subTabOptionsContainer"></div>
|
||||||
|
|
||||||
<div class="flexContainer">
|
<div class="flexContainer">
|
||||||
<sp-label slot="label"
|
<sp-label slot="label"
|
||||||
>history of all the images you generated</sp-label
|
>history of all the images you generated</sp-label
|
||||||
|
|
@ -759,11 +838,11 @@
|
||||||
<button class="btnSquare" id="btnImageSearch">
|
<button class="btnSquare" id="btnImageSearch">
|
||||||
Image Search
|
Image Search
|
||||||
</button>
|
</button>
|
||||||
<button class="btnSquare" id="btnLoadHistory">
|
|
||||||
Load Previous Generations
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="viewer-container" id="divHistoryImagesContainer">
|
<div
|
||||||
|
class="viewer-container"
|
||||||
|
id="divImageSearchImagesContainer"
|
||||||
|
>
|
||||||
<img
|
<img
|
||||||
class="history-image"
|
class="history-image"
|
||||||
id="history_image_test"
|
id="history_image_test"
|
||||||
|
|
@ -772,7 +851,6 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sp-tab-page" id="sp-prompts-library-tab-page">
|
<div class="sp-tab-page" id="sp-prompts-library-tab-page">
|
||||||
<sp-label slot="label"
|
<sp-label slot="label"
|
||||||
>Prompt Shortcut: a single word that represent a
|
>Prompt Shortcut: a single word that represent a
|
||||||
|
|
@ -1318,15 +1396,32 @@
|
||||||
</div>
|
</div>
|
||||||
Edit Text
|
Edit Text
|
||||||
</sp-action-button>
|
</sp-action-button>
|
||||||
<sp-action-button id="svg_sp_btn_datadownload" style="padding: 0; max-width: 32px; max-height: 32px; display:none;">
|
<sp-action-button
|
||||||
|
id="svg_sp_btn_datadownload"
|
||||||
|
style="
|
||||||
|
padding: 0;
|
||||||
|
max-width: 32px;
|
||||||
|
max-height: 32px;
|
||||||
|
display: none;
|
||||||
|
"
|
||||||
|
>
|
||||||
<div slot="icon" style="fill: currentColor">
|
<div slot="icon" style="fill: currentColor">
|
||||||
<svg viewBox="0 0 18 18" style="width: 18px; height: 18px;">
|
<svg
|
||||||
|
viewBox="0 0 18 18"
|
||||||
|
style="width: 18px; height: 18px"
|
||||||
|
>
|
||||||
<path
|
<path
|
||||||
d="M5.3885,12.5895a1.211,1.211,0,0,1-.314-.8C3.2305,11.478,1.509,10.942,1,10.135V14.5C1,15.8805,4.582,17,9,17c.1385,0,.2735-.0045.4105-.0065Z" />
|
d="M5.3885,12.5895a1.211,1.211,0,0,1-.314-.8C3.2305,11.478,1.509,10.942,1,10.135V14.5C1,15.8805,4.582,17,9,17c.1385,0,.2735-.0045.4105-.0065Z"
|
||||||
<path d="M16.5,6.5V9.3635A1.18,1.18,0,0,0,17,8.5V5.135A5.06144,5.06144,0,0,1,14.3855,6.5Z" />
|
/>
|
||||||
<path
|
<path
|
||||||
d="M6.315,10.5H8.5V7.13C5.953,7.059,1.8365,6.4625,1,5.135V8.5c0,.996,1.868,1.8535,4.565,2.255A1.21847,1.21847,0,0,1,6.315,10.5Z" />
|
d="M16.5,6.5V9.3635A1.18,1.18,0,0,0,17,8.5V5.135A5.06144,5.06144,0,0,1,14.3855,6.5Z"
|
||||||
<path d="M17.573,12.427A.25.25,0,0,0,17.3965,12H15V8H10v4H7.6035a.25.25,0,0,0-.1765.427L12.5,18Z" />
|
/>
|
||||||
|
<path
|
||||||
|
d="M6.315,10.5H8.5V7.13C5.953,7.059,1.8365,6.4625,1,5.135V8.5c0,.996,1.868,1.8535,4.565,2.255A1.21847,1.21847,0,0,1,6.315,10.5Z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M17.573,12.427A.25.25,0,0,0,17.3965,12H15V8H10v4H7.6035a.25.25,0,0,0-.1765.427L12.5,18Z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</sp-action-button>
|
</sp-action-button>
|
||||||
|
|
@ -1577,7 +1672,15 @@
|
||||||
id="lHeight"
|
id="lHeight"
|
||||||
>512</sp-label
|
>512</sp-label
|
||||||
>
|
>
|
||||||
|
|
||||||
|
<sp-label
|
||||||
|
class="res-increase"
|
||||||
|
id="res-difference"
|
||||||
|
slot="label"
|
||||||
|
></sp-label>
|
||||||
</sp-slider>
|
</sp-slider>
|
||||||
|
<!-- <sp-label slot="label"
|
||||||
|
>512x512 => 1024x1024</sp-label >-->
|
||||||
</div>
|
</div>
|
||||||
<!-- <div id='hi-res-sliders-container' style="display:none;">
|
<!-- <div id='hi-res-sliders-container' style="display:none;">
|
||||||
<sp-slider show-value="false" id="hrWidth" min="1" max="32" value="8">
|
<sp-slider show-value="false" id="hrWidth" min="1" max="32" value="8">
|
||||||
|
|
|
||||||
88
index.js
88
index.js
|
|
@ -38,6 +38,7 @@ const io = require('./utility/io')
|
||||||
const dummy = require('./utility/dummy')
|
const dummy = require('./utility/dummy')
|
||||||
const general = require('./utility/general')
|
const general = require('./utility/general')
|
||||||
const thumbnail = require('./thumbnail')
|
const thumbnail = require('./thumbnail')
|
||||||
|
const note = require('./utility/notification')
|
||||||
let g_horde_generator = new horde_native.hordeGenerator()
|
let g_horde_generator = new horde_native.hordeGenerator()
|
||||||
|
|
||||||
//REFACTOR: move to session.js
|
//REFACTOR: move to session.js
|
||||||
|
|
@ -3669,9 +3670,24 @@ document
|
||||||
)
|
)
|
||||||
console.log(`metadata_jsons[${i}]: `, metadata_jsons[i])
|
console.log(`metadata_jsons[${i}]: `, metadata_jsons[i])
|
||||||
|
|
||||||
const img_container = thumbnail.Thumbnail.wrapImgInContainer(img,'viewer-image-container')
|
const img_container = thumbnail.Thumbnail.wrapImgInContainer(
|
||||||
thumbnail.Thumbnail.addSPButtonToContainer(img_container,'svg_sp_btn', 'place the image on the canvas', moveHistoryImageToLayer, img)
|
img,
|
||||||
thumbnail.Thumbnail.addSPButtonToContainer(img_container,'svg_sp_btn_datadownload', 'download history data to current settings', getHistoryMetadata, img)
|
'viewer-image-container'
|
||||||
|
)
|
||||||
|
thumbnail.Thumbnail.addSPButtonToContainer(
|
||||||
|
img_container,
|
||||||
|
'svg_sp_btn',
|
||||||
|
'place the image on the canvas',
|
||||||
|
moveHistoryImageToLayer,
|
||||||
|
img
|
||||||
|
)
|
||||||
|
thumbnail.Thumbnail.addSPButtonToContainer(
|
||||||
|
img_container,
|
||||||
|
'svg_sp_btn_datadownload',
|
||||||
|
'download history data to current settings',
|
||||||
|
getHistoryMetadata,
|
||||||
|
img
|
||||||
|
)
|
||||||
container.appendChild(img_container)
|
container.appendChild(img_container)
|
||||||
i++
|
i++
|
||||||
}
|
}
|
||||||
|
|
@ -3680,35 +3696,32 @@ document
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
function getHistoryMetadata(img){
|
function getHistoryMetadata(img) {
|
||||||
// debugger
|
// debugger
|
||||||
//auto fill the ui with metadata
|
//auto fill the ui with metadata
|
||||||
const metadata_json = JSON.parse(
|
const metadata_json = JSON.parse(img.dataset.metadata_json_string)
|
||||||
img.dataset.metadata_json_string
|
|
||||||
)
|
|
||||||
console.log('metadata_json: ', metadata_json)
|
console.log('metadata_json: ', metadata_json)
|
||||||
// document.querySelector('#tiSeed').value = metadata_json.Seed
|
// document.querySelector('#tiSeed').value = metadata_json.Seed
|
||||||
|
|
||||||
//extract auto_metadata into the preset metadata
|
//extract auto_metadata into the preset metadata
|
||||||
function convertAutoMetadataToPresset(metadata_json) {
|
function convertAutoMetadataToPresset(metadata_json) {
|
||||||
metadata_json['seed'] =
|
metadata_json['seed'] = metadata_json?.auto_metadata?.Seed
|
||||||
metadata_json?.auto_metadata?.Seed
|
|
||||||
}
|
}
|
||||||
convertAutoMetadataToPresset(metadata_json)
|
convertAutoMetadataToPresset(metadata_json)
|
||||||
document.querySelector('#historySeedLabel').textContent =
|
document.querySelector('#historySeedLabel').textContent =
|
||||||
metadata_json?.seed
|
metadata_json?.seed
|
||||||
// autoFillInSettings(metadata_json)
|
// autoFillInSettings(metadata_json)
|
||||||
g_ui_settings.autoFillInSettings(metadata_json)
|
g_ui_settings.autoFillInSettings(metadata_json)
|
||||||
}
|
}
|
||||||
|
|
||||||
async function moveHistoryImageToLayer(img){
|
async function moveHistoryImageToLayer(img) {
|
||||||
let image_path = img.dataset.path
|
let image_path = img.dataset.path
|
||||||
const image_path_escape = image_path.replace(/\o/g, '/o') //escape string "\o" in "\output"
|
const image_path_escape = image_path.replace(/\o/g, '/o') //escape string "\o" in "\output"
|
||||||
|
|
||||||
// load the image from "data:image/png;base64," base64_str
|
// load the image from "data:image/png;base64," base64_str
|
||||||
const base64_image = img.src.replace('data:image/png;base64,', '')
|
const base64_image = img.src.replace('data:image/png;base64,', '')
|
||||||
await base64ToFile(base64_image)
|
await base64ToFile(base64_image)
|
||||||
}
|
}
|
||||||
|
|
||||||
document
|
document
|
||||||
.getElementById('btnImageSearch')
|
.getElementById('btnImageSearch')
|
||||||
|
|
@ -3716,7 +3729,7 @@ document
|
||||||
try {
|
try {
|
||||||
// const output_dir_relative = "./server/python_server/"
|
// const output_dir_relative = "./server/python_server/"
|
||||||
const container = document.getElementById(
|
const container = document.getElementById(
|
||||||
'divHistoryImagesContainer'
|
'divImageSearchImagesContainer'
|
||||||
)
|
)
|
||||||
// const uniqueDocumentId = await getUniqueDocumentId()
|
// const uniqueDocumentId = await getUniqueDocumentId()
|
||||||
// const [image_paths, metadata_jsons] = await sdapi.loadHistory(uniqueDocumentId)
|
// const [image_paths, metadata_jsons] = await sdapi.loadHistory(uniqueDocumentId)
|
||||||
|
|
@ -4173,3 +4186,52 @@ document
|
||||||
thumbnail_size_slider.min
|
thumbnail_size_slider.min
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
Array.from(document.querySelectorAll('.rbSubTab')).forEach((rb) => {
|
||||||
|
// debugger
|
||||||
|
const tab_button_name = rb.dataset['tab-name']
|
||||||
|
const tab_page_name = `${tab_button_name}-page`
|
||||||
|
|
||||||
|
try {
|
||||||
|
document
|
||||||
|
.getElementById(tab_button_name)
|
||||||
|
.addEventListener('click', () => {
|
||||||
|
document.getElementById(tab_button_name)
|
||||||
|
const option_container = document
|
||||||
|
.getElementById(tab_page_name)
|
||||||
|
.querySelector('.subTabOptionsContainer')
|
||||||
|
const radio_group = document.getElementById('rgSubTab')
|
||||||
|
rb.checked = true
|
||||||
|
option_container.appendChild(radio_group)
|
||||||
|
})
|
||||||
|
|
||||||
|
rb.onclick = () => {
|
||||||
|
// debugger
|
||||||
|
document.getElementById(tab_button_name).click()
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn(e)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
async function updateResDifferenceLabel() {
|
||||||
|
const ratio = await selection.Selection.getImageToSelectionDifference()
|
||||||
|
const arrow = ratio >= 1 ? '↑' : '↓'
|
||||||
|
let final_ratio = ratio // this ratio will always be >= 1
|
||||||
|
if (ratio >= 1) {
|
||||||
|
// percentage = percentage >= 1 ? percentage : 1 / percentage
|
||||||
|
|
||||||
|
// const percentage_str = `${arrow}X${percentage.toFixed(2)}`
|
||||||
|
|
||||||
|
// console.log('scale_info_str: ', scale_info_str)
|
||||||
|
// console.log('percentage_str: ', percentage_str)
|
||||||
|
document
|
||||||
|
.getElementById('res-difference')
|
||||||
|
.classList.remove('res-decrease')
|
||||||
|
} else {
|
||||||
|
final_ratio = 1 / ratio
|
||||||
|
document.getElementById('res-difference').classList.add('res-decrease')
|
||||||
|
}
|
||||||
|
const ratio_str = `${arrow}x${final_ratio.toFixed(2)}`
|
||||||
|
document.getElementById('res-difference').innerText = ratio_str
|
||||||
|
}
|
||||||
|
|
|
||||||
1
psapi.js
1
psapi.js
|
|
@ -9,6 +9,7 @@ const storage = require('uxp').storage
|
||||||
const fs = storage.localFileSystem
|
const fs = storage.localFileSystem
|
||||||
|
|
||||||
async function createSolidLayer(r, g, b) {
|
async function createSolidLayer(r, g, b) {
|
||||||
|
console.warn('this function is deprecated')
|
||||||
await executeAsModal(async () => {
|
await executeAsModal(async () => {
|
||||||
const result = await batchPlay(
|
const result = await batchPlay(
|
||||||
[
|
[
|
||||||
|
|
|
||||||
22
selection.js
22
selection.js
|
|
@ -1,4 +1,5 @@
|
||||||
const psapi = require('./psapi')
|
const psapi = require('./psapi')
|
||||||
|
const html_manip = require('./utility/html_manip')
|
||||||
function finalWidthHeight(
|
function finalWidthHeight(
|
||||||
selectionWidth,
|
selectionWidth,
|
||||||
selectionHeight,
|
selectionHeight,
|
||||||
|
|
@ -77,7 +78,28 @@ class Selection {
|
||||||
}
|
}
|
||||||
static reselectArea(selection_info) {}
|
static reselectArea(selection_info) {}
|
||||||
static isSameSelection(selection_info_1, selection_info_2) {}
|
static isSameSelection(selection_info_1, selection_info_2) {}
|
||||||
|
static async getImageToSelectionDifference() {
|
||||||
|
const selectionInfo = await psapi.getSelectionInfoExe()
|
||||||
|
|
||||||
|
const width = html_manip.getWidth()
|
||||||
|
const height = html_manip.getHeight()
|
||||||
|
const scale_info_str = `${parseInt(width)}x${parseInt(
|
||||||
|
height
|
||||||
|
)} => ${parseInt(selectionInfo.width)}x${parseInt(
|
||||||
|
selectionInfo.height
|
||||||
|
)} `
|
||||||
|
let ratio =
|
||||||
|
(width * height) / (selectionInfo.width * selectionInfo.height)
|
||||||
|
|
||||||
|
// const arrow = percentage >= 1 ? '↑' : '↓'
|
||||||
|
// percentage = percentage >= 1 ? percentage : 1 / percentage
|
||||||
|
|
||||||
|
// const percentage_str = `${arrow}X${percentage.toFixed(2)}`
|
||||||
|
|
||||||
|
// console.log('scale_info_str: ', scale_info_str)
|
||||||
|
// console.log('percentage_str: ', percentage_str)
|
||||||
|
return ratio
|
||||||
|
}
|
||||||
static {}
|
static {}
|
||||||
}
|
}
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
|
|
||||||
|
|
@ -30,15 +30,19 @@ document.getElementById('slWidth').addEventListener('input', (evt) => {
|
||||||
const width = evt.target.value * 64
|
const width = evt.target.value * 64
|
||||||
|
|
||||||
document.getElementById('lWidth').textContent = parseInt(width)
|
document.getElementById('lWidth').textContent = parseInt(width)
|
||||||
|
// widthSliderOnChangeEventHandler(evt)
|
||||||
|
updateResDifferenceLabel()
|
||||||
})
|
})
|
||||||
|
|
||||||
document.getElementById('slHeight').addEventListener('input', (evt) => {
|
document.getElementById('slHeight').addEventListener('input', (evt) => {
|
||||||
const height = evt.target.value * 64
|
const height = evt.target.value * 64
|
||||||
|
|
||||||
document.getElementById('lHeight').textContent = parseInt(height)
|
document.getElementById('lHeight').textContent = parseInt(height)
|
||||||
|
// heightSliderOnChangeEventHandler(evt)
|
||||||
|
updateResDifferenceLabel()
|
||||||
})
|
})
|
||||||
|
|
||||||
document.getElementById('slWidth').addEventListener('change', (evt) => {
|
function widthSliderOnChangeEventHandler(evt) {
|
||||||
let new_width = evt.target.value * 64
|
let new_width = evt.target.value * 64
|
||||||
const b_link = getLinkWidthHeightState()
|
const b_link = getLinkWidthHeightState()
|
||||||
let final_width = new_width
|
let final_width = new_width
|
||||||
|
|
@ -60,8 +64,35 @@ document.getElementById('slWidth').addEventListener('change', (evt) => {
|
||||||
|
|
||||||
g_old_slider_width = final_width // update the old value, so we can use it later
|
g_old_slider_width = final_width // update the old value, so we can use it later
|
||||||
document.getElementById('lWidth').textContent = parseInt(final_width)
|
document.getElementById('lWidth').textContent = parseInt(final_width)
|
||||||
|
}
|
||||||
|
document.getElementById('slWidth').addEventListener('change', (evt) => {
|
||||||
|
widthSliderOnChangeEventHandler(evt)
|
||||||
})
|
})
|
||||||
document.getElementById('slHeight').addEventListener('change', (evt) => {
|
// document.getElementById('slWidth').addEventListener('change', (evt) => {
|
||||||
|
// let new_width = evt.target.value * 64
|
||||||
|
// const b_link = getLinkWidthHeightState()
|
||||||
|
// let final_width = new_width
|
||||||
|
// let final_height
|
||||||
|
// if (b_link) {
|
||||||
|
// const current_height = html_manip.getHeight()
|
||||||
|
// ;[final_width, final_height] = general.scaleToRatio(
|
||||||
|
// new_width,
|
||||||
|
// g_old_slider_width,
|
||||||
|
// _,
|
||||||
|
// current_height,
|
||||||
|
// parseInt(evt.target.max * 64),
|
||||||
|
// parseInt(evt.target.min * 64)
|
||||||
|
// )
|
||||||
|
|
||||||
|
// evt.target.value = parseInt(final_width / 64)
|
||||||
|
// html_manip.autoFillInHeight(final_height)
|
||||||
|
// }
|
||||||
|
|
||||||
|
// g_old_slider_width = final_width // update the old value, so we can use it later
|
||||||
|
// document.getElementById('lWidth').textContent = parseInt(final_width)
|
||||||
|
// })
|
||||||
|
|
||||||
|
function heightSliderOnChangeEventHandler(evt) {
|
||||||
let new_height = evt.target.value * 64
|
let new_height = evt.target.value * 64
|
||||||
|
|
||||||
let final_width
|
let final_width
|
||||||
|
|
@ -83,6 +114,9 @@ document.getElementById('slHeight').addEventListener('change', (evt) => {
|
||||||
}
|
}
|
||||||
g_old_slider_height = final_height // update the old value, so we can use it later
|
g_old_slider_height = final_height // update the old value, so we can use it later
|
||||||
document.getElementById('lHeight').textContent = parseInt(final_height)
|
document.getElementById('lHeight').textContent = parseInt(final_height)
|
||||||
|
}
|
||||||
|
document.getElementById('slHeight').addEventListener('change', (evt) => {
|
||||||
|
heightSliderOnChangeEventHandler(evt)
|
||||||
})
|
})
|
||||||
|
|
||||||
function getWidth() {
|
function getWidth() {
|
||||||
|
|
@ -111,6 +145,7 @@ function autoFillInWidth(width_value) {
|
||||||
document.getElementById('slWidth').value = `${width_value / 64}`
|
document.getElementById('slWidth').value = `${width_value / 64}`
|
||||||
//update the label
|
//update the label
|
||||||
document.getElementById('lWidth').innerHTML = `${parseInt(width_value)}`
|
document.getElementById('lWidth').innerHTML = `${parseInt(width_value)}`
|
||||||
|
updateResDifferenceLabel()
|
||||||
}
|
}
|
||||||
////// End Width//////////
|
////// End Width//////////
|
||||||
|
|
||||||
|
|
@ -130,6 +165,7 @@ function autoFillInHeight(height_value) {
|
||||||
height_slider.value = `${height_value / 64}`
|
height_slider.value = `${height_value / 64}`
|
||||||
//update the label
|
//update the label
|
||||||
document.getElementById('lHeight').innerHTML = `${parseInt(height_value)}`
|
document.getElementById('lHeight').innerHTML = `${parseInt(height_value)}`
|
||||||
|
updateResDifferenceLabel()
|
||||||
}
|
}
|
||||||
|
|
||||||
function autoFillInHRHeight(height_value) {
|
function autoFillInHRHeight(height_value) {
|
||||||
|
|
|
||||||
|
|
@ -240,7 +240,30 @@ const makeBackgroundLayerDesc = () => ({
|
||||||
// },
|
// },
|
||||||
})
|
})
|
||||||
|
|
||||||
async function createBackgroundLayer() {
|
const createSolidLayerDesc = (r, g, b) => ({
|
||||||
|
_obj: 'make',
|
||||||
|
_target: [
|
||||||
|
{
|
||||||
|
_ref: 'contentLayer',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
using: {
|
||||||
|
_obj: 'contentLayer',
|
||||||
|
type: {
|
||||||
|
_obj: 'solidColorLayer',
|
||||||
|
color: {
|
||||||
|
_obj: 'RGBColor',
|
||||||
|
red: r,
|
||||||
|
grain: g,
|
||||||
|
blue: b,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_options: {
|
||||||
|
dialogOptions: 'dontDisplay',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
async function createBackgroundLayer(r = 255, g = 255, b = 255) {
|
||||||
try {
|
try {
|
||||||
const has_background = await hasBackgroundLayer()
|
const has_background = await hasBackgroundLayer()
|
||||||
if (has_background) {
|
if (has_background) {
|
||||||
|
|
@ -248,12 +271,15 @@ async function createBackgroundLayer() {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
await executeAsModal(async () => {
|
await executeAsModal(async () => {
|
||||||
await createNewLayerCommand('background') //create layer
|
// await createNewLayerCommand('background') //create layer
|
||||||
//make the layer into background
|
//make the layer into background
|
||||||
const result = await batchPlay([makeBackgroundLayerDesc()], {
|
const result = await batchPlay(
|
||||||
|
[createSolidLayerDesc(r, g, b), makeBackgroundLayerDesc()],
|
||||||
|
{
|
||||||
synchronousExecution: true,
|
synchronousExecution: true,
|
||||||
modalBehavior: 'execute',
|
modalBehavior: 'execute',
|
||||||
})
|
}
|
||||||
|
)
|
||||||
})
|
})
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn(e)
|
console.warn(e)
|
||||||
|
|
@ -272,4 +298,6 @@ module.exports = {
|
||||||
Layer,
|
Layer,
|
||||||
hasBackgroundLayer,
|
hasBackgroundLayer,
|
||||||
createBackgroundLayer,
|
createBackgroundLayer,
|
||||||
|
createSolidLayerDesc,
|
||||||
|
makeBackgroundLayerDesc,
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
const dialog_box = require('../dialog_box')
|
||||||
|
const { createBackgroundLayer } = require('./layer')
|
||||||
|
class Notification {
|
||||||
|
static {}
|
||||||
|
static async webuiIsOffline() {
|
||||||
|
const r1 = await dialog_box.prompt(
|
||||||
|
"Automatic1111 is Offline, make sure it's running in the background",
|
||||||
|
'',
|
||||||
|
['Cancel', 'How To', 'OK']
|
||||||
|
)
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (r1 === 'Cancel') {
|
||||||
|
/* cancelled or No */
|
||||||
|
console.log('cancel')
|
||||||
|
} else if (r1 === 'OK') {
|
||||||
|
console.log('ok')
|
||||||
|
} else if (r1 === 'How To') {
|
||||||
|
console.log('How to')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
static async webuiAPIMissing() {
|
||||||
|
const r1 = await dialog_box.prompt(
|
||||||
|
"Automatic1111 is running, but you've forgotten to add --api flag, so the plugin can communicate with it",
|
||||||
|
'',
|
||||||
|
['Cancel', 'How To', 'OK']
|
||||||
|
)
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (r1 === 'Cancel') {
|
||||||
|
/* cancelled or No */
|
||||||
|
console.log('cancel')
|
||||||
|
} else if (r1 === 'OK') {
|
||||||
|
console.log('ok')
|
||||||
|
} else if (r1 === 'How To') {
|
||||||
|
console.log('How to')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
static async backgroundLayerIsMissing() {
|
||||||
|
const r1 = await dialog_box.prompt(
|
||||||
|
'You need a white background layer present in your document',
|
||||||
|
'',
|
||||||
|
['Cancel', 'Create']
|
||||||
|
)
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (r1 === 'Cancel') {
|
||||||
|
/* cancelled or No */
|
||||||
|
console.log('cancel')
|
||||||
|
} else if (r1 === 'Create') {
|
||||||
|
await createBackgroundLayer()
|
||||||
|
console.log('create background layer')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
Notification,
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue