add the yt-highlights app [ci skip]
This commit is contained in:
Viktor Barzin
parent
8faf05982f
commit
8cfdc35a2b
5 changed files with 2075 additions and 0 deletions
38
modules/kubernetes/youtube_dl/yt-highlights/Dockerfile
Normal file
38
modules/kubernetes/youtube_dl/yt-highlights/Dockerfile
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
FROM nvidia/cuda:12.6.3-cudnn-runtime-ubuntu22.04
|
||||
|
||||
ENV DEBIAN_FRONTEND=noninteractive
|
||||
ENV PYTHONUNBUFFERED=1
|
||||
ENV PATH="/root/.local/bin:$PATH"
|
||||
|
||||
# Install system dependencies
|
||||
RUN apt-get update && apt-get install -y \
|
||||
python3 \
|
||||
python3-pip \
|
||||
python3-venv \
|
||||
ffmpeg \
|
||||
git \
|
||||
curl \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
|
||||
# Create app directory
|
||||
WORKDIR /app
|
||||
|
||||
# Install Python dependencies
|
||||
COPY requirements.txt .
|
||||
RUN pip3 install --no-cache-dir -r requirements.txt
|
||||
|
||||
# Copy application code
|
||||
COPY app/ ./app/
|
||||
|
||||
# Create data directories
|
||||
RUN mkdir -p /data/audio /data/transcripts /data/highlights /data/config /data/state
|
||||
|
||||
# Expose port
|
||||
EXPOSE 8000
|
||||
|
||||
# Health check
|
||||
HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
|
||||
CMD curl -f http://localhost:8000/health || exit 1
|
||||
|
||||
# Run the application
|
||||
CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]
|
||||
|
|
@ -0,0 +1 @@
|
|||
# YouTube Highlights Extraction Service
|
||||
1359
modules/kubernetes/youtube_dl/yt-highlights/app/main.py
Normal file
1359
modules/kubernetes/youtube_dl/yt-highlights/app/main.py
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,667 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>YouTube Highlights</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #0f0f0f;
|
||||
color: #f1f1f1;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1 {
|
||||
color: #ff0000;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
h1::before {
|
||||
content: "▶";
|
||||
}
|
||||
h2 {
|
||||
color: #aaa;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 15px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.section {
|
||||
background: #1a1a1a;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
input[type="text"], input[type="url"] {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
background: #0f0f0f;
|
||||
color: #f1f1f1;
|
||||
font-size: 14px;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #ff0000;
|
||||
}
|
||||
button {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #ff0000;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
button:hover {
|
||||
background: #cc0000;
|
||||
}
|
||||
button:disabled {
|
||||
background: #666;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
button.secondary {
|
||||
background: #333;
|
||||
}
|
||||
button.secondary:hover {
|
||||
background: #444;
|
||||
}
|
||||
button.danger {
|
||||
background: #333;
|
||||
color: #ff6b6b;
|
||||
padding: 6px 10px;
|
||||
font-size: 16px;
|
||||
min-width: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
button.danger:hover {
|
||||
background: #552222;
|
||||
color: #ff4444;
|
||||
}
|
||||
.channel-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.channel-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #2a2a2a;
|
||||
padding: 8px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.channel-tag .remove {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.channel-tag .remove:hover {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
.jobs-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.job-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
background: #0f0f0f;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.job-status {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.job-status.queued { background: #888; }
|
||||
.job-status.downloading { background: #3498db; animation: pulse 1s infinite; }
|
||||
.job-status.transcribing { background: #9b59b6; animation: pulse 1s infinite; }
|
||||
.job-status.analyzing { background: #f39c12; animation: pulse 1s infinite; }
|
||||
.job-status.completed { background: #5cb85c; }
|
||||
.job-status.failed { background: #d9534f; }
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
.job-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.job-title {
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.job-url {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.job-progress {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.job-progress.downloading { color: #3498db; }
|
||||
.job-progress.transcribing { color: #9b59b6; }
|
||||
.job-progress.analyzing { color: #f39c12; }
|
||||
.job-error {
|
||||
font-size: 12px;
|
||||
color: #d9534f;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.job-time {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.video-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.video-card {
|
||||
background: #0f0f0f;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-thumbnail {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
object-fit: cover;
|
||||
background: #333;
|
||||
}
|
||||
.video-content {
|
||||
padding: 15px;
|
||||
}
|
||||
.video-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-title a {
|
||||
color: #f1f1f1;
|
||||
text-decoration: none;
|
||||
}
|
||||
.video-title a:hover {
|
||||
color: #ff0000;
|
||||
}
|
||||
.video-channel {
|
||||
font-size: 13px;
|
||||
color: #aaa;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.video-summary {
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.highlights-list {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
.highlight-item {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.highlight-time {
|
||||
color: #ff0000;
|
||||
font-family: monospace;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.highlight-time a {
|
||||
color: #ff0000;
|
||||
text-decoration: none;
|
||||
}
|
||||
.highlight-time a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.tab {
|
||||
padding: 10px 20px;
|
||||
background: #1a1a1a;
|
||||
border: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tab.active {
|
||||
background: #2a2a2a;
|
||||
color: #f1f1f1;
|
||||
}
|
||||
.loading {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #333;
|
||||
border-top-color: #ff0000;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.message {
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.message.success {
|
||||
background: #1a3a1a;
|
||||
color: #5cb85c;
|
||||
}
|
||||
.message.error {
|
||||
background: #3a1a1a;
|
||||
color: #d9534f;
|
||||
}
|
||||
.health-status {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
margin-left: auto;
|
||||
}
|
||||
.health-status.healthy {
|
||||
color: #5cb85c;
|
||||
}
|
||||
.health-status.unhealthy {
|
||||
color: #d9534f;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>YouTube Highlights <span class="health-status" id="healthStatus">Checking...</span></h1>
|
||||
|
||||
<div id="message"></div>
|
||||
|
||||
<!-- Process Video Section -->
|
||||
<div class="section">
|
||||
<h2>Process a Video</h2>
|
||||
<div class="form-row">
|
||||
<input type="url" id="videoUrl" placeholder="Paste YouTube URL here..." />
|
||||
<button id="processBtn" onclick="processVideo()">Process</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Channel Subscriptions -->
|
||||
<div class="section">
|
||||
<h2>Subscribed Channels</h2>
|
||||
<div class="form-row">
|
||||
<input type="text" id="channelId" placeholder="Channel ID or @handle..." />
|
||||
<button class="secondary" onclick="addChannel()">Add Channel</button>
|
||||
<button id="checkNewBtn" onclick="checkNewVideos()">Check for New Videos</button>
|
||||
</div>
|
||||
<div class="channel-list" id="channelList">
|
||||
<div class="empty-state">No channels subscribed yet</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Jobs -->
|
||||
<div class="section">
|
||||
<h2>Processing Queue</h2>
|
||||
<div class="jobs-list" id="jobsList">
|
||||
<div class="empty-state">No active jobs</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Processed Videos -->
|
||||
<div class="section">
|
||||
<h2>Processed Videos</h2>
|
||||
<div class="video-grid" id="videoGrid">
|
||||
<div class="empty-state">No videos processed yet</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_BASE = '';
|
||||
|
||||
// Check health on load
|
||||
async function checkHealth() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/health`);
|
||||
const data = await res.json();
|
||||
const el = document.getElementById('healthStatus');
|
||||
if (data.status === 'healthy') {
|
||||
el.textContent = `Healthy (${data.model} on ${data.device})`;
|
||||
el.className = 'health-status healthy';
|
||||
} else {
|
||||
el.textContent = 'Unhealthy';
|
||||
el.className = 'health-status unhealthy';
|
||||
}
|
||||
} catch (e) {
|
||||
document.getElementById('healthStatus').textContent = 'Offline';
|
||||
document.getElementById('healthStatus').className = 'health-status unhealthy';
|
||||
}
|
||||
}
|
||||
|
||||
function showMessage(text, type = 'success') {
|
||||
const el = document.getElementById('message');
|
||||
el.innerHTML = `<div class="message ${type}">${text}</div>`;
|
||||
setTimeout(() => el.innerHTML = '', 5000);
|
||||
}
|
||||
|
||||
async function processVideo() {
|
||||
const url = document.getElementById('videoUrl').value.trim();
|
||||
if (!url) return;
|
||||
|
||||
const btn = document.getElementById('processBtn');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="loading"></span>';
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/process`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ video_url: url })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
showMessage(`Job queued: ${data.job_id}`);
|
||||
document.getElementById('videoUrl').value = '';
|
||||
loadJobs();
|
||||
} else {
|
||||
showMessage(data.detail || 'Failed to process', 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
showMessage('Failed to connect', 'error');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Process';
|
||||
}
|
||||
}
|
||||
|
||||
async function loadChannels() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/channels`);
|
||||
const data = await res.json();
|
||||
const el = document.getElementById('channelList');
|
||||
if (data.channels && data.channels.length > 0) {
|
||||
el.innerHTML = data.channels.map(ch => `
|
||||
<div class="channel-tag">
|
||||
<span>${escapeHtml(ch.name || ch.id)}</span>
|
||||
<button class="remove" onclick="removeChannel('${ch.id}')">×</button>
|
||||
</div>
|
||||
`).join('');
|
||||
} else {
|
||||
el.innerHTML = '<div class="empty-state">No channels subscribed yet</div>';
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load channels', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function addChannel() {
|
||||
const id = document.getElementById('channelId').value.trim();
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/channels`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ channel_id: id })
|
||||
});
|
||||
if (res.ok) {
|
||||
document.getElementById('channelId').value = '';
|
||||
loadChannels();
|
||||
showMessage('Channel added');
|
||||
} else {
|
||||
const data = await res.json();
|
||||
showMessage(data.detail || 'Failed to add channel', 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
showMessage('Failed to connect', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function removeChannel(id) {
|
||||
try {
|
||||
await fetch(`${API_BASE}/channels/${encodeURIComponent(id)}`, { method: 'DELETE' });
|
||||
loadChannels();
|
||||
} catch (e) {
|
||||
console.error('Failed to remove channel', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function checkNewVideos() {
|
||||
const btn = document.getElementById('checkNewBtn');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="loading"></span> Checking...';
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/auto-process`, { method: 'POST' });
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
const count = data.queued ? data.queued.length : 0;
|
||||
if (count > 0) {
|
||||
showMessage(`Found and queued ${count} new video(s) for processing`);
|
||||
} else {
|
||||
showMessage(`Checked ${data.channels_checked} channel(s) - no new videos found`);
|
||||
}
|
||||
loadJobs();
|
||||
} else {
|
||||
showMessage(data.detail || 'Failed to check for new videos', 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
showMessage('Failed to connect', 'error');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Check for New Videos';
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteJob(jobId) {
|
||||
try {
|
||||
await fetch(`${API_BASE}/jobs/${encodeURIComponent(jobId)}`, { method: 'DELETE' });
|
||||
loadJobs();
|
||||
} catch (e) {
|
||||
console.error('Failed to delete job', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadJobs() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/jobs`);
|
||||
const data = await res.json();
|
||||
const el = document.getElementById('jobsList');
|
||||
const jobs = data.jobs || [];
|
||||
|
||||
// Sort by created_at descending (newest first)
|
||||
jobs.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
|
||||
|
||||
// Filter to show only recent jobs (last 24 hours) or active ones
|
||||
const recentJobs = jobs.filter(job => {
|
||||
const isActive = ['queued', 'downloading', 'transcribing', 'analyzing'].includes(job.status);
|
||||
const age = Date.now() - new Date(job.created_at).getTime();
|
||||
const isRecent = age < 24 * 60 * 60 * 1000; // 24 hours
|
||||
return isActive || isRecent;
|
||||
});
|
||||
|
||||
if (recentJobs.length > 0) {
|
||||
el.innerHTML = recentJobs.map(job => {
|
||||
const title = job.video_title || extractVideoId(job.video_url) || 'Processing...';
|
||||
const timeAgo = formatTimeAgo(job.created_at);
|
||||
|
||||
let statusBadge = '';
|
||||
if (job.status === 'completed') {
|
||||
statusBadge = '<span style="color:#5cb85c">✓ Completed</span>';
|
||||
} else if (job.status === 'failed') {
|
||||
statusBadge = '<span style="color:#d9534f">✗ Failed</span>';
|
||||
} else {
|
||||
statusBadge = `<span style="color:#f39c12">${capitalize(job.status)}</span>`;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="job-item">
|
||||
<div class="job-status ${job.status}"></div>
|
||||
<div class="job-info">
|
||||
<div class="job-title">${escapeHtml(title)}</div>
|
||||
<div class="job-url">
|
||||
Job: ${job.job_id} | ${statusBadge}
|
||||
</div>
|
||||
${job.progress ? `<div class="job-progress ${job.status}">${escapeHtml(job.progress)}</div>` : ''}
|
||||
${job.error ? `<div class="job-error">Error: ${escapeHtml(job.error)}</div>` : ''}
|
||||
</div>
|
||||
<div class="job-time">${timeAgo}</div>
|
||||
<button class="danger" onclick="deleteJob('${job.job_id}')" title="Remove from queue">×</button>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
} else {
|
||||
el.innerHTML = '<div class="empty-state">No active jobs</div>';
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load jobs', e);
|
||||
}
|
||||
}
|
||||
|
||||
function formatTimeAgo(dateStr) {
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = Math.floor((now - date) / 1000);
|
||||
|
||||
if (diff < 60) return 'Just now';
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
|
||||
return `${Math.floor(diff / 86400)}d ago`;
|
||||
}
|
||||
|
||||
function capitalize(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
if (!str) return '';
|
||||
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
async function loadProcessed() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/processed`);
|
||||
const data = await res.json();
|
||||
const el = document.getElementById('videoGrid');
|
||||
|
||||
if (data.videos && data.videos.length > 0) {
|
||||
el.innerHTML = data.videos.map(v => {
|
||||
const highlights = v.highlights || [];
|
||||
const summary = v.summary || 'No summary available';
|
||||
const videoId = extractVideoId(v.video_url);
|
||||
|
||||
return `
|
||||
<div class="video-card">
|
||||
<img class="video-thumbnail" src="https://img.youtube.com/vi/${videoId}/mqdefault.jpg" alt="" />
|
||||
<div class="video-content">
|
||||
<div class="video-title">
|
||||
<a href="${v.video_url}" target="_blank">${escapeHtml(v.video_title || 'Untitled')}</a>
|
||||
</div>
|
||||
<div class="video-channel">${formatDuration(v.duration_seconds)}</div>
|
||||
<div class="video-summary">${escapeHtml(summary)}</div>
|
||||
${highlights.length > 0 ? `
|
||||
<div class="highlights-list">
|
||||
${highlights.slice(0, 5).map(h => `
|
||||
<div class="highlight-item">
|
||||
<span class="highlight-time">
|
||||
<a href="${v.video_url}&t=${h.timestamp_seconds || 0}" target="_blank">
|
||||
${h.timestamp || formatTime(h.timestamp_seconds)}
|
||||
</a>
|
||||
</span>
|
||||
<span>${escapeHtml(h.title || h.description || '')}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
} else {
|
||||
el.innerHTML = '<div class="empty-state">No videos processed yet</div>';
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load processed videos', e);
|
||||
}
|
||||
}
|
||||
|
||||
function formatDuration(seconds) {
|
||||
if (!seconds) return '';
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
const s = Math.floor(seconds % 60);
|
||||
if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
|
||||
return `${m}:${s.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function extractVideoId(url) {
|
||||
const match = url.match(/(?:v=|\/)([\w-]{11})(?:&|$)/);
|
||||
return match ? match[1] : '';
|
||||
}
|
||||
|
||||
function formatTime(seconds) {
|
||||
if (!seconds) return '0:00';
|
||||
const m = Math.floor(seconds / 60);
|
||||
const s = Math.floor(seconds % 60);
|
||||
return `${m}:${s.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
// Initial load
|
||||
checkHealth();
|
||||
loadChannels();
|
||||
loadJobs();
|
||||
loadProcessed();
|
||||
|
||||
// Auto-refresh
|
||||
setInterval(loadJobs, 5000);
|
||||
setInterval(loadProcessed, 30000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
10
modules/kubernetes/youtube_dl/yt-highlights/requirements.txt
Normal file
10
modules/kubernetes/youtube_dl/yt-highlights/requirements.txt
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
fastapi>=0.104.0
|
||||
uvicorn>=0.24.0
|
||||
yt-dlp==2025.12.8
|
||||
faster-whisper>=1.0.0
|
||||
httpx>=0.25.0
|
||||
requests>=2.31.0
|
||||
pydantic>=2.0.0
|
||||
python-multipart>=0.0.6
|
||||
feedparser>=6.0.0
|
||||
redis>=5.0.0
|
||||
Loading…
Add table
Add a link
Reference in a new issue