app.py

import gradio as gr
from models import generate_image, MODEL_ID
from config import APPLE_TENCENT_THEME
from typing import Optional

def create_ui():
    """Create the main application UI with Hugging Face OAuth authentication"""
    with gr.Blocks(title=f"Tencent HunyuanImage-3.0 Demo", theme=APPLE_TENCENT_THEME) as demo:
        # State to track authentication
        user_profile_state = gr.State(value=None)
        
        # Header with login button
        with gr.Row():
            with gr.Column(scale=3):
                gr.HTML(
                    f"<div style='text-align: center; max-width: 700px; margin: 0 auto;'>"
                    f"<h1>Tencent {MODEL_ID.split('/')[-1]}</h1>"
                    f"<p>Generate images using Tencent's state-of-the-art model hosted by FAL AI.</p>"
                    f"Built with <a href='https://huggingface.co/spaces/akhaliq/anycoder' target='_blank'>anycoder</a>"
                    f"</div>"
                )
            with gr.Column(scale=1):
                # Login button - shows "Sign in with Hugging Face" when logged out, "Logout (username)" when logged in
                login_button = gr.LoginButton(
                    value="Sign in with Hugging Face",
                    logout_value="Logout ({})",
                    size="lg",
                    variant="huggingface"
                )
        
        # User info display
        user_info = gr.Markdown("", visible=False)
        
        # Main interface container - hidden until authenticated
        with gr.Group(visible=False) as main_interface:
            with gr.Row():
                with gr.Column(scale=1):
                    prompt_input = gr.Textbox(
                        label="Prompt",
                        placeholder="e.g., A detailed watercolor painting of a small red fox sleeping on a pile of autumn leaves.",
                        lines=4
                    )
                    
                    with gr.Row():
                        generate_btn = gr.Button("🎨 Generate Image", variant="primary", scale=2)
                        clear_btn = gr.Button("🗑️ Clear", variant="secondary", scale=1)
                    
                    # Additional settings in an accordion
                    with gr.Accordion("⚙️ Advanced Settings", open=False):
                        gr.Markdown("""
                        Advanced settings are not implemented in this demo.
                        You can add parameters like:
                        - Image size
                        - Number of steps
                        - Guidance scale
                        - Seed
                        """)
                        
                with gr.Column(scale=1):
                    output_image = gr.Image(
                        label="Generated Image",
                        height=512,
                        width=512,
                        interactive=False,
                        show_download_button=True
                    )
                    
                    # Generation status
                    status_text = gr.Markdown("Ready to generate...", visible=True)

            # Example prompts
            gr.Examples(
                examples=[
                    "A detailed watercolor painting of a small red fox sleeping on a pile of autumn leaves.",
                    "A futuristic cityscape at sunset with flying cars and neon lights",
                    "A serene Japanese garden with cherry blossoms and a koi pond",
                    "A steampunk mechanical owl perched on an ancient tree",
                    "An astronaut playing guitar on the moon with Earth in the background"
                ],
                inputs=prompt_input,
                outputs=[output_image, status_text],
                fn=lambda prompt: generate_with_status(prompt, user_profile_state.value),
                cache_examples=False,
                show_api=False,
            )
        
        # Welcome message for non-authenticated users
        welcome_message = gr.HTML(
            """
            <div style='text-align: center; max-width: 600px; margin: 50px auto; padding: 30px; 
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
                        border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);'>
                <h2 style='color: white; margin-bottom: 20px;'>🎨 Welcome to HunyuanImage-3.0</h2>
                <p style='color: rgba(255,255,255,0.9); font-size: 16px; line-height: 1.6;'>
                    Sign in with your Hugging Face account to start generating amazing images 
                    with Tencent's state-of-the-art AI model.
                </p>
                <div style='margin-top: 30px; padding: 20px; background: rgba(255,255,255,0.1); 
                            border-radius: 10px;'>
                    <p style='color: white; margin: 0;'>
                        <strong>✨ Features:</strong><br>
                        • High-quality image generation<br>
                        • Easy-to-use interface<br>
                        • Multiple example prompts<br>
                        • Download generated images
                    </p>
                </div>
                <p style='color: rgba(255,255,255,0.8); font-size: 14px; margin-top: 20px;'>
                    Click the "Sign in with Hugging Face" button above to get started
                </p>
            </div>
            """,
            visible=True
        )
        
        # Authentication handling functions
        def update_ui_on_auth(profile: gr.OAuthProfile | None) -> tuple:
            """Update UI based on authentication status"""
            if profile is None:
                # User is not authenticated
                return (
                    gr.update(visible=False),  # main_interface
                    gr.update(visible=True),   # welcome_message
                    "",                         # user_info
                    gr.update(visible=False),  # user_info visibility
                    None                        # user_profile_state
                )
            else:
                # User is authenticated
                user_text = f"### 👤 Welcome, {profile.name}!\n\n"
                if profile.username:
                    user_text += f"**Username:** @{profile.username}\n"
                if hasattr(profile, 'email') and profile.email:
                    user_text += f"**Email:** {profile.email}\n"
                
                return (
                    gr.update(visible=True),   # main_interface
                    gr.update(visible=False),  # welcome_message
                    user_text,                  # user_info
                    gr.update(visible=True),   # user_info visibility
                    profile                     # user_profile_state
                )
        
        def generate_with_status(prompt: str, profile: gr.OAuthProfile | None) -> tuple:
            """Generate image with status updates and user verification"""
            if profile is None:
                return None, "⚠️ Please sign in to generate images!"
            
            if not prompt:
                return None, "⚠️ Please enter a prompt!"
            
            try:
                # You can log user activity here if needed
                print(f"User {profile.username} is generating an image with prompt: {prompt[:50]}...")
                
                # Generate the image
                image = generate_image(prompt)
                
                return image, "✅ Image generated successfully!"
                
            except Exception as e:
                return None, f"❌ Error: {str(e)}"
        
        def clear_interface():
            """Clear the interface"""
            return "", None, "Ready to generate..."
        
        # Load event to check authentication status
        demo.load(
            fn=update_ui_on_auth,
            inputs=None,
            outputs=[main_interface, welcome_message, user_info, user_info, user_profile_state],
            queue=False,
            show_api=False,
        )
        
        # Login button click event (also handles logout)
        login_button.click(
            fn=update_ui_on_auth,
            inputs=None,
            outputs=[main_interface, welcome_message, user_info, user_info, user_profile_state],
            queue=False,
            show_api=False,
        )
        
        # Generate button event
        generate_btn.click(
            fn=lambda prompt, profile: generate_with_status(prompt, profile),
            inputs=[prompt_input, user_profile_state],
            outputs=[output_image, status_text],
            queue=False,
            show_api=False,
        )
        
        # Clear button event
        clear_btn.click(
            fn=clear_interface,
            inputs=[],
            outputs=[prompt_input, output_image, status_text],
            queue=False,
            show_api=False,
        )
        
        # Footer
        gr.HTML(
            """
            <div style='text-align: center; margin-top: 40px; padding: 20px; border-top: 1px solid #e0e0e0;'>
                <p style='color: #666; font-size: 14px;'>
                    This demo uses Hugging Face OAuth for secure authentication. 
                    Your session will remain active until you logout.
                    <br>For the best results, provide detailed prompts with specific descriptions.
                </p>
            </div>
            """
        )

    return demo

# Additional helper function for logging/tracking (optional)
def log_user_activity(profile: gr.OAuthProfile, action: str, details: str = ""):
    """Log user activity for analytics or monitoring"""
    if profile:
        print(f"[{action}] User: {profile.username}, Name: {profile.name}, Details: {details}")

if __name__ == "__main__":
    app = create_ui()
    
    # Launch the app
    # Note: OAuth features work best when deployed on Hugging Face Spaces
    # For local development, it will use the local HF account (via hf auth login)
    app.launch(
        show_api=False,
        enable_monitoring=False,
        quiet=True,
        share=False,  # Set to True if you want to create a public link
        server_name="0.0.0.0",  # Change to "0.0.0.0" to allow external access
        server_port=7860,  # Default Gradio port
    )
    
    # Note: When deploying to Hugging Face Spaces, you can configure OAuth permissions
    # in the README file as described here: https://huggingface.co/docs/hub/en/spaces-oauth