removed

.env

@@ -0,0 +1,2 @@
+DB_FILE_NAME=file:local.db
+PORT=3000

.gitignore

@@ -40,3 +40,8 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+*.db
+
+.nx/cache
+.nx/workspace-data

.prettierignore

@@ -0,0 +1,5 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+/.nx/cache
+/.nx/workspace-data

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

.vscode/extensions.json

@@ -1,4 +1,7 @@
 {
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": [
-  "recommendations": ["angular.ng-template"]
+    "angular.ng-template",
+    "nrwl.angular-console",
+    "esbenp.prettier-vscode"
+  ]
 }

angular.json

@@ -1,111 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "vokabeltraining": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "inlineTemplate": true,
-          "inlineStyle": true,
-          "style": "scss",
-          "skipTests": true
-        },
-        "@schematics/angular:class": {
-          "skipTests": true
-        },
-        "@schematics/angular:directive": {
-          "skipTests": true
-        },
-        "@schematics/angular:guard": {
-          "skipTests": true
-        },
-        "@schematics/angular:interceptor": {
-          "skipTests": true
-        },
-        "@schematics/angular:pipe": {
-          "skipTests": true
-        },
-        "@schematics/angular:resolver": {
-          "skipTests": true
-        },
-        "@schematics/angular:service": {
-          "skipTests": true
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:application",
-          "options": {
-            "outputPath": "dist/vokabeltraining",
-            "index": "src/index.html",
-            "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
-            "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "2kB",
-                  "maximumError": "4kB"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-             "proxyConfig": "src/proxy.conf.json"
-           },
-          "configurations": {
-            "production": {
-              "buildTarget": "vokabeltraining:build:production"
-            },
-            "development": {
-              "buildTarget": "vokabeltraining:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
-        }
-      }
-    }
-  },
-  "cli": {
-    "analytics": false
-  }
-}

api/.env

@@ -0,0 +1,2 @@
+DB_FILE_NAME=file:local.db
+PORT=3000

api/project.json

@@ -0,0 +1,38 @@
+{
+  "name": "api",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "api/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "webpack-cli build",
+        "args": ["node-env=production"]
+      },
+      "configurations": {
+        "development": {
+          "args": ["node-env=development"]
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/js:node",
+      "defaultConfiguration": "development",
+      "dependsOn": ["build"],
+      "options": {
+        "buildTarget": "api:build",
+        "runBuildTargetDependencies": false
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "api:build:development"
+        },
+        "production": {
+          "buildTarget": "api:build:production"
+        }
+      }
+    }
+  },
+  "tags": []
+}

api/src/app/app.module.ts

@@ -0,0 +1,11 @@
+import { Module } from '@nestjs/common';
+import { DecksController } from './decks.controller';
+import { DrizzleService } from './drizzle.service';
+import { ProxyController } from './proxy.controller';
+
+@Module({
+  imports: [],
+  controllers: [DecksController,ProxyController],
+  providers: [DrizzleService],
+})
+export class AppModule {}

api/src/app/decks.controller.ts

