Initial clean commit

This commit is contained in:
jlimolina 2026-01-13 13:39:51 +01:00
commit 6784d81c2c
141 changed files with 25219 additions and 0 deletions

View file

@ -0,0 +1,271 @@
{% extends "base.html" %}
{% block title %}{{ parrilla.nombre }}{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<div class="header-content">
<h1>🎬 {{ parrilla.nombre }}</h1>
<span class="badge {% if parrilla.activo %}badge-success{% else %}badge-secondary{% endif %}">
{% if parrilla.activo %}Activa{% else %}Inactiva{% endif %}
</span>
</div>
<div class="header-actions">
<button onclick="generarVideo({{ parrilla.id }})" class="btn btn-primary">▶ Generar Video Ahora</button>
<a href="{{ url_for('parrillas.index') }}" class="btn btn-secondary">Volver</a>
</div>
</div>
<div class="grid-layout">
<!-- Sidebar Info -->
<div class="sidebar">
<div class="info-card">
<h3>Configuración</h3>
<p class="desc">{{ parrilla.descripcion }}</p>
<ul class="info-list">
<li><strong>Tipo:</strong> {{ parrilla.tipo_filtro }}</li>
{% if parrilla.pais_nombre %}
<li><strong>País:</strong> {{ parrilla.pais_nombre }}</li>
{% endif %}
{% if parrilla.categoria_nombre %}
<li><strong>Categoría:</strong> {{ parrilla.categoria_nombre }}</li>
{% endif %}
<li><strong>Máx. Noticias:</strong> {{ parrilla.max_noticias }}</li>
<li><strong>Frecuencia:</strong> {{ parrilla.frecuencia }}</li>
<li><strong>Idioma:</strong> {{ parrilla.idioma_voz }}</li>
<li><strong>Subtítulos:</strong> {% if parrilla.include_subtitles %}Sí{% else %}No{% endif %}</li>
<li><strong>Última Gen:</strong> {{ parrilla.ultima_generacion or 'Nunca' }}</li>
</ul>
</div>
<div class="preview-card">
<h3>📰 Preview Contenido</h3>
<div id="preview-list">Cargando noticias...</div>
</div>
</div>
<!-- Main Content -->
<div class="main-content">
<h2>Videos Generados</h2>
{% if videos %}
<div class="videos-list">
{% for video in videos %}
<div class="video-item status-{{ video.status }}">
<div class="video-info">
<h4>{{ video.titulo }}</h4>
<span class="date">{{ video.fecha_generacion }}</span>
<span class="status-badge {{ video.status }}">{{ video.status }}</span>
{% if video.error_message %}
<p class="error-msg">{{ video.error_message }}</p>
{% endif %}
</div>
<div class="video-actions">
{% if video.status == 'completed' %}
<audio controls style="height: 30px; margin-right: 10px;">
<source src="{{ url_for('parrillas.serve_file', video_id=video.id, filename='audio.wav') }}"
type="audio/wav">
Tu navegador no soporta audio.
</audio>
<a href="{{ url_for('parrillas.serve_file', video_id=video.id, filename='script.txt') }}"
target="_blank" class="btn btn-sm btn-outline">📝 Ver Script</a>
<a href="{{ url_for('parrillas.serve_file', video_id=video.id, filename='audio.wav') }}"
download class="btn btn-sm btn-outline">📥 Bajar Audio</a>
{% endif %}
<button onclick="verLog({{ video.id }})" class="btn btn-sm btn-outline">📜 Ver Log</button>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="empty-state">
<p>No se han generado videos todavía.</p>
</div>
{% endif %}
</div>
</div>
</div>
<!-- Log Modal -->
<div id="logModal" class="modal"
style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000;">
<div class="modal-content"
style="background:var(--paper-color); margin:10% auto; padding:20px; width:80%; max-width:800px; border-radius:10px; position:relative;">
<span onclick="document.getElementById('logModal').style.display='none'"
style="position:absolute; top:10px; right:15px; cursor:pointer; font-size:24px;">&times;</span>
<h3>Log de Generación</h3>
<pre id="logContent"
style="background:#1e1e1e; color:#d4d4d4; padding:15px; border-radius:5px; overflow:auto; max-height:500px; font-family:monospace;"></pre>
</div>
</div>
<style>
.grid-layout {
display: grid;
grid-template-columns: 350px 1fr;
gap: 30px;
margin-top: 20px;
}
.info-card,
.preview-card {
background: var(--paper-color);
padding: 20px;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.info-card h3,
.preview-card h3 {
margin-top: 0;
border-bottom: 2px solid var(--accent-color);
padding-bottom: 10px;
margin-bottom: 15px;
}
.info-list {
list-style: none;
padding: 0;
}
.info-list li {
padding: 8px 0;
border-bottom: 1px solid var(--border-color);
}
.videos-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.video-item {
background: var(--paper-color);
padding: 15px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
border-left: 4px solid transparent;
}
.video-item.status-completed {
border-left-color: #28a745;
}
.video-item.status-error {
border-left-color: #dc3545;
}
.video-item.status-processing {
border-left-color: #ffc107;
}
.status-badge {
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8em;
text-transform: uppercase;
font-weight: bold;
}
.status-badge.completed {
background: #d4edda;
color: #155724;
}
.status-badge.error {
background: #f8d7da;
color: #721c24;
}
.status-badge.processing {
background: #fff3cd;
color: #856404;
}
.preview-item {
padding: 10px;
background: rgba(0, 0, 0, 0.02);
margin-bottom: 10px;
border-radius: 6px;
font-size: 0.9em;
}
.btn-sm {
padding: 4px 8px;
font-size: 0.85em;
}
@media (max-width: 768px) {
.grid-layout {
grid-template-columns: 1fr;
}
}
</style>
<script>
async function loadPreview() {
try {
const res = await fetch(`/parrillas/api/{{ parrilla.id }}/preview`);
const data = await res.json();
const container = document.getElementById('preview-list');
if (data.noticias && data.noticias.length > 0) {
container.innerHTML = data.noticias.map(n => `
<div class="preview-item">
<strong>${n.titulo_trad || n.titulo}</strong><br>
<small>${n.fecha}</small>
</div>
`).join('');
} else {
container.innerHTML = '<p>No hay noticias recientes que coincidan con los filtros.</p>';
}
} catch (e) {
console.error(e);
document.getElementById('preview-list').innerHTML = 'Error cargando preview.';
}
}
async function generarVideo(id) {
if (!confirm('¿Generar nuevo video?')) return;
try {
const res = await fetch(`/parrillas/api/${id}/generar`, { method: 'POST' });
const data = await res.json();
if (data.success) {
location.reload();
} else {
alert('Error: ' + data.message);
}
} catch (e) {
alert('Error de conexión');
}
}
async function verLog(id) {
const modal = document.getElementById('logModal');
const content = document.getElementById('logContent');
content.textContent = "Cargando log...";
modal.style.display = 'block';
try {
const res = await fetch(`/parrillas/files/${id}/generation.log`);
if (res.ok) {
const text = await res.text();
content.textContent = text || "Log vacío.";
} else {
content.textContent = "No se pudo cargar el log. (Posiblemente el video es antiguo o falló antes de crear logs).";
}
} catch (e) {
content.textContent = "Error de conexión al cargar log.";
}
}
// Init
loadPreview();
</script>
{% endblock %}
```

View file

@ -0,0 +1,237 @@
{% extends "base.html" %}
{% block title %}Nueva Parrilla{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>🎬 Nueva Parrilla de Video</h1>
<p>Configura un resumen automático de noticias</p>
</div>
<div class="form-card">
<form method="POST" action="{{ url_for('parrillas.nueva') }}">
<div class="form-group">
<label for="nombre">Nombre de la Parrilla*</label>
<input type="text" id="nombre" name="nombre" required placeholder="Ej: Noticias de Bulgaria"
class="form-control">
</div>
<div class="form-group">
<label for="descripcion">Descripción</label>
<textarea id="descripcion" name="descripcion" rows="3" class="form-control"
placeholder="Descripción opcional..."></textarea>
</div>
<hr>
<h3>Filtros de Contenido</h3>
<div class="form-group">
<label for="tipo_filtro">Tipo de Filtro*</label>
<select id="tipo_filtro" name="tipo_filtro" class="form-control" onchange="toggleFiltros()">
<option value="pais">Por País</option>
<option value="categoria">Por Categoría</option>
<option value="entidad">Por Persona/Organización</option>
<option value="custom">Personalizado</option>
</select>
</div>
<div id="filtro_pais" class="filtro-section">
<div class="form-group">
<label for="pais_id">País</label>
<select id="pais_id" name="pais_id" class="form-control">
<option value="">Seleccionar País...</option>
{% for p in paises %}
<option value="{{ p.id }}">{{ p.nombre }}</option>
{% endfor %}
</select>
</div>
</div>
<div id="filtro_categoria" class="filtro-section" style="display:none">
<div class="form-group">
<label for="categoria_id">Categoría</label>
<select id="categoria_id" name="categoria_id" class="form-control">
<option value="">Seleccionar Categoría...</option>
{% for c in categorias %}
<option value="{{ c.id }}">{{ c.nombre }}</option>
{% endfor %}
</select>
</div>
</div>
<div id="filtro_entidad" class="filtro-section" style="display:none">
<div class="form-row">
<div class="form-group col-md-8">
<label for="entidad_nombre">Nombre Entidad</label>
<input type="text" id="entidad_nombre" name="entidad_nombre" class="form-control"
placeholder="Ej: Donald Trump">
</div>
<div class="form-group col-md-4">
<label for="entidad_tipo">Tipo</label>
<select id="entidad_tipo" name="entidad_tipo" class="form-control">
<option value="persona">Persona</option>
<option value="organizacion">Organización</option>
</select>
</div>
</div>
</div>
<hr>
<h3>Configuración de Generación</h3>
<div class="form-row">
<div class="form-group col-md-6">
<label for="max_noticias">Máx. Noticias</label>
<input type="number" id="max_noticias" name="max_noticias" value="5" min="1" max="20"
class="form-control">
</div>
<div class="form-group col-md-6">
<label for="duracion_maxima">Duración Máx. (segundos)</label>
<input type="number" id="duracion_maxima" name="duracion_maxima" value="180" class="form-control">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="idioma_voz">Idioma Voz</label>
<select id="idioma_voz" name="idioma_voz" class="form-control">
<option value="es">Español</option>
<option value="en">Inglés</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="frecuencia">Frecuencia</label>
<select id="frecuencia" name="frecuencia" class="form-control">
<option value="manual">Manual</option>
<option value="daily">Diaria</option>
<option value="weekly">Semanal</option>
</select>
</div>
</div>
<div class="form-group checkbox-group">
<label>
<input type="checkbox" name="include_images" checked> Incluir Imágenes
</label>
<label>
<input type="checkbox" name="include_subtitles" checked> Generar Subtítulos
</label>
<label>
<input type="checkbox" name="activo" checked> Activa
</label>
</div>
<div class="form-actions">
<a href="{{ url_for('parrillas.index') }}" class="btn btn-secondary">Cancelar</a>
<button type="submit" class="btn btn-primary">Crear Parrilla</button>
</div>
</form>
</div>
</div>
<style>
.form-card {
background: var(--paper-color);
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
max-width: 800px;
margin: 0 auto;
}
.form-group {
margin-bottom: 20px;
}
.form-row {
display: flex;
gap: 20px;
}
.col-md-6 {
flex: 0 0 calc(50% - 10px);
}
.col-md-8 {
flex: 0 0 calc(66.66% - 10px);
}
.col-md-4 {
flex: 0 0 calc(33.33% - 10px);
}
label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-control {
width: 100%;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 6px;
background: rgba(255, 255, 255, 0.9);
font-size: 1rem;
}
.checkbox-group {
display: flex;
gap: 20px;
margin-top: 10px;
}
.form-actions {
margin-top: 30px;
display: flex;
justify-content: flex-end;
gap: 15px;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
text-decoration: none;
transition: all 0.2s;
}
.btn-primary {
background: var(--accent-color);
color: white;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn:hover {
opacity: 0.9;
transform: translateY(-1px);
}
hr {
margin: 30px 0;
border: none;
border-top: 1px solid var(--border-color);
}
</style>
<script>
function toggleFiltros() {
const tipo = document.getElementById('tipo_filtro').value;
document.querySelectorAll('.filtro-section').forEach(el => el.style.display = 'none');
if (tipo === 'pais') document.getElementById('filtro_pais').style.display = 'block';
if (tipo === 'categoria') document.getElementById('filtro_categoria').style.display = 'block';
if (tipo === 'entidad') document.getElementById('filtro_entidad').style.display = 'block';
}
// Init
toggleFiltros();
</script>
{% endblock %}

View file

@ -0,0 +1,245 @@
{% extends "base.html" %}
{% block title %}Parrillas de Videos{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>🎬 Parrillas de Videos Automatizados</h1>
<p>Genera videos automáticos de noticias filtradas por país, categoría o entidad</p>
<a href="{{ url_for('parrillas.nueva') }}" class="btn btn-primary"> Nueva Parrill</a>
</div>
{% if parrillas %}
<div class="parrillas-grid">
{% for p in parrillas %}
<div class="parrilla-card">
<div class="card-header">
<h3>{{ p.nombre }}</h3>
<span class="badge {% if p.activo %}badge-success{% else %}badge-secondary{% endif %}">
{% if p.activo %}Activa{% else %}Inactiva{% endif %}
</span>
</div>
<div class="card-body">
<p class="description">{{ p.descripcion or 'Sin descripción' }}</p>
<div class="metadatos">
<div class="meta-item">
<strong>Tipo:</strong> {{ p.tipo_filtro }}
</div>
{% if p.pais_nombre %}
<div class="meta-item">
<strong>País:</strong> {{ p.pais_nombre }}
</div>
{% endif %}
{% if p.categoria_nombre %}
<div class="meta-item">
<strong>Categoría:</strong> {{ p.categoria_nombre }}
</div>
{% endif %}
{% if p.entidad_nombre %}
<div class="meta-item">
<strong>Entidad:</strong> {{ p.entidad_nombre }} ({{ p.entidad_tipo }})
</div>
{% endif %}
<div class="meta-item">
<strong>Videos generados:</strong> {{ p.total_videos }}
</div>
<div class="meta-item">
<strong>Frecuencia:</strong> {{ p.frecuencia }}
</div>
</div>
</div>
<div class="card-footer">
<a href="{{ url_for('parrillas.ver', id=p.id) }}" class="btn btn-secondary">Ver Detalles</a>
<button onclick="toggleParrilla({{ p.id }})" class="btn btn-warning">
{% if p.activo %}Desactivar{% else %}Activar{% endif %}
</button>
<button onclick="generarVideo({{ p.id }})" class="btn btn-success">Generar Video</button>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="empty-state">
<p>No hay parrillas configuradas.</p>
<a href="{{ url_for('parrillas.nueva') }}" class="btn btn-primary">Crear tu primera parrilla</a>
</div>
{% endif %}
</div>
<style>
.parrillas-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 20px;
margin-top: 30px;
}
.parrilla-card {
background: var(--paper-color);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.2s;
}
.parrilla-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.card-header {
background: var(--accent-color);
color: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-header h3 {
margin: 0;
font-size: 1.2em;
}
.badge {
padding: 4px 12px;
border-radius: 12px;
font-size: 0.85em;
font-weight: bold;
}
.badge-success {
background: #28a745;
}
.badge-secondary {
background: #6c757d;
}
.card-body {
padding: 20px;
}
.description {
color: var(--text-secondary);
margin-bottom: 15px;
font-style: italic;
}
.metadatos {
display: grid;
gap: 8px;
}
.meta-item {
font-size: 0.9em;
padding: 6px;
background: rgba(0, 0, 0, 0.03);
border-radius: 4px;
}
.card-footer {
padding: 15px 20px;
border-top: 1px solid var(--border-color);
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.btn {
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: all 0.2s;
text-decoration: none;
display: inline-block;
}
.btn-primary {
background: var(--accent-color);
color: white;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-warning {
background: #ffc107;
color: black;
}
.btn-success {
background: #28a745;
color: white;
}
.btn:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-secondary);
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 15px;
}
.page-header h1 {
margin: 0;
}
.page-header p {
color: var(--text-secondary);
margin: 5px 0;
}
</style>
<script>
async function toggleParrilla(id) {
try {
const res = await fetch(`/parrillas/api/${id}/toggle`, { method: 'POST' });
const data = await res.json();
if (data.success) {
location.reload();
} else {
alert('Error al cambiar estado');
}
} catch (e) {
alert('Error: ' + e.message);
}
}
async function generarVideo(id) {
if (!confirm('¿Generar nuevo video para esta parrilla?')) return;
try {
const res = await fetch(`/parrillas/api/${id}/generar`, { method: 'POST' });
const data = await res.json();
if (data.success) {
alert('Video en cola para generación!');
} else {
alert('Error: ' + (data.error || 'Unknown error'));
}
} catch (e) {
alert('Error: ' + e.message);
}
}
</script>
{% endblock %}