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';
|
||||
// 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">
|
||||
<head>
|
||||
<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" />
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<div class="grid place-items-center h-screen content-center">
|
||||
<Button>Tailwind Button in Astro!</Button>
|
||||
<a href="/markdown-page" class="p-4 underline">Markdown is also supported...</a>
|
||||
<ShadcnButton>Shadcn Button</ShadcnButton>
|
||||
</div>
|
||||
<body class="min-h-screen bg-background">
|
||||
<div id="app"></div>
|
||||
|
||||
<script>
|
||||
import VideoClassifierApp from '../components/VideoClassifierApp.tsx';
|
||||
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>
|
||||
</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