Spaces:

Fraser
/

piclets

Running

App Files Files Community

Fraser commited on Jul 16

Commit

6710512

1 Parent(s): 3983bc5

app ui

Browse files

Files changed (10) hide show

index.html +18 -3
public/manifest.json +22 -0
src/App.svelte +45 -99
src/app.css +78 -0
src/lib/components/Layout/AppHeader.svelte +97 -0
src/lib/components/Layout/TabBar.svelte +105 -0
src/lib/components/MonsterGenerator/todo.txt +1 -0
src/lib/components/Pages/Encounters.svelte +90 -0
src/lib/components/Pages/Pictuary.svelte +168 -0
src/lib/components/Pages/Scanner.svelte +58 -0

index.html CHANGED Viewed

@@ -2,9 +2,24 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>HF Multi-Space Demo | FLUX + Joy Caption + RWKV</title>
   </head>
   <body>
     <div id="app"></div>

 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/assets/pictuary_logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <!-- PWA Meta Tags -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <meta name="apple-mobile-web-app-title" content="Piclets">
+    <meta name="application-name" content="Piclets">
+    <meta name="theme-color" content="#007bff">
+    <!-- Apple Touch Icon -->
+    <link rel="apple-touch-icon" href="/assets/pictuary_logo.png">
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="/manifest.json">
+    <title>Piclets - Monster Collection Game</title>
   </head>
   <body>
     <div id="app"></div>

public/manifest.json ADDED Viewed

	@@ -0,0 +1,22 @@

