[{"_1":2,"_125":-5,"_126":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":17,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_5":43,"_55":56,"_57":40,"_58":59,"_60":61,"_62":59,"_63":59,"_64":59,"_65":59,"_66":59,"_67":59,"_68":26,"_69":17,"_70":-5,"_71":72,"_73":74,"_75":76,"_85":-5,"_86":-5,"_87":17,"_88":89,"_121":30,"_122":123,"_124":26},"id","b6a9ede690d0aef91e48","isMyApp",false,"name","frameharmony","description","Upload any video and watch as we extract key visual moments, then magically transform them into a custom song using ElevenLabs! Your memories become melodies as our AI analyzes your video frames and composes the perfect soundtrack to match your visual story.","brief","Turn your videos into custom songs by analyzing visual frames with AI magic!","isLive","isPublic",true,"tags",[],"cover","https://cdn.dev.fun/snapshot/b6a9ede690d0aef91e48/93952_7431fd7b.webp","cdnUrl","https://cdn.dev.fun/app/b6a9ede690d0aef91e48/93952","createdAt",["D",1755046694047],"updatedAt",["D",1755175824720],"lastCommitId",["B","93952"],"tier",1,"credits",91,{"_14":44,"_45":46,"_47":46,"_48":49,"_50":46,"_51":52,"_53":54},"073aaad3-b924-4ff7-8ee9-e2bbef69725f","uniqueId","Sp3aker2020","username","solanaWallet","6mg3gMqGr96HWp9qRusvMpkdSYZWN36DERuJDSCNkAm5","displayName","bio","and the future will leak out","avatar","https://cdn.dev.fun/avatar/073aaad3-b924-4ff7-8ee9-e2bbef69725f/4f87d3ac.webp","commitCount",16,"forkCount","likeCount",0,"runsCount",4,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useCallback } from 'react';\nimport { useDevapp, DevappProvider } from '@devfunlabs/web-sdk';\nimport { Upload, Play, Music, Image as ImageIcon, Loader2, CheckCircle, AlertCircle, Download } from 'lucide-react';\nconst extractFramesFromVideo = async (file, numberOfFrames = 10) => {\n return new Promise((resolve, reject) => {\n const video = document.createElement('video');\n video.preload = 'metadata';\n video.muted = true;\n video.src = URL.createObjectURL(file);\n video.onloadedmetadata = async () => {\n const duration = video.duration;\n const frames = [];\n const interval = duration / (numberOfFrames + 1);\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n for (let i = 1; i <= numberOfFrames; i++) {\n const time = interval * i;\n video.currentTime = time;\n await new Promise(r => video.onseeked = r);\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n const dataUrl = canvas.toDataURL('image/jpeg', 0.8);\n const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.8));\n frames.push({\n url: dataUrl,\n binaryBlob: blob,\n timestamp: `${time.toFixed(2)}s`,\n description: `Frame at ${time.toFixed(2)}s`\n });\n }\n URL.revokeObjectURL(video.src);\n resolve({\n frames,\n duration\n });\n };\n video.onerror = e => {\n URL.revokeObjectURL(video.src);\n reject(new Error(`Error loading video for frame extraction: ${e.message}`));\n };\n });\n};\nfunction App() {\n const {\n devbaseClient\n } = useDevapp();\n const [dragActive, setDragActive] = useState(false);\n const [uploadProgress, setUploadProgress] = useState(0);\n const [processingStatus, setProcessingStatus] = useState('');\n const [currentVideo, setCurrentVideo] = useState(null);\n const [extractedFrames, setExtractedFrames] = useState([]);\n const [selectedFrame, setSelectedFrame] = useState(null);\n const [isProcessing, setIsProcessing] = useState(false);\n const [error, setError] = useState('');\n const [webhookUrl, setWebhookUrl] = useState('');\n const [songUrl, setSongUrl] = useState(null);\n const validateFile = file => {\n const validTypes = ['video/mp4', 'video/quicktime', 'video/mov'];\n const maxSize = 100 * 1024 * 1024;\n if (!validTypes.includes(file.type) && !file.name.toLowerCase().endsWith('.mov')) {\n throw new Error('Please upload an MP4 or MOV video file');\n }\n if (file.size > maxSize) {\n throw new Error('File size must be less than 100MB');\n }\n return true;\n };\n const handleFileUpload = async file => {\n try {\n setError('');\n validateFile(file);\n setIsProcessing(true);\n setUploadProgress(0);\n setProcessingStatus('Uploading video metadata...');\n for (let i = 0; i <= 100; i += 10) {\n setUploadProgress(i);\n await new Promise(resolve => setTimeout(resolve, 100));\n }\n setProcessingStatus('Extracting key visual moments from video...');\n const {\n frames: extractedFramesWithBlobs,\n duration: videoDuration\n } = await extractFramesFromVideo(file, 10);\n const videoData = {\n filename: file.name,\n size: file.size,\n type: file.type,\n uploadedAt: Date.now(),\n duration: videoDuration\n };\n const video = await devbaseClient.createEntity('videos', videoData);\n setCurrentVideo(video);\n setProcessingStatus('Saving extracted frames to Devbase...');\n const framePromises = extractedFramesWithBlobs.map(frame => devbaseClient.createEntity('frames', {\n videoId: video.id,\n url: frame.url,\n timestamp: frame.timestamp,\n description: frame.description\n }));\n await Promise.all(framePromises);\n setExtractedFrames(extractedFramesWithBlobs);\n setProcessingStatus('✨ Visual moments extracted successfully!');\n } catch (err) {\n setError(err.message);\n setExtractedFrames([]);\n setCurrentVideo(null);\n } finally {\n setIsProcessing(false);\n setUploadProgress(0);\n }\n };\n const handleDrag = useCallback(e => {\n e.preventDefault();\n e.stopPropagation();\n if (e.type === 'dragenter' || e.type === 'dragover') {\n setDragActive(true);\n } else if (e.type === 'dragleave') {\n setDragActive(false);\n }\n }, []);\n const handleDrop = useCallback(e => {\n e.preventDefault();\n e.stopPropagation();\n setDragActive(false);\n if (e.dataTransfer.files && e.dataTransfer.files[0]) {\n handleFileUpload(e.dataTransfer.files[0]);\n }\n }, []);\n const handleFileSelect = e => {\n if (e.target.files && e.target.files[0]) {\n handleFileUpload(e.target.files[0]);\n }\n };\n const handleSubmitFrames = async () => {\n if (!extractedFrames.length) return;\n if (!webhookUrl.trim()) {\n setError('Please enter a webhook URL');\n return;\n }\n try {\n setProcessingStatus('Sending frames for musical analysis...');\n const formData = new FormData();\n console.log('🔍 DEBUG: Preparing webhook request');\n console.log('📤 Webhook URL:', webhookUrl);\n console.log('📊 Frame count:', extractedFrames.length);\n extractedFrames.forEach((frame, index) => {\n if (frame.binaryBlob) {\n formData.append(`frame_${index}`, frame.binaryBlob, `frame_${index}.jpg`);\n console.log(`🖼️ Added frame_${index}: ${frame.binaryBlob.size} bytes`);\n }\n formData.append(`timestamp_${index}`, frame.timestamp);\n });\n const videoInfo = {\n filename: currentVideo?.filename,\n frameCount: extractedFrames.length,\n timestamp: Date.now(),\n duration: currentVideo?.duration\n };\n formData.append('videoInfo', JSON.stringify(videoInfo));\n console.log('📹 Video info:', videoInfo);\n console.log('🚀 Sending webhook request...');\n const response = await fetch(webhookUrl, {\n method: 'POST',\n body: formData\n });\n console.log('📡 Response received:');\n console.log('📊 Status:', response.status, response.statusText);\n console.log('📋 Headers:', Object.fromEntries(response.headers.entries()));\n console.log('✅ OK:', response.ok);\n if (!response.ok) {\n const errorText = await response.text();\n console.error('❌ Error response body:', errorText);\n throw new Error(`Webhook request failed with status: ${response.status} ${response.statusText}. Response: ${errorText.substring(0, 200)}`);\n }\n let result;\n const responseText = await response.text();\n console.log('📄 Raw response text (first 500 chars):', responseText.substring(0, 500));\n try {\n result = JSON.parse(responseText);\n console.log('✅ Parsed JSON successfully:', result);\n } catch (jsonError) {\n console.error('❌ JSON parsing failed:', jsonError.message);\n console.error('📄 Full raw response:', responseText);\n throw new Error(`Webhook response was not valid JSON. Error: ${jsonError.message}. Raw response (first 200 chars): \"${responseText.substring(0, 200)}\"`);\n }\n if (result.songUrl) {\n console.log('🎵 Song URL received:', result.songUrl);\n setSongUrl(result.songUrl);\n if (currentVideo) {\n await devbaseClient.updateEntity('videos', currentVideo.id, {\n songUrl: result.songUrl\n });\n setCurrentVideo(prev => ({\n ...prev,\n songUrl: result.songUrl\n }));\n }\n setProcessingStatus('🎵 Your custom soundtrack is ready!');\n } else {\n console.log('⚠️ No songUrl in response, checking for other fields:', Object.keys(result));\n setProcessingStatus('🎵 Your custom soundtrack is being composed!');\n }\n } catch (err) {\n console.error('💥 Error in handleSubmitFrames:', err);\n setError(`Failed to process frames for music generation: ${err.message}`);\n }\n };\n const resetUpload = () => {\n setCurrentVideo(null);\n setExtractedFrames([]);\n setSelectedFrame(null);\n setProcessingStatus('');\n setError('');\n setUploadProgress(0);\n setIsProcessing(false);\n setWebhookUrl('');\n setSongUrl(null);\n };\n return

\n {}\n

\n \n

FrameHarmony

\n \n

\n Upload any video and watch as we extract key visual moments, then magically transform them into a custom song using AI\n

\n {}\n {!currentVideo &&

\n \n

\n Drop your video here or click to browse\n

\n Supports MP4 and MOV files up to 100MB\n

}\n {}\n {isProcessing &&

\n \n {processingStatus}\n

\n {uploadProgress > 0 && uploadProgress < 100 &&

}\n

}\n {}\n {error &&

\n \n {error}\n

}\n {}\n {extractedFrames.length > 0 &&

\n \n

Visual Moments Extracted

\n {extractedFrames.map((frame, index) =>

setSelectedFrame(frame)}>\n {`Frame

{frame.timestamp}

\n \n

)}\n

\n \n Webhook URL for Soundtrack Generation\n \n setWebhookUrl(e.target.value)} placeholder=\"https://your-webhook-url.com/webhook/...\" className=\"w-full px-4 py-3 bg-white/10 border border-purple-400/50 rounded-xl text-white placeholder-purple-300 focus:border-yellow-400 focus:outline-none focus:ring-2 focus:ring-yellow-400/50 transition-all duration-300\" />\n

\n \n \n

}\n {}\n {selectedFrame &&

Preview: {selectedFrame.timestamp}

\n $\"Selected$ \n

}\n {}\n {processingStatus.includes('ready') && songUrl &&

\n \n

Your Soundtrack is Ready! 🎵

\n Your visual story has been transformed into a beautiful melody. Listen to it below!\n

\n \n Download Song\n \n

}\n

;\n}\nexport default function AppWithProvider() {\n return \n \n ;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"@devfunlabs/web-sdk\":\"0.5.6\",\"lucide-react\":\"0.441.0\"}}","appFunctions",[77],{"_14":78,"_33":79,"_35":80,"_18":81,"_82":83,"_84":38},["B","11213"],["D",1755175850457],["D",1755175850457],"$FUNC_CAN_ACCESS_FRAMES","body","async function $FUNC_CAN_ACCESS_FRAMES(videoId) {\n const video = await $ENTITY('videos').get(videoId);\n return video && video.userId === $USER_ID;\n}","commitId","token","upstreamApp","isLordOfDev","analytics",[90,94,96,98,100,102,104,106,108,110,112,114,116,118,120],{"_91":92,"_93":59},"day","2025-08-09","runCount",{"_91":95,"_93":59},"2025-08-10",{"_91":97,"_93":59},"2025-08-11",{"_91":99,"_93":59},"2025-08-12",{"_91":101,"_93":59},"2025-08-13",{"_91":103,"_93":59},"2025-08-14",{"_91":105,"_93":59},"2025-08-15",{"_91":107,"_93":59},"2025-08-16",{"_91":109,"_93":59},"2025-08-17",{"_91":111,"_93":59},"2025-08-18",{"_91":113,"_93":59},"2025-08-19",{"_91":115,"_93":59},"2025-08-20",{"_91":117,"_93":59},"2025-08-21",{"_91":119,"_93":59},"2025-08-22",{"_91":105,"_93":61},"snapshot","ogImage","https://cdn.dev.fun/og/image/b6a9ede690d0aef91e48/d42316d7.webp","isDevbase","actionData","errors"]

say something