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

Combine multiple image into and create single combined image

<div class="block block-rounded block-transparent" x-data="aiTab" @keydown.window.shift="updateShiftKeyState(true)" @keyup.window.shift="updateShiftKeyState(false)">
    <div class="block-header pb-0">
        <h6 class="block-title" x-text="getTranslatedHTML('aiTabTitle')"></h6>
    </div>
    <div class="block-content block-content-full">
        
        <div class="row">
            <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="showPromptError" x-text="getTranslatedHTML('promptError')"></p> 
                    <p class="mb-0" x-show="showEmptyCanvasError" 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="showServerError" x-text="getTranslatedHTML('aiServerError')"></p>
                </div>
                <!-- <img :src="$store.canvas.aiImageSrc"  class="img-fluid" alt="" /> -->
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="mb-3">
                    <div class="row gx-2 mb-3">
                        <div class="col">
                            <div>
                                <input type="text" id="prompt" x-model="prompt" class="form-control border-primary" :placeholder="getTranslatedHTML('promptLabel', {
                                    promptType: 'imgText'
                                })" 
                                :disabled="activeOperationID === 'aiOperation-2'" />
                            </div>
                        </div>
                        <div class="col-auto">
                            <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 type="button" class="btn btn-primary btn-lg" @click="generateAIImage()" slot="dropdown-append">
                                        <span x-text="activeOperationLabel"></span>
                                    </button>
                                    <span slot="dropdown-trigger" class="pe-none">
                                        <span class="visually-hidden">Toggle Dropdown</span>
                                    </span>
                                    <ul slot="dropdown-content" class="list-unstyled">
                                        <template x-for="aiOperation in aiOperations">
                                            <li>
                                                <a class="dropdown-item position-relative pe-4" href="javascript:void(0)" @click="updateActiveAIOperation(aiOperation.id)"
                                                    :class="activeOperationID === aiOperation.id ? 'active':''"
                                                    :style="aiOperation.id === 'aiOperation-0' && {borderTopLeftRadius: '10px', borderBottomLeftRadius: '10px'}">
                                                    <span x-text="aiOperation.label" class="fs-sm"></span>
                                                    <span class="position-absolute end-0 me-2 top-50 translate-middle-y" x-show="activeOperationID === aiOperation.id">
                                                        <i class="fa fa-check"></i>
                                                    </span>
                                                </a>
                                            </li>
                                        </template>
                                    </ul>
                            </dropdown-menu>
                        </div>
                    </div>
                    <div class="row gx-2 gy-3 mb-3">
                        <div class="col-auto">
                            <div class="d-flex align-items-center mb-2">
                                <h6 class="mb-0" x-text="getTranslatedHTML('editFunctions')"></h6>
                                <span class="linedesign ms-3 me-0"></span>
                            </div>
                            <div class="btn-group me-1 mb-3 flex-nowrap">
                                <button type="button" class="btn btn-lg btn-secondary" @click="setDrawMode('erase')" x-data="tooltip"
                                    :title="getTranslatedHTML('eraseTitle')" :class="activeDrawMode === 'erase' ? 'active':''"" 
                                    >
                                    <span></span><i class="fa-solid fa-eraser"></i>
                                </button>
                                <button type="button" class="btn btn-lg btn-secondary" @click="setDrawMode('draw')"  x-data="tooltip"
                                    :title="getTranslatedHTML('bringBackTitle')" :class="activeDrawMode === 'draw' ? 'active':''" 
                                    >
                                    <span><i class="fa-solid fa-rotate-left"></i></span>
                                </button>
                                <button type="button" class="btn btn-lg btn-secondary" @click="setDrawMode('create')" x-data="tooltip"
                                    :title="getTranslatedHTML('selectTitle')" :class="activeDrawMode === 'create' ? 'active':''" >
                                    <span class="me-1"><i class="fa-solid fa-plus"></i></span>
                                </button>
                                <button type="button" class="btn btn-lg btn-secondary">
                                    <info-popover datatemplateurl="./infoPopover.html" styles="global" shadow="true" 
                                        class="d-inline-block align-middle bg-transparent text-white"
                                        data-bs-trigger="hover focus" data-bs-placement="bottom" x-data="infoPopover">
                                        <span slot="info-popover-trigger">
                                            <i class="fa-solid fa-circle-info"></i>
                                        </span>
                                        <div slot="info-popover-content" x-data="localization">
                                            <p class="mb-1" x-text="getTranslatedHTML('eraserHint')"></p>
                                            <p class="mb-1" x-text="getTranslatedHTML('bringBackEraserHint')"></p>
                                            <p class="mb-0" x-text="getTranslatedHTML('marqueeSelectionHint')"></p>
                                        </div>
                                    </info-popover>
                                </button>
                            </div>
                        </div>
                        <div class="col">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <div class="d-flex align-items-center">
                                        <h6 class="mb-0" x-text="getTranslatedHTML('eraserSizeText')"></h6>
                                        <span class="linedesign ms-3 me-0"></span>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="custom-range-slider">
                                        <input type="range" class="form-range custom-range-slider__control" x-model="freeDrawingBrushWidth" min="10" max="100" @change="setupFreeDrawingBrush(window.__aiCanvas)"  />
                                        <span class="custom-range-slider__bubble" x-text="freeDrawingBrushWidth" :style="{left: setBubblePosition(freeDrawingBrushWidth, 10, 100)}"></span>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <input type="number" min="10" max="100" class="form-control border-primary" x-model="freeDrawingBrushWidth" /> 
                                </div>
                            </div>
                        </div>
                    </div>
                    <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="setAIImageUploadMode('mainPicture')"
                                    :class="aIImageUploadMode === 'mainPicture' ? 'active':''">
                                    <span x-text="getTranslatedHTML('aiImageUploadToPicture')"></span>
                                    <span class="position-absolute end-0 me-2 top-50 translate-middle-y" x-show="aIImageUploadMode === 'mainPicture'">
                                        <i class="fa fa-check"></i>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="dropdown-item position-relative pe-5" @click="setAIImageUploadMode('motive')"
                                    :class="aIImageUploadMode === 'motive' ? 'active':''">
                                    <span x-text="getTranslatedHTML('aiImageUploadToMotive')"></span>
                                    <span class="position-absolute end-0 me-2 top-50 translate-middle-y" x-show="aIImageUploadMode === 'motive'">
                                        <i class="fa fa-check"></i>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="dropdown-item position-relative pe-5" @click="setAIImageUploadMode('background')"
                                    :class="aIImageUploadMode === 'background' ? 'active':''">
                                    <span x-text="getTranslatedHTML('aiImageUploadToBackground')"></span>
                                    <span class="position-absolute end-0 me-2 top-50 translate-middle-y" x-show="aIImageUploadMode === 'background'">
                                        <i class="fa fa-check"></i>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </dropdown-menu>
                </div>
                
            </div>
            <div class="col-7">
                <div class="row gx-2 gy-2">
                    <div class="col-12">
                        <div id="ai-canvas-wrapper" class="ratio ratio-1x1" x-bind="aiTriggerEL"
                            :class="{'pe-none': activeOperationID !== 'aiOperation-1'}">
                            <div x-init="$store.elements.aiCanvasResizeEL = $el">
                                <canvas id="aiCanvas" x-intersect.once="initAICanvas($el)"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </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="isAiModalLoaderVisible ? 'd-flex':'d-none'">
            <i class="fas fa-spinner fa-pulse"></i>
        </div>
    </div>
</div>