Add export functionality and polish user interface

README.md

@@ -1,19 +1,42 @@
-# clip-tagger
+# 🎵 clip-tagger
 
-Custom audio tagging in the browser using CLAP (Contrastive Language-Audio Pre-training).
+> Custom audio tagging in the browser using CLAP (Contrastive Language-Audio Pre-training)
 
-## Features
+Instantly tag any audio with AI that learns from your corrections. Upload files or record directly in your browser - everything runs locally, no servers needed.
 
-- Upload or record audio clips (voice, music, ambient sounds)
-- Local CLAP model for automatic tag generation
-- User-correctable tags with personalized learning
-- Lightweight classifier that adapts to your domain
-- Runs entirely in the browser with JavaScript/WASM
+## ✨ Features
 
-## Model
+- **🎤 Audio Input**: Upload files or record directly from your microphone
+- **🧠 Smart Tagging**: CLAP model identifies speech, music, ambient sounds, and more
+- **📚 Personalized Learning**: Correct tags and add custom ones - the model adapts to your domain
+- **💾 Persistent Memory**: Your corrections are saved and improve future predictions
+- **📁 Export Ready**: Export tagged data and trained models for sharing
+- **🔒 Privacy First**: Everything runs in your browser - no data leaves your device
 
-Uses the Xenova/clap-htsat-unfused ONNX model (~45MB) running locally via Transformers.js.
+## 🚀 How It Works
 
-## Demo
+1. **Drop an audio file** or click record
+2. **Review AI-generated tags** with confidence scores
+3. **Correct tags** with ✓/✗ buttons or add custom tags
+4. **Watch the model learn** from your feedback in real-time
+5. **Export results** or share your trained model
 
-Drop an audio file to get started with automatic tagging.
+## 🔧 Technical Details
+
+- **Model**: [Xenova/clap-htsat-unfused](https://huggingface.co/Xenova/clap-htsat-unfused) (~45MB)
+- **Framework**: [Transformers.js](https://github.com/xenova/transformers.js) + React
+- **Storage**: IndexedDB for user feedback and model weights
+- **Deployment**: Ready for Hugging Face Spaces
+
+## 🎯 Use Cases
+
+- Voice memo organization
+- Music library tagging
+- Audio content moderation
+- Podcast categorization
+- Sound effect libraries
+- Research datasets
+
+---
+
+*Powered by Transformers.js • Runs entirely in your browser*

src/App.css

@@ -261,6 +261,93 @@ header p {
   border-color: #646cff;
 }
 
+.export-section {
+  margin: 3rem 0 2rem 0;
+  padding: 2rem;
+  border: 1px solid #eee;
+  border-radius: 12px;
+  background: #fafafa;
+}
+
+.export-section h3 {
+  margin-bottom: 1rem;
+  color: #333;
+}
+
+.export-controls {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.export-btn {
+  background: #3498db;
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background 0.3s ease;
+}
+
+.export-btn:hover {
+  background: #2980b9;
+}
+
+.clear-btn {
+  background: #e74c3c;
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background 0.3s ease;
+}
+
+.clear-btn:hover {
+  background: #c0392b;
+}
+
+.model-stats {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: white;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+}
+
+.model-stats p {
+  margin: 0.25rem 0;
+  color: #666;
+  font-size: 0.9rem;
+}
+
+footer {
+  margin-top: 3rem;
+  padding: 2rem 0 1rem 0;
+  border-top: 1px solid #eee;
+  text-align: center;
+}
+
+footer p {
+  margin: 0;
+  color: #888;
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+footer a {
+  color: #646cff;
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}
+
 @media (max-width: 768px) {
   .app {
     padding: 1rem;

src/App.jsx

@@ -243,6 +243,81 @@ function App() {
     }
   }
 
+  const exportModel = async () => {
+    try {
+      const modelStats = localClassifierRef.current?.getModelStats()
+      const feedbackData = await feedbackStoreRef.current.getAudioFeedback()
+      const customTagsData = await feedbackStoreRef.current.getCustomTags()
+      
+      const exportData = {
+        modelStats,
+        feedbackData: feedbackData.slice(0, 50), // Limit for size
+        customTags: customTagsData,
+        exportDate: new Date().toISOString(),
+        version: '1.0'
+      }
+
+      const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+        type: 'application/json'
+      })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `clip-tagger-model-${Date.now()}.json`
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+    } catch (error) {
+      console.error('Error exporting model:', error)
+      setError('Failed to export model')
+    }
+  }
+
+  const exportTags = () => {
+    if (tags.length === 0) return
+
+    const tagData = {
+      audioFile: audioFile?.name || 'recorded-audio',
+      audioHash,
+      timestamp: new Date().toISOString(),
+      tags: tags.map(tag => ({
+        label: tag.label,
+        confidence: tag.confidence,
+        source: tag.source || 'clap',
+        userFeedback: tag.userFeedback
+      }))
+    }
+
+    const blob = new Blob([JSON.stringify(tagData, null, 2)], {
+      type: 'application/json'
+    })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `tags-${audioFile?.name || 'audio'}-${Date.now()}.json`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  const clearAllData = async () => {
+    if (confirm('Are you sure you want to clear all training data? This cannot be undone.')) {
+      try {
+        await feedbackStoreRef.current.clearAllData()
+        localClassifierRef.current?.clearModel()
+        setCustomTags([])
+        setTags([])
+        setAudioFile(null)
+        setError(null)
+      } catch (error) {
+        console.error('Error clearing data:', error)
+        setError('Failed to clear data')
+      }
+    }
+  }
+
   return (
     <div className="app">
       <header>
@@ -366,7 +441,43 @@ function App() {
             )}
           </div>
         )}
+
+        {(tags.length > 0 || customTags.length > 0) && (
+          <div className="export-section">
+            <h3>Export & Management</h3>
+            <div className="export-controls">
+              {tags.length > 0 && (
+                <button onClick={exportTags} className="export-btn">
+                  📁 Export Current Tags
+                </button>
+              )}
+              {localClassifierRef.current?.getModelStats().trainedTags > 0 && (
+                <button onClick={exportModel} className="export-btn">
+                  🧠 Export Trained Model
+                </button>
+              )}
+              <button onClick={clearAllData} className="clear-btn">
+                🗑️ Clear All Data
+              </button>
+            </div>
+            
+            {localClassifierRef.current && (
+              <div className="model-stats">
+                <p>Trained tags: {localClassifierRef.current.getModelStats().trainedTags}</p>
+                <p>Custom tags: {customTags.length}</p>
+              </div>
+            )}
+          </div>
+        )}
       </main>
+      
+      <footer>
+        <p>
+          Powered by <a href="https://github.com/xenova/transformers.js" target="_blank" rel="noopener">Transformers.js</a> 
+          {' '} • CLAP model: <a href="https://huggingface.co/Xenova/clap-htsat-unfused" target="_blank" rel="noopener">Xenova/clap-htsat-unfused</a>
+          {' '} • Everything runs locally in your browser
+        </p>
+      </footer>
     </div>
   )
 }