725 lines
No EOL
31 KiB
HTML
725 lines
No EOL
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="KV-Tube">
|
|
<meta name="theme-color" content="#0f0f0f">
|
|
<title>KV-Tube</title>
|
|
<link rel="icon" type="image/svg+xml"
|
|
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ff0000' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z'/%3E%3C/svg%3E">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="{{ request.url }}">
|
|
<meta property="og:title" content="KV-Tube - Video Streaming">
|
|
<meta property="og:description" content="Stream your favorite videos on KV-Tube.">
|
|
<meta property="og:image" content="{{ url_for('static', filename='og-image.jpg', _external=True) }}">
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/modules/downloads.css') }}">
|
|
<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
|
|
<script>
|
|
// Suppress expected browser/extension errors to clean console
|
|
// These errors are from YouTube API limitations and browser extensions
|
|
// and don't affect KV-Tube functionality
|
|
(function () {
|
|
const suppressedPatterns = [
|
|
/onboarding\.js/,
|
|
/content-script\.js/,
|
|
/timedtext.*CORS/,
|
|
/Too Many Requests/,
|
|
/ERR_FAILED/,
|
|
/Failed to fetch/,
|
|
/CORS policy/,
|
|
/WidgetId/,
|
|
/Banner not shown/,
|
|
/beforeinstallpromptevent/,
|
|
/Transcript error/,
|
|
/Transcript disabled/,
|
|
/Could not load transcript/,
|
|
/Client Error/,
|
|
/youtube\.com\/api\/timedtext/,
|
|
/Uncaught \(in promise\)/,
|
|
/Promise\.then/,
|
|
/createOnboardingFrame/
|
|
];
|
|
|
|
// Override console.error
|
|
const originalError = console.error;
|
|
console.error = function (...args) {
|
|
const message = args.join(' ');
|
|
const shouldSuppress = suppressedPatterns.some(pattern => pattern.test(message));
|
|
if (!shouldSuppress) {
|
|
originalError.apply(console, args);
|
|
}
|
|
};
|
|
|
|
// Override console.warn
|
|
const originalWarn = console.warn;
|
|
console.warn = function (...args) {
|
|
const message = args.join(' ');
|
|
const shouldSuppress = suppressedPatterns.some(pattern => pattern.test(message));
|
|
if (!shouldSuppress) {
|
|
originalWarn.apply(console, args);
|
|
}
|
|
};
|
|
|
|
// Override console.log (for transcript errors)
|
|
const originalLog = console.log;
|
|
console.log = function (...args) {
|
|
const message = args.join(' ');
|
|
const shouldSuppress = suppressedPatterns.some(pattern => pattern.test(message));
|
|
if (!shouldSuppress) {
|
|
originalLog.apply(console, args);
|
|
}
|
|
};
|
|
|
|
// Catch ALL unhandled errors at the window level
|
|
window.addEventListener('error', function (event) {
|
|
const message = event.message || '';
|
|
const filename = event.filename || '';
|
|
const shouldSuppress = suppressedPatterns.some(pattern => {
|
|
return pattern.test(message) || pattern.test(filename);
|
|
});
|
|
|
|
if (shouldSuppress) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// Catch unhandled promise rejections
|
|
window.addEventListener('unhandledrejection', function (event) {
|
|
const message = event.reason?.message || String(event.reason) || '';
|
|
const shouldSuppress = suppressedPatterns.some(pattern => pattern.test(message));
|
|
|
|
if (shouldSuppress) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// Override EventTarget methods to catch extension errors
|
|
const originalAddEventListener = EventTarget.prototype.addEventListener;
|
|
EventTarget.prototype.addEventListener = function (type, listener, options) {
|
|
const wrappedListener = function (...args) {
|
|
try {
|
|
return listener.apply(this, args);
|
|
} catch (error) {
|
|
const shouldSuppress = suppressedPatterns.some(pattern =>
|
|
pattern.test(error.message) || pattern.test(error.stack)
|
|
);
|
|
if (!shouldSuppress) {
|
|
throw error;
|
|
}
|
|
}
|
|
};
|
|
return originalAddEventListener.call(this, type, wrappedListener, options);
|
|
};
|
|
})();
|
|
|
|
// Immediate Theme Init to prevent FOUC
|
|
(function () {
|
|
let savedTheme = localStorage.getItem('theme');
|
|
if (!savedTheme) {
|
|
const hour = new Date().getHours();
|
|
savedTheme = (hour >= 6 && hour < 18) ? 'light' : 'dark';
|
|
}
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
})();
|
|
</script>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/modules/chat.css') }}">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Global Progress Bar -->
|
|
<div id="nprogress-container"
|
|
style="position:fixed; top:0; left:0; width:100%; height:3px; z-index:9999; pointer-events:none;">
|
|
<div id="nprogress-bar" style="width:0%; height:100%; background:red; transition: width 0.2s ease; opacity: 0;">
|
|
</div>
|
|
</div>
|
|
<div class="app-wrapper">
|
|
<!-- YouTube-style Header -->
|
|
<header class="yt-header">
|
|
<div class="yt-header-start">
|
|
<button class="yt-menu-btn" onclick="toggleSidebar()" aria-label="Menu">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<a href="/" class="yt-logo"
|
|
style="text-decoration: none; display: flex; align-items: center; gap: 4px;">
|
|
<span style="color: #ff0000; font-size: 24px;"><i class="fas fa-play-circle"></i></span>
|
|
<span
|
|
style="font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.5px; color: var(--yt-text-primary);">KV-Tube</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="yt-header-center">
|
|
<form class="yt-search-form" action="/" method="get" onsubmit="handleSearch(event)">
|
|
<input type="text" id="searchInput" class="yt-search-input" placeholder="Search">
|
|
<button type="submit" class="yt-search-btn" aria-label="Search">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="yt-header-end">
|
|
<button class="yt-icon-btn" onclick="toggleAIChat()" aria-label="AI Assistant">
|
|
<i class="fas fa-robot"></i>
|
|
</button>
|
|
<!-- Mobile Search Icon Removed - Search will be visible -->
|
|
<!-- <button class="yt-icon-btn yt-mobile-search" onclick="toggleMobileSearch()" aria-label="Search">
|
|
<i class="fas fa-search"></i>
|
|
</button> -->
|
|
<!-- User Avatar Removed -->
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Mobile Search Bar -->
|
|
<div class="yt-mobile-search-bar" id="mobileSearchBar">
|
|
<button onclick="toggleMobileSearch()" class="yt-back-btn">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</button>
|
|
<input type="text" id="mobileSearchInput" placeholder="Search"
|
|
onkeypress="if(event.key==='Enter'){searchYouTube(this.value);toggleMobileSearch();}">
|
|
</div>
|
|
|
|
<!-- YouTube-style Sidebar -->
|
|
<aside class="yt-sidebar" id="sidebar">
|
|
<a href="/" class="yt-sidebar-item {% if request.path == '/' %}active{% endif %}" data-category="all">
|
|
<i class="fas fa-home"></i>
|
|
<span>Home</span>
|
|
</a>
|
|
|
|
<div class="yt-sidebar-divider"></div>
|
|
|
|
<a href="/my-videos?type=history" class="yt-sidebar-item" data-category="history">
|
|
<i class="fas fa-history"></i>
|
|
<span>History</span>
|
|
</a>
|
|
<a href="/my-videos?type=saved"
|
|
class="yt-sidebar-item {% if request.path == '/my-videos' and request.args.get('type') == 'saved' %}active{% endif %}"
|
|
data-category="saved">
|
|
<i class="fas fa-bookmark"></i>
|
|
<span>Saved</span>
|
|
</a>
|
|
<a href="/my-videos?type=subscriptions"
|
|
class="yt-sidebar-item {% if request.path == '/my-videos' and request.args.get('type') == 'subscriptions' %}active{% endif %}"
|
|
data-category="subscriptions">
|
|
<i class="fas fa-play-circle"></i>
|
|
<span>Subscriptions</span>
|
|
</a>
|
|
<a href="/downloads" class="yt-sidebar-item {% if request.path == '/downloads' %}active{% endif %}"
|
|
data-category="downloads">
|
|
<i class="fas fa-download"></i>
|
|
<span>Downloads</span>
|
|
<span id="downloadBadge" class="yt-badge" style="display:none">0</span>
|
|
</a>
|
|
<!-- Queue Removed -->
|
|
|
|
<div class="yt-sidebar-divider"></div>
|
|
|
|
<div class="yt-sidebar-title">Explore</div>
|
|
<a href="javascript:void(0)" class="yt-sidebar-item" data-category="tech"
|
|
onclick="navigateCategory('tech')">
|
|
<i class="fas fa-microchip"></i>
|
|
<span>AI & Tech</span>
|
|
</a>
|
|
<a href="javascript:void(0)" class="yt-sidebar-item" data-category="trending"
|
|
onclick="navigateCategory('trending')">
|
|
<i class="fas fa-fire"></i>
|
|
<span>Trending</span>
|
|
</a>
|
|
<a href="javascript:void(0)" class="yt-sidebar-item" data-category="music"
|
|
onclick="navigateCategory('music')">
|
|
<i class="fas fa-music"></i>
|
|
<span>Music</span>
|
|
</a>
|
|
<a href="javascript:void(0)" class="yt-sidebar-item" data-category="news"
|
|
onclick="navigateCategory('news')">
|
|
<i class="fas fa-newspaper"></i>
|
|
<span>News</span>
|
|
</a>
|
|
<a href="javascript:void(0)" class="yt-sidebar-item" data-category="gaming"
|
|
onclick="navigateCategory('gaming')">
|
|
<i class="fas fa-gamepad"></i>
|
|
<span>Gaming</span>
|
|
</a>
|
|
<a href="javascript:void(0)" class="yt-sidebar-item" data-category="sports"
|
|
onclick="navigateCategory('sports')">
|
|
<i class="fas fa-football-ball"></i>
|
|
<span>Sports</span>
|
|
</a>
|
|
|
|
<div class="yt-sidebar-divider"></div>
|
|
|
|
<a href="/settings" class="yt-sidebar-item {% if request.path == '/settings' %}active{% endif %}">
|
|
<i class="fas fa-cog"></i>
|
|
<span>Settings</span>
|
|
</a>
|
|
</aside>
|
|
|
|
<!-- Sidebar Overlay (Mobile) -->
|
|
<div class="yt-sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>
|
|
|
|
<!-- Main Content -->
|
|
<main class="yt-main" id="mainContent">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- Floating Back Button (Mobile) -->
|
|
<button id="floatingBackBtn" class="yt-floating-back" onclick="history.back()" aria-label="Go Back">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/navigation-manager.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/download-manager.js') }}"></script>
|
|
<script>
|
|
// Register Service Worker
|
|
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker.register('{{ url_for("static", filename="sw.js") }}')
|
|
.then(registration => {
|
|
console.log('ServiceWorker registration successful');
|
|
})
|
|
.catch(err => {
|
|
console.log('ServiceWorker registration failed: ', err);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Add to Home Screen prompt
|
|
let deferredPrompt;
|
|
const addBtn = document.querySelector('.add-button');
|
|
|
|
window.addEventListener('beforeinstallprompt', (e) => {
|
|
// Prevent Chrome 67 and earlier from automatically showing the prompt
|
|
e.preventDefault();
|
|
// Stash the event so it can be triggered later
|
|
deferredPrompt = e;
|
|
// Show the button
|
|
if (addBtn) addBtn.style.display = 'block';
|
|
|
|
// Show the install button if it exists
|
|
const installButton = document.getElementById('install-button');
|
|
if (installButton) {
|
|
installButton.style.display = 'block';
|
|
installButton.addEventListener('click', () => {
|
|
// Show the prompt
|
|
deferredPrompt.prompt();
|
|
// Wait for the user to respond to the prompt
|
|
deferredPrompt.userChoice.then((choiceResult) => {
|
|
if (choiceResult.outcome === 'accepted') {
|
|
console.log('User accepted the install prompt');
|
|
} else {
|
|
console.log('User dismissed the install prompt');
|
|
}
|
|
deferredPrompt = null;
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
// Sidebar toggle
|
|
function toggleSidebar() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const main = document.getElementById('mainContent');
|
|
const overlay = document.getElementById('sidebarOverlay');
|
|
|
|
if (window.innerWidth <= 1024) {
|
|
sidebar.classList.toggle('open');
|
|
overlay.classList.toggle('active');
|
|
} else {
|
|
sidebar.classList.toggle('collapsed');
|
|
main.classList.toggle('sidebar-collapsed');
|
|
localStorage.setItem('sidebarCollapsed', sidebar.classList.contains('collapsed'));
|
|
}
|
|
}
|
|
|
|
function closeSidebar() {
|
|
document.getElementById('sidebar').classList.remove('open');
|
|
document.getElementById('sidebarOverlay').classList.remove('active');
|
|
}
|
|
|
|
// Restore sidebar state (desktop only)
|
|
if (window.innerWidth > 1024 && localStorage.getItem('sidebarCollapsed') === 'true') {
|
|
document.getElementById('sidebar').classList.add('collapsed');
|
|
document.getElementById('mainContent').classList.add('sidebar-collapsed');
|
|
}
|
|
|
|
// Mobile search toggle
|
|
function toggleMobileSearch() {
|
|
const searchBar = document.getElementById('mobileSearchBar');
|
|
searchBar.classList.toggle('active');
|
|
if (searchBar.classList.contains('active')) {
|
|
document.getElementById('mobileSearchInput').focus();
|
|
}
|
|
}
|
|
|
|
// Search handler
|
|
function handleSearch(e) {
|
|
e.preventDefault();
|
|
const query = document.getElementById('searchInput').value.trim();
|
|
if (query && typeof searchYouTube === 'function') {
|
|
searchYouTube(query);
|
|
}
|
|
}
|
|
|
|
// Navigate to category (syncs sidebar with top pills)
|
|
function navigateCategory(category) {
|
|
// Close mobile sidebar
|
|
closeSidebar();
|
|
|
|
// If on home page, trigger category switch
|
|
if (window.location.pathname === '/') {
|
|
const pill = document.querySelector(`.yt-category-pill[data-category="${category}"]`);
|
|
if (pill) {
|
|
pill.click();
|
|
} else if (typeof switchCategory === 'function') {
|
|
// Create a mock button for the function
|
|
const pills = document.querySelectorAll('.yt-category-pill');
|
|
pills.forEach(p => p.classList.remove('active'));
|
|
switchCategory(category, { classList: { add: () => { } } });
|
|
}
|
|
} else {
|
|
// Navigate to home with category
|
|
window.location.href = `/?category=${category}`;
|
|
}
|
|
}
|
|
</script>
|
|
<!-- Toast Notification Container -->
|
|
<div id="toastContainer" class="yt-toast-container"></div>
|
|
|
|
|
|
|
|
<!-- Queue Drawer -->
|
|
<div class="yt-queue-drawer" id="queueDrawer">
|
|
<div class="yt-queue-header">
|
|
<h3>Queue (<span id="queueCount">0</span>)</h3>
|
|
<button onclick="toggleQueue()" class="yt-icon-btn"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div class="yt-queue-list" id="queueList">
|
|
<!-- Queued items -->
|
|
</div>
|
|
<div class="yt-queue-footer">
|
|
<button class="yt-queue-clear-btn" onclick="clearQueue()">Clear Queue</button>
|
|
</div>
|
|
</div>
|
|
<div class="yt-queue-overlay" id="queueOverlay" onclick="toggleQueue()"></div>
|
|
|
|
<!-- Toast Styles Moved to static/css/modules/utils.css -->
|
|
|
|
<script>
|
|
function showToast(message, type = 'info') {
|
|
const container = document.getElementById('toastContainer');
|
|
const toast = document.createElement('div');
|
|
toast.className = `yt-toast ${type}`;
|
|
toast.innerHTML = `<span>${message}</span>`;
|
|
|
|
container.appendChild(toast);
|
|
|
|
// Remove after 3 seconds
|
|
setTimeout(() => {
|
|
toast.style.opacity = '0';
|
|
toast.style.transform = 'translateY(20px)';
|
|
toast.style.transition = 'all 0.3s';
|
|
setTimeout(() => toast.remove(), 300);
|
|
}, 5000);
|
|
}
|
|
|
|
// --- Queue Logic ---
|
|
function toggleQueue() {
|
|
const drawer = document.getElementById('queueDrawer');
|
|
const overlay = document.getElementById('queueOverlay');
|
|
if (drawer.classList.contains('open')) {
|
|
drawer.classList.remove('open');
|
|
overlay.classList.remove('active');
|
|
} else {
|
|
drawer.classList.add('open');
|
|
overlay.classList.add('active');
|
|
renderQueue();
|
|
}
|
|
}
|
|
|
|
function renderQueue() {
|
|
const list = document.getElementById('queueList');
|
|
const queue = JSON.parse(localStorage.getItem('kv_queue') || '[]');
|
|
document.getElementById('queueCount').innerText = queue.length;
|
|
|
|
if (queue.length === 0) {
|
|
list.innerHTML = '<p style="padding:20px; text-align:center; color:var(--yt-text-secondary);">Queue is empty</p>';
|
|
return;
|
|
}
|
|
|
|
list.innerHTML = queue.map((item, index) => `
|
|
<div class="yt-queue-item">
|
|
<div class="yt-queue-thumb" onclick="window.location.href='/watch?v=${item.id}'">
|
|
<img src="${item.thumbnail}" loading="lazy">
|
|
</div>
|
|
<div class="yt-queue-info">
|
|
<div class="yt-queue-title" onclick="window.location.href='/watch?v=${item.id}'">${item.title}</div>
|
|
<div class="yt-queue-uploader">${item.uploader}</div>
|
|
</div>
|
|
<button class="yt-queue-remove" onclick="removeFromQueue(${index})">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function removeFromQueue(index) {
|
|
let queue = JSON.parse(localStorage.getItem('kv_queue') || '[]');
|
|
queue.splice(index, 1);
|
|
localStorage.setItem('kv_queue', JSON.stringify(queue));
|
|
renderQueue();
|
|
}
|
|
|
|
function clearQueue() {
|
|
// Removed confirmation as requested
|
|
localStorage.removeItem('kv_queue');
|
|
renderQueue();
|
|
showToast("Queue cleared", "success");
|
|
}
|
|
|
|
// --- Back Button Logic ---
|
|
// Back Button Logic Removed (Handled Server-Side)
|
|
|
|
// --- Download Badge Logic ---
|
|
function updateDownloadBadge(e) {
|
|
const badge = document.getElementById('downloadBadge');
|
|
if (!badge) return;
|
|
|
|
// Use the count from the event detail if available, otherwise check manager
|
|
let count = 0;
|
|
if (e && e.detail && typeof e.detail.activeCount === 'number') {
|
|
count = e.detail.activeCount;
|
|
} else if (window.downloadManager) {
|
|
count = window.downloadManager.activeDownloads.size;
|
|
}
|
|
|
|
if (count > 0) {
|
|
badge.innerText = count;
|
|
badge.style.display = 'inline-flex';
|
|
} else {
|
|
badge.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
window.addEventListener('download-updated', updateDownloadBadge);
|
|
// Initial check
|
|
window.addEventListener('load', () => {
|
|
// small delay to ensure manager is ready
|
|
setTimeout(() => updateDownloadBadge(), 500);
|
|
});
|
|
|
|
|
|
</script>
|
|
<!-- Queue Drawer Styles Moved to static/css/modules/components.css -->
|
|
|
|
<!-- AI Chat Panel -->
|
|
<div id="aiChatPanel" class="ai-chat-panel">
|
|
<div class="ai-chat-header">
|
|
<div>
|
|
<h4><i class="fas fa-robot"></i> AI Assistant</h4>
|
|
<div id="aiModelStatus" class="ai-model-status">Click to load AI model</div>
|
|
</div>
|
|
<button class="ai-chat-close" onclick="toggleAIChat()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div id="aiDownloadArea" class="ai-download-progress" style="display:none;">
|
|
<div>Downloading AI Model...</div>
|
|
<div class="ai-download-bar">
|
|
<div id="aiDownloadFill" class="ai-download-fill" style="width: 0%;"></div>
|
|
</div>
|
|
<div id="aiDownloadText" class="ai-download-text">Preparing...</div>
|
|
</div>
|
|
<div id="aiChatMessages" class="ai-chat-messages">
|
|
<div class="ai-message system">Ask me anything about this video!</div>
|
|
</div>
|
|
<div class="ai-chat-input">
|
|
<input type="text" id="aiInput" placeholder="Ask about the video..."
|
|
onkeypress="if(event.key==='Enter') sendAIMessage()">
|
|
<button class="ai-chat-send" onclick="sendAIMessage()" id="aiSendBtn">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat styles -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/modules/chat.css') }}">
|
|
|
|
<!-- WebAI Script -->
|
|
<script src="{{ url_for('static', filename='js/webai.js') }}"></script>
|
|
<script>
|
|
// AI Chat Toggle and Message Handler
|
|
var aiChatVisible = false;
|
|
var aiInitialized = false;
|
|
|
|
window.toggleAIChat = function () {
|
|
const panel = document.getElementById('aiChatPanel');
|
|
if (!panel) return;
|
|
|
|
aiChatVisible = !aiChatVisible;
|
|
|
|
if (aiChatVisible) {
|
|
panel.classList.add('visible');
|
|
|
|
// Initialize AI on first open
|
|
if (!aiInitialized && window.transcriptAI && !window.transcriptAI.isModelLoading()) {
|
|
initializeAI();
|
|
}
|
|
} else {
|
|
panel.classList.remove('visible');
|
|
}
|
|
}
|
|
|
|
async function initializeAI() {
|
|
if (aiInitialized || window.transcriptAI.isModelLoading()) return;
|
|
|
|
const status = document.getElementById('aiModelStatus');
|
|
const downloadArea = document.getElementById('aiDownloadArea');
|
|
const downloadFill = document.getElementById('aiDownloadFill');
|
|
const downloadText = document.getElementById('aiDownloadText');
|
|
|
|
status.textContent = 'Loading model...';
|
|
status.classList.add('loading');
|
|
downloadArea.style.display = 'block';
|
|
|
|
// Set transcript for AI (if available globally)
|
|
if (window.transcriptFullText) {
|
|
window.transcriptAI.setTranscript(window.transcriptFullText);
|
|
}
|
|
|
|
// Set progress callback
|
|
window.transcriptAI.setCallbacks({
|
|
onProgress: (report) => {
|
|
const progress = report.progress || 0;
|
|
downloadFill.style.width = `${progress * 100}%`;
|
|
downloadText.textContent = report.text || 'Downloading...';
|
|
},
|
|
onReady: () => {
|
|
status.textContent = 'AI Ready ✓';
|
|
status.classList.remove('loading');
|
|
status.classList.add('ready');
|
|
downloadArea.style.display = 'none';
|
|
aiInitialized = true;
|
|
|
|
// Add welcome message
|
|
addAIMessage('assistant', `I'm ready! Ask me anything about this video. Model: ${window.transcriptAI.getModelInfo().name}`);
|
|
}
|
|
});
|
|
|
|
try {
|
|
await window.transcriptAI.init();
|
|
} catch (err) {
|
|
status.textContent = 'Failed to load AI';
|
|
status.classList.remove('loading');
|
|
downloadArea.style.display = 'none';
|
|
addAIMessage('system', `Error: ${err.message}. WebGPU may not be supported in your browser.`);
|
|
}
|
|
}
|
|
|
|
window.sendAIMessage = async function () {
|
|
const input = document.getElementById('aiInput');
|
|
const sendBtn = document.getElementById('aiSendBtn');
|
|
const question = input.value.trim();
|
|
|
|
if (!question) return;
|
|
|
|
// Ensure transcript is set if available
|
|
if (window.transcriptFullText) {
|
|
window.transcriptAI.setTranscript(window.transcriptFullText);
|
|
}
|
|
|
|
// Initialize if needed
|
|
if (!window.transcriptAI.isModelReady()) {
|
|
addAIMessage('system', 'Initializing AI...');
|
|
await initializeAI();
|
|
if (!window.transcriptAI.isModelReady()) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Add user message
|
|
addAIMessage('user', question);
|
|
input.value = '';
|
|
sendBtn.disabled = true;
|
|
|
|
// Add typing indicator
|
|
const typingId = addTypingIndicator();
|
|
|
|
try {
|
|
// Stream response
|
|
let response = '';
|
|
const responseEl = addAIMessage('assistant', '');
|
|
removeTypingIndicator(typingId);
|
|
|
|
for await (const chunk of window.transcriptAI.askStreaming(question)) {
|
|
response += chunk;
|
|
responseEl.textContent = response;
|
|
scrollChatToBottom();
|
|
}
|
|
|
|
} catch (err) {
|
|
removeTypingIndicator(typingId);
|
|
addAIMessage('system', `Error: ${err.message}`);
|
|
}
|
|
|
|
sendBtn.disabled = false;
|
|
}
|
|
|
|
function addAIMessage(role, text) {
|
|
const messages = document.getElementById('aiChatMessages');
|
|
const msg = document.createElement('div');
|
|
msg.className = `ai-message ${role}`;
|
|
msg.textContent = text;
|
|
messages.appendChild(msg);
|
|
scrollChatToBottom();
|
|
return msg;
|
|
}
|
|
|
|
function addTypingIndicator() {
|
|
const messages = document.getElementById('aiChatMessages');
|
|
const typing = document.createElement('div');
|
|
typing.className = 'ai-message assistant ai-typing';
|
|
typing.id = 'ai-typing-' + Date.now();
|
|
typing.innerHTML = '<span></span><span></span><span></span>';
|
|
messages.appendChild(typing);
|
|
scrollChatToBottom();
|
|
return typing.id;
|
|
}
|
|
|
|
function removeTypingIndicator(id) {
|
|
const el = document.getElementById(id);
|
|
if (el) el.remove();
|
|
}
|
|
|
|
function scrollChatToBottom() {
|
|
const messages = document.getElementById('aiChatMessages');
|
|
messages.scrollTop = messages.scrollHeight;
|
|
}
|
|
</script>
|
|
<!-- Global Download Modal (available on all pages) -->
|
|
<div id="downloadModal" class="download-modal" onclick="if(event.target===this) closeDownloadModal()">
|
|
<div class="download-modal-content">
|
|
<button class="download-close" onclick="closeDownloadModal()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
<div id="downloadModalContent">
|
|
<!-- Content loaded dynamically by download-manager.js -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</html> |