Update app.py

app.py

@@ -1,7 +1,6 @@
 """
-🎨 Basic Image Adjustments
-Ajustes básicos de imagem
-Otimizado para Hugging Face Spaces
+🎨 Basic Image Adjustments - App 2 do Photoshop AI Ecosystem
+Versão otimizada para Hugging Face Spaces com Gradio 6.2.0
 """
 
 import gradio as gr
@@ -9,91 +8,121 @@ from PIL import Image, ImageEnhance, ImageOps
 import tempfile
 import numpy as np
 
-# ========== FUNÇÕES PRINCIPAIS ==========
+# ========== FUNÇÕES DE PROCESSAMENTO ==========
 
 def process_image(image, brightness=1.0, contrast=1.0, saturation=1.0, sharpness=1.0, auto_contrast=False):
-    """Processa imagem com ajustes básicos"""
+    """Aplica ajustes básicos à imagem"""
     if image is None:
         return None
     
     try:
-        # Converter para PIL Image
+        # Converter para PIL Image se necessário
         if isinstance(image, np.ndarray):
             img = Image.fromarray(image)
+        elif not isinstance(image, Image.Image):
+            return None
         else:
-            img = image
+            img = image.copy()
         
         # Aplicar contraste automático
         if auto_contrast:
             img = ImageOps.autocontrast(img, cutoff=2)
         
-        # Aplicar ajustes
+        # Aplicar ajustes na ordem correta
         if brightness != 1.0:
-            enhancer = ImageEnhance.Brightness(img)
-            img = enhancer.enhance(brightness)
+            img = ImageEnhance.Brightness(img).enhance(brightness)
         
         if contrast != 1.0:
-            enhancer = ImageEnhance.Contrast(img)
-            img = enhancer.enhance(contrast)
+            img = ImageEnhance.Contrast(img).enhance(contrast)
         
         if saturation != 1.0:
-            enhancer = ImageEnhance.Color(img)
-            img = enhancer.enhance(saturation)
+            img = ImageEnhance.Color(img).enhance(saturation)
         
         if sharpness != 1.0:
-            enhancer = ImageEnhance.Sharpness(img)
-            img = enhancer.enhance(sharpness)
+            img = ImageEnhance.Sharpness(img).enhance(sharpness)
         
         return img
     
     except Exception as e:
-        print(f"Erro: {e}")
+        print(f"Erro no processamento: {e}")
         return image
 
-def get_preset_values(preset_name):
-    """Retorna valores de preset"""
+def get_preset(preset_name):
+    """Retorna valores para os presets"""
     presets = {
-        'vibrant': {'brightness': 1.2, 'contrast': 1.3, 'saturation': 1.4, 'sharpness': 1.1, 'auto_contrast': False},
-        'soft': {'brightness': 1.05, 'contrast': 0.9, 'saturation': 0.8, 'sharpness': 0.9, 'auto_contrast': False},
-        'dramatic': {'brightness': 0.9, 'contrast': 1.4, 'saturation': 0.9, 'sharpness': 1.3, 'auto_contrast': False},
-        'retro': {'brightness': 1.0, 'contrast': 1.1, 'saturation': 0.6, 'sharpness': 1.0, 'auto_contrast': False},
-        'bw': {'brightness': 1.0, 'contrast': 1.2, 'saturation': 0.0, 'sharpness': 1.1, 'auto_contrast': False},
-        'reset': {'brightness': 1.0, 'contrast': 1.0, 'saturation': 1.0, 'sharpness': 1.0, 'auto_contrast': False}
+        'vibrant': (1.2, 1.3, 1.4, 1.1, False),
+        'soft': (1.05, 0.9, 0.8, 0.9, False),
+        'dramatic': (0.9, 1.4, 0.9, 1.3, False),
+        'retro': (1.0, 1.1, 0.6, 1.0, False),
+        'bw': (1.0, 1.2, 0.0, 1.1, False),
+        'reset': (1.0, 1.0, 1.0, 1.0, False)
     }
     return presets.get(preset_name, presets['reset'])
 
-def save_image_for_download(image):
+def save_image(image):
     """Salva imagem para download"""
     if image is None:
         return None
     
     try:
         temp_file = tempfile.NamedTemporaryFile(delete=False, suffix=".png", prefix="adjusted_")
-        image.save(temp_file.name, "PNG", optimize=True)
+        image.save(temp_file.name, "PNG")
         return temp_file.name
