closer

src/App.svelte

@@ -3,9 +3,7 @@
   import { authStore } from './lib/stores/auth';
   import SignInButton from './lib/components/Auth/SignInButton.svelte';
   import AuthBanner from './lib/components/Auth/AuthBanner.svelte';
-  import FluxGenerator from './lib/components/ImageGeneration/FluxGenerator.svelte';
-  import JoyCaption from './lib/components/ImageCaption/JoyCaption.svelte';
-  import RWKVGenerator from './lib/components/TextGeneration/RWKVGenerator.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
@@ -17,8 +15,6 @@
   let joyCaptionClient: GradioClient | null = $state(null);
   let rwkvClient: GradioClient | null = $state(null);
   
-  // Current generated image for passing to caption component
-  let currentImageBlob: Blob | null = $state(null);
   
   // Auth state from store
   const auth = $derived(authStore);
@@ -96,19 +92,13 @@
       authStore.setBannerMessage(`❌ Failed to connect: ${err}`);
     }
   }
-  
-  function handleImageGenerated(result: FluxGenerationResult, imageBlob: Blob) {
-    currentImageBlob = imageBlob;
-  }
 </script>
 
 <div class="app">
   <div class="card">
-    <h1>FLUX-1 Schnell + Joy Caption + RWKV Space</h1>
+    <h1>👾 Monster Generator</h1>
     <p>