@@ -0,0 +1,170 @@
+// decks.controller.ts
+import express from 'express';
+import {
+  Controller,
+  Get,
+  Post,
+  Delete,
+  Body,
+  Param,
+  Query,
+  Put,
+  HttpException,
+  HttpStatus,
+  Res,
+} from '@nestjs/common';
+import { DrizzleService } from './drizzle.service';
+import { firstValueFrom } from 'rxjs';
+
+@Controller('decks')
+export class DecksController {
+  constructor(private readonly drizzleService: DrizzleService) {}
+
+  @Get()
+  async getDecks() {
+    const entries = await this.drizzleService.getDecks();
+    const decks = {};
+    for (const entry of entries) {
+      const deckname = entry.deckname!!;
+      if (!decks[deckname]) {
+        decks[deckname] = {
+          name: deckname,
+          images: [],
+        };
+      }
+      if (entry.bildname && entry.bildid) {
+        decks[deckname].images.push({
+          name: entry.bildname,
+          id: entry.bildid,
+          iconindex: entry.iconindex,
+          boxid: entry.id,
+          x1: entry.x1,
+          x2: entry.x2,
+          y1: entry.y1,
+          y2: entry.y2,
+          due: entry.due,
+          ivl: entry.ivl,
+          factor: entry.factor,
+          reps: entry.reps,
+          lapses: entry.lapses,
+          isGraduated: Boolean(entry.isGraduated),
+        });
+      }
+    }
+    return Object.values(decks);
+  }
+
+  @Post()
+  async createDeck(@Body() data: { deckname: string }) {
+    if (!data.deckname) {
+      throw new HttpException('No deckname provided', HttpStatus.BAD_REQUEST);
+    }
+    return this.drizzleService.createDeck(data.deckname);
+  }
+
+  @Get(':deckname')
+  async getDeck(@Param('deckname') deckname: string) {
+    const entries = await this.drizzleService.getDeckByName(deckname);
+    if (entries.length === 0) {
+      throw new HttpException('Deck not found', HttpStatus.NOT_FOUND);
+    }
+
+    const deck = {
+      name: deckname,
+      images: [] as any,
+    };
+
+    for (const entry of entries) {
+      if (entry.bildname && entry.bildid) {
+        deck.images.push({
+          name: entry.bildname,
+          id: entry.bildid,
+          iconindex: entry.iconindex,
+          boxid: entry.id,
+          x1: entry.x1,
+          x2: entry.x2,
+          y1: entry.y1,
+          y2: entry.y2,
+          due: entry.due,
+          ivl: entry.ivl,
+          factor: entry.factor,
+          reps: entry.reps,
+          lapses: entry.lapses,
+          isGraduated: Boolean(entry.isGraduated),
+        });
+      }
+    }
+    return deck;
+  }
+
+  @Delete(':deckname')
+  async deleteDeck(@Param('deckname') deckname: string) {
+    return this.drizzleService.deleteDeck(deckname);
+  }
+
+  @Put(':oldDeckname/rename')
+  async renameDeck(
+    @Param('oldDeckname') oldDeckname: string,
+    @Body() data: { newDeckName: string },
+  ) {
+    if (!data.newDeckName) {
+      throw new HttpException('New deck name is required', HttpStatus.BAD_REQUEST);
+    }
+    return this.drizzleService.renameDeck(oldDeckname, data.newDeckName);
+  }
+
+  @Post('image')
+  async updateImage(@Body() data: any) {
+    if (!data) {
+      throw new HttpException('No data provided', HttpStatus.BAD_REQUEST);
+    }
+
+    const requiredFields = ['deckname', 'bildname', 'bildid', 'boxes'];
+    if (!requiredFields.every((field) => field in data)) {
+      throw new HttpException('Missing fields in data', HttpStatus.BAD_REQUEST);
+    }
+
+    if (!Array.isArray(data.boxes) || data.boxes.length === 0) {
+      throw new HttpException(
+        "'boxes' must be a non-empty list",
+        HttpStatus.BAD_REQUEST,
+      );
+    }
+
+    return this.drizzleService.updateImage(data);
+  }
+
+  @Delete('image/:bildid')
+  async deleteImagesByBildId(@Param('bildid') bildid: string) {
+    return this.drizzleService.deleteImagesByBildId(bildid);
+  }
+
+  @Post('images/:bildid/move')
+  async moveImage(
+    @Param('bildid') bildid: string,
+    @Body() data: { targetDeckId: string },
+  ) {
+    if (!data.targetDeckId) {
+      throw new HttpException('No targetDeckId provided', HttpStatus.BAD_REQUEST);
+    }
+    return this.drizzleService.moveImage(bildid, data.targetDeckId);
+  }
+
+  @Put('boxes/:boxId')
+  async updateBox(
+    @Param('boxId') boxId: number,
+    @Body()
+    data: {
+      due?: number;
+      ivl?: number;
+      factor?: number;
+      reps?: number;
+      lapses?: number;
+      isGraduated?: boolean;
+    },
+  ) {
+    return this.drizzleService.updateBox(boxId, data);
+  }
+
+  
+}

api/src/app/drizzle.service.ts

