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

proxy controller,direkter Zugriff auf neue Bilder #10

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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