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;",[],[151,251],[151],{"_103":260,"_95":261,"_152":262,"_154":-5,"_155":137,"_156":263,"_158":159,"_105":264,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":265,"_98":344},"c18548fa-3cba-11f0-aa86-9e149126039e","frontend","b8367289-7745-4625-961a-e594774f7d4d",17,["D",1748543325673],[266,326,335],{"_103":267,"_95":268,"_152":269,"_154":262,"_155":137,"_156":270,"_158":159,"_105":271,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":272,"_98":325},"cdb7e4de-3cba-11f0-b7dd-9e149126039e","components","420348fe-490a-49ac-adf7-fdcd5f2e2f5e",19,["D",1748543346137],[273,281,290,299,308,317],{"_103":274,"_95":275,"_152":276,"_154":269,"_155":137,"_156":270,"_158":159,"_105":277,"_100":32,"_161":179,"_163":278,"_164":22,"_165":-5,"_166":279,"_98":280},"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}",[],[261,268,275],{"_103":282,"_95":283,"_152":284,"_154":269,"_155":137,"_156":285,"_158":159,"_105":286,"_100":32,"_161":179,"_163":287,"_164":22,"_165":-5,"_166":288,"_98":289},"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}",[],[261,268,283],{"_103":291,"_95":292,"_152":293,"_154":269,"_155":137,"_156":294,"_158":159,"_105":295,"_100":32,"_161":179,"_163":296,"_164":22,"_165":-5,"_166":297,"_98":298},"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}",[],[261,268,292],{"_103":300,"_95":301,"_152":302,"_154":269,"_155":137,"_156":303,"_158":159,"_105":304,"_100":32,"_161":179,"_163":305,"_164":22,"_165":-5,"_166":306,"_98":307},"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}",[],[261,268,301],{"_103":309,"_95":310,"_152":311,"_154":269,"_155":137,"_156":312,"_158":159,"_105":313,"_100":32,"_161":179,"_163":314,"_164":22,"_165":-5,"_166":315,"_98":316},"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}",[],[261,268,310],{"_103":318,"_95":319,"_152":320,"_154":269,"_155":137,"_156":136,"_158":159,"_105":321,"_100":32,"_161":179,"_163":322,"_164":22,"_165":-5,"_166":323,"_98":324},"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}",[],[261,268,319],[261,268],{"_103":327,"_95":328,"_152":329,"_154":262,"_155":137,"_156":263,"_158":159,"_105":330,"_100":32,"_161":331,"_163":332,"_164":22,"_165":-5,"_166":333,"_98":334},"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",[],[261,328],{"_103":336,"_95":337,"_152":338,"_154":262,"_155":137,"_156":339,"_158":159,"_105":340,"_100":32,"_161":179,"_163":341,"_164":22,"_165":-5,"_166":342,"_98":343},"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();",[],[261,337],[261],{"_103":346,"_95":99,"_152":347,"_154":-5,"_155":137,"_156":348,"_158":159,"_105":349,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":350,"_98":367},"532f31b8-3cba-11f0-b872-9e149126039e","d1679996-877c-44a1-9d8e-b54e3dba81a5",8,["D",1748543140561],[351,359],{"_103":352,"_95":353,"_152":354,"_154":347,"_155":137,"_156":348,"_158":159,"_105":355,"_100":32,"_161":179,"_163":356,"_164":22,"_165":-5,"_166":357,"_98":358},"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};",[],[99,353],{"_103":360,"_95":176,"_152":361,"_154":347,"_155":137,"_156":362,"_158":159,"_105":363,"_100":32,"_161":179,"_163":364,"_164":22,"_165":-5,"_166":365,"_98":366},"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}",[],[99,176],[99],{"_103":369,"_95":370,"_152":371,"_154":-5,"_155":137,"_156":372,"_158":159,"_105":373,"_100":32,"_161":179,"_163":374,"_164":22,"_165":-5,"_166":375,"_98":376},"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",[],[370],{"_103":378,"_95":379,"_152":380,"_154":-5,"_155":137,"_156":381,"_158":159,"_105":382,"_100":32,"_161":383,"_163":384,"_164":22,"_165":-5,"_166":385,"_98":386},"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}",[],[379],{"_103":388,"_95":389,"_152":390,"_154":-5,"_155":137,"_156":391,"_158":159,"_105":392,"_100":32,"_161":393,"_163":394,"_164":22,"_165":-5,"_166":395,"_98":396},"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}",[],[389],{"_103":398,"_95":399,"_152":400,"_154":-5,"_155":137,"_156":401,"_158":159,"_105":402,"_100":32,"_161":403,"_163":404,"_164":22,"_165":-5,"_166":405,"_98":406},"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}",[],[399],{"_103":408,"_95":409,"_152":410,"_154":-5,"_155":137,"_156":411,"_158":159,"_105":412,"_100":413,"_161":331,"_163":414,"_164":22,"_165":-5,"_166":415,"_98":416},"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",[],[409],{"_103":418,"_95":419,"_152":420,"_154":-5,"_155":137,"_156":421,"_158":159,"_105":422,"_100":32,"_161":179,"_163":72,"_164":22,"_165":-5,"_166":423,"_98":424},"b767872c-3cb8-11f0-9e5d-9e149126039e","new-file-5453.tsx","b76787cc-3cb8-11f0-9e5d-9e149126039e",6,["D",1748542449711],[],[419],"files",[149,168,174,184,190,198,208,215,223,233,240,249,259,266,273,281,290,299,308,317,326,335,345,351,359,368,377,387,397,407,417],"counts",{"_429":32,"_430":413,"_431":32,"_432":32},"pulls","branches","forks","envVars","contents",[435,438],{"_103":352,"_95":353,"_152":354,"_154":347,"_155":137,"_156":348,"_158":159,"_105":436,"_100":32,"_161":179,"_163":356,"_164":22,"_165":-5,"_98":437},["D",1748543140561],[99,353],{"_103":360,"_95":176,"_152":361,"_154":347,"_155":137,"_156":362,"_158":159,"_105":439,"_100":32,"_161":179,"_163":364,"_164":22,"_165":-5,"_98":440},["D",1748543153316],[99,176],{"_103":346,"_155":137,"_152":347,"_95":99,"_163":-5,"_161":162,"_100":32,"_154":-5,"_105":442,"_156":348,"_165":-5,"_98":443},["D",1748543140561],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":452,"_147":457,"_425":551,"_331":552,"_433":555,"_560":-5,"_561":22,"_562":-5,"_563":-5,"_564":-5,"_565":566},{"_103":104,"_95":96,"_105":453,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":454,"_131":455,"_134":456,"_146":22},["D",1748542306097],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},[458,494,524,533,536,539,542,545,548],{"_103":150,"_95":151,"_152":153,"_154":-5,"_155":137,"_156":157,"_158":159,"_105":160,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":459,"_98":493},[460,466,475,484,490],{"_103":169,"_95":7,"_152":170,"_154":153,"_155":137,"_156":171,"_158":159,"_105":172,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":461,"_98":465},[462],{"_103":175,"_95":176,"_152":177,"_154":170,"_155":137,"_156":171,"_158":159,"_105":178,"_100":32,"_161":179,"_163":180,"_164":22,"_165":-5,"_166":463,"_98":464},[],[151,7,176],[151,7],{"_103":185,"_95":186,"_152":187,"_154":153,"_155":137,"_156":157,"_158":159,"_105":188,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":467,"_98":474},[468,471],{"_103":191,"_95":192,"_152":193,"_154":187,"_155":137,"_156":157,"_158":159,"_105":194,"_100":32,"_161":179,"_163":195,"_164":22,"_165":-5,"_166":469,"_98":470},[],[151,186,192],{"_103":199,"_95":200,"_152":201,"_154":187,"_155":137,"_156":202,"_158":159,"_105":203,"_100":32,"_161":179,"_163":204,"_164":22,"_165":-5,"_166":472,"_98":473},[],[151,186,200],[151,186],{"_103":209,"_95":210,"_152":211,"_154":153,"_155":137,"_156":212,"_158":159,"_105":213,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":476,"_98":483},[477,480],{"_103":216,"_95":217,"_152":218,"_154":211,"_155":137,"_156":212,"_158":159,"_105":219,"_100":32,"_161":179,"_163":220,"_164":22,"_165":-5,"_166":478,"_98":479},[],[151,210,217],{"_103":224,"_95":225,"_152":226,"_154":211,"_155":137,"_156":227,"_158":159,"_105":228,"_100":32,"_161":179,"_163":229,"_164":22,"_165":-5,"_166":481,"_98":482},[],[151,210,225],[151,210],{"_103":234,"_95":235,"_152":236,"_154":153,"_155":137,"_156":237,"_158":159,"_105":238,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":485,"_98":489},[486],{"_103":241,"_95":242,"_152":243,"_154":236,"_155":137,"_156":237,"_158":159,"_105":244,"_100":32,"_161":179,"_163":245,"_164":22,"_165":-5,"_166":487,"_98":488},[],[151,235,242],[151,235],{"_103":250,"_95":251,"_152":252,"_154":153,"_155":137,"_156":253,"_158":159,"_105":254,"_100":32,"_161":179,"_163":255,"_164":22,"_165":-5,"_166":491,"_98":492},[],[151,251],[151],{"_103":260,"_95":261,"_152":262,"_154":-5,"_155":137,"_156":263,"_158":159,"_105":264,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":495,"_98":523},[496,517,520],{"_103":267,"_95":268,"_152":269,"_154":262,"_155":137,"_156":270,"_158":159,"_105":271,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":497,"_98":516},[498,501,504,507,510,513],{"_103":274,"_95":275,"_152":276,"_154":269,"_155":137,"_156":270,"_158":159,"_105":277,"_100":32,"_161":179,"_163":278,"_164":22,"_165":-5,"_166":499,"_98":500},[],[261,268,275],{"_103":282,"_95":283,"_152":284,"_154":269,"_155":137,"_156":285,"_158":159,"_105":286,"_100":32,"_161":179,"_163":287,"_164":22,"_165":-5,"_166":502,"_98":503},[],[261,268,283],{"_103":291,"_95":292,"_152":293,"_154":269,"_155":137,"_156":294,"_158":159,"_105":295,"_100":32,"_161":179,"_163":296,"_164":22,"_165":-5,"_166":505,"_98":506},[],[261,268,292],{"_103":300,"_95":301,"_152":302,"_154":269,"_155":137,"_156":303,"_158":159,"_105":304,"_100":32,"_161":179,"_163":305,"_164":22,"_165":-5,"_166":508,"_98":509},[],[261,268,301],{"_103":309,"_95":310,"_152":311,"_154":269,"_155":137,"_156":312,"_158":159,"_105":313,"_100":32,"_161":179,"_163":314,"_164":22,"_165":-5,"_166":511,"_98":512},[],[261,268,310],{"_103":318,"_95":319,"_152":320,"_154":269,"_155":137,"_156":136,"_158":159,"_105":321,"_100":32,"_161":179,"_163":322,"_164":22,"_165":-5,"_166":514,"_98":515},[],[261,268,319],[261,268],{"_103":327,"_95":328,"_152":329,"_154":262,"_155":137,"_156":263,"_158":159,"_105":330,"_100":32,"_161":331,"_163":332,"_164":22,"_165":-5,"_166":518,"_98":519},[],[261,328],{"_103":336,"_95":337,"_152":338,"_154":262,"_155":137,"_156":339,"_158":159,"_105":340,"_100":32,"_161":179,"_163":341,"_164":22,"_165":-5,"_166":521,"_98":522},[],[261,337],[261],{"_103":346,"_95":99,"_152":347,"_154":-5,"_155":137,"_156":348,"_158":159,"_105":349,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":525,"_98":532},[526,529],{"_103":352,"_95":353,"_152":354,"_154":347,"_155":137,"_156":348,"_158":159,"_105":355,"_100":32,"_161":179,"_163":356,"_164":22,"_165":-5,"_166":527,"_98":528},[],[99,353],{"_103":360,"_95":176,"_152":361,"_154":347,"_155":137,"_156":362,"_158":159,"_105":363,"_100":32,"_161":179,"_163":364,"_164":22,"_165":-5,"_166":530,"_98":531},[],[99,176],[99],{"_103":369,"_95":370,"_152":371,"_154":-5,"_155":137,"_156":372,"_158":159,"_105":373,"_100":32,"_161":179,"_163":374,"_164":22,"_165":-5,"_166":534,"_98":535},[],[370],{"_103":378,"_95":379,"_152":380,"_154":-5,"_155":137,"_156":381,"_158":159,"_105":382,"_100":32,"_161":383,"_163":384,"_164":22,"_165":-5,"_166":537,"_98":538},[],[379],{"_103":388,"_95":389,"_152":390,"_154":-5,"_155":137,"_156":391,"_158":159,"_105":392,"_100":32,"_161":393,"_163":394,"_164":22,"_165":-5,"_166":540,"_98":541},[],[389],{"_103":398,"_95":399,"_152":400,"_154":-5,"_155":137,"_156":401,"_158":159,"_105":402,"_100":32,"_161":403,"_163":404,"_164":22,"_165":-5,"_166":543,"_98":544},[],[399],{"_103":408,"_95":409,"_152":410,"_154":-5,"_155":137,"_156":411,"_158":159,"_105":412,"_100":413,"_161":331,"_163":414,"_164":22,"_165":-5,"_166":546,"_98":547},[],[409],{"_103":418,"_95":419,"_152":420,"_154":-5,"_155":137,"_156":421,"_158":159,"_105":422,"_100":32,"_161":179,"_163":72,"_164":22,"_165":-5,"_166":549,"_98":550},[],[419],[458,460,462,466,468,471,475,477,480,484,486,490,494,496,498,501,504,507,510,513,517,520,524,526,529,533,536,539,542,545,548],{"_103":346,"_155":137,"_152":347,"_95":99,"_163":-5,"_161":162,"_100":32,"_154":-5,"_105":553,"_156":348,"_165":-5,"_98":554},["D",1748543140561],[99],[556,558],{"_103":352,"_95":353,"_152":354,"_154":347,"_155":137,"_156":348,"_158":159,"_105":436,"_100":32,"_161":179,"_163":356,"_164":22,"_165":-5,"_98":557},[99,353],{"_103":360,"_95":176,"_152":361,"_154":347,"_155":137,"_156":362,"_158":159,"_105":439,"_100":32,"_161":179,"_163":364,"_164":22,"_165":-5,"_98":559},[99,176],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

Mahi77

my-first-val