@@ -0,0 +1,188 @@
+// drizzle.service.ts
+import { Injectable, HttpException, HttpStatus } from '@nestjs/common';
+import { drizzle } from 'drizzle-orm/libsql';
+import { Deck, InsertDeck } from '../db/schema';
+import { eq, and, isNull } from 'drizzle-orm';
+
+@Injectable()
+export class DrizzleService {
+  private db = drizzle('file:local.db');
+
+  async getDecks() {
+    return this.db.select().from(Deck).all();
+  }
+
+  async createDeck(deckname: string) {
+    const result = await this.db.insert(Deck).values({ deckname }).returning();
+    return { status: 'success', deck: result };
+  }
+
+  async getDeckByName(deckname: string) {
+    return this.db.select().from(Deck).where(eq(Deck.deckname, deckname)).all();
+  }
+
+  async deleteDeck(deckname: string) {
+    const existingDeck = await this.getDeckByName(deckname);
+    if (existingDeck.length === 0) {
+      throw new HttpException('Deck not found', HttpStatus.NOT_FOUND);
+    }
+
+    await this.db.delete(Deck).where(eq(Deck.deckname, deckname));
+    return { status: 'success' };
+  }
+
+  async renameDeck(oldDeckname: string, newDeckname: string) {
+    const existingDeck = await this.getDeckByName(oldDeckname);
+    if (existingDeck.length === 0) {
+      throw new HttpException('Deck not found', HttpStatus.NOT_FOUND);
+    }
+
+    const existingNewDeck = await this.getDeckByName(newDeckname);
+    if (existingNewDeck.length > 0) {
+      throw new HttpException(
+        'Deck with the new name already exists',
+        HttpStatus.CONFLICT,
+      );
+    }
+
+    await this.db
+      .update(Deck)
+      .set({ deckname: newDeckname })
+      .where(eq(Deck.deckname, oldDeckname))
+    return { status: 'success', message: 'Deck renamed successfully' };
+  }
+
+  async updateImage(data: {
+    deckname: string;
+    bildname: string;
+    bildid: string;
+    boxes: Array<{ x1: number; x2: number; y1: number; y2: number }>;
+  }) {
+    const existingDeck = await this.getDeckByName(data.deckname);
+    if (existingDeck.length === 0) {
+      throw new HttpException('Deck not found', HttpStatus.NOT_FOUND);
+    }
+
+    await this.db
+      .delete(Deck)
+      .where(
+        and(eq(Deck.deckname, data.deckname), eq(Deck.bildid, data.bildid)),
+      )
+
+    const insertedImages:any = [];
+    for (let index = 0; index < data.boxes.length; index++) {
+      const box = data.boxes[index];
+      const result = await this.db
+        .insert(Deck)
+        .values({
+          deckname: data.deckname,
+          bildname: data.bildname,
+          bildid: data.bildid,
+          iconindex: index,
+          x1: box.x1,
+          x2: box.x2,
+          y1: box.y1,
+          y2: box.y2,
+        }).returning();
+      insertedImages.push(result);
+    }
+
+    return { status: 'success', inserted_images: insertedImages };
+  }
+
+  async deleteImagesByBildId(bildid: string) {
+    const affectedDecks = await this.db
+      .select({ deckname: Deck.deckname })
+      .from(Deck)
+      .where(eq(Deck.bildid, bildid))
+      .all();
+
+    if (affectedDecks.length === 0) {
+      throw new HttpException(
+        'No entries found for the given image ID',
+        HttpStatus.NOT_FOUND,
+      );
+    }
+
+    await this.db.delete(Deck).where(eq(Deck.bildid, bildid));
+
+    for (const deck of affectedDecks) {
+      const remainingImages = await this.db
+        .select()
+        .from(Deck)
+        .where(
+          and(eq(Deck.deckname, deck.deckname), eq(Deck.bildid, bildid)),
+        )
+        .all();
+
+      if (remainingImages.length === 0) {
+        const emptyDeckEntry = await this.db
+          .select()
+          .from(Deck)
+          .where(
+            and(eq(Deck.deckname, deck.deckname), isNull(Deck.bildid)),
+          )
+          .all();
+
+        if (emptyDeckEntry.length === 0) {
+          await this.db.insert(Deck).values({ deckname: deck.deckname });
+        }
+      }
+    }
+
+    return {
+      status: 'success',
+      message: `All entries for image ID "${bildid}" have been deleted.`,
+    };
+  }
+
+  async moveImage(bildid: string, targetDeckId: string) {
+    const existingImages = await this.db
+      .select()
+      .from(Deck)
+      .where(eq(Deck.bildid, bildid))
+      .all();
+
+    if (existingImages.length === 0) {
+      throw new HttpException(
+        'No entries found for the given image ID',
+        HttpStatus.NOT_FOUND,
+      );
+    }
+
+    await this.db
+      .update(Deck)
+      .set({ deckname: targetDeckId })
+      .where(eq(Deck.bildid, bildid))
+
+    return { status: 'success', moved_entries: existingImages.length };
+  }
+
+  async updateBox(
+    boxId: number,
+    data: {
+      due?: number;
+      ivl?: number;
+      factor?: number;
+      reps?: number;
+      lapses?: number;
+      isGraduated?: boolean;
+    },
+  ) {
+    const updateData: any = { ...data };
+    if (typeof data.isGraduated === 'boolean') {
+      updateData.isGraduated = Number(data.isGraduated);
+    }
+
+    const result = await this.db
+      .update(Deck)
+      .set(updateData)
+      .where(eq(Deck.id, boxId))
+
+    if (result.rowsAffected === 0) {
+      throw new HttpException('Box not found', HttpStatus.NOT_FOUND);
+    }
+
+    return { status: 'success' };
+  }
+}

