[{"_1":2,"_221":-5,"_222":-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":25,"_26":25,"_27":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_5":44,"_56":57,"_58":59,"_60":59,"_61":62,"_63":59,"_64":41,"_65":41,"_66":67,"_68":59,"_69":41,"_70":17,"_71":17,"_72":-5,"_73":74,"_75":76,"_77":78,"_79":-5,"_80":81,"_172":17,"_173":174,"_90":31,"_92":219,"_220":25},"id","433c2503e21efd3a5347","isMyApp",false,"name","framesynth","description","Drop your video into our cyber-green terminal and watch the magic unfold in real-time. We slice through your footage like digital katanas, extracting the soul of each frame and feeding it to our AI music composer. Your visual memories get reborn as haunting melodies with that signature black-and-green aesthetic that'll make your friends think you're operating from the matrix.","brief","Hack your videos into sick beats with terminal-green vibes ⚡","isLive",true,"isPublic","tags",[29],"👑","cover","https://cdn.dev.fun/snapshot/433c2503e21efd3a5347/94208_66c1c8ea.webp","cdnUrl","https://cdn.dev.fun/app/433c2503e21efd3a5347/94208","createdAt",["D",1755215008493],"updatedAt",["D",1755527745877],"lastCommitId",["B","94208"],"tier",1,"credits",140,{"_14":45,"_46":47,"_48":47,"_49":50,"_51":47,"_52":53,"_54":55},"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",38,"forkCount",0,"likeCount","runsCount",145,"downvoteCount","upvoteCount","upvoteRate","commentCount",2,"reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useCallback, useEffect } from 'react';\nimport { useDevapp, DevappProvider } from '@devfunlabs/web-sdk';\nimport { Upload, Play, Music, Image as ImageIcon, Loader2, CheckCircle, AlertCircle, Download, Settings, Save } 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 userWallet\n } = useDevapp();\n const [showIntro, setShowIntro] = useState(true);\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 [isPollingDevbase, setIsPollingDevbase] = useState(false);\n const [error, setError] = useState('');\n const [songUrl, setSongUrl] = useState(null);\n const [, setSongMp3] = useState(null);\n const [imageAnalysis, setImageAnalysis] = useState(null);\n const [showConfigPanel, setShowConfigPanel] = useState(false);\n const [webhookUrl, setWebhookUrl] = useState('https://sp3akerstelios.app.n8n.cloud/webhook/1617ca48-a772-4b10-bcd2-0950fe931806');\n const [tempWebhookUrl, setTempWebhookUrl] = useState('https://sp3akerstelios.app.n8n.cloud/webhook/1617ca48-a772-4b10-bcd2-0950fe931806');\n const [originalVideoFile, setOriginalVideoFile] = useState(null);\n const [isMixing, setIsMixing] = useState(false);\n const [mixingProgress, setMixingProgress] = useState(0);\n const [mixedVideoUrl, setMixedVideoUrl] = useState(null);\n const [hasTweetedForDownload, setHasTweetedForDownload] = useState(false);\n const [hasTweetedForMix, setHasTweetedForMix] = useState(false);\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 userId: userWallet,\n filename: file.name,\n size: file.size,\n type: file.type,\n uploadedAt: Date.now(),\n duration: videoDuration,\n processingStatus: 'Frames extracted, ready for music generation.'\n };\n const video = await devbaseClient.createEntity('videos', videoData);\n setCurrentVideo(video);\n setExtractedFrames(extractedFramesWithBlobs);\n setOriginalVideoFile(file);\n setProcessingStatus('✨ Visual moments extracted successfully!');\n } catch (err) {\n setError(err.message);\n setExtractedFrames([]);\n setCurrentVideo(null);\n setIsProcessing(false);\n } finally {\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 try {\n setError('');\n setIsProcessing(true);\n setProcessingStatus('Sending frames to AI music composer...');\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 mode: 'cors',\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 setSongMp3(result.songMp3 || result.songUrl);\n setImageAnalysis(result.imageAnalysis || '');\n if (currentVideo) {\n await devbaseClient.updateEntity('videos', currentVideo.id, {\n songUrl: result.songUrl,\n songMp3: result.songMp3 || result.songUrl,\n imageAnalysis: result.imageAnalysis || '',\n processingStatus: '🎵 Your custom soundtrack is ready!',\n songPrompt: result.songPrompt || ''\n });\n setCurrentVideo(prev => ({\n ...prev,\n songUrl: result.songUrl,\n songMp3: result.songMp3 || result.songUrl,\n imageAnalysis: result.imageAnalysis || '',\n processingStatus: '🎵 Your custom soundtrack is ready!',\n songPrompt: result.songPrompt || ''\n }));\n }\n setProcessingStatus('🎵 Your custom soundtrack is ready!');\n setIsProcessing(false);\n } else {\n setProcessingStatus('Sending frames to AI music composer...\\n⏱️ Estimated processing time: ~1.5 minutes');\n if (currentVideo) {\n await devbaseClient.updateEntity('videos', currentVideo.id, {\n processingStatus: 'Analysing image...'\n });\n }\n const messages = [\"Analyzing visual content with AI...\", \"Creating personalized song prompt...\", \"Generating your custom soundtrack...\", \"Almost ready! Finalizing your song...\"];\n let messageIndex = 0;\n const cycleMessages = () => {\n setProcessingStatus(messages[messageIndex]);\n if (messageIndex < messages.length - 1) {\n messageIndex++;\n setTimeout(cycleMessages, 10000);\n } else {\n setIsPollingDevbase(true);\n }\n };\n setTimeout(cycleMessages, 10000);\n }\n } catch (err) {\n console.error('💥 Error in handleSubmitFrames:', err);\n let errorMessage = err.message;\n if (err.name === 'TypeError' && err.message.includes('fetch')) {\n errorMessage = `Network error: Unable to connect to webhook. Please check:\\n• Your internet connection\\n• The webhook URL is correct\\n• The webhook service is running\\n• CORS is properly configured on the webhook\\n\\nOriginal error: ${err.message}`;\n } else if (err.message.includes('Failed to fetch')) {\n errorMessage = `Connection failed: The webhook at ${webhookUrl} is not accessible. This could be due to:\\n• Network connectivity issues\\n• CORS policy blocking the request\\n• The webhook service being down\\n• Incorrect webhook URL`;\n }\n setError(`Failed to process frames for music generation: ${errorMessage}`);\n setIsPollingDevbase(false);\n setIsProcessing(false);\n }\n };\n useEffect(() => {\n let intervalId;\n if (isPollingDevbase && currentVideo?.id) {\n intervalId = setInterval(async () => {\n try {\n const latestVideo = await devbaseClient.getEntity('videos', currentVideo.id);\n if (latestVideo && latestVideo.processingStatus) {\n setProcessingStatus(latestVideo.processingStatus);\n if (latestVideo.songPrompt && latestVideo.songPrompt !== currentVideo?.songPrompt) {\n setCurrentVideo(prev => ({\n ...prev,\n songPrompt: latestVideo.songPrompt\n }));\n }\n if (latestVideo.songUrl && !songUrl) {\n setSongUrl(latestVideo.songUrl);\n setSongMp3(latestVideo.songMp3 || latestVideo.songUrl);\n setImageAnalysis(latestVideo.imageAnalysis || '');\n }\n if (latestVideo.processingStatus.includes('ready') || latestVideo.processingStatus.includes('error')) {\n setIsPollingDevbase(false);\n setIsProcessing(false);\n }\n }\n } catch (err) {\n console.error('Error polling Devbase for status:', err);\n setError('Failed to get latest status updates from server.');\n setIsPollingDevbase(false);\n setIsProcessing(false);\n }\n }, 3000);\n }\n return () => {\n if (intervalId) {\n clearInterval(intervalId);\n }\n };\n }, [isPollingDevbase, currentVideo?.id, devbaseClient]);\n const resetUpload = () => {\n setCurrentVideo(null);\n setExtractedFrames([]);\n setSelectedFrame(null);\n setProcessingStatus('');\n setError('');\n setUploadProgress(0);\n setIsProcessing(false);\n setSongUrl(null);\n setSongMp3(null);\n setImageAnalysis(null);\n setIsPollingDevbase(false);\n setOriginalVideoFile(null);\n setIsMixing(false);\n setMixingProgress(0);\n setMixedVideoUrl(null);\n setHasTweetedForDownload(false);\n setHasTweetedForMix(false);\n setTempWebhookUrl(webhookUrl);\n };\n const saveWebhookConfig = () => {\n setWebhookUrl(tempWebhookUrl);\n setShowConfigPanel(false);\n };\n const cancelWebhookConfig = () => {\n setTempWebhookUrl(webhookUrl);\n setShowConfigPanel(false);\n };\n const handleTweetForDownload = () => {\n const tweetText = `🎵 Just created an AI-generated soundtrack from my video using FrameSynth! The AI analyzed my footage and turned it into music. This is incredible! 🤖✨ #devfun #sunomusic #n8n`;\n const shareUrl = 'https://dev.fun/p/433c2503e21efd3a5347';\n const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}&url=${encodeURIComponent(shareUrl)}`;\n window.open(twitterUrl, '_blank');\n setHasTweetedForDownload(true);\n };\n const handleTweetForMix = () => {\n const tweetText = `🎬 About to mix my video with AI-generated music using FrameSynth! The future of content creation is here 🚀 #devfun #sunomusic #n8n`;\n const shareUrl = 'https://dev.fun/p/433c2503e21efd3a5347';\n const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}&url=${encodeURIComponent(shareUrl)}`;\n window.open(twitterUrl, '_blank');\n setHasTweetedForMix(true);\n };\n const mixVideoWithAudio = async () => {\n if (!originalVideoFile || !songUrl) {\n setError('Both video file and generated song are required for mixing');\n return;\n }\n const audioSrc = songUrl;\n try {\n setIsMixing(true);\n setMixingProgress(0);\n setError('');\n const video = document.createElement('video');\n video.src = URL.createObjectURL(originalVideoFile);\n video.muted = true;\n video.preload = 'metadata';\n video.style.position = 'absolute';\n video.style.left = '-9999px';\n document.body.appendChild(video);\n await new Promise((resolve, reject) => {\n video.onloadedmetadata = resolve;\n video.onerror = reject;\n setTimeout(() => reject(new Error('Video loading timeout')), 10000);\n });\n const audio = new Audio();\n audio.crossOrigin = 'anonymous';\n audio.src = audioSrc;\n audio.preload = 'metadata';\n await new Promise((resolve, reject) => {\n audio.onloadedmetadata = resolve;\n audio.onerror = reject;\n setTimeout(() => reject(new Error('Audio loading timeout')), 10000);\n });\n const audioContext = new (window.AudioContext || window.webkitAudioContext)();\n if (audioContext.state === 'suspended') {\n await audioContext.resume();\n }\n const maxDuration = 30;\n video.currentTime = 0;\n audio.currentTime = 0;\n let videoStream;\n if (video.captureStream) {\n videoStream = video.captureStream(30);\n } else if (video.mozCaptureStream) {\n videoStream = video.mozCaptureStream(30);\n } else {\n throw new Error('Video capture not supported in this browser. Please try Chrome, Firefox, or Safari.');\n }\n const audioSource = audioContext.createMediaElementSource(audio);\n const destination = audioContext.createMediaStreamDestination();\n audioSource.connect(destination);\n audioSource.connect(audioContext.destination);\n const combinedStream = new MediaStream();\n videoStream.getVideoTracks().forEach(track => combinedStream.addTrack(track));\n destination.stream.getAudioTracks().forEach(track => combinedStream.addTrack(track));\n const mediaRecorder = new MediaRecorder(combinedStream, {\n mimeType: 'video/webm;codecs=vp8,opus',\n videoBitsPerSecond: 2000000\n });\n const chunks = [];\n mediaRecorder.ondataavailable = event => {\n if (event.data.size > 0) {\n chunks.push(event.data);\n }\n };\n mediaRecorder.onstop = () => {\n const blob = new Blob(chunks, {\n type: 'video/webm'\n });\n const url = URL.createObjectURL(blob);\n setMixedVideoUrl(url);\n setIsMixing(false);\n setMixingProgress(100);\n document.body.removeChild(video);\n URL.revokeObjectURL(video.src);\n audio.pause();\n video.pause();\n };\n await Promise.all([video.play(), audio.play()]);\n mediaRecorder.start();\n let startTime = Date.now();\n const updateProgress = () => {\n const elapsed = (Date.now() - startTime) / 1000;\n const progress = Math.min(elapsed / maxDuration * 100, 100);\n setMixingProgress(Math.floor(progress));\n if (elapsed >= maxDuration) {\n mediaRecorder.stop();\n } else {\n setTimeout(updateProgress, 100);\n }\n };\n updateProgress();\n setTimeout(() => {\n if (mediaRecorder.state === 'recording') {\n mediaRecorder.stop();\n }\n }, maxDuration * 1000);\n } catch (err) {\n console.error('Mixing error:', err);\n setError(`Failed to mix video and audio: ${err.message}`);\n setIsMixing(false);\n setMixingProgress(0);\n }\n };\n if (showIntro) {\n return

\n $\"FrameSynth$ \n

\n Welcome to FrameSynth\n

\n Drop your video and watch the AI magic unfold in real-time. We slice through your footage, extracting the soul of each frame and feeding it to our AI music composer{' '}\n (image analysis and prompt by OpenAI, Music by Suno api, Automations by n8n, vibe coded at devfun).\n

\n Your visual memories get reborn as melodies.\n

\n \n

;\n }\n return

