add preview for original file

client/src/Pages/ResultsPage.tsx

@@ -25,6 +25,7 @@ function ResultsPage() {
   console.log("Extracted files are", extractedFiles);
 //  const [isPlaying, setIsPlaying] = useState(false);
   const audioRefs = [useRef(null), useRef(null), useRef(null),useRef(null)];
+  const mediaFileRef = useRef(null);
   const audioClass = response.audio_class
   const isVideo = mediaFile?.type.includes('video');
   
@@ -76,6 +77,17 @@ function ResultsPage() {
               <Typography variant="h6" gutterBottom>
                 {mediaFile.name} (Processed)
               </Typography>
+              <Box sx={{ width: '100%', mt: 2, mb: 2 }}>
+                <Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}>
+                  Original: {mediaFile.name}
+                </Typography>
+                <audio
+                  ref={mediaFileRef}
+                  src={mediaFile.url}
+                  style={{ width: '100%' }}
+                  controls
+                />
+              </Box>
               {audioClass === "Music" ? (
                 extractedFiles.map((file, index) => (
                   <Box key={index} sx={{ width: '100%', mt: 2 }}>