api/src/app/proxy.controller.ts

@@ -0,0 +1,121 @@
+// decks.controller.ts
+import express from 'express';
+import {
+  Controller,
+  Get,
+  Post,
+  Delete,
+  Body,
+  Param,
+  Query,
+  Put,
+  HttpException,
+  HttpStatus,
+  Res,
+} from '@nestjs/common';
+import { DrizzleService } from './drizzle.service';
+import { firstValueFrom } from 'rxjs';
+
+@Controller('')
+export class ProxyController {
+  constructor() {}
+// --------------------
+  // Proxy Endpoints
+  // --------------------
+//   @Get('debug_image/:name/:filename')
+//   async getDebugImage(
+//     @Param('name') name: string,
+//     @Param('filename') filename: string,
+//     @Res() res: express.Response,
+//   ) {
+//     const url = `http://localhost:8080/api/debug_image/${name}/${filename}`;
+//     //const url = `http://localhost:5000/api/debug_image/20250112_112306_9286e3bf/thumbnail.jpg`;
+
+//     try {
+//       // Fetch the image from the external service
+//       const response = await fetch(url);
+
+//       // Check if the response is OK (status code 200-299)
+//       if (!response.ok) {
+//         throw new Error(`Failed to retrieve image: ${response.statusText}`);
+//       }
+
+//       // Get the image data as a buffer
+//       const imageBuffer = await response.arrayBuffer();
+
+//       // Determine the Content-Type based on the file extension
+//       let contentType = 'image/png'; // Default MIME type
+//       if (filename.toLowerCase().endsWith('.jpg') || filename.toLowerCase().endsWith('.jpeg')) {
+//         contentType = 'image/jpeg';
+//       } else if (filename.toLowerCase().endsWith('.gif')) {
+//         contentType = 'image/gif';
+//       } else if (filename.toLowerCase().endsWith('.bmp')) {
+//         contentType = 'image/bmp';
+//       } else if (filename.toLowerCase().endsWith('.tiff') || filename.toLowerCase().endsWith('.tif')) {
+//         contentType = 'image/tiff';
+//       }
+
+//       // Set the Content-Type header and send the image data
+//       res.set('Content-Type', contentType);
+//       res.send(Buffer.from(imageBuffer));
+//     } catch (error) {
+//       // Handle errors
+//       res.status(500).json({ error: error.message });
+//     }
+//   }   
+
+  @Post('ocr')
+  async ocrEndpoint(
+    @Body() data: { image: string },
+    @Res() res: express.Response,
+  ) {
+    try {
+      if (!data || !data.image) {
+        throw new HttpException('No image provided', HttpStatus.BAD_REQUEST);
+      }
+  
+      const response = await fetch('http://localhost:5000/api/ocr', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ image: data.image }),
+      });
+  
+      const result = await response.json();
+  
+      if (!response.ok) {
+        if (response.status === 400) {
+          throw new HttpException(result.error, HttpStatus.BAD_REQUEST);
+        }
+        throw new HttpException(
+          result.error || 'OCR processing failed',
+          HttpStatus.INTERNAL_SERVER_ERROR,
+        );
+      }
+  
+      // Bei erfolgreicher Verarbeitung mit Warnung
+      if (result.warning) {
+        return res.status(HttpStatus.OK).json({
+          warning: result.warning,
+          debug_dir: result.debug_dir,
+        });
+      }
+  
+      // Bei vollständig erfolgreicher Verarbeitung
+      return res.status(HttpStatus.OK).json({
+        status: result.status,
+        results: result.results,
+      });
+  
+    } catch (error) {
+      if (error instanceof HttpException) {
+        throw error;
+      }
+      throw new HttpException(
+        'Internal server error',
+        HttpStatus.INTERNAL_SERVER_ERROR,
+      );
+    }
+  }  
+}

