독자적으로 개발한 AI 제품이 궁금하신가요? 오늘은 Sora AI 비디오 생성기의 구현 원리에 대해 자세히 살펴보겠습니다. 프로그래머들이 독자적으로 개발한 이 AI 생성기는 인상적일 뿐만 아니라 AI 기술의 무한한 가능성을 보여줍니다.
먼저 Sora AI 영상 생성기의 기술 스택을 살펴보겠습니다. 이 프로젝트는 React 프런트엔드 프레임워크를 사용하고 백엔드 개발을 위해 Nest JS와 TypeORM을 결합합니다. JavaScript와 TypeScript에 익숙하지 않은 사람들에게 이 두 기술은 독립적인 개발을 시작하기 위한 거의 표준 기술입니다. JS를 사용하여 프런트엔드 및 백엔드 코드를 직접 작성할 수 있으므로 개발이 더욱 유연하고 효율적으로 이루어집니다.
프로젝트의 루트 디렉터리에서 주요 CONFIG 파일을 찾을 수 있습니다. 이 파일은 프로젝트의 구조를 보여줍니다. 프런트엔드 코드는 src/app 폴더 내의 구성 요소 폴더에 있고 백엔드 코드는 API 폴더에 있습니다. 이러한 명확한 프로젝트 구조를 통해 개발자는 코드를 더 쉽게 이해하고 유지 관리할 수 있습니다.
그렇다면 소라 AI 영상생성기 홈페이지는 어떻게 구현되어 있을까요? Nest 프로젝트의 페이지 경로와 코드의 구성 파일 경로가 서로 매핑되어 있음을 알고 있습니다. 동적 라우팅과 라우팅 그룹의 개념을 통해 현재 페이지에 해당하는 코드를 찾을 수 있습니다. 구체적으로 Hero 컴포넌트는 페이지 상단을 담당하고, tab 컴포넌트는 중앙의 3개 탭을 담당하며, video 컴포넌트는 동영상 목록을 표시하는 역할을 담당합니다.
그러나 개발 과정에서 작성자는 문제에 직면했습니다. 동영상 목록에 동영상 데이터가 없었습니다. 이 문제를 해결하기 위해 저자는 API 인터페이스를 활용하여 답을 찾았습니다. 그들은 POST 요청을 통해 모든 비디오 데이터를 가져와 데이터베이스에 삽입하는 updateVideo라는 인터페이스를 발견했습니다. 그런데 이 비디오 데이터는 어디서 오는 걸까요?
추가 조사 결과 videoDataFile이라는 환경 변수에서 비디오 데이터를 읽는다는 사실을 발견했습니다. 이 환경 변수는 비디오 데이터가 포함된 JSON 파일을 가리킵니다. 하지만 작성자가 이 파일을 제출하는 것을 소홀히 했을 수 있으므로 비디오 데이터가 올바르게 로드되지 않습니다. 이 문제를 해결하기 위해 데이터 필드 변환 이름에 따라 새 data.json 파일을 생성하고 해당 비디오 데이터를 추가할 수 있습니다. 동시에 각 비디오를 생성한 사용자를 표시하기 위해 고유한 사용자 ID(adminUserId)도 설정해야 합니다.
updateVideo 인터페이스를 호출하면 모든 비디오 데이터가 데이터베이스에 추가됩니다. 이 인터페이스를 트리거하려면 디버그 폴더에서 .http 파일을 찾고 Rest 클라이언트 플러그인을 사용하여 요청을 보낼 수 있습니다. 요청이 성공적으로 전송되면 데이터베이스에서 비디오 데이터가 성공적으로 추가되었음을 확인할 수 있습니다.
그런데 프로젝트 로컬 주소를 새로고침해 보니 영상 목록이 여전히 표시되지 않는 것을 발견했습니다. 왜 이런거야? 코드에서 영상 데이터를 구하는 방법은 getLadiesVideo 메소드를 호출하여 1번째부터 50번째 데이터까지 읽어오는 것으로 밝혀졌습니다. 그러나 몇 가지 이유(데이터베이스 쿼리 조건이 잘못 설정되었을 수 있음)로 인해 이러한 데이터가 올바르게 반환되지 않습니다. 이 문제를 해결하려면 필요한 비디오 데이터를 올바르게 얻을 수 있도록 데이터베이스 쿼리 조건을 확인하고 수정해야 합니다.
또한 Sora AI 비디오 생성기는 서버 측 렌더링(SSR) 및 헤드리스 구성 요소(헤드리스 UI)와 같은 고급 기술도 사용합니다. 서버 측 렌더링을 사용하면 데이터베이스 쿼리와 같은 작업을 서버 측에서 완료할 수 있으므로 페이지 로딩 속도와 성능이 향상됩니다. 헤드리스 구성 요소를 통해 개발자는 필요에 따라 특정 구성 요소를 다운로드하고 사용할 수 있으므로 프로젝트의 패키지 크기를 크게 줄일 수 있습니다.
마지막으로 Sora AI 비디오 생성기는 국제화 기능도 구현한다는 점을 언급할 가치가 있습니다. 모든 요청을 청취하고 getLocale 메소드를 사용하여 요청 헤더의 언어 정보를 획득함으로써 프로젝트는 사용자에게 가장 적합한 언어를 일치시키고 해당 콘텐츠를 반환할 수 있습니다. 이러한 국제적인 디자인을 통해 프로젝트는 다양한 국가 및 지역의 사용자 요구를 더 잘 충족할 수 있습니다.
간단히 말해서, Sora AI 비디오 생성기의 구현 원리에는 여러 분야의 지식과 기술이 포함됩니다. 본 프로젝트에 대한 심층적인 분석을 통해 우리는 많은 실질적인 개발 기술과 교훈을 배울 수 있을 뿐만 아니라 향후 AI 기술 개발에 대한 더 깊은 이해와 기대를 얻을 수 있습니다. 독자적인 개발과 AI 기술에 관심이 있다면 이 프로젝트를 시도해 보는 것도 좋을 것 같습니다!
트위터에 공유 페이스북에 공유
Indie123
코멘트
현재 댓글이 없습니다