mirror of
https://github.com/FranP-code/classify_saved_videos_yt.git
synced 2025-10-13 00:32:25 +00:00
YouTube Video Classifier Platform
This commit is contained in:
Francisco Pessano
committed by
GitHub
GitHub
parent
5c59b2a301
commit
ed8ad48310
129
web/src/components/SearchAndFilter.tsx
Normal file
129
web/src/components/SearchAndFilter.tsx
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Input } from './ui/input';
|
||||||
|
import { Select } from './ui/select';
|
||||||
|
import { Button } from './ui/button';
|
||||||
|
import { Badge } from './ui/badge';
|
||||||
|
import type { VideoData } from '../types/video';
|
||||||
|
import { getUniqueValues } from '../utils/search';
|
||||||
|
|
||||||
|
interface SearchAndFilterProps {
|
||||||
|
data: VideoData[];
|
||||||
|
searchTerm: string;
|
||||||
|
onSearchChange: (term: string) => void;
|
||||||
|
filters: {
|
||||||
|
classification: string;
|
||||||
|
language: string;
|
||||||
|
playlist_name: string;
|
||||||
|
};
|
||||||
|
onFilterChange: (filters: any) => void;
|
||||||
|
totalResults: number;
|
||||||
|
filteredResults: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SearchAndFilter({
|
||||||
|
data,
|
||||||
|
searchTerm,
|
||||||
|
onSearchChange,
|
||||||
|
filters,
|
||||||
|
onFilterChange,
|
||||||
|
totalResults,
|
||||||
|
filteredResults
|
||||||
|
}: SearchAndFilterProps) {
|
||||||
|
const classifications = getUniqueValues(data, 'classification');
|
||||||
|
const languages = getUniqueValues(data, 'language');
|
||||||
|
const playlists = getUniqueValues(data, 'playlist_name');
|
||||||
|
|
||||||
|
const clearFilters = () => {
|
||||||
|
onSearchChange('');
|
||||||
|
onFilterChange({
|
||||||
|
classification: 'all',
|
||||||
|
language: 'all',
|
||||||
|
playlist_name: 'all'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const activeFiltersCount = Object.values(filters).filter(value => value !== 'all').length + (searchTerm ? 1 : 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4 p-6 bg-card border rounded-lg">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<h2 className="text-lg font-semibold">Search & Filter</h2>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{filteredResults} of {totalResults} videos
|
||||||
|
{activeFiltersCount > 0 && (
|
||||||
|
<Badge variant="secondary" className="ml-2">
|
||||||
|
{activeFiltersCount} filter{activeFiltersCount !== 1 ? 's' : ''} active
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{activeFiltersCount > 0 && (
|
||||||
|
<Button variant="outline" size="sm" onClick={clearFilters}>
|
||||||
|
Clear All
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
{/* Search */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium">Search</label>
|
||||||
|
<Input
|
||||||
|
placeholder="Search videos, channels, tags..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => onSearchChange(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Classification Filter */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium">Classification</label>
|
||||||
|
<Select
|
||||||
|
value={filters.classification}
|
||||||
|
onChange={(e) => onFilterChange({ ...filters, classification: e.target.value })}
|
||||||
|
>
|
||||||
|
<option value="all">All Classifications</option>
|
||||||
|
{classifications.map((classification) => (
|
||||||
|
<option key={classification} value={classification}>
|
||||||
|
{classification}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Language Filter */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium">Language</label>
|
||||||
|
<Select
|
||||||
|
value={filters.language}
|
||||||
|
onChange={(e) => onFilterChange({ ...filters, language: e.target.value })}
|
||||||
|
>
|
||||||
|
<option value="all">All Languages</option>
|
||||||
|
{languages.map((language) => (
|
||||||
|
<option key={language} value={language}>
|
||||||
|
{language}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Playlist Filter */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium">Playlist</label>
|
||||||
|
<Select
|
||||||
|
value={filters.playlist_name}
|
||||||
|
onChange={(e) => onFilterChange({ ...filters, playlist_name: e.target.value })}
|
||||||
|
>
|
||||||
|
<option value="all">All Playlists</option>
|
||||||
|
{playlists.map((playlist) => (
|
||||||
|
<option key={playlist} value={playlist}>
|
||||||
|
{playlist}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
41
web/src/components/StatsOverview.tsx
Normal file
41
web/src/components/StatsOverview.tsx
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Badge } from './ui/badge';
|
||||||
|
import type { VideoData } from '../types/video';
|
||||||
|
import { getUniqueValues } from '../utils/search';
|
||||||
|
|
||||||
|
interface StatsOverviewProps {
|
||||||
|
data: VideoData[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StatsOverview({ data }: StatsOverviewProps) {
|
||||||
|
const totalVideos = data.length;
|
||||||
|
const totalDuration = data.reduce((sum, video) => sum + video.video_length_seconds, 0);
|
||||||
|
const uniqueChannels = getUniqueValues(data, 'channel_name').length;
|
||||||
|
const uniqueClassifications = getUniqueValues(data, 'classification').length;
|
||||||
|
const uniqueLanguages = getUniqueValues(data, 'language').length;
|
||||||
|
|
||||||
|
const formatTotalDuration = (seconds: number) => {
|
||||||
|
const hours = Math.floor(seconds / 3600);
|
||||||
|
const minutes = Math.floor((seconds % 3600) / 60);
|
||||||
|
return `${hours}h ${minutes}m`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ label: 'Total Videos', value: totalVideos.toLocaleString() },
|
||||||
|
{ label: 'Total Duration', value: formatTotalDuration(totalDuration) },
|
||||||
|
{ label: 'Channels', value: uniqueChannels },
|
||||||
|
{ label: 'Categories', value: uniqueClassifications },
|
||||||
|
{ label: 'Languages', value: uniqueLanguages },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||||
|
{stats.map((stat) => (
|
||||||
|
<div key={stat.label} className="text-center p-4 bg-card border rounded-lg">
|
||||||
|
<div className="text-2xl font-bold text-primary">{stat.value}</div>
|
||||||
|
<div className="text-sm text-muted-foreground">{stat.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
195
web/src/components/VideoClassifierApp.tsx
Normal file
195
web/src/components/VideoClassifierApp.tsx
Normal file
@@ -0,0 +1,195 @@
|
|||||||
|
import React, { useState, useEffect, useMemo } from 'react';
|
||||||
|
import { VirtualTable } from './VirtualTable';
|
||||||
|
import { SearchAndFilter } from './SearchAndFilter';
|
||||||
|
import { StatsOverview } from './StatsOverview';
|
||||||
|
import { Button } from './ui/button';
|
||||||
|
import type { VideoData } from '../types/video';
|
||||||
|
import { searchVideos, filterVideos } from '../utils/search';
|
||||||
|
|
||||||
|
interface ApiResponse {
|
||||||
|
videos?: VideoData[];
|
||||||
|
error?: string;
|
||||||
|
message?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function VideoClassifierApp() {
|
||||||
|
const [data, setData] = useState<VideoData[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
const [filters, setFilters] = useState({
|
||||||
|
classification: 'all',
|
||||||
|
language: 'all',
|
||||||
|
playlist_name: 'all'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fetch data
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const response = await fetch('/api/videos');
|
||||||
|
const result: ApiResponse = await response.json();
|
||||||
|
|
||||||
|
if (!response.ok || result.error) {
|
||||||
|
setError(result.message || result.error || 'Failed to load data');
|
||||||
|
setData([]);
|
||||||
|
} else {
|
||||||
|
setData(result.videos || []);
|
||||||
|
setError(null);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError('Failed to fetch video data');
|
||||||
|
setData([]);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Filter and search data
|
||||||
|
const filteredData = useMemo(() => {
|
||||||
|
let result = data;
|
||||||
|
|
||||||
|
// Apply filters
|
||||||
|
result = filterVideos(result, filters);
|
||||||
|
|
||||||
|
// Apply search
|
||||||
|
result = searchVideos(result, searchTerm);
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}, [data, searchTerm, filters]);
|
||||||
|
|
||||||
|
const refreshData = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/videos');
|
||||||
|
const result: ApiResponse = await response.json();
|
||||||
|
|
||||||
|
if (!response.ok || result.error) {
|
||||||
|
setError(result.message || result.error || 'Failed to load data');
|
||||||
|
setData([]);
|
||||||
|
} else {
|
||||||
|
setData(result.videos || []);
|
||||||
|
setError(null);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError('Failed to fetch video data');
|
||||||
|
setData([]);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
|
||||||
|
<p className="text-muted-foreground">Loading video data...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center p-6">
|
||||||
|
<div className="max-w-md text-center space-y-4">
|
||||||
|
<div className="text-6xl">📁</div>
|
||||||
|
<h1 className="text-2xl font-bold text-destructive">CSV File Not Found</h1>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
<div className="bg-muted p-4 rounded-lg text-sm text-left">
|
||||||
|
<p className="font-medium mb-2">To fix this:</p>
|
||||||
|
<ol className="list-decimal list-inside space-y-1 text-muted-foreground">
|
||||||
|
<li>Make sure <code className="bg-background px-1 rounded">video_classifications.csv</code> exists in your project root</li>
|
||||||
|
<li>Run your YouTube classifier script to generate the CSV</li>
|
||||||
|
<li>Refresh this page</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<Button onClick={refreshData} className="mt-4">
|
||||||
|
Try Again
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background">
|
||||||
|
<div className="container mx-auto px-6 py-8 space-y-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
|
||||||
|
YouTube Video Classifier
|
||||||
|
</h1>
|
||||||
|
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||||||
|
AI-powered video classification and management platform. Search, filter, and organize your YouTube video collection with intelligent categorization.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats Overview */}
|
||||||
|
{data.length > 0 && (
|
||||||
|
<StatsOverview data={data} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Search and Filter */}
|
||||||
|
{data.length > 0 && (
|
||||||
|
<SearchAndFilter
|
||||||
|
data={data}
|
||||||
|
searchTerm={searchTerm}
|
||||||
|
onSearchChange={setSearchTerm}
|
||||||
|
filters={filters}
|
||||||
|
onFilterChange={setFilters}
|
||||||
|
totalResults={data.length}
|
||||||
|
filteredResults={filteredData.length}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Results */}
|
||||||
|
{data.length > 0 ? (
|
||||||
|
filteredData.length > 0 ? (
|
||||||
|
<VirtualTable data={filteredData} />
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<div className="text-6xl mb-4">🔍</div>
|
||||||
|
<h3 className="text-lg font-medium mb-2">No results found</h3>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Try adjusting your search terms or filters
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<div className="text-6xl mb-4">📹</div>
|
||||||
|
<h3 className="text-lg font-medium mb-2">No videos found</h3>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Your CSV file appears to be empty
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="text-center text-sm text-muted-foreground border-t pt-8">
|
||||||
|
<p>
|
||||||
|
Powered by AI classification • {data.length} videos indexed
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={refreshData}
|
||||||
|
className="mt-2"
|
||||||
|
>
|
||||||
|
Refresh Data
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
163
web/src/components/VirtualTable.tsx
Normal file
163
web/src/components/VirtualTable.tsx
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
import React, { useMemo, useRef, useState, useEffect } from 'react';
|
||||||
|
import { Virtualizer, VirtualizerOptions } from '@tanstack/virtual-core';
|
||||||
|
import type { VideoData } from '../types/video';
|
||||||
|
import { formatDuration, formatDate } from '../utils/csvParser';
|
||||||
|
import { Badge } from './ui/badge';
|
||||||
|
import { Button } from './ui/button';
|
||||||
|
|
||||||
|
interface VirtualTableProps {
|
||||||
|
data: VideoData[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function VirtualTable({ data }: VirtualTableProps) {
|
||||||
|
const parentRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [virtualizer, setVirtualizer] = useState<Virtualizer<HTMLDivElement, Element> | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!parentRef.current) return;
|
||||||
|
|
||||||
|
const virtualizerOptions: VirtualizerOptions<HTMLDivElement, Element> = {
|
||||||
|
count: data.length,
|
||||||
|
getScrollElement: () => parentRef.current,
|
||||||
|
estimateSize: () => 120,
|
||||||
|
overscan: 5,
|
||||||
|
};
|
||||||
|
|
||||||
|
const newVirtualizer = new Virtualizer(virtualizerOptions);
|
||||||
|
setVirtualizer(newVirtualizer);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
newVirtualizer.destroy();
|
||||||
|
};
|
||||||
|
}, [data.length]);
|
||||||
|
|
||||||
|
const items = virtualizer?.getVirtualItems() ?? [];
|
||||||
|
|
||||||
|
if (!virtualizer) {
|
||||||
|
return <div>Loading...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border rounded-lg overflow-hidden">
|
||||||
|
{/* Table Header */}
|
||||||
|
<div className="bg-muted/50 border-b p-4">
|
||||||
|
<div className="grid grid-cols-12 gap-4 text-sm font-medium text-muted-foreground">
|
||||||
|
<div className="col-span-3">Video</div>
|
||||||
|
<div className="col-span-2">Channel</div>
|
||||||
|
<div className="col-span-2">Classification</div>
|
||||||
|
<div className="col-span-1">Language</div>
|
||||||
|
<div className="col-span-1">Duration</div>
|
||||||
|
<div className="col-span-2">Date</div>
|
||||||
|
<div className="col-span-1">Actions</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Virtual Container */}
|
||||||
|
<div
|
||||||
|
ref={parentRef}
|
||||||
|
className="h-[600px] overflow-auto"
|
||||||
|
style={{
|
||||||
|
contain: 'strict',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: `${virtualizer.getTotalSize()}px`,
|
||||||
|
width: '100%',
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{items.map((item) => {
|
||||||
|
const video = data[item.index];
|
||||||
|
if (!video) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={item.key}
|
||||||
|
data-index={item.index}
|
||||||
|
ref={virtualizer.measureElement}
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: '100%',
|
||||||
|
transform: `translateY(${item.start}px)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="border-b p-4 hover:bg-muted/50 transition-colors">
|
||||||
|
<div className="grid grid-cols-12 gap-4 items-start">
|
||||||
|
{/* Video Info */}
|
||||||
|
<div className="col-span-3 space-y-1">
|
||||||
|
<h3 className="font-medium text-sm leading-tight line-clamp-2">
|
||||||
|
{video.video_title}
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{video.detailed_subtags.split(',').slice(0, 3).map((tag, i) => (
|
||||||
|
<Badge key={i} variant="secondary" className="text-xs">
|
||||||
|
{tag.trim()}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Channel */}
|
||||||
|
<div className="col-span-2">
|
||||||
|
<div className="text-sm font-medium">{video.channel_name}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">{video.playlist_name}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Classification */}
|
||||||
|
<div className="col-span-2">
|
||||||
|
<Badge variant="default" className="text-xs">
|
||||||
|
{video.classification}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Language */}
|
||||||
|
<div className="col-span-1">
|
||||||
|
<Badge variant="outline" className="text-xs">
|
||||||
|
{video.language}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Duration */}
|
||||||
|
<div className="col-span-1 text-sm">
|
||||||
|
{formatDuration(video.video_length_seconds)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Date */}
|
||||||
|
<div className="col-span-2 space-y-1">
|
||||||
|
<div className="text-sm">{formatDate(video.video_date)}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">
|
||||||
|
Added: {formatDate(video.timestamp)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="col-span-1">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => window.open(video.video_url, '_blank')}
|
||||||
|
className="text-xs"
|
||||||
|
>
|
||||||
|
Watch
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="bg-muted/50 border-t p-4">
|
||||||
|
<div className="text-sm text-muted-foreground text-center">
|
||||||
|
Showing {data.length} videos
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
36
web/src/components/ui/badge.tsx
Normal file
36
web/src/components/ui/badge.tsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
|
||||||
|
secondary:
|
||||||
|
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
destructive:
|
||||||
|
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
|
||||||
|
outline: "text-foreground",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export interface BadgeProps
|
||||||
|
extends React.HTMLAttributes<HTMLDivElement>,
|
||||||
|
VariantProps<typeof badgeVariants> {}
|
||||||
|
|
||||||
|
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||||
|
return (
|
||||||
|
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants }
|
||||||
25
web/src/components/ui/input.tsx
Normal file
25
web/src/components/ui/input.tsx
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
export interface InputProps
|
||||||
|
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||||
|
({ className, type, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
className={cn(
|
||||||
|
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Input.displayName = "Input"
|
||||||
|
|
||||||
|
export { Input }
|
||||||
23
web/src/components/ui/select.tsx
Normal file
23
web/src/components/ui/select.tsx
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const Select = React.forwardRef<
|
||||||
|
HTMLSelectElement,
|
||||||
|
React.SelectHTMLAttributes<HTMLSelectElement>
|
||||||
|
>(({ className, children, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<select
|
||||||
|
className={cn(
|
||||||
|
"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</select>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
Select.displayName = "Select"
|
||||||
|
|
||||||
|
export { Select }
|
||||||
2
web/src/env.d.ts
vendored
Normal file
2
web/src/env.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
/// <reference path="../.astro/types.d.ts" />
|
||||||
|
/// <reference types="astro/client" />
|
||||||
51
web/src/pages/api/videos.ts
Normal file
51
web/src/pages/api/videos.ts
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
import type { APIRoute } from 'astro';
|
||||||
|
import { readFileSync, existsSync } from 'fs';
|
||||||
|
import { join } from 'path';
|
||||||
|
import { parseCSV } from '../../utils/csvParser';
|
||||||
|
|
||||||
|
export const GET: APIRoute = async () => {
|
||||||
|
try {
|
||||||
|
// Look for CSV file in the project root (outside web folder)
|
||||||
|
const csvPath = join(process.cwd(), '..', 'video_classifications.csv');
|
||||||
|
|
||||||
|
if (!existsSync(csvPath)) {
|
||||||
|
return new Response(
|
||||||
|
JSON.stringify({
|
||||||
|
error: 'CSV file not found',
|
||||||
|
message: 'video_classifications.csv not found in project root',
|
||||||
|
path: csvPath
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
status: 404,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const csvContent = readFileSync(csvPath, 'utf-8');
|
||||||
|
const videos = parseCSV(csvContent);
|
||||||
|
|
||||||
|
return new Response(JSON.stringify({ videos }), {
|
||||||
|
status: 200,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error reading CSV file:', error);
|
||||||
|
return new Response(
|
||||||
|
JSON.stringify({
|
||||||
|
error: 'Failed to read CSV file',
|
||||||
|
message: error instanceof Error ? error.message : 'Unknown error'
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
status: 500,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -1,27 +1,30 @@
|
|||||||
---
|
---
|
||||||
import '../styles/global.css';
|
import '../styles/global.css';
|
||||||
// Component Imports
|
|
||||||
import Button from '../components/Button.astro';
|
|
||||||
import {Button as ShadcnButton} from '../components/ui/button.tsx';
|
|
||||||
|
|
||||||
// Full Astro Component Syntax:
|
|
||||||
// https://docs.astro.build/basics/astro-components/
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>Astro + TailwindCSS</title>
|
<title>YouTube Video Classifier</title>
|
||||||
|
<meta name="description" content="AI-powered YouTube video classification and management platform" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body class="min-h-screen bg-background">
|
||||||
<div class="grid place-items-center h-screen content-center">
|
<div id="app"></div>
|
||||||
<Button>Tailwind Button in Astro!</Button>
|
|
||||||
<a href="/markdown-page" class="p-4 underline">Markdown is also supported...</a>
|
<script>
|
||||||
<ShadcnButton>Shadcn Button</ShadcnButton>
|
import VideoClassifierApp from '../components/VideoClassifierApp.tsx';
|
||||||
</div>
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const container = document.getElementById('app');
|
||||||
|
if (container) {
|
||||||
|
const root = createRoot(container);
|
||||||
|
root.render(React.createElement(VideoClassifierApp));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
22
web/src/types/video.ts
Normal file
22
web/src/types/video.ts
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
export interface VideoData {
|
||||||
|
video_title: string;
|
||||||
|
video_url: string;
|
||||||
|
thumbnail_url: string;
|
||||||
|
classification: string;
|
||||||
|
language: string;
|
||||||
|
channel_name: string;
|
||||||
|
channel_link: string;
|
||||||
|
video_length_seconds: number;
|
||||||
|
video_date: string;
|
||||||
|
detailed_subtags: string;
|
||||||
|
playlist_name: string;
|
||||||
|
playlist_link: string;
|
||||||
|
image_data: string;
|
||||||
|
timestamp: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FilterOptions {
|
||||||
|
classification: string[];
|
||||||
|
language: string[];
|
||||||
|
playlist_name: string[];
|
||||||
|
}
|
||||||
41
web/src/utils/csvParser.ts
Normal file
41
web/src/utils/csvParser.ts
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import Papa from 'papaparse';
|
||||||
|
import type { VideoData } from '../types/video';
|
||||||
|
|
||||||
|
export function parseCSV(csvText: string): VideoData[] {
|
||||||
|
const result = Papa.parse<VideoData>(csvText, {
|
||||||
|
header: true,
|
||||||
|
skipEmptyLines: true,
|
||||||
|
transform: (value, field) => {
|
||||||
|
// Convert numeric fields
|
||||||
|
if (field === 'video_length_seconds') {
|
||||||
|
return parseInt(value) || 0;
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (result.errors.length > 0) {
|
||||||
|
console.warn('CSV parsing errors:', result.errors);
|
||||||
|
}
|
||||||
|
|
||||||
|
return result.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatDuration(seconds: number): string {
|
||||||
|
const minutes = Math.floor(seconds / 60);
|
||||||
|
const remainingSeconds = seconds % 60;
|
||||||
|
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatDate(dateString: string): string {
|
||||||
|
try {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleDateString('en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric'
|
||||||
|
});
|
||||||
|
} catch {
|
||||||
|
return dateString;
|
||||||
|
}
|
||||||
|
}
|
||||||
57
web/src/utils/search.ts
Normal file
57
web/src/utils/search.ts
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import type { VideoData } from '../types/video';
|
||||||
|
|
||||||
|
export function searchVideos(videos: VideoData[], searchTerm: string): VideoData[] {
|
||||||
|
if (!searchTerm.trim()) return videos;
|
||||||
|
|
||||||
|
const term = searchTerm.toLowerCase();
|
||||||
|
|
||||||
|
return videos.filter(video => {
|
||||||
|
const searchableFields = [
|
||||||
|
video.video_title,
|
||||||
|
video.channel_name,
|
||||||
|
video.detailed_subtags,
|
||||||
|
video.classification,
|
||||||
|
video.language,
|
||||||
|
video.playlist_name,
|
||||||
|
video.video_length_seconds.toString(),
|
||||||
|
formatDateForSearch(video.video_date),
|
||||||
|
formatDateForSearch(video.timestamp)
|
||||||
|
];
|
||||||
|
|
||||||
|
return searchableFields.some(field =>
|
||||||
|
field && field.toLowerCase().includes(term)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDateForSearch(dateString: string): string {
|
||||||
|
try {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleDateString('en-US');
|
||||||
|
} catch {
|
||||||
|
return dateString;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function filterVideos(
|
||||||
|
videos: VideoData[],
|
||||||
|
filters: { classification?: string; language?: string; playlist_name?: string }
|
||||||
|
): VideoData[] {
|
||||||
|
return videos.filter(video => {
|
||||||
|
if (filters.classification && filters.classification !== 'all' && video.classification !== filters.classification) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (filters.language && filters.language !== 'all' && video.language !== filters.language) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (filters.playlist_name && filters.playlist_name !== 'all' && video.playlist_name !== filters.playlist_name) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getUniqueValues(videos: VideoData[], field: keyof VideoData): string[] {
|
||||||
|
const values = videos.map(video => video[field] as string).filter(Boolean);
|
||||||
|
return [...new Set(values)].sort();
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user