api/src/db/schema.ts

@@ -0,0 +1,30 @@
+import { sqliteTable  as table, text, integer, real } from 'drizzle-orm/sqlite-core';
+import * as t from "drizzle-orm/sqlite-core";
+
+export const Deck = table('Deck', {
+  id: integer('id').primaryKey({ autoIncrement: true }),
+  deckname: text('deckname').notNull(),
+  bildname: text('bildname'),
+  bildid: text('bildid'),
+  iconindex: integer('iconindex'),
+  x1: real('x1'),
+  x2: real('x2'),
+  y1: real('y1'),
+  y2: real('y2'),
+  due: integer('due'),
+  ivl: real('ivl'),
+  factor: real('factor'),
+  reps: integer('reps'),
+  lapses: integer('lapses'),
+  isGraduated: integer('isGraduated'),
+},
+(table) => {
+  return {
+    index: t.uniqueIndex("email_idx").on(table.id),
+  };
+}
+);
+
+export type InsertDeck = typeof Deck.$inferInsert;
+export type SelectDeck = typeof Deck.$inferSelect;
+

api/src/main.ts

@@ -0,0 +1,24 @@
+/**
+ * This is not a production server yet!
+ * This is only a minimal backend to get started.
+ */
+
+import { Logger } from '@nestjs/common';
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from './app/app.module';
+import { json, urlencoded } from 'express';
+
+async function bootstrap() {
+  const app = await NestFactory.create(AppModule);
+  app.use(json({ limit: '50mb' }));
+  app.use(urlencoded({ limit: '50mb', extended: true }));
+  const globalPrefix = 'api';
+  app.setGlobalPrefix(globalPrefix);
+  const port = process.env['PORT'] || 3000;
+  await app.listen(port);
+  Logger.log(
+    `🚀 Application is running on: http://localhost:${port}/${globalPrefix}`
+  );
+}
+
+bootstrap();

api/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist/out-tsc",
+    "module": "ES2020",
+    "types": ["node"],
+    "emitDecoratorMetadata": true,
+    "target": "es2021",
+    "strictNullChecks": true
+  },
+  "include": ["src/**/*.ts"]
+}

api/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "compilerOptions": {
+    "esModuleInterop": true
+  }
+}

api/webpack.config.js

@@ -0,0 +1,20 @@
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+const { join } = require('path');
+
+module.exports = {
+  output: {
+    path: join(__dirname, '../dist/api'),
+  },
+  plugins: [
+    new NxAppWebpackPlugin({
+      target: 'node',
+      compiler: 'tsc',
+      main: './src/main.ts',
+      tsConfig: './tsconfig.app.json',
+      assets: ['./src/assets'],
+      optimization: false,
+      outputHashing: 'none',
+      generatePackageJson: true,
+    }),
+  ],
+};

drizzle.config.ts

@@ -0,0 +1,10 @@
+import 'dotenv/config';
+import { defineConfig } from 'drizzle-kit';
+export default defineConfig({
+  out: './drizzle',
+  schema: './api/src/db/schema.ts',
+  dialect: 'sqlite',
+  dbCredentials: {
+    url: 'file:local1.db',
+  },
+});

nx.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
+  "targetDefaults": {
+    "build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": ["production", "^production"]
+    }
+  },
+  "defaultBase": "master",
+  "namedInputs": {
+    "sharedGlobals": [],
+    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "production": ["default"]
+  },
+  "plugins": [
+    {
+      "plugin": "@nx/webpack/plugin",
+      "options": {
+        "buildTargetName": "build",
+        "serveTargetName": "serve",
+        "previewTargetName": "preview"
+      }
+    }
+  ]
+}

package.json

