675 lines
22 KiB
HTML
675 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Video Inspiration Dashboard</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
background-color: #0f0f0f;
|
|
color: #ffffff;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.header {
|
|
background-color: #212121;
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #333;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.logo-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: linear-gradient(45deg, #ff0000, #cc0000);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.search-container {
|
|
flex-grow: 1;
|
|
max-width: 640px;
|
|
margin: 0 40px;
|
|
display: flex;
|
|
}
|
|
|
|
.search-box {
|
|
flex-grow: 1;
|
|
padding: 12px 16px;
|
|
border: 1px solid #333;
|
|
border-radius: 40px 0 0 40px;
|
|
background-color: #121212;
|
|
color: white;
|
|
font-size: 16px;
|
|
outline: none;
|
|
}
|
|
|
|
.search-box:focus {
|
|
border-color: #3ea6ff;
|
|
}
|
|
|
|
.search-button {
|
|
padding: 12px 20px;
|
|
border: 1px solid #333;
|
|
border-left: none;
|
|
border-radius: 0 40px 40px 0;
|
|
background-color: #222;
|
|
cursor: pointer;
|
|
color: white;
|
|
}
|
|
|
|
.status-bar {
|
|
background-color: #1a1a1a;
|
|
padding: 16px;
|
|
text-align: center;
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
|
|
.status-trained {
|
|
color: #00d400;
|
|
}
|
|
|
|
.status-learning {
|
|
color: #ffaa00;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 24px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.ai-badge {
|
|
background: linear-gradient(45deg, #00d4aa, #007acc);
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.video-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 24px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.video-card {
|
|
background-color: transparent;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.video-card:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.video-thumbnail {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 180px;
|
|
background-color: #333;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.video-thumbnail img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.confidence-badge {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.confidence-high {
|
|
color: #00d400;
|
|
}
|
|
|
|
.confidence-medium {
|
|
color: #ffaa00;
|
|
}
|
|
|
|
.confidence-low {
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
.video-info {
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.video-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
margin-bottom: 4px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.video-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #aaa;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.rating-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.rating-btn {
|
|
padding: 6px 12px;
|
|
border: 1px solid #333;
|
|
border-radius: 20px;
|
|
background-color: #222;
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rating-btn:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.rating-btn.like-btn:hover {
|
|
background-color: #00d400;
|
|
border-color: #00d400;
|
|
}
|
|
|
|
.rating-btn.dislike-btn:hover {
|
|
background-color: #ff4444;
|
|
border-color: #ff4444;
|
|
}
|
|
|
|
.rating-btn.liked {
|
|
background-color: #00d400;
|
|
border-color: #00d400;
|
|
}
|
|
|
|
.rating-btn.disliked {
|
|
background-color: #ff4444;
|
|
border-color: #ff4444;
|
|
}
|
|
|
|
.rating-btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.nav-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.nav-btn {
|
|
padding: 8px 16px;
|
|
border: 1px solid #333;
|
|
border-radius: 20px;
|
|
background-color: #222;
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-btn:hover {
|
|
background-color: #333;
|
|
}
|
|
|
|
.nav-btn.active {
|
|
background-color: #ff0000;
|
|
border-color: #ff0000;
|
|
}
|
|
|
|
.view-container {
|
|
display: none;
|
|
}
|
|
|
|
.view-container.active {
|
|
display: block;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 60px;
|
|
color: #aaa;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid #333;
|
|
border-top: 4px solid #ff0000;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto 16px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.error {
|
|
background-color: #ff4444;
|
|
color: white;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
margin: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.search-container {
|
|
margin: 0 16px;
|
|
max-width: none;
|
|
}
|
|
|
|
.video-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 16px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="logo-section">
|
|
<a href="/" class="logo">
|
|
<div class="logo-icon">VI</div>
|
|
<span class="logo-text">Video Inspiration</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="search-container">
|
|
<input type="text" class="search-box" placeholder="Search coding videos..." disabled>
|
|
<button class="search-button">🔍</button>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-btn active" id="ratingBtn" onclick="switchView('rating')">
|
|
📝 Rate Videos
|
|
</button>
|
|
<button class="nav-btn" id="likedBtn" onclick="switchView('liked')">
|
|
🎯 MyTube
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="status-bar" id="statusBar">
|
|
<div class="loading">
|
|
<div class="loading-spinner"></div>
|
|
Loading your personalized recommendations...
|
|
</div>
|
|
</div>
|
|
|
|
<main class="main-content">
|
|
<!-- Rating View -->
|
|
<div class="view-container active" id="ratingView">
|
|
<h1 class="section-title" id="sectionTitle" style="display: none;">
|
|
Recommended for you
|
|
<span class="ai-badge">AI POWERED</span>
|
|
</h1>
|
|
|
|
<div class="video-grid" id="videoGrid">
|
|
<!-- Videos will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Liked Videos View -->
|
|
<div class="view-container" id="likedView">
|
|
<h1 class="section-title" id="likedSectionTitle" style="display: none;">
|
|
MyTube - Videos I Know You'll Love
|
|
<span class="ai-badge">AI CURATED</span>
|
|
</h1>
|
|
|
|
<div class="video-grid" id="likedVideoGrid">
|
|
<!-- Liked videos will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
async function loadRecommendations() {
|
|
try {
|
|
const response = await fetch('/api/recommendations');
|
|
const data = await response.json();
|
|
|
|
if (!data.success) {
|
|
throw new Error(data.error || 'Failed to load recommendations');
|
|
}
|
|
|
|
updateStatusBar(data.model_trained, data.total_ratings);
|
|
displayVideos(data.videos);
|
|
|
|
} catch (error) {
|
|
console.error('Error loading recommendations:', error);
|
|
document.getElementById('videoGrid').innerHTML =
|
|
`<div class="error">Failed to load recommendations: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
function updateStatusBar(modelTrained, totalRatings) {
|
|
const statusBar = document.getElementById('statusBar');
|
|
const sectionTitle = document.getElementById('sectionTitle');
|
|
|
|
if (modelTrained) {
|
|
statusBar.innerHTML = `
|
|
<div class="status-trained">
|
|
🤖 AI Model Active • Trained on ${totalRatings} video ratings • Showing personalized recommendations
|
|
</div>
|
|
`;
|
|
sectionTitle.innerHTML = 'AI Recommendations for You <span class="ai-badge">PERSONALIZED</span>';
|
|
} else {
|
|
statusBar.innerHTML = `
|
|
<div class="status-learning">
|
|
📚 Learning Mode • Need ${10 - totalRatings} more ratings to activate AI recommendations
|
|
</div>
|
|
`;
|
|
sectionTitle.innerHTML = 'Popular Coding Videos <span class="ai-badge">TRENDING</span>';
|
|
}
|
|
|
|
sectionTitle.style.display = 'flex';
|
|
}
|
|
|
|
function displayVideos(videos) {
|
|
const videoGrid = document.getElementById('videoGrid');
|
|
|
|
if (videos.length === 0) {
|
|
videoGrid.innerHTML = '<div class="loading">No videos available. Please run the main application to search for videos.</div>';
|
|
return;
|
|
}
|
|
|
|
videoGrid.innerHTML = videos.map(video => `
|
|
<div class="video-card">
|
|
<div class="video-thumbnail" onclick="openVideo('${video.url}')">
|
|
<img src="${video.thumbnail}" alt="${video.title}" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22320%22 height=%22180%22><rect width=%22100%%22 height=%22100%%22 fill=%22%23333%22/><text x=%2250%%22 y=%2250%%22 text-anchor=%22middle%22 dy=%22.3em%22 fill=%22%23999%22>No Image</text></svg>'">
|
|
<div class="confidence-badge ${getConfidenceClass(video.confidence)}">
|
|
${video.confidence}% match
|
|
</div>
|
|
</div>
|
|
<div class="video-info">
|
|
<div class="video-title" onclick="openVideo('${video.url}')" style="cursor: pointer;">${video.title}</div>
|
|
<div class="video-meta">
|
|
<span>${video.channel_name}</span>
|
|
<span>•</span>
|
|
<span>${video.views_formatted}</span>
|
|
</div>
|
|
<div class="rating-buttons">
|
|
<button class="rating-btn like-btn" onclick="rateVideo('${video.id}', true)" id="like-${video.id}">
|
|
👍 Like
|
|
</button>
|
|
<button class="rating-btn dislike-btn" onclick="rateVideo('${video.id}', false)" id="dislike-${video.id}">
|
|
👎 Dislike
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function getConfidenceClass(confidence) {
|
|
if (confidence >= 70) return 'confidence-high';
|
|
if (confidence >= 50) return 'confidence-medium';
|
|
return 'confidence-low';
|
|
}
|
|
|
|
function openVideo(url) {
|
|
window.open(url, '_blank');
|
|
}
|
|
|
|
async function rateVideo(videoId, liked) {
|
|
const likeBtn = document.getElementById(`like-${videoId}`);
|
|
const dislikeBtn = document.getElementById(`dislike-${videoId}`);
|
|
|
|
// Disable buttons during request
|
|
likeBtn.disabled = true;
|
|
dislikeBtn.disabled = true;
|
|
|
|
try {
|
|
const response = await fetch('/api/rate', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
video_id: videoId,
|
|
liked: liked
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
// Update button states
|
|
likeBtn.classList.remove('liked');
|
|
dislikeBtn.classList.remove('disliked');
|
|
|
|
if (liked) {
|
|
likeBtn.classList.add('liked');
|
|
likeBtn.textContent = '👍 Liked';
|
|
} else {
|
|
dislikeBtn.classList.add('disliked');
|
|
dislikeBtn.textContent = '👎 Disliked';
|
|
}
|
|
|
|
// Show feedback
|
|
showNotification(liked ? 'Video liked! 👍' : 'Video disliked! 👎');
|
|
|
|
// Refresh recommendations after rating if model was retrained
|
|
if (result.model_retrained) {
|
|
setTimeout(() => {
|
|
showNotification('🤖 AI model updated with your feedback!');
|
|
loadRecommendations();
|
|
}, 1500);
|
|
}
|
|
} else {
|
|
throw new Error(result.error || 'Failed to rate video');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error rating video:', error);
|
|
showNotification('Failed to rate video: ' + error.message);
|
|
}
|
|
|
|
// Re-enable buttons
|
|
likeBtn.disabled = false;
|
|
dislikeBtn.disabled = false;
|
|
}
|
|
|
|
function showNotification(message) {
|
|
// Create notification element
|
|
const notification = document.createElement('div');
|
|
notification.style.cssText = `
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background-color: #333;
|
|
color: white;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
|
|
z-index: 1000;
|
|
transition: all 0.3s ease;
|
|
transform: translateX(100%);
|
|
`;
|
|
notification.textContent = message;
|
|
|
|
document.body.appendChild(notification);
|
|
|
|
// Animate in
|
|
setTimeout(() => {
|
|
notification.style.transform = 'translateX(0)';
|
|
}, 100);
|
|
|
|
// Remove after 3 seconds
|
|
setTimeout(() => {
|
|
notification.style.transform = 'translateX(100%)';
|
|
setTimeout(() => {
|
|
document.body.removeChild(notification);
|
|
}, 300);
|
|
}, 3000);
|
|
}
|
|
|
|
async function loadLikedVideos() {
|
|
try {
|
|
const response = await fetch('/api/liked');
|
|
const data = await response.json();
|
|
|
|
if (!data.success) {
|
|
throw new Error(data.error || 'Failed to load liked videos');
|
|
}
|
|
|
|
displayLikedVideos(data.videos);
|
|
updateLikedStatusBar(data.total_liked);
|
|
|
|
} catch (error) {
|
|
console.error('Error loading liked videos:', error);
|
|
document.getElementById('likedVideoGrid').innerHTML =
|
|
`<div class="error">Failed to load liked videos: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
function displayLikedVideos(videos) {
|
|
const likedVideoGrid = document.getElementById('likedVideoGrid');
|
|
const likedSectionTitle = document.getElementById('likedSectionTitle');
|
|
|
|
if (videos.length === 0) {
|
|
likedVideoGrid.innerHTML = '<div class="loading">No videos curated yet. Rate some videos and I\'ll learn what you love!</div>';
|
|
likedSectionTitle.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
likedSectionTitle.style.display = 'flex';
|
|
|
|
likedVideoGrid.innerHTML = videos.map(video => `
|
|
<div class="video-card">
|
|
<div class="video-thumbnail" onclick="openVideo('${video.url}')">
|
|
<img src="${video.thumbnail}" alt="${video.title}" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22320%22 height=%22180%22><rect width=%22100%%22 height=%22100%%22 fill=%22%23333%22/><text x=%2250%%22 y=%2250%%22 text-anchor=%22middle%22 dy=%22.3em%22 fill=%22%23999%22>No Image</text></svg>'">
|
|
<div class="confidence-badge confidence-high">
|
|
${video.confidence}% match
|
|
</div>
|
|
</div>
|
|
<div class="video-info">
|
|
<div class="video-title" onclick="openVideo('${video.url}')" style="cursor: pointer;">${video.title}</div>
|
|
<div class="video-meta">
|
|
<span>${video.channel_name}</span>
|
|
<span>•</span>
|
|
<span>${video.views_formatted}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function updateLikedStatusBar(totalLiked) {
|
|
// Update status bar when viewing MyTube videos
|
|
const statusBar = document.getElementById('statusBar');
|
|
statusBar.innerHTML = `
|
|
<div class="status-trained">
|
|
🎯 MyTube AI Curation • ${totalLiked} videos I know you'll love • Ranked by confidence
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
let currentView = 'rating';
|
|
|
|
function switchView(view) {
|
|
currentView = view;
|
|
|
|
// Update navigation buttons
|
|
document.getElementById('ratingBtn').classList.toggle('active', view === 'rating');
|
|
document.getElementById('likedBtn').classList.toggle('active', view === 'liked');
|
|
|
|
// Update view containers
|
|
document.getElementById('ratingView').classList.toggle('active', view === 'rating');
|
|
document.getElementById('likedView').classList.toggle('active', view === 'liked');
|
|
|
|
// Load appropriate data
|
|
if (view === 'rating') {
|
|
loadRecommendations();
|
|
} else if (view === 'liked') {
|
|
loadLikedVideos();
|
|
}
|
|
}
|
|
|
|
// Load recommendations when page loads
|
|
document.addEventListener('DOMContentLoaded', loadRecommendations);
|
|
|
|
// Refresh current view every 5 minutes
|
|
setInterval(() => {
|
|
if (currentView === 'rating') {
|
|
loadRecommendations();
|
|
} else if (currentView === 'liked') {
|
|
loadLikedVideos();
|
|
}
|
|
}, 300000);
|
|
</script>
|
|
</body>
|
|
</html> |