12 | {children}
14 |
15 | );
16 | };
--------------------------------------------------------------------------------
/app/components/ThemeToggle.tsx:
--------------------------------------------------------------------------------
1 | import { useDarkMode } from '@/app/hooks/useDarkMode';
2 | import { Badge } from './ui/Badge';
3 |
4 | export const ThemeToggle = () => {
5 | const [theme, toggleTheme] = useDarkMode();
6 |
7 | return (
8 |
9 |
14 | {theme === 'dark' ? 'Dark Mode' : 'Light Mode'}
15 |
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/app/components/chat/AutocompleteDropdown.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FaceData } from '@/lib/types/search';
3 |
4 | interface AutocompleteDropdownProps {
5 | filteredFaces: FaceData[];
6 | selectedAutocompleteIndex: number;
7 | onFaceClick: (faceName: string) => () => void;
8 | onFaceHover: (index: number) => () => void;
9 | autocompleteRef: React.RefObject
27 | {filteredFaces.map((face, index) => {
28 | const isSelected = index === selectedAutocompleteIndex;
29 | const initial = face.name.charAt(0).toUpperCase();
30 |
31 | return (
32 |
63 | );
64 | };
65 |
--------------------------------------------------------------------------------
/app/components/chat/ChatInputArea.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { SearchSuggestions } from './SearchSuggestions';
3 | import { SearchInput } from './SearchInput';
4 | import { AdvancedSetting } from './AdvancedSetting';
5 | import { Video } from '@/lib/types/video';
6 | import { SearchMetadata, VideoConfig } from '@/lib/types/search';
7 |
8 | interface ChatInputAreaProps {
9 | prompt: string;
10 | setPrompt: (prompt: string) => void;
11 | videos: Video[];
12 | textareaRef: React.RefObject
40 | {face.thumbnail ? (
41 | 
47 | ) : (
48 |
60 | );
61 | })}
62 |
49 | {initial}
50 |
51 | )}
52 |
53 |
54 | {face.name}
55 |
56 | {face.count} scene{face.count !== 1 ? 's' : ''}
57 |
58 |
59 |
43 | {!prompt && suggestions.length > 0 && (
44 |
71 | );
72 | };
73 |
--------------------------------------------------------------------------------
/app/components/chat/GenerationStatus.tsx:
--------------------------------------------------------------------------------
1 | import { AnimatePresence, motion } from 'framer-motion'
2 | import confetti from 'canvas-confetti'
3 | import { useEffect } from 'react'
4 | import { GenerationResult } from '@/lib/types/search'
5 |
6 | interface GenerationStatusProps {
7 | generationStatus: string | null
8 | generationResult: GenerationResult | null
9 | onOpenVideo: () => void
10 | onShowInFinder: () => void
11 | }
12 |
13 | export const GenerationStatus = ({
14 | generationStatus,
15 | generationResult,
16 | onOpenVideo,
17 | onShowInFinder,
18 | }: GenerationStatusProps) => {
19 | useEffect(() => {
20 | if (generationResult) {
21 | confetti({
22 | particleCount: 100,
23 | spread: 70,
24 | origin: { y: 0.6 },
25 | colors: ['#ff7f50', '#ffdb4d', '#4caf50', '#2196f3'],
26 | })
27 | }
28 | }, [generationResult])
29 |
30 | if (!generationStatus) return null
31 |
32 | return (
33 | {generationStatus}
42 |
43 | 22 | Found {resultsCount} Scene{resultsCount !== 1 ? 's' : ''} 23 |
24 | 25 |
26 |
33 |
34 |
41 |
42 |
33 | {scene.thumbnailUrl ? (
34 | 
40 | ) : (
41 |
69 | );
70 | };
71 |
--------------------------------------------------------------------------------
/app/components/chat/SearchResults.tsx:
--------------------------------------------------------------------------------
1 | import { Scene } from '@/lib/types/scene';
2 | import { motion } from 'framer-motion';
3 | import type { FC, MouseEvent } from 'react';
4 | import { ResultsHeader } from './ResultsHeader';
5 | import { SceneCard } from './SceneCard';
6 |
7 | export type SortOrder = 'asc' | 'desc';
8 |
9 | interface SearchResultsProps {
10 | sortedSearchResults: readonly Scene[];
11 | allScenesSelected: boolean;
12 | toggleSelectAll: () => void;
13 | sortOrder: SortOrder;
14 | setSortOrder: (order: SortOrder) => void;
15 | toggleSceneSelection: (index: number) => void;
16 | selectedScenes: ReadonlySet
42 | No Preview
43 |
44 | )}
45 |
46 |
47 |
54 |
55 | {isSelected && (
56 |
67 | )}
68 | 48 | {fileName} 49 |
50 |{timeRange}
51 |{scene.camera}
52 |{scene.createdAt}
53 |
54 |
82 | {loading ? (
83 | <>
84 |
85 | Generating...
86 |
87 | ) : (
88 | `Generate Rough Cut (${selectedCount} scene${selectedCount !== 1 ? 's' : ''})`
89 | )}
90 |
91 |
92 | );
93 | };
--------------------------------------------------------------------------------
/app/components/chat/SearchResultsArea.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { GenerationStatus } from './GenerationStatus';
3 | import { SearchResults, SortOrder } from './SearchResults';
4 | import { Scene } from '@/lib/types/scene';
5 | import { GenerationResult } from '@/lib/types/search';
6 |
7 | interface SearchResultsAreaProps {
8 | generationStatus: string | null;
9 | generationResult: GenerationResult | null;
10 | handleOpenVideo: () => void;
11 | handleShowInFinder: () => void;
12 | sortedSearchResults: readonly Scene[];
13 | sortOrder: SortOrder;
14 | setSortOrder: (order: SortOrder) => void;
15 | handleGenerateRoughCut: () => void | Promise
63 | {sortedSearchResults.map((scene, index) => (
64 |
73 |
74 |
26 |
27 | {loadingSuggestions ? 'Analyzing your videos...' : 'Try searching for:'}
28 |
29 |
30 |
54 | )
55 | }
56 |
--------------------------------------------------------------------------------
/app/components/index/FeatureItem.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from 'framer-motion';
2 |
3 | export const FeatureItem = ({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) => {
4 | return (
5 |
31 | {loadingSuggestions
32 | ? Array.from({ length: SKELETON_COUNT }, (_, i) => (
33 |
37 | ))
38 | : suggestions.map((suggestion) => (
39 |
51 | ))}
52 |
53 | {icon}
12 |
13 |
16 | {title}
14 |{description}
15 |
10 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/app/components/index/FolderSelection.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from '@/app/components/ui/Button';
3 | import { FolderIcon, FolderCheckIcon } from 'lucide-react';
4 |
5 | interface FolderSelectionProps {
6 | selectedFolder: string | null;
7 | videos: string[];
8 | handleSelectFolder: () => void;
9 | handleCancelIndexing: () => void;
10 | }
11 |
12 | export const FolderSelection: React.FC
20 | {!selectedFolder ? (
21 |
25 | ) : (
26 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/app/components/index/IndexingSection.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from '@/app/components/ui/Button';
3 | import { PlayIcon } from 'lucide-react';
4 | import { IndexingProgress, IndexingProgressProps } from '../IndexingProgress';
5 |
6 | interface IndexingSectionProps {
7 | isIndexing: boolean;
8 | indexingProgress: IndexingProgressProps | null;
9 | handleStartIndexing: () => void;
10 | }
11 |
12 | export const IndexingSection: React.FC
27 |
39 | )}
40 |
28 |
35 |
38 |
30 | Selected folder:
31 | {selectedFolder}
32 | {videos.length} videos
33 |
34 |
19 | {!isIndexing ? (
20 |
24 | ) : (
25 | indexingProgress &&
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/app/components/settings/SettingsInput.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Input } from '@/app/components/ui/Input';
3 | import { Label } from '@/app/components/ui/Label';
4 |
5 | interface SettingsInputProps {
6 | id: string;
7 | label: string;
8 | type?: string;
9 | value: string | number;
10 | onChange: (e: React.ChangeEvent
19 |
20 |
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/app/components/settings/SettingsSection.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CardHeader, CardTitle, CardContent } from '@/app/components/ui/Card';
3 |
4 | interface SettingsSectionProps {
5 | title: string;
6 | children: React.ReactNode;
7 | }
8 |
9 | export const SettingsSection: React.FC{children}
17 |
15 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/app/components/training/KnownFacesGrid.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { KnownFace } from '@/lib/types/face';
3 | import { UserPlus } from 'lucide-react';
4 | import { Badge } from '@/app/components/ui/Badge';
5 |
6 | interface KnownFacesGridProps {
7 | knownFaces: KnownFace[];
8 | }
9 |
10 | export const KnownFacesGrid: React.FC
13 | {knownFaces.map((face) => (
14 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/app/components/training/LabelingForm.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from '@/app/components/ui/Button';
3 | import { Input } from '@/app/components/ui/Input';
4 | import { Label } from '@/app/components/ui/Label';
5 | import { Tabs, TabsList, TabsTrigger } from '@/app/components/ui/Tabs';
6 | import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/app/components/ui/Select';
7 | import { Loader2, Check } from 'lucide-react';
8 | import { KnownFace } from '@/lib/types/face';
9 |
10 | interface LabelingFormProps {
11 | selectedFacesCount: number;
12 | handleSelectAll: () => void;
13 | labelMode: 'existing' | 'new';
14 | setLabelMode: (mode: 'existing' | 'new') => void;
15 | selectedKnownFace: string;
16 | setSelectedKnownFace: (name: string) => void;
17 | knownFaces: KnownFace[];
18 | newFaceName: string;
19 | setNewFaceName: (name: string) => void;
20 | handleLabelFaces: () => void;
21 | isLabeling: boolean;
22 | unknownFacesCount: number;
23 | }
24 |
25 | export const LabelingForm: React.FC
15 | {face.images.length > 0 ? (
16 | 
17 | ) : (
18 |
29 | ))}
30 |
19 |
21 | )}
22 |
23 |
25 | {face.images.length} samples
26 |
27 |
28 | {face.name}
24 |
41 |
116 | );
117 | };
118 |
--------------------------------------------------------------------------------
/app/components/training/UnknownFacesGrid.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { UnknownFace } from '@/lib/types/face';
3 | import { Check, X } from 'lucide-react';
4 |
5 | interface UnknownFacesGridProps {
6 | unknownFaces: UnknownFace[];
7 | selectedFaces: Set
42 |
43 |
46 |
47 |
48 |
49 |
115 |
50 |
51 | setLabelMode(value as 'existing' | 'new')}
54 | className="w-full mt-2"
55 | >
56 |
57 | Use Existing Name
58 | Create New Name
59 |
60 |
61 |
62 |
63 | {labelMode === 'existing' ? (
64 |
65 |
66 |
78 |
79 | ) : (
80 |
81 |
82 | setNewFaceName(e.target.value)}
87 | className="mt-2"
88 | />
89 |
90 | )}
91 |
92 |
114 |
20 | {unknownFaces.map((face) => (
21 |
59 | );
60 | };
61 |
--------------------------------------------------------------------------------
/app/components/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Slot } from '@radix-ui/react-slot'
3 | import { cva, type VariantProps } from 'class-variance-authority'
4 |
5 | import { cn } from '@/lib/utils'
6 |
7 | const badgeVariants = cva(
8 | 'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
9 | {
10 | variants: {
11 | variant: {
12 | default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
13 | secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
14 | destructive:
15 | 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
16 | outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
17 | },
18 | },
19 | defaultVariants: {
20 | variant: 'default',
21 | },
22 | }
23 | )
24 |
25 | const Badge = ({ className, variant, asChild = false, ...props }: React.ComponentProps<'span'> & VariantProps handleSelectFace(face.image_hash)}
29 | >
30 | {selectedFaces.has(face.image_hash) && (
31 | 
52 |
57 | ))}
58 |
32 |
34 | )}
35 |
36 |
46 |
47 |
53 |
56 | Video: {face.video_name}
54 |Time: {face.formatted_timestamp}
55 |
29 |
74 | );
75 | };
76 |
--------------------------------------------------------------------------------
/app/components/videos/FilterGroup.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ChevronDown, ChevronRight } from 'lucide-react';
3 | import { Button } from '@/app/components/ui/Button';
4 | import { Input } from '@/app/components/ui/Input';
5 | import { FilterOptions } from './FilterOptions';
6 |
7 | interface FilterGroupProps {
8 | category: string;
9 | values: string[];
10 | selectedValues: string[];
11 | isExpanded: boolean;
12 | searchTerm: string;
13 | onToggle: () => void;
14 | onSearchChange: (value: string) => void;
15 | onFilterChange: (value: string) => void;
16 | onClear: () => void;
17 | getCategoryLabel: (category: string) => string;
18 | }
19 |
20 | export const FilterGroup: React.FC
30 |
32 |
33 | Video Library
31 |
34 |
73 |
35 |
49 |
50 |
51 |
58 |
65 |
66 |
67 |
72 |
36 |
56 |
57 | {isExpanded && (
58 |
76 | );
77 | };
78 |
--------------------------------------------------------------------------------
/app/components/videos/FilterOptions.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface FilterOptionsProps {
4 | values: string[];
5 | selectedValues: string[];
6 | onFilterChange: (value: string) => void;
7 | }
8 |
9 | export const FilterOptions: React.FC
59 | {values.length > 5 && (
60 | onSearchChange(e.target.value)}
65 | className="filter-search"
66 | />
67 | )}
68 |
74 | )}
75 | No matches found
; 12 | } 13 | 14 | return ( 15 |
16 | {values.map((value) => {
17 | const isSelected = selectedValues.includes(value);
18 | return (
19 |
27 | );
28 | })}
29 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/app/components/videos/FilterSidebar.tsx:
--------------------------------------------------------------------------------
1 | import '@/app/styles/FilterSidebar.css'
2 | import React from 'react';
3 | import { X } from 'lucide-react';
4 | import { Button } from '@/app/components/ui/Button';
5 | import { useFilterSidebar } from '@/app/hooks/useFilterSidebar';
6 | import { FilterGroup } from './FilterGroup';
7 |
8 | interface FilterSidebarProps {
9 | filters: Record
64 |
89 | );
90 | };
91 |
--------------------------------------------------------------------------------
/app/components/videos/VideoCard.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Video } from '@/lib/types/video';
3 | import { useVideoCard } from '../../hooks/useVideoCard';
4 | import { VideoThumbnail } from './VideoThumbnail';
5 | import { VideoMetadata } from './VideoMetadata';
6 | import { VideoTags } from './VideoTags';
7 |
8 | interface VideoCardProps {
9 | video: Video;
10 | viewMode: 'grid' | 'list';
11 | }
12 |
13 | export const VideoCard: React.FC
65 |
70 |
71 | Filters
66 | 69 |
72 | {Object.entries(filters).map(([category, values]) => (
73 | toggleCategory(category)}
81 | onSearchChange={(value) => handleSearchTermChange(category, value)}
82 | onFilterChange={(value) => handleFilterChange(category, value)}
83 | onClear={() => clearCategory(category)}
84 | getCategoryLabel={getCategoryLabel}
85 | />
86 | ))}
87 |
88 |
18 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/app/components/videos/VideoGrid.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Video } from '@/lib/types/video';
3 | import { VideoCard } from './VideoCard';
4 |
5 | interface VideoGridProps {
6 | videos: Video[];
7 | }
8 |
9 | export const VideoGrid: React.FC
21 |
36 | 22 | {videoTitle} 23 |
24 | 25 |
12 | {videos.map((video) => (
13 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/app/components/videos/VideoList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Video } from '@/lib/types/video';
3 | import { VideoCard } from './VideoCard';
4 |
5 | interface VideoListProps {
6 | videos: Video[];
7 | }
8 |
9 | export const VideoList: React.FC
12 | {videos.map((video) => (
13 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/app/components/videos/VideoMetadata.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Camera, User, MapPin, Palette } from 'lucide-react';
3 |
4 | interface VideoMetadataProps {
5 | camera?: string;
6 | sceneCount: number;
7 | uniqueFaces: string[];
8 | uniqueLocations: string[];
9 | dominantColor: { name: string; hex: string } | null;
10 | viewMode: 'grid' | 'list';
11 | }
12 |
13 | export const VideoMetadata: React.FC
23 | {camera && (
24 |
65 | );
66 | };
67 |
--------------------------------------------------------------------------------
/app/components/videos/VideoTags.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { User, MapPin } from 'lucide-react';
3 |
4 | interface VideoTagsProps {
5 | uniqueFaces: string[];
6 | uniqueLocations: string[];
7 | }
8 |
9 | export const VideoTags: React.FC
25 |
28 | )}
29 |
30 | {sceneCount > 0 && (
31 |
32 | Scenes:
33 | {sceneCount}
34 |
35 | )}
36 |
37 | {uniqueFaces.length > 0 && (
38 |
39 |
44 | )}
45 |
46 | {uniqueLocations.length > 0 && (
47 |
48 |
53 | )}
54 |
55 | {dominantColor && viewMode === 'list' && (
56 |
57 |
63 | )}
64 |
12 | {uniqueFaces.length > 0 && (
13 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/app/components/videos/VideoThumbnail.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Clock } from 'lucide-react';
3 | import { Video } from '@/lib/types/video';
4 |
5 | interface VideoThumbnailProps {
6 | video: Video;
7 | dominantColor: { name: string; hex: string } | null;
8 | duration: string;
9 | }
10 |
11 | export const VideoThumbnail: React.FC
14 | {uniqueFaces.slice(0, 5).map((face) => (
15 |
16 |
22 | )}
23 |
24 | {uniqueLocations.length > 0 && (
25 |
26 | {uniqueLocations.slice(0, 3).map((location) => (
27 |
28 |
34 | )}
35 |
14 | 
19 | {video.duration && (
20 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/app/hooks/use-conveyor.ts:
--------------------------------------------------------------------------------
1 | type ConveyorKey = keyof Window['conveyor']
2 |
3 | /**
4 | * Use the conveyor for inter-process communication
5 | *
6 | * @param key - The key of the conveyor object to use
7 | * @returns The conveyor object or the keyed object
8 | */
9 | export const useConveyor =
21 |
24 | )}
25 | {dominantColor && (
26 |
31 | )}
32 |
13 |
14 | handleSwitchChange('resize_to_720p', checked)}
74 | />
75 |
76 |
77 |
78 | );
79 | };
--------------------------------------------------------------------------------
/app/pages/Videos.tsx:
--------------------------------------------------------------------------------
1 | import '@/app/styles/Videos.css';
2 | import React, { useState } from 'react';
3 | import { FilterSidebar } from '@/app/components/videos/FilterSidebar';
4 | import { useVideos } from '@/app/hooks/useVideos';
5 | import { VideoGrid } from '@/app/components/videos/VideoGrid';
6 | import { VideoList } from '@/app/components/videos/VideoList';
7 | import { FilterBar } from '@/app/components/videos/FilterBar';
8 | import { Button } from '@/app/components/ui/Button';
9 | import { X } from 'lucide-react';
10 |
11 | type ViewMode = 'grid' | 'list';
12 |
13 | export const Videos: React.FC = () => {
14 | const {
15 | filteredVideos,
16 | filters,
17 | setFilters,
18 | searchQuery,
19 | setSearchQuery,
20 | isLoading,
21 | filterableData,
22 | activeFiltersCount,
23 | clearAllFilters,
24 | } = useVideos();
25 |
26 | const [viewMode, setViewMode] = useState
37 | {showFilters && (
38 | setShowFilters(false)}
43 | />
44 | )}
45 |
46 |
100 | );
101 | };
--------------------------------------------------------------------------------
/app/renderer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import { ErrorBoundary } from './components/ErrorBoundary'
4 | import App from './app'
5 |
6 | ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
7 |
47 |
99 |
59 | Active filters:
60 | {Object.entries(filters).map(([category, values]) =>
61 | values.map((value) => (
62 |
75 | )}
76 |
77 | {isLoading ? (
78 |
63 | {category.slice(0, -1)}:
64 | {value}
65 |
68 |
69 | ))
70 | )}
71 |
74 |
79 |
80 |
82 | ) : filteredVideos.length === 0 ? (
83 | Loading videos...
81 |
84 |
93 | ) : viewMode === 'grid' ? (
94 | 🎬
85 | No videos found
86 |87 | {searchQuery || activeFiltersCount > 0 88 | ? 'Try adjusting your search or filters' 89 | : 'Start by adding videos to your library'} 90 |
91 | {(searchQuery || activeFiltersCount > 0) && } 92 |