boton Como usar con guia rapida desplegable

app.py

@@ -479,6 +479,22 @@ async function hacerLogin(){
 
 <h1>Fenix Hybrid Engine</h1>
 <div class="sub">Motor de produccion asistida. La IA acelera, tu tienes el control.</div>
+<button onclick="var p=document.getElementById('panelAyuda');p.style.display=(p.style.display=='none'||!p.style.display)?'block':'none';" style="background:#ff6b00;color:#fff;border:none;padding:10px 18px;border-radius:8px;font-weight:700;cursor:pointer;margin:10px 0">Como usar (pulsa aqui)</button>
+<div id="panelAyuda" style="display:none;background:#1a1a1a;border:1px solid #ff6b00;border-radius:10px;padding:16px;margin:10px 0;line-height:1.6">
+<b>GUIA RAPIDA:</b><br><br>
+1. Sube un PDF o pega tu texto en el paso 1.<br>
+2. Elige la duracion (1 o 2 min) y el estilo. Pulsa Generar Guion.<br>
+3. Edita el guion a tu gusto si quieres.<br>
+4. Pulsa Dividir en escenas: se parte en trozos.<br>
+5. Sube tus imagenes o videos en el paso 3.<br><br>
+<b>DOS FORMAS DE MONTAR:</b><br>
+- AUTOMATICO: deja el material en automatico. El sistema reparte las imagenes solo. Ajusta los segundos de cada escena para que cuadre con la voz.<br>
+- MANUAL: asigna una imagen a cada escena y pon los segundos que quieras. El video durara lo que tu pongas.<br><br>
+6. Genera la voz y escuchala.<br>
+7. Elige subtitulos y efecto si quieres.<br>
+8. Pulsa Generar Video, espera, y descargalo.<br><br>
+<b>CONSEJO:</b> para videos cortos va rapido. Si pones mucho tiempo, tarda mas.
+</div>
 
 <div class="fase">
   <div class="fase-t">1. Ingesta de conocimiento</div>

app_backup_antes_boton_ayuda_2235.py

@@ -0,0 +1,747 @@
+import os, time, json, glob, random, asyncio, base64
+from fastapi import FastAPI, Request, UploadFile, File
+from fastapi.responses import HTMLResponse, JSONResponse, FileResponse
+from groq import Groq
+import edge_tts, requests
+
+app = FastAPI()
+
+GROQ_KEYS = [k for k in [os.environ.get("GROQ_KEY",""), os.environ.get("GROQ_KEY_2",""), os.environ.get("GROQ_KEY_3","")] if k]
+
+CLAVE_ACCESO = os.environ.get("CLAVE_ACCESO", "demo2026")
+
+def verificar_clave(clave):
+    return clave == CLAVE_ACCESO
+
+PEXELS_KEY = os.environ.get("PEXELS_KEY","")
+
+# Estado de la sesion (guarda guion editado y material entre pasos)
+ESTADO = {
+    "guion": "",
+    "archivos": [],
+    "voz_lista": False,
+    "video_listo": False,
+}
+
+ESTILOS = {
+    "narrativo": "narrativo y emocional, como contando una historia",
+    "educativo": "educativo y claro, explicando con autoridad",
+    "motivador": "motivador e inspirador, que mueva a la accion",
+    "publicitario": "publicitario y persuasivo, vendiendo sin parecer venta",
+    "misterio": "intrigante y de misterio, con ganchos de curiosidad",
+}
+
+VOCES = {
+    "es": {
+        "masculina": ["es-ES-AlvaroNeural","es-MX-JorgeNeural","es-AR-TomasNeural","es-CO-GonzaloNeural"],
+        "femenina": ["es-ES-ElviraNeural","es-MX-DaliaNeural","es-AR-ElenaNeural","es-CO-SalomeNeural"],
+    },
+    "en": {"masculina":["en-US-GuyNeural","en-GB-RyanNeural"],"femenina":["en-US-JennyNeural","en-GB-SoniaNeural"]},
+}
+
+def log(m): print(m, flush=True)
+
+# ========== GUION ==========
+def generar_guion(texto_base, estilo, duracion=60):
+    estilo_desc = ESTILOS.get(estilo, ESTILOS["narrativo"])
+    palabras = int(duracion * 2.4)
+    last_err = None
+    for k in GROQ_KEYS:
+        try:
+            client = Groq(api_key=k)
+            res = client.chat.completions.create(
+                messages=[{"role":"user","content":f"Basandote en este contenido:\n\n{texto_base}\n\nEscribe SOLO el texto a narrar en un video de {duracion} segundos (aproximadamente {palabras} palabras, IMPORTANTE: debe ser largo si la duracion es alta). Estilo: {estilo_desc}. Usa psicologia de retencion: gancho fuerte en los primeros 3 segundos, desarrollo con curiosidad, cierre con llamada a la accion. NO incluyas indicaciones tipo narrador, voz en off, intro, outro. Solo el texto a leer, sin simbolos, sin hashtags, sin emojis."}],
+                model="llama-3.3-70b-versatile", temperature=0.85
+            )
+            return res.choices[0].message.content.strip()
+        except Exception as e:
+            last_err = e
+            if "rate_limit" in str(e).lower() or "429" in str(e): continue
+            raise
+    raise last_err if last_err else Exception("Sin keys Groq")
+
+# ========== VOZ ==========
+async def generar_voz(guion, idioma="es", genero="masculina", pais=""):
+    voces = VOCES.get(idioma, VOCES["es"]).get(genero, ["es-ES-AlvaroNeural"])
+    if pais:
+        cods = {"españa":"ES","mexico":"MX","argentina":"AR","colombia":"CO","usa":"US","uk":"GB","australia":"AU"}
+        cod = cods.get(pais.lower(),"")
+        if cod:
+            filt = [v for v in voces if f"-{cod}-" in v]
+            if filt: voces = filt
+    voz_sel = random.choice(voces)
+    await edge_tts.Communicate(guion, voz_sel).save("voz.mp3")
+    return voz_sel
+
+# ========== VIDEO ==========
+def montar_video(guion, archivos, subs=None, efecto="ninguno", material_escenas=None, escenas_data=None):
+    subs = subs or {}
+    material_escenas = material_escenas or []
+    escenas_data = escenas_data or []
+    from moviepy.editor import AudioFileClip as AC, VideoFileClip as VC, ImageClip as IC, TextClip, CompositeVideoClip, concatenate_videoclips
+    from PIL import Image as PILImage, ImageFilter as PIF, ImageFile
+    ImageFile.LOAD_TRUNCATED_IMAGES = True
+
+    voz = AC("voz.mp3")
+    # Si el usuario asigno material por escena, usar ESE orden; si no, los archivos normales
+    if material_escenas:
+        fondos = [m for m in material_escenas if os.path.exists(m)]
+    else:
+        fondos = []
+    # Respaldo: si no hay fondos de escenas validos, usar el material general
+    if not fondos:
+        fondos = archivos[:8] if archivos else []
+
+    # Si no hay material propio, fondo de Pexels
+    if not fondos:
+        try:
+            h = {"Authorization": PEXELS_KEY}
+            r = requests.get("https://api.pexels.com/videos/search?query=abstract&per_page=8", headers=h)
+            for i, v in enumerate(r.json().get("videos", [])[:6]):
+                u = v["video_files"][0]["link"]
+                with open(f"fondo{i}.mp4","wb") as f: f.write(requests.get(u, timeout=30).content)
+                fondos.append(f"fondo{i}.mp4")
+        except Exception as e:
+            log(f"Error pexels: {e}")
+
+    # Duracion: si hay escenas con segundos definidos, usar la SUMA; si no, la voz
+    if escenas_data:
+        suma_seg = sum(s for m,s in escenas_data)
+        dur_total = min(suma_seg, 1200) if suma_seg > 0 else min(voz.duration, 1200)
+    else:
+        dur_total = min(voz.duration, 1200)
+
+    # Si el material son SOLO videos, usar el video entero de fondo (no trocear)
+    solo_videos = fondos and all(str(f).lower().endswith((".mp4",".mov",".webm",".avi",".mkv")) for f in fondos)
+    if solo_videos:
+        from moviepy.editor import concatenate_videoclips as _ccv
+        vclips = []
+        for fp in fondos:
+            try:
+                vc = VC(fp).without_audio()
+                vc = vc.resize(height=1920) if vc.w/vc.h > 1080/1920 else vc.resize(width=1080)
+                vc = vc.crop(x_center=vc.w/2, y_center=vc.h/2, width=1080, height=1920)
+                vclips.append(vc)
+            except Exception as e:
+                log(f"Error video {fp}: {e}")
+        if vclips:
+            base = _ccv(vclips, method="compose") if len(vclips) > 1 else vclips[0]
+            # Repetir el video en bucle hasta cubrir toda la voz
+            if base.duration < dur_total:
+                base = base.loop(duration=dur_total)
+            else:
+                base = base.subclip(0, dur_total)
+            clip = base.set_duration(dur_total)
+            voz = voz.subclip(0, min(dur_total, voz.duration))
+            _USAR_VIDEO_ENTERO = True
+        else:
+            _USAR_VIDEO_ENTERO = False
+    else:
+        _USAR_VIDEO_ENTERO = False
+
+    num_planos = max(int(dur_total / 4) + 1, len(fondos))
+    fondos_loop = (fondos * ((num_planos // max(len(fondos),1)) + 1))[:num_planos]
+    dur_clip = dur_total / num_planos
+    # Si hay escenas con segundos, cada clip dura SUS segundos
+    # Solo usar segundos por escena si hay material asignado en las escenas
+    material_en_escenas = [(m,s) for m,s in escenas_data if m and os.path.exists(m)]
+    usar_seg_escena = bool(material_en_escenas) and not _USAR_VIDEO_ENTERO
+    if usar_seg_escena:
+        fondos_loop = [m for m,s in material_en_escenas]
+        segundos_loop = [s for m,s in material_en_escenas]
+    clips = []
+    idx_clip = -1
+    for fp in (fondos_loop if not _USAR_VIDEO_ENTERO else []):
+        idx_clip += 1
+        d_este = segundos_loop[idx_clip] if usar_seg_escena and idx_clip < len(segundos_loop) else dur_clip
+        try:
+            if fp.lower().endswith((".jpg",".jpeg",".png",".webp")):
+                img = PILImage.open(fp).convert("RGB")
+                w, h = img.size
+                bg = img.resize((1080,1920), PILImage.LANCZOS).filter(PIF.GaussianBlur(40))
+                ratio = min(1080/w, 1920/h)
+                fg = img.resize((int(w*ratio), int(h*ratio)), PILImage.LANCZOS)
+                bg.paste(fg, ((1080-fg.width)//2, (1920-fg.height)//2))
+                bg.save(fp+"_r.jpg","JPEG",quality=90)
+                ic = IC(fp+"_r.jpg").set_duration(d_este)
+                if efecto in ("zoom","zoom_fundido"):
+                    ic = ic.resize(lambda t: 1 + 0.04*t).set_duration(d_este)
+                ic = ic.set_duration(d_este)
+                clips.append(ic)
+            else:
+                vclip = VC(fp).without_audio()
+                vclip = vclip.resize(height=1920) if vclip.w/vclip.h > 1080/1920 else vclip.resize(width=1080)
+                vclip = vclip.crop(x_center=vclip.w/2, y_center=vclip.h/2, width=1080, height=1920)
+                vclip = vclip.loop(duration=d_este).set_duration(d_este)
+                clips.append(vclip)
+        except Exception as e:
+            log(f"Error clip {fp}: {e}")
+
+    if not _USAR_VIDEO_ENTERO:
+        hay_video = any(str(f).lower().endswith((".mp4",".mov",".webm",".avi")) for f in fondos_loop)
+        if efecto in ("fundido","zoom_fundido") and len(clips) > 1 and not hay_video:
+            from moviepy.editor import concatenate_videoclips as _cc
+            clips_fx = [clips[0]] + [c2.crossfadein(0.5) for c2 in clips[1:]]
+            clip = _cc(clips_fx, method="compose", padding=-0.5)
+        else:
+            clip = concatenate_videoclips(clips, method="compose")
+        # MANUAL (material asignado a escenas): forzar duracion = suma de segundos exacta
+        _es_manual = bool([m for m,s in escenas_data if m and os.path.exists(m)]) if escenas_data else False
+        if _es_manual:
+            suma = sum(s for m,s in escenas_data if m and os.path.exists(m))
+            if clip.duration < suma:
+                clip = clip.set_duration(suma)
+            else:
+                clip = clip.subclip(0, suma)
+            dur_total = suma
+        else:
+            # AUTOMATICO: dura lo que suman los clips (va de lujo, no tocar)
+            dur_total = clip.duration
+        voz = voz.subclip(0, min(dur_total, voz.duration))
+
+    palabras = guion.split()
+    frases = [" ".join(palabras[i:i+6]) for i in range(0,len(palabras),6)]
+    t_f = voz.duration / max(len(frases),1)
+    sub_color = subs.get("color","#FFFFFF")
+    sub_size = {"pequeno":48,"mediano":64,"grande":80}.get(subs.get("tamano","mediano"),64)
+    sub_pos = {"arriba":0.15,"centro":0.5,"abajo":0.78}.get(subs.get("posicion","abajo"),0.78)
+    sub_activo = subs.get("activo",True)
+    if sub_activo:
+        txts = [TextClip(t.upper(), fontsize=sub_size, color=sub_color, font="/usr/share/fonts/truetype/liberation/LiberationSans-Bold.ttf",
+                stroke_color="black", stroke_width=2, method="caption", size=(int(clip.w*0.8),None)
+                ).set_start(i*t_f).set_duration(t_f).set_pos(("center",sub_pos), relative=True)
+                for i,t in enumerate(frases)]
+    else:
+        txts = []
+
+    # Mezclar musica de fondo si el cliente la subio
+    import os as _os
+    audio_final = voz
+    if _os.path.exists("musica.mp3"):
+        try:
+            from moviepy.editor import CompositeAudioClip, AudioFileClip as _AC
+            musica = _AC("musica.mp3").volumex(0.18)  # musica bajita para no tapar la voz
+            if musica.duration > voz.duration:
+                musica = musica.subclip(0, voz.duration)
+            else:
+                musica = musica.audio_loop(duration=voz.duration)
+            audio_final = CompositeAudioClip([voz.volumex(1.0), musica])
+        except Exception as _em:
+            log(f"Error mezcla musica: {_em}")
+            audio_final = voz
+    final = CompositeVideoClip([clip]+txts).set_audio(audio_final)
+    import os as _os2
+    if _os2.path.exists("preview.mp4"):
+        _os2.remove("preview.mp4")
+    final.write_videofile("preview_tmp.mp4", fps=20, codec="libx264", preset="ultrafast", logger=None, threads=4, audio_codec="aac")
+    # Renombrar solo cuando esta 100% terminado (evita cargar video a medias)
+    _os2.rename("preview_tmp.mp4", "preview.mp4")
+    return "preview.mp4"
+
+# ========== ENDPOINTS ==========
+@app.post("/login")
+async def ep_login(request: Request):
+    d = await request.json()
+    clave = d.get("clave","").strip()
+    if verificar_clave(clave):
+        return {"ok": True}
+    return JSONResponse({"error":"Clave incorrecta"}, status_code=401)
+
+@app.post("/generar-guion")
+async def ep_guion(request: Request):
+    d = await request.json()
+    texto = d.get("texto","").strip()
+    estilo = d.get("estilo","narrativo")
+    duracion = int(d.get("duracion", 60) or 60)
+    parte = d.get("parte","auto")
+    # Si hay PDF completo cargado y el usuario no edito el texto a mano, usar el trozo elegido
+    completo = ESTADO.get("texto_completo","")
+    if completo and len(completo) > 6000:
+        if parte == "principio":
+            texto = completo[:6000]
+        elif parte == "mitad":
+            m = len(completo)//2
+            texto = completo[m-3000:m+3000]
+        elif parte == "final":
+            texto = completo[-6000:]
+        else:  # auto = trozo al azar
+            import random as _r
+            ini = _r.randint(0, max(0, len(completo)-6000))
+            texto = completo[ini:ini+6000]
+    if not texto:
+        return JSONResponse({"error":"Pega tu contenido base primero"}, status_code=400)
+    try:
+        guion = generar_guion(texto, estilo, duracion)
+        ESTADO["guion"] = guion
+        return {"guion": guion}
+    except Exception as e:
+        return JSONResponse({"error": str(e)[:100]}, status_code=500)
+
+@app.post("/subir-material")
+async def ep_material(file: UploadFile = File(...)):
+    try:
+        import subprocess as _sp, os as _os
+        ext = file.filename.split(".")[-1].lower()
+        idx = len(ESTADO['archivos'])
+        if ext in ("mp4","mov","webm","avi","mkv","m4v"):
+            crudo = f"crudo_{idx}.{ext}"
+            with open(crudo,"wb") as f:
+                f.write(await file.read())
+            nombre = f"media_{idx}.mp4"
+            # Re-encodear a h264 estandar y fps fijo (arregla grabaciones de pantalla y formatos raros)
+            r = _sp.run(["ffmpeg","-y","-i",crudo,"-r","30","-c:v","libx264","-preset","ultrafast","-pix_fmt","yuv420p","-an",nombre], capture_output=True)
+            if _os.path.exists(nombre) and _os.path.getsize(nombre) > 1000:
+                try: _os.remove(crudo)
+                except: pass
+            else:
+                nombre = crudo
+        else:
+            nombre = f"media_{idx}.{ext}"
+            with open(nombre,"wb") as f:
+                f.write(await file.read())
+        ESTADO["archivos"].append(nombre)
+        return {"ok": True, "total": len(ESTADO["archivos"]), "nombre": nombre}
+    except Exception as e:
+        return JSONResponse({"error": str(e)[:100]}, status_code=500)
+
+@app.post("/generar-voz")
+async def ep_voz(request: Request):
+    d = await request.json()
+    guion = d.get("guion","").strip()
+    if not guion:
+        return JSONResponse({"error":"No hay guion"}, status_code=400)
+    ESTADO["guion"] = guion
+    try:
+        await generar_voz(guion, d.get("idioma","es"), d.get("genero","masculina"), d.get("pais",""))
+        ESTADO["voz_lista"] = True
+        return {"ok": True}
+    except Exception as e:
+        return JSONResponse({"error": str(e)[:100]}, status_code=500)
+
+
+@app.post("/subir-voz-grabada")
+async def ep_voz_grabada(file: UploadFile = File(...)):
+    try:
+        import subprocess
+        contenido = await file.read()
+        with open("voz_grabada_raw","wb") as f:
+            f.write(contenido)
+        # Convertir a mp3 con ffmpeg (el navegador graba en webm/ogg)
+        subprocess.run(["ffmpeg","-y","-i","voz_grabada_raw","-acodec","libmp3lame","voz.mp3"], capture_output=True)
+        import os as _os
+        if _os.path.exists("voz.mp3") and _os.path.getsize("voz.mp3") > 1000:
+            ESTADO["voz_lista"] = True
+            return {"ok": True}
+        return JSONResponse({"error":"No se pudo procesar el audio"}, status_code=500)
+    except Exception as e:
+        return JSONResponse({"error": str(e)[:120]}, status_code=500)
+
+
+@app.post("/subir-musica")
+async def ep_musica(file: UploadFile = File(...)):
+    try:
+        import subprocess, os as _os
+        contenido = await file.read()
+        with open("musica_raw","wb") as f:
+            f.write(contenido)
+        subprocess.run(["ffmpeg","-y","-i","musica_raw","-acodec","libmp3lame","musica.mp3"], capture_output=True)
+        if _os.path.exists("musica.mp3") and _os.path.getsize("musica.mp3") > 1000:
+            ESTADO["musica"] = True
+            return {"ok": True}
+        return JSONResponse({"error":"No se pudo procesar la musica"}, status_code=500)
+    except Exception as e:
+        return JSONResponse({"error": str(e)[:120]}, status_code=500)
+
+@app.get("/audio")
+def ep_audio():
+    if os.path.exists("voz.mp3"):
+        return FileResponse("voz.mp3", media_type="audio/mpeg")
+    return JSONResponse({"error":"sin audio"}, status_code=404)
+
+@app.post("/generar-video")
+async def ep_video(request: Request):
+    d = await request.json()
+    guion = d.get("guion","").strip() or ESTADO["guion"]
+    if not os.path.exists("voz.mp3"):
+        return JSONResponse({"error":"Genera la voz primero"}, status_code=400)
+    subs = {
+        "color": d.get("sub_color","#FFFFFF"),
+        "tamano": d.get("sub_tamano","mediano"),
+        "posicion": d.get("sub_posicion","abajo"),
+        "activo": d.get("sub_activo", True),
+    }
+    efecto = d.get("efecto","ninguno")
+    escenas = d.get("escenas", [])
+    # Lista de (material, segundos) de cada escena, en orden
+    escenas_data = [(e.get("material",""), int(e.get("segundos",5) or 5)) for e in escenas]
+    material_escenas = [m for m,s in escenas_data if m]
+    try:
+        loop = asyncio.get_event_loop()
+        await loop.run_in_executor(None, montar_video, guion, ESTADO["archivos"], subs, efecto, material_escenas, escenas_data)
+        ESTADO["video_listo"] = True
+        return {"ok": True}
+    except Exception as e:
+        import traceback
+        tb = traceback.format_exc()
+        print("ERROR VIDEO:", tb, flush=True)
+        return JSONResponse({"error": str(e)[:300]}, status_code=500)
+
+
+@app.get("/video-listo")
+def ep_video_listo():
+    import os as _os
+    if _os.path.exists("preview.mp4") and _os.path.getsize("preview.mp4") > 5000:
+        return {"listo": True, "mtime": _os.path.getmtime("preview.mp4")}
+    return {"listo": False}
+
+@app.get("/video")
+def ep_video_file():
+    if os.path.exists("preview.mp4"):
+        return FileResponse("preview.mp4", media_type="video/mp4")
+    return JSONResponse({"error":"sin video"}, status_code=404)
+
+@app.post("/reset")
+def ep_reset():
+    for f in glob.glob("media_*")+glob.glob("fondo*")+["voz.mp3","preview.mp4"]:
+        try: os.remove(f)
+        except: pass
+    ESTADO["guion"]=""; ESTADO["archivos"]=[]; ESTADO["voz_lista"]=False; ESTADO["video_listo"]=False
+    return {"ok": True}
+
+@app.post("/subir-pdf")
+async def ep_pdf(file: UploadFile = File(...)):
+    try:
+        contenido = await file.read()
+        with open("temp.pdf","wb") as f:
+            f.write(contenido)
+        from pypdf import PdfReader
+        reader = PdfReader("temp.pdf")
+        texto = ""
+        for pagina in reader.pages:
+            texto += (pagina.extract_text() or "") + "\n"
+        texto = texto.strip()
+        if not texto:
+            return JSONResponse({"error":"El PDF no tiene texto extraible (puede ser escaneado)"}, status_code=400)
+        ESTADO["texto_completo"] = texto
+        # Mostrar preview de los primeros 6000 al usuario
+        return {"ok": True, "texto": texto[:6000], "caracteres": len(texto)}
+    except Exception as e:
+        return JSONResponse({"error": str(e)[:120]}, status_code=500)
+
+# ========== INTERFAZ ==========
+@app.get("/", response_class=HTMLResponse)
+def home():
+    return """<!DOCTYPE html>
+<html lang="es"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Fenix Hybrid Engine</title>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+body{background:#0a0a0a;color:#fff;font-family:system-ui,sans-serif;padding:20px;max-width:780px;margin:0 auto;line-height:1.5}
+h1{font-size:1.8rem;background:linear-gradient(90deg,#ff6b00,#ffb700);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}
+.sub{color:#888;margin-bottom:24px;font-size:.95rem}
+.fase{background:#111;border:1px solid #222;border-radius:14px;padding:20px;margin-bottom:16px}
+.fase-t{font-size:.8rem;color:#ff8c00;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
+textarea,select,input{width:100%;background:#0a0a0a;color:#fff;border:1px solid #333;border-radius:8px;padding:12px;font-size:.95rem;font-family:inherit;margin-bottom:10px}
+textarea{min-height:90px;resize:vertical}
+button{background:linear-gradient(90deg,#ff6b00,#ffb700);color:#000;border:none;padding:14px 20px;border-radius:8px;font-weight:800;font-size:1rem;cursor:pointer;width:100%;margin-top:6px}
+button:disabled{opacity:.4}
+.btn2{background:#222;color:#fff;border:1px solid #444}
+.msg{font-size:.85rem;margin-top:8px;min-height:18px}
+audio,video{width:100%;margin-top:10px;border-radius:8px}
+.lbl{font-size:.85rem;color:#aaa;margin-bottom:6px;display:block}
+.row{display:flex;gap:8px}.row>*{flex:1}
+.tag{display:inline-block;background:#1a1a1a;color:#ff8c00;padding:2px 10px;border-radius:20px;font-size:.75rem;margin-left:6px}
+
+.spinner{display:inline-block;width:24px;height:24px;border:3px solid #333;border-top:3px solid #ffb700;border-radius:50%;animation:spin 1s linear infinite;vertical-align:middle;margin-right:8px}
+@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
+.tick{display:inline-block;width:24px;height:24px;background:#00c853;border-radius:50%;color:#fff;text-align:center;line-height:24px;font-weight:900;margin-right:8px;vertical-align:middle}
+</style></head><body>
+<div id="loginOverlay" style="position:fixed;inset:0;background:#0a0a0a;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px">
+  <div style="font-size:2rem;font-weight:800;background:linear-gradient(90deg,#ff6b00,#ffb700);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px">Fenix Hybrid Engine</div>
+  <p style="color:#888;margin-bottom:24px;font-size:.95rem">Introduce tu clave de acceso</p>
+  <input type="password" id="claveInput" placeholder="Clave de acceso" style="width:100%;max-width:300px;background:#111;color:#fff;border:1px solid #333;border-radius:10px;padding:14px;font-size:1rem;margin-bottom:12px" onkeydown="if(event.key==='Enter')hacerLogin()">
+  <button onclick="hacerLogin()" style="width:100%;max-width:300px;background:linear-gradient(135deg,#ff6b00,#ff3d00);color:#fff;border:none;padding:14px;border-radius:10px;font-weight:800;font-size:1rem;cursor:pointer">Entrar</button>
+  <div id="loginMsg" style="color:#ff5252;margin-top:12px;font-size:.9rem;min-height:18px"></div>
+</div>
+<script>
+async function hacerLogin(){
+  var clave=document.getElementById("claveInput").value;
+  var msg=document.getElementById("loginMsg");
+  msg.textContent="Comprobando...";msg.style.color="#ffb700";
+  try{
+    var r=await fetch("/login",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({clave:clave})});
+    var d=await r.json();
+    if(d.ok){document.getElementById("loginOverlay").style.display="none";}
+    else{msg.textContent="Clave incorrecta";msg.style.color="#ff5252";}
+  }catch(e){msg.textContent="Error";msg.style.color="#ff5252";}
+}
+</script>
+
+<h1>Fenix Hybrid Engine</h1>
+<div class="sub">Motor de produccion asistida. La IA acelera, tu tienes el control.</div>
+
+<div class="fase">
+  <div class="fase-t">1. Ingesta de conocimiento</div>
+  <span class="lbl">Sube un PDF (extrae el texto solo) o pega tu contenido:</span>
+  <input type="file" id="pdf" accept=".pdf" onchange="subirPdf()">
+  <div class="msg" id="msgPdf"></div>
+  <textarea id="texto" placeholder="Pega aqui tu base de conocimiento, o sube un PDF arriba..."></textarea>
+  <span class="lbl">Duracion del video:</span>
+  <select id="duracion">
+    <option value="60">1 minuto</option>
+    <option value="120">2 minutos</option>
+  </select>
+  <span class="lbl">Estilo de narrativa:</span>
+  <select id="estilo">
+    <option value="narrativo">Narrativo y emocional</option>
+    <option value="educativo">Educativo y claro</option>
+    <option value="motivador">Motivador e inspirador</option>
+    <option value="publicitario">Publicitario y persuasivo</option>
+    <option value="misterio">Misterio e intriga</option>
+  </select>
+  <span class="lbl">Que parte del documento usar (si subiste PDF largo):</span>
+  <select id="parte">
+    <option value="auto">Automatico (trozos al azar, mas variedad)</option>
+    <option value="principio">Principio del documento</option>
+    <option value="mitad">Mitad del documento</option>
+    <option value="final">Final del documento</option>
+  </select>
+  <button onclick="genGuion()">Generar Propuesta de Guion</button>
+  <div class="msg" id="msgGuion"></div>
+</div>
+
+<div class="fase">
+  <div class="fase-t">2. Edicion del guion <span class="tag">control humano</span></div>
+  <span class="lbl">Edita el guion a tu gusto antes de continuar:</span>
+  <textarea id="guion" placeholder="Aqui aparecera el guion generado, editable..."></textarea>
+  <button onclick="dividirEscenas()" style="background:#1565c0;color:#fff;border:none;padding:10px;border-radius:8px;margin-top:8px;width:100%;font-weight:600">Dividir en escenas</button>
+  <div id="escenas" style="margin-top:12px"></div>
+</div>
+
+<div class="fase">
+  <div class="fase-t">3. Tu material</div>
+  <span class="lbl">Sube tus imagenes o videos (uno a uno):</span>
+  <input type="file" id="material" accept="image/*,video/*" multiple onchange="subirMaterial()">
+  <div class="msg" id="msgMaterial">Sin material aun (usara fondos automaticos)</div>
+</div>
+
+<div class="fase">
+  <div class="fase-t">4. Voz</div>
+  <select id="tipoVoz" onchange="cambioVoz()">
+    <option value="ia">Voz IA (automatica)</option>
+    <option value="grabada">Mi voz grabada (con microfono)</option>
+  </select>
+  <div id="vozIA">
+    <div class="row">
+      <select id="genero"><option value="masculina">Voz masculina</option><option value="femenina">Voz femenina</option></select>
+      <select id="pais"><option value="">Acento neutro</option><option value="españa">Espana</option><option value="mexico">Mexico</option><option value="argentina">Argentina</option><option value="colombia">Colombia</option></select>
+    </div>
+    <button class="btn2" onclick="genVoz()">Generar y Pre-escuchar Voz</button>
+  </div>
+  <div id="vozGrabada" style="display:none">
+    <p style="color:#aaa;font-size:.85rem;margin-bottom:8px">Lee el guion de arriba en voz alta y grabate:</p>
+    <button class="btn2" id="btnRec" onclick="toggleRec()">Empezar a grabar</button>
+  </div>
+  <div class="msg" id="msgVoz"></div>
+  <audio id="player" controls style="display:none"></audio>
+  <div style="margin-top:14px;padding-top:14px;border-top:1px solid #222">
+    <span class="lbl">Musica de fondo (opcional, sonara bajita bajo la voz):</span>
+    <input type="file" id="musica" accept="audio/*" onchange="subirMusica()">
+    <div class="msg" id="msgMusica"></div>
+  </div>
+</div>
+
+<div class="fase">
+  <div class="fase-t">5. Subtitulos y Montaje</div>
+  <div class="row">
+    <select id="subActivo"><option value="si">Con subtitulos</option><option value="no">Sin subtitulos</option></select>
+    <select id="subTamano"><option value="pequeno">Pequenos</option><option value="mediano" selected>Medianos</option><option value="grande">Grandes</option></select>
+  </div>
+  <div class="row">
+    <select id="subPosicion"><option value="arriba">Arriba</option><option value="centro">Centro</option><option value="abajo" selected>Abajo</option></select>
+    <select id="subColor"><option value="#FFFFFF">Blanco</option><option value="#FFD700">Dorado</option><option value="#FFFF00">Amarillo</option><option value="#00E5FF">Cian</option><option value="#FF4081">Rosa</option><option value="#76FF03">Verde</option></select>
+  </div>
+  <span class="lbl">Efecto de video:</span>
+  <select id="efecto">
+    <option value="ninguno">Sin efecto (estatico)</option>
+    <option value="zoom">Zoom lento (Ken Burns)</option>
+    <option value="fundido">Fundido suave entre planos</option>
+    <option value="zoom_fundido">Zoom + Fundido (cinematografico)</option>
+  </select>
+  <button onclick="genVideo()">Generar Vista Previa del Video</button>
+  <button class="btn2" onclick="cargarVideo()" style="margin-top:8px">Cargar Video (cuando termine)</button>
+  <div class="msg" id="msgVideo"></div>
+  <video id="vid" controls playsinline webkit-playsinline preload="metadata" style="display:none"></video>
+</div>
+
+<div class="fase">
+  <div class="fase-t">6. Publicacion</div>
+  <button onclick="descargar()" style="background:linear-gradient(90deg,#00c853,#64dd17)">Descargar Video</button>
+  <button onclick="nuevoVideo()" style="background:#222;color:#fff;border:1px solid #444;margin-top:8px">Nuevo Video (limpiar todo)</button>
+  <button class="btn2" onclick="subirYt()" style="margin-top:8px">Conectar YouTube y Subir</button>
+  <div class="msg" id="msgPub"></div>
+</div>
+
+<script>
+var ARCHIVOS_SUBIDOS=[];
+async function subirPdf(){
+  var f=document.getElementById("pdf").files[0]; if(!f)return;
+  var m=document.getElementById("msgPdf"); m.textContent="Extrayendo texto...";m.style.color="#ffb700";
+  var fd=new FormData(); fd.append("file",f);
+  var r=await fetch("/subir-pdf",{method:"POST",body:fd}); var d=await r.json();
+  if(d.ok){document.getElementById("texto").value=d.texto;m.textContent="PDF leido: "+d.caracteres+" caracteres";m.style.color="#00c853";}
+  else{m.textContent=d.error;m.style.color="#ff5252";}
+}
+async function genGuion(){
+  var m=document.getElementById("msgGuion");m.textContent="Generando...";m.style.color="#ffb700";
+  var r=await fetch("/generar-guion",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({texto:document.getElementById("texto").value,estilo:document.getElementById("estilo").value,parte:document.getElementById("parte").value,duracion:document.getElementById("duracion").value})});
+  var d=await r.json();
+  if(d.guion){document.getElementById("guion").value=d.guion;m.textContent="Guion listo. Editalo abajo si quieres.";m.style.color="#00c853";}
+  else{m.textContent=d.error;m.style.color="#ff5252";}
+}
+async function subirMaterial(){
+  var files=document.getElementById("material").files; if(!files.length)return;
+  var m=document.getElementById("msgMaterial");
+  var total=0;
+  for(var i=0;i<files.length;i++){
+    m.textContent="Subiendo "+(i+1)+" de "+files.length+"...";m.style.color="#ffb700";
+    var fd=new FormData(); fd.append("file",files[i]);
+    var r=await fetch("/subir-material",{method:"POST",body:fd}); var d=await r.json();
+    if(d.ok){total=d.total; if(d.nombre){ARCHIVOS_SUBIDOS.push(d.nombre);}}
+  }
+  m.textContent=total+" archivo(s) subido(s) en total";m.style.color="#00c853";
+}
+async function genVoz(){
+  var m=document.getElementById("msgVoz");m.textContent="Generando voz...";m.style.color="#ffb700";
+  var guionFinal=document.getElementById("guion").value;
+  var esc=recolectarEscenas();
+  if(esc.length>0){
+    var textos=[];
+    for(var k=0;k<esc.length;k++){ if(esc[k].texto){textos.push(esc[k].texto);} }
+    if(textos.length>0){guionFinal=textos.join(". ");}
+  }
+  var r=await fetch("/generar-voz",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({guion:guionFinal,genero:document.getElementById("genero").value,pais:document.getElementById("pais").value})});
+  var d=await r.json();
+  if(d.ok){var p=document.getElementById("player");p.src="/audio?t="+Date.now();p.style.display="block";m.textContent="Voz lista, escuchala:";m.style.color="#00c853";}
+  else{m.textContent=d.error;m.style.color="#ff5252";}
+}
+var pollTimer=null;
+function recolectarEscenas(){
+  var items=document.getElementsByClassName("escenaItem");
+  var lista=[];
+  for(var i=0;i<items.length;i++){
+    var sel=items[i].getElementsByClassName("selMaterial")[0];
+    var mat=sel?sel.value:"";
+    var seg=items[i].getElementsByClassName("segEscena")[0];
+    var segs=seg?parseInt(seg.value):5;
+    if(!segs||segs<1){segs=5;}
+    var txt=items[i].getElementsByClassName("txtEscena")[0];
+    var texto=txt?txt.value:"";
+    lista.push({material:mat,segundos:segs,texto:texto});
+  }
+  return lista;
+}
+async function genVideo(){
+  var m=document.getElementById("msgVideo");
+  m.innerHTML="<span class=\'spinner\'></span> Montando video...";m.style.color="#ffb700";
+  // Lanzar el render sin esperar la respuesta (evita timeout)
+  fetch("/generar-video",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({
+    guion:document.getElementById("guion").value,
+    sub_activo:document.getElementById("subActivo").value==="si",
+    sub_tamano:document.getElementById("subTamano").value,
+    sub_posicion:document.getElementById("subPosicion").value,
+    sub_color:document.getElementById("subColor").value,
+    efecto:document.getElementById("efecto").value,
+    escenas:recolectarEscenas()
+  })}).catch(e=>{});
+  // Comprobar cada 4 segundos si el video esta listo
+  var inicio=Date.now();
+  if(pollTimer)clearInterval(pollTimer);
+  pollTimer=setInterval(async()=>{
+    try{
+      var r=await fetch("/video-listo?t="+Date.now());var d=await r.json();
+      if(d.listo && d.mtime*1000 > inicio){
+        clearInterval(pollTimer);
+        var u="/video?t="+Date.now();
+        var v=document.getElementById("vid");v.src=u;v.style.display="block";v.load();
+        m.innerHTML="<span class=\'tick\'>✓</span> Video listo! <a href=\'"+u+"\' target=\'_blank\' style=\'display:inline-block;background:#00E5FF;color:#000;padding:10px 18px;border-radius:8px;text-decoration:none;font-weight:800;margin-top:8px\'>▶ VER VIDEO</a>";
+        m.style.color="#00c853";
+      }
+    }catch(e){}
+  },4000);
+}
+async function subirMusica(){
+  var f=document.getElementById("musica").files[0]; if(!f)return;
+  var m=document.getElementById("msgMusica");m.textContent="Subiendo musica...";m.style.color="#ffb700";
+  var fd=new FormData(); fd.append("file",f);
+  var r=await fetch("/subir-musica",{method:"POST",body:fd}); var d=await r.json();
+  if(d.ok){m.textContent="✅ Musica anadida, sonara de fondo";m.style.color="#00c853";}
+  else{m.textContent="❌ "+(d.error||"Error");m.style.color="#ff5252";}
+}
+function cargarVideo(){
+  var u="/video?t="+Date.now();
+  var v=document.getElementById("vid");v.src=u;v.style.display="block";v.load();
+  var m=document.getElementById("msgVideo");
+  m.innerHTML="▶ <a href=\'"+u+"\' target=\'_blank\' style=\'color:#00E5FF;font-weight:800\'>VER VIDEO EN PANTALLA COMPLETA</a>";
+  m.style.color="#00c853";
+}
+async function nuevoVideo(){
+  if(!confirm("Esto borra el material, la voz y el video actual para empezar de cero. Continuar?"))return;
+  try{
+    await fetch("/reset",{method:"POST"});
+    location.reload();
+  }catch(e){alert("Error al limpiar");}
+}
+function descargar(){var a=document.createElement("a");a.href="/video?t="+Date.now();a.download="video_fenix.mp4";a.click();}
+function dividirEscenas(){
+  var t=document.getElementById("guion").value;
+  var sep=String.fromCharCode(10)+String.fromCharCode(10);
+  var bloques=t.split(sep);
+  var cont=document.getElementById("escenas");
+  var html="";
+  var n=0;
+  for(var i=0;i<bloques.length;i++){
+    var b=bloques[i].trim();
+    if(b==""){continue;}
+    n++;
+    var opciones="<option value=>-- material automatico --</option>";
+    for(var j=0;j<ARCHIVOS_SUBIDOS.length;j++){ opciones+="<option value="+ARCHIVOS_SUBIDOS[j]+">"+ARCHIVOS_SUBIDOS[j]+"</option>"; }
+    html+="<div class=escenaItem><b>Escena "+n+"</b><br><textarea class=txtEscena style=width:100%;min-height:50px;background:#111;color:#fff;border:1px solid #333;border-radius:6px;padding:6px>"+b+"</textarea><br><select class=selMaterial>"+opciones+"</select> <input type=number class=segEscena min=1 value=5 style=width:70px> seg</div>";
+  }
+  if(n==0){html="<div style=color:#888>Separa los parrafos con una linea en blanco</div>";}
+  cont.innerHTML=html;
+}
+async function subirYt(){var m=document.getElementById("msgPub");m.textContent="Conecta tu canal de YouTube para activar la subida automatica";m.style.color="#ffb700";}
+
+function cambioVoz(){
+  var t=document.getElementById("tipoVoz").value;
+  document.getElementById("vozIA").style.display=t==="ia"?"block":"none";
+  document.getElementById("vozGrabada").style.display=t==="grabada"?"block":"none";
+}
+var mediaRec=null, chunks=[], grabando=false;
+async function toggleRec(){
+  var btn=document.getElementById("btnRec"); var m=document.getElementById("msgVoz");
+  if(!grabando){
+    try{
+      var stream=await navigator.mediaDevices.getUserMedia({audio:true});
+      mediaRec=new MediaRecorder(stream); chunks=[];
+      mediaRec.ondataavailable=e=>chunks.push(e.data);
+      mediaRec.onstop=async()=>{
+        var blob=new Blob(chunks,{type:"audio/webm"});
+        m.textContent="Subiendo tu voz...";m.style.color="#ffb700";
+        var fd=new FormData(); fd.append("file",blob,"voz.webm");
+        var r=await fetch("/subir-voz-grabada",{method:"POST",body:fd}); var d=await r.json();
+        if(d.ok){var p=document.getElementById("player");p.src="/audio?t="+Date.now();p.style.display="block";m.textContent="✅ Tu voz lista, escuchala:";m.style.color="#00c853";}
+        else{m.textContent="❌ "+(d.error||"Error");m.style.color="#ff5252";}
+      };
+      mediaRec.start(); grabando=true;
+      btn.textContent="⏹ Detener grabacion"; btn.style.background="#ff4444";
+      m.textContent="Grabando... lee el guion";m.style.color="#ff4444";
+    }catch(e){m.textContent="❌ No se pudo acceder al microfono";m.style.color="#ff5252";}
+  }else{
+    mediaRec.stop(); grabando=false;
+    btn.textContent="Empezar a grabar"; btn.style.background="";
+  }
+}
+</script>
+</body></html>"""