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;",[],[142,242],[142],{"_102":251,"_95":252,"_143":253,"_145":-5,"_146":132,"_147":254,"_149":150,"_104":255,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_157":256,"_98":335},"c18548fa-3cba-11f0-aa86-9e149126039e","frontend","b8367289-7745-4625-961a-e594774f7d4d",17,["D",1748543325673],[257,317,326],{"_102":258,"_95":259,"_143":260,"_145":253,"_146":132,"_147":261,"_149":150,"_104":262,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_157":263,"_98":316},"cdb7e4de-3cba-11f0-b7dd-9e149126039e","components","420348fe-490a-49ac-adf7-fdcd5f2e2f5e",19,["D",1748543346137],[264,272,281,290,299,308],{"_102":265,"_95":266,"_143":267,"_145":260,"_146":132,"_147":261,"_149":150,"_104":268,"_99":31,"_152":170,"_154":269,"_155":27,"_156":-5,"_157":270,"_98":271},"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}",[],[252,259,266],{"_102":273,"_95":274,"_143":275,"_145":260,"_146":132,"_147":276,"_149":150,"_104":277,"_99":31,"_152":170,"_154":278,"_155":27,"_156":-5,"_157":279,"_98":280},"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}",[],[252,259,274],{"_102":282,"_95":283,"_143":284,"_145":260,"_146":132,"_147":285,"_149":150,"_104":286,"_99":31,"_152":170,"_154":287,"_155":27,"_156":-5,"_157":288,"_98":289},"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}",[],[252,259,283],{"_102":291,"_95":292,"_143":293,"_145":260,"_146":132,"_147":294,"_149":150,"_104":295,"_99":31,"_152":170,"_154":296,"_155":27,"_156":-5,"_157":297,"_98":298},"18c7f126-3cbb-11f0-a036-9e149126039e","MediaAnalysis.tsx","18c7f1e4-3cbb-11f0-a036-9e149126039e",23,["D",1748543472075],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface MediaAnalysisProps {\n data: {\n analysis: {\n description: string;\n tags: string[];\n confidence: number;\n objects?: string[];\n emotions?: string[];\n text?: string;\n };\n file: File;\n previewUrl: string;\n };\n}\n\nexport default function MediaAnalysis({ data }: MediaAnalysisProps) {\n const { analysis, file } = data;\n\n const getConfidenceColor = (confidence: number) => {\n if (confidence >= 0.8) return 'text-green-600';\n if (confidence >= 0.6) return 'text-yellow-600';\n return 'text-red-600';\n };\n\n const getConfidenceLabel = (confidence: number) => {\n if (confidence >= 0.8) return 'High';\n if (confidence >= 0.6) return 'Medium';\n return 'Low';\n };\n\n return (\n

🤖 AI Analysis Results

\n {getConfidenceLabel(analysis.confidence)} Confidence\n

\n {Math.round(analysis.confidence * 100)}%\n

\n\n

📝 Description

{analysis.description}

\n\n {analysis.tags && analysis.tags.length > 0 && (\n

🏷️ Tags

\n {analysis.tags.map((tag, index) => (\n \n {tag}\n \n ))}\n

\n )}\n\n {analysis.objects && analysis.objects.length > 0 && (\n

🎯 Detected Objects/Topics

\n {analysis.objects.map((object, index) => (\n \n {object}\n \n ))}\n

\n )}\n\n {analysis.emotions && analysis.emotions.length > 0 && (\n

😊 Emotions/Mood

\n {analysis.emotions.map((emotion, index) => (\n \n {emotion}\n \n ))}\n

\n )}\n\n {analysis.text && (\n

📄 Extracted Text

{analysis.text}

\n )}\n

\n\n

📊 Analysis Details

\n File Name:\n

{file.name}

\n File Type:\n

{file.type}

\n File Size:\n

{(file.size / 1024 / 1024).toFixed(2)} MB

\n Analysis Time:\n

{new Date().toLocaleTimeString()}

\n\n

💡 What's Next?

• Use the search feature to find similar content
• Check your history to see all analyzed media
• Try analyzing different types of media for comparison
• The analysis is automatically saved to your account

\n );\n}",[],[252,259,292],{"_102":300,"_95":301,"_143":302,"_145":260,"_146":132,"_147":303,"_149":150,"_104":304,"_99":31,"_152":170,"_154":305,"_155":27,"_156":-5,"_157":306,"_98":307},"0bfae412-3cbb-11f0-9451-9e149126039e","MediaCapture.tsx","0bfae4e4-3cbb-11f0-9451-9e149126039e",22,["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}",[],[252,259,301],{"_102":309,"_95":310,"_143":311,"_145":260,"_146":132,"_147":131,"_149":150,"_104":312,"_99":31,"_152":170,"_154":313,"_155":27,"_156":-5,"_157":314,"_98":315},"32047e66-3cbb-11f0-b043-9e149126039e","SearchComponent.tsx","32047f56-3cbb-11f0-b043-9e149126039e",["D",1748543514415],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { MediaService } from \"../services/MediaService.ts\";\nimport { formatDate } from \"../../shared/utils.ts\";\nimport type { MediaAnalysis } from \"../../shared/types.ts\";\n\nexport default function SearchComponent() {\n const [query, setQuery] = useState('');\n const [mediaType, setMediaType] = useState<'image' | 'video' | 'audio' | ''>('');\n const [results, setResults] = useState([]);\n const [suggestions, setSuggestions] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [hasSearched, setHasSearched] = useState(false);\n\n const handleSearch = async (searchQuery?: string) => {\n const searchTerm = searchQuery || query;\n if (!searchTerm.trim()) {\n setError('Please enter a search query');\n return;\n }\n\n setLoading(true);\n setError(null);\n setHasSearched(true);\n\n try {\n const response = await MediaService.searchMedia({\n query: searchTerm.trim(),\n mediaType: mediaType || undefined,\n limit: 20\n });\n\n if (response.success) {\n setResults(response.results || []);\n setSuggestions(response.suggestions || []);\n } else {\n setError(response.message || 'Search failed');\n setResults([]);\n setSuggestions([]);\n }\n } catch (error) {\n setError('Search failed. Please try again.');\n console.error('Search error:', error);\n setResults([]);\n setSuggestions([]);\n } finally {\n setLoading(false);\n }\n };\n\n const handleSuggestionClick = (suggestion: string) => {\n setQuery(suggestion);\n handleSearch(suggestion);\n };\n\n const getMediaTypeIcon = (type: string) => {\n switch (type) {\n case 'image': return '🖼️';\n case 'video': return '🎬';\n case 'audio': return '🎵';\n default: return '📄';\n }\n };\n\n const getConfidenceColor = (confidence: number) => {\n if (confidence >= 0.8) return 'bg-green-100 text-green-800';\n if (confidence >= 0.6) return 'bg-yellow-100 text-yellow-800';\n return 'bg-red-100 text-red-800';\n };\n\n return (\n

\n {/* Search Header */}\n

\n 🔍 Search Your Media\n

\n\n {/* Search Form */}\n

\n \n Search Query\n \n setQuery(e.target.value)}\n onKeyPress={(e) => e.key === 'Enter' && handleSearch()}\n placeholder=\"Describe what you're looking for...\"\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n\n

\n \n Media Type (Optional)\n \n setMediaType(e.target.value as any)}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n >\n \n \n \n \n \n

\n\n handleSearch()}\n disabled={loading || !query.trim()}\n className=\"w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n >\n {loading ? (\n

\n Searching...\n

\n ) : (\n '🔍 Search'\n )}\n \n

