\n {emoji}\n

0.7 ? '#4CAF50' : confidence > 0.4 ? '#FFC107' : '#F44336',\n height: '100%',\n borderRadius: '5px',\n transition: 'width 0.5s ease-in-out'\n }}>

\n \n {(confidence * 100).toFixed(2)}%\n \n

\n );\n}\n\nfunction App() {\n const [recording, setRecording] = useState(false);\n const [result, setResult] = useState(null);\n const [error, setError] = useState(null);\n const mediaRecorderRef = useRef(null);\n const audioChunksRef = useRef([]);\n const fileInputRef = useRef(null);\n const streamRef = useRef(null);\n\n const classifyAudio = async (audioBlob: Blob) => {\n try {\n const formData = new FormData();\n formData.append('audio', audioBlob, 'audio.wav');\n\n const response = await fetch('/classify', {\n method: 'POST',\n body: formData\n });\n \n if (!response.ok) {\n throw new Error('Classification failed');\n }\n \n const data = await response.json();\n setResult(data);\n setError(null);\n } catch (error) {\n console.error('Classification error:', error);\n setError(error instanceof Error ? error.message : 'An unknown error occurred');\n setResult(null);\n }\n };\n\n const startRecording = async () => {\n audioChunksRef.current = [];\n try {\n // Check for microphone permissions\n const micPermission = await navigator.permissions.query({ name: 'microphone' as PermissionName });\n \n if (micPermission.state === 'denied') {\n setError('Microphone access is blocked. Please check your browser settings.');\n return;\n }\n\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n streamRef.current = stream;\n \n mediaRecorderRef.current = new MediaRecorder(stream);\n \n mediaRecorderRef.current.ondataavailable = (event) => {\n if (event.data.size > 0) {\n audioChunksRef.current.push(event.data);\n }\n };\n\n mediaRecorderRef.current.onstop = async () => {\n // Stop all tracks to release microphone\n stream.getTracks().forEach(track => track.stop());\n \n const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/wav' });\n \n // Only classify if we have audio data\n if (audioBlob.size > 0) {\n await classifyAudio(audioBlob);\n }\n \n audioChunksRef.current = [];\n };\n\n mediaRecorderRef.current.start();\n setRecording(true);\n setError(null);\n } catch (err) {\n console.error('Recording error:', err);\n const errorMessage = err instanceof Error \n ? err.message \n : 'Could not access microphone. Please check permissions.';\n \n setError(errorMessage);\n setRecording(false);\n \n // Attempt to stop any existing stream\n if (streamRef.current) {\n streamRef.current.getTracks().forEach(track => track.stop());\n }\n }\n };\n\n const stopRecording = () => {\n try {\n if (mediaRecorderRef.current && recording) {\n mediaRecorderRef.current.stop();\n setRecording(false);\n }\n } catch (err) {\n console.error('Stop recording error:', err);\n setError('Error stopping recording');\n }\n };\n\n const handleFileUpload = async (event: React.ChangeEvent) => {\n const file = event.target.files?.[0];\n if (file) {\n // Validate file type\n if (!file.type.startsWith('audio/')) {\n setError('Please upload an audio file');\n return;\n }\n\n // Validate file size (e.g., max 10MB)\n if (file.size > 10 * 1024 * 1024) {\n setError('File is too large. Max 10MB allowed.');\n return;\n }\n\n await classifyAudio(file);\n }\n };\n\n // Clean up stream on component unmount\n useEffect(() => {\n return () => {\n if (streamRef.current) {\n streamRef.current.getTracks().forEach(track => track.stop());\n }\n };\n }, []);\n\n return (\n

🎵 Instrument Classifier

\n \n

\n \n\n

\n OR\n

\n\n \n fileInputRef.current?.click()}\n style={{\n padding: '10px 20px',\n fontSize: '16px',\n backgroundColor: '#4CAF50',\n color: 'white',\n border: 'none',\n borderRadius: '5px',\n cursor: 'pointer',\n width: '200px'\n }}\n >\n Upload Audio File\n \n

\n \n {error && (\n

\n {error}\n

\n )}\n\n {result && (\n

Classification Results:

\n {result.instruments.map((instrument, index) => (\n i.name === instrument.name)?.emoji || '🎵'}\n confidence={instrument.confidence}\n />\n ))}\n

\n )}\n \n

\n Supported formats: MP3, WAV, FLAC (max 10MB)\n

\n\n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === 'POST' && new URL(request.url).pathname === '/classify') {\n try {\n const formData = await request.formData();\n const audioBlob = formData.get('audio') as Blob;\n\n // Mock multi-instrument classification with probabilities\n const mockClassification = {\n instruments: INSTRUMENT_CLASSES.map(instrument => ({\n name: instrument.name,\n confidence: Math.random()\n }))\n // Sort instruments by confidence in descending order\n .sort((a, b) => b.confidence - a.confidence)\n };\n\n return new Response(JSON.stringify(mockClassification), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: 'Classification failed' }), { status: 500 });\n }\n }\n\n return new Response(`\n \n \n Instrument Classifier\n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/uday_8897/Musical_Instrument_Identification_migrated/code/main.tsx","extension","actionData","errors"]