-    except:
+    except Exception as e:
+        print(f"Erro ao salvar: {e}")
         return None
 
-# ========== INTERFACE GRADIO ==========
+# ========== INTERFACE GRADIO 6.2.0 ==========
+
+# CSS customizado
+css = """
+.header {
+    text-align: center;
+    padding: 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 10px;
+    color: white;
+    margin-bottom: 20px;
+}
+.slider-container {
+    padding: 15px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    margin-bottom: 10px;
+}
+.preset-btn {
+    margin: 5px;
+}
+.image-container {
+    border: 2px solid #e0e0e0;
+    border-radius: 10px;
+    padding: 10px;
+    background: white;
+}
+.download-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-weight: bold;
+}
+.control-label {
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 5px;
+}
+"""
 
-# Criar interface sem parâmetros no construtor (compatível com Gradio 6+)
-with gr.Blocks(title="🎨 Basic Image Adjustments") as demo:
-    
-    # CSS customizado
-    demo.css = """
-    .header { text-align: center; padding: 20px; }
-    .slider-label { font-weight: bold; margin-bottom: 5px; }
-    .preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
-    .image-box { border: 1px solid #ddd; border-radius: 8px; padding: 10px; }
-    .download-btn { width: 100%; margin-top: 20px; }
-    """
+# Criar interface
+with gr.Blocks(css=css, title="🎨 Basic Image Adjustments") as demo:
     
     # Cabeçalho
     gr.HTML("""
     <div class="header">
-        <h1 style="color: #4a6fa5;">🎨 Basic Image Adjustments</h1>
-        <p style="font-size: 1.1em;"><strong>App 2 do Photoshop AI Ecosystem</strong></p>
-        <p style="color: #666;">Ajuste brilho, contraste, saturação e nitidez</p>
+        <h1 style="margin: 0;">🎨 Basic Image Adjustments</h1>
+        <p style="margin: 5px 0 0 0; opacity: 0.9;">App 2 do Photoshop AI Ecosystem</p>
+        <p style="margin: 5px 0 0 0; font-size: 0.9em;">Ajuste brilho, contraste, saturação e nitidez</p>
     </div>
     """)
     
@@ -101,86 +130,135 @@ with gr.Blocks(title="🎨 Basic Image Adjustments") as demo:
         # Coluna 1: Upload
         with gr.Column(scale=1):
             gr.Markdown("### 📤 Upload da Imagem")
-            image_input = gr.Image(type="pil", label="Clique ou arraste uma imagem", height=150)
+            image_input = gr.Image(
+                type="pil",
+                label="Clique ou arraste uma imagem",
+                height=150,
+                elem_classes="image-container"
+            )
             
-            gr.Markdown("### ⚙️ Controles")
+            gr.Markdown("### ⚙️ Controles de Ajuste")
             
-            brightness = gr.Slider(0.0, 2.0, 1.0, step=0.1, label="☀️ Brilho")
-            contrast = gr.Slider(0.0, 2.0, 1.0, step=0.1, label="🎭 Contraste")
-            saturation = gr.Slider(0.0, 2.0, 1.0, step=0.1, label="🌈 Saturação")
-            sharpness = gr.Slider(0.0, 2.0, 1.0, step=0.1, label="🔍 Nitidez")
+            with gr.Column(elem_classes="slider-container"):
+                brightness = gr.Slider(
+                    0.0, 2.0, 1.0,
+                    step=0.1,
+                    label="☀️ Brilho",
+                    info="0 = Escuro | 1 = Normal | 2 = Brilhante"
+                )
+                
+                contrast = gr.Slider(
+                    0.0, 2.0, 1.0,
+                    step=0.1,
+                    label="🎭 Contraste",
+                    info="0 = Baixo | 1 = Normal | 2 = Alto"
+                )
+                
+                saturation = gr.Slider(
+                    0.0, 2.0, 1.0,
+                    step=0.1,
+                    label="🌈 Saturação",
+                    info="0 = P&B | 1 = Normal | 2 = Intenso"
+                )
+                
+                sharpness = gr.Slider(
+                    0.0, 2.0, 1.0,
+                    step=0.1,
+                    label="🔍 Nitidez",
+                    info="0 = Borrado | 1 = Normal | 2 = Nítido"
+                )
             
-            auto_contrast = gr.Checkbox(label="⚡ Contraste Automático", value=False)
+            auto_contrast = gr.Checkbox(
+                label="⚡ Aplicar Contraste Automático",
+                value=False,
+                info="Otimiza automaticamente o contraste da imagem"
+            )
         