@@ -3,9 +3,10 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "nx serve",
-    "build": "ng build",
+    "start:all": "concurrently 'nx serve' 'http-server ../vocab-backend'",
-    "watch": "ng build --watch --configuration development"
+    "build": "nx build",
+    "watch": "nx build --watch --configuration development"
   },
   "private": true,
   "dependencies": {
@@ -17,18 +18,49 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
+    "@libsql/client": "^0.14.0",
+    "@nestjs/common": "^10.0.2",
+    "@nestjs/core": "^10.0.2",
+    "@nestjs/platform-express": "^10.0.2",
+    "axios": "^1.6.0",
+    "dotenv": "^16.4.7",
     "fabric": "^5.4.1",
     "flowbite": "^2.5.2",
+    "http-server": "^14.1.1",
+    "reflect-metadata": "^0.1.13",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.10"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^18.2.12",
+    "@angular-devkit/core": "^18.2.12",
+    "@angular-devkit/schematics": "^18.2.12",
     "@angular/cli": "^18.2.12",
     "@angular/compiler-cli": "^18.2.0",
+    "@nestjs/schematics": "^10.0.1",
+    "@nestjs/testing": "^10.0.2",
+    "@nx/angular": "20.3.1",
+    "@nx/js": "20.3.1",
+    "@nx/nest": "^20.3.1",
+    "@nx/node": "20.3.1",
+    "@nx/web": "20.3.1",
+    "@nx/webpack": "20.3.1",
+    "@nx/workspace": "20.3.1",
+    "@schematics/angular": "^18.2.12",
+    "@swc-node/register": "~1.9.1",
+    "@swc/core": "~1.5.7",
+    "@swc/helpers": "~0.5.11",
     "@types/fabric": "^5.3.9",
+    "@types/node": "~18.16.9",
+    "concurrently": "^9.1.2",
+    "drizzle-kit": "^0.30.2",
+    "drizzle-orm": "^0.38.4",
+    "nx": "20.3.1",
+    "prettier": "^2.6.2",
     "tailwindcss": "^3.4.15",
-    "typescript": "~5.5.2"
+    "tsx": "^4.19.2",
+    "typescript": "~5.5.2",
+    "webpack-cli": "^5.1.4"
   }
 }

project.json

