feat: working frontend AI transcribe
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
* Handles all communication with Flask API
|
||||
*/
|
||||
|
||||
const API_BASE_URL = 'http://127.0.0.1:5000/api';
|
||||
const API_BASE_URL = 'http://localhost:5000/api';
|
||||
|
||||
class ApiClient {
|
||||
constructor() {
|
||||
@@ -107,7 +107,8 @@ class ApiClient {
|
||||
if (params.page) queryParams.append('page', params.page);
|
||||
if (params.limit) queryParams.append('limit', params.limit);
|
||||
if (params.visibility) queryParams.append('visibility', params.visibility);
|
||||
if (params.user_id) queryParams.append('user_id', params.user_id);
|
||||
// Pass current_user_id for privacy checks (not filtering by author)
|
||||
if (params.current_user_id) queryParams.append('current_user_id', params.current_user_id);
|
||||
|
||||
return this.request(`/posts?${queryParams.toString()}`);
|
||||
}
|
||||
@@ -132,6 +133,10 @@ class ApiClient {
|
||||
return this.updatePost(postId, { status: 'deleted' });
|
||||
}
|
||||
|
||||
async getPostMetadata(postId) {
|
||||
return this.request(`/posts/${postId}/metadata`);
|
||||
}
|
||||
|
||||
// ==================== Post Files ====================
|
||||
|
||||
async getPostFiles(postId) {
|
||||
|
||||
@@ -1,6 +1,17 @@
|
||||
import { Play, Volume2, MoreVertical, Clock } from 'lucide-react'
|
||||
import { Play, Pause, Volume2, MoreVertical, Clock, ChevronDown, ChevronUp } from 'lucide-react'
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
import { api } from '../api'
|
||||
|
||||
export default function AudioPostCard({ post }) {
|
||||
const [isPlaying, setIsPlaying] = useState(false)
|
||||
const [currentTime, setCurrentTime] = useState(0)
|
||||
const [duration, setDuration] = useState(0)
|
||||
const [volume, setVolume] = useState(1)
|
||||
const [transcript, setTranscript] = useState(null)
|
||||
const [loadingTranscript, setLoadingTranscript] = useState(false)
|
||||
const [transcriptExpanded, setTranscriptExpanded] = useState(false)
|
||||
const audioRef = useRef(null)
|
||||
|
||||
export default function AudioPostCard({ post, onPlay }) {
|
||||
const formatDate = (dateString) => {
|
||||
const date = new Date(dateString)
|
||||
const now = new Date()
|
||||
@@ -12,6 +23,92 @@ export default function AudioPostCard({ post, onPlay }) {
|
||||
return `${Math.floor(diffMins / 1440)}d ago`
|
||||
}
|
||||
|
||||
const formatTime = (seconds) => {
|
||||
if (!seconds || isNaN(seconds)) return '0:00'
|
||||
const mins = Math.floor(seconds / 60)
|
||||
const secs = Math.floor(seconds % 60)
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
// Load transcript on mount if post is ready
|
||||
useEffect(() => {
|
||||
if (post.status === 'ready' && !transcript && !loadingTranscript) {
|
||||
loadTranscript()
|
||||
}
|
||||
}, [post.post_id, post.status])
|
||||
|
||||
const loadTranscript = async () => {
|
||||
setLoadingTranscript(true)
|
||||
try {
|
||||
const metadata = await api.getPostMetadata(post.post_id)
|
||||
if (metadata && metadata.metadata) {
|
||||
const metadataObj = JSON.parse(metadata.metadata)
|
||||
const promptText = metadataObj.prompt || ''
|
||||
const transcriptMatch = promptText.match(/Transcript:\n([\s\S]*?)\n\nAnswer user questions/)
|
||||
if (transcriptMatch) {
|
||||
setTranscript(transcriptMatch[1].trim())
|
||||
} else {
|
||||
setTranscript('Transcript not available')
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load transcript:', err)
|
||||
setTranscript('Failed to load transcript')
|
||||
} finally {
|
||||
setLoadingTranscript(false)
|
||||
}
|
||||
}
|
||||
|
||||
const togglePlay = () => {
|
||||
if (!audioRef.current) return
|
||||
|
||||
if (isPlaying) {
|
||||
audioRef.current.pause()
|
||||
} else {
|
||||
audioRef.current.play()
|
||||
}
|
||||
setIsPlaying(!isPlaying)
|
||||
}
|
||||
|
||||
const handleTimeUpdate = () => {
|
||||
if (audioRef.current) {
|
||||
setCurrentTime(audioRef.current.currentTime)
|
||||
}
|
||||
}
|
||||
|
||||
const handleLoadedMetadata = () => {
|
||||
if (audioRef.current) {
|
||||
setDuration(audioRef.current.duration)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSeek = (e) => {
|
||||
const rect = e.currentTarget.getBoundingClientRect()
|
||||
const x = e.clientX - rect.left
|
||||
const percentage = x / rect.width
|
||||
const newTime = percentage * duration
|
||||
|
||||
if (audioRef.current) {
|
||||
audioRef.current.currentTime = newTime
|
||||
setCurrentTime(newTime)
|
||||
}
|
||||
}
|
||||
|
||||
const handleVolumeChange = (e) => {
|
||||
const newVolume = parseFloat(e.target.value)
|
||||
setVolume(newVolume)
|
||||
if (audioRef.current) {
|
||||
audioRef.current.volume = newVolume
|
||||
}
|
||||
}
|
||||
|
||||
const handleEnded = () => {
|
||||
setIsPlaying(false)
|
||||
setCurrentTime(0)
|
||||
}
|
||||
|
||||
const progress = duration > 0 ? (currentTime / duration) * 100 : 0
|
||||
|
||||
return (
|
||||
<article className="bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
|
||||
{/* Post Header */}
|
||||
@@ -53,28 +150,99 @@ export default function AudioPostCard({ post, onPlay }) {
|
||||
|
||||
{/* Audio Player - Only show if ready */}
|
||||
{post.status === 'ready' && (
|
||||
<div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => onPlay?.(post)}
|
||||
className="w-10 h-10 bg-[#f4b840] hover:bg-[#e5a930] rounded-full flex items-center justify-center text-[#1a1a1a] transition-colors"
|
||||
>
|
||||
<Play size={16} fill="currentColor" />
|
||||
</button>
|
||||
<div className="flex-1">
|
||||
<div className="h-1.5 bg-gray-300 rounded-full overflow-hidden mb-2">
|
||||
<div className="h-full w-0 bg-[#f4b840] rounded-full"></div>
|
||||
<>
|
||||
<div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
{/* Hidden audio element */}
|
||||
<audio
|
||||
ref={audioRef}
|
||||
src={post.audio_path}
|
||||
onTimeUpdate={handleTimeUpdate}
|
||||
onLoadedMetadata={handleLoadedMetadata}
|
||||
onEnded={handleEnded}
|
||||
preload="metadata"
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={togglePlay}
|
||||
className="w-10 h-10 bg-[#f4b840] hover:bg-[#e5a930] rounded-full flex items-center justify-center text-[#1a1a1a] transition-colors"
|
||||
>
|
||||
{isPlaying ? (
|
||||
<Pause size={16} fill="currentColor" />
|
||||
) : (
|
||||
<Play size={16} fill="currentColor" />
|
||||
)}
|
||||
</button>
|
||||
<div className="flex-1">
|
||||
<div
|
||||
className="h-1.5 bg-gray-300 rounded-full overflow-hidden mb-2 cursor-pointer"
|
||||
onClick={handleSeek}
|
||||
>
|
||||
<div
|
||||
className="h-full bg-[#f4b840] rounded-full transition-all"
|
||||
style={{ width: `${progress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-600">
|
||||
<span>{formatTime(currentTime)}</span>
|
||||
<span>{formatTime(duration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-600">
|
||||
<span>0:00</span>
|
||||
<span>--:--</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Volume2 size={18} className="text-gray-600" />
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
value={volume}
|
||||
onChange={handleVolumeChange}
|
||||
className="w-16 h-1.5 bg-gray-300 rounded-full appearance-none cursor-pointer"
|
||||
style={{
|
||||
background: `linear-gradient(to right, #f4b840 0%, #f4b840 ${volume * 100}%, #d1d5db ${volume * 100}%, #d1d5db 100%)`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button className="text-gray-600 hover:text-gray-900">
|
||||
<Volume2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Transcript Section - Always shown */}
|
||||
<div className="mt-4 border border-gray-200 rounded-lg overflow-hidden">
|
||||
<button
|
||||
onClick={() => setTranscriptExpanded(!transcriptExpanded)}
|
||||
className="w-full flex items-center justify-between p-3 bg-gray-50 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<span className="text-sm font-medium text-gray-900">Transcript</span>
|
||||
{loadingTranscript ? (
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-600"></div>
|
||||
) : (
|
||||
transcriptExpanded ? <ChevronUp size={18} /> : <ChevronDown size={18} />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{transcript && (
|
||||
<div className={`bg-white transition-all ${transcriptExpanded ? 'max-h-96' : 'max-h-24'} overflow-y-auto`}>
|
||||
<div className="p-4">
|
||||
<p className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">
|
||||
{transcript}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!transcript && !loadingTranscript && (
|
||||
<div className="p-4 bg-white">
|
||||
<p className="text-sm text-gray-500 italic">No transcript available</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loadingTranscript && (
|
||||
<div className="p-4 bg-white text-center">
|
||||
<p className="text-sm text-gray-500">Loading transcript...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Processing Status */}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Search, User, Volume2 } from 'lucide-react'
|
||||
import { Search, LogOut } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function Header({ user, onSearch, onLogout }) {
|
||||
export default function Header({ onSearch, onLogout }) {
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
|
||||
const handleSearch = (e) => {
|
||||
@@ -16,7 +16,9 @@ export default function Header({ user, onSearch, onLogout }) {
|
||||
{/* Left: Logo */}
|
||||
<div className="flex items-center gap-3 flex-shrink-0">
|
||||
<div className="w-8 h-8 bg-[#f4b840] rounded-lg flex items-center justify-center">
|
||||
<Volume2 size={18} className="text-white" />
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="text-lg font-bold text-gray-900">VoiceVault</h1>
|
||||
</div>
|
||||
@@ -35,24 +37,15 @@ export default function Header({ user, onSearch, onLogout }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: User Info / Login */}
|
||||
{/* Right: Logout */}
|
||||
<div className="flex items-center gap-3 flex-shrink-0">
|
||||
{user ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm text-gray-700">{user.display_name || user.email}</span>
|
||||
<button
|
||||
onClick={onLogout}
|
||||
className="text-sm text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button className="bg-[#f4b840] hover:bg-[#e5a930] text-[#1a1a1a] px-4 py-2 rounded text-sm font-medium flex items-center gap-2">
|
||||
<User size={16} />
|
||||
Log In
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={onLogout}
|
||||
className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 px-3 py-2 rounded hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<LogOut size={16} />
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -1,16 +1,49 @@
|
||||
import { Plus, Home, History, Settings } from 'lucide-react'
|
||||
|
||||
export default function Sidebar({ activeTab, onTabChange }) {
|
||||
export default function Sidebar({ user, activeTab, onTabChange }) {
|
||||
const navItems = [
|
||||
{ id: 'create', label: 'Make an Archive Post', icon: Plus },
|
||||
{ id: 'feed', label: 'My Feed', icon: Home },
|
||||
{ id: 'history', label: 'History', icon: History },
|
||||
{ id: 'settings', label: 'Settings', icon: Settings }
|
||||
]
|
||||
|
||||
// Get user initials
|
||||
const getInitials = () => {
|
||||
if (user?.display_name) {
|
||||
return user.display_name
|
||||
.split(' ')
|
||||
.map(n => n[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.slice(0, 2)
|
||||
}
|
||||
if (user?.email) {
|
||||
return user.email.slice(0, 2).toUpperCase()
|
||||
}
|
||||
return 'U'
|
||||
}
|
||||
|
||||
return (
|
||||
<aside className="w-64 bg-white border-r border-gray-200 p-6 hidden md:block flex-shrink-0 overflow-y-auto">
|
||||
<div className="sticky top-6">
|
||||
{/* User Profile */}
|
||||
{user && (
|
||||
<div className="mb-6 text-center">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-[#f4b840] to-[#e5a930] rounded-full flex items-center justify-center text-[#1a1a1a] font-bold text-2xl mx-auto mb-3">
|
||||
{getInitials()}
|
||||
</div>
|
||||
<h2 className="text-base font-semibold text-gray-900 truncate">
|
||||
{user.display_name || user.email}
|
||||
</h2>
|
||||
{user.bio && (
|
||||
<p className="text-xs text-gray-600 mt-1 line-clamp-2">
|
||||
{user.bio}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="space-y-2">
|
||||
{navItems.map((item) => {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState } from 'react'
|
||||
import { Upload, X } from 'lucide-react'
|
||||
import { Upload, X, FileText } from 'lucide-react'
|
||||
import { api } from '../api'
|
||||
|
||||
export default function CreatePost({ user, onPostCreated }) {
|
||||
@@ -8,14 +8,15 @@ export default function CreatePost({ user, onPostCreated }) {
|
||||
const [visibility, setVisibility] = useState('private')
|
||||
const [language, setLanguage] = useState('en')
|
||||
const [audioFile, setAudioFile] = useState(null)
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [transcribing, setTranscribing] = useState(false)
|
||||
const [transcript, setTranscript] = useState(null)
|
||||
const [postData, setPostData] = useState(null)
|
||||
const [error, setError] = useState(null)
|
||||
const [success, setSuccess] = useState(false)
|
||||
|
||||
const handleFileSelect = (e) => {
|
||||
const file = e.target.files[0]
|
||||
if (file) {
|
||||
// Check file type
|
||||
const validTypes = ['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/flac', 'audio/mp4', 'video/mp4']
|
||||
if (!validTypes.includes(file.type) && !file.name.match(/\.(mp3|wav|ogg|flac|m4a|mp4|mov|mkv|webm)$/i)) {
|
||||
setError('Invalid file type. Please upload an audio or video file.')
|
||||
@@ -23,31 +24,30 @@ export default function CreatePost({ user, onPostCreated }) {
|
||||
}
|
||||
|
||||
setAudioFile(file)
|
||||
setTranscript(null)
|
||||
setPostData(null)
|
||||
setError(null)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
const handleTranscribe = async () => {
|
||||
if (!audioFile) {
|
||||
setError('Please select an audio file')
|
||||
setError('Please select an audio file first')
|
||||
return
|
||||
}
|
||||
|
||||
if (!title.trim()) {
|
||||
setError('Please enter a title')
|
||||
setError('Please enter a title first')
|
||||
return
|
||||
}
|
||||
|
||||
if (!user?.user_id) {
|
||||
setError('You must be logged in to create a post')
|
||||
setError('You must be logged in')
|
||||
return
|
||||
}
|
||||
|
||||
setUploading(true)
|
||||
setTranscribing(true)
|
||||
setError(null)
|
||||
setSuccess(false)
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
@@ -60,28 +60,38 @@ export default function CreatePost({ user, onPostCreated }) {
|
||||
|
||||
const response = await api.uploadPost(formData)
|
||||
|
||||
console.log('Upload response:', response)
|
||||
setSuccess(true)
|
||||
|
||||
// Reset form
|
||||
setTitle('')
|
||||
setDescription('')
|
||||
setVisibility('private')
|
||||
setLanguage('en')
|
||||
setAudioFile(null)
|
||||
|
||||
// Notify parent component
|
||||
onPostCreated?.(response)
|
||||
|
||||
// Show success message
|
||||
setTimeout(() => setSuccess(false), 5000)
|
||||
if (response.transcript_text) {
|
||||
setTranscript(response.transcript_text)
|
||||
setPostData(response)
|
||||
setSuccess(true)
|
||||
setTimeout(() => setSuccess(false), 3000)
|
||||
} else {
|
||||
setError('Transcription completed but no transcript returned')
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.message || 'Failed to upload post')
|
||||
setError(err.message || 'Failed to transcribe audio')
|
||||
} finally {
|
||||
setUploading(false)
|
||||
setTranscribing(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
setTitle('')
|
||||
setDescription('')
|
||||
setVisibility('private')
|
||||
setLanguage('en')
|
||||
setAudioFile(null)
|
||||
setTranscript(null)
|
||||
setPostData(null)
|
||||
setError(null)
|
||||
setSuccess(false)
|
||||
}
|
||||
|
||||
const handleCreateAnother = () => {
|
||||
handleReset()
|
||||
onPostCreated?.()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
|
||||
@@ -95,187 +105,240 @@ export default function CreatePost({ user, onPostCreated }) {
|
||||
|
||||
{success && (
|
||||
<div className="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
|
||||
<p className="text-sm text-green-800">
|
||||
Post uploaded successfully! Transcript is being generated...
|
||||
<p className="text-sm text-green-800 font-medium">
|
||||
✓ Archive created and transcribed successfully!
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Title Input */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-900 mb-2">
|
||||
Title *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Give your archive a descriptive title..."
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#f4b840] focus:border-transparent"
|
||||
required
|
||||
disabled={uploading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description Input */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-900 mb-2">
|
||||
Description (optional)
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Add a description or context for this recording..."
|
||||
rows={3}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#f4b840] focus:border-transparent resize-none"
|
||||
disabled={uploading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Audio File Upload */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-900 mb-2">
|
||||
Audio/Video File *
|
||||
</label>
|
||||
|
||||
{!audioFile ? (
|
||||
<label className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
|
||||
<div className="flex flex-col items-center justify-center pt-5 pb-6">
|
||||
<Upload size={32} className="text-gray-400 mb-2" />
|
||||
<p className="text-sm text-gray-600 mb-1">
|
||||
<span className="font-semibold">Click to upload</span> or drag and drop
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
MP3, WAV, OGG, FLAC, M4A, MP4, MOV, MKV, WEBM
|
||||
</p>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
accept="audio/*,video/mp4,video/quicktime,video/x-matroska,video/webm"
|
||||
onChange={handleFileSelect}
|
||||
className="hidden"
|
||||
disabled={uploading}
|
||||
/>
|
||||
{!transcript ? (
|
||||
// STEP 1: Upload and Configure
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-900 mb-2">
|
||||
Title *
|
||||
</label>
|
||||
) : (
|
||||
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||
<div className="w-10 h-10 bg-[#f4b840] rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Upload size={18} className="text-white" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
{audioFile.name}
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Give your archive a descriptive title..."
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#f4b840] focus:border-transparent"
|
||||
required
|
||||
disabled={transcribing}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-900 mb-2">
|
||||
Description (optional)
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Add a description or context for this recording..."
|
||||
rows={3}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#f4b840] focus:border-transparent resize-none"
|
||||
disabled={transcribing}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-900 mb-2">
|
||||
Audio/Video File *
|
||||
</label>
|
||||
|
||||
{!audioFile ? (
|
||||
<label className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
|
||||
<div className="flex flex-col items-center justify-center pt-5 pb-6">
|
||||
<Upload size={32} className="text-gray-400 mb-2" />
|
||||
<p className="text-sm text-gray-600 mb-1">
|
||||
<span className="font-semibold">Click to upload</span> or drag and drop
|
||||
</p>
|
||||
<p className="text-xs text-gray-600">
|
||||
{(audioFile.size / 1024 / 1024).toFixed(2)} MB
|
||||
<p className="text-xs text-gray-500">
|
||||
MP3, WAV, OGG, FLAC, M4A, MP4, MOV, MKV, WEBM
|
||||
</p>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
accept="audio/*,video/mp4,video/quicktime,video/x-matroska,video/webm"
|
||||
onChange={handleFileSelect}
|
||||
className="hidden"
|
||||
disabled={transcribing}
|
||||
/>
|
||||
</label>
|
||||
) : (
|
||||
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||
<div className="w-10 h-10 bg-[#f4b840] rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Upload size={18} className="text-white" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
{audioFile.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-600">
|
||||
{(audioFile.size / 1024 / 1024).toFixed(2)} MB
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAudioFile(null)}
|
||||
className="text-gray-500 hover:text-gray-700 ml-2"
|
||||
disabled={transcribing}
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-900 mb-2">
|
||||
Language
|
||||
</label>
|
||||
<select
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#f4b840] focus:border-transparent"
|
||||
disabled={transcribing}
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="es">Spanish</option>
|
||||
<option value="fr">French</option>
|
||||
<option value="de">German</option>
|
||||
<option value="it">Italian</option>
|
||||
<option value="pt">Portuguese</option>
|
||||
<option value="zh">Chinese</option>
|
||||
<option value="ja">Japanese</option>
|
||||
<option value="ko">Korean</option>
|
||||
<option value="ar">Arabic</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Visibility</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
{visibility === 'private' ? 'Only you can see this post' : 'Anyone can see this post'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAudioFile(null)}
|
||||
className="text-gray-500 hover:text-gray-700 ml-2"
|
||||
disabled={uploading}
|
||||
onClick={() => setVisibility('private')}
|
||||
className={`px-4 py-2 rounded text-sm font-medium transition-colors ${
|
||||
visibility === 'private'
|
||||
? 'bg-[#f4b840] text-[#1a1a1a]'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}`}
|
||||
disabled={transcribing}
|
||||
>
|
||||
<X size={20} />
|
||||
Private
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setVisibility('public')}
|
||||
className={`px-4 py-2 rounded text-sm font-medium transition-colors ${
|
||||
visibility === 'public'
|
||||
? 'bg-[#f4b840] text-[#1a1a1a]'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}`}
|
||||
disabled={transcribing}
|
||||
>
|
||||
Public
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Language Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-900 mb-2">
|
||||
Language
|
||||
</label>
|
||||
<select
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#f4b840] focus:border-transparent"
|
||||
disabled={uploading}
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="es">Spanish</option>
|
||||
<option value="fr">French</option>
|
||||
<option value="de">German</option>
|
||||
<option value="it">Italian</option>
|
||||
<option value="pt">Portuguese</option>
|
||||
<option value="zh">Chinese</option>
|
||||
<option value="ja">Japanese</option>
|
||||
<option value="ko">Korean</option>
|
||||
<option value="ar">Arabic</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Visibility Toggle */}
|
||||
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Visibility</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
{visibility === 'private' ? 'Only you can see this post' : 'Anyone can see this post'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setVisibility('private')}
|
||||
className={`px-4 py-2 rounded text-sm font-medium transition-colors ${
|
||||
visibility === 'private'
|
||||
? 'bg-[#f4b840] text-[#1a1a1a]'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}`}
|
||||
disabled={uploading}
|
||||
>
|
||||
Private
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setVisibility('public')}
|
||||
className={`px-4 py-2 rounded text-sm font-medium transition-colors ${
|
||||
visibility === 'public'
|
||||
? 'bg-[#f4b840] text-[#1a1a1a]'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}`}
|
||||
disabled={uploading}
|
||||
>
|
||||
Public
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Buttons */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setTitle('')
|
||||
setDescription('')
|
||||
setAudioFile(null)
|
||||
setError(null)
|
||||
}}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
|
||||
disabled={uploading}
|
||||
onClick={handleTranscribe}
|
||||
disabled={transcribing || !audioFile || !title.trim()}
|
||||
className="w-full px-4 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={uploading || !audioFile || !title.trim()}
|
||||
className="flex-1 px-4 py-2 bg-[#f4b840] hover:bg-[#e5a930] text-[#1a1a1a] rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{uploading ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-[#1a1a1a]"></div>
|
||||
Uploading...
|
||||
</span>
|
||||
{transcribing ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
|
||||
Transcribing & Creating Archive...
|
||||
</>
|
||||
) : (
|
||||
'Create Archive'
|
||||
<>
|
||||
<FileText size={18} />
|
||||
Transcribe & Create Archive
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<p className="text-xs text-gray-600 text-center">
|
||||
This will upload your file and generate a transcript
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
// STEP 2: Show Results
|
||||
<div className="space-y-6">
|
||||
<div className="p-5 bg-green-50 border border-green-200 rounded-lg">
|
||||
<div className="flex items-start gap-3 mb-3">
|
||||
<div className="w-10 h-10 bg-green-600 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<FileText size={20} className="text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-green-900 mb-1">
|
||||
Archive Created Successfully!
|
||||
</h3>
|
||||
<p className="text-sm text-green-700">
|
||||
Your audio has been transcribed and saved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 p-4 bg-white rounded border border-green-200">
|
||||
<p className="text-xs font-semibold text-gray-900 mb-2">TRANSCRIPT</p>
|
||||
<p className="text-sm text-gray-700 max-h-48 overflow-y-auto">
|
||||
{transcript}
|
||||
</p>
|
||||
<div className="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between text-xs text-gray-600">
|
||||
<span>{transcript.length} characters</span>
|
||||
<span>{postData?.rag_chunk_count || 0} RAG chunks</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 p-4 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<p className="text-xs text-gray-600 mb-1">Title</p>
|
||||
<p className="text-sm font-medium text-gray-900">{title}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-600 mb-1">Visibility</p>
|
||||
<p className="text-sm font-medium text-gray-900 capitalize">{visibility}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-600 mb-1">Language</p>
|
||||
<p className="text-sm font-medium text-gray-900">{language.toUpperCase()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-600 mb-1">Status</p>
|
||||
<p className="text-sm font-medium text-green-600">Ready</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => onPostCreated?.()}
|
||||
className="flex-1 px-4 py-2 bg-[#f4b840] hover:bg-[#e5a930] text-[#1a1a1a] rounded-lg font-medium transition-colors"
|
||||
>
|
||||
View in Feed
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreateAnother}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Create Another
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -23,7 +23,7 @@ export default function Feed({ user }) {
|
||||
const params = {
|
||||
page,
|
||||
limit: 20,
|
||||
user_id: user.user_id,
|
||||
current_user_id: user.user_id, // For backend privacy checks
|
||||
}
|
||||
|
||||
if (visibilityFilter !== 'all') {
|
||||
@@ -31,7 +31,14 @@ export default function Feed({ user }) {
|
||||
}
|
||||
|
||||
const response = await api.getPosts(params)
|
||||
setPosts(response.posts || [])
|
||||
let filteredPosts = response.posts || []
|
||||
|
||||
// Frontend privacy filter: only show posts if they're public OR user is the author
|
||||
filteredPosts = filteredPosts.filter(post => {
|
||||
return post.visibility === 'public' || post.user_id === user.user_id
|
||||
})
|
||||
|
||||
setPosts(filteredPosts)
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
} finally {
|
||||
|
||||
Reference in New Issue
Block a user