Aktueller Stand

src/app/deck.service.ts

@@ -9,10 +9,15 @@ export interface Deck {
 }
 
 export interface DeckImage {
-  image: string;
-  text: string;
+  boxes: Box[];
+  name: string;
+}
+export interface Box {
+  x1:number;
+  x2:number;
+  y1:number;
+  y2:number;
 }
-
 @Injectable({
   providedIn: 'root'
 })
@@ -24,7 +29,9 @@ export class DeckService {
   getDecks(): Observable<Deck[]> {
     return this.http.get<Deck[]>(this.apiUrl);
   }
-
+  getImage(name:string): Observable<DeckImage> {
+    return this.http.get<DeckImage>(`${this.apiUrl}/image/${name}`);
+  }
   createDeck(deckname: string): Observable<any> {
     return this.http.post(this.apiUrl, { deckname });
   }
@@ -33,10 +40,7 @@ export class DeckService {
     return this.http.delete(`${this.apiUrl}/${encodeURIComponent(deckName)}`);
   }
 
-  uploadImage(deckName: string, image: File, text: string): Observable<any> {
-    const formData = new FormData();
-    formData.append('image', image);
-    formData.append('text', text);
-    return this.http.post(`${this.apiUrl}/${encodeURIComponent(deckName)}/images`, formData);
+  saveImageData(data:any): Observable<any> {
+    return this.http.post(`${this.apiUrl}/image`, data);
   }
 }

src/app/training/training.component.html

@@ -2,9 +2,9 @@
 <div class="mt-10">
     <h2 class="text-2xl font-bold mb-4">Training: {{ deck.name }}</h2>
     <div class="bg-white shadow rounded-lg p-6 flex flex-col items-center">
-      <img [src]="currentImage?.image" alt="Vokabelbild" class="w-64 h-64 object-contain mb-4">
+      <img [src]="currentImage" alt="Vokabelbild" class="max-h-[50vh] object-contain mb-4">
       <div *ngIf="showTextFlag" class="bg-black bg-opacity-50 text-white text-lg p-2 rounded mb-4">
-        {{ currentImage?.text }}
+        <!-- {{ currentImage?.text }} -->
       </div>
       <div class="flex space-x-4">
         <button (click)="showText()" class="bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600" [disabled]="showTextFlag">

src/app/training/training.component.ts

@@ -18,9 +18,9 @@ export class TrainingComponent {
   unknownCount: number = 0;
   showTextFlag: boolean = false;
 
-  get currentImage(): DeckImage | null {
+  get currentImage(): string | null {
     if (this.currentIndex < this.deck.images.length) {
-      return this.deck.images[this.currentIndex];
+      return `/api/debug_image/${this.deck.images[this.currentIndex].name}`;
     }
     return null;
   }

src/app/upload-image-modal/upload-image-modal.component.ts

@@ -42,6 +42,7 @@ export class UploadImageModalComponent implements AfterViewInit, OnDestroy {
   modal:any;
   originalImageWidth:number|undefined;
   originalImageHeight:number|undefined;
+  imagename:string|undefined|null;
   constructor(private deckService: DeckService, private http: HttpClient) { }
 
   ngAfterViewInit(): void {
@@ -135,6 +136,7 @@ export class UploadImageModalComponent implements AfterViewInit, OnDestroy {
         }
 
         // Bildverarbeitung im Frontend durchführen
+        this.imagename = (response.results && response.results.length>0)?response.results[0].name:null;
         await this.processImage(response.results);
       } catch (error) {
         console.error('Fehler beim OCR-Service:', error);
@@ -313,12 +315,10 @@ export class UploadImageModalComponent implements AfterViewInit, OnDestroy {
   save(): void {
     // Hier kannst du die Logik zum Speichern der Bilddaten implementieren
     // Zum Beispiel:
-    /*
     const data = {
-      deckName: this.deckName,
-      image: this.originalImageSrc,
+      deckname: this.deckName,
+      image: this.imagename,
       boxes: this.boxes,
-      detectedText: this.detectedText
     };
     this.deckService.saveImageData(data).subscribe({
       next: () => {
@@ -331,7 +331,6 @@ export class UploadImageModalComponent implements AfterViewInit, OnDestroy {
         alert('Fehler beim Speichern des Bildes.');
       }
     });
-    */
     // Temporäres Beispiel:
     alert('Save button clicked');
     this.imageUploaded.emit();