aknuth
/
vokabeltraining
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

proxy controller,direkter Zugriff auf neue Bilder #10

This commit is contained in:
Andreas Knuth 2025-01-17 23:27:29 +00:00
parent ab17db9078
commit 21bd5e4abf
16 changed files with 297 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -41,7 +41,7 @@ testem.log
.DS_Store .DS_Store
Thumbs.db Thumbs.db
*.db
.nx/cache .nx/cache
.nx/workspace-data .nx/workspace-data

5
api/drizzle.config.ts
View File

@ -1,5 +0,0 @@
import { defineConfig } from "drizzle-kit";
export default defineConfig({
dialect: 'sqlite', // 'mysql' | 'sqlite' | 'turso'
schema: './src/db/schema'
})

3
api/src/app/app.module.ts
View File

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

7
api/src/app/decks.controller.ts
View File

@ -1,4 +1,5 @@
// decks.controller.ts // decks.controller.ts
import express from 'express';
import { import {
Controller, Controller,
Get, Get,
@ -10,8 +11,10 @@ import {
Put, Put,
HttpException, HttpException,
HttpStatus, HttpStatus,
Res,
} from '@nestjs/common'; } from '@nestjs/common';
import { DrizzleService } from './drizzle.service'; import { DrizzleService } from './drizzle.service';
import { firstValueFrom } from 'rxjs';
@Controller('decks') @Controller('decks')
export class DecksController { export class DecksController {
@ -68,7 +71,7 @@ export class DecksController {
const deck = { const deck = {
name: deckname, name: deckname,
images: [], images: [] as any,
}; };
for (const entry of entries) { for (const entry of entries) {
@ -162,4 +165,6 @@ export class DecksController {
) { ) {
return this.drizzleService.updateBox(boxId, data); return this.drizzleService.updateBox(boxId, data);
} }
} }

4
api/src/app/drizzle.service.ts
View File

@ -2,7 +2,7 @@
import { Injectable, HttpException, HttpStatus } from '@nestjs/common'; import { Injectable, HttpException, HttpStatus } from '@nestjs/common';
import { drizzle } from 'drizzle-orm/libsql'; import { drizzle } from 'drizzle-orm/libsql';
import { Deck, InsertDeck } from '../db/schema'; import { Deck, InsertDeck } from '../db/schema';
import { eq, and } from 'drizzle-orm'; import { eq, and, isNull } from 'drizzle-orm';
@Injectable() @Injectable()
export class DrizzleService { export class DrizzleService {
@ -120,7 +120,7 @@ export class DrizzleService {
.select() .select()
.from(Deck) .from(Deck)
.where( .where(
and(eq(Deck.deckname, deck.deckname), eq(Deck.bildid, null)), and(eq(Deck.deckname, deck.deckname), isNull(Deck.bildid)),
) )
.all(); .all();

121
api/src/app/proxy.controller.ts Normal file
View File

@ -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,
);
}
}
}

2
api/src/db/schema.ts
View File

@ -3,7 +3,7 @@ import * as t from "drizzle-orm/sqlite-core";
export const Deck = table('Deck', { export const Deck = table('Deck', {
id: integer('id').primaryKey({ autoIncrement: true }), id: integer('id').primaryKey({ autoIncrement: true }),
deckname: text('deckname'), deckname: text('deckname').notNull(),
bildname: text('bildname'), bildname: text('bildname'),
bildid: text('bildid'), bildid: text('bildid'),
iconindex: integer('iconindex'), iconindex: integer('iconindex'),

3
api/src/main.ts
View File

@ -6,9 +6,12 @@
import { Logger } from '@nestjs/common'; import { Logger } from '@nestjs/common';
import { NestFactory } from '@nestjs/core'; import { NestFactory } from '@nestjs/core';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
import { json, urlencoded } from 'express';
async function bootstrap() { async function bootstrap() {
const app = await NestFactory.create(AppModule); const app = await NestFactory.create(AppModule);
app.use(json({ limit: '50mb' }));
app.use(urlencoded({ limit: '50mb', extended: true }));
const globalPrefix = 'api'; const globalPrefix = 'api';
app.setGlobalPrefix(globalPrefix); app.setGlobalPrefix(globalPrefix);
const port = process.env['PORT'] || 3000; const port = process.env['PORT'] || 3000;

10
drizzle.config.ts Normal file
View File

@ -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',
},
});

64
package-lock.json generated
View File

@ -24,6 +24,7 @@
"dotenv": "^16.4.7", "dotenv": "^16.4.7",
"fabric": "^5.4.1", "fabric": "^5.4.1",
"flowbite": "^2.5.2", "flowbite": "^2.5.2",
"http-server": "^14.1.1",
"reflect-metadata": "^0.1.13", "reflect-metadata": "^0.1.13",
"rxjs": "~7.8.0", "rxjs": "~7.8.0",
"tslib": "^2.3.0", "tslib": "^2.3.0",
@ -50,6 +51,7 @@
"@swc/helpers": "~0.5.11", "@swc/helpers": "~0.5.11",
"@types/fabric": "^5.3.9", "@types/fabric": "^5.3.9",
"@types/node": "~18.16.9", "@types/node": "~18.16.9",
"concurrently": "^9.1.2",
"drizzle-kit": "^0.30.2", "drizzle-kit": "^0.30.2",
"drizzle-orm": "^0.38.4", "drizzle-orm": "^0.38.4",
"nx": "20.3.1", "nx": "20.3.1",
@ -10032,7 +10034,6 @@
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz", "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
"integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==", "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"safe-buffer": "5.1.2" "safe-buffer": "5.1.2"
@ -10045,7 +10046,6 @@
"version": "5.1.2", "version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/batch": { "node_modules/batch": {
@ -10975,6 +10975,48 @@
"safe-buffer": "~5.1.0" "safe-buffer": "~5.1.0"
} }
}, },
"node_modules/concurrently": {
"version": "9.1.2",
"resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.1.2.tgz",
"integrity": "sha512-H9MWcoPsYddwbOGM6difjVwVZHl63nwMEwDJG/L7VGtuaJhb12h2caPG2tVPWs7emuYix252iGfqOyrz1GczTQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"chalk": "^4.1.2",
"lodash": "^4.17.21",
"rxjs": "^7.8.1",
"shell-quote": "^1.8.1",
"supports-color": "^8.1.1",
"tree-kill": "^1.2.2",
"yargs": "^17.7.2"
},
"bin": {
"conc": "dist/bin/concurrently.js",
"concurrently": "dist/bin/concurrently.js"
},
"engines": {
"node": ">=18"
},
"funding": {
"url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
}
},
"node_modules/concurrently/node_modules/supports-color": {
"version": "8.1.1",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"has-flag": "^4.0.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/supports-color?sponsor=1"
}
},
"node_modules/connect-history-api-fallback": { "node_modules/connect-history-api-fallback": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz", "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
@ -11130,7 +11172,6 @@
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz", "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
"integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==", "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">= 0.4.0" "node": ">= 0.4.0"
@ -13426,7 +13467,6 @@
"version": "4.0.7", "version": "4.0.7",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/events": { "node_modules/events": {
@ -14799,7 +14839,6 @@
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true,
"license": "MIT", "license": "MIT",
"bin": { "bin": {
"he": "bin/he" "he": "bin/he"
@ -14888,7 +14927,6 @@
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
"integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==", "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
"devOptional": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"whatwg-encoding": "^2.0.0" "whatwg-encoding": "^2.0.0"
@ -15033,7 +15071,6 @@
"version": "1.18.1", "version": "1.18.1",
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
"integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"eventemitter3": "^4.0.0", "eventemitter3": "^4.0.0",
@ -15080,7 +15117,6 @@
"version": "14.1.1", "version": "14.1.1",
"resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz", "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
"integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==", "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"basic-auth": "^2.0.1", "basic-auth": "^2.0.1",
@ -17535,7 +17571,6 @@
"version": "4.17.21", "version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/lodash.clonedeepwith": { "node_modules/lodash.clonedeepwith": {
@ -19279,7 +19314,6 @@
"version": "1.5.2", "version": "1.5.2",
"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz", "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
"integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==", "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
"dev": true,
"license": "(WTFPL OR MIT)", "license": "(WTFPL OR MIT)",
"bin": { "bin": {
"opener": "bin/opener-bin.js" "opener": "bin/opener-bin.js"
@ -19788,7 +19822,6 @@
"version": "1.0.32", "version": "1.0.32",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
"integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==", "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"async": "^2.6.4", "async": "^2.6.4",
@ -19803,7 +19836,6 @@
"version": "2.6.4", "version": "2.6.4",
"resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
"integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"lodash": "^4.17.14" "lodash": "^4.17.14"
@ -19813,7 +19845,6 @@
"version": "3.2.7", "version": "3.2.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"ms": "^2.1.1" "ms": "^2.1.1"
@ -19823,7 +19854,6 @@
"version": "0.5.6", "version": "0.5.6",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==", "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"minimist": "^1.2.6" "minimist": "^1.2.6"
@ -21101,7 +21131,6 @@
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
"devOptional": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/resolve": { "node_modules/resolve": {
@ -21549,7 +21578,6 @@
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz", "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
"integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==", "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/select-hose": { "node_modules/select-hose": {
@ -23461,7 +23489,6 @@
"version": "0.5.0", "version": "0.5.0",
"resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz", "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
"integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==", "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
"dev": true,
"dependencies": { "dependencies": {
"qs": "^6.4.0" "qs": "^6.4.0"
}, },
@ -23570,7 +23597,6 @@
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz", "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
"integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==", "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/url-parse": { "node_modules/url-parse": {
@ -24670,7 +24696,6 @@
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz", "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
"integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==", "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
"devOptional": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"iconv-lite": "0.6.3" "iconv-lite": "0.6.3"
@ -24683,7 +24708,6 @@
"version": "0.6.3", "version": "0.6.3",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
"devOptional": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"safer-buffer": ">= 2.1.2 < 3.0.0" "safer-buffer": ">= 2.1.2 < 3.0.0"

3
package.json
View File

@ -4,6 +4,7 @@
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "nx serve", "start": "nx serve",
"start:all": "concurrently 'nx serve' 'http-server ../vocab-backend'",
"build": "nx build", "build": "nx build",
"watch": "nx build --watch --configuration development" "watch": "nx build --watch --configuration development"
}, },
@ -25,6 +26,7 @@
"dotenv": "^16.4.7", "dotenv": "^16.4.7",
"fabric": "^5.4.1", "fabric": "^5.4.1",
"flowbite": "^2.5.2", "flowbite": "^2.5.2",
"http-server": "^14.1.1",
"reflect-metadata": "^0.1.13", "reflect-metadata": "^0.1.13",
"rxjs": "~7.8.0", "rxjs": "~7.8.0",
"tslib": "^2.3.0", "tslib": "^2.3.0",
@ -51,6 +53,7 @@
"@swc/helpers": "~0.5.11", "@swc/helpers": "~0.5.11",
"@types/fabric": "^5.3.9", "@types/fabric": "^5.3.9",
"@types/node": "~18.16.9", "@types/node": "~18.16.9",
"concurrently": "^9.1.2",
"drizzle-kit": "^0.30.2", "drizzle-kit": "^0.30.2",
"drizzle-orm": "^0.38.4", "drizzle-orm": "^0.38.4",
"nx": "20.3.1", "nx": "20.3.1",

2
project.json
View File

@ -83,7 +83,7 @@
"serve": { "serve": {
"executor": "@angular-devkit/build-angular:dev-server", "executor": "@angular-devkit/build-angular:dev-server",
"options": { "options": {
"proxyConfig": "src/proxy.conf.json" "proxyConfig": "proxy.conf.json"
}, },
"configurations": { "configurations": {
"production": { "production": {

5
proxy.conf.json
View File

@ -3,5 +3,10 @@
"target": "http://localhost:3000", "target": "http://localhost:3000",
"secure": false, "secure": false,
"changeOrigin": true "changeOrigin": true
},
"/debug_images": {
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": true
} }
} }

26
src/app/deck-list.component.html
View File

@ -65,7 +65,7 @@
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<div class="relative group"> <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"> <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> </div>
<span class="font-medium cursor-pointer">{{ image.name }}</span> <span class="font-medium cursor-pointer">{{ image.name }}</span>
</div> </div>
@ -91,24 +91,34 @@
</li> </li>
</ul> </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"> <button (click)="openTraining(activeDeck)" class="flex-1 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
Start Training Start Training
</button> </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">
Add Image <div class="relative">
</button> <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
</label>
<input #imageFile type="file" id="imageFile" (change)="onFileChange($event)" accept="image/*" required class="hidden" />
</div>
</div>
</div> </div>
</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 --> <!-- CreateDeckModalComponent -->
<app-create-deck-modal (deckCreated)="loadDecks()"></app-create-deck-modal> <app-create-deck-modal (deckCreated)="loadDecks()"></app-create-deck-modal>
<!-- UploadImageModalComponent --> <!-- 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 --> <!-- TrainingComponent -->
<app-training *ngIf="trainingsDeck" [deck]="trainingsDeck" (close)="closeTraining()"></app-training> <app-training *ngIf="trainingsDeck" [deck]="trainingsDeck" (close)="closeTraining()"></app-training>
<!-- MoveImageModalComponent --> <!-- MoveImageModalComponent -->

86
src/app/deck-list.component.ts
View File

@ -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 { CommonModule } from '@angular/common';
import { CreateDeckModalComponent } from './create-deck-modal/create-deck-modal.component'; import { CreateDeckModalComponent } from './create-deck-modal/create-deck-modal.component';
import { TrainingComponent } from './training/training.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 { EditImageModalComponent } from './edit-image-modal/edit-image-modal.component';
import { firstValueFrom } from 'rxjs'; import { firstValueFrom } from 'rxjs';
import { MoveImageModalComponent } from './move-image-modal/move-image-modal.component'; import { MoveImageModalComponent } from './move-image-modal/move-image-modal.component';
import { HttpClient } from '@angular/common/http';
@Component({ @Component({
selector: 'app-deck-list', selector: 'app-deck-list',
@ -38,23 +39,23 @@ export class DeckListComponent implements OnInit {
activeDeck: Deck | null = null; activeDeck: Deck | null = null;
private deckToDelete: string | null = null; private deckToDelete: string | null = null;
deckToRename: Deck | null = null; deckToRename: Deck | null = null;
loading: boolean = false;
@ViewChild(CreateDeckModalComponent) createDeckModal!: CreateDeckModalComponent; @ViewChild(CreateDeckModalComponent) createDeckModal!: CreateDeckModalComponent;
@ViewChild(UploadImageModalComponent) uploadImageModal!: UploadImageModalComponent; @ViewChild(UploadImageModalComponent) uploadImageModal!: UploadImageModalComponent;
@ViewChild(EditImageModalComponent) editModal!: EditImageModalComponent; @ViewChild(EditImageModalComponent) editModal!: EditImageModalComponent;
@ViewChild(UploadImageModalComponent) uploadModal!: UploadImageModalComponent; @ViewChild(UploadImageModalComponent) uploadModal!: UploadImageModalComponent;
@ViewChild('imageFile') imageFileElement!: ElementRef;
imageData: { imageSrc: string | ArrayBuffer | null, deckImage: DeckImage } | null = null; imageData: { imageSrc: string | ArrayBuffer | null, deckImage: DeckImage } | null = null;
currentUploadDeckName: string = '';
// Set to track expanded decks // Set to track expanded decks
expandedDecks: Set<string> = new Set<string>(); expandedDecks: Set<string> = new Set<string>();
// State for moving images // State for moving images
imageToMove: { image: DeckImage, sourceDeck: Deck } | null = null; imageToMove: { image: DeckImage, sourceDeck: Deck } | null = null;
constructor(private deckService: DeckService) { } constructor(private deckService: DeckService,private cdr: ChangeDetectorRef,private http: HttpClient) { }
ngOnInit(): void { ngOnInit(): void {
this.loadExpandedDecks(); this.loadExpandedDecks();
@ -204,7 +205,13 @@ export class DeckListComponent implements OnInit {
const imageId = image.id; const imageId = image.id;
this.deckService.deleteImage(imageId).subscribe({ 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) 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 // Method to edit an image in a deck
editImage(deck: Deck, image: DeckImage): void { editImage(deck: Deck, image: DeckImage): void {
let imageSrc = null; 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 => { .then(response => {
if (!response.ok) { if (!response.ok) {
throw new Error('Network response was not 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 // Method to open the upload image modal
openUploadImageModal(deckName: string): void { openUploadImageModal(deckName: string): void {
this.currentUploadDeckName = deckName;
this.uploadImageModal.deckName = deckName; this.uploadImageModal.deckName = deckName;
this.uploadImageModal.open(); this.uploadImageModal.open();
} }
@ -323,4 +328,67 @@ export class DeckListComponent implements OnInit {
this.imageToMove = null; this.imageToMove = null;
this.loadDecks(); 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 = '';
}
}
} }

2
src/app/training/training.component.ts
View File

@ -121,7 +121,7 @@ export class TrainingComponent implements OnInit {
if (!ctx || !this.currentImageData) return; if (!ctx || !this.currentImageData) return;
const img = new Image(); 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 = () => { img.onload = () => {
// Set the canvas size to the image size // Set the canvas size to the image size
canvas.width = img.width; canvas.width = img.width;