Update app.py

app.py

@@ -357,17 +357,174 @@ def process_xml_and_transcript(premiere_xml_file, transcript_txt_file, use_llm,
     status = f"✓ Modo: {mode} | LLM disponível: {LLM_AVAILABLE} | LLM usado: {use_llm and LLM_AVAILABLE and not manual_ranges}"
     return resumo, out_path, status
 
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# 🎬 Agente de Edição XML para Premiere (Controles Avançados)")
-    gr.Markdown("Edite sua sequência do Premiere com controle total sobre a seleção de trechos.")
+css = """
+/* Design Tokens */
+:root {
+    --neon: #39FF14;
+    --txt: #0a0a0a;
+    --muted: #6b7280;
+    --line: #e5e7eb;
+    --bg: #ffffff;
+}
+
+/* Global Styles */
+.gradio-container {
+    font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
+    background: linear-gradient(135deg, rgba(57,255,20,0.03) 0%, rgba(255,255,255,1) 100%);
+    background-attachment: fixed;
+}
+
+/* Headers */
+.gradio-container h1, .gradio-container h2, .gradio-container h3 {
+    font-weight: 800 !important;
+    letter-spacing: -0.3px !important;
+    color: var(--txt) !important;
+}
+
+.gradio-container h1 {
+    font-size: clamp(28px, 5vw, 46px) !important;
+    margin-bottom: 8px !important;
+}
+
+.gradio-container .gr-prose p {
+    color: var(--muted) !important;
+    line-height: 1.65 !important;
+    font-size: 16px !important;
+}
+
+/* Buttons */
+.gradio-container button.primary {
+    background: var(--neon) !important;
+    color: #000 !important;
+    border: none !important;
+    border-radius: 10px !important;
+    font-weight: 800 !important;
+    padding: 12px 20px !important;
+    box-shadow: 0 2px 0 rgba(0,0,0,0.12), 0 10px 30px rgba(57,255,20,0.18) !important;
+    transition: all 0.2s ease !important;
+}
+
+.gradio-container button.primary:hover {
+    transform: translateY(-1px) !important;
+    filter: saturate(1.03) !important;
+}
+
+.gradio-container button:not(.primary) {
+    background: #fff !important;
+    border: 1px solid var(--line) !important;
+    border-radius: 10px !important;
+    color: var(--txt) !important;
+    font-weight: 600 !important;
+}
+
+/* Inputs, Textareas, File uploads */
+.gradio-container input, .gradio-container textarea, .gradio-container .wrap {
+    border: 1px solid var(--line) !important;
+    border-radius: 12px !important;
+    background: #fff !important;
+    transition: all 0.2s ease !important;
+}
+
+.gradio-container input:focus, .gradio-container textarea:focus {
+    border-color: #cbd5e1 !important;
+    box-shadow: 0 0 0 3px rgba(57,255,20,0.16) !important;
+}
+
+/* Cards/Panels */
+.gradio-container .block {
+    border: 1px solid var(--line) !important;
+    border-radius: 16px !important;
+    background: #fff !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
+    transition: all 0.2s ease !important;
+}
+
+.gradio-container .block:hover {
+    box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
+    transform: translateY(-1px) !important;
+}
+
+/* Accordion */
+.gradio-container .label-wrap {
+    font-weight: 700 !important;
+    color: var(--txt) !important;
+}
+
+/* Checkboxes */
+.gradio-container input[type="checkbox"]:checked {
+    background: var(--neon) !important;
+    border-color: var(--neon) !important;
+}
+
+/* Sliders */
+.gradio-container input[type="range"]::-webkit-slider-thumb {
+    background: var(--neon) !important;
+}
+
+.gradio-container input[type="range"]::-moz-range-thumb {
+    background: var(--neon) !important;
+}
+
+/* File upload areas */
+.gradio-container .upload-container {
+    border: 2px dashed var(--line) !important;
+    border-radius: 12px !important;
+    background: #fafafa !important;
+}
+
+/* Badges/Tags */
+.gradio-container .badge {
+    background: var(--neon) !important;
+    color: #000 !important;
+    font-size: 12px !important;
+    font-weight: 900 !important;
+    padding: 4px 8px !important;
+    border-radius: 999px !important;
+}
+
+/* Status indicators */
+.gradio-container .generating {
+    border-color: var(--neon) !important;
+}
+
+/* Container spacing */
+.gradio-container .contain {
+    max-width: 1120px !important;
+    margin: 0 auto !important;
+}
+"""
+
+with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
+    gr.HTML("""
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap" rel="stylesheet">
+    <div style="text-align: center; padding: 24px 0 16px;">
+        <div style="display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;">
+            <div style="width: 12px; height: 12px; border-radius: 50%; background: #39FF14; box-shadow: 0 0 20px rgba(57,255,20,0.4);"></div>
+            <h1 style="margin: 0; font-weight: 800; letter-spacing: -0.4px;">Agente de Edição XML · Premiere</h1>
+        </div>
+        <p style="color: #6b7280; max-width: 720px; margin: 0 auto; line-height: 1.65;">
+            Edite sua sequência do Premiere com <strong>controle total</strong> sobre a seleção de trechos. 
+            Modo manual ou automático com IA.
+        </p>
+    </div>
+    """)
     
     with gr.Row():
         with gr.Column():
-            xml_in = gr.File(label="📁 XML da sequência (FCP XML)", file_types=[".xml"])
-            txt_in = gr.File(label="📄 Transcrição (.txt) - Opcional se usar minutagens manuais", file_types=[".txt"])
+            gr.HTML("""<div style="background: linear-gradient(135deg, #f9fafb 0%, #fff 100%); 
+                      padding: 16px; border-radius: 16px; border: 1px solid #e5e7eb; margin-bottom: 16px;">
+                      <div style="font-weight: 700; color: #0a0a0a; margin-bottom: 8px;">📁 Arquivos de entrada</div>
+                      <p style="color: #6b7280; font-size: 14px; margin: 0;">Envie o XML exportado do Premiere e a transcrição</p>
+                      </div>""")
+            xml_in = gr.File(label="XML da sequência (FCP XML)", file_types=[".xml"])
+            txt_in = gr.File(label="Transcrição (.txt) - Opcional no modo manual", file_types=[".txt"])
         
         with gr.Column():
-            gr.Markdown("### ⚙️ Configurações")
+            gr.HTML("""<div style="background: linear-gradient(135deg, rgba(57,255,20,0.08) 0%, rgba(57,255,20,0.02) 100%); 
+                      padding: 16px; border-radius: 16px; border: 1px solid #e5e7eb; margin-bottom: 16px;">
+                      <div style="font-weight: 700; color: #0a0a0a; margin-bottom: 8px;">⚙️ Configurações básicas</div>
+                      <p style="color: #6b7280; font-size: 14px; margin: 0;">Ajuste o comportamento do processamento</p>
+                      </div>""")
             use_llm = gr.Checkbox(
                 label="🤖 Usar LLM (Gemini) para seleção semântica", 
                 value=USE_LLM_DEFAULT and LLM_AVAILABLE,
@@ -380,17 +537,27 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             )
     
     with gr.Accordion("✂️ MINUTAGENS MANUAIS (Sobrescreve tudo)", open=True):
+        gr.HTML("""<div style="background: #fffbeb; padding: 12px; border-radius: 10px; border: 1px solid #fde68a; margin-bottom: 12px;">
+                  <strong style="color: #92400e;">⚠️ Modo de Controle Total</strong>
+                  <p style="color: #78350f; font-size: 13px; margin: 6px 0 0;">
+                  Se preencher este campo, o app ignora a transcrição e todos os outros parâmetros, 
+                  cortando EXATAMENTE o que você especificou.
+                  </p>
+                  </div>""")
         manual_timecodes = gr.Textbox(
             label="Cole aqui os timecodes exatos que você quer cortar",
             placeholder="Exemplo:\n00:01:23:15 - 00:02:45:10\n00:05:30:00 - 00:07:15:22\n00:10:00:05 - 00:12:30:18",
-            lines=5,
-            info="⚠️ Se preencher este campo, o app ignora a transcrição e todos os outros parâmetros, cortando EXATAMENTE o que você especificou"
+            lines=5
         )
-        gr.Markdown("""
-        **Formatos aceitos:**
-        - `hh:mm:ss:ff - hh:mm:ss:ff` (um por linha)
-        - Pode separar por vírgula também
-        - Exemplo: `00:01:30:00 - 00:02:00:15, 00:05:10:00 - 00:06:20:10`
+        gr.HTML("""
+        <div style="padding: 12px; background: #f9fafb; border-radius: 10px; margin-top: 12px;">
+            <div style="font-weight: 600; margin-bottom: 8px; color: #0a0a0a;">Formatos aceitos:</div>
+            <ul style="margin: 0; padding-left: 20px; color: #6b7280; font-size: 13px;">
+                <li><code>hh:mm:ss:ff - hh:mm:ss:ff</code> (um por linha)</li>
+                <li>Pode separar por vírgula também</li>
+                <li>Exemplo: <code>00:01:30:00 - 00:02:00:15, 00:05:10:00 - 00:06:20:10</code></li>
+            </ul>
+        </div>
         """)
     
     with gr.Accordion("🎯 Palavras-chave Personalizadas", open=False):
@@ -401,23 +568,35 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
         )
     
     with gr.Accordion("⚖️ Ajuste Fino dos Pesos de Pontuação", open=False):
-        gr.Markdown("Ajuste a importância de cada categoria na pontuação heurística:")
+        gr.HTML("""<p style="color: #6b7280; margin-bottom: 16px;">
+                Ajuste a importância de cada categoria na pontuação heurística (modo automático)</p>""")
         with gr.Row():
-            weight_emotion = gr.Slider(0, 5, value=2.0, step=0.1, label="Emoção")
-            weight_break = gr.Slider(0, 5, value=1.5, step=0.1, label="Quebra de expectativa")
+            weight_emotion = gr.Slider(0, 5, value=2.0, step=0.1, label="😢 Emoção")
+            weight_break = gr.Slider(0, 5, value=1.5, step=0.1, label="💥 Quebra de expectativa")
         with gr.Row():
-            weight_learn = gr.Slider(0, 5, value=1.2, step=0.1, label="Aprendizado")
-            weight_viral = gr.Slider(0, 5, value=1.0, step=0.1, label="Viralização")
+            weight_learn = gr.Slider(0, 5, value=1.2, step=0.1, label="🎓 Aprendizado")
+            weight_viral = gr.Slider(0, 5, value=1.0, step=0.1, label="🚀 Viralização")
+    
+    gr.HTML("""<div style="margin: 24px 0; text-align: center;">
+              <hr style="border: none; border-top: 1px solid #e5e7eb; margin: 16px 0;">
+              </div>""")
     
     run_btn = gr.Button("🚀 Processar e Gerar XML Editado", variant="primary", size="lg")
     
-    gr.Markdown("---")
+    gr.HTML("""<div style="margin: 20px 0;">
+              <hr style="border: none; border-top: 1px solid #e5e7eb;">
+              </div>""")
+    
+    gr.HTML("""<div style="text-align: center; margin-bottom: 16px;">
+              <div style="font-weight: 700; color: #0a0a0a; margin-bottom: 4px;">📋 Resultados</div>
+              <p style="color: #6b7280; font-size: 14px; margin: 0;">Resumo dos cortes e arquivo para download</p>
+              </div>""")
     
     with gr.Row():
         with gr.Column(scale=2):
-            resumo_out = gr.Textbox(label="📋 Resumo dos cortes aplicados", lines=15)
+            resumo_out = gr.Textbox(label="Resumo dos cortes aplicados", lines=15)
         with gr.Column(scale=1):
-            status_out = gr.Textbox(label="ℹ️ Status", interactive=False)
+            status_out = gr.Textbox(label="Status", interactive=False)
             file_out = gr.File(label="💾 Download do XML Editado")
     
     run_btn.click(
@@ -427,27 +606,59 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
         outputs=[resumo_out, file_out, status_out]
     )
     
-    gr.Markdown("""
-    ### 💡 Modos de uso:
-    
-    **🎯 MODO MANUAL (Recomendado para controle total)**
-    - Preencha o campo "Minutagens Manuais" com seus timecodes exatos
-    - A transcrição se torna opcional
-    - Todos os outros parâmetros são ignorados
-    - O corte será feito EXATAMENTE como você especificou
-    
-    **🤖 MODO AUTOMÁTICO**
-    - Deixe as minutagens manuais vazias
-    - Envie a transcrição com timecodes
-    - Configure LLM, palavras-chave e pesos conforme desejado
-    - O app escolhe os melhores trechos automaticamente
-    
-    **Exemplos de minutagens manuais:**
-    ```
-    00:01:23:15 - 00:02:45:10
-    00:05:30:00 - 00:07:15:22
-    00:10:00:05 - 00:12:30:18
-    ```
+    with gr.Accordion("💡 Guia de Uso", open=False):
+        gr.HTML("""
+        <div style="padding: 16px; background: #f9fafb; border-radius: 12px;">
+            <div style="margin-bottom: 20px;">
+                <div style="display: inline-block; background: #39FF14; color: #000; padding: 4px 10px; 
+                           border-radius: 999px; font-size: 12px; font-weight: 900; margin-bottom: 8px;">
+                    MODO MANUAL
+                </div>
+                <h3 style="margin: 8px 0; font-weight: 700; color: #0a0a0a;">🎯 Controle Total</h3>
+                <ul style="color: #6b7280; line-height: 1.65; padding-left: 20px;">
+                    <li>Preencha o campo "Minutagens Manuais" com seus timecodes exatos</li>
+                    <li>A transcrição se torna opcional</li>
+                    <li>Todos os outros parâmetros são ignorados</li>
+                    <li>O corte será feito EXATAMENTE como você especificou</li>
+                </ul>
+            </div>
+            
+            <div style="margin-bottom: 20px;">
+                <div style="display: inline-block; background: #dbeafe; color: #1e40af; padding: 4px 10px; 
+                           border-radius: 999px; font-size: 12px; font-weight: 900; margin-bottom: 8px;">
+                    MODO AUTOMÁTICO
+                </div>
+                <h3 style="margin: 8px 0; font-weight: 700; color: #0a0a0a;">🤖 Seleção Inteligente</h3>
+                <ul style="color: #6b7280; line-height: 1.65; padding-left: 20px;">
+                    <li>Deixe as minutagens manuais vazias</li>
+                    <li>Envie a transcrição com timecodes</li>
+                    <li>Configure LLM, palavras-chave e pesos conforme desejado</li>
+                    <li>O app escolhe os melhores trechos automaticamente</li>
+                </ul>
+            </div>
+            
+            <div style="background: #fff; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb;">
+                <div style="font-weight: 700; color: #0a0a0a; margin-bottom: 8px;">Exemplos de minutagens manuais:</div>
+                <code style="display: block; background: #f3f4f6; padding: 10px; border-radius: 6px; 
+                           font-size: 13px; color: #374151; font-family: monospace;">
+00:01:23:15 - 00:02:45:10<br>
+00:05:30:00 - 00:07:15:22<br>
+00:10:00:05 - 00:12:30:18
+                </code>
+            </div>
+        </div>
+        """)
+    
+    gr.HTML("""
+    <footer style="margin-top: 40px; padding: 24px 0; border-top: 1px solid #e5e7eb; text-align: center;">
+        <div style="display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+            <div style="width: 10px; height: 10px; border-radius: 50%; background: #39FF14;"></div>
+            <span style="font-weight: 700; color: #0a0a0a;">Leicam · Tech</span>
+        </div>
+        <p style="color: #6b7280; font-size: 13px; margin: 0;">
+            Ferramentas práticas para produção de conteúdo
+        </p>
+    </footer>
     """)
 
 if __name__ == "__main__":