Update app.py

app.py

@@ -1,65 +1,241 @@
 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:
-        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>"
-        )
-
+        # State to track authentication
+        user_profile_state = gr.State(value=None)
+        
+        # Header with login button
         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.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>"
                 )
-                generate_btn = gr.Button("🎨 Generate Image", variant="primary")
-                
             with gr.Column(scale=1):
-                output_image = gr.Image(
-                    label="Generated Image",
-                    height=512,
-                    width=512,
-                    interactive=False,
-                    show_download_button=True
+                # 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)
 
-        # Set up the event listener with all queue-related features disabled
+            # 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=generate_image,
-            inputs=[prompt_input],
-            outputs=[output_image],
-            queue=False,  # Disable queue for this event
-            api_name=False,  # Disable API endpoint creation
-            show_api=False,  # Don't show this in API docs
+            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,
         )
         
-        # Example usage guidance with queue features disabled
-        gr.Examples(
-            examples=[
-                "A detailed watercolor painting of a small red fox sleeping on a pile of autumn leaves."
-            ],
-            inputs=prompt_input,
-            outputs=output_image,
-            fn=generate_image,
-            cache_examples=False,  # Don't cache examples
-            api_name=False,  # No API endpoint for examples
-            show_api=False,  # Don't show in API docs
+        # 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 without queue, API, and monitoring features
+    
+    # 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,  # Hide API documentation
-        enable_monitoring=False,  # Disable monitoring to prevent any background queuing
-        quiet=True,  # Reduce console output
-    )
+        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