Merge pull request #1547 from ace-step/feat/issue-1096-voice-verification

feat: add Voice Identity Verification for voice cloning consent (#1096)

Author: ChuxiJ

src/components/layout/EditorShell.tsx

@@ -57,6 +57,7 @@ const AudioAnalysisPanel = lazy(() => import('../generation/AudioAnalysisPanel')
 const StemSeparationModal = lazy(() => import('../generation/StemSeparationModal').then(m => ({ default: m.StemSeparationModal })));
 const AudioToMidiModal = lazy(() => import('../generation/AudioToMidiModal').then(m => ({ default: m.AudioToMidiModal })));
 const HumToSongModal = lazy(() => import('../generation/HumToSongModal').then(m => ({ default: m.HumToSongModal })));
+const VoiceVerificationModal = lazy(() => import('../voice/VoiceVerificationModal').then(m => ({ default: m.VoiceVerificationModal })));
 const VocalReplacementModal = lazy(() => import('../generation/VocalReplacementModal').then(m => ({ default: m.VocalReplacementModal })));
 
 // Lazy-loaded heavy panels (code-split, loaded on first use)
@@ -229,6 +230,7 @@ export function EditorShell() {
         <StemSeparationModal />
         <AudioToMidiModal />
         <HumToSongModal />
+        <VoiceVerificationModal />
         <VocalReplacementModal />
         <ShareDialog />
         <VideoExportDialog />

src/components/voice/VoiceCard.tsx

@@ -130,6 +130,16 @@ export function VoiceCard({
             <span className={`text-[8px] px-1 py-px rounded ${SKILL_COLORS[voice.skillLevel] ?? 'bg-zinc-700 text-zinc-400'}`}>
               {voice.skillLevel}
             </span>
+            <span
+              className={`text-[8px] px-1 py-px rounded ${
+                voice.verificationStatus === 'verified'
+                  ? 'bg-emerald-900/50 text-emerald-300'
+                  : 'bg-zinc-800 text-zinc-500'
+              }`}
+              title={voice.verificationStatus === 'verified' ? 'Voice identity verified' : 'Voice identity unverified'}
+            >
+              {voice.verificationStatus === 'verified' ? 'verified' : 'unverified'}
+            </span>
           </div>
         </div>
 

src/components/voice/VoiceLibraryPanel.tsx

@@ -1,6 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { ChangeEvent } from 'react';
+import type { AddVoiceInput } from '../../store/voiceStore';
 import { useVoiceStore } from '../../store/voiceStore';
+import { useVoiceVerificationStore } from '../../store/voiceVerificationStore';
+import { useUIStore } from '../../store/uiStore';
 import { VoiceCard } from './VoiceCard';
 import { VoiceEditDialog } from './VoiceEditDialog';
 import { Button } from '../ui/Button';
@@ -10,7 +13,7 @@ import {
   processVoiceAudioFile,
   isVoiceUploadError,
 } from '../../services/voiceUploadService';
-import { toastError, toastSuccess } from '../../hooks/useToast';
+import { toastError, toastInfo, toastSuccess } from '../../hooks/useToast';
 
 export function VoiceLibraryPanel() {
   const voices = useVoiceStore((s) => s.voices);
@@ -21,11 +24,12 @@ export function VoiceLibraryPanel() {
   const selectedVoiceId = useVoiceStore((s) => s.selectedVoiceId);
   const selectVoice = useVoiceStore((s) => s.selectVoice);
   const deselectVoice = useVoiceStore((s) => s.deselectVoice);
-  const addVoice = useVoiceStore((s) => s.addVoice);
   const deleteVoice = useVoiceStore((s) => s.deleteVoice);
   const getFilteredVoices = useVoiceStore((s) => s.getFilteredVoices);
   const getAllTags = useVoiceStore((s) => s.getAllTags);
   const loadAudioBlob = useVoiceStore((s) => s.loadAudioBlob);
+  const beginVerification = useVoiceVerificationStore((s) => s.beginVerification);
+  const setShowVoiceVerificationModal = useUIStore((s) => s.setShowVoiceVerificationModal);
 
   const [editingVoiceId, setEditingVoiceId] = useState<string | null>(null);
   const [playingVoiceId, setPlayingVoiceId] = useState<string | null>(null);
@@ -57,6 +61,15 @@ export function VoiceLibraryPanel() {
     fileInputRef.current?.click();
   }, []);
 
+  const beginVoiceCreationVerification = useCallback(
+    (input: AddVoiceInput, audioBlob: Blob) => {
+      beginVerification(input, audioBlob);
+      setShowVoiceVerificationModal(true);
+      toastInfo('Verify voice identity to add this voice to the library');
+    },
+    [beginVerification, setShowVoiceVerificationModal],
+  );
+
   const handleFileSelect = useCallback(
     async (e: ChangeEvent<HTMLInputElement>) => {
       const file = e.target.files?.[0];
@@ -73,7 +86,7 @@ export function VoiceLibraryPanel() {
           return;
         }
 
-        addVoice(
+        beginVoiceCreationVerification(
           {
             name: result.name,
             durationSeconds: result.durationSeconds,
@@ -84,7 +97,6 @@ export function VoiceLibraryPanel() {
           },
           result.blob,
         );
-        toastSuccess(`Voice "${result.name}" added to library`);
       } catch {
         toastError('Failed to process voice file');
       } finally {
@@ -94,7 +106,7 @@ export function VoiceLibraryPanel() {
         if (fileInputRef.current) fileInputRef.current.value = '';
       }
     },
-    [addVoice],
+    [beginVoiceCreationVerification],
   );
 
   // ─── Preview playback ────────────────────────────────────
@@ -212,7 +224,7 @@ export function VoiceLibraryPanel() {
           Voice Library
         </span>
         <span className="text-[9px] text-zinc-600 mr-2">{voices.length}</span>
-        <VoiceRecordButton />
+        <VoiceRecordButton onCapturedVoice={beginVoiceCreationVerification} />
         <Button
           variant="ghost"
           size="sm"

src/components/voice/VoiceRecordButton.tsx

@@ -1,14 +1,19 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { recordingEngine } from '../../engine/RecordingEngine';
 import { audioBufferToWavBlob } from '../../utils/wav';
+import type { AddVoiceInput } from '../../store/voiceStore';
 import { useVoiceStore } from '../../store/voiceStore';
 import { computeSimplePeaks } from '../../services/voiceUploadService';
 import { toastError, toastSuccess, toastInfo } from '../../hooks/useToast';
 import { VOICE_MIN_DURATION_SECONDS } from '../../services/voiceUploadService';
 
 const VOICE_RECORD_TRACK_ID = '__voice-recording__';
 
-export function VoiceRecordButton() {
+interface VoiceRecordButtonProps {
+  onCapturedVoice?: (input: AddVoiceInput, audioBlob: Blob) => void;
+}
+
+export function VoiceRecordButton({ onCapturedVoice }: VoiceRecordButtonProps) {
   const addVoice = useVoiceStore((s) => s.addVoice);
   const [isRecording, setIsRecording] = useState(false);
   const [isStopping, setIsStopping] = useState(false);
@@ -71,20 +76,21 @@ export function VoiceRecordButton() {
       const blob = audioBufferToWavBlob(result.audioBuffer);
       const peaks = computeSimplePeaks(result.audioBuffer, 64);
       const name = `Recording ${new Date().toLocaleTimeString()}`;
+      const input: AddVoiceInput = {
+        name,
+        durationSeconds: result.duration,
+        skillLevel: 'intermediate',
+        source: 'recording',
+        tags: [],
+        waveformPeaks: peaks,
+      };
 
-      addVoice(
-        {
-          name,
-          durationSeconds: result.duration,
-          skillLevel: 'intermediate',
-          source: 'recording',
-          tags: [],
-          waveformPeaks: peaks,
-        },
-        blob,
-      );
-
-      toastSuccess(`Voice recording "${name}" added (${Math.round(result.duration)}s)`);
+      if (onCapturedVoice) {
+        onCapturedVoice(input, blob);
+      } else {
+        addVoice(input, blob);
+        toastSuccess(`Voice recording "${name}" added (${Math.round(result.duration)}s)`);
+      }
       setRecordingDuration(0);
     } catch {
       clearRecordingTimer();
@@ -94,7 +100,7 @@ export function VoiceRecordButton() {
     } finally {
       setIsStopping(false);
     }
-  }, [addVoice, clearRecordingTimer]);
+  }, [addVoice, clearRecordingTimer, onCapturedVoice]);
 
   return (
     <button