Add user feedback system with tag correction and custom tags

src/App.css

@@ -110,10 +110,24 @@ header p {
 
 .tags {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   gap: 0.5rem;
 }
 
+.tag-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem;
+  border-radius: 8px;
+  background: rgba(100, 108, 255, 0.05);
+  transition: all 0.3s ease;
+}
+
+.tag-item.has-feedback {
+  background: rgba(100, 108, 255, 0.1);
+}
+
 .tag {
   background: linear-gradient(45deg, #646cff, #61dafb);
   color: white;
@@ -121,6 +135,117 @@ header p {
   border-radius: 20px;
   font-size: 0.9rem;
   font-weight: 500;
+  margin-right: 1rem;
+}
+
+.tag.custom {
+  background: linear-gradient(45deg, #27ae60, #2ecc71);
+}
+
+.tag.negative {
+  background: linear-gradient(45deg, #e74c3c, #c0392b);
+  opacity: 0.6;
+}
+
+.tag-controls {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.feedback-btn {
+  background: transparent;
+  border: 2px solid #ddd;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 0.9rem;
+}
+
+.feedback-btn:hover {
+  transform: scale(1.1);
+}
+
+.feedback-btn.active {
+  border-color: #646cff;
+  background: #646cff;
+  color: white;
+}
+
+.add-tag {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid #eee;
+}
+
+.tag-input {
+  flex: 1;
+  padding: 0.75rem;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  font-size: 1rem;
+  transition: border-color 0.3s ease;
+}
+
+.tag-input:focus {
+  outline: none;
+  border-color: #646cff;
+}
+
+.add-tag-btn {
+  background: #27ae60;
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background 0.3s ease;
+}
+
+.add-tag-btn:hover {
+  background: #219a52;
+}
+
+.frequent-tags {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid #eee;
+}
+
+.frequent-tags h4 {
+  margin-bottom: 0.5rem;
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.frequent-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.frequent-tag {
+  background: #f8f9fa;
+  border: 1px solid #ddd;
+  color: #666;
+  padding: 0.25rem 0.5rem;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.frequent-tag:hover {
+  background: #646cff;
+  color: white;
+  border-color: #646cff;
 }
 
 @media (max-width: 768px) {

src/App.jsx

@@ -1,5 +1,6 @@
-import { useState, useRef } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import CLAPProcessor from './clapProcessor'
+import UserFeedbackStore from './userFeedbackStore'
 import './App.css'
 
 function App() {
@@ -8,10 +9,33 @@ function App() {
   const [isLoading, setIsLoading] = useState(false)
   const [tags, setTags] = useState([])
   const [error, setError] = useState(null)
+  const [customTags, setCustomTags] = useState([])
+  const [newTag, setNewTag] = useState('')
+  const [audioHash, setAudioHash] = useState(null)
+  const [audioFeatures, setAudioFeatures] = useState(null)
   const fileInputRef = useRef(null)
   const mediaRecorderRef = useRef(null)
   const chunksRef = useRef([])
   const clapProcessorRef = useRef(null)
+  const feedbackStoreRef = useRef(null)
+
+  useEffect(() => {
+    const initializeStore = async () => {
+      feedbackStoreRef.current = new UserFeedbackStore()
+      await feedbackStoreRef.current.initialize()
+      loadCustomTags()
+    }
+    initializeStore()
+  }, [])
+
+  const loadCustomTags = async () => {
+    try {
+      const stored = await feedbackStoreRef.current.getCustomTags()
+      setCustomTags(stored.map(item => item.tag))
+    } catch (error) {
+      console.error('Error loading custom tags:', error)
+    }
+  }
 
   const handleFileUpload = (event) => {
     const file = event.target.files[0]
@@ -76,24 +100,79 @@ function App() {
         clapProcessorRef.current = new CLAPProcessor()
       }
       
+      const hash = await feedbackStoreRef.current.hashAudioFile(file)
+      setAudioHash(hash)
+      
       const audioBuffer = await clapProcessorRef.current.fileToAudioBuffer(file)
       const generatedTags = await clapProcessorRef.current.processAudio(audioBuffer)
       
-      setTags(generatedTags)
+      // Store basic audio info for later use
+      setAudioFeatures({
+        sampleRate: audioBuffer.sampleRate,
+        duration: audioBuffer.duration,
+        numberOfChannels: audioBuffer.numberOfChannels
+      })
+      
+      setTags(generatedTags.map(tag => ({ ...tag, userFeedback: null })))
     } catch (err) {
       console.error('Error processing audio:', err)
       setError('Failed to process audio. Using fallback tags.')
       // Fallback tags
       setTags([
-        { label: 'audio', confidence: 0.9 },
-        { label: 'sound', confidence: 0.8 },
-        { label: 'recording', confidence: 0.7 }
+        { label: 'audio', confidence: 0.9, userFeedback: null },
+        { label: 'sound', confidence: 0.8, userFeedback: null },
+        { label: 'recording', confidence: 0.7, userFeedback: null }
       ])
     } finally {
       setIsLoading(false)
     }
   }
 
+  const handleTagFeedback = async (tagIndex, feedback) => {
+    const updatedTags = [...tags]
+    updatedTags[tagIndex].userFeedback = feedback
+    setTags(updatedTags)
+
+    try {
+      await feedbackStoreRef.current.saveTagFeedback(
+        updatedTags[tagIndex].label,
+        feedback,
+        audioHash
+      )
+    } catch (error) {
+      console.error('Error saving tag feedback:', error)
+    }
+  }
+
+  const handleAddCustomTag = async () => {
+    if (!newTag.trim()) return
+
+    const customTag = { 
+      label: newTag.trim(), 
+      confidence: 1.0, 
+      userFeedback: 'custom',
+      isCustom: true 
+    }
+
+    setTags(prev => [...prev, customTag])
+    
+    try {
+      await feedbackStoreRef.current.saveCustomTag(newTag.trim())
+      await feedbackStoreRef.current.saveTagFeedback(newTag.trim(), 'custom', audioHash)
+      loadCustomTags()
+    } catch (error) {
+      console.error('Error saving custom tag:', error)
+    }
+
+    setNewTag('')
+  }
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      handleAddCustomTag()
+    }
+  }
+
   return (
     <div className="app">
       <header>
@@ -156,11 +235,62 @@ function App() {
             <h3>Generated Tags</h3>
             <div className="tags">
               {tags.map((tag, index) => (
-                <span key={index} className="tag">
-                  {tag.label} ({Math.round(tag.confidence * 100)}%)
-                </span>
+                <div key={index} className={`tag-item ${tag.userFeedback ? 'has-feedback' : ''}`}>
+                  <span className={`tag ${tag.isCustom ? 'custom' : ''} ${tag.userFeedback === 'negative' ? 'negative' : ''}`}>
+                    {tag.label} ({Math.round(tag.confidence * 100)}%)
+                  </span>
+                  {!tag.isCustom && (
+                    <div className="tag-controls">
+                      <button 
+                        onClick={() => handleTagFeedback(index, 'positive')}
+                        className={`feedback-btn ${tag.userFeedback === 'positive' ? 'active' : ''}`}
+                        title="Good tag"
+                      >
+                        ✓
+                      </button>
+                      <button 
+                        onClick={() => handleTagFeedback(index, 'negative')}
+                        className={`feedback-btn ${tag.userFeedback === 'negative' ? 'active' : ''}`}
+                        title="Bad tag"
+                      >
+                        ✗
+                      </button>
+                    </div>
+                  )}
+                </div>
               ))}
             </div>
+            
+            <div className="add-tag">
+              <input
+                type="text"
+                value={newTag}
+                onChange={(e) => setNewTag(e.target.value)}
+                onKeyPress={handleKeyPress}
+                placeholder="Add custom tag..."
+                className="tag-input"
+              />
+              <button onClick={handleAddCustomTag} className="add-tag-btn">
+                Add Tag
+              </button>
+            </div>
+
+            {customTags.length > 0 && (
+              <div className="frequent-tags">
+                <h4>Frequent Tags:</h4>
+                <div className="frequent-tag-list">
+                  {customTags.slice(0, 10).map((tag, index) => (
+                    <button
+                      key={index}
+                      onClick={() => setNewTag(tag)}
+                      className="frequent-tag"
+                    >
+                      {tag}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
           </div>
         )}
       </main>

src/userFeedbackStore.js

@@ -0,0 +1,213 @@
+class UserFeedbackStore {
+  constructor() {
+    this.dbName = 'ClipTaggerDB';
+    this.version = 1;
+    this.db = null;
+  }
+
+  async initialize() {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.dbName, this.version);
+
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve();
+      };
+
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+
+        // Create object stores
+        if (!db.objectStoreNames.contains('audioFeedback')) {
+          const audioStore = db.createObjectStore('audioFeedback', { 
+            keyPath: 'id', 
+            autoIncrement: true 
+          });
+          audioStore.createIndex('timestamp', 'timestamp', { unique: false });
+        }
+
+        if (!db.objectStoreNames.contains('tagFeedback')) {
+          const tagStore = db.createObjectStore('tagFeedback', { 
+            keyPath: 'id', 
+            autoIncrement: true 
+          });
+          tagStore.createIndex('tag', 'tag', { unique: false });
+          tagStore.createIndex('timestamp', 'timestamp', { unique: false });
+        }
+
+        if (!db.objectStoreNames.contains('customTags')) {
+          const customTagStore = db.createObjectStore('customTags', { 
+            keyPath: 'tag' 
+          });
+          customTagStore.createIndex('usage', 'usage', { unique: false });
+        }
+      };
+    });
+  }
+
+  async saveAudioFeedback(audioHash, originalTags, correctedTags, audioFeatures) {
+    if (!this.db) await this.initialize();
+
+    const transaction = this.db.transaction(['audioFeedback'], 'readwrite');
+    const store = transaction.objectStore('audioFeedback');
+
+    const feedback = {
+      audioHash,
+      originalTags,
+      correctedTags,
+      audioFeatures,
+      timestamp: Date.now()
+    };
+
+    return new Promise((resolve, reject) => {
+      const request = store.add(feedback);
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async saveTagFeedback(tag, feedback, audioHash) {
+    if (!this.db) await this.initialize();
+
+    const transaction = this.db.transaction(['tagFeedback'], 'readwrite');
+    const store = transaction.objectStore('tagFeedback');
+
+    const tagFeedback = {
+      tag,
+      feedback, // 'positive', 'negative', or 'custom'
+      audioHash,
+      timestamp: Date.now()
+    };
+
+    return new Promise((resolve, reject) => {
+      const request = store.add(tagFeedback);
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async saveCustomTag(tag) {
+    if (!this.db) await this.initialize();
+
+    const transaction = this.db.transaction(['customTags'], 'readwrite');
+    const store = transaction.objectStore('customTags');
+
+    return new Promise((resolve, reject) => {
+      const getRequest = store.get(tag);
+      getRequest.onsuccess = () => {
+        const existing = getRequest.result;
+        const tagData = existing ? 
+          { ...existing, usage: existing.usage + 1 } :
+          { tag, usage: 1, timestamp: Date.now() };
+
+        const putRequest = store.put(tagData);
+        putRequest.onsuccess = () => resolve(putRequest.result);
+        putRequest.onerror = () => reject(putRequest.error);
+      };
+      getRequest.onerror = () => reject(getRequest.error);
+    });
+  }
+
+  async getCustomTags(limit = 20) {
+    if (!this.db) await this.initialize();
+
+    const transaction = this.db.transaction(['customTags'], 'readonly');
+    const store = transaction.objectStore('customTags');
+    const index = store.index('usage');
+
+    return new Promise((resolve, reject) => {
+      const request = index.openCursor(null, 'prev'); // Descending order
+      const results = [];
+      
+      request.onsuccess = (event) => {
+        const cursor = event.target.result;
+        if (cursor && results.length < limit) {
+          results.push(cursor.value);
+          cursor.continue();
+        } else {
+          resolve(results);
+        }
+      };
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async getTagFeedback(tag = null) {
+    if (!this.db) await this.initialize();
+
+    const transaction = this.db.transaction(['tagFeedback'], 'readonly');
+    const store = transaction.objectStore('tagFeedback');
+
+    return new Promise((resolve, reject) => {
+      let request;
+      if (tag) {
+        const index = store.index('tag');
+        request = index.getAll(tag);
+      } else {
+        request = store.getAll();
+      }
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async getAudioFeedback(limit = 100) {
+    if (!this.db) await this.initialize();
+
+    const transaction = this.db.transaction(['audioFeedback'], 'readonly');
+    const store = transaction.objectStore('audioFeedback');
+    const index = store.index('timestamp');
+
+    return new Promise((resolve, reject) => {
+      const request = index.openCursor(null, 'prev'); // Most recent first
+      const results = [];
+      
+      request.onsuccess = (event) => {
+        const cursor = event.target.result;
+        if (cursor && results.length < limit) {
+          results.push(cursor.value);
+          cursor.continue();
+        } else {
+          resolve(results);
+        }
+      };
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Generate a simple hash for audio content
+  async hashAudioFile(file) {
+    const arrayBuffer = await file.arrayBuffer();
+    const hashBuffer = await crypto.subtle.digest('SHA-256', arrayBuffer);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    return hashArray.map(b => b.toString(16).padStart(2, '0')).join('').substring(0, 16);
+  }
+
+  async clearAllData() {
+    if (!this.db) await this.initialize();
+
+    const transaction = this.db.transaction(['audioFeedback', 'tagFeedback', 'customTags'], 'readwrite');
+    
+    await Promise.all([
+      new Promise((resolve, reject) => {
+        const request = transaction.objectStore('audioFeedback').clear();
+        request.onsuccess = () => resolve();
+        request.onerror = () => reject(request.error);
+      }),
+      new Promise((resolve, reject) => {
+        const request = transaction.objectStore('tagFeedback').clear();
+        request.onsuccess = () => resolve();
+        request.onerror = () => reject(request.error);
+      }),
+      new Promise((resolve, reject) => {
+        const request = transaction.objectStore('customTags').clear();
+        request.onsuccess = () => resolve();
+        request.onerror = () => reject(request.error);
+      })
+    ]);
+  }
+}
+
+export default UserFeedbackStore;