Phase 12~13 전체 구현: Pro+ 피처 6종 + 음성 대화 + RAG + OS 자동화
Phase 12: - FileTranscriptionService: ffmpeg PCM 변환 + 30초 청크 순차 STT - MeetingSummaryService: 자막 세션 → LLM 자동 요약 + DB summaryText - DictationTemplateService: 필드별 음성 입력 상태 머신 + 프리셋 3개 Phase 13.1: - VoiceConversationService: STT→Ollama /api/chat→TTS 대화 루프 (10턴) - TTSPlaybackService: Windows SAPI 문장 단위 큐 재생 - LocalLLMService.chatStream: Ollama /api/chat 스트리밍 Phase 13.2: - RAGService: Ollama 임베딩 + SQLite 벡터 + 코사인 유사도 검색 - KnowledgeBasePage: 문서 관리 + 질문/답변 UI - PDF 파서: zlib FlateDecode 해제 + BT/ET 텍스트 추출 Phase 13.3: - VoiceActionService: LLM JSON 액션 플랜 생성 + 실행 - 프리셋 6개 (크롬/메모장/탐색기/볼륨), 위험 명령 차단 공통: IPC ~70채널, 에러코드 780-878, i18n 100+키 버그픽스: 라이선스 로컬 키 우선, i18n featureLabel, DOM 중첩
This commit is contained in:
Yun Chan
parent
a31f96bbb8
commit
eb83682269
38 changed files with 5678 additions and 19 deletions
272
src/renderer/components/FileDropZone.tsx
Normal file
272
src/renderer/components/FileDropZone.tsx
Normal file
|
|
@ -0,0 +1,272 @@
|
|||
// src/renderer/components/FileDropZone.tsx
|
||||
// Phase 12.1: 파일 전사 드래그앤드롭 UI
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from 'react'
|
||||
import { Box, LinearProgress, IconButton, Tooltip } from '@mui/material'
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
||||
import CloseIcon from '@mui/icons-material/Close'
|
||||
import UploadFileIcon from '@mui/icons-material/UploadFile'
|
||||
import { MetalCard, PhosphorText, Led } from './ds'
|
||||
import { d3roPalette, d3roTypo } from '../theme'
|
||||
import { useI18n } from '../i18n'
|
||||
import type {
|
||||
FileTranscriptionProgress,
|
||||
FileTranscriptionResult,
|
||||
FileTranscriptionState,
|
||||
} from '@shared/types'
|
||||
|
||||
const SUPPORTED_EXTENSIONS = [
|
||||
'.mp3', '.wav', '.m4a', '.ogg', '.flac', '.wma', '.aac',
|
||||
'.mp4', '.mkv', '.webm', '.avi', '.mov',
|
||||
]
|
||||
|
||||
export function FileDropZone(): React.ReactElement {
|
||||
const { t } = useI18n()
|
||||
const [dragging, setDragging] = useState(false)
|
||||
const [state, setState] = useState<FileTranscriptionState>('idle')
|
||||
const [progress, setProgress] = useState<FileTranscriptionProgress | null>(null)
|
||||
const [result, setResult] = useState<FileTranscriptionResult | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [copied, setCopied] = useState(false)
|
||||
const dropRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const unsubProgress = window.electronAPI.fileTranscription.onProgress((data) => {
|
||||
setProgress(data)
|
||||
setState('transcribing')
|
||||
})
|
||||
const unsubComplete = window.electronAPI.fileTranscription.onComplete((data) => {
|
||||
setResult(data)
|
||||
setState('completed')
|
||||
setProgress(null)
|
||||
})
|
||||
const unsubError = window.electronAPI.fileTranscription.onError((data) => {
|
||||
setError(data.message)
|
||||
setState('error')
|
||||
setProgress(null)
|
||||
})
|
||||
|
||||
return () => {
|
||||
unsubProgress()
|
||||
unsubComplete()
|
||||
unsubError()
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleDrop = useCallback(async (e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
setDragging(false)
|
||||
|
||||
const file = e.dataTransfer.files[0]
|
||||
if (!file) return
|
||||
|
||||
const ext = '.' + file.name.split('.').pop()?.toLowerCase()
|
||||
if (!SUPPORTED_EXTENSIONS.includes(ext)) {
|
||||
setError(t('fileTranscription.error.invalidFormat'))
|
||||
setState('error')
|
||||
return
|
||||
}
|
||||
|
||||
setState('converting')
|
||||
setError(null)
|
||||
setResult(null)
|
||||
|
||||
const filePath = (file as unknown as { path: string }).path
|
||||
const resp = await window.electronAPI.fileTranscription.start({ filePath })
|
||||
if (!resp.success) {
|
||||
setError(resp.error.message)
|
||||
setState('error')
|
||||
}
|
||||
}, [t])
|
||||
|
||||
const handleBrowse = useCallback(async () => {
|
||||
setState('converting')
|
||||
setError(null)
|
||||
setResult(null)
|
||||
|
||||
const resp = await window.electronAPI.fileTranscription.start({ filePath: '' })
|
||||
if (!resp.success) {
|
||||
if (resp.error.message.includes('cancelled')) {
|
||||
setState('idle')
|
||||
} else {
|
||||
setError(resp.error.message)
|
||||
setState('error')
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleCancel = useCallback(async () => {
|
||||
await window.electronAPI.fileTranscription.cancel()
|
||||
setState('idle')
|
||||
setProgress(null)
|
||||
}, [])
|
||||
|
||||
const handleCopy = useCallback(() => {
|
||||
if (result?.fullText) {
|
||||
navigator.clipboard.writeText(result.fullText)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
}, [result])
|
||||
|
||||
const handleReset = useCallback(() => {
|
||||
setState('idle')
|
||||
setResult(null)
|
||||
setError(null)
|
||||
setProgress(null)
|
||||
}, [])
|
||||
|
||||
// ── idle: 드래그 존 ──
|
||||
if (state === 'idle') {
|
||||
return (
|
||||
<MetalCard>
|
||||
<Box
|
||||
ref={dropRef}
|
||||
onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
|
||||
onDragLeave={() => setDragging(false)}
|
||||
onDrop={handleDrop}
|
||||
onClick={handleBrowse}
|
||||
sx={{
|
||||
p: 4,
|
||||
textAlign: 'center',
|
||||
border: `2px dashed ${dragging ? d3roPalette.accent.amber : d3roPalette.border.subtle}`,
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
transition: 'border-color 0.2s',
|
||||
'&:hover': { borderColor: d3roPalette.accent.amber },
|
||||
}}
|
||||
>
|
||||
<UploadFileIcon sx={{ fontSize: 40, color: d3roPalette.text.inactive, mb: 1 }} />
|
||||
<PhosphorText variant="body" sx={{ color: d3roPalette.text.secondary }}>
|
||||
{t('fileTranscription.dropZone')}
|
||||
</PhosphorText>
|
||||
<PhosphorText variant="dim" sx={{ mt: 0.5 }}>
|
||||
{t('fileTranscription.dropZoneHint')}
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
</MetalCard>
|
||||
)
|
||||
}
|
||||
|
||||
// ── converting / transcribing: 진행률 ──
|
||||
if (state === 'converting' || state === 'transcribing') {
|
||||
return (
|
||||
<MetalCard>
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Led color="amber" pulse />
|
||||
<PhosphorText variant="body">
|
||||
{state === 'converting'
|
||||
? t('fileTranscription.converting')
|
||||
: t('fileTranscription.processing')}
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
<PhysicalButton size="small" onClick={handleCancel}>
|
||||
{t('fileTranscription.cancel')}
|
||||
</PhysicalButton>
|
||||
</Box>
|
||||
|
||||
{progress && (
|
||||
<>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={progress.percent}
|
||||
sx={{
|
||||
mb: 1,
|
||||
height: 6,
|
||||
borderRadius: 3,
|
||||
bgcolor: d3roPalette.bg.inset,
|
||||
'& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber },
|
||||
}}
|
||||
/>
|
||||
<PhosphorText variant="dim">
|
||||
{t('fileTranscription.progress', {
|
||||
current: String(progress.currentChunk),
|
||||
total: String(progress.totalChunks),
|
||||
})}
|
||||
</PhosphorText>
|
||||
{progress.currentText && (
|
||||
<PhosphorText variant="compact" sx={{ mt: 1, opacity: 0.7, fontStyle: 'italic' }}>
|
||||
{progress.currentText.slice(0, 100)}...
|
||||
</PhosphorText>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</MetalCard>
|
||||
)
|
||||
}
|
||||
|
||||
// ── completed: 결과 ──
|
||||
if (state === 'completed' && result) {
|
||||
return (
|
||||
<MetalCard>
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Led color="green" />
|
||||
<PhosphorText variant="body">
|
||||
{t('fileTranscription.complete')}
|
||||
</PhosphorText>
|
||||
<PhosphorText variant="dim">
|
||||
({result.fileName})
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
<Tooltip title={copied ? 'Copied!' : t('fileTranscription.copyAll')}>
|
||||
<IconButton size="small" onClick={handleCopy}>
|
||||
<ContentCopyIcon sx={{ fontSize: 16, color: copied ? d3roPalette.accent.amber : d3roPalette.text.inactive }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<IconButton size="small" onClick={handleReset}>
|
||||
<CloseIcon sx={{ fontSize: 16, color: d3roPalette.text.inactive }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
maxHeight: 200,
|
||||
overflow: 'auto',
|
||||
p: 2,
|
||||
bgcolor: d3roPalette.bg.inset,
|
||||
borderRadius: '6px',
|
||||
fontSize: d3roTypo.compact.size,
|
||||
lineHeight: d3roTypo.compact.line,
|
||||
color: d3roPalette.text.primary,
|
||||
whiteSpace: 'pre-wrap',
|
||||
}}
|
||||
>
|
||||
{result.fullText}
|
||||
</Box>
|
||||
|
||||
<PhosphorText variant="dim" sx={{ mt: 1 }}>
|
||||
{Math.round(result.totalDurationSec)}s audio / {Math.round(result.processingTimeMs / 1000)}s processing
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
</MetalCard>
|
||||
)
|
||||
}
|
||||
|
||||
// ── error ──
|
||||
if (state === 'error') {
|
||||
return (
|
||||
<MetalCard>
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
|
||||
<Led color="red" />
|
||||
<PhosphorText variant="body" sx={{ color: d3roPalette.tag.red }}>
|
||||
{error ?? t('fileTranscription.error.unknown')}
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
<PhysicalButton size="small" onClick={handleReset}>
|
||||
{t('fileTranscription.retry')}
|
||||
</PhysicalButton>
|
||||
</Box>
|
||||
</MetalCard>
|
||||
)
|
||||
}
|
||||
|
||||
return <></>
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue