Tools-Zentrale: Hybrid-Web-App Case Study

# docker-compose.yml (vereinfacht)
services:
  pdf-converter:
    build: ./docker/pdf-converter
    ports: ["3099:3099"]
    mem_limit: 1g
    depends_on: [redis]
 
  whisper:
    build: ./docker/whisper
    ports: ["3100:3100"]
    mem_limit: 2g
    # GPU-Support wenn verfuegbar
    deploy:
      resources:
        reservations:
          devices:
            - capabilities: [gpu]
 
  rembg:
    build: ./docker/rembg
    ports: ["3101:3101"]
    mem_limit: 1g
 
  esrgan:
    build: ./docker/esrgan
    ports: ["3102:3102"]
    mem_limit: 1g
 
  # ... weitere Services
 
  redis:
    image: redis:alpine
    ports: ["6379:6379"]
    mem_limit: 256m

// lib/api/server-processing.ts (vereinfacht)
export async function submitPdfJob(
  file: File,
  operation: 'convert' | 'compress' | 'ocr'
): Promise<string> {
  const formData = new FormData();
  formData.append('file', file);
  formData.append('operation', operation);
 
  const response = await fetch('/api/pdf/jobs', {
    method: 'POST',
    body: formData,
  });
 
  const { jobId } = await response.json();
  return jobId; // Sofortige Antwort
}
 
export async function getJobStatus(jobId: string): Promise<JobStatus> {
  const response = await fetch(`/api/pdf/jobs/${jobId}/status`);
  return response.json();
}

// hooks/useQueueJob.ts
export function useQueueJob(options: UseQueueJobOptions = {}): UseQueueJobReturn {
  const { pollInterval = 1000, autoDownload = true, onComplete, onError } = options;
 
  const [jobId, setJobId] = useState<string | null>(null);
  const [status, setStatus] = useState<JobStatus | null>(null);
  const [progress, setProgress] = useState(0);
  const [position, setPosition] = useState(0);
  const [estimatedTime, setEstimatedTime] = useState<number | null>(null);
 
  // Polling-Logik
  useEffect(() => {
    if (!jobId || !isPolling) return;
 
    const poll = async () => {
      const jobStatus = await getJobStatus(jobId);
 
      setStatus(jobStatus.status);
      setProgress(jobStatus.progress);
      setPosition(jobStatus.position);
 
      if (jobStatus.status === 'completed') {
        setIsPolling(false);
 
        if (autoDownload) {
          const result = await downloadJobResult(jobId);
          // Browser-Download triggern
          triggerDownload(result.blob, result.filename);
          onComplete?.(result.blob, result.filename);
        }
        return;
      }
 
      if (jobStatus.status === 'failed') {
        setIsPolling(false);
        onError?.(new Error(jobStatus.error));
        return;
      }
 
      // Weiter pollen
      pollingRef.current = setTimeout(poll, pollInterval);
    };
 
    poll();
  }, [jobId, isPolling]);
 
  return {
    status,
    progress,
    position,
    estimatedTime,
    startJob: (id: string) => { setJobId(id); setIsPolling(true); },
    cancel: () => cancelJob(jobId),
    reset: () => { /* Reset state */ },
  };
}

function PdfToWordTool() {
  const { status, progress, position, startJob } = useQueueJob({
    onComplete: (blob, filename) => {
      toast.success(`${filename} erfolgreich konvertiert!`);
    },
    onError: (error) => {
      toast.error(error.message);
    },
  });
 
  const handleUpload = async (file: File) => {
    const jobId = await submitPdfJob(file, 'convert');
    startJob(jobId);
  };
 
  return (
    <div>
      {status === 'waiting' && (
        <p>Position in Warteschlange: {position}</p>
      )}
      {status === 'active' && (
        <ProgressBar value={progress} />
      )}
    </div>
  );
}

// hooks/useBatchJob.ts
export function useBatchJob(options: UseBatchJobOptions = {}): UseBatchJobReturn {
  const [totalFiles, setTotalFiles] = useState(0);
  const [completedFiles, setCompletedFiles] = useState(0);
  const [failedFiles, setFailedFiles] = useState(0);
  const [files, setFiles] = useState<BatchFileInfo[]>([]);
 
  // Batch-Status enthalt Details pro Datei
  useEffect(() => {
    if (!batchId || !isPolling) return;
 
    const poll = async () => {
      const batchStatus = await getBatchStatus(batchId);
 
      setTotalFiles(batchStatus.totalFiles);
      setCompletedFiles(batchStatus.completedFiles);
      setFailedFiles(batchStatus.failedFiles);
      setFiles(batchStatus.files); // Status jeder einzelnen Datei
 
      if (batchStatus.status === 'completed') {
        // ZIP-Download mit allen Ergebnissen
        const result = await downloadBatchResult(batchId);
        triggerDownload(result.blob, 'converted-files.zip');
      }
    };
 
    poll();
  }, [batchId, isPolling]);
 
  return {
    progress: Math.round((completedFiles / totalFiles) * 100),
    totalFiles,
    completedFiles,
    failedFiles,
    files, // Fuer detaillierte Fortschrittsanzeige
    startBatch,
    cancel,
  };
}

// hooks/useFFmpeg.ts
export function useFFmpeg(): UseFFmpegReturn {
  const [status, setStatus] = useState<FFmpegStatus>('unloaded');
  const [progress, setProgress] = useState(0);
  const ffmpegRef = useRef<FFmpeg | null>(null);
 
  const load = useCallback(async () => {
    setStatus('loading');
 
    const { FFmpeg } = await import('@ffmpeg/ffmpeg');
    const { toBlobURL } = await import('@ffmpeg/util');
 
    const ffmpeg = new FFmpeg();
 
    // Progress-Events
    ffmpeg.on('progress', ({ progress: p }) => {
      setProgress(Math.round(p * 100));
    });
 
    // WASM-Core von CDN laden (nur einmal)
    const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.15/dist/esm';
    await ffmpeg.load({
      coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
      wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
    });
 
    ffmpegRef.current = ffmpeg;
    setStatus('ready');
  }, []);
 
  const process = useCallback(async (
    inputFiles: { name: string; data: Uint8Array }[],
    command: string[],
    outputFilename: string
  ): Promise<Uint8Array | null> => {
    const ffmpeg = ffmpegRef.current!;
 
    // Dateien ins WASM-Filesystem schreiben
    for (const file of inputFiles) {
      await ffmpeg.writeFile(file.name, file.data);
    }
 
    // FFmpeg-Befehl ausfuehren
    await ffmpeg.exec(command);
 
    // Ergebnis lesen
    const data = await ffmpeg.readFile(outputFilename);
 
    // Cleanup: Temporaere Dateien loeschen
    for (const file of inputFiles) {
      await ffmpeg.deleteFile(file.name);
    }
 
    return data as Uint8Array;
  }, []);
 
  return { status, progress, load, process, cancel };
}

function VideoToGifTool() {
  const { status, progress, load, process } = useFFmpeg();
 
  const convertToGif = async (videoFile: File) => {
    // FFmpeg WASM laden (lazy loading)
    if (status === 'unloaded') await load();
 
    const videoData = new Uint8Array(await videoFile.arrayBuffer());
 
    // FFmpeg-Befehl: Video zu GIF
    const gifData = await process(
      [{ name: 'input.mp4', data: videoData }],
      [
        '-i', 'input.mp4',
        '-vf', 'fps=10,scale=480:-1:flags=lanczos',
        '-loop', '0',
        'output.gif'
      ],
      'output.gif'
    );
 
    // Download triggern
    const blob = new Blob([gifData!], { type: 'image/gif' });
    downloadBlob(blob, 'converted.gif');
  };
 
  return (
    <div>
      {status === 'loading' && <p>FFmpeg wird geladen...</p>}
      {status === 'processing' && <ProgressBar value={progress} />}
    </div>
  );
}

// lib/api/ai-services.ts
export async function transcribeAudio(
  file: File,
  options?: {
    language?: string;
    task?: 'transcribe' | 'translate';
  }
): Promise<TranscriptionResult> {
  const formData = new FormData();
  formData.append('file', file);
  if (options?.language) formData.append('language', options.language);
  if (options?.task) formData.append('task', options.task);
 
  const response = await fetch('/api/ai/transcribe', {
    method: 'POST',
    body: formData,
  });
 
  return response.json();
}
 
// Rueckgabe
interface TranscriptionResult {
  text: string;
  language: string;
  segments?: Array<{
    start: number;
    end: number;
    text: string;
  }>;
}

# docker/whisper/Dockerfile
FROM python:3.11-slim
 
# System-Dependencies fuer Audio
RUN apt-get update && apt-get install -y ffmpeg
 
# Whisper installieren
RUN pip install openai-whisper torch
 
# Modell beim Build laden (1.5GB)
RUN python -c "import whisper; whisper.load_model('base')"
 
COPY app.py .
 
CMD ["python", "app.py"]

export async function removeBackground(
  file: File,
  options?: {
    alphaMatting?: boolean;
    onlyMask?: boolean;
    bgcolor?: string;
  }
): Promise<Blob> {
  const formData = new FormData();
  formData.append('file', file);
  if (options?.alphaMatting) formData.append('alpha_matting', 'true');
  if (options?.bgcolor) formData.append('bgcolor', options.bgcolor);
 
  const response = await fetch('/api/ai/remove-background', {
    method: 'POST',
    body: formData,
  });
 
  return response.blob();
}

