Update app.py

app.py

@@ -1,186 +1,169 @@
-/* Paleta de cores */
-:root {
-    --primary-color: #4A90E2; /* Azul suave */
-    --secondary-color: #50C878; /* Verde esmeralda */
-    --background-color: #F7F9FC; /* Cinza claro */
-    --text-color: #333333; /* Preto suave */
-    --accent-color: #F5A623; /* Laranja vibrante */
-    --border-color: #DDE4E9; /* Cinza claro */
-    --hover-color: #357ABD; /* Azul mais escuro */
-}
-
-/* Estilo geral */
-body {
-    background-color: var(--background-color);
-    color: var(--text-color);
-    font-family: 'Arial', sans-serif;
-    padding: 20px;
-}
-
-/* Cabeçalho */
-.header-container {
-    display: flex;
-    align-items: center;
-    padding: 15px 25px;
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-    color: white;
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    margin-bottom: 20px;
-}
-
-.logo img {
-    width: 50px;
-    margin-right: 20px;
-}
-
-.header-text h1 {
-    margin: 0;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.header-text p {
-    margin: 5px 0 0;
-    font-size: 14px;
-}
-
-.header-text a {
-    color: var(--accent-color);
-    text-decoration: none;
-    transition: color 0.3s;
-}
-
-.header-text a:hover {
-    color: white;
-}
-
-/* Abas */
-.gr-tabs {
-    background-color: white;
-    border-radius: 10px;
-    padding: 15px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-/* Acordeões */
-.config-accordion, .instructions-accordion {
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 10px;
-    background-color: #fff;
-}
-
-.config-accordion h3, .instructions-accordion h3 {
-    color: var(--primary-color);
-    font-size: 18px;
-}
-
-/* Entrada e Saída */
-.upload-box {
-    border: 2px dashed var(--primary-color);
-    border-radius: 8px;
-    padding: 15px;
-    background-color: #fafafa;
-    transition: border-color 0.3s;
-}
-
-.upload-box:hover {
-    border-color: var(--hover-color);
-}
-
-.api-key-input, .prompt-input {
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    padding: 10px;
-    font-size: 14px;
-    transition: border-color 0.3s;
-}
-
-.api-key-input:focus, .prompt-input:focus {
-    border-color: var(--primary-color);
-    outline: none;
-}
-
-.generate-btn {
-    background-color: var(--secondary-color);
-    color: white;
-    border: none;
-    padding: 12px 25px;
-    border-radius: 6px;
-    font-weight: bold;
-    cursor: pointer;
-    transition: background-color 0.3s;
-}
-
-.generate-btn:hover {
-    background-color: #45b065;
-}
-
-.gr-button.secondary {
-    background-color: #e0e0e0;
-    color: var(--text-color);
-    padding: 12px 25px;
-    border-radius: 6px;
-}
-
-.gr-button.secondary:hover {
-    background-color: #d0d0d0;
-}
-
-/* Galeria e texto de saída */
-.output-gallery {
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 10px;
-    background-color: #fff;
-    min-height: 200px;
-}
-
-.output-text {
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    padding: 10px;
-    min-height: 100px;
-    font-size: 14px;
-    background-color: #fafafa;
-}
-
-/* Exemplos */
-.gr-examples-header {
-    color: var(--primary-color);
-    font-size: 22px;
-    margin: 20px 0 10px;
-    text-align: center;
-}
-
-#examples-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 15px;
-    padding: 10px;
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-/* Tooltips (personalizado) */
-.gr-tooltip {
-    position: relative;
-    display: inline-block;
-}
-
-.gr-tooltip:hover::after {
-    content: attr(tooltips);
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #333;
-    color: white;
-    padding: 5px 10px;
-    border-radius: 4px;
-    font-size: 12px;
-    white-space: nowrap;
-    z-index: 10;
-}
+import json
+import os
+import time
+import uuid
+import tempfile
+from PIL import Image, ImageDraw, ImageFont
+import gradio as gr
+import base64
+import mimetypes
+
+from google import genai
+from google.genai import types
+
+def save_binary_file(file_name, data):
+    with open(file_name, "wb") as f:
+        f.write(data)
+
+def generate(text, file_name, api_key, model="gemini-2.0-flash-exp"):
+    client = genai.Client(api_key=(api_key.strip() if api_key and api_key.strip() != "" else os.environ.get("GEMINI_API_KEY")))
+    
+    files = [client.files.upload(file=file_name)]
+    
+    contents = [
+        types.Content(
+            role="user",
+            parts=[
+                types.Part.from_uri(file_uri=files[0].uri, mime_type=files[0].mime_type),
+                types.Part.from_text(text=text),
+            ],
+        ),
+    ]
+    generate_content_config = types.GenerateContentConfig(
+        temperature=1,
+        top_p=0.95,
+        top_k=40,
+        max_output_tokens=8192,
+        response_modalities=["image", "text"],
+        response_mime_type="text/plain",
+    )
+
+    text_response = ""
+    image_path = None
+    with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as tmp:
+        temp_path = tmp.name
+        for chunk in client.models.generate_content_stream(model=model, contents=contents, config=generate_content_config):
+            if not chunk.candidates or not chunk.candidates[0].content or not chunk.candidates[0].content.parts:
+                continue
+            candidate = chunk.candidates[0].content.parts[0]
+            if candidate.inline_data:
+                save_binary_file(temp_path, candidate.inline_data.data)
+                print(f"Arquivo de tipo {candidate.inline_data.mime_type} salvo em: {temp_path} com prompt: {text}")
+                image_path = temp_path
+                break
+            else:
+                text_response += chunk.text + "\n"
+    
+    del files
+    return image_path, text_response
+
+def process_image_and_prompt(composite_pil, prompt, gemini_api_key):
+    try:
+        if not composite_pil:
+            raise gr.Error("Por favor, carregue uma imagem antes de gerar.", duration=5)
+        if not prompt:
+            raise gr.Error("Por favor, insira um prompt antes de gerar.", duration=5)
+        if not gemini_api_key and not os.environ.get("GEMINI_API_KEY"):
+            raise gr.Error("Por favor, forneça uma chave API Gemini ou configure a variável de ambiente GEMINI_API_KEY.", duration=10)
+        
+        with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as tmp:
+            composite_path = tmp.name
+            composite_pil.save(composite_path)
+        
+        image_path, text_response = generate(text=prompt, file_name=composite_path, api_key=gemini_api_key)
+        
+        if image_path:
+            result_img = Image.open(image_path)
+            if result_img.mode == "RGBA":
+                result_img = result_img.convert("RGB")
+            return [result_img], ""
+        else:
+            return None, text_response
+    except Exception as e:
+        raise gr.Error(f"Erro ao processar: {e}", duration=5)
+
+# Interface com Gradio
+with gr.Blocks(css="style.css", title="Gemini para Edição de Imagens") as demo:
+    gr.HTML(
+    """
+    <div class="header-container">
+        <div class="logo">
+            <img src="https://www.gstatic.com/lamda/images/gemini_favicon_f069958c85030456e93de685481c559f160ea06b.png" alt="Logo Gemini">
+        </div>
+        <div class="header-text">
+            <h1>✨ Gemini para Edição de Imagens ✨</h1>
+            <p>Desenvolvido com <a href="https://gradio.app/">Gradio</a> ⚡️ | 
+            <a href="https://huggingface.co/spaces/ameerazam08/Gemini-Image-Edit?duplicate=true">Duplique este Repositório</a> | 
+            <a href="https://aistudio.google.com/apikey">Obtenha uma Chave API</a> | 
+            Siga-me no LinkedIn: <a href="https://www.linkedin.com/in/dheiver-santos/">dheiver-santos</a></p>
+        </div>
+    </div>
+    """
+    )
+    
+    with gr.Tabs():
+        with gr.TabItem("Editar Imagem"):
+            with gr.Row():
+                with gr.Column(scale=1, min_width=300):
+                    gr.Markdown("### 📤 Entrada")
+                    image_input = gr.Image(type="pil", label="Carregar Imagem (PNG)", image_mode="RGBA", elem_classes="upload-box")
+                    gemini_api_key = gr.Textbox(lines=1, placeholder="Insira a Chave API Gemini", label="Chave API Gemini", 
+                                               elem_classes="api-key-input", type="password")
+                    prompt_input = gr.Textbox(lines=3, placeholder="Digite seu prompt aqui...", label="Prompt de Edição", 
+                                             elem_classes="prompt-input")
+                    with gr.Row():
+                        submit_btn = gr.Button("Gerar Imagem", variant="primary", elem_classes="generate-btn")
+                        clear_btn = gr.Button("Limpar", variant="secondary")
+                
+                with gr.Column(scale=2, min_width=400):
+                    gr.Markdown("### 📷 Resultado")
+                    output_gallery = gr.Gallery(label="Imagem Gerada", elem_classes="output-gallery", preview=True)
+                    output_text = gr.Textbox(label="Saída de Texto (se aplicável)", placeholder="Se nenhuma imagem for gerada, o texto aparecerá aqui.", 
+                                            elem_classes="output-text", interactive=False)
+        
+        with gr.TabItem("Instruções e Configuração"):
+            with gr.Row():
+                with gr.Column():
+                    with gr.Accordion("⚠️ Configuração da API", open=False, elem_classes="config-accordion"):
+                        gr.Markdown("""
+                        - **Problema:** ❗ Às vezes, o modelo retorna texto em vez de uma imagem.  
+                        ### 🔧 Solução:
+                        1. **🛠️ Duplique o Repositório**  
+                           - Crie uma cópia separada para modificações.  
+                        2. **🔑 Use Sua Própria Chave API Gemini**  
+                           - É **obrigatório** configurar sua chave Gemini para geração!  
+                        3. **🌐 Verifique sua conexão**  
+                           - Certifique-se de que a API está acessível.
+                        """)
+                with gr.Column():
+                    with gr.Accordion("📌 Instruções de Uso", open=False, elem_classes="instructions-accordion"):
+                        gr.Markdown("""
+                        ### 📌 Como Usar  
+                        - Faça upload de uma imagem PNG no campo à esquerda.  
+                        - Insira um prompt em inglês descrevendo a edição desejada.  
+                        - Clique em "Gerar Imagem" para processar.  
+                        - Veja o resultado na galeria ou texto abaixo.  
+                        - **Dica:** Use prompts claros como "add lipstick on lips" ou "remove the spoon".  
+                        - ❌ **Não use imagens NSFW!**
+                        """)
+    
+    gr.Markdown("### 🎨 Exemplos Práticos", elem_classes="gr-examples-header")
+    examples = [
+        ["data/1.webp", "change text to 'AMEER'", ""],
+        ["data/2.webp", "remove the spoon from hand only", ""],
+        ["data/3.webp", "change text to 'Make it'", ""],
+        ["data/1.jpg", "add joker style only on face", ""],
+        ["data/1777043.jpg", "add joker style only on face", ""],
+        ["data/2807615.jpg", "add lipstick on lip only", ""],
+        ["data/76860.jpg", "add lipstick on lip only", ""],
+        ["data/2807615.jpg", "make it happy looking face only", ""],
+    ]
+    gr.Examples(examples=examples, inputs=[image_input, prompt_input, gemini_api_key], outputs=[output_gallery, output_text],
+                fn=process_image_and_prompt, cache_examples=False, elem_id="examples-grid")
+
+    # Eventos
+    submit_btn.click(fn=process_image_and_prompt, inputs=[image_input, prompt_input, gemini_api_key], 
+                     outputs=[output_gallery, output_text])
+    clear_btn.click(fn=lambda: (None, "", "", None, ""), inputs=[], outputs=[image_input, prompt_input, gemini_api_key, output_gallery, output_text])
+
+demo.queue(max_size=50).launch()