AI Researcher and Video Studio implementation complete

2026-01-05 15:49:51 +05:30
parent b134e9dc7e
commit 0b63ae7fc1
200 changed files with 39535 additions and 1375 deletions
--- a/frontend/src/components/VideoStudio/dashboard/previews/VideoBackgroundRemoverPreview.tsx
+++ b/frontend/src/components/VideoStudio/dashboard/previews/VideoBackgroundRemoverPreview.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import { Box, Stack, Typography, Chip } from '@mui/material';
+import { OptimizedVideo } from '../../../ImageStudio/dashboard/utils/OptimizedVideo';
+
+export const VideoBackgroundRemoverPreview: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        mt: 2,
+        borderRadius: 3,
+        border: '3px solid',
+        borderImage: 'linear-gradient(135deg, rgba(239,68,68,0.8), rgba(249,115,22,0.8), rgba(251,191,36,0.8)) 1',
+        overflow: 'hidden',
+        height: { xs: 260, md: 300 },
+        display: 'flex',
+        background: '#0f172a',
+      }}
+    >
+      <Box
+        sx={{
+          flex: '0 0 auto',
+          width: '50%',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        <OptimizedVideo
+          src="/videos/scene_1_user_33Gz1FPI86V_0a5d0d71.mp4"
+          alt="Original video with background"
+          controls
+          muted
+          loop
+          playsInline
+          preload="metadata"
+          sx={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+          }}
+        />
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 16,
+            left: 16,
+            background: 'rgba(239,68,68,0.9)',
+            color: '#fff',
+            px: 2,
+            py: 1,
+            borderRadius: 2,
+            fontWeight: 700,
+            fontSize: '0.85rem',
+          }}
+        >
+          Original
+        </Box>
+      </Box>
+      <Box
+        sx={{
+          flex: '0 0 auto',
+          width: '50%',
+          position: 'relative',
+          overflow: 'hidden',
+          background: 'linear-gradient(135deg, #1e293b, #334155)',
+        }}
+      >
+        <OptimizedVideo
+          src="/videos/text-video-voiceover.mp4"
+          alt="Background removed video"
+          controls
+          muted
+          loop
+          playsInline
+          preload="metadata"
+          sx={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+          }}
+        />
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 16,
+            right: 16,
+            background: 'rgba(16,185,129,0.9)',
+            color: '#fff',
+            px: 2,
+            py: 1,
+            borderRadius: 2,
+            fontWeight: 700,
+            fontSize: '0.85rem',
+          }}
+        >
+          Background Removed
+        </Box>
+        <Box
+          sx={{
+            position: 'absolute',
+            bottom: 16,
+            left: 16,
+            right: 16,
+            background: 'rgba(15,23,42,0.9)',
+            color: '#fff',
+            p: 1.5,
+            borderRadius: 2,
+          }}
+        >
+          <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
+            <Chip
+              size="small"
+              label="Clean Matting"
+              sx={{ background: '#10b981', color: '#fff', fontWeight: 600, fontSize: '0.7rem' }}
+            />
+            <Chip
+              size="small"
+              label="$0.01/s"
+              sx={{ background: '#3b82f6', color: '#fff', fontWeight: 600, fontSize: '0.7rem' }}
+            />
+          </Stack>
+        </Box>
+      </Box>
+    </Box>
+  );
+};