-      This Svelte-powered Space demonstrates how to call remote Gradio Spaces while
-      letting <strong>each visitor's own Hugging Face subscription</strong> cover
-      the compute costs. Generate images with FLUX-1, caption them with Joy Caption, and generate text with RWKV.
+      Transform your photos into unique monster creations using AI
     </p>
     
     {#if $auth.showSignIn}
@@ -121,25 +111,21 @@
     />
     
     {#if $auth.userInfo}
-      <p>Hello, {$auth.userInfo.name || $auth.userInfo.preferred_username}!</p>
-    {/if}
-    
-    {#if fluxClient}
-      <FluxGenerator 
-        client={fluxClient} 
-        onImageGenerated={handleImageGenerated}
-      />
+      <p class="user-greeting">Hello, {$auth.userInfo.name || $auth.userInfo.preferred_username}!</p>
     {/if}
     
-    {#if joyCaptionClient}
-      <JoyCaption 
-        client={joyCaptionClient}
-        currentImage={currentImageBlob}
+    <!-- Monster Generator Content -->
+    {#if fluxClient && joyCaptionClient && rwkvClient}
+      <MonsterGenerator 
+        {fluxClient}
+        {joyCaptionClient}
+        {rwkvClient}
       />
-    {/if}
-    
-    {#if rwkvClient}
-      <RWKVGenerator client={rwkvClient} />
+    {:else}
+      <div class="loading-message">
+        <div class="spinner"></div>
+        <p>Connecting to AI services...</p>
+      </div>
     {/if}
     
     <hr />
@@ -191,4 +177,31 @@
   .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>

src/lib/components/MonsterGenerator/MonsterGenerator.svelte

@@ -0,0 +1,313 @@
+<script lang="ts">
+  import type { MonsterGeneratorProps, MonsterWorkflowState, CaptionType, CaptionLength } from '$lib/types';
+  import UploadStep from './UploadStep.svelte';
+  import WorkflowProgress from './WorkflowProgress.svelte';
+  import MonsterResult from './MonsterResult.svelte';
+  
+  interface Props extends MonsterGeneratorProps {}
+  
+  let { joyCaptionClient, rwkvClient, fluxClient }: Props = $props();
+  
+  let state: MonsterWorkflowState = $state({
+    currentStep: 'upload',
+    userImage: null,
+    imageCaption: null,
+    monsterConcept: null,
+    imagePrompt: null,
+    monsterImage: null,
+    error: null,
+    isProcessing: false
+  });
+  
+  // Prompt templates
+  const MONSTER_CONCEPT_PROMPT = (caption: string) => `Based on this description of a person/photo: "${caption}"
+
+Create a unique monster concept inspired by the key visual elements. Include:
+- Physical appearance and distinguishing features
+- Special abilities or powers  
+- Personality traits
+- Habitat or origin
+
+Be creative and detailed. The monster should be fantastical but somehow connected to the original image's essence.`;
+
+  const IMAGE_GENERATION_PROMPT = (concept: string) => `Convert this monster concept into a detailed image generation prompt:
+"${concept}"
+
+Create a vivid, artistic prompt focusing on visual details, art style, lighting, and atmosphere. Format it as a single paragraph optimized for image generation.`;
+  
+  async function handleImageSelected(file: File) {
+    if (!joyCaptionClient || !rwkvClient || !fluxClient) {
+      state.error = "Services not connected. Please wait...";
+      return;
+    }
+    
+    state.userImage = file;
+    state.error = null;
+    startWorkflow();
+  }
+  
+  async function startWorkflow() {
+    state.isProcessing = true;
+    
+    try {
+      // Step 1: Caption the image
+      await captionImage();
+      await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for state update
+      
+      // Step 2: Generate monster concept
+      await generateMonsterConcept();
+      await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for state update
+      
+      // Step 3: Generate image prompt
+      await generateImagePrompt();
+      await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for state update
+      
+      // Step 4: Generate monster image
+      await generateMonsterImage();
+      
+      state.currentStep = 'complete';
+    } catch (err) {
+      console.error('Workflow error:', err);
+      state.error = err instanceof Error ? err.message : 'An unknown error occurred';
+    } finally {
+      state.isProcessing = false;
+    }
+  }
+  
+  async function captionImage() {
+    state.currentStep = 'captioning';
+    
+    if (!joyCaptionClient || !state.userImage) {
+      throw new Error('Caption service not available or no image provided');
+    }
+    
+    const output = await joyCaptionClient.predict("/stream_chat", [
+      state.userImage,
+      "Descriptive" as CaptionType,
+      "very long" as CaptionLength,
+      [], // extra_options
+      "", // name_input
+      ""  // custom_prompt
+    ]);
+    
+    const [prompt, caption] = output.data;
+    state.imageCaption = caption;
+    console.log('Caption generated:', caption);
+  }
+  
+  async function generateMonsterConcept() {
+    state.currentStep = 'conceptualizing';
+    
+    if (!rwkvClient || !state.imageCaption) {
+      throw new Error('Text generation service not available or no caption');
+    }
+    
+    const conceptPrompt = MONSTER_CONCEPT_PROMPT(state.imageCaption);
+    
+    console.log('Generating monster concept with prompt:', conceptPrompt);
+    
+    const output = await rwkvClient.predict(0, [
+      conceptPrompt,
+      300,   // maxTokens
+      1.2,   // temperature (more creative)
+      0.8,   // topP
+      0.1,   // presencePenalty
+      0.1    // countPenalty
+    ]);
+    
+    console.log('RWKV output:', output);
+    state.monsterConcept = output.data[0];
+    console.log('Monster concept generated:', state.monsterConcept);
+    
+    if (!state.monsterConcept || state.monsterConcept.trim() === '') {
+      throw new Error('Failed to generate monster concept - received empty response');
+    }
+  }
+  
+  async function generateImagePrompt() {
+    state.currentStep = 'promptCrafting';
+    
+    if (!rwkvClient || !state.monsterConcept) {
+      throw new Error('Text generation service not available or no concept');
+    }
+    
+    const promptGenerationPrompt = IMAGE_GENERATION_PROMPT(state.monsterConcept);
+    
+    console.log('Generating image prompt from concept');
+    
+    const output = await rwkvClient.predict(0, [
+      promptGenerationPrompt,
+      150,   // maxTokens
+      0.9,   // temperature
+      0.7,   // topP
+      0.1,   // presencePenalty
+      0.1    // countPenalty
+    ]);
+    
+    console.log('Image prompt output:', output);
+    state.imagePrompt = output.data[0];
+    console.log('Image prompt generated:', state.imagePrompt);
+    
+    if (!state.imagePrompt || state.imagePrompt.trim() === '') {
+      throw new Error('Failed to generate image prompt - received empty response');
+    }
+  }
+  
+  async function generateMonsterImage() {
+    state.currentStep = 'generating';
+    
+    if (!fluxClient || !state.imagePrompt) {
+      throw new Error('Image generation service not available or no prompt');
+    }
+    
+    const output = await fluxClient.predict("/infer", [
+      state.imagePrompt,
+      0,      // seed
+      true,   // randomizeSeed
+      1024,   // width
+      1024,   // height
+      4       // steps
+    ]);
+    
+    const [image, usedSeed] = output.data;
+    let url: string | undefined;
+    
+    if (typeof image === "string") url = image;
+    else if (image && image.url) url = image.url;
+    else if (image && image.path) url = image.path;
+    
+    if (url) {
+      state.monsterImage = {
+        imageUrl: url,
+        seed: usedSeed,
+        prompt: state.imagePrompt
+      };
+    } else {
+      throw new Error('Failed to generate monster image');
+    }
+  }
+  
+  function reset() {
+    state = {
+      currentStep: 'upload',
+      userImage: null,
+      imageCaption: null,
+      monsterConcept: null,
+      imagePrompt: null,
+      monsterImage: null,
+      error: null,
+      isProcessing: false
+    };
+  }
+</script>
+
+<div class="monster-generator">
+  
+  {#if state.currentStep !== 'upload'}
+    <WorkflowProgress currentStep={state.currentStep} error={state.error} />
+  {/if}
+  
+  {#if state.currentStep === 'upload'}
+    <UploadStep 
+      onImageSelected={handleImageSelected}
+      isProcessing={state.isProcessing}
+    />
+  {:else if state.currentStep === 'complete'}
+    <MonsterResult state={state} onReset={reset} />
+  {:else}
+    <div class="processing-container">
+      <div class="spinner"></div>
+      <p class="processing-text">
+        {#if state.currentStep === 'captioning'}
+          Analyzing your image...
+        {:else if state.currentStep === 'conceptualizing'}
+          Creating monster concept...
+        {:else if state.currentStep === 'promptCrafting'}
+          Crafting generation prompt...
+        {:else if state.currentStep === 'generating'}
+          Generating your monster...
+        {/if}
+      </p>
+      
+      {#if state.imageCaption && state.currentStep !== 'captioning'}
+        <div class="intermediate-result">
+          <h4>Image Description:</h4>
+          <p>{state.imageCaption}</p>
+        </div>
+      {/if}
+      
+      {#if state.monsterConcept && state.currentStep !== 'captioning' && state.currentStep !== 'conceptualizing'}
+        <div class="intermediate-result">
+          <h4>Monster Concept:</h4>
+          <p>{state.monsterConcept}</p>
+        </div>
+      {/if}
+      
+      {#if state.imagePrompt && state.currentStep === 'generating'}
+        <div class="intermediate-result">
+          <h4>Generation Prompt:</h4>
+          <p>{state.imagePrompt}</p>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .monster-generator {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+  
+  
+  .processing-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 3rem 1rem;
+  }
+  
+  .spinner {
+    width: 60px;
+    height: 60px;
+    border: 3px solid #f3f3f3;
+    border-top: 3px solid #007bff;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 2rem;
+  }
+  
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  
+  .processing-text {
+    font-size: 1.2rem;
+    color: #333;
+    margin-bottom: 2rem;
+  }
+  
+  .intermediate-result {
+    width: 100%;
+    max-width: 700px;
+    background: #f8f9fa;
+    padding: 1.5rem;
+    border-radius: 8px;
+    margin-bottom: 1.5rem;
+    text-align: left;
+  }
+  
+  .intermediate-result h4 {
+    margin: 0 0 0.5rem 0;
+    color: #495057;
+  }
+  
+  .intermediate-result p {
+    margin: 0;
+    line-height: 1.6;
+    color: #333;
+  }
+</style>

src/lib/components/MonsterGenerator/MonsterResult.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+  import type { MonsterWorkflowState } from '$lib/types';
+  
+  interface Props {
+    state: MonsterWorkflowState;
+    onReset: () => void;
+  }
+  
+  let { state, onReset }: Props = $props();
+  
+  function downloadImage() {
+    if (!state.monsterImage?.imageUrl) return;
+    
+    const link = document.createElement('a');
+    link.href = state.monsterImage.imageUrl;
+    link.download = `monster-${Date.now()}.png`;
+    link.click();
+  }
+  
+  function copyPrompt() {
+    if (!state.imagePrompt) return;
+    navigator.clipboard.writeText(state.imagePrompt);
+    alert('Prompt copied to clipboard!');
+  }
+</script>
+
+<div class="result-container">
+  <h3>Your Monster Has Been Created!</h3>
+  
+  {#if state.monsterImage}
+    <div class="monster-image-container">
+      <img 
+        src={state.monsterImage.imageUrl} 
+        alt="Generated Monster" 
+        class="monster-image"
+      />
+    </div>
+  {/if}
+  
+  <div class="results-grid">
+    <div class="result-section">
+      <h4>Original Description</h4>
+      <div class="result-content">
+        <p>{state.imageCaption || 'No caption available'}</p>
+      </div>
+    </div>
+    
+    <div class="result-section">
+      <h4>Monster Concept</h4>
+      <div class="result-content">
+        <p>{state.monsterConcept || 'No concept available'}</p>
+      </div>
+    </div>
+    
+    <div class="result-section">
+      <h4>Generation Prompt</h4>
+      <div class="result-content">
+        <p>{state.imagePrompt || 'No prompt available'}</p>
+        {#if state.imagePrompt}
+          <button class="copy-button" onclick={copyPrompt}>
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2zm2 0v8h8V2H6zM2 6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2h-2v2H2V8h2V6H2z"/>
+            </svg>
+            Copy
+          </button>
+        {/if}
+      </div>
+    </div>
+  </div>
+  
+  <div class="action-buttons">
+    <button class="action-button download" onclick={downloadImage}>
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+        <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/>
+      </svg>
+      Download Monster
+    </button>
+    <button class="action-button reset" onclick={onReset}>
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+        <path d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.058 7.293a1 1 0 01-1.414 1.414l-2.35-2.35A1 1 0 011 5.648V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.943 13H13a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"/>
+      </svg>
+      Create Another Monster
+    </button>
+  </div>
+</div>
+
+<style>
+  .result-container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+  
+  h3 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 2rem;
+  }
+  
+  .monster-image-container {
+    text-align: center;
+    margin-bottom: 3rem;
+  }
+  
+  .monster-image {
+    max-width: 100%;
+    max-height: 600px;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  }
+  
+  .results-grid {
+    display: grid;
+    gap: 1.5rem;
+    margin-bottom: 3rem;
+  }
+  
+  .result-section {
+    background: #f8f9fa;
+    padding: 1.5rem;
+    border-radius: 8px;
+    border: 1px solid #e9ecef;
+  }
+  
+  .result-section h4 {
+    margin: 0 0 1rem 0;
+    color: #495057;
+    font-size: 1.1rem;
+  }
+  
+  .result-content {
+    position: relative;
+  }
+  
+  .result-content p {
+    margin: 0;
+    line-height: 1.6;
+    color: #333;
+  }
+  
+  .copy-button {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    background: #007bff;
+    color: white;
+    border: none;
+    padding: 0.4rem 0.8rem;
+    border-radius: 4px;
+    font-size: 0.85rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    transition: background 0.2s;
+  }
+  
+  .copy-button:hover {
+    background: #0056b3;
+  }
+  
+  .action-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+  
+  .action-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.8rem 1.5rem;
+    border: none;
+    border-radius: 6px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  
+  .action-button.download {
+    background: #28a745;
+    color: white;
+  }
+  
+  .action-button.download:hover {
+    background: #218838;
+  }
+  
+  .action-button.reset {
+    background: #6c757d;
+    color: white;
+  }
+  
+  .action-button.reset:hover {
+    background: #5a6268;
+  }
+  
+  @media (max-width: 768px) {
+    .result-container {
+      padding: 1rem;
+    }
+    
+    .action-buttons {
+      flex-direction: column;
+    }
+    
+    .action-button {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+</style>

src/lib/components/MonsterGenerator/UploadStep.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+  interface Props {
+    onImageSelected: (image: File) => void;
+    isProcessing?: boolean;
+  }
+  
+  let { onImageSelected, isProcessing = false }: Props = $props();
+  
+  let fileInput: HTMLInputElement;
+  let dragActive = $state(false);
+  let preview: string | null = $state(null);
+  
+  function handleFileSelect(e: Event) {
+    const target = e.target as HTMLInputElement;
+    if (target.files && target.files[0]) {
+      processFile(target.files[0]);
+    }
+  }
+  
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    dragActive = false;
+    
+    if (e.dataTransfer?.files && e.dataTransfer.files[0]) {
+      processFile(e.dataTransfer.files[0]);
+    }
+  }
+  
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    dragActive = true;
+  }
+  
+  function handleDragLeave(e: DragEvent) {
+    e.preventDefault();
+    dragActive = false;
+  }
+  
+  function processFile(file: File) {
+    if (!file.type.startsWith('image/')) {
+      alert('Please upload an image file');
+      return;
+    }
+    
+    // Create preview
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      preview = e.target?.result as string;
+    };
+    reader.readAsDataURL(file);
+    
+    onImageSelected(file);
+  }
+  
+  function triggerFileSelect() {
+    fileInput.click();
+  }
+</script>
+
+<div class="upload-container">
+  <h3>Upload Your Photo</h3>
+  <p class="subtitle">Upload a photo that will inspire your monster creation</p>
+  
+  <div 
+    class="upload-area"
+    class:drag-active={dragActive}
+    class:has-preview={preview}
+    ondrop={handleDrop}
+    ondragover={handleDragOver}
+    ondragleave={handleDragLeave}
+    onclick={triggerFileSelect}
+    onkeypress={(e) => e.key === 'Enter' && triggerFileSelect()}
+    role="button"
+    tabindex="0"
+  >
+    {#if preview}
+      <img src={preview} alt="Preview" class="preview-image" />
+      <div class="overlay">
+        <p>Click to change image</p>
+      </div>
+    {:else}
+      <svg class="upload-icon" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+        <polyline points="17 8 12 3 7 8"></polyline>
+        <line x1="12" y1="3" x2="12" y2="15"></line>
+      </svg>
+      <p class="upload-text">Drop an image here or click to upload</p>
+      <p class="upload-hint">Supports JPG, PNG, GIF</p>
+    {/if}
+  </div>
+  
+  <input
+    type="file"
+    accept="image/*"
+    onchange={handleFileSelect}
+    bind:this={fileInput}
+    class="hidden-input"
+    disabled={isProcessing}
+  />
+</div>
+
+<style>
+  .upload-container {
+    max-width: 600px;
+    margin: 0 auto;
+    text-align: center;
+  }
+  
+  h3 {
+    margin-bottom: 0.5rem;
+    color: #333;
+  }
+  
+  .subtitle {
+    color: #666;
+    margin-bottom: 2rem;
+  }
+  
+  .upload-area {
+    border: 2px dashed #ccc;
+    border-radius: 12px;
+    padding: 3rem;
+    background: #fafafa;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .upload-area:hover {
+    border-color: #007bff;
+    background: #f0f7ff;
+  }
+  
+  .upload-area.drag-active {
+    border-color: #007bff;
+    background: #e3f2ff;
+    transform: scale(1.02);
+  }
+  
+  .upload-area.has-preview {
+    padding: 0;
+    background: #fff;
+  }
+  
+  .upload-icon {
+    color: #007bff;
+    margin-bottom: 1rem;
+  }
+  
+  .upload-text {
+    font-size: 1.1rem;
+    color: #333;
+    margin-bottom: 0.5rem;
+  }
+  
+  .upload-hint {
+    font-size: 0.9rem;
+    color: #666;
+  }
+  
+  .hidden-input {
+    display: none;
+  }
+  
+  .preview-image {
+    width: 100%;
+    height: 400px;
+    object-fit: contain;
+    display: block;
+  }
+  
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+  
+  .upload-area:hover .overlay {
+    opacity: 1;
+  }
+  
+  .overlay p {
+    color: white;
+    font-size: 1.1rem;
+  }
+</style>

src/lib/components/MonsterGenerator/WorkflowProgress.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+  import type { MonsterWorkflowStep } from '$lib/types';
+  
+  interface Props {
+    currentStep: MonsterWorkflowStep;
+    error?: string | null;
+  }
+  
+  let { currentStep, error = null }: Props = $props();
+  
+  interface StepInfo {
+    id: MonsterWorkflowStep;
+    label: string;
+    description: string;
+  }
+  
+  const steps: StepInfo[] = [
+    {
+      id: 'upload',
+      label: 'Upload Photo',
+      description: 'Select your image'
+    },
+    {
+      id: 'captioning',
+      label: 'Analyzing',
+      description: 'Creating detailed description'
+    },
+    {
+      id: 'conceptualizing',
+      label: 'Conceptualizing',
+      description: 'Designing your monster'
+    },
+    {
+      id: 'promptCrafting',
+      label: 'Crafting Prompt',
+      description: 'Preparing image generation'
+    },
+    {
+      id: 'generating',
+      label: 'Generating',
+      description: 'Creating monster image'
+    },
+    {
+      id: 'complete',
+      label: 'Complete',
+      description: 'Your monster is ready!'
+    }
+  ];
+  
+  function getStepIndex(step: MonsterWorkflowStep): number {
+    return steps.findIndex(s => s.id === step);
+  }
+  
+  function getStepStatus(step: StepInfo): 'completed' | 'current' | 'pending' | 'error' {
+    const currentIndex = getStepIndex(currentStep);
+    const stepIndex = getStepIndex(step.id);
+    
+    if (error && step.id === currentStep) return 'error';
+    if (stepIndex < currentIndex) return 'completed';
+    if (stepIndex === currentIndex) return 'current';
+    return 'pending';
+  }
+</script>
+
+<div class="workflow-progress">
+  <div class="steps-container">
+    {#each steps as step, i}
+      {@const status = getStepStatus(step)}
+      <div class="step" class:completed={status === 'completed'} class:current={status === 'current'} class:error={status === 'error'}>
+        <div class="step-indicator">
+          {#if status === 'completed'}
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
+            </svg>
+          {:else if status === 'error'}
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"/>
+            </svg>
+          {:else}
+            <span class="step-number">{i + 1}</span>
+          {/if}
+        </div>
+        <div class="step-content">
+          <div class="step-label">{step.label}</div>
+          <div class="step-description">{step.description}</div>
+        </div>
+        {#if i < steps.length - 1}
+          <div class="step-connector" class:active={status === 'completed'}></div>
+        {/if}
+      </div>
+    {/each}
+  </div>
+  
+  {#if error}
+    <div class="error-message">
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"/>
+      </svg>
+      <span>{error}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .workflow-progress {
+    max-width: 800px;
+    margin: 2rem auto;
+  }
+  
+  .steps-container {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    padding: 0 20px;
+  }
+  
+  .step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    flex: 1;
+  }
+  
+  .step-indicator {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: #e9ecef;
+    color: #6c757d;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    transition: all 0.3s ease;
+    z-index: 2;
+  }
+  
+  .step.completed .step-indicator {
+    background: #28a745;
+    color: white;
+  }
+  
+  .step.current .step-indicator {
+    background: #007bff;
+    color: white;
+    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2);
+    animation: pulse 2s infinite;
+  }
+  
+  .step.error .step-indicator {
+    background: #dc3545;
+    color: white;
+  }
+  
+  .step-number {
+    font-size: 0.9rem;
+  }
+  
+  .step-content {
+    text-align: center;
+  }
+  
+  .step-label {
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 0.25rem;
+    font-size: 0.9rem;
+  }
+  
+  .step-description {
+    font-size: 0.8rem;
+    color: #666;
+  }
+  
+  .step-connector {
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    width: 100%;
+    height: 2px;
+    background: #e9ecef;
+    z-index: 1;
+  }
+  
+  .step-connector.active {
+    background: #28a745;
+  }
+  
+  .error-message {
+    margin-top: 2rem;
+    padding: 1rem;
+    background: #f8d7da;
+    color: #721c24;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  
+  @keyframes pulse {
+    0% {
+      box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);
+    }
+    70% {
+      box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
+    }
+    100% {
+      box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .steps-container {
+      flex-direction: column;
+      padding: 0;
+    }
+    
+    .step {
+      flex-direction: row;
+      margin-bottom: 1rem;
+    }
+    
+    .step-indicator {
+      margin-right: 1rem;
+      margin-bottom: 0;
+    }
+    
+    .step-content {
+      text-align: left;
+      flex: 1;
+    }
+    
+    .step-connector {
+      display: none;
+    }
+  }
+</style>

src/lib/types/index.ts

@@ -71,4 +71,30 @@ export interface GradioLibs {
   Client: {
     connect: (space: string, options?: { hf_token?: string }) => Promise<GradioClient>;
   };
+}
+
+// Monster Generator Types
+export type MonsterWorkflowStep = 
+  | 'upload' 
+  | 'captioning' 
+  | 'conceptualizing' 
+  | 'promptCrafting' 
+  | 'generating' 
+  | 'complete';
+
+export interface MonsterWorkflowState {
+  currentStep: MonsterWorkflowStep;
+  userImage: Blob | null;
+  imageCaption: string | null;
+  monsterConcept: string | null;
+  imagePrompt: string | null;
+  monsterImage: FluxGenerationResult | null;
+  error: string | null;
+  isProcessing: boolean;
+}
+
+export interface MonsterGeneratorProps {
+  joyCaptionClient: GradioClient | null;
+  rwkvClient: GradioClient | null;
+  fluxClient: GradioClient | null;
 }