Hugging Face's logo

Spaces:
sohei1l
/
clip-tagger
Running

App Files Community
sohei1l commited on
Commit
77b219c
·
1 Parent(s): 219a469

Fix React issues and rebuild with clean working state

Browse files
Files changed (5) hide show
  1. assets/index-DPr5D1uq.js +0 -0
  2. assets/vite-DcBtz0py-DcBtz0py-DcBtz0py-DcBtz0py-DcBtz0py.svg +1 -0
  3. index.html +2 -2
  4. src/App.jsx +5 -0
  5. src/clapProcessor.js +17 -13
assets/index-DPr5D1uq.js ADDED
The diff for this file is too large to render. See raw diff
 
assets/vite-DcBtz0py-DcBtz0py-DcBtz0py-DcBtz0py-DcBtz0py.svg ADDED
index.html CHANGED
@@ -2,10 +2,10 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
- <link rel="icon" type="image/svg+xml" href="./assets/vite-DcBtz0py-DcBtz0py-DcBtz0py-DcBtz0py.svg" />
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
  <title>🎵 clip-tagger</title>
8
- <script type="module" crossorigin src="./assets/index-B93k8qqj.js"></script>
9
  <link rel="stylesheet" crossorigin href="./assets/index-F_aFpJd-.css">
10
  </head>
11
  <body>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="./assets/vite-DcBtz0py-DcBtz0py-DcBtz0py-DcBtz0py-DcBtz0py.svg" />
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
  <title>🎵 clip-tagger</title>
8
+ <script type="module" crossorigin src="./assets/index-DPr5D1uq.js"></script>
9
  <link rel="stylesheet" crossorigin href="./assets/index-F_aFpJd-.css">
10
  </head>
11
  <body>
src/App.jsx CHANGED
@@ -23,6 +23,9 @@ function App() {
23
 
24
  useEffect(() => {
25
  const initializeStore = async () => {
 
 
 
26
  feedbackStoreRef.current = new UserFeedbackStore()
27
  await feedbackStoreRef.current.initialize()
28
 
@@ -102,7 +105,9 @@ function App() {
102
  setError(null)
103
 
104
  try {
 
105
  if (!clapProcessorRef.current) {
 
106
  clapProcessorRef.current = new CLAPProcessor()
107
  }
108
 
 
23
 
24
  useEffect(() => {
25
  const initializeStore = async () => {
26
+ // Initialize CLAP processor once and reuse
27
+ clapProcessorRef.current = new CLAPProcessor()
28
+
29
  feedbackStoreRef.current = new UserFeedbackStore()
30
  await feedbackStoreRef.current.initialize()
31
 
 
105
  setError(null)
106
 
107
  try {
108
+ // CLAP processor should already be initialized in useEffect
109
  if (!clapProcessorRef.current) {
110
+ console.warn('CLAP processor not initialized, creating new instance')
111
  clapProcessorRef.current = new CLAPProcessor()
112
  }
113
 
src/clapProcessor.js CHANGED
@@ -38,20 +38,24 @@ class CLAPProcessor {
38
  }
39
 
40
  async processAudio(audioBuffer) {
41
- console.log('🎵 Processing audio...');
42
 
43
  if (!this.isLoaded) {
44
  await this.initialize();
45
  }
46
 
47
  try {
48
- // Convert AudioBuffer to raw audio data
49
- const audioData = this.convertAudioBuffer(audioBuffer);
50
 
51
- console.log('🔍 Running classification...');
 
 
 
 
52
 
53
- // Run the classification
54
- const results = await this.classifier(audioData, this.candidateLabels);
55
 
56
  console.log('🎯 Classification results:', results);
57
 
@@ -74,16 +78,18 @@ class CLAPProcessor {
74
  }
75
 
76
  convertAudioBuffer(audioBuffer) {
77
- console.log('🔧 Converting audio buffer:', {
78
  duration: audioBuffer.duration.toFixed(2) + 's',
79
  sampleRate: audioBuffer.sampleRate,
80
  channels: audioBuffer.numberOfChannels
81
  });
82
 
83
- // Extract audio data
84
  let rawAudio;
85
  if (audioBuffer.numberOfChannels === 1) {
86
- rawAudio = audioBuffer.getChannelData(0);
 
 
87
  } else {
88
  // Convert stereo to mono by averaging
89
  const left = audioBuffer.getChannelData(0);
@@ -94,10 +100,8 @@ class CLAPProcessor {
94
  }
95
  }
96
 
97
- return {
98
- raw: rawAudio,
99
- sampling_rate: audioBuffer.sampleRate
100
- };
101
  }
102
 
103
  formatResults(results) {
 
38
  }
39
 
40
  async processAudio(audioBuffer) {
41
+ console.log('Processing audio...');
42
 
43
  if (!this.isLoaded) {
44
  await this.initialize();
45
  }
46
 
47
  try {
48
+ // Convert AudioBuffer to raw audio data (Float32Array)
49
+ const rawAudio = this.convertAudioBuffer(audioBuffer);
50
 
51
+ console.log('Running classification...');
52
+ console.log('Audio data type:', rawAudio.constructor.name, 'Length:', rawAudio.length);
53
+ console.log('Audio data sample:', rawAudio.slice(0, 5));
54
+ console.log('Is Float32Array?', rawAudio instanceof Float32Array);
55
+ console.log('Candidate labels:', this.candidateLabels.slice(0, 3));
56
 
57
+ // Run the classification - pass raw Float32Array and candidate labels as separate params
58
+ const results = await this.classifier(rawAudio, this.candidateLabels);
59
 
60
  console.log('🎯 Classification results:', results);
61
 
 
78
  }
79
 
80
  convertAudioBuffer(audioBuffer) {
81
+ console.log('Converting audio buffer:', {
82
  duration: audioBuffer.duration.toFixed(2) + 's',
83
  sampleRate: audioBuffer.sampleRate,
84
  channels: audioBuffer.numberOfChannels
85
  });
86
 
87
+ // Extract audio data as Float32Array
88
  let rawAudio;
89
  if (audioBuffer.numberOfChannels === 1) {
90
+ // Mono audio - copy to new Float32Array to ensure proper type
91
+ const channelData = audioBuffer.getChannelData(0);
92
+ rawAudio = new Float32Array(channelData);
93
  } else {
94
  // Convert stereo to mono by averaging
95
  const left = audioBuffer.getChannelData(0);
 
100
  }
101
  }
102
 
103
+ console.log('Converted to Float32Array, length:', rawAudio.length);
104
+ return rawAudio;
 
 
105
  }
106
 
107
  formatResults(results) {