proxy controller,direkter Zugriff auf neue Bilder #10
This commit is contained in:
parent
ab17db9078
commit
21bd5e4abf
|
|
@ -41,7 +41,7 @@ testem.log
|
|||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
|
||||
*.db
|
||||
|
||||
.nx/cache
|
||||
.nx/workspace-data
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import { defineConfig } from "drizzle-kit";
|
||||
export default defineConfig({
|
||||
dialect: 'sqlite', // 'mysql' | 'sqlite' | 'turso'
|
||||
schema: './src/db/schema'
|
||||
})
|
||||
|
|
@ -1,10 +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],
|
||||
controllers: [DecksController,ProxyController],
|
||||
providers: [DrizzleService],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
// decks.controller.ts
|
||||
import express from 'express';
|
||||
import {
|
||||
Controller,
|
||||
Get,
|
||||
|
|
@ -10,8 +11,10 @@ import {
|
|||
Put,
|
||||
HttpException,
|
||||
HttpStatus,
|
||||
Res,
|
||||
} from '@nestjs/common';
|
||||
import { DrizzleService } from './drizzle.service';
|
||||
import { firstValueFrom } from 'rxjs';
|
||||
|
||||
@Controller('decks')
|
||||
export class DecksController {
|
||||
|
|
@ -68,7 +71,7 @@ export class DecksController {
|
|||
|
||||
const deck = {
|
||||
name: deckname,
|
||||
images: [],
|
||||
images: [] as any,
|
||||
};
|
||||
|
||||
for (const entry of entries) {
|
||||
|
|
@ -162,4 +165,6 @@ export class DecksController {
|
|||
) {
|
||||
return this.drizzleService.updateBox(boxId, data);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
import { Injectable, HttpException, HttpStatus } from '@nestjs/common';
|
||||
import { drizzle } from 'drizzle-orm/libsql';
|
||||
import { Deck, InsertDeck } from '../db/schema';
|
||||
import { eq, and } from 'drizzle-orm';
|
||||
import { eq, and, isNull } from 'drizzle-orm';
|
||||
|
||||
@Injectable()
|
||||
export class DrizzleService {
|
||||
|
|
@ -120,7 +120,7 @@ export class DrizzleService {
|
|||
.select()
|
||||
.from(Deck)
|
||||
.where(
|
||||
and(eq(Deck.deckname, deck.deckname), eq(Deck.bildid, null)),
|
||||
and(eq(Deck.deckname, deck.deckname), isNull(Deck.bildid)),
|
||||
)
|
||||
.all();
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import * as t from "drizzle-orm/sqlite-core";
|
|||
|
||||
export const Deck = table('Deck', {
|
||||
id: integer('id').primaryKey({ autoIncrement: true }),
|
||||
deckname: text('deckname'),
|
||||
deckname: text('deckname').notNull(),
|
||||
bildname: text('bildname'),
|
||||
bildid: text('bildid'),
|
||||
iconindex: integer('iconindex'),
|
||||
|
|
|
|||
|
|
@ -6,9 +6,12 @@
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -24,6 +24,7 @@
|
|||
"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",
|
||||
|
|
@ -50,6 +51,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",
|
||||
|
|
@ -10032,7 +10034,6 @@
|
|||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
|
||||
"integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"safe-buffer": "5.1.2"
|
||||
|
|
@ -10045,7 +10046,6 @@
|
|||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/batch": {
|
||||
|
|
@ -10975,6 +10975,48 @@
|
|||
"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": {
|
||||
"version": "2.0.0",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
|
||||
"integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4.0"
|
||||
|
|
@ -13426,7 +13467,6 @@
|
|||
"version": "4.0.7",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
|
||||
"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/events": {
|
||||
|
|
@ -14799,7 +14839,6 @@
|
|||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
|
||||
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"he": "bin/he"
|
||||
|
|
@ -14888,7 +14927,6 @@
|
|||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
|
||||
"integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"whatwg-encoding": "^2.0.0"
|
||||
|
|
@ -15033,7 +15071,6 @@
|
|||
"version": "1.18.1",
|
||||
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
|
||||
"integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"eventemitter3": "^4.0.0",
|
||||
|
|
@ -15080,7 +15117,6 @@
|
|||
"version": "14.1.1",
|
||||
"resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
|
||||
"integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"basic-auth": "^2.0.1",
|
||||
|
|
@ -17535,7 +17571,6 @@
|
|||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.clonedeepwith": {
|
||||
|
|
@ -19279,7 +19314,6 @@
|
|||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
|
||||
"integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
|
||||
"dev": true,
|
||||
"license": "(WTFPL OR MIT)",
|
||||
"bin": {
|
||||
"opener": "bin/opener-bin.js"
|
||||
|
|
@ -19788,7 +19822,6 @@
|
|||
"version": "1.0.32",
|
||||
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
|
||||
"integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"async": "^2.6.4",
|
||||
|
|
@ -19803,7 +19836,6 @@
|
|||
"version": "2.6.4",
|
||||
"resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
|
||||
"integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lodash": "^4.17.14"
|
||||
|
|
@ -19813,7 +19845,6 @@
|
|||
"version": "3.2.7",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
|
||||
"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ms": "^2.1.1"
|
||||
|
|
@ -19823,7 +19854,6 @@
|
|||
"version": "0.5.6",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
|
||||
"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"minimist": "^1.2.6"
|
||||
|
|
@ -21101,7 +21131,6 @@
|
|||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
|
||||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
|
|
@ -21549,7 +21578,6 @@
|
|||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
|
||||
"integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/select-hose": {
|
||||
|
|
@ -23461,7 +23489,6 @@
|
|||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
|
||||
"integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"qs": "^6.4.0"
|
||||
},
|
||||
|
|
@ -23570,7 +23597,6 @@
|
|||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
|
||||
"integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/url-parse": {
|
||||
|
|
@ -24670,7 +24696,6 @@
|
|||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
|
||||
"integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"iconv-lite": "0.6.3"
|
||||
|
|
@ -24683,7 +24708,6 @@
|
|||
"version": "0.6.3",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
|
||||
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"safer-buffer": ">= 2.1.2 < 3.0.0"
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "nx serve",
|
||||
"start:all": "concurrently 'nx serve' 'http-server ../vocab-backend'",
|
||||
"build": "nx build",
|
||||
"watch": "nx build --watch --configuration development"
|
||||
},
|
||||
|
|
@ -25,6 +26,7 @@
|
|||
"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",
|
||||
|
|
@ -51,6 +53,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",
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
"serve": {
|
||||
"executor": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"proxyConfig": "src/proxy.conf.json"
|
||||
"proxyConfig": "proxy.conf.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
|
|
|
|||
|
|
@ -3,5 +3,10 @@
|
|||
"target": "http://localhost:3000",
|
||||
"secure": false,
|
||||
"changeOrigin": true
|
||||
},
|
||||
"/debug_images": {
|
||||
"target": "http://localhost:8080",
|
||||
"secure": false,
|
||||
"changeOrigin": true
|
||||
}
|
||||
}
|
||||
|
|
@ -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-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
|
||||
<div class="flex flex-row 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">
|
||||
Add Image
|
||||
</button>
|
||||
</div>
|
||||
<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
|
||||
</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-edit-image-modal *ngIf="imageData" [deckName]="currentUploadDeckName" [imageData]="imageData" (imageSaved)="onImageSaved()" (closed)="onClosed()"></app-edit-image-modal>
|
||||
<!-- <app-upload-image-modal (imageUploaded)="onImageUploaded($event)"></app-upload-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 -->
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { DeckService, Deck, DeckImage } from './deck.service';
|
||||
import { ChangeDetectorRef, Component, ElementRef, OnInit, signal, ViewChild, WritableSignal } from '@angular/core';
|
||||
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(`/api/debug_image/${image.id}/original_compressed.jpg`)
|
||||
fetch(`/debug_images/${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 = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue