AI Media Recognition Platform

Loading application...

Error: ${error.message}

\n \n \n `);\n }\n});\n\n// Catch-all route for SPA routing\napp.get(\"*\", async c => {\n // For any other route, serve the main app (SPA routing)\n return app.fetch(new Request(new URL(\"/\", c.req.url)));\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[152,252],[152],{"_104":261,"_95":262,"_153":263,"_155":-5,"_156":138,"_157":264,"_159":160,"_106":265,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":266,"_98":327},"c18548fa-3cba-11f0-aa86-9e149126039e","frontend","b8367289-7745-4625-961a-e594774f7d4d",17,["D",1748543325673],[267,309,318],{"_104":268,"_95":269,"_153":270,"_155":263,"_156":138,"_157":271,"_159":160,"_106":272,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":273,"_98":308},"cdb7e4de-3cba-11f0-b7dd-9e149126039e","components","420348fe-490a-49ac-adf7-fdcd5f2e2f5e",19,["D",1748543346137],[274,282,291,300],{"_104":275,"_95":276,"_153":277,"_155":270,"_156":138,"_157":271,"_159":160,"_106":278,"_100":32,"_162":180,"_164":279,"_165":22,"_166":-5,"_167":280,"_98":281},"cdb7d958-3cba-11f0-b7dd-9e149126039e","App.tsx","cdb7da34-3cba-11f0-b7dd-9e149126039e",["D",1748543346137],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport AuthComponent from \"./AuthComponent.tsx\";\nimport Dashboard from \"./Dashboard.tsx\";\nimport { AuthService } from \"../services/AuthService.ts\";\nimport type { User } from \"../../shared/types.ts\";\n\nexport default function App() {\n const [user, setUser] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n checkAuthStatus();\n }, []);\n\n const checkAuthStatus = async () => {\n try {\n const token = localStorage.getItem('auth_token');\n if (token) {\n const response = await AuthService.getCurrentUser();\n if (response.success && response.user) {\n setUser(response.user);\n } else {\n localStorage.removeItem('auth_token');\n }\n }\n } catch (error) {\n console.error('Auth check failed:', error);\n localStorage.removeItem('auth_token');\n } finally {\n setLoading(false);\n }\n };\n\n const handleLogin = (userData: User, token: string) => {\n setUser(userData);\n localStorage.setItem('auth_token', token);\n setError(null);\n };\n\n const handleLogout = async () => {\n try {\n await AuthService.logout();\n } catch (error) {\n console.error('Logout error:', error);\n } finally {\n setUser(null);\n localStorage.removeItem('auth_token');\n }\n };\n\n if (loading) {\n return (\n

\n );\n }\n\n if (!user) {\n return (\n

\n \n

\n );\n }\n\n return (\n

\n \n

\n );\n}",[],[262,269,276],{"_104":283,"_95":284,"_153":285,"_155":270,"_156":138,"_157":286,"_159":160,"_106":287,"_100":32,"_162":180,"_164":288,"_165":22,"_166":-5,"_167":289,"_98":290},"de59bd12-3cba-11f0-8179-9e149126039e","AuthComponent.tsx","de59bdc6-3cba-11f0-8179-9e149126039e",20,["D",1748543374044],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { AuthService } from \"../services/AuthService.ts\";\nimport { validateEmail, validatePassword } from \"../../shared/utils.ts\";\nimport type { User } from \"../../shared/types.ts\";\n\ninterface AuthComponentProps {\n onLogin: (user: User, token: string) => void;\n error: string | null;\n setError: (error: string | null) => void;\n}\n\nexport default function AuthComponent({ onLogin, error, setError }: AuthComponentProps) {\n const [isLogin, setIsLogin] = useState(true);\n const [loading, setLoading] = useState(false);\n const [formData, setFormData] = useState({\n email: '',\n username: '',\n password: '',\n confirmPassword: ''\n });\n\n const handleInputChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setFormData(prev => ({ ...prev, [name]: value }));\n setError(null);\n };\n\n const validateForm = () => {\n if (!formData.email || !formData.password) {\n setError('Email and password are required');\n return false;\n }\n\n if (!validateEmail(formData.email)) {\n setError('Please enter a valid email address');\n return false;\n }\n\n if (!isLogin) {\n if (!formData.username) {\n setError('Username is required');\n return false;\n }\n\n const passwordValidation = validatePassword(formData.password);\n if (!passwordValidation.valid) {\n setError(passwordValidation.message!);\n return false;\n }\n\n if (formData.password !== formData.confirmPassword) {\n setError('Passwords do not match');\n return false;\n }\n }\n\n return true;\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!validateForm()) return;\n\n setLoading(true);\n setError(null);\n\n try {\n let response;\n \n if (isLogin) {\n response = await AuthService.login(formData.email, formData.password);\n } else {\n response = await AuthService.signup(formData.email, formData.username, formData.password);\n }\n\n if (response.success && response.user && response.token) {\n onLogin(response.user, response.token);\n } else {\n setError(response.message || 'Authentication failed');\n }\n } catch (error) {\n setError('Network error. Please try again.');\n console.error('Auth error:', error);\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

🤖

\n AI Media Recognition Platform\n

\n {isLogin ? 'Sign in to your account' : 'Create your account'}\n

\n\n

\n \n Email address\n \n \n

\n\n {!isLogin && (\n

\n \n Username\n \n \n

\n )}\n\n

\n \n Password\n \n \n

\n\n {!isLogin && (\n

\n \n Confirm Password\n \n \n

\n )}\n

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n \n {loading ? (\n

\n ) : (\n isLogin ? 'Sign In' : 'Sign Up'\n )}\n \n

\n\n

\n {\n setIsLogin(!isLogin);\n setError(null);\n setFormData({\n email: '',\n username: '',\n password: '',\n confirmPassword: ''\n });\n }}\n className=\"text-indigo-600 hover:text-indigo-500 text-sm font-medium\"\n >\n {isLogin \n ? \"Don't have an account? Sign up\" \n : \"Already have an account? Sign in\"\n }\n \n

\n\n

Secure authentication with encrypted passwords

Your data is protected and never shared

\n );\n}",[],[262,269,284],{"_104":292,"_95":293,"_153":294,"_155":270,"_156":138,"_157":295,"_159":160,"_106":296,"_100":32,"_162":180,"_164":297,"_165":22,"_166":-5,"_167":298,"_98":299},"ef445c40-3cba-11f0-adf7-9e149126039e","Dashboard.tsx","ef445cfe-3cba-11f0-adf7-9e149126039e",21,["D",1748543402424],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport MediaCapture from \"./MediaCapture.tsx\";\nimport MediaAnalysis from \"./MediaAnalysis.tsx\";\nimport SearchComponent from \"./SearchComponent.tsx\";\nimport HistoryComponent from \"./HistoryComponent.tsx\";\nimport type { User } from \"../../shared/types.ts\";\n\ninterface DashboardProps {\n user: User;\n onLogout: () => void;\n}\n\ntype TabType = 'capture' | 'search' | 'history';\n\nexport default function Dashboard({ user, onLogout }: DashboardProps) {\n const [activeTab, setActiveTab] = useState('capture');\n const [analysisData, setAnalysisData] = useState(null);\n\n const handleAnalysisComplete = (data: any) => {\n setAnalysisData(data);\n };\n\n const tabs = [\n { id: 'capture', label: 'Capture & Analyze', icon: '📸' },\n { id: 'search', label: 'Search', icon: '🔍' },\n { id: 'history', label: 'History', icon: '📚' }\n ];\n\n return (\n

\n {/* Header */}\n

\n 🤖\n

\n AI Media Recognition\n

\n \n

\n \n Welcome, {user.username}\n \n \n Logout\n \n

\n\n {/* Navigation Tabs */}\n

\n {tabs.map((tab) => (\n setActiveTab(tab.id as TabType)}\n className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${\n activeTab === tab.id\n ? 'border-indigo-500 text-indigo-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n {tab.icon}\n {tab.label}\n \n ))}\n

\n\n {/* Main Content */}\n

\n {/* Primary Content */}\n

\n {activeTab === 'capture' && (\n

\n \n {analysisData && (\n \n )}\n

\n )}\n \n {activeTab === 'search' && (\n \n )}\n \n {activeTab === 'history' && (\n \n )}\n

\n\n {/* Sidebar */}\n

\n Platform Features\n

\n \n

\n 🖼️\n

Image Analysis

\n AI-powered object detection, scene understanding, and text recognition\n

\n \n

\n 🎵\n

Audio Processing

\n Speech-to-text transcription and audio content analysis\n

\n \n

\n 🎬\n

Video Understanding

\n Content analysis and intelligent video categorization\n

\n \n

\n 🔍\n

Smart Search

\n Find similar content using natural language descriptions\n

\n\n {/* Quick Stats */}\n

\n Quick Stats\n

\n \n

\n Account Created\n \n {new Date(user.created_at).toLocaleDateString()}\n \n

\n \n

\n Current Tab\n {activeTab}\n

\n );\n}",[],[262,269,293],{"_104":301,"_95":302,"_153":303,"_155":270,"_156":138,"_157":101,"_159":160,"_106":304,"_100":32,"_162":180,"_164":305,"_165":22,"_166":-5,"_167":306,"_98":307},"0bfae412-3cbb-11f0-9451-9e149126039e","MediaCapture.tsx","0bfae4e4-3cbb-11f0-9451-9e149126039e",["D",1748543450599],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { MediaService } from \"../services/MediaService.ts\";\nimport { formatFileSize } from \"../../shared/utils.ts\";\nimport { MEDIA_CONSTRAINTS } from \"../../shared/types.ts\";\n\ninterface MediaCaptureProps {\n onAnalysisComplete: (data: any) => void;\n}\n\nexport default function MediaCapture({ onAnalysisComplete }: MediaCaptureProps) {\n const [selectedFile, setSelectedFile] = useState(null);\n const [previewUrl, setPreviewUrl] = useState(null);\n const [isCapturing, setIsCapturing] = useState(false);\n const [isAnalyzing, setIsAnalyzing] = useState(false);\n const [error, setError] = useState(null);\n const [captureMode, setCaptureMode] = useState<'photo' | 'video' | 'audio' | null>(null);\n \n const fileInputRef = useRef(null);\n const videoRef = useRef(null);\n const canvasRef = useRef(null);\n const mediaRecorderRef = useRef(null);\n const streamRef = useRef(null);\n\n const handleFileSelect = (event: React.ChangeEvent) => {\n const file = event.target.files?.[0];\n if (!file) return;\n\n setError(null);\n\n // Validate file size\n if (file.size > MEDIA_CONSTRAINTS.maxFileSize) {\n setError(`File too large. Maximum size is ${formatFileSize(MEDIA_CONSTRAINTS.maxFileSize)}`);\n return;\n }\n\n // Validate file type\n if (!MEDIA_CONSTRAINTS.allowedTypes.includes(file.type)) {\n setError('Unsupported file type. Please select an image, video, or audio file.');\n return;\n }\n\n setSelectedFile(file);\n\n // Create preview URL\n const url = URL.createObjectURL(file);\n setPreviewUrl(url);\n };\n\n const startCapture = async (mode: 'photo' | 'video' | 'audio') => {\n try {\n setError(null);\n setCaptureMode(mode);\n setIsCapturing(true);\n\n let constraints: MediaStreamConstraints = {};\n\n if (mode === 'photo' || mode === 'video') {\n constraints.video = {\n facingMode: 'environment' // Use back camera by default\n };\n }\n\n if (mode === 'video' || mode === 'audio') {\n constraints.audio = true;\n }\n\n const stream = await navigator.mediaDevices.getUserMedia(constraints);\n streamRef.current = stream;\n\n if (videoRef.current && (mode === 'photo' || mode === 'video')) {\n videoRef.current.srcObject = stream;\n videoRef.current.play();\n }\n\n if (mode === 'video' || mode === 'audio') {\n const mediaRecorder = new MediaRecorder(stream);\n mediaRecorderRef.current = mediaRecorder;\n\n const chunks: BlobPart[] = [];\n mediaRecorder.ondataavailable = (event) => {\n if (event.data.size > 0) {\n chunks.push(event.data);\n }\n };\n\n mediaRecorder.onstop = () => {\n const blob = new Blob(chunks, { \n type: mode === 'video' ? 'video/webm' : 'audio/webm' \n });\n const file = new File([blob], `captured_${mode}_${Date.now()}.webm`, {\n type: blob.type\n });\n \n setSelectedFile(file);\n setPreviewUrl(URL.createObjectURL(blob));\n stopCapture();\n };\n\n mediaRecorder.start();\n }\n } catch (error) {\n setError('Failed to access camera/microphone. Please check permissions.');\n console.error('Capture error:', error);\n setIsCapturing(false);\n setCaptureMode(null);\n }\n };\n\n const capturePhoto = () => {\n if (!videoRef.current || !canvasRef.current) return;\n\n const video = videoRef.current;\n const canvas = canvasRef.current;\n const context = canvas.getContext('2d');\n\n if (!context) return;\n\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n context.drawImage(video, 0, 0);\n\n canvas.toBlob((blob) => {\n if (blob) {\n const file = new File([blob], `captured_photo_${Date.now()}.jpg`, {\n type: 'image/jpeg'\n });\n setSelectedFile(file);\n setPreviewUrl(URL.createObjectURL(blob));\n stopCapture();\n }\n }, 'image/jpeg', 0.9);\n };\n\n const stopCapture = () => {\n if (streamRef.current) {\n streamRef.current.getTracks().forEach(track => track.stop());\n streamRef.current = null;\n }\n\n if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {\n mediaRecorderRef.current.stop();\n }\n\n setIsCapturing(false);\n setCaptureMode(null);\n };\n\n const analyzeMedia = async () => {\n if (!selectedFile) return;\n\n setIsAnalyzing(true);\n setError(null);\n\n try {\n // Convert file to base64\n const reader = new FileReader();\n reader.onload = async () => {\n const base64Data = reader.result as string;\n \n let mediaType: 'image' | 'video' | 'audio';\n if (selectedFile.type.startsWith('image/')) {\n mediaType = 'image';\n } else if (selectedFile.type.startsWith('video/')) {\n mediaType = 'video';\n } else {\n mediaType = 'audio';\n }\n\n const response = await MediaService.analyzeMedia({\n mediaType,\n fileName: selectedFile.name,\n fileData: base64Data\n });\n\n if (response.success) {\n onAnalysisComplete({\n ...response,\n file: selectedFile,\n previewUrl\n });\n } else {\n setError(response.message || 'Analysis failed');\n }\n };\n\n reader.readAsDataURL(selectedFile);\n } catch (error) {\n setError('Failed to analyze media. Please try again.');\n console.error('Analysis error:', error);\n } finally {\n setIsAnalyzing(false);\n }\n };\n\n const clearSelection = () => {\n setSelectedFile(null);\n setPreviewUrl(null);\n setError(null);\n if (fileInputRef.current) {\n fileInputRef.current.value = '';\n }\n };\n\n return (\n

\n 📸 Capture or Upload Media\n

\n\n {/* Capture Controls */}\n {!isCapturing && !selectedFile && (\n

\n startCapture('photo')}\n className=\"capture-button flex flex-col items-center p-6 rounded-lg\"\n >\n 📷\n Take Photo\n \n \n startCapture('video')}\n className=\"capture-button flex flex-col items-center p-6 rounded-lg\"\n >\n 🎬\n Record Video\n \n \n startCapture('audio')}\n className=\"capture-button flex flex-col items-center p-6 rounded-lg\"\n >\n 🎤\n Record Audio\n \n

\n\n

\n \n fileInputRef.current?.click()}\n className=\"bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-colors\"\n >\n 📁 Upload File\n \n

\n )}\n\n {/* Capture Interface */}\n {isCapturing && (\n

\n {(captureMode === 'photo' || captureMode === 'video') && (\n

\n \n

\n )}\n\n

\n {captureMode === 'photo' && (\n \n 📸 Capture Photo\n \n )}\n \n {(captureMode === 'video' || captureMode === 'audio') && (\n \n ⏹️ Stop Recording\n \n )}\n \n \n ❌ Cancel\n \n

\n )}\n\n {/* File Preview */}\n {selectedFile && previewUrl && (\n

\n {selectedFile.type.startsWith('image/') && (\n \n )}\n \n {selectedFile.type.startsWith('video/') && (\n \n )}\n \n {selectedFile.type.startsWith('audio/') && (\n

\n 🎵\n

\n \n

\n )}\n

\n\n

File: {selectedFile.name}

Size: {formatFileSize(selectedFile.size)}

Type: {selectedFile.type}

\n\n

\n \n {isAnalyzing ? (\n

\n Analyzing...\n

\n ) : (\n '🔍 Analyze Media'\n )}\n \n \n \n 🗑️ Clear\n \n

\n )}\n\n {/* Error Display */}\n {error && (\n

\n {error}\n

\n )}\n\n {/* Usage Tips */}\n

💡 Tips for Best Results

• Use good lighting for photos and videos
• Speak clearly for audio recordings
• Keep file sizes under {formatFileSize(MEDIA_CONSTRAINTS.maxFileSize)}
• Supported formats: JPEG, PNG, WebP, MP4, WebM, MP3, WAV

\n );\n}",[],[262,269,302],[262,269],{"_104":310,"_95":311,"_153":312,"_155":263,"_156":138,"_157":264,"_159":160,"_106":313,"_100":32,"_162":314,"_164":315,"_165":22,"_166":-5,"_167":316,"_98":317},"c185260e-3cba-11f0-aa86-9e149126039e","index.html","c18526b8-3cba-11f0-aa86-9e149126039e",["D",1748543325673],"file","\n\n\n \n \n AI Media Recognition Platform\n \n \n 🤖\">\n \n\n\n

\n \n \n\n",[],[262,311],{"_104":319,"_95":320,"_153":321,"_155":263,"_156":138,"_157":322,"_159":160,"_106":323,"_100":32,"_162":180,"_164":324,"_165":22,"_166":-5,"_167":325,"_98":326},"c50a28c4-3cba-11f0-b846-9e149126039e","index.tsx","c50a2964-3cba-11f0-b846-9e149126039e",18,["D",1748543331580],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render();",[],[262,320],[262],{"_104":329,"_95":330,"_153":331,"_155":-5,"_156":138,"_157":332,"_159":160,"_106":333,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":334,"_98":351},"532f31b8-3cba-11f0-b872-9e149126039e","shared","d1679996-877c-44a1-9d8e-b54e3dba81a5",8,["D",1748543140561],[335,343],{"_104":336,"_95":337,"_153":338,"_155":331,"_156":138,"_157":332,"_159":160,"_106":339,"_100":32,"_162":180,"_164":340,"_165":22,"_166":-5,"_167":341,"_98":342},"532f12f0-3cba-11f0-b872-9e149126039e","types.ts","532f13cc-3cba-11f0-b872-9e149126039e",["D",1748543140561],"// Shared TypeScript types and interfaces\n\nexport interface User {\n id: number;\n email: string;\n username: string;\n created_at: string;\n}\n\nexport interface AuthResponse {\n success: boolean;\n user?: User;\n token?: string;\n message?: string;\n}\n\nexport interface MediaAnalysis {\n id: number;\n user_id: number;\n media_type: 'image' | 'video' | 'audio';\n file_name: string;\n file_size: number;\n analysis_result: string;\n tags: string[];\n confidence_score: number;\n created_at: string;\n}\n\nexport interface AnalysisRequest {\n mediaType: 'image' | 'video' | 'audio';\n fileName: string;\n fileData: string; // base64 encoded\n}\n\nexport interface AnalysisResponse {\n success: boolean;\n analysis?: {\n description: string;\n tags: string[];\n confidence: number;\n objects?: string[];\n emotions?: string[];\n text?: string;\n };\n message?: string;\n}\n\nexport interface SearchRequest {\n query: string;\n mediaType?: 'image' | 'video' | 'audio';\n limit?: number;\n}\n\nexport interface SearchResponse {\n success: boolean;\n results?: MediaAnalysis[];\n message?: string;\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n message?: string;\n error?: string;\n}\n\nexport interface CaptureOptions {\n video?: boolean;\n audio?: boolean;\n facingMode?: 'user' | 'environment';\n}\n\nexport interface MediaConstraints {\n maxFileSize: number; // in bytes\n allowedTypes: string[];\n maxDuration?: number; // for video/audio in seconds\n}\n\nexport const MEDIA_CONSTRAINTS: MediaConstraints = {\n maxFileSize: 50 * 1024 * 1024, // 50MB\n allowedTypes: [\n 'image/jpeg',\n 'image/png',\n 'image/webp',\n 'video/mp4',\n 'video/webm',\n 'audio/mp3',\n 'audio/wav',\n 'audio/webm'\n ],\n maxDuration: 300 // 5 minutes\n};",[],[330,337],{"_104":344,"_95":177,"_153":345,"_155":331,"_156":138,"_157":346,"_159":160,"_106":347,"_100":32,"_162":180,"_164":348,"_165":22,"_166":-5,"_167":349,"_98":350},"5ac9717c-3cba-11f0-a693-9e149126039e","5ac97244-3cba-11f0-a693-9e149126039e",9,["D",1748543153316],"// Shared utility functions\n\nexport function validateEmail(email: string): boolean {\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n return emailRegex.test(email);\n}\n\nexport function validatePassword(password: string): { valid: boolean; message?: string } {\n if (password.length < 8) {\n return { valid: false, message: 'Password must be at least 8 characters long' };\n }\n if (!/(?=.*[a-z])/.test(password)) {\n return { valid: false, message: 'Password must contain at least one lowercase letter' };\n }\n if (!/(?=.*[A-Z])/.test(password)) {\n return { valid: false, message: 'Password must contain at least one uppercase letter' };\n }\n if (!/(?=.*\\d)/.test(password)) {\n return { valid: false, message: 'Password must contain at least one number' };\n }\n return { valid: true };\n}\n\nexport function formatFileSize(bytes: number): string {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n}\n\nexport function formatDate(dateString: string): string {\n const date = new Date(dateString);\n return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();\n}\n\nexport function generateId(): string {\n return Math.random().toString(36).substr(2, 9);\n}\n\nexport function sanitizeFileName(fileName: string): string {\n return fileName.replace(/[^a-zA-Z0-9.-]/g, '_');\n}\n\nexport function extractFileExtension(fileName: string): string {\n return fileName.split('.').pop()?.toLowerCase() || '';\n}\n\nexport function isValidMediaType(mimeType: string, allowedTypes: string[]): boolean {\n return allowedTypes.includes(mimeType);\n}\n\nexport function truncateText(text: string, maxLength: number): string {\n if (text.length <= maxLength) return text;\n return text.substr(0, maxLength) + '...';\n}\n\nexport function debounce any>(\n func: T,\n wait: number\n): (...args: Parameters) => void {\n let timeout: number | undefined;\n return (...args: Parameters) => {\n clearTimeout(timeout);\n timeout = setTimeout(() => func(...args), wait);\n };\n}\n\nexport function createFormData(data: Record): FormData {\n const formData = new FormData();\n Object.entries(data).forEach(([key, value]) => {\n if (value instanceof File) {\n formData.append(key, value);\n } else {\n formData.append(key, JSON.stringify(value));\n }\n });\n return formData;\n}",[],[330,177],[330],{"_104":353,"_95":354,"_153":355,"_155":-5,"_156":138,"_157":356,"_159":160,"_106":357,"_100":32,"_162":180,"_164":358,"_165":22,"_166":-5,"_167":359,"_98":360},"61d0c65c-3cb8-11f0-a555-9e149126039e","01_script.tsx","61d0c706-3cb8-11f0-a555-9e149126039e",2,["D",1748542306117],"// This script returns a random fun fact\n// You can run scripts manually in this view or call it from other vals.\nexport default function getRandomFact() {\n const funFacts = [\n \"Honey never spoils.\",\n \"Bananas are actually berries, but strawberries are not.\",\n \"Val Town has a citizen Juicy Bear. 🐻\",\n ];\n const fact = funFacts[Math.floor(Math.random() * funFacts.length)];\n return fact;\n}\nconsole.log(\"Fun fact:\", getRandomFact());\n",[],[354],{"_104":362,"_95":363,"_153":364,"_155":-5,"_156":138,"_157":365,"_159":160,"_106":366,"_100":32,"_162":367,"_164":368,"_165":22,"_166":-5,"_167":369,"_98":370},"61d29036-3cb8-11f0-a555-9e149126039e","02_http.tsx","61d290ea-3cb8-11f0-a555-9e149126039e",3,["D",1748542306129],"http","// This code responds to HTTP web requests.\n// Access it via its public URL (you can also pick a nicer subdomain).\n// Try adding ?name=YourName to the URL!\nexport default function httpHandler(req: Request): Response {\n const url = new URL(req.url);\n const name = url.searchParams.get(\"name\") || \"Friend\";\n console.log(`Greeted ${name} via HTTP`);\n return new Response(`Hello, ${name}! Welcome to Val Town.`);\n}",[],[363],{"_104":372,"_95":373,"_153":374,"_155":-5,"_156":138,"_157":375,"_159":160,"_106":376,"_100":32,"_162":377,"_164":378,"_165":22,"_166":-5,"_167":379,"_98":380},"61d4961a-3cb8-11f0-a555-9e149126039e","03_cron.tsx","61d496ba-3cb8-11f0-a555-9e149126039e",4,["D",1748542306141],"interval","// This cron runs on a schedule (e.g. every hour, day).\n// Configure the timer with the 🕒 icon in the top right.\n// This example just logs the current time.\nexport function scheduledHandler() {\n const timestamp = new Date().toISOString();\n console.log(`Cron val executed at: ${timestamp}`);\n return `Executed at ${timestamp}`;\n}",[],[373],{"_104":382,"_95":383,"_153":384,"_155":-5,"_156":138,"_157":385,"_159":160,"_106":386,"_100":32,"_162":387,"_164":388,"_165":22,"_166":-5,"_167":389,"_98":390},"61d6e258-3cb8-11f0-a555-9e149126039e","04_email.tsx","61d6e2ee-3cb8-11f0-a555-9e149126039e",5,["D",1748542306158],"email","// This code is triggered when an email is sent to its unique address.\n// Click \"Run\", copy and paste the email address and send an email to it.\n// This example will log the email details received.\nexport default async function emailHandler(email: Email){\n console.log(\"Email received!\", email.from, email.subject, email.text);\n for (const file of email.attachments) {\n console.log(`Filename: ${file.name}`);\n console.log(`Content Type: ${file.type}`);\n console.log(`Content: ${await file.text()}`);\n }\n}",[],[383],{"_104":392,"_95":393,"_153":394,"_155":-5,"_156":138,"_157":395,"_159":160,"_106":396,"_100":397,"_162":314,"_164":398,"_165":22,"_166":-5,"_167":399,"_98":400},"4cd1f45e-3cba-11f0-9eda-9e149126039e","README.md","61ceda04-3cb8-11f0-a555-9e149126039e",7,["D",1748543129866],1,"# AI/ML Media Recognition Platform\n\nA comprehensive platform for AI-powered media recognition with user authentication, real-time analysis, and intelligent search capabilities.\n\n## Features\n\n- **User Authentication**: Secure login/signup system with session management\n- **Multi-Media Support**: Image, video, and audio recognition\n- **Real-time Capture**: In-browser media capture capabilities\n- **AI Analysis**: Powered by OpenAI's vision and audio models\n- **Intelligent Search**: Find similar content based on descriptions\n- **Secure Storage**: User data and media metadata stored securely\n\n## Architecture\n\n### Backend (`/backend/`)\n- **index.ts**: Main Hono server with API routes\n- **database/**: SQLite database setup and queries\n- **routes/**: Modular route handlers\n- **auth/**: Authentication middleware and utilities\n\n### Frontend (`/frontend/`)\n- **index.html**: Main application shell\n- **components/**: React components for UI\n- **services/**: API communication and media handling\n- **utils/**: Client-side utilities\n\n### Shared (`/shared/`)\n- **types.ts**: TypeScript interfaces and types\n- **utils.ts**: Shared utility functions\n\n## API Endpoints\n\n- `POST /api/auth/login` - User login\n- `POST /api/auth/signup` - User registration\n- `POST /api/auth/logout` - User logout\n- `GET /api/auth/me` - Get current user\n- `POST /api/media/analyze` - Analyze uploaded media\n- `POST /api/media/search` - Search similar content\n- `GET /api/media/history` - Get user's analysis history\n\n## Technology Stack\n\n- **Backend**: Hono, SQLite, OpenAI API\n- **Frontend**: React, TailwindCSS\n- **AI/ML**: OpenAI GPT-4 Vision, Whisper\n- **Storage**: Val Town Blob storage\n- **Authentication**: JWT-based sessions\n\n## Getting Started\n\n1. Set up environment variables:\n - `OPENAI_API_KEY`: Your OpenAI API key\n - `JWT_SECRET`: Secret for JWT token signing\n\n2. The application will automatically create database tables on first run\n\n3. Access the application at the HTTP endpoint URL\n\n## Security Features\n\n- Password hashing with bcrypt\n- JWT-based authentication\n- CORS protection\n- Input validation and sanitization\n- Secure file upload handling",[],[393],{"_104":402,"_95":403,"_153":404,"_155":-5,"_156":138,"_157":405,"_159":160,"_106":406,"_100":32,"_162":180,"_164":72,"_165":22,"_166":-5,"_167":407,"_98":408},"b767872c-3cb8-11f0-9e5d-9e149126039e","new-file-5453.tsx","b76787cc-3cb8-11f0-9e5d-9e149126039e",6,["D",1748542449711],[],[403],"files",[150,169,175,185,191,199,209,216,224,234,241,250,260,267,274,282,291,300,309,318,328,335,343,352,361,371,381,391,401],"counts",{"_413":32,"_414":397,"_415":32,"_416":32},"pulls","branches","forks","envVars","contents",[],{"_104":242,"_95":243,"_153":244,"_155":237,"_156":138,"_157":238,"_159":160,"_106":420,"_100":32,"_162":180,"_164":246,"_165":22,"_166":-5,"_98":421},["D",1748543234212],[152,236,243],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":430,"_148":435,"_409":523,"_314":524,"_417":526,"_527":-5,"_528":22,"_529":-5,"_530":-5,"_531":-5,"_532":533},{"_104":105,"_95":96,"_106":431,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":432,"_132":433,"_135":434,"_147":22},["D",1748542306097],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[436,472,496,505,508,511,514,517,520],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_106":161,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":437,"_98":471},[438,444,453,462,468],{"_104":170,"_95":7,"_153":171,"_155":154,"_156":138,"_157":172,"_159":160,"_106":173,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":439,"_98":443},[440],{"_104":176,"_95":177,"_153":178,"_155":171,"_156":138,"_157":172,"_159":160,"_106":179,"_100":32,"_162":180,"_164":181,"_165":22,"_166":-5,"_167":441,"_98":442},[],[152,7,177],[152,7],{"_104":186,"_95":187,"_153":188,"_155":154,"_156":138,"_157":158,"_159":160,"_106":189,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":445,"_98":452},[446,449],{"_104":192,"_95":193,"_153":194,"_155":188,"_156":138,"_157":158,"_159":160,"_106":195,"_100":32,"_162":180,"_164":196,"_165":22,"_166":-5,"_167":447,"_98":448},[],[152,187,193],{"_104":200,"_95":201,"_153":202,"_155":188,"_156":138,"_157":203,"_159":160,"_106":204,"_100":32,"_162":180,"_164":205,"_165":22,"_166":-5,"_167":450,"_98":451},[],[152,187,201],[152,187],{"_104":210,"_95":211,"_153":212,"_155":154,"_156":138,"_157":213,"_159":160,"_106":214,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":454,"_98":461},[455,458],{"_104":217,"_95":218,"_153":219,"_155":212,"_156":138,"_157":213,"_159":160,"_106":220,"_100":32,"_162":180,"_164":221,"_165":22,"_166":-5,"_167":456,"_98":457},[],[152,211,218],{"_104":225,"_95":226,"_153":227,"_155":212,"_156":138,"_157":228,"_159":160,"_106":229,"_100":32,"_162":180,"_164":230,"_165":22,"_166":-5,"_167":459,"_98":460},[],[152,211,226],[152,211],{"_104":235,"_95":236,"_153":237,"_155":154,"_156":138,"_157":238,"_159":160,"_106":239,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":463,"_98":467},[464],{"_104":242,"_95":243,"_153":244,"_155":237,"_156":138,"_157":238,"_159":160,"_106":245,"_100":32,"_162":180,"_164":246,"_165":22,"_166":-5,"_167":465,"_98":466},[],[152,236,243],[152,236],{"_104":251,"_95":252,"_153":253,"_155":154,"_156":138,"_157":254,"_159":160,"_106":255,"_100":32,"_162":180,"_164":256,"_165":22,"_166":-5,"_167":469,"_98":470},[],[152,252],[152],{"_104":261,"_95":262,"_153":263,"_155":-5,"_156":138,"_157":264,"_159":160,"_106":265,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":473,"_98":495},[474,489,492],{"_104":268,"_95":269,"_153":270,"_155":263,"_156":138,"_157":271,"_159":160,"_106":272,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":475,"_98":488},[476,479,482,485],{"_104":275,"_95":276,"_153":277,"_155":270,"_156":138,"_157":271,"_159":160,"_106":278,"_100":32,"_162":180,"_164":279,"_165":22,"_166":-5,"_167":477,"_98":478},[],[262,269,276],{"_104":283,"_95":284,"_153":285,"_155":270,"_156":138,"_157":286,"_159":160,"_106":287,"_100":32,"_162":180,"_164":288,"_165":22,"_166":-5,"_167":480,"_98":481},[],[262,269,284],{"_104":292,"_95":293,"_153":294,"_155":270,"_156":138,"_157":295,"_159":160,"_106":296,"_100":32,"_162":180,"_164":297,"_165":22,"_166":-5,"_167":483,"_98":484},[],[262,269,293],{"_104":301,"_95":302,"_153":303,"_155":270,"_156":138,"_157":101,"_159":160,"_106":304,"_100":32,"_162":180,"_164":305,"_165":22,"_166":-5,"_167":486,"_98":487},[],[262,269,302],[262,269],{"_104":310,"_95":311,"_153":312,"_155":263,"_156":138,"_157":264,"_159":160,"_106":313,"_100":32,"_162":314,"_164":315,"_165":22,"_166":-5,"_167":490,"_98":491},[],[262,311],{"_104":319,"_95":320,"_153":321,"_155":263,"_156":138,"_157":322,"_159":160,"_106":323,"_100":32,"_162":180,"_164":324,"_165":22,"_166":-5,"_167":493,"_98":494},[],[262,320],[262],{"_104":329,"_95":330,"_153":331,"_155":-5,"_156":138,"_157":332,"_159":160,"_106":333,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":497,"_98":504},[498,501],{"_104":336,"_95":337,"_153":338,"_155":331,"_156":138,"_157":332,"_159":160,"_106":339,"_100":32,"_162":180,"_164":340,"_165":22,"_166":-5,"_167":499,"_98":500},[],[330,337],{"_104":344,"_95":177,"_153":345,"_155":331,"_156":138,"_157":346,"_159":160,"_106":347,"_100":32,"_162":180,"_164":348,"_165":22,"_166":-5,"_167":502,"_98":503},[],[330,177],[330],{"_104":353,"_95":354,"_153":355,"_155":-5,"_156":138,"_157":356,"_159":160,"_106":357,"_100":32,"_162":180,"_164":358,"_165":22,"_166":-5,"_167":506,"_98":507},[],[354],{"_104":362,"_95":363,"_153":364,"_155":-5,"_156":138,"_157":365,"_159":160,"_106":366,"_100":32,"_162":367,"_164":368,"_165":22,"_166":-5,"_167":509,"_98":510},[],[363],{"_104":372,"_95":373,"_153":374,"_155":-5,"_156":138,"_157":375,"_159":160,"_106":376,"_100":32,"_162":377,"_164":378,"_165":22,"_166":-5,"_167":512,"_98":513},[],[373],{"_104":382,"_95":383,"_153":384,"_155":-5,"_156":138,"_157":385,"_159":160,"_106":386,"_100":32,"_162":387,"_164":388,"_165":22,"_166":-5,"_167":515,"_98":516},[],[383],{"_104":392,"_95":393,"_153":394,"_155":-5,"_156":138,"_157":395,"_159":160,"_106":396,"_100":397,"_162":314,"_164":398,"_165":22,"_166":-5,"_167":518,"_98":519},[],[393],{"_104":402,"_95":403,"_153":404,"_155":-5,"_156":138,"_157":405,"_159":160,"_106":406,"_100":32,"_162":180,"_164":72,"_165":22,"_166":-5,"_167":521,"_98":522},[],[403],[436,438,440,444,446,449,453,455,458,462,464,468,472,474,476,479,482,485,489,492,496,498,501,505,508,511,514,517,520],{"_104":242,"_95":243,"_153":244,"_155":237,"_156":138,"_157":238,"_159":160,"_106":420,"_100":32,"_162":180,"_164":246,"_165":22,"_166":-5,"_98":525},[152,236,243],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

Mahi77

my-first-val