102 lines
2.4 KiB
Vue
102 lines
2.4 KiB
Vue
<script setup>
|
|
import LegacyHeader from '../components/LegacyHeader.vue';
|
|
import FaceAiFeedbackPanel from '../components/FaceAiFeedbackPanel.vue';
|
|
import FaceAiHeroCard from '../components/FaceAiHeroCard.vue';
|
|
import FaceAiUploadPanel from '../components/FaceAiUploadPanel.vue';
|
|
import { useFaceAiHome } from '../composables/useFaceAiHome.js';
|
|
|
|
const {
|
|
activeSearch,
|
|
activeSearchStatusLabel,
|
|
busyLabel,
|
|
canPickFile,
|
|
canStartSearch,
|
|
clearSelectedFile,
|
|
currentLocale,
|
|
errorMessage,
|
|
fileInput,
|
|
isDragging,
|
|
isProcessingSearch,
|
|
isWorking,
|
|
loading,
|
|
onDragEnter,
|
|
onDragLeave,
|
|
onDragOver,
|
|
onDrop,
|
|
onFileChange,
|
|
openFilePicker,
|
|
redirectUrl,
|
|
selectedFile,
|
|
selectedFileSizeLabel,
|
|
session,
|
|
simulatorUrl,
|
|
statusLabel,
|
|
submitSearch,
|
|
t
|
|
} = useFaceAiHome();
|
|
</script>
|
|
|
|
<template>
|
|
<main>
|
|
<LegacyHeader />
|
|
|
|
<div class="container my-3 faceai-page">
|
|
<FaceAiHeroCard
|
|
:session="session"
|
|
:current-locale="currentLocale"
|
|
:active-search-status-label="activeSearchStatusLabel"
|
|
:t="t"
|
|
/>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<FaceAiUploadPanel
|
|
:loading="loading"
|
|
:is-working="isWorking"
|
|
:is-processing-search="isProcessingSearch"
|
|
:session="session"
|
|
:simulator-url="simulatorUrl"
|
|
:busy-label="busyLabel"
|
|
:can-pick-file="canPickFile"
|
|
:is-dragging="isDragging"
|
|
:selected-file="selectedFile"
|
|
:selected-file-size-label="selectedFileSizeLabel"
|
|
:can-start-search="canStartSearch"
|
|
:file-input="fileInput"
|
|
:t="t"
|
|
@open-file-picker="openFilePicker"
|
|
@file-change="onFileChange"
|
|
@drag-enter="onDragEnter"
|
|
@drag-over="onDragOver"
|
|
@drag-leave="onDragLeave"
|
|
@drop="onDrop"
|
|
@clear-file="clearSelectedFile"
|
|
@submit-search="submitSearch"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<FaceAiFeedbackPanel
|
|
:status-label="statusLabel"
|
|
:is-working="isWorking"
|
|
:busy-label="busyLabel"
|
|
:active-search="activeSearch"
|
|
:redirect-url="redirectUrl"
|
|
:error-message="errorMessage"
|
|
:t="t"
|
|
/>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.faceai-page {
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.faceai-page {
|
|
padding-bottom: 1.25rem;
|
|
}
|
|
}
|
|
</style>
|