\n\n {/* Search Suggestions */}\n {suggestions.length > 0 && (\n

💡 Related Suggestions

\n {suggestions.map((suggestion, index) => (\n handleSuggestionClick(suggestion)}\n className=\"px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm hover:bg-blue-200 transition-colors\"\n >\n {suggestion}\n \n ))}\n

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

\n {error}\n

\n )}\n

\n\n {/* Search Results */}\n {hasSearched && (\n

\n Search Results\n

\n \n {results.length} result{results.length !== 1 ? 's' : ''} found\n \n

\n\n {results.length === 0 ? (\n

🔍

No results found

\n Try adjusting your search terms or upload more media to analyze.\n

Search tips:

• Use descriptive keywords
• Try different synonyms
• Search for objects, colors, or emotions
• Use broader terms for more results

\n ) : (\n

\n {results.map((result) => (\n

\n \n {getMediaTypeIcon(result.media_type)}\n \n

\n {result.file_name}\n

\n {formatDate(result.created_at)}\n

\n\n

\n {result.analysis_result}\n

\n\n {result.tags && result.tags.length > 0 && (\n

\n {result.tags.map((tag, index) => (\n \n {tag}\n \n ))}\n

\n )}\n

\n\n

\n \n {Math.round(result.confidence_score * 100)}% confidence\n \n

\n {(result.file_size / 1024 / 1024).toFixed(2)} MB\n

\n ))}\n

\n )}\n

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

🎯 Search Tips

What you can search for:

• Objects and subjects in images
• Colors and visual elements
• Emotions and moods
• Text content in media

Example searches:

• \"sunset landscape\"
• \"people smiling\"
• \"text document\"
• \"music recording\"

\n );\n}",[],[252,259,310],[252,259],{"_102":318,"_95":319,"_143":320,"_145":253,"_146":132,"_147":254,"_149":150,"_104":321,"_99":31,"_152":322,"_154":323,"_155":27,"_156":-5,"_157":324,"_98":325},"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",[],[252,319],{"_102":327,"_95":328,"_143":329,"_145":253,"_146":132,"_147":330,"_149":150,"_104":331,"_99":31,"_152":170,"_154":332,"_155":27,"_156":-5,"_157":333,"_98":334},"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();",[],[252,328],[252],{"_102":337,"_95":338,"_143":339,"_145":-5,"_146":132,"_147":340,"_149":150,"_104":341,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_157":342,"_98":359},"532f31b8-3cba-11f0-b872-9e149126039e","shared","d1679996-877c-44a1-9d8e-b54e3dba81a5",8,["D",1748543140561],[343,351],{"_102":344,"_95":345,"_143":346,"_145":339,"_146":132,"_147":340,"_149":150,"_104":347,"_99":31,"_152":170,"_154":348,"_155":27,"_156":-5,"_157":349,"_98":350},"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};",[],[338,345],{"_102":352,"_95":167,"_143":353,"_145":339,"_146":132,"_147":354,"_149":150,"_104":355,"_99":31,"_152":170,"_154":356,"_155":27,"_156":-5,"_157":357,"_98":358},"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}",[],[338,167],[338],{"_102":361,"_95":362,"_143":363,"_145":-5,"_146":132,"_147":364,"_149":150,"_104":365,"_99":31,"_152":170,"_154":366,"_155":27,"_156":-5,"_157":367,"_98":368},"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",[],[362],{"_102":370,"_95":371,"_143":372,"_145":-5,"_146":132,"_147":373,"_149":150,"_104":374,"_99":31,"_152":375,"_154":376,"_155":27,"_156":-5,"_157":377,"_98":378},"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}",[],[371],{"_102":380,"_95":381,"_143":382,"_145":-5,"_146":132,"_147":383,"_149":150,"_104":384,"_99":31,"_152":385,"_154":386,"_155":27,"_156":-5,"_157":387,"_98":388},"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}",[],[381],{"_102":390,"_95":391,"_143":392,"_145":-5,"_146":132,"_147":393,"_149":150,"_104":394,"_99":31,"_152":395,"_154":396,"_155":27,"_156":-5,"_157":397,"_98":398},"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}",[],[391],{"_102":400,"_95":401,"_143":402,"_145":-5,"_146":132,"_147":403,"_149":150,"_104":404,"_99":405,"_152":322,"_154":406,"_155":27,"_156":-5,"_157":407,"_98":408},"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",[],[401],{"_102":410,"_95":411,"_143":412,"_145":-5,"_146":132,"_147":413,"_149":150,"_104":414,"_99":31,"_152":170,"_154":68,"_155":27,"_156":-5,"_157":415,"_98":416},"b767872c-3cb8-11f0-9e5d-9e149126039e","new-file-5453.tsx","b76787cc-3cb8-11f0-9e5d-9e149126039e",6,["D",1748542449711],[],[411],"files",[140,159,165,175,181,189,199,206,214,224,231,240,250,257,264,272,281,290,299,308,317,326,336,343,351,360,369,379,389,399,409],"counts",{"_421":31,"_422":405,"_423":31,"_424":31},"pulls","branches","forks","envVars","contents",[427,430,433,436,439,442,445,448,451],{"_102":141,"_95":142,"_143":144,"_145":-5,"_146":132,"_147":148,"_149":150,"_104":428,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":429},["D",1748543167164],[142],{"_102":251,"_95":252,"_143":253,"_145":-5,"_146":132,"_147":254,"_149":150,"_104":431,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":432},["D",1748543325673],[252],{"_102":337,"_95":338,"_143":339,"_145":-5,"_146":132,"_147":340,"_149":150,"_104":434,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":435},["D",1748543140561],[338],{"_102":361,"_95":362,"_143":363,"_145":-5,"_146":132,"_147":364,"_149":150,"_104":437,"_99":31,"_152":170,"_154":366,"_155":27,"_156":-5,"_98":438},["D",1748542306117],[362],{"_102":370,"_95":371,"_143":372,"_145":-5,"_146":132,"_147":373,"_149":150,"_104":440,"_99":31,"_152":375,"_154":376,"_155":27,"_156":-5,"_98":441},["D",1748542306129],[371],{"_102":380,"_95":381,"_143":382,"_145":-5,"_146":132,"_147":383,"_149":150,"_104":443,"_99":31,"_152":385,"_154":386,"_155":27,"_156":-5,"_98":444},["D",1748542306141],[381],{"_102":390,"_95":391,"_143":392,"_145":-5,"_146":132,"_147":393,"_149":150,"_104":446,"_99":31,"_152":395,"_154":396,"_155":27,"_156":-5,"_98":447},["D",1748542306158],[391],{"_102":400,"_95":401,"_143":402,"_145":-5,"_146":132,"_147":403,"_149":150,"_104":449,"_99":405,"_152":322,"_154":406,"_155":27,"_156":-5,"_98":450},["D",1748543129866],[401],{"_102":410,"_95":411,"_143":412,"_145":-5,"_146":132,"_147":413,"_149":150,"_104":452,"_99":31,"_152":170,"_154":68,"_155":27,"_156":-5,"_98":453},["D",1748542449711],[411],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.remixes",{"_93":94,"_95":96,"_100":459,"_423":463,"_454":-5},{"_102":103,"_95":96,"_104":460,"_106":-5,"_107":27,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":-5,"_114":27,"_115":-5,"_116":31,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":27,"_21":461,"_129":462},["D",1748542306097],{"_93":94,"_127":128},{"_99":131,"_95":41,"_102":132,"_133":103,"_134":-5,"_135":-5,"_136":-5,"_137":-5},[],"routes/_app","actionData","errors"]