source: main/trunk/model-interfaces-dev/atea/ocr/src/components/MainPage.vue@ 35734

<template>
<div class="root">
    <edit-page v-if="imageToEdit != null" class="image-editor" :image="imageToEdit" @closeRequested="onEditorCloseRequested" />

    <button class="btn-primary spacing-bottom" @click="uploadFile">
        <span class="material-icons">upload</span>
        <span>{{ translations.get("Main_UploadImages") }}</span>
    </button>

    <div v-for="[id, imageInfo] in images" :key="id" class="image-list card"
        :style="{ 'max-height': imageInfo.isExpanded ? 'none' : '12em' }">
        <image-display :imageBuffer="imageInfo.buffer" :type="imageInfo.image.type" :ref="id" />

        <div class="controls">
            <button class="btn-primary" @click="doOcr(id)" :disabled="imageInfo.ocr">
                <span class="material-icons">play_arrow</span>
                <span>{{ translations.get("Main_PerformOCR") }}</span>
            </button>

            <!-- <div v-if="imageInfo.ocr" class="progress-bar-container">
                <div class="progress-bar-value progress-bar-indeterminate" />
            </div> -->
            <button class="btn-primary" @click="imageToEdit = imageInfo.image">Edit</button>

            <div class="text-container">
                <pre>{{ imageInfo.text }}</pre>
            </div>
        </div>

        <div class="expander-spacer" />
        <div v-if="!imageInfo.isExpanded" class="washout" />

        <button class="btn-primary theme-flat expander" @click="imageInfo.isExpanded = !imageInfo.isExpanded">
            v Expand
        </button>
    </div>

    <input ref="fileInput" type="file" @input="onFilesChanged" class="hidden" multiple
        accept="image/png,image/jpeg,image/gif,image/bmp,image/tiff,image/webp,application/pdf" />
</div>

</template>

<style scoped lang="scss">
.hidden {
    display: none;
}

.spacing-bottom {
    margin-bottom: 1em;
}

.image-editor {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9;
}

.image-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

    position: relative;
    overflow: hidden;

    margin-bottom: 1rem;

    .expander {
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 2;
    }

    .expander-spacer {
        height: 1em;
    }

    .washout {
        position: absolute;
        bottom: 0;
        height: 60%;
        width: 100%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgb(247, 247, 247) 95%);
    }
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 1em;
}
</style>

<script>
import { mapState } from "vuex";
import EditPage from "./EditPage.vue";
import ImageDisplay from "./ImageDisplay.vue"
import OcrService, { OcrOptions } from "../js/OcrService"
import Util from "../js/Util";

const ocrService = new OcrService();

export default {
    name: "MainPage",
    components: {
        ImageDisplay,
        EditPage
    },
    data() {
        return {
            /** @type {Map<String, {image: File, buffer: ArrayBuffer, text: String, ocr: Boolean, isExpanded: Boolean}>} */
            images: new Map(),
            imageToEdit: null
        }
    },
    computed: {
        ...mapState({
            translations: state => state.translations
        })
    },
    methods: {
        uploadFile() {
            this.$refs.fileInput.click();
        },
        async onFilesChanged() {
            /** @type {File[]} */
            const files = this.$refs.fileInput.files;
            if (files === null || files === undefined || files.length < 1) {
                return;
            }

            for (const file of files) {
                const buffer = await file.arrayBuffer();

                this.images.set(
                    Util.generateUuid(),
                    {
                        image: file,
                        buffer: buffer
                    }
                )
            }
        },
        async doOcr(id) {
            // TODO: Catch and log error

            const imageInfo = this.images.get(id);
            imageInfo.ocr = true;

            const imageBlob = await this.$refs[id].getImageBlobAsync();

            const result = await ocrService.run([
                {
                    image: imageBlob,
                    options: new OcrOptions(false)
                }
            ]);

            imageInfo.ocr = false;
            imageInfo.text = result[0].text;
        },
        onEditorCloseRequested() {
            this.imageToEdit = null;
        }
    }
}
</script>