-        # Coluna 2: Presets
+        # Coluna 2: Presets e Visualização
         with gr.Column(scale=1):
             gr.Markdown("### 🎨 Presets Rápidos")
             
             with gr.Row():
-                vibrant_btn = gr.Button("Vibrante", variant="secondary")
-                soft_btn = gr.Button("Suave", variant="secondary")
-                dramatic_btn = gr.Button("Dramático", variant="secondary")
+                vibrant_btn = gr.Button("✨ Vibrante", variant="secondary", size="sm", min_width=100)
+                soft_btn = gr.Button("🌸 Suave", variant="secondary", size="sm", min_width=100)
+                dramatic_btn = gr.Button("🌑 Dramático", variant="secondary", size="sm", min_width=100)
             
             with gr.Row():
-                retro_btn = gr.Button("Retrô", variant="secondary")
-                bw_btn = gr.Button("P&B", variant="secondary")
-                reset_btn = gr.Button("Resetar", variant="stop")
-    
-    # Visualização
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown("### 👁️ Original")
-            original_display = gr.Image(type="pil", interactive=False, height=250, label="Original")
-        
-        with gr.Column():
-            gr.Markdown("### ✨ Ajustada")
-            processed_display = gr.Image(type="pil", interactive=False, height=250, label="Ajustada")
+                retro_btn = gr.Button("📻 Retrô", variant="secondary", size="sm", min_width=100)
+                bw_btn = gr.Button("⚫ P&B", variant="secondary", size="sm", min_width=100)
+                reset_btn = gr.Button("🔄 Resetar", variant="stop", size="sm", min_width=100)
+            
+            # Visualização
+            gr.Markdown("### 👁️ Visualização")
+            
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("**Original**")
+                    original_display = gr.Image(
+                        type="pil",
+                        interactive=False,
+                        height=200,
+                        elem_classes="image-container"
+                    )
+                
+                with gr.Column():
+                    gr.Markdown("**Ajustada**")
+                    processed_display = gr.Image(
+                        type="pil",
+                        interactive=False,
+                        height=200,
+                        elem_classes="image-container"
+                    )
     
     # Download
     with gr.Row():
         with gr.Column():
-            gr.Markdown("### 💾 Download")
-            download_btn = gr.Button("📥 Baixar Imagem Ajustada", variant="primary", size="lg")
-            download_file = gr.File(label="Arquivo para download", interactive=False)
+            gr.Markdown("### 💾 Exportação")
+            
+            with gr.Row():
+                download_btn = gr.Button(
+                    "📥 Baixar Imagem Ajustada",
+                    variant="primary",
+                    size="lg",
+                    elem_classes="download-btn"
+                )
+            
+            download_file = gr.File(
+                label="Arquivo para download",
+                interactive=False
+            )
     
     # ========== EVENT HANDLERS ==========
     
     # Quando imagem é carregada
-    def update_displays(image):
+    def update_on_load(image):
         if image is None:
             return None, None
-        return image, process_image(image, 1.0, 1.0, 1.0, 1.0, False)
+        return image, process_image(image)
     
     image_input.change(
-        fn=update_displays,
+        fn=update_on_load,
         inputs=[image_input],
         outputs=[original_display, processed_display]
     )
     
-    # Processar quando controles mudam
-    def update_processed(img, b, c, s, sh, ac):
-        return process_image(img, b, c, s, sh, ac)
+    # Quando controles mudam
+    def update_on_change(image, b, c, s, sh, ac):
+        if image is None:
+            return None
+        return process_image(image, b, c, s, sh, ac)
     
     # Conectar todos os controles
-    controls = [brightness, contrast, saturation, sharpness, auto_contrast]
-    
-    for control in controls:
+    for control in [brightness, contrast, saturation, sharpness, auto_contrast]:
         control.change(
-            fn=update_processed,
+            fn=update_on_change,
             inputs=[image_input, brightness, contrast, saturation, sharpness, auto_contrast],
             outputs=[processed_display]
         )
     
     # Presets
     def apply_preset(preset_name):