\n {}\n

\n \n

FrameHarmony

\n \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 {}\n {showConfigPanel &&

\n \n Configuration\n

\n \n Music Generation Webhook URL\n \n setTempWebhookUrl(e.target.value)} className=\"w-full px-4 py-2 bg-white/10 border border-green-400/50 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-400 focus:border-transparent\" placeholder=\"Enter webhook URL...\" />\n

\n This webhook URL will be used for music generation from video frames\n

\n \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 {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 \n

\n ⏱️ Song generation takes approximately 1.5 minutes\n

}\n {}\n {selectedFrame &&

Preview: {selectedFrame.timestamp}

\n $\"Selected$ \n

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

\n \n

Your Soundtrack is Ready! 🎵

\n {currentVideo?.songPrompt &&

\n Prompt: \"{currentVideo.songPrompt}\"\n

}\n {imageAnalysis &&

AI Visual Analysis:

{imageAnalysis}

}\n

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

\n {!hasTweetedForDownload ? : \n Download Song\n }\n

\n {!hasTweetedForDownload ? 'Pay with a tweet' : 'Tweet shared! ✓'}\n

\n {originalVideoFile && !isMixing && !mixedVideoUrl &&

\n {!hasTweetedForMix ? : }\n

\n {!hasTweetedForMix ? 'Pay with a tweet' : 'Tweet shared! ✓'}\n

}\n

}\n\n {}\n {isMixing &&

\n \n

Mixing video with audio...

{mixingProgress}% complete

\n Note: Processing is limited to 30 seconds to ensure browser stability\n

}\n\n {}\n {mixedVideoUrl &&

\n \n

Your Mixed Video is Ready! 🎬

\n Your video has been combined with the AI-generated soundtrack!\n

\n \n Download Mixed Video\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",[],"token","upstreamApp",{"_14":82,"_34":83,"_36":84,"_85":86,"_18":87,"_20":88,"_22":89,"_72":-5,"_90":91,"_92":93,"_32":94,"_40":41,"_42":95,"_96":97,"_98":17,"_26":25,"_70":25,"_71":17,"_99":17,"_100":17,"_101":17,"_56":102,"_58":41,"_60":59,"_61":103,"_66":59,"_64":59,"_63":59,"_104":45,"_105":-5,"_38":106,"_107":108,"_170":17,"_24":17,"_65":59,"_27":171},"b6a9ede690d0aef91e48",["D",1755046694047],["D",1755915362472],"template","web","frameharmony","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.","Turn your videos into custom songs by analyzing visual frames with AI magic!","snapshot","https://cdn.dev.fun/snapshot/b6a9ede690d0aef91e48/93952_7431fd7b.webp","ogImage","https://cdn.dev.fun/og/image/b6a9ede690d0aef91e48/d42316d7.webp","https://cdn.dev.fun/app/b6a9ede690d0aef91e48/93952",91,"featureScore","0","isAutomated","isTagHot","isTagMoney","isTagCrown",16,4,"userId","upstreamAppId",["B","93952"],"lastCommit",{"_14":106,"_34":109,"_110":111,"_112":113,"_73":114,"_75":76,"_115":116,"_117":118,"_119":113,"_90":91,"_32":94,"_120":17,"_121":17,"_122":25,"_85":86,"_123":-5,"_124":125,"_157":158,"_6":82,"_104":45,"_159":160,"_77":161},["D",1755175824720],"input","lets add more information on the messaging for debug yes","output","<<<<<<< OLD\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 extractedFrames.forEach((frame, index) => {\n if (frame.binaryBlob) {\n formData.append(`frame_${index}`, frame.binaryBlob, `frame_${index}.jpg`);\n }\n formData.append(`timestamp_${index}`, frame.timestamp);\n });\n formData.append('videoInfo', JSON.stringify({\n filename: currentVideo?.filename,\n frameCount: extractedFrames.length,\n timestamp: Date.now(),\n duration: currentVideo?.duration\n }));\n\n const response = await fetch(webhookUrl, {\n method: 'POST',\n body: formData\n });\n\n if (!response.ok) {\n throw new Error(`Webhook request failed with status: ${response.status}`);\n }\n const result = await response.json();\n console.log('Webhook response:', result);\n\n if (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 setProcessingStatus('🎵 Your custom soundtrack is being composed!');\n }\n } catch (err) {\n setError(`Failed to process frames for music generation: ${err.message}`);\n }\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 \n // Log what we're sending for debugging\n console.log('🔍 DEBUG: Preparing webhook request');\n console.log('📤 Webhook URL:', webhookUrl);\n console.log('📊 Frame count:', extractedFrames.length);\n \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 \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\n console.log('🚀 Sending webhook request...');\n const response = await fetch(webhookUrl, {\n method: 'POST',\n body: formData\n });\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\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\n let result;\n const responseText = await response.text();\n console.log('📄 Raw response text (first 500 chars):', responseText.substring(0, 500));\n \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\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>>>>>>> NEW","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}","thinking","The user wants to add more information on the messaging for debug. Looking at the message history, they were having an issue with \"Unexpected end of JSON input\" when calling the webhook. They want better debugging information to understand what's happening.\n\nLooking at the current code, I can see there's a `handleSubmitFrames` function that makes the webhook call. Currently it just logs the error message, but we could add more detailed debugging information like:\n\n1. Log the raw response text when JSON parsing fails\n2. Log the response status and headers\n3. Log more details about the request being sent\n4. Show more detailed error messages to the user\n\nLet me modify the `handleSubmitFrames` function to add better debugging information.","changelog","Added comprehensive debugging information for webhook calls - now logs response details, status codes, and raw content when errors occur!","diff","isRephrased","isDebug","isSuccess","error","devbaseSchema",{"_126":127,"_143":144},"frames",{"_128":129,"_137":138},"rules",{"_130":131,"_132":131,"_133":134,"_135":131,"_136":131},"get","$FUNC_CAN_ACCESS_FRAMES($data.videoId)","list","create","$FUNC_CAN_ACCESS_FRAMES($newData.videoId)","delete","update","fields",{"_139":140,"_141":140,"_142":140,"_20":140},"url","String","videoId","timestamp","videos",{"_128":145,"_137":148},{"_130":146,"_132":146,"_133":147,"_135":146,"_136":146},"$USER_ID === $data.userId","$USER_ID === $newData.userId",{"_149":150,"_151":140,"_152":140,"_153":150,"_154":140,"_155":150,"_156":140},"size","Number","type","songUrl","duration","filename","uploadedAt","processingStatus","devbaseInsight","## Videos Entity\n### Fields:\n- `size` (Number): The size of the video file.\n- `type` (String): The file type of the video (e.g., \"mp4\").\n- `songUrl` (String): A URL to an associated song or audio track.\n- `duration` (Number): The length of the video in seconds.\n- `filename` (String): The original name of the video file.\n- `uploadedAt` (Number): The timestamp when the video was uploaded.\n- `processingStatus` (String): The current status of video processing (e.g., \"pending\", \"completed\").\n\n### Permissions:\n- **Strict Ownership:** All operations (get, list, create, update, delete) on video records are restricted to the user who owns that specific video. A user can only interact with videos they have uploaded.\n\n## Frames Entity\n### Fields:\n- `url` (String): The URL where the frame image or data is stored.\n- `videoId` (String): A reference to the video this frame belongs to.\n- `timestamp` (String): The specific point in time within the video that this frame represents.\n- `description` (String): A brief description of the frame's content.\n\n### Permissions:\n- **Video-Dependent Access:** Access to frames (get, list, create, update, delete) is entirely determined by the `$FUNC_CAN_ACCESS_FRAMES` function, which takes the `videoId` as an argument. This implies that if a user has permission to access a particular video, they will also have permission to access its associated frames. The exact logic of this access is defined within the `$FUNC_CAN_ACCESS_FRAMES` function, but it's likely tied to the video's ownership or sharing settings.\n\n## Key Behaviors:\n- **User-Owned Videos:** Videos are private to the user who uploads them.\n- **Frames Linked to Videos:** Frames are components of videos, and access to them is governed by the access rules of their parent video.\n- **Custom Frame Access Control:** A dedicated function (`$FUNC_CAN_ACCESS_FRAMES`) is used to manage permissions for frames, suggesting a potentially more complex access model than simple ownership.","messageId",["B","161569"],[162],{"_14":163,"_34":164,"_36":165,"_18":166,"_167":168,"_169":106},["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","isDraft",[],"isLordOfDev","analytics",[175,179,181,183,185,187,189,191,193,195,197,199,201,203,205,207,209,211,213,215,217,218],{"_176":177,"_178":59},"day","2025-08-09","runCount",{"_176":180,"_178":59},"2025-08-10",{"_176":182,"_178":59},"2025-08-11",{"_176":184,"_178":59},"2025-08-12",{"_176":186,"_178":59},"2025-08-13",{"_176":188,"_178":59},"2025-08-14",{"_176":190,"_178":59},"2025-08-15",{"_176":192,"_178":59},"2025-08-16",{"_176":194,"_178":59},"2025-08-17",{"_176":196,"_178":59},"2025-08-18",{"_176":198,"_178":59},"2025-08-19",{"_176":200,"_178":59},"2025-08-20",{"_176":202,"_178":59},"2025-08-21",{"_176":204,"_178":59},"2025-08-22",{"_176":190,"_178":206},58,{"_176":192,"_178":208},45,{"_176":194,"_178":210},17,{"_176":196,"_178":212},13,{"_176":198,"_178":214},6,{"_176":200,"_178":216},3,{"_176":202,"_178":67},{"_176":204,"_178":41},"https://cdn.dev.fun/og/image/433c2503e21efd3a5347/841d6ea1.webp","isDevbase","actionData","errors"]

say something