+{
+  "name": "Piclets - Monster Collection Game",
+  "short_name": "Piclets",
+  "description": "Transform photos into unique monsters and build your collection",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#f5f5f5",
+  "theme_color": "#007bff",
+  "orientation": "portrait",
+  "icons": [
+    {
+      "src": "/assets/pictuary_logo.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/pictuary_logo.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

src/App.svelte CHANGED Viewed

@@ -1,10 +1,12 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { authStore } from './lib/stores/auth';
-  import SignInButton from './lib/components/Auth/SignInButton.svelte';
-  import AuthBanner from './lib/components/Auth/AuthBanner.svelte';
-  import MonsterGenerator from './lib/components/MonsterGenerator/MonsterGenerator.svelte';
-  import type { HuggingFaceLibs, GradioLibs, GradioClient, FluxGenerationResult } from './lib/types';
   // These will be loaded from window after HF libs are loaded
   let hfAuth: HuggingFaceLibs | null = $state(null);
@@ -15,6 +17,15 @@
   let joyCaptionClient: GradioClient | null = $state(null);
   let rwkvClient: GradioClient | null = $state(null);
   // Auth state from store
   const auth = $derived(authStore);
@@ -65,7 +76,7 @@
   async function initializeClients(hfToken: string | null) {
     if (!gradioClient) return;
-    authStore.setBannerMessage("Connecting to FLUX.1-schnell, Joy Caption, and RWKV…");
     try {
       const opts = hfToken ? { hf_token: hfToken } : {};
@@ -92,116 +103,51 @@
       authStore.setBannerMessage(`❌ Failed to connect: ${err}`);
     }
   }
 </script>
 <div class="app">
-  <div class="card">
-    <h1>👾 Monster Generator</h1>
-    <p>
-      Transform your photos into unique monster creations using AI
-    </p>
-    {#if $auth.showSignIn}
-      <SignInButton {hfAuth} />
-    {/if}
-    <AuthBanner
-      message={$auth.bannerMessage}
-      visible={!!$auth.bannerMessage}
-    />
-    {#if $auth.userInfo}
-      <p class="user-greeting">Hello, {$auth.userInfo.name || $auth.userInfo.preferred_username}!</p>
-    {/if}
-    <!-- Monster Generator Content -->
-    {#if fluxClient && joyCaptionClient && rwkvClient}
-      <MonsterGenerator
         {fluxClient}
         {joyCaptionClient}
         {rwkvClient}
       />
-    {:else}
-      <div class="loading-message">
-        <div class="spinner"></div>
-        <p>Connecting to AI services...</p>
-      </div>
     {/if}
-    <hr />
-    <p class="footer">
-      Source & docs:
-      <a href="https://huggingface.co/docs/hub/spaces-oauth" target="_blank">Spaces OAuth</a>,
-      <a href="https://github.com/huggingface/huggingface.js" target="_blank">huggingface.js</a>,
-      <a href="https://js.gradio.app" target="_blank">@gradio/client</a>
-    </p>
-  </div>
 </div>
 <style>
   .app {
-    min-height: 100vh;
     background: #f5f5f5;
-    padding: 2rem;
-  }
-  .card {
-    max-width: 900px;
-    margin: 0 auto;
-    background: #ffffff;
-    padding: 2rem;
-    border-radius: 10px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  }
-  h1 {
-    margin-top: 0;
-  }
-  hr {
-    margin: 3rem 0 2rem;
-    border: none;
-    border-top: 1px solid #eee;
-  }
-  .footer {
-    color: #666;
-    font-size: 0.9rem;
-  }
-  .footer a {
-    color: #007bff;
-    text-decoration: none;
-  }
-  .footer a:hover {
-    text-decoration: underline;
-  }
-  .user-greeting {
-    text-align: center;
-    color: #666;
-    margin-bottom: 2rem;
-  }
-  .loading-message {
-    text-align: center;
-    padding: 3rem;
-    color: #666;
   }
-  .spinner {
-    width: 60px;
-    height: 60px;
-    border: 3px solid #f3f3f3;
-    border-top: 3px solid #007bff;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin: 0 auto 2rem;
   }
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
   }
 </style>

 <script lang="ts">
   import { onMount } from 'svelte';
   import { authStore } from './lib/stores/auth';
+  import AppHeader from './lib/components/Layout/AppHeader.svelte';
+  import TabBar, { type TabId } from './lib/components/Layout/TabBar.svelte';
+  import Scanner from './lib/components/Pages/Scanner.svelte';
+  import Encounters from './lib/components/Pages/Encounters.svelte';
+  import Pictuary from './lib/components/Pages/Pictuary.svelte';
+  import type { HuggingFaceLibs, GradioLibs, GradioClient } from './lib/types';
   // These will be loaded from window after HF libs are loaded
   let hfAuth: HuggingFaceLibs | null = $state(null);
   let joyCaptionClient: GradioClient | null = $state(null);
   let rwkvClient: GradioClient | null = $state(null);
+  // Navigation state
+  let activeTab: TabId = $state('scanner');
+  // Tab names mapping
+  const tabNames: Record<TabId, string> = {
+    scanner: 'Scanner',
+    encounters: 'Encounters',
+    pictuary: 'Pictuary'
+  };
   // Auth state from store
   const auth = $derived(authStore);
   async function initializeClients(hfToken: string | null) {
     if (!gradioClient) return;
+    authStore.setBannerMessage("Connecting to AI services...");
     try {
       const opts = hfToken ? { hf_token: hfToken } : {};
       authStore.setBannerMessage(`❌ Failed to connect: ${err}`);
     }
   }
+  function handleTabChange(tab: TabId) {
+    activeTab = tab;
+  }
 </script>
 <div class="app">
+  <AppHeader {hfAuth} currentTab={tabNames[activeTab]} />
+  <main class="app-content">
+    {#if activeTab === 'scanner'}
+      <Scanner
         {fluxClient}
         {joyCaptionClient}
         {rwkvClient}
       />
+    {:else if activeTab === 'encounters'}
+      <Encounters />
+    {:else if activeTab === 'pictuary'}
+      <Pictuary />
     {/if}
+  </main>
+  <TabBar {activeTab} onTabChange={handleTabChange} />
 </div>
 <style>
   .app {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    height: 100dvh; /* Dynamic viewport height for mobile */
     background: #f5f5f5;
+    overflow: hidden;
   }
+  .app-content {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    padding-bottom: calc(50px + env(safe-area-inset-bottom, 0));
   }
+  /* Ensure content scrolls properly on iOS */
+  :global(.app-content > *) {
+    height: 100%;
   }
 </style>

src/app.css CHANGED Viewed

@@ -11,6 +11,13 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 * {
@@ -22,10 +29,18 @@ body {
   display: flex;
   min-width: 320px;
   min-height: 100vh;
 }
 #app {
   width: 100%;
 }
 a {
@@ -41,6 +56,9 @@ a:hover {
 button {
   font-family: inherit;
   font-size: inherit;
 }
 h1, h2, h3, h4, h5, h6 {
@@ -63,6 +81,59 @@ h1, h2, h3, h4, h5, h6 {
 .mb-3 { margin-bottom: 1.5rem; }
 .mb-4 { margin-bottom: 2rem; }
 /* Hide scrollbar for Chrome, Safari and Opera */
 ::-webkit-scrollbar {
   width: 8px;
@@ -80,3 +151,10 @@ h1, h2, h3, h4, h5, h6 {
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }

   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  /* Mobile-specific variables */
+  --safe-area-inset-top: env(safe-area-inset-top, 0);
+  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
+  --safe-area-inset-left: env(safe-area-inset-left, 0);
+  --safe-area-inset-right: env(safe-area-inset-right, 0);
+  --tab-bar-height: 60px;
 }
 * {
   display: flex;
   min-width: 320px;
   min-height: 100vh;
+  overscroll-behavior: none;
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-y;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 #app {
   width: 100%;
+  height: 100vh;
+  height: 100dvh;
+  position: relative;
 }
 a {
 button {
   font-family: inherit;
   font-size: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+  touch-action: manipulation;
 }
 h1, h2, h3, h4, h5, h6 {
 .mb-3 { margin-bottom: 1.5rem; }
 .mb-4 { margin-bottom: 2rem; }
+.p-1 { padding: 0.5rem; }
+.p-2 { padding: 1rem; }
+.p-3 { padding: 1.5rem; }
+.p-4 { padding: 2rem; }
+/* Flex utilities */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.flex-1 { flex: 1; }
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.gap-1 { gap: 0.5rem; }
+.gap-2 { gap: 1rem; }
+.gap-3 { gap: 1.5rem; }
+/* Mobile-first responsive styles */
+@media (max-width: 768px) {
+  .hide-mobile {
+    display: none !important;
+  }
+}
+@media (min-width: 769px) {
+  .hide-desktop {
+    display: none !important;
+  }
+}
+/* Prevent text selection on UI elements */
+.no-select {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+/* iOS-style tap highlight */
+.tappable {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
+/* Smooth transitions for interactive elements */
+.interactive {
+  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
+}
+.interactive:active {
+  transform: scale(0.95);
+  opacity: 0.8;
+}
 /* Hide scrollbar for Chrome, Safari and Opera */
 ::-webkit-scrollbar {
   width: 8px;
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
+/* Mobile scrollbar styles */
+@media (max-width: 768px) {
+  ::-webkit-scrollbar {
+    width: 4px;
+  }
+}

src/lib/components/Layout/AppHeader.svelte ADDED Viewed

	@@ -0,0 +1,97 @@

+<script lang="ts">
+  import { authStore } from '$lib/stores/auth';
+  import type { HuggingFaceLibs } from '$lib/types';
+  interface Props {
+    hfAuth: HuggingFaceLibs | null;
+    currentTab?: string;
+  }
+  let { hfAuth, currentTab = 'Piclets' }: Props = $props();
+  const auth = $derived(authStore);
+  async function handleSignIn() {
+    if (!hfAuth) return;
+    const url = await hfAuth.oauthLoginUrl({ scopes: ["inference-api"] });
+    window.location.href = url;
+  }
+</script>
+<header class="app-header">
+  <h1 class="app-title">{currentTab}</h1>
+  {#if $auth.showSignIn && !$auth.userInfo}
+    <button class="sign-in-btn" onclick={handleSignIn}>
+      Sign In
+    </button>
+  {:else if $auth.userInfo}
+    <div class="user-info">
+      <span class="username">{$auth.userInfo.preferred_username || 'User'}</span>
+    </div>
+  {/if}
+</header>
+{#if $auth.bannerMessage}
+  <div class="auth-banner">
+    {$auth.bannerMessage}
+  </div>
+{/if}
+<style>
+  .app-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background: white;
+    border-bottom: 1px solid #eee;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+  .app-title {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #333;
+  }
+  .sign-in-btn {
+    padding: 0.5rem 1rem;
+    background: #007bff;
+    color: white;
+    border: none;
+    border-radius: 20px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+  .sign-in-btn:active {
+    background: #0056b3;
+  }
+  .user-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .username {
+    font-size: 0.875rem;
+    color: #666;
+    font-weight: 500;
+  }
+  .auth-banner {
+    padding: 0.75rem 1rem;
+    background: #fff3cd;
+    color: #856404;
+    font-size: 0.875rem;
+    text-align: center;
+    border-bottom: 1px solid #ffeeba;
+  }
+</style>

src/lib/components/Layout/TabBar.svelte ADDED Viewed

	@@ -0,0 +1,105 @@

+<script lang="ts">
+  export type TabId = 'scanner' | 'encounters' | 'pictuary';
+  interface Tab {
+    id: TabId;
+    label: string;
+    icon: string;
+  }
+  interface Props {
+    activeTab: TabId;
+    onTabChange: (tab: TabId) => void;
+  }
+  let { activeTab, onTabChange }: Props = $props();
+  const tabs: Tab[] = [
+    { id: 'scanner', label: 'Scanner', icon: '/assets/snap_logo.png' },
+    { id: 'encounters', label: 'Encounters', icon: '/assets/encounters_logo.png' },
+    { id: 'pictuary', label: 'Pictuary', icon: '/assets/pictuary_logo.png' }
+  ];
+  function handleTabClick(tabId: TabId) {
+    onTabChange(tabId);
+  }
+</script>
+<nav class="tab-bar">
+  <div class="tab-bar-inner">
+    {#each tabs as tab}
+      <button
+        class="tab-item"
+        class:active={activeTab === tab.id}
+        onclick={() => handleTabClick(tab.id)}
+      >
+        <div class="icon-wrapper">
+          <img
+            src={tab.icon}
+            alt={tab.label}
+            class="tab-icon"
+          />
+        </div>
+      </button>
+    {/each}
+  </div>
+</nav>
+<style>
+  .tab-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: white;
+    border-top: 1px solid #eee;
+    z-index: 1000;
+    padding-bottom: env(safe-area-inset-bottom, 0);
+  }
+  .tab-bar-inner {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 50px;
+  }
+  .tab-item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 6px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .icon-wrapper {
+    position: relative;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+  }
+  .tab-item.active .icon-wrapper {
+    background: rgb(190, 210, 238);
+  }
+  .tab-icon {
+    width: 22px;
+    height: 22px;
+    object-fit: contain;
+    filter: grayscale(100%) brightness(0.5);
+  }
+  .tab-item.active .tab-icon {
+    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(192deg) brightness(104%) contrast(97%);
+  }
+</style>

src/lib/components/MonsterGenerator/todo.txt CHANGED Viewed

@@ -1,3 +1,4 @@
 Long term I want to turn this into a monster battle game. As part of this I need some kind of internal DB for the game.
 When I worked on a Flutter-based version of this I used Isar DB, is there an equivalent that would work well here?


1	+
2	Long term I want to turn this into a monster battle game. As part of this I need some kind of internal DB for the game.
3	When I worked on a Flutter-based version of this I used Isar DB, is there an equivalent that would work well here?
4

src/lib/components/Pages/Encounters.svelte ADDED Viewed

	@@ -0,0 +1,90 @@

+<script lang="ts">
+  // Placeholder for future implementation
+</script>
+<div class="encounters-page">
+  <div class="coming-soon">
+    <img
+      src="/assets/encounters_logo.png"
+      alt="Encounters"
+      class="page-icon"
+    />
+    <h2>Encounters</h2>
+    <p>Battle trainers and catch wild Piclets!</p>
+    <div class="feature-preview">
+      <div class="preview-card">
+        <h3>⚔️ Battle System</h3>
+        <p>Turn-based combat with your Piclets</p>
+      </div>
+      <div class="preview-card">
+        <h3>🎯 Catch Mechanics</h3>
+        <p>Find and capture new monsters</p>
+      </div>
+      <div class="preview-card">
+        <h3>🏆 Trainer Battles</h3>
+        <p>Challenge other trainers</p>
+      </div>
+    </div>
+    <p class="coming-soon-text">Coming Soon</p>
+  </div>
+</div>
+<style>
+  .encounters-page {
+    height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 2rem 1rem;
+  }
+  .coming-soon {
+    text-align: center;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+  .page-icon {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 1rem;
+    opacity: 0.8;
+  }
+  h2 {
+    margin: 0 0 0.5rem;
+    color: #333;
+  }
+  .feature-preview {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin: 2rem 0;
+  }
+  .preview-card {
+    background: #f8f9fa;
+    padding: 1.5rem;
+    border-radius: 12px;
+    text-align: left;
+  }
+  .preview-card h3 {
+    margin: 0 0 0.5rem;
+    font-size: 1.1rem;
+    color: #333;
+  }
+  .preview-card p {
+    margin: 0;
+    color: #666;
+    font-size: 0.9rem;
+  }
+  .coming-soon-text {
+    color: #007bff;
+    font-weight: 600;
+    font-size: 1.2rem;
+    margin-top: 2rem;
+  }
+</style>

src/lib/components/Pages/Pictuary.svelte ADDED Viewed

	@@ -0,0 +1,168 @@

+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getAllMonsters } from '$lib/db/monsters';
+  import type { Monster } from '$lib/db/schema';
+  let monsters: Monster[] = $state([]);
+  let isLoading = $state(true);
+  onMount(async () => {
+    try {
+      monsters = await getAllMonsters();
+    } catch (err) {
+      console.error('Failed to load monsters:', err);
+    } finally {
+      isLoading = false;
+    }
+  });
+</script>
+<div class="pictuary-page">
+  <header class="page-header">
+    <h2>Your Pictuary</h2>
+    <p class="monster-count">{monsters.length} Piclets collected</p>
+  </header>
+  {#if isLoading}
+    <div class="loading-state">
+      <div class="spinner"></div>
+      <p>Loading collection...</p>
+    </div>
+  {:else if monsters.length === 0}
+    <div class="empty-state">
+      <img
+        src="/assets/pictuary_logo.png"
+        alt="Pictuary"
+        class="empty-icon"
+      />
+      <h3>No Piclets Yet</h3>
+      <p>Start scanning photos to build your collection!</p>
+    </div>
+  {:else}
+    <div class="monster-grid">
+      {#each monsters as monster}
+        <div class="monster-card">
+          <img
+            src={monster.imageUrl}
+            alt={monster.name}
+            class="monster-image"
+          />
+          <h4 class="monster-name">{monster.name}</h4>
+          <p class="monster-date">
+            {new Date(monster.createdAt).toLocaleDateString()}
+          </p>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+<style>
+  .pictuary-page {
+    height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .page-header {
+    padding: 1.5rem 1rem;
+    background: white;
+    border-bottom: 1px solid #eee;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+  .page-header h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    color: #333;
+  }
+  .monster-count {
+    margin: 0.25rem 0 0;
+    color: #666;
+    font-size: 0.9rem;
+  }
+  .loading-state,
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: calc(100% - 100px);
+    padding: 2rem;
+    text-align: center;
+  }
+  .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;
+  }
+  .empty-icon {
+    width: 80px;
+    opacity: 0.5;
+    margin-bottom: 1rem;
+  }
+  .empty-state h3 {
+    margin: 0 0 0.5rem;
+    color: #333;
+  }
+  .empty-state p {
+    margin: 0;
+    color: #666;
+  }
+  .monster-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 1rem;
+    padding: 1rem;
+  }
+  .monster-card {
+    background: white;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s;
+  }
+  .monster-card:active {
+    transform: scale(0.95);
+  }
+  .monster-image {
+    width: 100%;
+    aspect-ratio: 1;
+    object-fit: cover;
+  }
+  .monster-name {
+    margin: 0;
+    padding: 0.75rem;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: #333;
+  }
+  .monster-date {
+    margin: 0;
+    padding: 0 0.75rem 0.75rem;
+    font-size: 0.75rem;
+    color: #999;
+  }
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+</style>

src/lib/components/Pages/Scanner.svelte ADDED Viewed

	@@ -0,0 +1,58 @@

+<script lang="ts">
+  import MonsterGenerator from '../MonsterGenerator/MonsterGenerator.svelte';
+  import type { GradioClient } from '$lib/types';
+  interface Props {
+    fluxClient: GradioClient | null;
+    joyCaptionClient: GradioClient | null;
+    rwkvClient: GradioClient | null;
+  }
+  let { fluxClient, joyCaptionClient, rwkvClient }: Props = $props();
+</script>
+<div class="scanner-page">
+  {#if fluxClient && joyCaptionClient && rwkvClient}
+    <MonsterGenerator
+      {fluxClient}
+      {joyCaptionClient}
+      {rwkvClient}
+    />
+  {: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>