Twelve Labs API를 사용하여 적합한 인플루언서 파트너를 찾는 방법

REACT_APP_API_URL=https://api.twelvelabs.io/v1.1
REACT_APP_API_KEY=<YOUR API KEY>
REACT_APP_SERVER_URL=<YOUR SERVER URL>
REACT_APP_PORT_NUMBER=<YOUR PORT NUMBER>

/** 상수 정의 및 TL API 엔드포인트 구성 */
const TWELVE_LABS_API_KEY = process.env.REACT_APP_API_KEY;
const API_BASE_URL = process.env.REACT_APP_API_URL;
const TWELVE_LABS_API = axios.create({ baseURL: API_BASE_URL });
const PORT_NUMBER = process.env.REACT_APP_PORT_NUMBER;

/** 인덱스를 생성합니다 */
app.post("/indexes", async (request, response, next) => {
 const headers = {
   "Content-Type": "application/json",
   "x-api-key": TWELVE_LABS_API_KEY,
 };


 const data = {
   engine_id: "marengo2.5",
   index_options: ["visual", "conversation", "text_in_video", "logo"],
   index_name: request.body.indexName,
 };


 try {
   const apiResponse = await TWELVE_LABS_API.post("/indexes", data, {
     headers,
   });
   response.json(apiResponse.data);
 } catch (error) {
   console.error("서버 측 에러:", error);
   response.json({ error });
 }
});

[
     { "url": "VIDEO URL" },
     { "url": "VIDEO URL" }
     ...
    ]

/** 분석을 위해 동영상을 다운로드 및 인덱싱하고, 작업 ID와 인덱스 ID를 반환합니다 */
app.post(
 "/download",
 bodyParser.urlencoded(),
 async (request, response, next) => {
   try {
     // 1단계: 요청에서 동영상 데이터 및 인덱스 정보 추출
     const jsonVideos = request.body.videoData;
     const totalVideos = jsonVideos.length;
     let processedVideosCount = 0;
     const chunk_size = 5;
     let videoIndexingResponses = [];
     console.log("동영상 다운로드 중...");

// 2단계: 청크 단위로 동영상 다운로드
     for (let i = 0; i < totalVideos; i += chunk_size) {
       const videoChunk = jsonVideos.slice(i, i + chunk_size);
       const chunkDownloadedVideos = [];


       // 현재 청크의 각 동영상 다운로드
       await Promise.all(
         videoChunk.map(async (videoData) => {
           try {
             // 다운로드할 동영상의 안전한 파일명 생성
             const safeName = sanitize(videoData.title);
             const videoPath = `videos/${safeName}.mp4`;


             // 제공된 URL에서 동영상 다운로드
             const stream = ytdl(videoData.url, {
               filter: "videoandaudio",
               format: ".mp4",
             });
             await streamPipeline(stream, fs.createWriteStream(videoPath));


             console.log(`${videoPath} -- 다운로드 완료`);


             chunkDownloadedVideos.push({
               videoPath: videoPath,
               videoData: videoData,
             });
           } catch (error) {
             console.log(`${videoData.title} 다운로드 중 에러 발생`);
             console.error(error);
           }
         })
       );

// 3단계: 다운로드된 동영상을 인덱싱을 위해 제출
       console.log(
         `인덱싱을 위한 동영상 제출 중 | 청크 ${
           Math.floor(i / chunk_size) + 1
         }`
       );


       const chunkVideoIndexingResponses = await Promise.all(
         chunkDownloadedVideos.map(async (chunkDownloadedVideo) => {
           console.log(
             `인덱싱을 위해 ${chunkDownloadedVideo.videoPath} 제출 중...`
           );
           const indexingResponse = await indexVideo(
             chunkDownloadedVideo.videoPath,
             request.body.index_id
           );


           // indexingResponse에 videoData 추가
           indexingResponse.videoData = chunkDownloadedVideo.videoData;


           return indexingResponse;
         })
       ).catch(next);
       
       console.log("청크에 대한 인덱싱 제출 완료 | 작업 ID 목록:");


       processedVideosCount += videoChunk.length;


       console.log(
         `총 ${totalVideos}개 비디오 중 ${processedVideosCount}개 처리 완료`
       );


       videoIndexingResponses = videoIndexingResponses.concat(
         chunkVideoIndexingResponses
       );


       await new Promise((resolve) => setTimeout(resolve, 1000));
     }

/** 다운로드된 동영상을 받아 인덱싱 프로세스를 시작합니다 */
const indexVideo = async (videoPath, indexId) => {
 const headers = {
   headers: {
     accept: "application/json",
     "Content-Type": "multipart/form-data",
     "x-api-key": TWELVE_LABS_API_KEY,
   },
 };


 let params = {
   index_id: indexId,
   video_file: fs.createReadStream(videoPath),
   language: "en",
 };


 const response = await TWELVE_LABS_API.post("/tasks", params, headers);


 return await response.data;
};

{
	"_id": "6527732e23c1347ffbe3a802"
}

[
  {
    _id: '6527732e23c1347ffbe3a802',
    videoData: {
      url: 'https://www.youtube.com/watch?v=WuWnt2NHJxk&list=PLI8sddTC_LM0SG6JMYmrbrHZy7j5zUjMA&index=4&pp=iAQB',
      title: 'Everyday Makeup Using ONLY 3 Products !!',
      authorName: 'Smitha Deepak',
      thumbnails: [Array]
    }
  },
  …
]

// 4단계: 인덱싱 작업들의 작업 ID 및 인덱스 ID 반환
     console.log(
       "모든 동영상에 대한 인덱싱 제출 완료. 작업 ID 목록:"
     );


     console.log(videoIndexingResponses);


     response.json({
       taskIds: videoIndexingResponses,
       indexId: request.body.index_id,
     });
   } catch (error) {
     next(error);
   }
 }
);