@@ -0,0 +1,102 @@
+{
+  "$schema": "node_modules/nx/schemas/project-schema.json",
+  "name": "vokabeltraining",
+  "projectType": "application",
+  "generators": {
+    "@schematics/angular:component": {
+      "inlineTemplate": true,
+      "inlineStyle": true,
+      "style": "scss",
+      "skipTests": true
+    },
+    "@schematics/angular:class": {
+      "skipTests": true
+    },
+    "@schematics/angular:directive": {
+      "skipTests": true
+    },
+    "@schematics/angular:guard": {
+      "skipTests": true
+    },
+    "@schematics/angular:interceptor": {
+      "skipTests": true
+    },
+    "@schematics/angular:pipe": {
+      "skipTests": true
+    },
+    "@schematics/angular:resolver": {
+      "skipTests": true
+    },
+    "@schematics/angular:service": {
+      "skipTests": true
+    }
+  },
+  "sourceRoot": "src",
+  "prefix": "app",
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:application",
+      "options": {
+        "outputPath": "dist/vokabeltraining",
+        "index": "src/index.html",
+        "browser": "src/main.ts",
+        "polyfills": [
+          "zone.js"
+        ],
+        "tsConfig": "tsconfig.app.json",
+        "inlineStyleLanguage": "scss",
+        "assets": [
+          {
+            "glob": "**/*",
+            "input": "public"
+          }
+        ],
+        "styles": [
+          "src/styles.scss"
+        ],
+        "scripts": []
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kB",
+              "maximumError": "1MB"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kB",
+              "maximumError": "4kB"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "options": {
+        "proxyConfig": "proxy.conf.json"
+      },
+      "configurations": {
+        "production": {
+          "buildTarget": "vokabeltraining:build:production"
+        },
+        "development": {
+          "buildTarget": "vokabeltraining:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n"
+    }
+  }
+}

proxy.conf.json

@@ -0,0 +1,12 @@
+{
+    "/api": {
+      "target": "http://localhost:3000",
+      "secure": false,
+      "changeOrigin": true
+    },
+    "/debug_images": {
+      "target": "http://localhost:8080",
+      "secure": false,
+      "changeOrigin": true
+    }
+  }

src/app/deck-list.component.html

@@ -65,7 +65,7 @@
             <div class="flex items-center space-x-2">
               <div class="relative group">
                 <div class="absolute left-0 bottom-full mb-2 w-48 bg-white border border-gray-300 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10 pointer-events-none">
-                  <img src="/api/debug_image/{{image.id}}/thumbnail.jpg" alt="{{ image.name }}" class="w-full h-auto object-cover">
+                  <img src="/debug_images/{{image.id}}/thumbnail.jpg" alt="{{ image.name }}" class="w-full h-auto object-cover">
                 </div>
                 <span class="font-medium cursor-pointer">{{ image.name }}</span>
               </div>
@@ -91,24 +91,34 @@
           </li>
         </ul>
 
-        <!-- Action buttons -->
+        <div class="flex flex-row space-x-2">
-        <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
           <button (click)="openTraining(activeDeck)" class="flex-1 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
             Start Training
           </button>
-          <button (click)="openUploadImageModal(activeDeck.name)" class="flex-1 bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">
+          <div class="flex-1">
+            <div class="relative">
+              <label for="imageFile" class="flex justify-center items-center bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600 cursor-pointer">
                 Add Image
-          </button>
+              </label>
+              <input #imageFile type="file" id="imageFile" (change)="onFileChange($event)" accept="image/*" required class="hidden" />
             </div>
           </div>
         </div>        
       </div>
+    </div>
+  </div>
+  <!-- Loading overlay -->
+  <div *ngIf="loading" class="absolute inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center z-10">
+    <div class="bg-white p-4 rounded shadow">
+      <p class="text-sm text-gray-700">Processing in progress...</p>
+    </div>
+  </div>
   <!-- CreateDeckModalComponent -->
   <app-create-deck-modal (deckCreated)="loadDecks()"></app-create-deck-modal>
 
   <!-- UploadImageModalComponent -->
-  <app-upload-image-modal (imageUploaded)="onImageUploaded($event)"></app-upload-image-modal>
+  <!-- <app-upload-image-modal (imageUploaded)="onImageUploaded($event)"></app-upload-image-modal> -->
-  <app-edit-image-modal *ngIf="imageData" [deckName]="currentUploadDeckName" [imageData]="imageData" (imageSaved)="onImageSaved()" (closed)="onClosed()"></app-edit-image-modal>
+  <app-edit-image-modal *ngIf="imageData" [deckName]="activeDeck.name" [imageData]="imageData" (imageSaved)="onImageSaved()" (closed)="onClosed()"></app-edit-image-modal>
   <!-- TrainingComponent -->
   <app-training *ngIf="trainingsDeck" [deck]="trainingsDeck" (close)="closeTraining()"></app-training>
   <!-- MoveImageModalComponent -->

src/app/deck-list.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, OnInit, signal, ViewChild, WritableSignal } from '@angular/core';
-import { DeckService, Deck, DeckImage } from './deck.service';
+import { DeckService, Deck, DeckImage, Box, OcrResult } from './deck.service';
 import { CommonModule } from '@angular/common';
 import { CreateDeckModalComponent } from './create-deck-modal/create-deck-modal.component';
 import { TrainingComponent } from './training/training.component';
@@ -7,6 +7,7 @@ import { UploadImageModalComponent } from './upload-image-modal/upload-image-mod
 import { EditImageModalComponent } from './edit-image-modal/edit-image-modal.component';
 import { firstValueFrom } from 'rxjs';
 import { MoveImageModalComponent } from './move-image-modal/move-image-modal.component';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-deck-list',
