convert lasso selection into square selection with offset

pull/378/head
Abdullah Alfaraj 2023-09-23 09:14:57 +03:00
parent a09dedca87
commit 4e3f247ec2
5 changed files with 112 additions and 31 deletions

View File

@ -193,21 +193,24 @@ async function hasSessionSelectionChanged() {
} }
} }
async function calcWidthHeightFromSelection() { async function calcWidthHeightFromSelection(selectionInfo) {
//set the width and height, hrWidth, and hrHeight using selection info and selection mode //set the width and height, hrWidth, and hrHeight using selection info and selection mode
const selection_mode = sd_tab_store.data.selection_mode const selection_mode = sd_tab_store.data.selection_mode
if (selection_mode === 'ratio') { if (selection_mode === 'ratio') {
//change (width and height) and (hrWidth, hrHeight) to match the ratio of selection //change (width and height) and (hrWidth, hrHeight) to match the ratio of selection
const base_size = sd_tab_util.helper_store.data.base_size const base_size = sd_tab_util.helper_store.data.base_size
const [width, height, hr_width, hr_height] = const [width, height, hr_width, hr_height] =
await selection.selectionToFinalWidthHeight(base_size, base_size) await selection.selectionToFinalWidthHeight(
selectionInfo,
base_size,
base_size
)
// console.log('width,height: ', width, height) // console.log('width,height: ', width, height)
html_manip.autoFillInWidth(width) html_manip.autoFillInWidth(width)
html_manip.autoFillInHeight(height) html_manip.autoFillInHeight(height)
html_manip.autoFillInHRWidth(hr_width) html_manip.autoFillInHRWidth(hr_width)
html_manip.autoFillInHRHeight(hr_height) html_manip.autoFillInHRHeight(hr_height)
} else if (selection_mode === 'precise') { } else if (selection_mode === 'precise') {
const selectionInfo = await psapi.getSelectionInfoExe()
const [width, height, hr_width, hr_height] = [ const [width, height, hr_width, hr_height] = [
selectionInfo.width, selectionInfo.width,
selectionInfo.height, selectionInfo.height,
@ -230,9 +233,7 @@ const eventHandler = async (event, descriptor) => {
// const isSelectionActive = await psapi.checkIfSelectionAreaIsActive() // const isSelectionActive = await psapi.checkIfSelectionAreaIsActive()
if (new_selection_info) { if (new_selection_info) {
const current_selection = new_selection_info // Note: don't use checkIfSelectionAreaIsActive to return the selection object, change this. await calcWidthHeightFromSelection(new_selection_info)
await calcWidthHeightFromSelection()
} }
} catch (e) { } catch (e) {
console.warn(e) console.warn(e)
@ -668,7 +669,7 @@ document.addEventListener('mouseenter', async (event) => {
) { ) {
// if there is an active selection and if the selection has changed // if there is an active selection and if the selection has changed
await calcWidthHeightFromSelection() await calcWidthHeightFromSelection(new_selection)
} else { } else {
// sessionStartHtml(true)//generate more, green color // sessionStartHtml(true)//generate more, green color
//if you didn't move the selection. //if you didn't move the selection.

View File

@ -31,10 +31,14 @@ function finalWidthHeight(
return [finalWidth, finalHeight] return [finalWidth, finalHeight]
} }
async function selectionToFinalWidthHeight(minWidth = 512, minHeight = 512) { async function selectionToFinalWidthHeight(
selectionInfo,
minWidth = 512,
minHeight = 512
) {
// const { getSelectionInfoExe } = require('./psapi') // const { getSelectionInfoExe } = require('./psapi')
try { try {
const selectionInfo = await psapi.getSelectionInfoExe() // const selectionInfo = await psapi.getSelectionInfoExe()
const [finalWidth, finalHeight] = finalWidthHeight( const [finalWidth, finalHeight] = finalWidthHeight(
selectionInfo.width, selectionInfo.width,
selectionInfo.height, selectionInfo.height,
@ -319,15 +323,47 @@ async function channelToSelectionExe(channel_name = 'mask') {
console.warn(e) console.warn(e)
} }
} }
async function inpaintLassoInitImageAndMask(channel_name = 'mask') {
function makeSquare(selectionInfo, offset) {
// Calculate the current width and height
let width = selectionInfo.right - selectionInfo.left
let height = selectionInfo.bottom - selectionInfo.top
// Determine the maximum dimension
let maxDim = Math.max(width, height)
// Calculate the difference for width and height
let diffWidth = maxDim - width
let diffHeight = maxDim - height
// Add half the difference to 'right' and 'bottom', subtract the rest from 'left' and 'top'
selectionInfo.right += Math.floor(diffWidth / 2) + offset
selectionInfo.left -= diffWidth - Math.floor(diffWidth / 2) + offset
selectionInfo.bottom += Math.floor(diffHeight / 2) + offset
selectionInfo.top -= diffHeight - Math.floor(diffHeight / 2) + offset
// Update width and height
selectionInfo.width = maxDim + 2 * offset
selectionInfo.height = maxDim + 2 * offset
return selectionInfo
}
async function inpaintLassoInitImageAndMask(channel_name = 'mask', offset = 0) {
const selectionInfo = await psapi.getSelectionInfoExe()
//convert the selection box into square box so that you have best output results
const squareSelection = makeSquare(selectionInfo, offset)
//correct width and height sliders, since this is lasso mode.
await calcWidthHeightFromSelection(squareSelection)
async function getImageFromCanvas() { async function getImageFromCanvas() {
const width = html_manip.getWidth() const width = html_manip.getWidth()
const height = html_manip.getHeight() const height = html_manip.getHeight()
const selectionInfo = await psapi.getSelectionInfoExe()
const base64 = await io.IO.getSelectionFromCanvasAsBase64Interface_New( const base64 = await io.IO.getSelectionFromCanvasAsBase64Interface_New(
width, width,
height, height,
selectionInfo, squareSelection,
true true
) )
return base64 return base64
@ -348,7 +384,7 @@ async function inpaintLassoInitImageAndMask(channel_name = 'mask') {
// ) // )
// const selection_info = await psapi.getSelectionInfoExe() // const selection_info = await psapi.getSelectionInfoExe()
// }) // })
await selectionToChannel('mask') //lasso selection to channel called 'mask' await selectionToChannel(channel_name) //lasso selection to channel called 'mask'
const init_base64 = await getImageFromCanvas() const init_base64 = await getImageFromCanvas()
@ -360,7 +396,7 @@ async function inpaintLassoInitImageAndMask(channel_name = 'mask') {
synchronousExecution: true, synchronousExecution: true,
}) })
// const selection_info = await psapi.getSelectionInfoExe() // const selection_info = await psapi.getSelectionInfoExe()
mask_base64 = await fillSelectionWhiteOutsideBlack() mask_base64 = await fillSelectionWhiteOutsideBlack(squareSelection)
}) })
//save laso selection to channel //save laso selection to channel
@ -385,7 +421,7 @@ async function inpaintLassoInitImageAndMask(channel_name = 'mask') {
//mask //mask
} }
async function fillSelectionWhiteOutsideBlack() { async function fillSelectionWhiteOutsideBlack(selectionInfo) {
// Create a new layer // Create a new layer
const layer_name = 'mask' const layer_name = 'mask'
const getSelectionDesc = () => ({ const getSelectionDesc = () => ({
@ -495,10 +531,7 @@ async function fillSelectionWhiteOutsideBlack() {
{ modalBehavior: 'execute' } { modalBehavior: 'execute' }
) )
//get the rectangular bounding box selection await psapi.reSelectMarqueeExe(selectionInfo)
const rect_selection_info = await psapi.getSelectionInfoExe()
await psapi.reSelectMarqueeExe(rect_selection_info)
const width = html_manip.getWidth() const width = html_manip.getWidth()
const height = html_manip.getHeight() const height = html_manip.getHeight()
@ -506,7 +539,7 @@ async function fillSelectionWhiteOutsideBlack() {
const base64 = await io.IO.getSelectionFromCanvasAsBase64Interface_New( const base64 = await io.IO.getSelectionFromCanvasAsBase64Interface_New(
width, width,
height, height,
rect_selection_info, selectionInfo,
true, true,
layer_name + '.png' layer_name + '.png'
) )

View File

@ -86,6 +86,8 @@ const Modes = observer(() => {
].includes(store.data.mode) ].includes(store.data.mode)
) { ) {
return ( return (
<>
<div>
<SpCheckBox <SpCheckBox
// style={{ marginRight: '10px' }} // style={{ marginRight: '10px' }}
onChange={handleLassoModeChange} onChange={handleLassoModeChange}
@ -95,6 +97,33 @@ const Modes = observer(() => {
Lasso Mode Lasso Mode
</SpCheckBox> </SpCheckBox>
<SpSlider
show-value="false"
id="lasso_offset"
min="0"
max="100"
value={helper_store.data.lasso_offset}
onInput={(evt: any) => {
helper_store.data.lasso_offset = Number(
evt.target.value
)
}}
style={{
display: store.data.is_lasso_mode
? void 0
: 'none',
}}
>
<sp-label slot="label" class="title">
Lasso Offset:
</sp-label>
<sp-label slot="label">
{helper_store.data.lasso_offset}
</sp-label>
</SpSlider>
</div>
</>
// <sp-checkbox checked={store.data.is_lasso_mode ? true : void 0}> // <sp-checkbox checked={store.data.is_lasso_mode ? true : void 0}>
// lasso mode // lasso mode
// </sp-checkbox> // </sp-checkbox>
@ -574,8 +603,13 @@ class SDTab extends React.Component<{}> {
store.data.selection_mode = store.data.selection_mode =
selection_mode.value selection_mode.value
try { try {
const selectionInfo =
//@ts-ignore //@ts-ignore
await calcWidthHeightFromSelection() await psapi.getSelectionInfoExe()
//@ts-ignore
await calcWidthHeightFromSelection(
selectionInfo
)
} catch (e) { } catch (e) {
console.warn(e) console.warn(e)
} }
@ -663,8 +697,13 @@ class SDTab extends React.Component<{}> {
base_size base_size
try { try {
const selectionInfo =
//@ts-ignore //@ts-ignore
await calcWidthHeightFromSelection() await psapi.getSelectionInfoExe()
//@ts-ignore
await calcWidthHeightFromSelection(
selectionInfo
)
} catch (e) { } catch (e) {
console.warn(e) console.warn(e)
} }

View File

@ -182,6 +182,7 @@ export const helper_store = new AStore({
previous_height: 512, previous_height: 512,
native_presets: {}, native_presets: {},
base_size: 512 as number, base_size: 512 as number,
lasso_offset: 10 as number,
}) })
export async function refreshModels() { export async function refreshModels() {
let b_result = false let b_result = false
@ -683,3 +684,8 @@ export function loadPresetSettings(preset: any) {
// io_ts.presetToStore(preset?.controlnet_tab_preset, store) // io_ts.presetToStore(preset?.controlnet_tab_preset, store)
} }
} }
export default {
store: store,
helper_store: helper_store,
}

View File

@ -3,6 +3,7 @@
import * as scripts from '../ultimate_sd_upscaler/scripts' import * as scripts from '../ultimate_sd_upscaler/scripts'
import * as control_net from '../controlnet/entry' import * as control_net from '../controlnet/entry'
import { store as session_store } from '../session/session_store' import { store as session_store } from '../session/session_store'
import sd_tab_util from '../sd_tab/util'
import { import {
html_manip, html_manip,
@ -492,7 +493,8 @@ export class LassoInpaintMode extends Img2ImgMode {
console.warn(e) console.warn(e)
} }
const [init_image, mask] = await selection.inpaintLassoInitImageAndMask( const [init_image, mask] = await selection.inpaintLassoInitImageAndMask(
'mask' 'mask',
sd_tab_util.helper_store.data.lasso_offset
) )
const selectionInfo = await psapi.getSelectionInfoExe() const selectionInfo = await psapi.getSelectionInfoExe()