UnitPrint/web-app
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Scan functional, tmp UI

Browse Source
This commit is contained in:
TraceLumen
2026-09-14 09:04:13 +03:00
parent 72d5fce921
commit 9b82548cc6
3 changed files with 608 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

551
src/lib/pages/scan/ScanPage.svelte Normal file
View File

@ -0,0 +1,551 @@
<script>
import { createEventDispatcher } from 'svelte';
import { processImage, createBlobUrl, downloadBlob } from '$lib/common/services/scan.service.js';
const dispatch = createEventDispatcher();
/** @type {'upload' | 'unwrapping' | 'unwrapped' | 'deblurring' | 'deblurred' | 'correcting' | 'corrected'} */
let stage = $state('upload');
let originalFile = $state(/** @type {File | null} */ (null));
let currentBlob = $state(/** @type {Blob | null} */ (null));
let currentBlobUrl = $state('');
let error = $state('');
let fileName = $state('');
function handleBack() {
if (currentBlobUrl) {
URL.revokeObjectURL(currentBlobUrl);
}
dispatch('back');
}
async function handleFileSelect(event) {
const input = event.target;
if (!input.files || input.files.length === 0) {
return;
}
const file = input.files[0];
if (!file.type.startsWith('image/')) {
error = 'Пожалуйста, выберите файл изображения';
return;
}
error = '';
originalFile = file;
fileName = file.name.replace(/\.[^/.]+$/, '');
await processUnwrap(file);
}
async function processUnwrap(file) {
stage = 'unwrapping';
try {
const blob = await processImage(file, 'unwrap');
if (currentBlobUrl) {
URL.revokeObjectURL(currentBlobUrl);
}
currentBlob = blob;
currentBlobUrl = createBlobUrl(blob);
stage = 'unwrapped';
} catch (err) {
error = err.message;
stage = 'upload';
}
}
async function processDeblur() {
if (!currentBlob) return;
stage = 'deblurring';
error = '';
try {
const blob = await processImage(currentBlob, 'deblur');
if (currentBlobUrl) {
URL.revokeObjectURL(currentBlobUrl);
}
currentBlob = blob;
currentBlobUrl = createBlobUrl(blob);
stage = 'deblurred';
} catch (err) {
error = err.message;
stage = 'unwrapped';
}
}
async function processIllumination() {
if (!currentBlob) return;
stage = 'correcting';
error = '';
try {
const blob = await processImage(currentBlob, 'illumination_correct');
if (currentBlobUrl) {
URL.revokeObjectURL(currentBlobUrl);
}
currentBlob = blob;
currentBlobUrl = createBlobUrl(blob);
stage = 'corrected';
} catch (err) {
error = err.message;
stage = 'deblurred';
}
}
function handleDownload() {
if (!currentBlob) return;
const suffix = stage === 'corrected' ? '_final' : stage === 'deblurred' ? '_deblurred' : '_unwrapped';
downloadBlob(currentBlob, `${fileName}${suffix}.png`);
}
function handleReset() {
if (currentBlobUrl) {
URL.revokeObjectURL(currentBlobUrl);
}
stage = 'upload';
originalFile = null;
currentBlob = null;
currentBlobUrl = '';
error = '';
fileName = '';
}
// Cleanup on unmount
import { onDestroy } from 'svelte';
onDestroy(() => {
if (currentBlobUrl) {
URL.revokeObjectURL(currentBlobUrl);
}
});
</script>
<div class="scan-page">
<header class="scan-header">
<button class="back-button" onclick={handleBack}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M19 12H5M12 19l-7-7 7-7"/>
</svg>
Назад
</button>
<h1>Сканирование документов</h1>
</header>
<div class="scan-content">
{#if stage === 'upload'}
<div class="upload-area">
<div class="upload-icon">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="17 8 12 3 7 8"/>
<line x1="12" y1="3" x2="12" y2="15"/>
</svg>
</div>
<h2>Загрузите изображение документа</h2>
<p>Поддерживаются форматы: JPG, PNG, WebP</p>
<label class="upload-button">
<input
type="file"
accept="image/*"
onchange={handleFileSelect}
style="display: none"
/>
Выбрать файл
</label>
</div>
{:else if stage === 'unwrapping'}
<div class="processing-area">
<div class="spinner"></div>
<h2>Выпрямление документа...</h2>
<p>Пожалуйста, подождите</p>
</div>
{:else if stage === 'deblurring'}
<div class="processing-area">
<div class="spinner"></div>
<h2>Улучшение четкости...</h2>
<p>Удаление размытия и улучшение деталей</p>
</div>
{:else if stage === 'correcting'}
<div class="processing-area">
<div class="spinner"></div>
<h2>Коррекция освещения...</h2>
<p>Удаление теней и улучшение контраста</p>
</div>
{:else}
<div class="preview-area">
<div class="preview-container">
<img src={currentBlobUrl} alt="Обработанный документ" />
</div>
<div class="preview-actions">
{#if stage === 'unwrapped'}
<div class="action-group">
<h3>Документ выпрямлен</h3>
<p>Вы можете скачать результат или продолжить улучшение</p>
<div class="action-buttons">
<button class="btn-secondary" onclick={handleDownload}>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
Скачать
</button>
<button class="btn-primary" onclick={processDeblur}>
Улучшить четкость
</button>
</div>
</div>
{:else if stage === 'deblurred'}
<div class="action-group">
<h3>Четкость улучшена</h3>
<p>Вы можете скачать результат или удалить тени</p>
<div class="action-buttons">
<button class="btn-secondary" onclick={handleDownload}>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
Скачать
</button>
<button class="btn-primary" onclick={processIllumination}>
Убрать тени
</button>
</div>
</div>
{:else if stage === 'corrected'}
<div class="action-group">
<h3>Обработка завершена</h3>
<p>Документ полностью обработан и готов к скачиванию</p>
<div class="action-buttons">
<button class="btn-primary large" onclick={handleDownload}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
Скачать документ
</button>
<button class="btn-secondary" onclick={handleReset}>
Обработать другой документ
</button>
</div>
</div>
{/if}
</div>
</div>
{/if}
{#if error}
<div class="error-message">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="8" x2="12" y2="12"/>
<line x1="12" y1="16" x2="12.01" y2="16"/>
</svg>
<div>
<strong>Ошибка</strong>
<p>{error}</p>
</div>
</div>
{/if}
</div>
</div>
<style>
.scan-page {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
min-height: 100vh;
box-sizing: border-box;
}
.scan-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.back-button {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #f5f7fa;
font-size: 16px;
cursor: pointer;
transition: all 0.2s;
}
.back-button:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.scan-header h1 {
margin: 0;
font-size: 32px;
font-weight: 600;
color: #f5f7fa;
}
.scan-content {
display: flex;
flex-direction: column;
gap: 24px;
}
.upload-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 40px;
background: rgba(255, 255, 255, 0.02);
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: 16px;
text-align: center;
}
.upload-icon {
color: #aa3bff;
margin-bottom: 24px;
}
.upload-area h2 {
margin: 0 0 12px;
font-size: 28px;
font-weight: 600;
color: #f5f7fa;
}
.upload-area p {
margin: 0 0 32px;
font-size: 16px;
color: #9ca3af;
}
.upload-button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 16px 32px;
background: linear-gradient(135deg, #aa3bff 0%, #c084fc 100%);
color: white;
font-size: 18px;
font-weight: 600;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(170, 59, 255, 0.3);
}
.upload-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(170, 59, 255, 0.4);
}
.processing-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 40px;
text-align: center;
}
.spinner {
width: 64px;
height: 64px;
border: 4px solid rgba(170, 59, 255, 0.2);
border-top-color: #aa3bff;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 24px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.processing-area h2 {
margin: 0 0 12px;
font-size: 28px;
font-weight: 600;
color: #f5f7fa;
}
.processing-area p {
margin: 0;
font-size: 16px;
color: #9ca3af;
}
.preview-area {
display: flex;
flex-direction: column;
gap: 32px;
}
.preview-container {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.preview-container img {
max-width: 100%;
max-height: 600px;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.preview-actions {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 32px;
}
.action-group {
text-align: center;
}
.action-group h3 {
margin: 0 0 12px;
font-size: 24px;
font-weight: 600;
color: #f5f7fa;
}
.action-group p {
margin: 0 0 24px;
font-size: 16px;
color: #9ca3af;
}
.action-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
font-size: 16px;
font-weight: 600;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.btn-primary {
background: linear-gradient(135deg, #aa3bff 0%, #c084fc 100%);
color: white;
box-shadow: 0 4px 12px rgba(170, 59, 255, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(170, 59, 255, 0.4);
}
.btn-primary.large {
padding: 18px 36px;
font-size: 18px;
}
.btn-secondary {
background: rgba(255, 255, 255, 0.05);
color: #f5f7fa;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
}
.error-message {
display: flex;
gap: 16px;
padding: 20px;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 12px;
color: #fca5a5;
}
.error-message svg {
flex-shrink: 0;
color: #ef4444;
}
.error-message strong {
display: block;
margin-bottom: 4px;
font-size: 16px;
font-weight: 600;
}
.error-message p {
margin: 0;
font-size: 14px;
}
@media (max-width: 768px) {
.scan-page {
padding: 12px;
}
.scan-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.scan-header h1 {
font-size: 24px;
}
.upload-area,
.processing-area {
padding: 40px 20px;
}
.upload-area h2,
.processing-area h2 {
font-size: 22px;
}
.action-buttons {
flex-direction: column;
}
.btn-primary,
.btn-secondary {
width: 100%;
justify-content: center;
}
}
</style>