Upload src/streamlit_app.py with huggingface_hub

src/streamlit_app.py

@@ -1,40 +1,379 @@
-import altair as alt
-import numpy as np
-import pandas as pd
+=== streamlit_app.py ===
 import streamlit as st
+from utils import load_css, create_prompt_selector, display_image_gallery, generate_image_placeholder
+import time
 
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+def main():
+    st.set_page_config(
+        page_title="AI Image Generator - Dramatic Scenes",
+        page_icon="🎨",
+        layout="wide",
+        initial_sidebar_state="expanded"
+    )
+    
+    load_css()
+    
+    # Header
+    st.markdown("""
+    <div class="header">
+        <h1>🎬 AI Image Generator - Dramatic Scenes</h1>
+        <p>Create hyperrealistic, cinematic images with detailed prompts</p>
+        <p style="font-size: 0.9em; opacity: 0.7;">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    # Sidebar
+    with st.sidebar:
+        st.markdown("## ⚙️ Generation Settings")
+        
+        # Aspect ratio
+        aspect_ratio = st.selectbox(
+            "Aspect Ratio",
+            options=["4:5", "16:9", "1:1", "3:2", "2:3"],
+            index=0
+        )
+        
+        # Quality
+        quality = st.selectbox(
+            "Quality",
+            options=["Standard", "High", "Ultra (8K)"],
+            index=2
+        )
+        
+        # Style
+        style = st.selectbox(
+            "Style",
+            options=["Cinematic", "Photorealistic", "Dramatic", "Hollywood", "Artistic"],
+            index=0
+        )
+        
+        # Resolution
+        resolution = st.selectbox(
+            "Resolution",
+            options=["1024x1024", "1024x1280", "1280x720", "1920x1080", "2048x2560"],
+            index=1
+        )
+        
+        st.markdown("---")
+        st.markdown("### 📊 Statistics")
+        if 'generated_count' not in st.session_state:
+            st.session_state.generated_count = 0
+        st.metric("Images Generated", st.session_state.generated_count)
+    
+    # Main content
+    col1, col2 = st.columns([1, 1])
+    
+    with col1:
+        st.markdown("## 📝 Prompt Editor")
+        
+        # Predefined prompts
+        prompt_option = st.radio(
+            "Choose a scene template:",
+            ["Custom Prompt", "Haunted Hut Scene", "Disaster Scene"],
+            index=0
+        )
+        
+        # Predefined prompts
+        prompts = {
+            "Haunted Hut Scene": """Hyperrealistic and dramatic scene showing a terrified man sitting on a bamboo bench in a thatch-roofed hut. He's wearing a black T-shirt with "WALIĆ RUDEGO" text and symbolic pattern underneath. A semi-transparent, smoky, ghostly figure emerges from the air beside him, grabbing his neck with a misty hand. The ghost has a skeletal, menacing face and glowing eyes, screaming or roaring. The man looks shocked and terrified, with wide eyes and mouth agape, frozen in fear. Natural lighting with warm sunlight filtering through the hut, background shows green vegetation outside. Intense, eerie, and cinematic atmosphere with strong emotional contrast between ghost and victim. 8K resolution, 4:5 aspect ratio.""",
+            
+            "Disaster Scene": """A man and cat falling through the air. Background: skyscrapers curve dramatically in a wide fisheye perspective, as if the entire city is collapsing inward. Flying debris, concrete chunks, and glass shards fill the air. Action elements: A police car floats behind him - its red and blue sirens flash intensely through dust and smoke. Behind the vehicle follows a powerful explosion, casting orange light and shrapnel across the scene. In the background, a police officer is seen waving arms, thrown by the explosion. Lighting and atmosphere: Cinematic lighting with strong, directional shadows, motion blur, and bright lights from sirens and fireball. Dark and gritty color palette with golden-brown tones punctuated by vivid red, blue, and orange accents from explosions and sirens. Clothing: The man wears a torn, olive-green hoodie and dark, worn pants - flailing wildly in the wind. Hollywood disaster movie style - dramatic freeze-frame with intense city destruction, emotions, and surreal action. Hyperrealistic details in skin texture, movement, and lighting."""
+        }
+        
+        # Text area for prompt
+        if prompt_option == "Custom Prompt":
+            prompt_text = st.text_area(
+                "Enter your prompt:",
+                height=200,
+                placeholder="Describe the image you want to generate in detail..."
+            )
+        else:
+            prompt_text = st.text_area(
+                "Edit the preset prompt:",
+                value=prompts.get(prompt_option, ""),
+                height=200
+            )
+        
+        # Negative prompt
+        negative_prompt = st.text_area(
+            "Negative Prompt (what to avoid):",
+            value="blurry, low quality, distorted, deformed, bad anatomy, watermark, text, signature",
+            height=100
+        )
+        
+        # Generate button
+        generate_col1, generate_col2, generate_col3 = st.columns([1, 2, 1])
+        with generate_col2:
+            if st.button("🎨 Generate Image", type="primary", use_container_width=True):
+                if prompt_text:
+                    with st.spinner("Generating your image..."):
+                        # Simulate image generation
+                        time.sleep(2)
+                        
+                        # Update session state
+                        if 'generated_images' not in st.session_state:
+                            st.session_state.generated_images = []
+                        
+                        # Add new image to gallery
+                        new_image = {
+                            'prompt': prompt_text,
+                            'negative_prompt': negative_prompt,
+                            'aspect_ratio': aspect_ratio,
+                            'quality': quality,
+                            'style': style,
+                            'timestamp': time.time()
+                        }
+                        st.session_state.generated_images.append(new_image)
+                        st.session_state.generated_count += 1
+                        
+                        st.success("✅ Image generated successfully!")
+                        st.rerun()
+                else:
+                    st.error("❌ Please enter a prompt to generate an image.")
+    
+    with col2:
+        st.markdown("## 🖼️ Generated Images")
+        
+        if 'generated_images' in st.session_state and st.session_state.generated_images:
+            display_image_gallery(st.session_state.generated_images)
+        else:
+            st.markdown("""
+            <div class="empty-state">
+                <h3>No images generated yet</h3>
+                <p>Enter a prompt and click "Generate Image" to start creating!</p>
+            </div>
+            """, unsafe_allow_html=True)
+            
+            # Show example placeholders
+            st.markdown("### Example Scenes")
+            example_col1, example_col2 = st.columns(2)
+            
+            with example_col1:
+                st.image(
+                    generate_image_placeholder("Haunted", "#FF6B6B"),
+                    caption="Haunted Hut Scene Example",
+                    use_column_width=True
+                )
+            
+            with example_col2:
+                st.image(
+                    generate_image_placeholder("Disaster", "#4ECDC4"),
+                    caption="Disaster Scene Example",
+                    use_column_width=True
+                )
+    
+    # Footer
+    st.markdown("---")
+    st.markdown("""
+    <div class="footer">
+        <p>💡 Tip: Be as detailed as possible in your prompts for better results!</p>
+        <p>🎯 Focus on: lighting, atmosphere, emotions, and specific visual elements</p>
+    </div>
+    """, unsafe_allow_html=True)
+
+if __name__ == "__main__":
+    main()
+
+=== utils.py ===
+import streamlit as st
+import base64
+from io import BytesIO
+import time
+
+def load_css():
+    """Load custom CSS styles"""
+    st.markdown("""
+    <style>
+        .header {
+            text-align: center;
+            padding: 2rem 0;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border-radius: 10px;
+            margin-bottom: 2rem;
+        }
+        
+        .header h1 {
+            margin: 0;
+            font-size: 2.5rem;
+            font-weight: 700;
+        }
+        
+        .header p {
+            margin: 0.5rem 0;
+            opacity: 0.9;
+        }
+        
+        .header a {
+            color: #FFD700;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        
+        .header a:hover {
+            text-decoration: underline;
+        }
+        
+        .image-card {
+            background: white;
+            border-radius: 10px;
+            padding: 1rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            margin-bottom: 1rem;
+            transition: transform 0.2s;
+        }
+        
+        .image-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+        }
+        
+        .image-container {
+            position: relative;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        
+        .image-overlay {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
+            color: white;
+            padding: 1rem;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        
+        .image-container:hover .image-overlay {
+            opacity: 1;
+        }
+        
+        .empty-state {
+            text-align: center;
+            padding: 3rem;
+            color: #666;
+        }
+        
+        .empty-state h3 {
+            margin-bottom: 1rem;
+            color: #333;
+        }
+        
+        .footer {
+            text-align: center;
+            padding: 1rem;
+            color: #666;
+            font-size: 0.9em;
+        }
+        
+        .prompt-preview {
+            background: #f7f7f7;
+            padding: 0.5rem;
+            border-radius: 5px;
+            font-size: 0.85em;
+            color: #555;
+            margin-top: 0.5rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        
+        .stButton > button {
+            transition: all 0.2s;
+        }
+        
+        .stButton > button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+        
+        .metric-card {
+            background: white;
+            padding: 1rem;
+            border-radius: 8px;
+            text-align: center;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+    """, unsafe_allow_html=True)
+
+def create_prompt_selector():
+    """Create a prompt selection interface"""
+    pass
+
+def display_image_gallery(images):
+    """Display a gallery of generated images"""
+    cols = st.columns(2)
+    
+    for idx, image_data in enumerate(reversed(images[-6:])):  # Show last 6 images
+        with cols[idx % 2]:
+            st.markdown(f"""
+            <div class="image-card">
+                <div class="image-container">
+                    <img src="data:image/png;base64,{create_placeholder_image(image_data['prompt'][:20])}" 
+                         style="width: 100%; border-radius: 8px;">
+                    <div class="image-overlay">
+                        <strong>Generated</strong><br>
+                        {time.strftime('%Y-%m-%d %H:%M', time.localtime(image_data['timestamp']))}
+                    </div>
+                </div>
+                <div style="margin-top: 0.5rem;">
+                    <strong>Style:</strong> {image_data['style']}<br>
+                    <strong>Quality:</strong> {image_data['quality']}<br>
+                    <strong>Aspect:</strong> {image_data['aspect_ratio']}
+                </div>
+                <div class="prompt-preview">
+                    {image_data['prompt'][:100]}{'...' if len(image_data['prompt']) > 100 else ''}
+                </div>
+            </div>
+            """, unsafe_allow_html=True)
+            
+            if st.button(f"📋 Copy Prompt", key=f"copy_{idx}"):
+                st.write(f"**Prompt copied to clipboard:** {image_data['prompt']}")
+                st.success("Prompt ready to copy!")
+
+def generate_image_placeholder(text, color="#667eea"):
+    """Generate a placeholder image with text"""
+    # This would normally use an image generation API
+    # For now, we'll create a simple placeholder
+    return f"https://picsum.photos/seed/{text}/400/500"
+
+def create_placeholder_image(seed):
+    """Create a base64 encoded placeholder image"""
+    # Simple placeholder - in real app this would be the generated image
+    placeholder_url = f"https://picsum.photos/seed/{seed}/400/500"
+    return ""
+
+def save_image_to_history(image_data):
+    """Save generated image to session history"""
+    if 'image_history' not in st.session_state:
+        st.session_state.image_history = []
+    
+    st.session_state.image_history.append({
+        'timestamp': time.time(),
+        'data': image_data
+    })
+    
+    # Keep only last 50 images
+    if len(st.session_state.image_history) > 50:
+        st.session_state.image_history = st.session_state.image_history[-50:]
+
+def get_prompt_suggestions():
+    """Get prompt suggestions for users"""
+    return [
+        "Cinematic portrait with dramatic lighting",
+        "Fantasy landscape with magical elements",
+        "Urban street scene at golden hour",
+        "Abstract art with vibrant colors",
+        "Historical scene with period accuracy"
+    ]
+
+=== requirements.txt ===
+streamlit
+pillow
+numpy
+requests
+base64
+time