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;",[],[143,243],[143],{"_103":252,"_95":253,"_144":254,"_146":-5,"_147":133,"_148":255,"_150":151,"_105":256,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":257,"_98":336},"c18548fa-3cba-11f0-aa86-9e149126039e","frontend","b8367289-7745-4625-961a-e594774f7d4d",17,["D",1748543325673],[258,318,327],{"_103":259,"_95":260,"_144":261,"_146":254,"_147":133,"_148":262,"_150":151,"_105":263,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":264,"_98":317},"cdb7e4de-3cba-11f0-b7dd-9e149126039e","components","420348fe-490a-49ac-adf7-fdcd5f2e2f5e",19,["D",1748543346137],[265,273,282,291,300,309],{"_103":266,"_95":267,"_144":268,"_146":261,"_147":133,"_148":262,"_150":151,"_105":269,"_100":31,"_153":171,"_155":270,"_156":27,"_157":-5,"_158":271,"_98":272},"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}",[],[253,260,267],{"_103":274,"_95":275,"_144":276,"_146":261,"_147":133,"_148":277,"_150":151,"_105":278,"_100":31,"_153":171,"_155":279,"_156":27,"_157":-5,"_158":280,"_98":281},"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}",[],[253,260,275],{"_103":283,"_95":284,"_144":285,"_146":261,"_147":133,"_148":286,"_150":151,"_105":287,"_100":31,"_153":171,"_155":288,"_156":27,"_157":-5,"_158":289,"_98":290},"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}",[],[253,260,284],{"_103":292,"_95":293,"_144":294,"_146":261,"_147":133,"_148":295,"_150":151,"_105":296,"_100":31,"_153":171,"_155":297,"_156":27,"_157":-5,"_158":298,"_98":299},"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}",[],[253,260,293],{"_103":301,"_95":302,"_144":303,"_146":261,"_147":133,"_148":304,"_150":151,"_105":305,"_100":31,"_153":171,"_155":306,"_156":27,"_157":-5,"_158":307,"_98":308},"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}",[],[253,260,302],{"_103":310,"_95":311,"_144":312,"_146":261,"_147":133,"_148":132,"_150":151,"_105":313,"_100":31,"_153":171,"_155":314,"_156":27,"_157":-5,"_158":315,"_98":316},"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}",[],[253,260,311],[253,260],{"_103":319,"_95":320,"_144":321,"_146":254,"_147":133,"_148":255,"_150":151,"_105":322,"_100":31,"_153":323,"_155":324,"_156":27,"_157":-5,"_158":325,"_98":326},"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",[],[253,320],{"_103":328,"_95":329,"_144":330,"_146":254,"_147":133,"_148":331,"_150":151,"_105":332,"_100":31,"_153":171,"_155":333,"_156":27,"_157":-5,"_158":334,"_98":335},"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();",[],[253,329],[253],{"_103":338,"_95":339,"_144":340,"_146":-5,"_147":133,"_148":341,"_150":151,"_105":342,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":343,"_98":360},"532f31b8-3cba-11f0-b872-9e149126039e","shared","d1679996-877c-44a1-9d8e-b54e3dba81a5",8,["D",1748543140561],[344,352],{"_103":345,"_95":346,"_144":347,"_146":340,"_147":133,"_148":341,"_150":151,"_105":348,"_100":31,"_153":171,"_155":349,"_156":27,"_157":-5,"_158":350,"_98":351},"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};",[],[339,346],{"_103":353,"_95":168,"_144":354,"_146":340,"_147":133,"_148":355,"_150":151,"_105":356,"_100":31,"_153":171,"_155":357,"_156":27,"_157":-5,"_158":358,"_98":359},"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}",[],[339,168],[339],{"_103":362,"_95":363,"_144":364,"_146":-5,"_147":133,"_148":365,"_150":151,"_105":366,"_100":31,"_153":171,"_155":367,"_156":27,"_157":-5,"_158":368,"_98":369},"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",[],[363],{"_103":371,"_95":372,"_144":373,"_146":-5,"_147":133,"_148":374,"_150":151,"_105":375,"_100":31,"_153":376,"_155":377,"_156":27,"_157":-5,"_158":378,"_98":379},"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}",[],[372],{"_103":381,"_95":382,"_144":383,"_146":-5,"_147":133,"_148":384,"_150":151,"_105":385,"_100":31,"_153":386,"_155":387,"_156":27,"_157":-5,"_158":388,"_98":389},"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}",[],[382],{"_103":391,"_95":392,"_144":393,"_146":-5,"_147":133,"_148":394,"_150":151,"_105":395,"_100":31,"_153":396,"_155":397,"_156":27,"_157":-5,"_158":398,"_98":399},"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}",[],[392],{"_103":401,"_95":402,"_144":403,"_146":-5,"_147":133,"_148":404,"_150":151,"_105":405,"_100":406,"_153":323,"_155":407,"_156":27,"_157":-5,"_158":408,"_98":409},"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",[],[402],{"_103":411,"_95":412,"_144":413,"_146":-5,"_147":133,"_148":414,"_150":151,"_105":415,"_100":31,"_153":171,"_155":68,"_156":27,"_157":-5,"_158":416,"_98":417},"b767872c-3cb8-11f0-9e5d-9e149126039e","new-file-5453.tsx","b76787cc-3cb8-11f0-9e5d-9e149126039e",6,["D",1748542449711],[],[412],"files",[141,160,166,176,182,190,200,207,215,225,232,241,251,258,265,273,282,291,300,309,318,327,337,344,352,361,370,380,390,400,410],"counts",{"_422":31,"_423":406,"_424":31,"_425":31},"pulls","branches","forks","envVars","contents",[],{"_103":274,"_95":275,"_144":276,"_146":261,"_147":133,"_148":277,"_150":151,"_105":429,"_100":31,"_153":171,"_155":279,"_156":27,"_157":-5,"_98":430},["D",1748543374044],[253,260,275],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":41,"_100":-7,"_98":99,"_101":436,"_139":440,"_418":534,"_323":535,"_426":537,"_431":-5,"_538":27,"_539":-5},{"_103":104,"_95":96,"_105":437,"_107":-5,"_108":27,"_109":110,"_111":-5,"_112":-5,"_12":113,"_114":-5,"_115":27,"_116":-5,"_117":31,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":27,"_21":438,"_130":439},["D",1748542306097],{"_93":94,"_128":129},{"_100":132,"_95":41,"_103":133,"_134":104,"_135":-5,"_136":-5,"_137":-5,"_138":-5},[441,477,507,516,519,522,525,528,531],{"_103":142,"_95":143,"_144":145,"_146":-5,"_147":133,"_148":149,"_150":151,"_105":152,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":442,"_98":476},[443,449,458,467,473],{"_103":161,"_95":7,"_144":162,"_146":145,"_147":133,"_148":163,"_150":151,"_105":164,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":444,"_98":448},[445],{"_103":167,"_95":168,"_144":169,"_146":162,"_147":133,"_148":163,"_150":151,"_105":170,"_100":31,"_153":171,"_155":172,"_156":27,"_157":-5,"_158":446,"_98":447},[],[143,7,168],[143,7],{"_103":177,"_95":178,"_144":179,"_146":145,"_147":133,"_148":149,"_150":151,"_105":180,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":450,"_98":457},[451,454],{"_103":183,"_95":184,"_144":185,"_146":179,"_147":133,"_148":149,"_150":151,"_105":186,"_100":31,"_153":171,"_155":187,"_156":27,"_157":-5,"_158":452,"_98":453},[],[143,178,184],{"_103":191,"_95":192,"_144":193,"_146":179,"_147":133,"_148":194,"_150":151,"_105":195,"_100":31,"_153":171,"_155":196,"_156":27,"_157":-5,"_158":455,"_98":456},[],[143,178,192],[143,178],{"_103":201,"_95":202,"_144":203,"_146":145,"_147":133,"_148":204,"_150":151,"_105":205,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":459,"_98":466},[460,463],{"_103":208,"_95":209,"_144":210,"_146":203,"_147":133,"_148":204,"_150":151,"_105":211,"_100":31,"_153":171,"_155":212,"_156":27,"_157":-5,"_158":461,"_98":462},[],[143,202,209],{"_103":216,"_95":217,"_144":218,"_146":203,"_147":133,"_148":219,"_150":151,"_105":220,"_100":31,"_153":171,"_155":221,"_156":27,"_157":-5,"_158":464,"_98":465},[],[143,202,217],[143,202],{"_103":226,"_95":227,"_144":228,"_146":145,"_147":133,"_148":229,"_150":151,"_105":230,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":468,"_98":472},[469],{"_103":233,"_95":234,"_144":235,"_146":228,"_147":133,"_148":229,"_150":151,"_105":236,"_100":31,"_153":171,"_155":237,"_156":27,"_157":-5,"_158":470,"_98":471},[],[143,227,234],[143,227],{"_103":242,"_95":243,"_144":244,"_146":145,"_147":133,"_148":245,"_150":151,"_105":246,"_100":31,"_153":171,"_155":247,"_156":27,"_157":-5,"_158":474,"_98":475},[],[143,243],[143],{"_103":252,"_95":253,"_144":254,"_146":-5,"_147":133,"_148":255,"_150":151,"_105":256,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":478,"_98":506},[479,500,503],{"_103":259,"_95":260,"_144":261,"_146":254,"_147":133,"_148":262,"_150":151,"_105":263,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":480,"_98":499},[481,484,487,490,493,496],{"_103":266,"_95":267,"_144":268,"_146":261,"_147":133,"_148":262,"_150":151,"_105":269,"_100":31,"_153":171,"_155":270,"_156":27,"_157":-5,"_158":482,"_98":483},[],[253,260,267],{"_103":274,"_95":275,"_144":276,"_146":261,"_147":133,"_148":277,"_150":151,"_105":278,"_100":31,"_153":171,"_155":279,"_156":27,"_157":-5,"_158":485,"_98":486},[],[253,260,275],{"_103":283,"_95":284,"_144":285,"_146":261,"_147":133,"_148":286,"_150":151,"_105":287,"_100":31,"_153":171,"_155":288,"_156":27,"_157":-5,"_158":488,"_98":489},[],[253,260,284],{"_103":292,"_95":293,"_144":294,"_146":261,"_147":133,"_148":295,"_150":151,"_105":296,"_100":31,"_153":171,"_155":297,"_156":27,"_157":-5,"_158":491,"_98":492},[],[253,260,293],{"_103":301,"_95":302,"_144":303,"_146":261,"_147":133,"_148":304,"_150":151,"_105":305,"_100":31,"_153":171,"_155":306,"_156":27,"_157":-5,"_158":494,"_98":495},[],[253,260,302],{"_103":310,"_95":311,"_144":312,"_146":261,"_147":133,"_148":132,"_150":151,"_105":313,"_100":31,"_153":171,"_155":314,"_156":27,"_157":-5,"_158":497,"_98":498},[],[253,260,311],[253,260],{"_103":319,"_95":320,"_144":321,"_146":254,"_147":133,"_148":255,"_150":151,"_105":322,"_100":31,"_153":323,"_155":324,"_156":27,"_157":-5,"_158":501,"_98":502},[],[253,320],{"_103":328,"_95":329,"_144":330,"_146":254,"_147":133,"_148":331,"_150":151,"_105":332,"_100":31,"_153":171,"_155":333,"_156":27,"_157":-5,"_158":504,"_98":505},[],[253,329],[253],{"_103":338,"_95":339,"_144":340,"_146":-5,"_147":133,"_148":341,"_150":151,"_105":342,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":508,"_98":515},[509,512],{"_103":345,"_95":346,"_144":347,"_146":340,"_147":133,"_148":341,"_150":151,"_105":348,"_100":31,"_153":171,"_155":349,"_156":27,"_157":-5,"_158":510,"_98":511},[],[339,346],{"_103":353,"_95":168,"_144":354,"_146":340,"_147":133,"_148":355,"_150":151,"_105":356,"_100":31,"_153":171,"_155":357,"_156":27,"_157":-5,"_158":513,"_98":514},[],[339,168],[339],{"_103":362,"_95":363,"_144":364,"_146":-5,"_147":133,"_148":365,"_150":151,"_105":366,"_100":31,"_153":171,"_155":367,"_156":27,"_157":-5,"_158":517,"_98":518},[],[363],{"_103":371,"_95":372,"_144":373,"_146":-5,"_147":133,"_148":374,"_150":151,"_105":375,"_100":31,"_153":376,"_155":377,"_156":27,"_157":-5,"_158":520,"_98":521},[],[372],{"_103":381,"_95":382,"_144":383,"_146":-5,"_147":133,"_148":384,"_150":151,"_105":385,"_100":31,"_153":386,"_155":387,"_156":27,"_157":-5,"_158":523,"_98":524},[],[382],{"_103":391,"_95":392,"_144":393,"_146":-5,"_147":133,"_148":394,"_150":151,"_105":395,"_100":31,"_153":396,"_155":397,"_156":27,"_157":-5,"_158":526,"_98":527},[],[392],{"_103":401,"_95":402,"_144":403,"_146":-5,"_147":133,"_148":404,"_150":151,"_105":405,"_100":406,"_153":323,"_155":407,"_156":27,"_157":-5,"_158":529,"_98":530},[],[402],{"_103":411,"_95":412,"_144":413,"_146":-5,"_147":133,"_148":414,"_150":151,"_105":415,"_100":31,"_153":171,"_155":68,"_156":27,"_157":-5,"_158":532,"_98":533},[],[412],[441,443,445,449,451,454,458,460,463,467,469,473,477,479,481,484,487,490,493,496,500,503,507,509,512,516,519,522,525,528,531],{"_103":274,"_95":275,"_144":276,"_146":261,"_147":133,"_148":277,"_150":151,"_105":429,"_100":31,"_153":171,"_155":279,"_156":27,"_157":-5,"_98":536},[253,260,275],[],"showCompareCallout","pull","routes/_app","actionData","errors"]