feat(transcription): v0.5.0 with global speaker management and trimming
- Backend: Added global speaker rename endpoint - Backend: Hardened JSON parsing and timestamp offsets - Frontend: Integrated Speaker Management Bar - Frontend: Added Trim Start/End (Scissors) and Single Line Delete - Frontend: Fixed various TypeScript and Syntax issues - Docs: Full documentation of v0.5.0 features
This commit is contained in:
@@ -97,6 +97,41 @@ async def upload_audio(
|
||||
|
||||
return meeting
|
||||
|
||||
from pydantic import BaseModel
|
||||
|
||||
class RenameRequest(BaseModel):
|
||||
old_name: str
|
||||
new_name: str
|
||||
|
||||
@app.post("/api/meetings/{meeting_id}/rename_speaker")
|
||||
def rename_speaker_globally(meeting_id: int, payload: RenameRequest, db: Session = Depends(get_db)):
|
||||
meeting = db.query(Meeting).filter(Meeting.id == meeting_id).first()
|
||||
if not meeting:
|
||||
raise HTTPException(404, detail="Meeting not found")
|
||||
|
||||
count = 0
|
||||
# Iterate over all chunks directly from DB relation
|
||||
for chunk in meeting.chunks:
|
||||
if not chunk.json_content:
|
||||
continue
|
||||
|
||||
modified = False
|
||||
new_content = []
|
||||
for msg in chunk.json_content:
|
||||
if msg.get("speaker") == payload.old_name:
|
||||
msg["speaker"] = payload.new_name
|
||||
modified = True
|
||||
count += 1
|
||||
new_content.append(msg)
|
||||
|
||||
if modified:
|
||||
# Force update of the JSON field
|
||||
chunk.json_content = list(new_content)
|
||||
db.add(chunk)
|
||||
|
||||
db.commit()
|
||||
return {"status": "updated", "rows_affected": count}
|
||||
|
||||
@app.delete("/api/meetings/{meeting_id}")
|
||||
def delete_meeting(meeting_id: int, db: Session = Depends(get_db)):
|
||||
meeting = db.query(Meeting).filter(Meeting.id == meeting_id).first()
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
import { Upload, FileText, Clock, CheckCircle2, Loader2, AlertCircle, Trash2, ArrowLeft, Copy, User, X } from 'lucide-react'
|
||||
import { Upload, FileText, Clock, CheckCircle2, Loader2, AlertCircle, Trash2, ArrowLeft, Copy, Edit3, X, Scissors, Users } from 'lucide-react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
const API_BASE = '/tr/api'
|
||||
@@ -11,6 +11,8 @@ interface TranscriptMessage {
|
||||
absolute_seconds: number
|
||||
speaker: string
|
||||
text: string
|
||||
_chunkId?: number // Virtual field for frontend mapping
|
||||
_idx?: number // Virtual field
|
||||
}
|
||||
|
||||
interface Chunk {
|
||||
@@ -44,6 +46,7 @@ export default function App() {
|
||||
// Editing State
|
||||
const [editingRow, setEditingRow] = useState<{chunkId: number, idx: number, field: 'speaker' | 'text'} | null>(null)
|
||||
const [editValue, setEditValue] = useState("")
|
||||
const [isProcessing, setIsProcessing] = useState(false)
|
||||
|
||||
const fetchMeetings = async () => {
|
||||
try {
|
||||
@@ -99,7 +102,36 @@ export default function App() {
|
||||
} catch (e) { alert("Delete failed") }
|
||||
}
|
||||
|
||||
// --- EDITING LOGIC ---
|
||||
// --- GLOBAL SPEAKER MANAGEMENT ---
|
||||
|
||||
const getUniqueSpeakers = () => {
|
||||
if (!detailMeeting?.chunks) return []
|
||||
const speakers = new Set<string>()
|
||||
detailMeeting.chunks.forEach(c => {
|
||||
c.json_content?.forEach(m => speakers.add(m.speaker))
|
||||
})
|
||||
return Array.from(speakers).sort()
|
||||
}
|
||||
|
||||
const handleGlobalRename = async (oldName: string) => {
|
||||
const newName = prompt(`Rename speaker '${oldName}' globally to:`, oldName)
|
||||
if (!newName || newName === oldName || !detailMeeting) return
|
||||
|
||||
setIsProcessing(true)
|
||||
try {
|
||||
await axios.post(`${API_BASE}/meetings/${detailMeeting.id}/rename_speaker`, {
|
||||
old_name: oldName,
|
||||
new_name: newName
|
||||
})
|
||||
fetchDetail(detailMeeting.id)
|
||||
} catch (e) {
|
||||
alert("Global rename failed")
|
||||
} finally {
|
||||
setIsProcessing(false)
|
||||
}
|
||||
}
|
||||
|
||||
// --- TRIMMING & EDITING ---
|
||||
|
||||
const saveChunkUpdate = async (chunkId: number, newJson: TranscriptMessage[]) => {
|
||||
try {
|
||||
@@ -110,6 +142,66 @@ export default function App() {
|
||||
}
|
||||
}
|
||||
|
||||
// Trim Logic: Cut everything BEFORE or AFTER the target message
|
||||
const handleTrim = async (targetMsg: TranscriptMessage, mode: 'start' | 'end') => {
|
||||
if (!detailMeeting || !detailMeeting.chunks) return
|
||||
if (!confirm(mode === 'start' ? "Delete EVERYTHING before this line?" : "Delete EVERYTHING after this line?")) return
|
||||
|
||||
setIsProcessing(true)
|
||||
|
||||
// We need to iterate all chunks and decide what to do
|
||||
const updates = []
|
||||
|
||||
for (const chunk of detailMeeting.chunks) {
|
||||
if (!chunk.json_content) continue
|
||||
|
||||
let newContent = [...chunk.json_content]
|
||||
let changed = false
|
||||
|
||||
if (mode === 'start') {
|
||||
// Cut BEFORE
|
||||
if (chunk.chunk_index < (detailMeeting.chunks.find(c => c.id === targetMsg._chunkId)?.chunk_index || 0)) {
|
||||
// This entire chunk is BEFORE the target chunk -> Empty it
|
||||
if (newContent.length > 0) {
|
||||
newContent = []
|
||||
changed = true
|
||||
}
|
||||
} else if (chunk.id === targetMsg._chunkId) {
|
||||
// This is the target chunk -> Slice content
|
||||
const cutIdx = newContent.findIndex(m => m.absolute_seconds === targetMsg.absolute_seconds && m.text === targetMsg.text)
|
||||
if (cutIdx > 0) {
|
||||
newContent = newContent.slice(cutIdx)
|
||||
changed = true
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Cut AFTER
|
||||
if (chunk.chunk_index > (detailMeeting.chunks.find(c => c.id === targetMsg._chunkId)?.chunk_index || 0)) {
|
||||
// This entire chunk is AFTER -> Empty it
|
||||
if (newContent.length > 0) {
|
||||
newContent = []
|
||||
changed = true
|
||||
}
|
||||
} else if (chunk.id === targetMsg._chunkId) {
|
||||
// Target chunk
|
||||
const cutIdx = newContent.findIndex(m => m.absolute_seconds === targetMsg.absolute_seconds && m.text === targetMsg.text)
|
||||
if (cutIdx !== -1 && cutIdx < newContent.length - 1) {
|
||||
newContent = newContent.slice(0, cutIdx + 1)
|
||||
changed = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (changed) {
|
||||
updates.push(saveChunkUpdate(chunk.id, newContent))
|
||||
}
|
||||
}
|
||||
|
||||
await Promise.all(updates)
|
||||
await fetchDetail(detailMeeting.id)
|
||||
setIsProcessing(false)
|
||||
}
|
||||
|
||||
const handleUpdateRow = async (chunkId: number, idx: number, field: 'speaker' | 'text', value: string) => {
|
||||
if (!detailMeeting) return
|
||||
|
||||
@@ -131,33 +223,16 @@ export default function App() {
|
||||
setEditingRow(null)
|
||||
}
|
||||
|
||||
const handleDeleteRow = async (chunkId: number, idx: number) => {
|
||||
if (!confirm("Remove this line?")) return
|
||||
if (!detailMeeting) return
|
||||
|
||||
const newChunks = detailMeeting.chunks!.map(c => {
|
||||
if (c.id === chunkId && c.json_content) {
|
||||
const newContent = c.json_content.filter((_, i) => i !== idx)
|
||||
return { ...c, json_content: newContent }
|
||||
}
|
||||
return c
|
||||
})
|
||||
|
||||
setDetailMeeting({ ...detailMeeting, chunks: newChunks })
|
||||
const updatedChunk = newChunks.find(c => c.id === chunkId)
|
||||
if (updatedChunk?.json_content) {
|
||||
await saveChunkUpdate(chunkId, updatedChunk.json_content)
|
||||
}
|
||||
}
|
||||
|
||||
// --- RENDER ---
|
||||
|
||||
if (view === 'detail') {
|
||||
// Flatten for rendering but keep ref to chunkId
|
||||
// Flatten messages
|
||||
const flatMessages = detailMeeting?.chunks?.flatMap(c =>
|
||||
(c.json_content || []).map((msg, idx) => ({ ...msg, _chunkId: c.id, _idx: idx }))
|
||||
).sort((a,b) => a.absolute_seconds - b.absolute_seconds) || []
|
||||
|
||||
const uniqueSpeakers = getUniqueSpeakers()
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-200 font-sans">
|
||||
<div className="max-w-4xl mx-auto px-4 py-8">
|
||||
@@ -172,7 +247,7 @@ export default function App() {
|
||||
<div className="flex justify-center py-20"><Loader2 className="h-8 w-8 animate-spin text-blue-500" /></div>
|
||||
) : (
|
||||
<>
|
||||
<header className="mb-8 border-b border-slate-200 dark:border-slate-800 pb-6 flex justify-between items-start">
|
||||
<header className="mb-6 border-b border-slate-200 dark:border-slate-800 pb-6 flex justify-between items-start">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-2">{detailMeeting.title}</h1>
|
||||
<div className="flex items-center gap-4 text-sm text-slate-500">
|
||||
@@ -191,6 +266,36 @@ export default function App() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* SPEAKER MANAGER BAR */}
|
||||
{uniqueSpeakers.length > 0 && (
|
||||
<div className="mb-6 bg-blue-50 dark:bg-blue-900/20 p-4 rounded-xl border border-blue-100 dark:border-blue-800 flex items-center gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-2 text-sm font-bold text-blue-700 dark:text-blue-300">
|
||||
<Users className="h-4 w-4" /> Speakers found:
|
||||
</div>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{uniqueSpeakers.map(speaker => (
|
||||
<button
|
||||
key={speaker}
|
||||
onClick={() => handleGlobalRename(speaker)}
|
||||
className="px-3 py-1 bg-white dark:bg-slate-800 border border-blue-200 dark:border-blue-700 rounded-full text-xs font-medium text-slate-700 dark:text-slate-300 hover:border-blue-500 hover:text-blue-500 transition-colors flex items-center gap-1 shadow-sm"
|
||||
title="Click to rename globally"
|
||||
>
|
||||
{speaker} <Edit3 className="h-3 w-3 opacity-50" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isProcessing && (
|
||||
<div className="fixed inset-0 bg-white/50 dark:bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm">
|
||||
<div className="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-2xl flex items-center gap-4">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-blue-500" />
|
||||
<span className="font-medium">Updating transcript...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden">
|
||||
{flatMessages.length > 0 ? (
|
||||
<div className="divide-y divide-slate-100 dark:divide-slate-800">
|
||||
@@ -199,21 +304,14 @@ export default function App() {
|
||||
const isEditingText = editingRow?.chunkId === msg._chunkId && editingRow?.idx === msg._idx && editingRow?.field === 'text';
|
||||
|
||||
return (
|
||||
<div key={uniqueIdx} className="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors flex gap-4 group">
|
||||
{/* Time & Delete */}
|
||||
<div className="w-20 pt-1 flex flex-col items-end gap-1 flex-shrink-0">
|
||||
<div key={uniqueIdx} className="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors flex gap-4 group relative">
|
||||
{/* Time */}
|
||||
<div className="w-16 pt-1 flex flex-col items-end gap-1 flex-shrink-0">
|
||||
<span className="text-xs text-slate-400 font-mono">{msg.display_time || "00:00"}</span>
|
||||
<button
|
||||
onClick={() => handleDeleteRow(msg._chunkId, msg._idx)}
|
||||
className="opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-600 p-1 transition-all"
|
||||
title="Delete Line"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* Speaker */}
|
||||
{/* Speaker */}
|
||||
<div className="mb-1 flex items-center gap-2">
|
||||
{isEditingSpeaker ? (
|
||||
<input
|
||||
@@ -221,22 +319,20 @@ export default function App() {
|
||||
className="text-sm font-bold text-blue-600 dark:text-blue-400 bg-slate-100 dark:bg-slate-800 border rounded px-2 py-0.5 outline-none w-48"
|
||||
value={editValue}
|
||||
onChange={e => setEditValue(e.target.value)}
|
||||
onBlur={() => handleUpdateRow(msg._chunkId, msg._idx, 'speaker', editValue)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleUpdateRow(msg._chunkId, msg._idx, 'speaker', editValue)}
|
||||
onBlur={() => handleUpdateRow(msg._chunkId!, msg._idx!, 'speaker', editValue)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleUpdateRow(msg._chunkId!, msg._idx!, 'speaker', editValue)}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="font-bold text-sm text-blue-600 dark:text-blue-400 cursor-pointer hover:underline flex items-center gap-1 w-fit"
|
||||
onClick={() => { setEditingRow({chunkId: msg._chunkId, idx: msg._idx, field: 'speaker'}); setEditValue(msg.speaker); }}
|
||||
title="Click to rename THIS speaker occurrence"
|
||||
onClick={() => { setEditingRow({chunkId: msg._chunkId!, idx: msg._idx!, field: 'speaker'}); setEditValue(msg.speaker); }}
|
||||
>
|
||||
<User className="h-3 w-3" />
|
||||
{msg.speaker}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Text */}
|
||||
{/* Text */}
|
||||
<div>
|
||||
{isEditingText ? (
|
||||
<textarea
|
||||
@@ -244,21 +340,64 @@ export default function App() {
|
||||
className="w-full text-slate-800 dark:text-slate-200 bg-slate-100 dark:bg-slate-800 border rounded px-2 py-1 outline-none min-h-[60px]"
|
||||
value={editValue}
|
||||
onChange={e => setEditValue(e.target.value)}
|
||||
onBlur={() => handleUpdateRow(msg._chunkId, msg._idx, 'text', editValue)}
|
||||
onBlur={() => handleUpdateRow(msg._chunkId!, msg._idx!, 'text', editValue)}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="text-slate-800 dark:text-slate-200 leading-relaxed whitespace-pre-wrap cursor-text hover:bg-slate-100/50 dark:hover:bg-slate-800/30 rounded p-1 -ml-1 transition-colors"
|
||||
onClick={() => { setEditingRow({chunkId: msg._chunkId, idx: msg._idx, field: 'text'}); setEditValue(msg.text); }}
|
||||
onClick={() => { setEditingRow({chunkId: msg._chunkId!, idx: msg._idx!, field: 'text'}); setEditValue(msg.text); }}
|
||||
>
|
||||
{msg.text}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)})}
|
||||
</div> ) : (
|
||||
</div>
|
||||
|
||||
{/* Hover Actions (Trim / Delete) */}
|
||||
<div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 flex gap-1 bg-white dark:bg-slate-900 border dark:border-slate-700 shadow-sm rounded-lg p-1 transition-all">
|
||||
<button
|
||||
onClick={() => handleTrim(msg, 'start')}
|
||||
className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded"
|
||||
title="Trim Start: Delete everything BEFORE this line"
|
||||
>
|
||||
<Scissors className="h-3.5 w-3.5 rotate-180" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleTrim(msg, 'end')}
|
||||
className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded"
|
||||
title="Trim End: Delete everything AFTER this line"
|
||||
>
|
||||
<Scissors className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<div className="w-px bg-slate-200 dark:bg-slate-700 mx-1"></div>
|
||||
<button
|
||||
onClick={() => {
|
||||
// Single delete logic is redundant if we have trims, but nice to keep
|
||||
// Reuse update logic but filter out index
|
||||
// Simplified: Just use handleTrim but that's overkill
|
||||
// Let's implement quick single delete
|
||||
const cId = msg._chunkId!;
|
||||
const idx = msg._idx!;
|
||||
const newChunks = detailMeeting?.chunks?.map(c => {
|
||||
if (c.id === cId && c.json_content) {
|
||||
return { ...c, json_content: c.json_content.filter((_, i) => i !== idx) }
|
||||
}
|
||||
return c
|
||||
}) || [];
|
||||
setDetailMeeting(prev => prev ? ({ ...prev, chunks: newChunks }) : null);
|
||||
const updatedC = newChunks.find(c => c.id === cId);
|
||||
if(updatedC?.json_content) saveChunkUpdate(cId, updatedC.json_content);
|
||||
}}
|
||||
className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded"
|
||||
title="Delete this line"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
{detailMeeting.chunks && detailMeeting.chunks.length > 0 && detailMeeting.chunks[0].raw_text ? (
|
||||
<div className="p-8">
|
||||
@@ -277,7 +416,7 @@ export default function App() {
|
||||
)
|
||||
}
|
||||
|
||||
// List View
|
||||
// List View remains same
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-200">
|
||||
<div className="max-w-5xl mx-auto px-4 py-12">
|
||||
@@ -304,4 +443,4 @@ export default function App() {
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user