"metadata": {
		"duration": 188.6,
		"filename": "3 MINUTE MAKEUP THAT WILL LAST ALL DAY.mp4",
		"fps": 25,
		"height": 720,
		"size": 40566200,
		"video_title": "3 MINUTE MAKEUP THAT WILL LAST ALL DAY.mp4",
		"width": 1280,
		}

/** 동영상 메타데이터를 업데이트합니다 */
app.put("/update/:indexId/:videoId", async (request, response, next) => {
 const indexId = request.params.indexId;
 const videoId = request.params.videoId;
 const data = request.body;
 const headers = {
   "Content-Type": "application/json",
   "x-api-key": TWELVE_LABS_API_KEY,
 };


 try {
   const apiResponse = await TWELVE_LABS_API.put(
     `/indexes/${indexId}/videos/${videoId}`,
     data,
     { headers }
   );
   response.json(apiResponse.data);
 } catch (error) {
   return next(error);
 }
});

async function updateMetadata() {
   const updatePromises = completeTasks.map(async (completeTask) => {
     const matchingVid = taskVideos.find(
       (taskVid) =>
         `${sanitize(taskVid.title)}.mp4` === completeTask.metadata.filename
     );
     if (matchingVid) {
       const authorName = matchingVid.author.name;
       const youtubeUrl = matchingVid.video_url || matchingVid.shortUrl;
       const data = {
         metadata: {
           author: authorName,
           youtubeUrl: youtubeUrl,
           whoTalkedAboutUs: true,
         },
       };
       try {
         await fetch(
           `${UPDATE_VIDEO_URL}/${currIndex}/${completeTask.video_id}`,
           {
             method: "PUT",
             headers: {
               "Content-Type": "application/json",
             },
             body: JSON.stringify(data),
           }
         );
       } catch (error) {
         console.error(error);
       }
     }
   });
   await Promise.all(updatePromises);
 }

"metadata": {
		"author": "Justine Feather", //추가!
		"duration": 188.6,
		"filename": "3 MINUTE MAKEUP THAT WILL LAST ALL DAY.mp4",
		"fps": 25,
		"height": 720,
		"size": 40566200,
		"video_title": "3 MINUTE MAKEUP THAT WILL LAST ALL DAY.mp4",
		"whoTalkedAboutUs": true, //추가!
		"width": 1280,
		"youtubeUrl": "https://www.youtube.com/watch?v=aYQWSNAL4D8" //추가!
		}

/** 특정 쿼리로 동영상을 검색합니다 */
app.post("/search", async (request, response, next) => {
 const headers = {
   accept: "application/json",
   "Content-Type": "application/json",
   "x-api-key": TWELVE_LABS_API_KEY,
 };


 const data = {
   index_id: request.body.indexId,
   search_options: ["visual", "conversation", "text_in_video", "logo"],
   query: request.body.query,
   group_by: "video",
   sort_option: "clip_count",
   threshold: "medium",
   page_limit: 2,
 };


 try {
   const apiResponse = await TWELVE_LABS_API.post("/search", data, {
     headers,
   });
   response.json(apiResponse.data);
 } catch (error) {
   return next(error);
 }
});

/** 1차 검색 결과와 및 매칭되는 동영상들을 조회합니다 */
 const {
   initialSearchData: {
     page_info: { next_page_token: initialNextPageToken } = {},
   } = {},
   initialSearchResults,
   initialSearchResultVideos,
   refetch,
 } = useGetVideosOfSearchResults(currIndex, finalSearchQuery);