@@ -38,23 +39,23 @@ export class DeckListComponent implements OnInit {
   activeDeck: Deck | null = null;
   private deckToDelete: string | null = null;
   deckToRename: Deck | null = null;
+  loading: boolean = false;
 
   @ViewChild(CreateDeckModalComponent) createDeckModal!: CreateDeckModalComponent;
   @ViewChild(UploadImageModalComponent) uploadImageModal!: UploadImageModalComponent;
   @ViewChild(EditImageModalComponent) editModal!: EditImageModalComponent;
   @ViewChild(UploadImageModalComponent) uploadModal!: UploadImageModalComponent;
+  @ViewChild('imageFile') imageFileElement!: ElementRef;
 
   imageData: { imageSrc: string | ArrayBuffer | null, deckImage: DeckImage } | null = null;
 
-  currentUploadDeckName: string = '';
-
   // Set to track expanded decks
   expandedDecks: Set<string> = new Set<string>();
 
   // State for moving images
   imageToMove: { image: DeckImage, sourceDeck: Deck } | null = null;
 
-  constructor(private deckService: DeckService) { }
+  constructor(private deckService: DeckService,private cdr: ChangeDetectorRef,private http: HttpClient) { }
 
   ngOnInit(): void {
     this.loadExpandedDecks();
@@ -204,7 +205,13 @@ export class DeckListComponent implements OnInit {
     const imageId = image.id;
 
     this.deckService.deleteImage(imageId).subscribe({
-      next: () => this.loadDecks(),
+      next: () => {
+        this.loadDecks();
+        if (this.activeDeck) {
+          this.activeDeck.images = this.activeDeck.images.filter(img => img.id !== imageId);
+          this.cdr.detectChanges(); // Erzwingt einen UI-Update
+        }
+      },
       error: (err) => console.error('Error deleting image', err)
     });
   }
@@ -212,8 +219,7 @@ export class DeckListComponent implements OnInit {
   // Method to edit an image in a deck
   editImage(deck: Deck, image: DeckImage): void {
     let imageSrc = null;
-    this.currentUploadDeckName = deck.name;
+    fetch(`/debug_images/${image.id}/original_compressed.jpg`)
-    fetch(`/api/debug_image/${image.id}/original_compressed.jpg`)
       .then(response => {
         if (!response.ok) {
           throw new Error('Network response was not ok');
@@ -251,7 +257,6 @@ export class DeckListComponent implements OnInit {
 
   // Method to open the upload image modal
   openUploadImageModal(deckName: string): void {
-    this.currentUploadDeckName = deckName;
     this.uploadImageModal.deckName = deckName;
     this.uploadImageModal.open();
   }
@@ -323,4 +328,67 @@ export class DeckListComponent implements OnInit {
     this.imageToMove = null;
     this.loadDecks();
   }
+
+  onFileChange(event: any): void {
+    const file: File = event.target.files[0];
+    if (!file) return;
+    const fileNameElement = document.getElementById('fileName');
+    if (fileNameElement) {
+      fileNameElement.textContent = file.name;
+    }    
+    // this.imageFile = file;
+    this.loading = true;
+
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      const imageSrc = e.target?.result;
+
+      // Image as Base64 string without prefix (data:image/...)
+      const imageBase64 = (imageSrc as string).split(',')[1];
+
+      try {
+        const response = await this.http.post<any>('/api/ocr', { image: imageBase64 }).toPromise();
+
+        if (!response || !response.results) {
+          this.loading = false;
+          return;
+        }
+
+        this.loading = false;
+
+        // Emit event with image data and OCR results
+        const imageName = file?.name ?? '';
+        const imageId = response.results.length > 0 ? response.results[0].name : null;
+        const boxes: Box[] = [];
+        response.results.forEach((result: OcrResult) => {
+          const box = result.box;
+
+          const xs = box.map((point: number[]) => point[0]);
+          const ys = box.map((point: number[]) => point[1]);
+          const xMin = Math.min(...xs);
+          const xMax = Math.max(...xs);
+          const yMin = Math.min(...ys);
+          const yMax = Math.max(...ys);
+          boxes.push({ x1: xMin, x2: xMax, y1: yMin, y2: yMax });
+        });
+        const deckImage: DeckImage = { name: imageName, id: imageId, boxes };
+        //this.imageUploaded.emit({ imageSrc, deckImage });
+        this.imageData = { imageSrc, deckImage };
+
+        this.resetFileInput();
+      } catch (error) {
+        console.error('Error with OCR service:', error);
+        this.loading = false;
+      }
+    };
+    reader.readAsDataURL(file);
+  }  
+  /**
+ * Resets the file input field so the same file can be selected again.
+ */
+  resetFileInput(): void {
+    if (this.imageFileElement && this.imageFileElement.nativeElement) {
+      this.imageFileElement.nativeElement.value = '';
+    }
+  }
 }

src/app/training/training.component.ts

@@ -121,7 +121,7 @@ export class TrainingComponent implements OnInit {
     if (!ctx || !this.currentImageData) return;
 
     const img = new Image();
-    img.src = `/api/debug_image/${this.currentImageData.id}/original_compressed.jpg`;
+    img.src = `/debug_images/${this.currentImageData.id}/original_compressed.jpg`;
     img.onload = () => {
       // Set the canvas size to the image size
       canvas.width = img.width;

tsconfig.json

@@ -2,7 +2,7 @@
   "compileOnSave": false,
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
-    "strict": true,
+    "strict": false,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,