Update app.py from anycoder

app.py

@@ -0,0 +1,591 @@
+import gradio as gr
+import numpy as np
+from PIL import Image
+import io
+import time
+import random
+from typing import List, Dict, Any
+
+# Configuration
+CONFIG = {
+    "required_images": 10,
+    "playback_fps": 30,
+    "image_size": (512, 512)
+}
+
+class ImageSequenceGenerator:
+    def __init__(self):
+        self.images: List[str] = []
+        self.is_playing: bool = False
+        self.current_frame: int = 0
+        self.playback_interval: Any = None
+        self.is_generating: bool = False
+
+    def generate_random_image(self, prompt: str) -> str:
+        """Generate a random colorful image with the prompt text"""
+        width, height = CONFIG["image_size"]
+        canvas = Image.new('RGB', (width, height))
+
+        # Generate random colors
+        colors = []
+        for _ in range(5):
+            colors.append((random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
+
+        # Create gradient
+        for y in range(height):
+            # Calculate gradient position
+            pos = y / height
+            # Get interpolated color
+            if len(colors) == 1:
+                color = colors[0]
+            else:
+                # Find which segment we're in
+                segment = pos * (len(colors) - 1)
+                idx = int(segment)
+                fraction = segment - idx
+
+                # Interpolate between colors
+                c1 = colors[idx]
+                c2 = colors[idx + 1] if idx + 1 < len(colors) else colors[idx]
+
+                color = (
+                    int(c1[0] + (c2[0] - c1[0]) * fraction),
+                    int(c1[1] + (c2[1] - c1[1]) * fraction),
+                    int(c1[2] + (c2[2] - c1[2]) * fraction)
+                )
+
+            # Draw horizontal line
+            for x in range(width):
+                canvas.putpixel((x, y), color)
+
+        # Add random shapes
+        draw = ImageDraw.Draw(canvas)
+        for _ in range(10):
+            color = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255), 180)
+            size = random.randint(50, 150)
+            x = random.randint(0, width - size)
+            y = random.randint(0, height - size)
+
+            if random.random() > 0.5:
+                # Circle
+                draw.ellipse([x, y, x + size, y + size], fill=color)
+            else:
+                # Rectangle
+                draw.rectangle([x, y, x + size, y + size], fill=color)
+
+        # Add prompt text
+        if prompt:
+            try:
+                font_size = 24
+                font = ImageFont.truetype("arial.ttf", font_size) if hasattr(ImageFont, 'truetype') else ImageFont.load_default()
+                text = prompt[:30] + ("..." if len(prompt) > 30 else "")
+                text_width, text_height = draw.textsize(text, font=font)
+
+                # Add text with white outline
+                for dx in [-1, 0, 1]:
+                    for dy in [-1, 0, 1]:
+                        if dx != 0 or dy != 0:
+                            draw.text(
+                                ((width - text_width) // 2 + dx, (height - text_height) // 2 + dy),
+                                text,
+                                font=font,
+                                fill=(0, 0, 0)
+                            )
+
+                draw.text(
+                    ((width - text_width) // 2, (height - text_height) // 2),
+                    text,
+                    font=font,
+                    fill=(255, 255, 255)
+                )
+            except:
+                pass  # Skip text if font issues
+
+        # Convert to base64 string
+        buffered = io.BytesIO()
+        canvas.save(buffered, format="PNG")
+        img_str = f"data:image/png;base64,{base64.b64encode(buffered.getvalue()).decode()}"
+        return img_str
+
+    def add_image_to_buffer(self, image_data: str):
+        """Add image to buffer"""
+        self.images.append(image_data)
+        return self.get_state()
+
+    def remove_image_from_buffer(self, index: int):
+        """Remove image from buffer"""
+        if 0 <= index < len(self.images):
+            self.images.pop(index)
+        return self.get_state()
+
+    def clear_buffer(self):
+        """Clear the entire buffer"""
+        self.images = []
+        self.stop_sequence()
+        return self.get_state()
+
+    def play_sequence(self):
+        """Start playing the sequence"""
+        if self.is_playing or len(self.images) < CONFIG["required_images"]:
+            return self.get_state()
+
+        self.is_playing = True
+        self.current_frame = 0
+        return self.get_state()
+
+    def stop_sequence(self):
+        """Stop playing the sequence"""
+        if not self.is_playing:
+            return self.get_state()
+
+        self.is_playing = False
+        self.current_frame = 0
+        return self.get_state()
+
+    def get_current_frame(self):
+        """Get the current frame for display"""
+        if not self.is_playing or not self.images:
+            return None
+
+        frame_data = self.images[self.current_frame]
+        self.current_frame = (self.current_frame + 1) % len(self.images)
+        return frame_data
+
+    def get_state(self) -> Dict[str, Any]:
+        """Get current state for UI updates"""
+        return {
+            "buffer_count": len(self.images),
+            "can_play": len(self.images) >= CONFIG["required_images"] and not self.is_playing,
+            "is_playing": self.is_playing,
+            "is_generating": self.is_generating,
+            "images": self.images
+        }
+
+    def generate_image(self, prompt: str, negative_prompt: str, steps: int, guidance_scale: float, seed: int, batch_size: int):
+        """Generate a new image"""
+        if self.is_generating:
+            return self.get_state()
+
+        if not prompt.strip():
+            raise gr.Error("Please enter a prompt")
+
+        self.is_generating = True
+
+        # Simulate generation progress
+        for i in range(10):
+            time.sleep(0.3)
+            yield self.get_state()
+
+        try:
+            # Generate image
+            image_data = self.generate_random_image(prompt)
+            self.add_image_to_buffer(image_data)
+        except Exception as e:
+            raise gr.Error(f"Failed to generate image: {str(e)}")
+        finally:
+            self.is_generating = False
+
+        return self.get_state()
+
+# Create the Gradio interface
+def create_gradio_app():
+    generator = ImageSequenceGenerator()
+
+    # Custom CSS for styling
+    custom_css = """
+    .gradio-container {
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+    }
+
+    .main-title {
+        text-align: center;
+        color: #6c5ce7;
+        margin-bottom: 2rem;
+    }
+
+    .status-container {
+        display: flex;
+        justify-content: space-between;
+        margin: 1rem 0;
+        gap: 1rem;
+    }
+
+    .status-item {
+        flex: 1;
+        padding: 1rem;
+        background: #f8f9fa;
+        border-radius: 8px;
+        text-align: center;
+    }
+
+    .status-label {
+        font-size: 0.9rem;
+        color: #666;
+        margin-bottom: 0.3rem;
+    }
+
+    .status-value {
+        font-weight: 700;
+        color: #6c5ce7;
+        font-size: 1.2rem;
+    }
+
+    .image-buffer {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+        gap: 1rem;
+        margin: 1rem 0;
+        max-height: 400px;
+        overflow-y: auto;
+        padding: 0.5rem;
+        border: 2px dashed #e0e0e0;
+        border-radius: 8px;
+    }
+
+    .buffer-item {
+        position: relative;
+        aspect-ratio: 1;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s ease;
+    }
+
+    .buffer-item:hover {
+        transform: scale(1.05);
+        z-index: 10;
+    }
+
+    .buffer-item img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .player-display {
+        width: 100%;
+        aspect-ratio: 16/9;
+        background: #f0f0f0;
+        border-radius: 8px;
+        overflow: hidden;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 1rem 0;
+    }
+
+    .player-display img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+
+    .empty-state {
+        text-align: center;
+        padding: 2rem;
+        color: #999;
+    }
+
+    .empty-state i {
+        font-size: 3rem;
+        margin-bottom: 1rem;
+        color: #ddd;
+    }
+
+    .progress-bar {
+        height: 8px;
+        background: #e0e0e0;
+        border-radius: 4px;
+        overflow: hidden;
+        margin: 1rem 0;
+    }
+
+    .progress {
+        height: 100%;
+        background: #6c5ce7;
+        width: 0%;
+        transition: width 0.3s ease;
+    }
+
+    .player-controls {
+        display: flex;
+        gap: 1rem;
+        margin: 1rem 0;
+    }
+
+    .settings-panel {
+        background: white;
+        border-radius: 15px;
+        padding: 1.5rem;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        margin: 1rem 0;
+    }
+
+    .settings-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+    }
+
+    @media (max-width: 768px) {
+        .settings-grid {
+            grid-template-columns: 1fr;
+        }
+    }
+    """
+
+    with gr.Blocks(css=custom_css) as demo:
+        gr.Markdown("""
+        <div style="text-align: center; margin-bottom: 2rem;">
+            <h1 style="color: #6c5ce7; font-size: 2.5rem; margin-bottom: 0.5rem;">
+                <i class="fas fa-images"></i> Image Sequence Generator
+            </h1>
+            <p style="color: #666; font-size: 1.1rem;">
+                Generate images and play them back as a sequence at 30 FPS
+            </p>
+            <div style="margin-top: 1rem; font-size: 0.9rem; color: #666;">
+                Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: #6c5ce7; font-weight: 600;">anycoder</a>
+            </div>
+        </div>
+        """)
+
+        with gr.Row():
+            with gr.Column(scale=1):
+                # Controls Section
+                gr.Markdown("### Generation Controls")
+
+                prompt = gr.Textbox(
+                    label="Prompt",
+                    placeholder="Describe the image you want to generate",
+                    lines=2
+                )
+
+                negative_prompt = gr.Textbox(
+                    label="Negative Prompt",
+                    placeholder="What you don't want to see",
+                    lines=2
+                )
+
+                with gr.Accordion("Advanced Settings", open=False):
+                    with gr.Row():
+                        steps = gr.Slider(
+                            label="Steps",
+                            minimum=1,
+                            maximum=20,
+                            value=4,
+                            step=1
+                        )
+                        guidance_scale = gr.Slider(
+                            label="Guidance Scale",
+                            minimum=0,
+                            maximum=20,
+                            value=0,
+                            step=0.1
+                        )
+
+                    with gr.Row():
+                        seed = gr.Number(
+                            label="Seed",
+                            value=-1,
+                            minimum=-1
+                        )
+                        batch_size = gr.Number(
+                            label="Batch Size",
+                            value=1,
+                            minimum=1,
+                            maximum=4
+                        )
+
+                generate_btn = gr.Button(
+                    value="Generate Image",
+                    variant="primary",
+                    size="lg"
+                )
+
+                progress_bar = gr.HTML("""
+                <div class="progress-bar">
+                    <div class="progress" id="progress-bar" style="width: 0%;"></div>
+                </div>
+                """)
+
+                # State components
+                state_display = gr.JSON(visible=False)
+                buffer_state = gr.State(generator.get_state())
+
+            with gr.Column(scale=1):
+                # Preview Section
+                gr.Markdown("### Image Buffer & Player")
+
+                # Status display
+                status_html = gr.HTML("""
+                <div class="status-container">
+                    <div class="status-item">
+                        <div class="status-label">Images in Buffer</div>
+                        <div class="status-value" id="buffer-count">0</div>
+                    </div>
+                    <div class="status-item">
+                        <div class="status-label">Required for Playback</div>
+                        <div class="status-value">10</div>
+                    </div>
+                    <div class="status-item">
+                        <div class="status-label">Playback Speed</div>
+                        <div class="status-value">30 FPS</div>
+                    </div>
+                </div>
+                """)
+
+                with gr.Row():
+                    clear_btn = gr.Button("Clear Buffer", variant="secondary")
+                    play_btn = gr.Button("Play Sequence", variant="primary")
+                    stop_btn = gr.Button("Stop", variant="stop")
+
+                player_display = gr.Image(
+                    label="Player Display",
+                    type="pil",
+                    height=300,
+                    visible=True
+                )
+
+                gr.Markdown("#### Image Buffer")
+                image_buffer = gr.Gallery(
+                    label="Generated Images",
+                    columns=4,
+                    height="auto",
+                    object_fit="cover"
+                )
+
+        # Event handlers
+        def update_ui(state):
+            # Update status display
+            status_html.value = f"""
+            <div class="status-container">
+                <div class="status-item">
+                    <div class="status-label">Images in Buffer</div>
+                    <div class="status-value">{state['buffer_count']}</div>
+                </div>
+                <div class="status-item">
+                    <div class="status-label">Required for Playback</div>
+                    <div class="status-value">{CONFIG['required_images']}</div>
+                </div>
+                <div class="status-item">
+                    <div class="status-label">Playback Speed</div>
+                    <div class="status-value">30 FPS</div>
+                </div>
+            </div>
+            """
+
+            # Update button states
+            play_btn.interactive = state['can_play']
+            stop_btn.interactive = state['is_playing']
+            generate_btn.interactive = not state['is_generating']
+
+            # Update image buffer
+            if state['images']:
+                images = [gr.Image(value=img, visible=True) for img in state['images']]
+                return {
+                    status_html: status_html,
+                    play_btn: gr.Button(interactive=state['can_play']),
+                    stop_btn: gr.Button(interactive=state['is_playing']),
+                    generate_btn: gr.Button(interactive=not state['is_generating']),
+                    image_buffer: gr.Gallery(value=state['images'], visible=True)
+                }
+            else:
+                return {
+                    status_html: status_html,
+                    play_btn: gr.Button(interactive=state['can_play']),
+                    stop_btn: gr.Button(interactive=state['is_playing']),
+                    generate_btn: gr.Button(interactive=not state['is_generating']),
+                    image_buffer: gr.Gallery(value=[], visible=True)
+                }
+
+        def generate_image_wrapper(prompt, negative_prompt, steps, guidance_scale, seed, batch_size):
+            for state in generator.generate_image(prompt, negative_prompt, steps, guidance_scale, seed, batch_size):
+                yield update_ui(state)
+
+        def play_sequence_wrapper():
+            state = generator.play_sequence()
+            return update_ui(state)
+
+        def stop_sequence_wrapper():
+            state = generator.stop_sequence()
+            return update_ui(state)
+
+        def clear_buffer_wrapper():
+            state = generator.clear_buffer()
+            return update_ui(state)
+
+        # Connect event handlers
+        generate_btn.click(
+            fn=generate_image_wrapper,
+            inputs=[prompt, negative_prompt, steps, guidance_scale, seed, batch_size],
+            outputs=[status_html, play_btn, stop_btn, generate_btn, image_buffer]
+        )
+
+        play_btn.click(
+            fn=play_sequence_wrapper,
+            outputs=[status_html, play_btn, stop_btn, generate_btn, image_buffer]
+        )
+
+        stop_btn.click(
+            fn=stop_sequence_wrapper,
+            outputs=[status_html, play_btn, stop_btn, generate_btn, image_buffer]
+        )
+
+        clear_btn.click(
+            fn=clear_buffer_wrapper,
+            outputs=[status_html, play_btn, stop_btn, generate_btn, image_buffer]
+        )
+
+        # Timer for playback
+        timer = gr.Timer(1.0 / CONFIG["playback_fps"])
+
+        def update_player_display():
+            if generator.is_playing and generator.images:
+                frame_data = generator.get_current_frame()
+                if frame_data:
+                    # Convert base64 to PIL Image
+                    from PIL import Image
+                    import io
+                    import base64
+
+                    # Extract base64 data
+                    header, encoded = frame_data.split(",", 1)
+                    binary_data = base64.b64decode(encoded)
+                    image = Image.open(io.BytesIO(binary_data))
+                    return image
+            return None
+
+        player_display.change(
+            fn=update_player_display,
+            every=timer,
+            outputs=player_display
+        )
+
+    return demo
+
+# Create and launch the app
+if __name__ == "__main__":
+    demo = create_gradio_app()
+    demo.launch(
+        theme=gr.themes.Soft(
+            primary_hue="purple",
+            secondary_hue="indigo",
+            neutral_hue="slate",
+            font=[gr.themes.GoogleFont("Segoe UI"), "sans-serif"],
+            text_size="lg",
+            spacing_size="lg",
+            radius_size="md"
+        ).set(
+            button_primary_background_fill="*primary_600",
+            button_primary_background_fill_hover="*primary_700",
+            block_title_text_weight="600",
+        ),
+        footer_links=[
+            {
+                "label": "Built with anycoder",
+                "url": "https://huggingface.co/spaces/akhaliq/anycoder"
+            }
+        ],
+        show_error=True
+    )