export function useGetVideosOfSearchResults(indexId, query) {
 const {
   data: initialSearchData,
   refetch,
   isLoading,
 } = useSearchVideo(indexId, query);
 const initialSearchResults = initialSearchData.data || [];


 const resultVideos = useQueries({
   queries: initialSearchResults.map((searchResult) => ({
     queryKey: [keys.SEARCH, indexId, searchResult.id],
     queryFn: () =>
       apiConfig.TWELVE_LABS_API.get(
         `${apiConfig.INDEXES_URL}/${indexId}/videos/${searchResult.id}`
       ).then((res) => res.data),
   })),
 });
 const initialSearchResultVideos = resultVideos.map(({ data }) => data);
 return {
   initialSearchData,
   initialSearchResults,
   initialSearchResultVideos,
   refetch,
   isLoading,
 };
}

export function useSearchVideo(indexId, query) {
 return useQuery({
   queryKey: [keys.SEARCH, indexId, query],
   queryFn: () =>
     apiConfig.TWELVE_LABS_API.post(apiConfig.SEARCH_URL, {
       indexId,
       query,
     }).then((res) => res.data),
 });
}

[
	
 {clips: 
[
  {score: 76.1, start: 21.15625, end: 37.15625, metadata: Array(1),  
   video_id: '65651c021cbcab2e74d86eb3', confidence: “medium”,   
   modules: [{...}]},
   {…},
    …
], 
 id: '65651c021cbcab2e74d86eb3'}, 
 {clips: Array(6), id:... },
  …
]

[
	{
	     “created_at”: "2023-12-07T18:32:01Z"
     “hls”: {...},
           “indexed_at”: "2023-12-07T18:34:06Z",
           “metadata”: {...}, 
           “Updated_at”: "2023-12-07T18:35:01Z",
           “_id”: "65720fa11cbcab2e74d87aab"
	}, 
      …
]

const nextPageResultsData = await fetchNextPageSearchResults(
       queryClient,
       nextPageToken
     );

export async function fetchNextPageSearchResults(queryClient, nextPageToken) {
 try {
   const response = await queryClient.fetchQuery({
     queryKey: [keys.SEARCH, nextPageToken],
     queryFn: async () => {
       const response = await apiConfig.TWELVE_LABS_API.get(
         `${apiConfig.SEARCH_URL}/${nextPageToken}`
       );
       const data = response.data;
       return data;
     },
   });
   return response;
 } catch (error) {
   console.error("검색 결과 다음 페이지 로드 중 에러 발생:", error);
   throw error;
 }
}

/** 비디오 상호작용 관련 로직을 통제하는 허브 컴포넌트들
*
*  VideoIndex -> VideoComponents -> { UploadYouTubeVideo, VideoList, PageNav,
*  SearchForm, SearchResults }
*
*/