export async function upscaleImage(
  file: File,
  options?: {
    scale?: 2 | 3 | 4;
    model?: 'general' | 'anime';
  }
): Promise<UpscaleResult> {
  const formData = new FormData();
  formData.append('file', file);
  if (options?.scale) formData.append('scale', options.scale.toString());
  if (options?.model) formData.append('model', options.model);
 
  const response = await fetch('/api/ai/upscale', {
    method: 'POST',
    body: formData,
  });
 
  return {
    blob: await response.blob(),
    originalSize: response.headers.get('X-Original-Size'),
    outputSize: response.headers.get('X-Output-Size'),
    processingTime: response.headers.get('X-Processing-Time'),
  };
}

// Vor jeder Anfrage pruefen ob Service verfuegbar
export async function getTranscribeHealth(): Promise<HealthStatus> {
  try {
    const response = await fetch('/api/ai/transcribe');
    return response.json();
  } catch {
    return { status: 'unavailable', error: 'Service nicht erreichbar' };
  }
}
 
// In der Komponente
function AudioToTextTool() {
  const [serviceAvailable, setServiceAvailable] = useState<boolean | null>(null);
 
  useEffect(() => {
    getTranscribeHealth().then((health) => {
      setServiceAvailable(health.status === 'ok');
    });
  }, []);
 
  if (serviceAvailable === false) {
    return (
      <Alert variant="warning">
        Transkriptions-Service derzeit nicht verfuegbar.
        Bitte spaeter erneut versuchen.
      </Alert>
    );
  }
}

// Beispiel: Hintergrund-Entfernung
async function removeBackgroundWithFallback(file: File): Promise<Blob> {
  // Zuerst Server-Service versuchen
  const health = await getRemoveBackgroundHealth();
 
  if (health.status === 'ok') {
    try {
      return await removeBackground(file);
    } catch (error) {
      console.warn('Server-Service fehlgeschlagen, fallback auf Client');
    }
  }
 
  // Fallback: @imgly/background-removal (client-side, langsamer)
  const { removeBackground: clientRemove } = await import('@imgly/background-removal');
  const blob = await clientRemove(file, {
    model: 'small',
    output: { format: 'image/png' },
  });
 
  return blob;
}

# docker-compose.yml
services:
  whisper:
    mem_limit: 2g
    memswap_limit: 2g
    deploy:
      resources:
        limits:
          memory: 2G
        reservations:
          memory: 1G
 
  esrgan:
    mem_limit: 1g
    # Bildgroesse serverseitig limitieren
    environment:
      - MAX_IMAGE_SIZE=4096
      - MAX_FILE_SIZE_MB=20

# docker/esrgan/app.py
MAX_IMAGE_SIZE = int(os.getenv('MAX_IMAGE_SIZE', 4096))
MAX_FILE_SIZE_MB = int(os.getenv('MAX_FILE_SIZE_MB', 20))
 
@app.post('/upscale')
async def upscale(file: UploadFile):
    # Dateigroesse pruefen
    file_size = len(await file.read())
    if file_size > MAX_FILE_SIZE_MB * 1024 * 1024:
        raise HTTPException(400, f'Datei zu gross (max {MAX_FILE_SIZE_MB}MB)')
 
    # Bildgroesse pruefen
    image = Image.open(file.file)
    if max(image.size) > MAX_IMAGE_SIZE:
        raise HTTPException(400, f'Bild zu gross (max {MAX_IMAGE_SIZE}px)')
 
    # Verarbeitung...

// Nur laden wenn Tool verwendet wird
const VideoTool = dynamic(() => import('./VideoTool'), {
  loading: () => <ToolSkeleton />,
  ssr: false, // WASM funktioniert nicht server-side
});
 
// Im useFFmpeg Hook: Lazy load der WASM-Module
const load = useCallback(async () => {
  // Dynamischer Import – nur wenn benoetigt
  const { FFmpeg } = await import('@ffmpeg/ffmpeg');
  const { toBlobURL } = await import('@ffmpeg/util');
 
  // Core von CDN laden
  const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.15/dist/esm';
  // ...
}, []);

// app/manifest.ts
export default function manifest(): MetadataRoute.Manifest {
  return {
    name: 'Tools-Zentrale',
    short_name: 'Tools',
    start_url: '/',
    display: 'standalone',
    background_color: '#ffffff',
    theme_color: '#3b82f6',
    icons: [/* ... */],
  };
}
 
// next.config.ts
const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  runtimeCaching: [
    {
      // WASM-Dateien cachen
      urlPattern: /\.wasm$/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'wasm-cache',
        expiration: {
          maxEntries: 10,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Tage
        },
      },
    },
  ],
});

/* globals.css */
.tool-dropzone {
  min-height: 200px;
}
 
.tool-dropzone-lg {
  min-height: 280px;
}
 
.tool-result-container {
  min-height: 120px;
}
 
.tool-main-area {
  min-height: 320px;
}