-        preset = get_preset_values(preset_name)
-        return [
-            preset['brightness'],
-            preset['contrast'],
-            preset['saturation'],
-            preset['sharpness'],
-            preset['auto_contrast']
-        ]
+        return get_preset(preset_name)
     
     vibrant_btn.click(
         fn=lambda: apply_preset('vibrant'),
@@ -214,41 +292,80 @@ with gr.Blocks(title="🎨 Basic Image Adjustments") as demo:
     
     # Download
     download_btn.click(
-        fn=save_image_for_download,
+        fn=save_image,
         inputs=[processed_display],
         outputs=[download_file]
     )
     
     # Guia de uso
-    with gr.Accordion("📖 Como usar", open=False):
+    with gr.Accordion("📖 Guia de Uso & Dicas", open=False):
         gr.Markdown("""
-        ## Instruções:
-        1. **Faça upload** de uma imagem
-        2. **Ajuste os controles** deslizantes
-        3. **Use presets** para efeitos rápidos
-        4. **Compare** original vs. ajustada
-        5. **Baixe** o resultado
+        ## 🚀 Como usar:
+        
+        1. **Faça upload** de uma imagem clicando na área acima
+        2. **Ajuste os controles** deslizantes para modificar a imagem
+        3. **Use presets** para efeitos rápidos e pré-definidos
+        4. **Compare** a imagem original com a ajustada
+        5. **Baixe** o resultado final
+        
+        ## 💡 Dicas de ajuste:
         
-        ## Dicas:
-        - **Retratos**: Brilho 1.05, Contraste 1.1, Saturação 0.9
-        - **Paisagens**: Brilho 1.1, Contraste 1.2, Saturação 1.2
-        - **Produtos**: Brilho 1.0, Contraste 1.3, Saturação 1.0
+        ### Para **Retratos**:
+        - Brilho: 1.05
+        - Contraste: 1.1
+        - Saturação: 0.9
+        - Nitidez: 1.0
         
-        ## Valores:
-        - **0.0** = Mínimo efeito
-        - **1.0** = Normal (padrão)
-        - **2.0** = Máximo efeito
+        ### Para **Paisagens**:
+        - Brilho: 1.1
+        - Contraste: 1.2
+        - Saturação: 1.2
+        - Nitidez: 1.1
+        
+        ### Para **Produtos**:
+        - Brilho: 1.0
+        - Contraste: 1.3
+        - Saturação: 1.0
+        - Nitidez: 1.2
+        
+        ## ⚙️ Sobre os controles:
+        - **Brilho**: Controla a luminosidade geral da imagem
+        - **Contraste**: Aumenta ou diminui a diferença entre cores claras e escuras
+        - **Saturação**: Controla a intensidade das cores (0 = Preto e Branco)
+        - **Nitidez**: Melhora a definição dos detalhes da imagem
+        - **Contraste Automático**: Ajusta automaticamente o contraste para melhor visualização
+        
+        ## 🎨 Sobre os presets:
+        - **Vibrante**: Realça cores para fotos de natureza e paisagens
+        - **Suave**: Tons sutis e delicados, ideal para retratos
+        - **Dramático**: Alto contraste para impacto visual
+        - **Retrô**: Efeito vintage com cores desbotadas
+        - **Preto & Branco**: Converte para escala de cinza
+        
+        ## 💾 Formato de exportação:
+        - As imagens são exportadas em formato **PNG**
+        - Qualidade máxima preservada
+        - Transparência mantida (se aplicável)
         """)
     
     # Rodapé
     gr.HTML("""
-    <div style="text-align: center; margin-top: 30px; padding: 15px; background: #f8f9fa; border-radius: 8px;">
-        <p><strong>🎨 Basic Image Adjustments</strong> - App 2 do Photoshop AI Ecosystem</p>
-        <p style="color: #666; font-size: 0.9em;">
-        Cada app tem uma função específica • Este app apenas ajusta brilho, contraste, saturação e nitidez
+    <div style="
+        text-align: center;
+        margin-top: 30px;
+        padding: 15px;
+        background: #f8f9fa;
+        border-radius: 8px;
+        border-top: 3px solid #667eea;
+    ">
+        <p style="margin: 0; font-weight: bold; color: #333;">
+            🎨 Basic Image Adjustments - App 2 do Photoshop AI Ecosystem
+        </p>
+        <p style="margin: 5px 0 0 0; font-size: 0.9em; color: #666;">
+            Cada app tem uma função específica • Este app apenas ajusta brilho, contraste, saturação e nitidez
         </p>
     </div>
     """)
 
 # ========== FIM DO APLICATIVO ==========
-# Não chame demo.launch() - O Hugging Face cuida disso
+# Nota: Não chame demo.launch() - O Hugging Face Spaces cuida disso automaticamente