export function VideoComponents({
 currIndex,
 vidPage,
 setVidPage,
 taskVideos,
 setTaskVideos,
}) {
 const [searchQuery, setSearchQuery] = useState("");
 const [finalSearchQuery, setFinalSearchQuery] = useState("");
 const [isSubmitting, setIsSubmitting] = useState(false);
 const { setIndexId } = useContext(setIndexIdContext);


 const queryClient = useQueryClient();


 const {
   data: videosData,
   refetch: refetchVideos,
   isPreviousData,
 } = useGetVideos(currIndex, vidPage, VID_PAGE_LIMIT);
 
 const videos = videosData?.data;


 const { data: authors, refetch: refetchAuthors } =
   useGetAllAuthors(currIndex);


 function reset() {
   setSearchQuery("");
   setFinalSearchQuery("");
 }


 useEffect(() => {
   queryClient.invalidateQueries({
     queryKey: [keys.VIDEOS, currIndex, vidPage],
   });
 }, [taskVideos, currIndex, vidPage]);


 useEffect(() => {
   queryClient.invalidateQueries({
     queryKey: [keys.AUTHORS, currIndex],
   });
 }, [videos, currIndex]);

return (
	<>
		<div className="videoUploadForm">
			<div className="display-6 m-4">새 동영상 업로드하기>
			<UploadYoutubeVideo
     		currIndex={currIndex}
     		taskVideos={taskVideos}
     		setTaskVideos={setTaskVideos}
     		refetchVideos={refetchVideos}
     		isSubmitting={isSubmitting}
     		setIsSubmitting={setIsSubmitting}
     		reset={reset}
			&sol;>
		<

export function VideoComponents({ ... }) {
  return (
    ...
    {videos && videos.length > 0 && (
      <div>
        <div className="videoSearchForm">
          <div className="title">동영상 검색<&sol;div>
          {/* <div className="m-auto p-3"> */}
          <SearchForm
            setSearchQuery={setSearchQuery}
            searchQuery={searchQuery}
            setFinalSearchQuery={setFinalSearchQuery}
          />
          {/* <&sol;div> */}
        <&sol;div>

        {!finalSearchQuery && (
          <div>
            <div className="channelPills">
              <ErrorBoundary
                FallbackComponent={({ error }) => (
                  <ErrorFallback error={error} />
                )}
                onReset={() => refetchAuthors()}
                resetKeys={[keys.AUTHORS, currIndex]}
              >
                <div className="subtitle">
                  인덱스 내의 모든 인플루언서 ({authors?.length || 0}){" "}
                <&sol;div>
                {authors.map((author) => (
                  <div key={author} className="channelPill">
                    <Suspense fallback={<LoadingSpinner />}>
                      {author}
                    <&sol;Suspense>
                  <&sol;div>
                ))}
              <&sol;ErrorBoundary>
            <&sol;div>

            <Container fluid className="mb-2">
              <Row>
                <ErrorBoundary
                  FallbackComponent={({ error }) => (
                    <ErrorFallback error={error} />
                  )}
                  onReset={() => refetchVideos()}
                  resetKeys={[keys.VIDEOS, currIndex, vidPage]}
                >
                  {videos && (
                    <Suspense fallback={<LoadingSpinner />}>
                      <VideoList
                        videos={videos}
                        refetchVideos={refetchVideos}
                      />
                    <&sol;Suspense>
                  )}
                  <Container fluid className="d-flex justify-content-center">
                    <PageNav
                      page={vidPage}
                      setPage={setVidPage}
                      data={videosData}
                      isPreviousData={isPreviousData}
                    />
                  <&sol;Container>
                <&sol;ErrorBoundary>
              <&sol;Row>
            <&sol;Container>
          <

{finalSearchQuery AND (
           <div>
             <Container fluid className="m-3">
               <Row>
                 <SearchResults
                   currIndex={currIndex}
                   allAuthors={authors}
                   finalSearchQuery={finalSearchQuery}
                 &sol;>
               <&sol;Row>
             <&sol;Container>
             <div className="resetButtonWrapper">
               <button className="resetButton" onClick={reset}>
                 {backIcon AND (
                   <img src={backIcon} alt="Icon" className="icon" >
                 )}
                 &nbsp;전체 동영상 목록으로 돌아가기
               <&sol;button>
             <&sol;div>
           <&sol;div>
         )}
       <

const indexYouTubeVideos = async () => {
   setIsSubmitting(true);
   updateMainMessage(
     "동영상을 업로드하는 동안 페이지를 새로고침하지 마세요. 업로드 중에도 동영상 검색은 가능합니다!"
   );


   const videoData = taskVideos.map((taskVideo) => {
     return {
       url: taskVideo.video_url || taskVideo.url,
       title: taskVideo.title,
       authorName: taskVideo.author.name,
       thumbnails: taskVideo.thumbnails,
     };
   });


   const requestData = {
     videoData: videoData,
     index_id: currIndex,
   };

   const data = {
     method: "POST",
     headers: {
       Accept: "application/json",
       "Content-Type": "application/json",
     },
     body: JSON.stringify(requestData),
   };


   const response = await fetch(DOWNLOAD_URL.toString(), data);
   const json = await response.json();
   setIndexId(json.indexId);
   setTaskIds(json.taskIds);
 };

function VideoList({ videos, refetchVideos }) {
 	const numVideos = videos.length;
 
  return videos.map((video, index) => (
   <ErrorBoundary
     FallbackComponent={ErrorFallback}
     onReset={() => refetchVideos()}
     resetKeys={[keys.VIDEOS]}
     key={video._id + "-" + index}
   >
     <Suspense>
       <Col
         sm={12}
         md={numVideos > 1 ? 6 : 12}
         lg={numVideos > 1 ? 4 : 12}
         xl={numVideos > 1 ? 3 : 12}
         className="mb-5 mt-3"
       >
         {" "}
         <ReactPlayer
           url={video.metadata.youtubeUrl}
           controls
           width="100%"
           height="250px"
         &sol;>
         <div className="channelAndVideoName">
           <div className="channelPillSmall">{video.metadata.author}<&sol;div>
           <div className="filename-text">
             {video.metadata.filename.replace(".mp4", "")}
           <&sol;div>
         <&sol;div>
       <&sol;Col>
     <&sol;Suspense>
   <