Initial commit of Hearbit AI App
This commit is contained in:
michael.borak
427
src/components/Recorder.tsx
Normal file
427
src/components/Recorder.tsx
Normal file
@@ -0,0 +1,427 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Mic, Square, Settings as SettingsIcon, FileText, Sparkles, Copy, Check } from 'lucide-react';
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import logo from '../assets/logo.png'; // Import logo
|
||||
import ReactMarkdown from 'react-markdown'; // Import Markdown renderer
|
||||
|
||||
interface PromptTemplate {
|
||||
id: string;
|
||||
name: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
interface HistoryItem {
|
||||
id: string;
|
||||
date: string;
|
||||
transcription: string;
|
||||
summary: string;
|
||||
}
|
||||
|
||||
interface RecorderProps {
|
||||
apiKey: string;
|
||||
productId: string;
|
||||
prompts: PromptTemplate[];
|
||||
onOpenSettings: () => void;
|
||||
// Lifted State Props
|
||||
transcription: string;
|
||||
setTranscription: (val: string) => void;
|
||||
summary: string;
|
||||
setSummary: (val: string) => void;
|
||||
// History Props
|
||||
history: HistoryItem[];
|
||||
onSaveToHistory: (t?: string, s?: string) => void;
|
||||
onDeleteHistory: (id: string) => void;
|
||||
onLoadHistory: (item: HistoryItem) => void;
|
||||
}
|
||||
|
||||
interface AudioDevice {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const LLM_MODELS = [
|
||||
{ id: 'mixtral', name: 'Mixtral 8x7B (Best for Logic)' },
|
||||
{ id: 'llama3', name: 'Llama 3 (Balanced)' },
|
||||
{ id: 'llama3-70b', name: 'Llama 3 70B (High Quality)' },
|
||||
{ id: 'granite-code', name: 'Granite Code (Coding)' }
|
||||
];
|
||||
|
||||
const Recorder: React.FC<RecorderProps> = ({
|
||||
apiKey, productId, prompts, onOpenSettings,
|
||||
transcription, setTranscription, summary, setSummary,
|
||||
history, onSaveToHistory, onDeleteHistory, onLoadHistory
|
||||
}) => {
|
||||
const [isRecording, setIsRecording] = useState(false);
|
||||
const [status, setStatus] = useState<string>('Ready to record');
|
||||
const [selectedDevice, setSelectedDevice] = useState<string>('');
|
||||
const [selectedPromptId, setSelectedPromptId] = useState<string>('');
|
||||
const [selectedModel, setSelectedModel] = useState<string>('mixtral');
|
||||
const [devices, setDevices] = useState<AudioDevice[]>([]);
|
||||
const [availableModels, setAvailableModels] = useState<Array<{ id: string, name: string }>>(LLM_MODELS);
|
||||
const [showHistory, setShowHistory] = useState(false); // Toggle history view
|
||||
|
||||
// Local state for copy feedback only
|
||||
const [copiedTrans, setCopiedTrans] = useState(false);
|
||||
const [copiedSum, setCopiedSum] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadDevices();
|
||||
if (apiKey && productId) {
|
||||
loadModels();
|
||||
}
|
||||
}, [apiKey, productId]);
|
||||
|
||||
const loadModels = async () => {
|
||||
try {
|
||||
const models = await invoke<Array<{ id: string, name: string }>>('get_available_models', { apiKey, productId });
|
||||
if (models && models.length > 0) {
|
||||
// Sort models alphabetically
|
||||
models.sort((a, b) => a.name.localeCompare(b.name));
|
||||
setAvailableModels(models);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to load models dynamically, using defaults:", e);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Set default prompt selection
|
||||
useEffect(() => {
|
||||
if (prompts.length > 0 && !selectedPromptId) {
|
||||
setSelectedPromptId(prompts[0].id);
|
||||
} else if (prompts.length > 0 && selectedPromptId) {
|
||||
// Check if selected still exists
|
||||
if (!prompts.find(p => p.id === selectedPromptId)) {
|
||||
setSelectedPromptId(prompts[0].id);
|
||||
}
|
||||
}
|
||||
}, [prompts, selectedPromptId]);
|
||||
|
||||
const loadDevices = async () => {
|
||||
try {
|
||||
const devList = await invoke<AudioDevice[]>('get_input_devices');
|
||||
setDevices(devList);
|
||||
if (devList.length > 0 && !selectedDevice) {
|
||||
setSelectedDevice(devList[0].id);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load devices', e);
|
||||
}
|
||||
};
|
||||
|
||||
const startRecording = async () => {
|
||||
try {
|
||||
setStatus('Starting...');
|
||||
await invoke('start_recording', { deviceId: selectedDevice });
|
||||
setIsRecording(true);
|
||||
setTranscription('');
|
||||
setSummary('');
|
||||
setStatus('Recording...');
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setStatus(`Error: ${e}`);
|
||||
setIsRecording(false);
|
||||
}
|
||||
};
|
||||
|
||||
const stopRecording = async () => {
|
||||
try {
|
||||
setIsRecording(false);
|
||||
setStatus('Processing...');
|
||||
const filePath = await invoke<string>('stop_recording');
|
||||
|
||||
setStatus('Transcribing (Infomaniak Whisper)...');
|
||||
const transText = await invoke<string>('transcribe_audio', {
|
||||
filePath,
|
||||
apiKey,
|
||||
productId
|
||||
});
|
||||
setTranscription(transText);
|
||||
|
||||
setTranscription(transText);
|
||||
|
||||
// Check if transcription is empty or just whitespace
|
||||
if (!transText || transText.trim().length === 0) {
|
||||
setStatus('Done (No speech detected)');
|
||||
// If empty, set a placeholder so the UI shows something, but DON'T summarize
|
||||
setTranscription('(No speech detected. Check your microphone settings.)');
|
||||
setTimeout(() => setStatus('Ready to record'), 3000);
|
||||
return;
|
||||
}
|
||||
|
||||
// Find selected prompt content
|
||||
const activePrompt = prompts.find(p => p.id === selectedPromptId);
|
||||
const promptContent = activePrompt ? activePrompt.content : "Summarize this.";
|
||||
|
||||
setStatus(`Summarizing (${selectedModel})...`);
|
||||
const sumText = await invoke<string>('summarize_text', {
|
||||
text: transText,
|
||||
apiKey,
|
||||
productId,
|
||||
prompt: promptContent,
|
||||
model: selectedModel
|
||||
});
|
||||
setSummary(sumText);
|
||||
|
||||
// Auto-save to history
|
||||
onSaveToHistory(transText, sumText);
|
||||
|
||||
setStatus('Done!');
|
||||
setTimeout(() => setStatus('Ready to record'), 3000);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setStatus(`Error: ${e}`);
|
||||
}
|
||||
};
|
||||
|
||||
const installDriver = async () => {
|
||||
try {
|
||||
setStatus('Installing driver...');
|
||||
const res = await invoke('install_driver');
|
||||
console.log(res);
|
||||
setStatus('Driver installed. Please restart app.');
|
||||
loadDevices();
|
||||
} catch (e) {
|
||||
setStatus(`Install failed: ${e}`);
|
||||
}
|
||||
};
|
||||
|
||||
const copyToClipboard = async (text: string, isSummary: boolean) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
if (isSummary) {
|
||||
setCopiedSum(true);
|
||||
setTimeout(() => setCopiedSum(false), 2000);
|
||||
} else {
|
||||
setCopiedTrans(true);
|
||||
setTimeout(() => setCopiedTrans(false), 2000);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to copy!', err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full h-full bg-background relative">
|
||||
{/* Fixed Header */}
|
||||
<div className="w-full flex justify-between items-center p-6 border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 z-10 sticky top-0 shrink-0">
|
||||
<img src={logo} alt="Logo" className="h-12 object-contain" />
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowHistory(!showHistory)}
|
||||
className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all ${showHistory
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground hover:bg-secondary'
|
||||
}`}
|
||||
>
|
||||
<FileText size={16} />
|
||||
{showHistory ? 'Recorder' : 'Records'}
|
||||
</button>
|
||||
<button
|
||||
onClick={onOpenSettings}
|
||||
className="p-2 text-muted-foreground hover:text-foreground hover:bg-secondary rounded-md transition-colors"
|
||||
>
|
||||
<SettingsIcon size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scrollable Content */}
|
||||
<div className="flex-1 overflow-y-auto p-6 flex flex-col items-center pb-20">
|
||||
|
||||
{showHistory ? (
|
||||
<div className="w-full max-w-md space-y-4">
|
||||
<h2 className="text-xl font-bold mb-4">Saved Recordings</h2>
|
||||
{history.length === 0 && <p className="text-muted-foreground">No saved history.</p>}
|
||||
{history.map(item => (
|
||||
<div key={item.id} className="p-4 rounded-lg bg-card border border-border shadow-sm">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<span className="text-xs text-muted-foreground">{item.date}</span>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => { onLoadHistory(item); setShowHistory(false); }}
|
||||
className="text-xs bg-primary text-primary-foreground px-2 py-1 rounded"
|
||||
>
|
||||
Load
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDeleteHistory(item.id)}
|
||||
className="text-xs bg-destructive text-destructive-foreground px-2 py-1 rounded"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm truncate font-medium">{item.summary ? item.summary.slice(0, 50) + "..." : "No Summary"}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{item.transcription.slice(0, 50)}...</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="mb-6 relative shrink-0">
|
||||
<div className={`w-32 h-32 rounded-full flex items-center justify-center transition-all duration-300 ${isRecording ? 'bg-red-500/10 animate-pulse' : 'bg-secondary'}`}>
|
||||
{isRecording ? (
|
||||
<div className="w-24 h-24 rounded-full bg-red-500 flex items-center justify-center shadow-[0_0_20px_rgba(239,68,68,0.5)]">
|
||||
<Mic size={40} className="text-white animate-bounce" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-24 h-24 rounded-full bg-primary flex items-center justify-center">
|
||||
<Mic size={40} className="text-primary-foreground" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-bold mb-2 text-foreground">
|
||||
{isRecording ? 'Listening...' : 'Ready to Record'}
|
||||
</h1>
|
||||
|
||||
<p className="text-muted-foreground mb-6 text-center text-sm h-6">
|
||||
{status}
|
||||
</p>
|
||||
|
||||
<div className="w-full max-w-sm space-y-4 mb-6 shrink-0">
|
||||
{!isRecording ? (
|
||||
<button
|
||||
onClick={startRecording}
|
||||
disabled={!apiKey || !productId}
|
||||
className="w-full py-4 text-lg font-semibold bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-md hover:shadow-lg"
|
||||
>
|
||||
{!apiKey ? 'Configure API Key First' : 'Start Recording'}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={stopRecording}
|
||||
className="w-full py-4 text-lg font-semibold bg-destructive text-destructive-foreground rounded-lg hover:bg-destructive/90 transition-all shadow-md hover:shadow-lg flex items-center justify-center gap-2"
|
||||
>
|
||||
<Square size={20} fill="currentColor" />
|
||||
Stop Recording
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-2">
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider block mb-1">
|
||||
Input Device
|
||||
</label>
|
||||
<select
|
||||
value={selectedDevice}
|
||||
onChange={(e) => setSelectedDevice(e.target.value)}
|
||||
className="w-full p-2 text-sm bg-secondary rounded border border-border outline-none focus:ring-2 focus:ring-primary"
|
||||
disabled={isRecording}
|
||||
>
|
||||
{devices.map(d => (
|
||||
<option key={d.id} value={d.id}>{d.name}</option>
|
||||
))}
|
||||
{devices.length === 0 && <option value="">Loading devices...</option>}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider block mb-1">
|
||||
LLM Model
|
||||
</label>
|
||||
<select
|
||||
value={selectedModel}
|
||||
onChange={(e) => setSelectedModel(e.target.value)}
|
||||
className="w-full p-2 text-sm bg-secondary rounded border border-border outline-none focus:ring-2 focus:ring-primary"
|
||||
disabled={isRecording}
|
||||
>
|
||||
{availableModels.map(m => (
|
||||
<option key={m.id} value={m.id}>{m.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider block mb-1">
|
||||
AI Template
|
||||
</label>
|
||||
<select
|
||||
value={selectedPromptId}
|
||||
onChange={(e) => setSelectedPromptId(e.target.value)}
|
||||
className="w-full p-2 text-sm bg-secondary rounded border border-border outline-none focus:ring-2 focus:ring-primary"
|
||||
disabled={isRecording || prompts.length === 0}
|
||||
>
|
||||
{prompts.map(p => (
|
||||
<option key={p.id} value={p.id}>{p.name}</option>
|
||||
))}
|
||||
{prompts.length === 0 && <option value="">No templates</option>}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={installDriver}
|
||||
className="text-xs text-primary underline w-full text-center hover:text-primary/80 mt-1 block"
|
||||
>
|
||||
Install BlackHole Driver (for System Audio)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{(transcription || summary) && (
|
||||
<div className="w-full space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500 pb-10">
|
||||
{/* Transcription Block (Source) */}
|
||||
{transcription && (
|
||||
<div className="p-5 bg-card rounded-xl border border-border shadow-sm">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2 text-blue-500 font-semibold">
|
||||
<FileText size={18} />
|
||||
<h3>Original Transcription</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => copyToClipboard(transcription, false)}
|
||||
className="p-1.5 hover:bg-secondary rounded-md transition-colors text-muted-foreground hover:text-foreground"
|
||||
title="Copy Transcription"
|
||||
>
|
||||
{copiedTrans ? <Check size={16} className="text-green-500" /> : <Copy size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm text-foreground/80 whitespace-pre-wrap max-h-[200px] overflow-y-auto pr-2 bg-secondary/30 p-3 rounded-lg border border-border/50 font-medium">
|
||||
{transcription}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Summary Block (Result) */}
|
||||
{summary && (
|
||||
<div className="p-5 bg-card rounded-xl border border-border shadow-sm ring-1 ring-purple-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2 text-purple-500 font-semibold">
|
||||
<Sparkles size={18} />
|
||||
<h3>AI Summary</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => onSaveToHistory()}
|
||||
className="text-xs bg-green-600 text-white px-3 py-1.5 rounded-md hover:bg-green-700 font-medium transition-colors"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => copyToClipboard(summary, true)}
|
||||
className="p-1.5 hover:bg-secondary rounded-md transition-colors text-muted-foreground hover:text-foreground"
|
||||
title="Copy Summary"
|
||||
>
|
||||
{copiedSum ? <Check size={16} className="text-green-500" /> : <Copy size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-foreground/90 leading-relaxed max-h-[400px] overflow-y-auto pr-2 custom-scrollbar prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5">
|
||||
<ReactMarkdown>
|
||||
{summary}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Recorder;
|
||||
Reference in New Issue
Block a user