Add OCR and image correction

frontend/src/components/ScannedPage.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
+import type { ScannedPage as ScannedPageType } from '@/types/scanner'
 
 const props = defineProps({
-    imgUrl: String
+    scannedPage: ScannedPageType
 })
 
 const imgLoaded = ref(false)
@@ -12,7 +13,7 @@ const imgLoaded = ref(false)
     <div class="p-2">
         <div class="w-full h-full rounded-lg shadow-lg bg-white flex justify-center items-center">
             <LoadingSpinner v-if="!imgLoaded" class="w-10 h-10 text-gray-600" />
-            <img v-if="imgUrl" v-show="imgLoaded" :src="imgUrl" @load="imgLoaded=true" class="w-full h-full rounded-lg object-cover">
+            <img v-if="scannedPage.status === 'done'" v-show="imgLoaded" :src="'/img/' + scannedPage.filename" @load="imgLoaded=true" class="w-full h-full rounded-lg object-cover">
         </div>
     </div>
 </template>

frontend/src/types/scanner.d.ts

@@ -0,0 +1,16 @@
+export interface ScannedPage {
+    filename?: string;
+	size_bytes: number;
+	status: "processing" | "done";
+}
+
+export interface ScanStatus {
+    pages: Array<ScannedPage>;
+    status:
+      | "initialized"
+      | "idle"
+      | "running"
+      | "done"
+      | "err_no_paper"
+      | "err_cover_open";
+}

frontend/src/views/ScanView.vue

@@ -34,7 +34,7 @@ axios.post('/api/scan')
 <template>
     <dev class="w-full h-full flex flex-col">
         <div class="w-full h-full p-2 flex flex-row flex-wrap overflow-auto">
-            <ScannedPage v-for="page in data.pages" :key="page.filename" class="w-1/5 h-1/2" :imgUrl="'/img/' + page.filename" />
+            <ScannedPage v-for="page in data.pages" :scannedPage="page" class="w-1/5 h-1/2" />
             <ScannedPage v-if="data.status==='running'" class="w-1/5 h-1/2" />
         </div>
         <div class="w-full h-28 p-4 flex">