working with improved design

examples/dubbing/e2e-example/backend/app.py

@@ -191,7 +191,7 @@ def stream(id: str):
     return Response(stream_media(video_path), mimetype="video/mp4")
 
 
-@app.route("/projects/<id>/audio/<lang_code>", methods=["GET"])
+@app.route("/projects/<id>/audio/<lang_code>.mp3", methods=["GET"])
 def stream_audio(id: str, lang_code: str):
     stream_audio = f"data/{id}/audio_{lang_code}.mp3"
     return Response(stream_media(stream_audio), mimetype="audio/mp3")

examples/dubbing/e2e-example/frontend/src/App.tsx

@@ -1,7 +1,6 @@
 import { QueryClient, QueryClientProvider } from "react-query";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { Create } from "./pages/create";
-import { Stream } from "./pages/stream";
 import { Toaster } from "./components/ui/toaster";
 import Carousel from "./pages/carousel";
 
@@ -13,10 +12,6 @@ function App() {
       path: "/",
       element: <Create />,
     },
-    {
-      path: "/stream/:id",
-      element: <Stream />,
-    },
     {
       path: "/carousel/:id",
       element: <Carousel />,

examples/dubbing/e2e-example/frontend/src/pages/Carousel.module.scss

@@ -55,7 +55,8 @@
   z-index: 0;
   pointer-events: none;
   user-select: none;
-  top: 0;
+  top: 50%;
+  transform: translateY(-50%);
   @media (max-width: 1280px) {
     height: calc(650px * 0.5625);
   }