Add Scan functional, tmp UI

src/App.svelte

@@ -1,14 +1,17 @@
 <script>
 	import MainMenu from '$lib/pages/main/MainMenu.svelte';
 	import PrintMenu from '$lib/pages/print/PrintMenu.svelte';
+	import ScanPage from '$lib/pages/scan/ScanPage.svelte';
 
-	/** @type {'main' | 'print'} */
+	/** @type {'main' | 'print' | 'scan'} */
 	let page = $state('main');
 
 	/** @param {'print' | 'scan' | 'photo' | 'access'} id */
 	function handleAction(id) {
 		if (id === 'print') {
 			page = 'print';
+		} else if (id === 'scan') {
+			page = 'scan';
 		} else {
 			console.log('Выбрано действие:', id);
 		}
@@ -53,5 +56,7 @@
 		<MainMenu onAction={handleAction} />
 	{:else if page === 'print'}
 		<PrintMenu onBack={handleBack} />
+	{:else if page === 'scan'}
+		<ScanPage onBack={handleBack} />
 	{/if}
 </main>

src/lib/common/services/scan.service.js

@@ -0,0 +1,51 @@
+/**
+ * @typedef {'unwrap' | 'deblur' | 'illumination_correct'} ScanEndpoint
+ */
+
+/**
+ * Отправляет изображение на обработку и возвращает обработанный blob
+ * @param {Blob} imageFile - Исходный файл изображения
+ * @param {ScanEndpoint} endpoint - Эндпоинт для обработки
+ * @returns {Promise<Blob>} - Обработанное изображение
+ */
+export async function processImage(imageFile, endpoint) {
+  const formData = new FormData();
+  formData.append('file', imageFile);
+
+  const response = await fetch(`/api/scan/${endpoint}`, {
+    method: 'POST',
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Ошибка обработки (${endpoint}): ${errorText}`);
+  }
+
+  return await response.blob();
+}
+
+/**
+ * Создает URL для blob (для отображения в <img>)
+ * @param {Blob} blob
+ * @returns {string}
+ */
+export function createBlobUrl(blob) {
+  return URL.createObjectURL(blob);
+}
+
+/**
+ * Скачивает blob как файл
+ * @param {Blob} blob
+ * @param {string} filename
+ */
+export function downloadBlob(blob, filename = 'processed.png') {
+  const url = createBlobUrl(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}

src/lib/pages/scan/ScanPage.svelte

@@ -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>