src/lib/components/Pages/Scanner.svelte

<script lang="ts">
  import PicletGenerator from '../PicletGenerator/PicletGenerator.svelte';
  import AutoTrainerScanner from '../AutoTrainerScanner/AutoTrainerScanner.svelte';
  import type { GradioClient } from '$lib/types';
  
  interface Props {
    fluxClient: GradioClient | null;
    joyCaptionClient: GradioClient | null;
    zephyrClient: GradioClient | null;
    qwenClient: GradioClient | null;
  }
  
  let { fluxClient, joyCaptionClient, zephyrClient, qwenClient }: Props = $props();
</script>

<div class="scanner-page">
  {#if fluxClient && joyCaptionClient && zephyrClient && qwenClient}
    <!-- Auto Trainer Scanner -->
    <AutoTrainerScanner 
      {joyCaptionClient}
      {zephyrClient}
      {fluxClient}
      {qwenClient}
    />
    
    <!-- Manual Piclet Generator -->
    <PicletGenerator 
      {fluxClient}
      {joyCaptionClient}
      {zephyrClient}
      {qwenClient}
    />
  {:else}
    <div class="loading-state">
      <div class="spinner"></div>
      <p>Initializing scanner...</p>
    </div>
  {/if}
</div>

<style>
  .scanner-page {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
  }
  
  .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>