Simple frontend added, tests are required

2026-08-01 08:41:25 +00:00
parent b6ace3f68b
commit e87d8089bf
24 changed files with 1473 additions and 0 deletions
@@ -0,0 +1,143 @@
+import React, { useCallback } from 'react'
+import { useDropzone } from 'react-dropzone'
+import { Box, Typography, Paper, LinearProgress, Alert } from '@mui/material'
+import { CloudUpload, InsertDriveFile } from '@mui/icons-material'
+import { useUploadStore } from '../stores/uploadStore'
+import { uploadFile } from '../api/client'
+import { useTaskStore } from '../stores/taskStore'
+
+const ALLOWED_EXTENSIONS = ['.mp3', '.flac', '.wav', '.m4a', '.ogg', '.opus', '.aac', '.wma', '.aiff', '.alac', '.ac3']
+
+export const UploadZone: React.FC = () => {
+  const {
+    file,
+    fileName,
+    fileSize,
+    isUploading,
+    uploadProgress,
+    error,
+    setFile,
+    setFileName,
+    setFileSize,
+    setIsUploading,
+    setUploadProgress,
+    setError,
+    setTaskId,
+  } = useUploadStore()
+
+  const { setTaskId: setTaskIdStore, setIsProcessing } = useTaskStore()
+
+  const onDrop = useCallback(
+    async (acceptedFiles: File[]) => {
+      if (acceptedFiles.length === 0) return
+
+      const selectedFile = acceptedFiles[0]
+      const extension = '.' + selectedFile.name.split('.').pop()?.toLowerCase()
+
+      if (!ALLOWED_EXTENSIONS.includes(extension)) {
+        setError(`Unsupported file format. Allowed: ${ALLOWED_EXTENSIONS.join(', ')}`)
+        return
+      }
+
+      setFile(selectedFile)
+      setFileName(selectedFile.name)
+      setFileSize(selectedFile.size)
+      setError(null)
+      setIsUploading(true)
+      setUploadProgress(0)
+
+      try {
+        const response = await uploadFile(selectedFile)
+        setTaskId(response.task_id)
+        setTaskIdStore(response.task_id)
+        setUploadProgress(100)
+        setIsUploading(false)
+      } catch (err: any) {
+        setError(err.response?.data?.detail || err.message || 'Upload failed')
+        setIsUploading(false)
+        setUploadProgress(0)
+        setFile(null)
+        setFileName('')
+        setFileSize(0)
+      }
+    },
+    [setFile, setFileName, setFileSize, setIsUploading, setUploadProgress, setError, setTaskId, setTaskIdStore]
+  )
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      'audio/*': ALLOWED_EXTENSIONS,
+    },
+    multiple: false,
+    disabled: isUploading,
+  })
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes < 1024) return `${bytes} B`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  }
+
+  return (
+    <Box>
+      <Paper
+        {...getRootProps()}
+        sx={{
+          p: 4,
+          border: '2px dashed',
+          borderColor: isDragActive ? 'primary.main' : 'grey.300',
+          borderRadius: 2,
+          backgroundColor: isDragActive ? 'action.hover' : 'background.paper',
+          cursor: isUploading ? 'default' : 'pointer',
+          transition: 'all 0.2s ease',
+          textAlign: 'center',
+        }}
+      >
+        <input {...getInputProps()} />
+
+        {file ? (
+          <Box>
+            <InsertDriveFile sx={{ fontSize: 48, color: 'primary.main', mb: 1 }} />
+            <Typography variant="h6">{fileName}</Typography>
+            <Typography variant="body2" color="text.secondary">
+              {formatFileSize(fileSize)}
+            </Typography>
+            {isUploading && (
+              <Box sx={{ mt: 2, width: '100%' }}>
+                <LinearProgress variant="determinate" value={uploadProgress} />
+                <Typography variant="caption" color="text.secondary">
+                  {uploadProgress}% uploaded
+                </Typography>
+              </Box>
+            )}
+            {!isUploading && (
+              <Typography variant="caption" color="success.main" sx={{ mt: 1, display: 'block' }}>
+                ✅ Uploaded successfully
+              </Typography>
+            )}
+          </Box>
+        ) : (
+          <Box>
+            <CloudUpload sx={{ fontSize: 64, color: 'primary.main', mb: 2 }} />
+            <Typography variant="h6" color="text.secondary">
+              {isDragActive ? 'Drop your audio file here' : 'Drag & drop your audio file here'}
+            </Typography>
+            <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+              or click to browse
+            </Typography>
+            <Typography variant="caption" color="text.secondary" sx={{ mt: 2, display: 'block' }}>
+              Supported formats: {ALLOWED_EXTENSIONS.join(', ')}
+            </Typography>
+          </Box>
+        )}
+      </Paper>
+
+      {error && (
+        <Alert severity="error" sx={{ mt: 2 }}>
+          {error}
+        </Alert>
+      )}
+    </Box>
+  )
+}