aico-image-editor/src/components/backgroundRemoval/backgroundRemoval.html

Combine multiple image into and create single combined image

<div class="block position-relative mb-0" x-data="backgroundRemoval">
    <div class="block-content block-content-full" @object-added-to-ai-canvas.window="() => {
        if($event.detail.object.name === 'motive' || $event.detail.object.name === 'mainPicture') {
            // get url of object which is selected on main canvas
            currentImageSrc = $event.detail.object.getSrc();
        }  
        
    }">
        <div class="d-flex align-items-center mb-2">
            <h6 class="mb-0 text-uppercase">
                <span x-text="getTranslatedHTML('backgroundRemovalReplace')"></span>
            </h6>
            <info-popover datatemplateurl="./infoPopover.html" styles="global" shadow="true" class="d-inline-block align-middle ms-2"
                data-bs-trigger="hover focus" data-bs-placement="bottom" x-data="infoPopover">
                <span slot="info-popover-trigger" class="cursor-pointer">
                    <i class="fa-solid fa-circle-info fa-lg text-warning lh-1"></i>
                </span>
                <div slot="info-popover-content" x-data="localization">
                    <small x-html="getTranslatedHTML('replaceBackgroundApiNotice')"></small>
                </div>
            </info-popover>
            <span class="linedesign ms-3 me-0"></span>
        </div>

        
        <div class="mb-3">
            <small class="text-warning" x-text="getTranslatedHTML('watermarkNotice')"></small>
        </div>
        <div class="row mb-3">
            <div class="col-12">
                <div class="alert alert-danger alert-dismissible mb-2" x-show="showAllErrors">
                    <button type="button" class="btn-close" @click="hideErrorMesssages()" aria-label="Close"></button>
                    <p class="mb-0" x-show="activeObjectError" x-text="getTranslatedHTML('aiCanvasImageError')"></p>
                    <p class="mb-0" x-show="showFileSizeValidationError" x-text="getTranslatedHTML('aiFileSizeValidationError', {
                        maxFileSize: maxFileSize
                    })"></p>
                    <p class="mb-0" x-show="serverError" x-text="serverError"></p>
                </div>
            </div>
            <div class="col-3" x-show="currentImageSrc">
                <div class="ratio ratio-1x1">
                    <img :src="currentImageSrc"  class="img-fluid img-contain" alt="" />
                </div>
            </div>
        </div>
        <div class="mb-3">
            <label class="form-label">Select mode</label>
            <div class="space-x-2">
                <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="photoroom-mode-remove"  value="remove" x-model="photoroomAPIMode" />
                <label class="form-check-label" for="photoroom-mode-remove" x-text="getTranslatedHTML('removeBackgroundBtnText')"></label>
                </div>
                <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="photoroom-mode-edit"  value="edit" x-model="photoroomAPIMode" />
                <label class="form-check-label" for="photoroom-mode-edit" x-text="getTranslatedHTML('editBackgroundText')"></label>
                </div>
            </div>
        </div>
        <div class="row gx-3 gy-3 mb-3 align-items-center" :class="photoroomAPIMode === 'edit' ? 'd-none':''">
            <div class="col-4">
                <div class="d-flex align-items-center">
                    <label class="form-label" for="subject-shadow" x-text="getTranslatedHTML('backgroundRemovalColorPlaceholder')"></label>
                    <span class="linedesign ms-3 me-0"></span>
                </div>
                <select x-model="backgroundRemovalFormat" class="form-select border-primary form-control-sm">
                    <option value="png">png</option>
                    <option value="jpg">jpeg</option>
                    <option value="webp">webp</option>
                </select>
            </div>
            <div class="col-4">
                <div class="d-flex align-items-center">
                    <label class="form-label" for="subject-shadow" x-text="getTranslatedHTML('backgroundRemovalSizePlaceholder')"></label>
                    <span class="linedesign ms-3 me-0"></span>
                </div>
                <select x-model="backgroundRemovalSize" class="form-select border-primary form-control-sm">
                    <option value="preview">preview (0.25 MP)</option>
                    <option value="medium">medium (1.5 MP)</option>
                    <option value="hd">hd (4 MP)</option>
                    <option value="full">full (36 MP)</option>
                </select>
            </div>
            
            <div class="col-4">
                <div class="form-check form-switch form-check-inline">
                    <input class="form-check-input" type="checkbox" value="" id="canvas-bg-color" name="canvas-bg-color" x-model="shouldBackgroundRemovalCrop" />
                    <label class="form-check-label" for="canvas-bg-color" x-text="getTranslatedHTML('crop')"></label>
                </div>
            </div>
        </div>
        <div class="row gx-3 gy-3 mb-3 align-items-center" :class="photoroomAPIMode === 'remove' ? 'd-none':''">
            <div class="col-12">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" value="" id="remove-background" name="remove-background"  x-model="prRemoveBackground"/>
                    <label class="form-check-label" for="remove-background" x-text="getTranslatedHTML('removeBackground')"></label>
                </div>
            </div>
            <div class="col-12" x-show="prRemoveBackground">
                <input type="text" class="form-control border-primary" x-model="backgroundPrompt" :placeholder="getTranslatedHTML('promptLabel', {
                        promptType: 'background'
                    })"/>
            </div>
            <div class="col-12">
                <div class="row gx-3">
                    <!-- <div class="col-auto" x-show="prRemoveBackground">
                        <label class="form-label" for="background-scaling" x-text="getTranslatedHTML('photoroomBackgroundScaling')"></label>
                        <select x-model="backgroundScaling" class="form-select border-primary form-control-sm" id="background-scaling">
                            <option value="fill" x-text="getTranslatedHTML('fill')"></option>
                            <option value="fit" x-text="getTranslatedHTML('fit')"></option>
                        </select>
                    </div> -->
                    <div class="col-8">
                        <div class="d-flex align-items-center">
                            <label class="form-label" for="subject-scaling" x-text="getTranslatedHTML('photoroomSubjectScaling')"></label>
                            <span class="linedesign ms-3 me-0"></span>
                        </div>
                        <select x-model="subjectScaling" class="form-select border-primary form-control-sm w-50 mt-1" for="subject-scaling">
                            <option value="fill" x-text="getTranslatedHTML('fill')"></option>
                            <option value="fit" x-text="getTranslatedHTML('fit')"></option>
                        </select>
                    </div>
                    <div class="col-4">
                        <div class="d-flex align-items-center">
                            <label class="form-label" for="subject-shadow" x-text="getTranslatedHTML('shadowText')"></label>
                            <span class="linedesign ms-3 me-0"></span>
                        </div>
                        <select x-model="subjectShadow" class="form-select border-primary form-control-sm mt-1" for="subject-shadow">
                            <option value="" x-text="getTranslatedHTML('noShadow')"></option>
                            <option value="ai.soft" x-text="getTranslatedHTML('soft')"></option>
                            <option value="ai.hard" x-text="getTranslatedHTML('hard')"></option>
                            <option value="ai.floating" x-text="getTranslatedHTML('floating')"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div>
                    <div class="d-flex align-items-center">
                        <label class="form-label" for="subject-scaling" x-text="getTranslatedHTML('size')"></label>
                        <span class="linedesign ms-3 me-0"></span>
                    </div>
                    <div class="space-x-2 mt-1">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" id="output-size-custom" name="output-size-custom" value="custom"  
                                x-model="outputSize"/>
                            <label class="form-check-label" for="output-size-custom" x-text="getTranslatedHTML('custom')"></label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" id="output-size-original" name="output-size-original" value="originalImage" 
                                x-model="outputSize"/>
                            <label class="form-check-label" for="output-size-original" x-text="getTranslatedHTML('originalImage')"></label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" id="output-size-cropped" name="output-size-cropped" value="croppedSubject" 
                                x-model="outputSize"/>
                            <label class="form-check-label" for="output-size-cropped" x-text="getTranslatedHTML('cropped')"></label>
                        </div>
                    </div>
                </div>
                <div class="mt-2">
                    <div class="row" x-show="outputSize === 'custom'">
                        <div class="col-6">
                            <!-- <label class="form-check-label" for="output-width" x-text="getTranslatedHTML('width')"></label> -->
                            <input type="number" class="form-control border" id="output-width" x-model="outputWidth" 
                                :placeholder="getTranslatedHTML('width')"/>
                        </div>
                        <div class="col-6">
                            <!-- <label class="form-check-label" for="output-height" x-text="getTranslatedHTML('height')"></label> -->
                            <input type="number" class="form-control border" id="output-height" x-model="outputHeight" 
                                :placeholder="getTranslatedHTML('height')"/>
                        </div>
                    </div>
                    <div class="row" x-show="outputSize === 'originalImage' || outputSize === 'croppedSubject'">
                        <div class="col-6">
                            <!-- <label class="form-check-label" for="output-max-width" x-text="getTranslatedHTML('maxWidth')"></label> -->
                            <input type="number" class="form-control border" id="output-max-width" x-model="outputMaxWidth" 
                                :placeholder="getTranslatedHTML('maxWidth')"/>
                        </div>
                        <div class="col-6">
                            <!-- <label class="form-check-label" for="output-max-height" x-text="getTranslatedHTML('maxHeight')"></label> -->
                            <input type="number" class="form-control border" id="output-max-height" x-model="outputMaxHeight" 
                                :placeholder="getTranslatedHTML('maxHeight')"/>
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    <!-- <div class="form-check form-switch" x-show="!prRemoveBackground">
                        <input class="form-check-input" type="checkbox" id="expand-mode" name="expand-mode" x-model="expandMode" />
                        <label class="form-check-label" for="expand-mode" x-text="getTranslatedHTML('uncrop')"></label>
                    </div> -->
                    <div>
                        <div class="d-flex align-items-center">
                            <label class="form-label" for="subject-scaling" x-text="getTranslatedHTML('referenceBoxLabel')"></label>
                            <span class="linedesign ms-3 me-0"></span>
                        </div>
                        <div class="space-x-2 mt-1">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" id="subject-box" name="subject-box" value="subjectBox" x-model="referenceBox">
                                <label class="form-check-label" for="subject-box" x-text="getTranslatedHTML('subjectBox')"></label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" id="original-image" name="original-image" value="originalImage" x-model="referenceBox">
                                <label class="form-check-label" for="original-image" x-text="getTranslatedHTML('originalImage')"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pb-3 mb-3 border-bottom">
            <button type="button" class="btn btn-lg btn-primary" @click="processBackground()" slot="dropdown-append">
                <span x-text="getTranslatedHTML('removeBackgroundBtnText')" x-show="photoroomAPIMode === 'remove'"></span>
                <span x-text="getTranslatedHTML('editBackgroundText')" x-show="photoroomAPIMode !== 'remove'"></span>
            </button>
        </div>
        <div class="text-end">
            <dropdown-menu datatemplateurl="./dropdownMenu.html" styles="global" shadow="true"  x-data="dropdownMenu"
                class="btn-group btn-group-lg " dropdown-trigger-class="dropdown-toggle-split">
                <button slot="dropdown-append" type="button" class="btn btn-lg btn-primary" x-text="getTranslatedHTML('aiTabUploadButtonLabel', {
                    addToType: addToType
                })"
                    @click="upoloadAndUse()"></button>
                <span slot="dropdown-trigger" class="pe-none">
                    <span class="visually-hidden">Toggle Dropdown</span>
                </span>
                <ul slot="dropdown-content" class="list-unstyled">
                    <li>
                        <a href="javascript:void(0)" class="dropdown-item position-relative pe-5" @click="setImageUploadMode('mainPicture')"
                            :class="imageUploadMode === 'mainPicture' ? 'active':''">
                            <span x-text="getTranslatedHTML('aiImageUploadToPicture')"></span>
                            <span class="position-absolute end-0 me-2 top-50 translate-middle-y" x-show="imageUploadMode === 'mainPicture'">
                                <i class="fa fa-check"></i>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" class="dropdown-item position-relative pe-5" @click="setImageUploadMode('motive')"
                            :class="imageUploadMode === 'motive' ? 'active':''">
                            <span x-text="getTranslatedHTML('aiImageUploadToMotive')"></span>
                            <span class="position-absolute end-0 me-2 top-50 translate-middle-y" x-show="imageUploadMode === 'motive'">
                                <i class="fa fa-check"></i>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" class="dropdown-item position-relative pe-5" @click="setImageUploadMode('background')"
                            :class="imageUploadMode === 'background' ? 'active':''">
                            <span x-text="getTranslatedHTML('aiImageUploadToBackground')"></span>
                            <span class="position-absolute end-0 me-2 top-50 translate-middle-y" x-show="imageUploadMode === 'background'">
                                <i class="fa fa-check"></i>
                            </span>
                        </a>
                    </li>
                </ul>
            </dropdown-menu>
        </div>
       
        <div class="server-loader position-absolute w-100 h-100 start-0 top-0 pe-none bg-white-75 justify-content-center align-items-center z-index-2" :class="isLoaderVisible ? 'd-flex':'d-none'">
            <i class="fas fa-spinner fa-pulse"></i>
        </div>
    </div>
</div>