동영상에서 손쉽게 소셜 미디어 콘텐츠 제작하기

u201c원 소스 멀티 유즈(one source, multi-use)u201d라는 개념에 대해 잘 알고 계시나요? 콘텐츠 크리에이터와 인플루언서에게 이는 다양한 플랫폼 전반에서 콘텐츠를 재가공하여 관객 참여를 극대화하는 것을 의미합니다.

u201c내 비디오용 소셜 포스트 생성하기(Generate Social Posts for your Video)u201d라는 이 툴은, 비디오 콘텐츠 크리에이터가 비디오를 이모지가 가득한 재미있는 인스타그램 게시물이든 상세한 블로그 글이든 상관없이 텍스트 형식으로 변환할 수 있도록 특별히 설계되었습니다. 

uc791ub3d9 ubc29uc2dduc740 uac04ub2e8ud569ub2c8ub2e4. uc561ub9acucf00uc774uc158uc5d0 ube44ub524uc624ub97c uc5c5ub85cub4dcud558uace0 uac8cuc2dcubb3cuc744 uc62cub9acuace0 uc2f6uc740 uc18cuc15c ubbf8ub524uc5b4 ud50cub7abud3bc uc913 ud558ub098ub97c uc120ud0ddud558uae30ub9cc ud558uba74 ub429ub2c8ub2e4. ub610ub294 u201cuc694uc51dub0b4uc6a9uc744 uae00uba38ub9ac uae30ud638ub85c uc791uc131ud574 uc918u201duc640 uac19uc774 uc6d0ud55cub294 ud14duc2a4ud2b8 ud615uc2dduc758 uc694uad6c uc0acud56duc774ub098 ud504ub86cud504ud2b8ub97c uc9c1uc811 ucee4uc2a4ud130ub9c8uc774uc9d5ud560 uc218ub3c4 uc788uc2b5ub2c8ub2e4. ud06cub9ad uba87 ubc88uc73cub85c ubcc0ud658ub420 uc900ube44uac00 ub41c ucf58ud150uce20ub97c ubc14ub85c ub9ccub098ubcf4uc2e4 uc218 uc788uc2b5ub2c8ub2e4. 

uc774uc81c, uc571uc744 uad6cucd95ud558ub294 ub2e8uacc4ubcc4 uacfcuc815uc744 uc790uc138ud788 uc0b4ud3bcubcf4uaca0uc2b5ub2c8ub2e4!

uc0acuc804 uc694uad6c uc0acud56d

• Twelve Labs API ud0a4uac00 ud544uc694ud569ub2c8ub2e4. API ud0a4uac00 uc5c6uc73cuc2e0 uacbduc6b0, Twelve Labs Playgroundub97c ubc29ubb38ud558uc5ec uac00uc785ud558uace0 API ud0a4ub97c uc0dduc131ud558uc138uc694. 

• uc774 uc571uc744 uc124uce58ud558uae30 uc744 ud55c ubaa8ub4e0 ud30cuc77cuc774 ub2f4uae34 uc800uc7a5uc18cub294 Githubuc5d0uc11c ud655uc778ud558uc2e8 uc218 uc788uc2b5ub2c8ub2e4.

• (uad8cuc7a5 uc0acud56d) JavaScript, TypeScript, Node, React ubc0f React Queryuc5d0 ub300ud55c uae30ubcf8uc801uc778 uc9c0uc2dduc774 uc788uc73cuc2dcuba74 ub3c4uc6c0uc774 ub429ub2c8ub2e4.

uc571uc758 uad6cuc870

uc571uc740 GenerateSocialPosts, VideoFileUploadForm, Video, InputForm, Resultuc758 ub2e4uc12f uac00uc9c0 uc8fcuc694 ucef4ud3ecub10cud2b8ub85c uad6cuc131ub418uc5b4 uc788uc2b5ub2c8ub2e4. 

• GenerateSocialPosts: ub2e4ub978 ucef4ud3ecub10cud2b8ub4e4uc758 ubd80ubaa8 ucee8ud14cuc774ub108 uc5edud560uc744 ud569ub2c8ub2e4. ud558uc744 ucef4ud3ecub10cud2b8ub4e4uacfc uacf5uc720ub418ub294 uc8fcuc694 uc0c1ud0dc(state)ub4e4uc74c uad00ub9acud569ub2c8ub2e4.

• VideoUrlUploadForm: ube44ub524uc624 ud30cuc77cuc744 uc5c5ub85cub4dcud558uace0 TwelveLabs APIub97c uc0acuc6a9ud558uc5ec uc778ub371uc2f1ud558ub294 uac04ub2e8ud55c ud3fcuc744 uc81cuacf5ud569ub2c8ub2e4. uc778ub371uc2f1 uc911uc778 ube44ub524uc624ub97c ud45cuc2dcud558uace0, uc778ub371uc2f1 ud504ub85cuc138uc2a4uac00 uc644ub8ccub420 ub54cuae4cuc9c0 uc2e4uc2dcuac04uc73cub85c uc0c1ud0dc uc5c5ub370uc774ud2b8ub97c uc81cuacf5ud569ub2c8ub2e4.

• Video: uc8fcuc5b4uc9c4 URLuc744 uae30ubc18uc73cub85c ube44ub524uc624ub97c ud654uba74uc5d0 ud45cuc2dcud569ub2c8ub2e4. uc560ud50cub9acucf00uc774uc158 uc804uccb4uc5d0uc11c ub2e4uc591ud55c ucef4ud3ecub10cud2b8 ub0b4uc5d0uc11c ud65cuc6a9ub429ub2c8ub2e4.

• InputForm: uc8fcuc694 uc18cuc15c ubbf8ub524uc5b4 ud50cub7abud3bcuc744 ub0aaud0c0ub0bcub294 ud504ub9acuc14b ub7bcub524uc624 ubc14ud2bcuacfc, uc0acuc6a9uc790uac00 ube44ub524uc624uc5d0uc11c uc6d0ud55cub294 ud14duc2a4ud2b8 ucf58ud150uce20uc758 uc694uad6c uc0acud56duc744 uc0acuc6a9uc790 uc815uc758ud560 uc218 uc788ub294 ud14duc2a4ud2b8 uc5d0uc5b4ub9acuc5b4ub85c uad6cuc131ub428ub2c8ub2e4. ‍

• Result: TwelveLabuc758 u2018/generateu2019 APIub97c ud65cuc6a9ud558uc5ec, uc0acuc6a9uc790uac00 uc120ud0ddud55c uc18cuc15c ud50cub7abud3bc ub610ub294 uc785ub825ud55c ub0b4uc6a9uc744 ubc14ud0d5uc73cub85c uc0dduc131ub41c ud14duc2a4ud2b8 ucf58ud150uce20ub97c ubcf4uc5ecuc90dub2c8ub2e4.

uc571uc5d0ub294 API ud638ucd9cuacfc uad00ub828ub41c ubaa8ub4e0 ucf54ub4dcub97c uc800uc7a5ud558ub294 uc11cubc84(server)uc640 uc0c1ud0dc, uce90uc2dc, ub370uc774ud130 ud398uce6duc744 uad00ub9acud558uae30 uc744 ud55c uc0acuc6a9uc790 uc815uc758 React Query ud6dcuc778 apiHooks.tsxub3c4 ud3ecud568ub418uc5b4 uc785ub825ub2c8ub2e4.

uc774uc81c uc774ub7ecud55c ucef4ud3ecub10cud2b8ub4e4uc774 Twelve Labs APIuc640 uc5b4ub5bbuac8c ud568uaed8 uc791ub3d9ud558ub294uc9c0 uc0b4ud3bcubcf4uaca0uc2b5ub2c8ub2e4. 

u200d

Twelve Labs APIuc640 uc571uc758 uc791ub3d9 ubc29uc2dd

1 - uc778ub371uc2a4uc758 uac00uc7a5 uc55cuadfc ube44ub524uc624 ud45cuc2dc

uc774 uc571uc740 ud558ub098uc758 ube44ub524uc624, uc989 uc778ub371uc2a4uc5d0 uac00uc7a5 uc55cuadfcuc5d0 uc5c5ub85cub4dcub41c ube44ub524uc624ub9ccuc744 ub300uc0c1uc73cub85c uc791ub3d9ud569ub2c8ub2e4. ub530ub77cuc11c uc571uc774 ub9c8uc6b4ud2b8ub420 ub54c uae30ubcf8uc801uc73cub85c uc8fcuc5b4uc9c4 uc778ub371uc2a4uc758 uac00uc7a5 uc55cuadfc ube44ub524uc624ub97c ubcf4uc5ecuc90dub2c8ub2e4. uc791ub3d9 ud504ub85cuc138uc2a4ub294 ub2e4uc74cuacfc uac1buc2b5ub2c8ub2e4.

1. App.tsxuc5d0uc11c uc8fcuc5b4uc9c4 uc778ub371uc2a4uc758 ubaa8ub4e0 ube44ub524uc624 uac00uc838uc624uae30 (GET Videos)

2. uc751ub2b5uc5d0uc11c uccab ubc88uc9f8 ube44ub524uc624uc758 idub97c uc0acucd9cud558uc5ec GenerateSocialPosts.tsxub85c uc804ub2ecud558uae30

3. ube44ub524uc624 idub97c uc0acuc6a9ud558uc5ec ube44ub524uc624uc758 uc0acuc138 uc815ubcf4ub97c uac00uc838uc624uace0, ube44ub524uc624 urluc744 uc0acucd9cud558uc5ec Video.tsxub85c uc804ub2ecud558uae30 (GET Video)

ub530ub77cuc11c, ube44ub524uc624ub97c uac00uc838uc624uace0 ud398uc774uc9c0uc5d0 uccab ube44ub524uc624ub97c ubcf4uc5ecuc8fcub225 uc774 ud750ub984uc5d0uc11c Twelve Labs APIuc5d0 ub450 ubc88uc758 GET uc694uccaduc744 ubcf4ub0bdub2c8ub2e4. uac01 ub2e8uacc4ub97c uc790uc138ud788 uc0b4ud3bcubcf4uaca0uc2b5ub2c8ub2e4.

u200d

1.1 - App.tsxuc5d0uc11c uc8fcuc5b4uc9c4 uc778ub371uc2a4uc758 ubaa8ub4e0 ube44ub524uc624 uac00uc838uc624uae30 

uc571 ub0b4ubd80uc5d0uc11cub294 uc11cubc84uc5d0 uc694uccaduc744 ubcf4ub0b4ub294 React Query ud6dc useGetVideosub97c ud638ucd9cud558uc5ec ube44ub524uc624ub97c ubc18ud658ud569ub2c8ub2e4. uadf8ub7ecuba74 uc11cubc84ub294 Twelve Labs APIuc5d0 GET uc694uccaduc744 ubcf4ub0b4uc5b4 uc778ub371uc2a4uc758 ubaa8ub4e0 ube44ub524uc624ub97c uac00uc838uc635ub2c8ub2e4. (ud76cuc790uc138ud55c ub0b4uc6a9uc740 API ubb38uc11c ucc38uc870 - GET Videos)

u200dServer.js (line 53 - 73)

/** Get videos */

app.get("/indexes/:indexId/videos", async (request, response, next) => {
 const params = {
   page_limit: request.query.page_limit,
 };


 try {
   const options = {
     method: "GET",
     url: `${API_BASE_URL}/indexes/${request.params.indexId}/videos`,
     headers: { ...HEADERS },
     data: { params },
   };
   const apiResponse = await axios.request(options);
   response.tsxon(apiResponse.data);
 } catch (error) {
   const status = error.response?.status || 500;
   const message = error.response?.data?.message || "Error Getting Videos";
   return next({ status, message });
 }
});

ubc18ud658ub41c ub370uc774ud130(videos)ub294 ubc14ub85c uc544ub798uc640 uac19uc740 ud615uc2dduc785ub2c8ub2e4.

{
	"data": [
		{
			"_id": "64eadb7e37db8fa679cb47e2",
			"created_at": "2024-03-08T09:34:06Z",
			"metadata": {
				"duration": 213.72,
				"engine_ids": [
					"pegasus1",
				],
				"filename": "myFile.mp4",
				"fps": 25,
				"height": 720,
				"size": 25014061,
				"width": 1280
			}
		},
		{ 2nd video },
		{ 3rd video }, 
		…
}

u200d

1.2 - uc751ub2b5uc5d0uc11c uccab ubc88uc9f8 ube44ub524uc624uc758 idub97c uc0acucd9cud558uc5ec GenerateSocialPosts.tsxub85c uc804ub2ecud558uae30

ubc18ud658ub41c ube44ub524uc624ub4e4uc744 ubc14ud0d5uc73cub85c, uccab ubc88uc9f8 ube44ub524uc624uc758 idub97c GenerateSocialPosts.tsx ucef4ud3ecub10cud2b8ub85c uc804ub2ecud569ub2c8ub2e4.

u200dApp.tsx (line 39 - 43)

           <GenerateSocialPosts
             index={apiConfig.INDEX_ID}
             videoId={videos.data[0]?._id || null} //passing down the id
             refetchVideos={refetchVideos}
           />

1.3 - ube44ub524uc624 idub97c uc0acuc6a9ud558uc5ec ube44ub524uc624uc758 uc0acuc138 uc815ubcf4ub97c uac00uc838uc624uace0, ube44ub524uc624 urluc744 uc0acucd9cud558uc5ec Video.tsxub85c uc804ub2ecud558uae30

ube44ub524uc624 ubaa9ub85duc744 uac00uc838uc624ub294 uc774uc804 ub2e8uacc4uc640 uc720uc0acud558uac8c, ube44ub524uc624uc758 uc0acuc138 uc815ubcf4ub97c uac00uc838uc624uae30 uc744 ud574 React Query ud6dc useGetVideoub97c uc0acuc6a9ud558uc5ec uc11cubc84uc5d0 uc694uccaduc744 ubcf4ub0bdub2c8ub2e4. uadf8ub7ecuba74 uc11cubc84ub294 Twelve Labs APIuc5d0 GET uc694uccaduc744 ubcf4ub0b4uc5b4 ud2b9uc815 ube44ub524uc624uc758 uc0acuc138 uc815ubcf4ub97c uac00uc838uc635ub2c8ub2e4. (ud76cuc790uc138ud55c ub0b4uc6a9uc740 API ubb38uc11c ucc38uc870 - GET Video)

u200dServer.js (line 75 - 96)

/** Get a video of an index */

app.get(
 "/indexes/:indexId/videos/:videoId",
 async (request, response, next) => {
   const indexId = request.params.indexId;
   const videoId = request.params.videoId;


   try {
     const options = {
       method: "GET",
       url: `${API_BASE_URL}/indexes/${indexId}/videos/${videoId}`,
       headers: { ...HEADERS },
     };
     const apiResponse = await axios.request(options);
     response.json(apiResponse.data);
   } catch (error) {
     const status = error.response?.status || 500;
     const message = error.response?.data?.message || "Error Getting a Video";
     return next({ status, message });
   }
 }
);

uc774ub7ecud55c uacfcuc815uc744 uac70uce58uba74 ube44ub524uc624uc758 URLuc744 ud3ecud568ud55c ube44ub524uc624 uc0acuc138 uc815ubcf4uac00 ubc18ud658ub429ub2c8ub2e4. uc774uc804uc758 GET Videos uc694uccaduc5d0uc11cub294 ube44ub524uc624 URLuc744 ubc14ub85c uac00uc838uc62c uc218 uc5c6uc5c8ub2e4ub294 uc810uc744 ub208uce58uce60uc168uc744 uac83uc785ub2c8ub2e4. uc774uac83uc774 ubc30ub85c uc5ecuae30uc11c GET Video uc694uccaduc744 ucd94uac00ub85c uc2e4ud589ud558uc5ec ub354 uae4auc774 ud0d0uc0c9ud558uace0 ube44ub524uc624 URLuc744 uc0acucd9cud558ub294 uc774uc720uc785ub2c8ub2e4.

{
	"_id": "64eadb7e37db8fa679cb47e2",
	"created_at": "2024-03-08T09:34:06Z",
	"indexed_at": "2024-03-08T09:39:14Z",
	"metadata": {
		"duration": 213.72,
		"engine_ids": [
			"pegasus1",
		],
		"filename": "myFile.mp4",
		"fps": 25,
		"height": 720,
		"size": 25014061,
		"video_title": "myFile.mp4",
		"width": 1280
	},
	"hls": {
		"video_url": "https://deuqpmn4rs7j5.cloudfront.net/…", //here!
		"thumbnail_urls": [
			"https://deuqpmn4rs7j5.cloudfront.net/…"
		],
		"status": "COMPLETE",
		"updated_at": "2024-03-08T09:35:21.813Z"
	}
}

ubc18ud658ub41c ub370uc774ud130(video)ub97c ubc14ud0d5uc73cub85c, ud574ub2f9 URLuc744 React Playeruac00 ub80cub354ub9c1ub418ub294 Video ucef4ud3ecub10cud2b8ub85c uc804ub2ecud569ub2c8ub2e4. 

GenerateSocialPosts.tsx (line 110 - 116)

 {video && (
             <Video
               url={video.hls?.video_url} // passing down the url
               width={"381px"}
               height={"214px"}

u200d

2 - ube44ub524uc624 ud30cuc77cub85c ube44ub524uc624 uc5c5ub85cub4dc/uc778ub371uc2f1ud558uae30

uc774 uc571uc5d0uc11c uc0acuc6a9uc790ub294 ub85cuceec uae30uae30uc5d0uc11c ube44ub524uc624 ud30cuc77cuc744 uc120ud0ddud558uc5ec ube44ub524uc624ub97c uc5c5ub85cub4dcud558uace0 uc778ub371uc2f1ud560 uc218 uc788uc2b5ub2c8ub2e4. uc6b0ub9acub294 uc774 uc561ub9acucf00uc774uc158uc758 uc8fcuc694 uc0acuc6a9uc790uac00 ub85cuceec uae30uae30uc5d0 ube44ub524uc624ub97c uc900ube44ud574 ub454 ube44ub524uc624 ucf58ud150uce20 ud06cub9acuc5d0uc774ud130ub77cuace0 uac00uc815ud569ub2c8ub2e4. 

ube44ub524uc624 uc778ub371uc2f1 uc694uccad(uc6b0ub9acub294 uc774ub97c u2018ud0dcuc2a4ud06c(task)u2019ub77cuace0 ubd80ub9bdub2c8ub2e4)uc744 uc81cucd9cud558uba74, uc778ub371uc2f1 ud0dcuc2a4ud06cuc758 uc9c4ud589 uc0c1ud669uc744 ubc1buc744 uc218 uc788uc2b5ub2c8ub2e4. ub610ud55c uc778ub371uc2f1 ud504ub85cuc138uc2a4 uc911uc5d0ub3c4 ube44ub524uc624ub97c ubcf4uc77c uc218 uc788ub3c4ub85d ud558uc5ec, uc0acuc6a9uc790uac00 uc778ub371uc2f1uc774 uc9c4ud589ub418ub294 ub3d9uc548 ube44ub524uc624ub97c ud655uc778ud558uace0 uc2dcuccadud560 uc218 uc788ub3c4ub85d ud5e8uc2b5ub2c8ub2e4. ube44ub524uc624ub294 uc778ub371uc2f1 ud504ub85cuc138uc2a4uc758 uc2dcuc791ubdd5ud130 ubc14ub85c uc0acuc6a9ud560 uc218 uc788ub294 uac83uc740 uc544ub2cbuba70, uc778ub371uc2f1 ud504ub85cuc138uc2a4uc758 uc911uac04 uc998ubd80ud130 ube44ub524uc624 URLuc744 uc0acuc6a9ud560 uc218 uc788uac8c ub429ub2c8ub2e4. 

1. VideoUrlUploadForm.tsxuc5d0uc11c ube44ub524uc624 ud30cuc77cub85c ube44ub524uc624 uc778ub371uc2f1 uc0dduc131ud558uae30  (POST Task)

2. Task.tsxuc5d0uc11c uc778ub371uc2f1 ud0dcuc2a4ud06cuc758 uc9c4ud589 uc0c1ud669uc744 uc218uc2e0ud558uace0 ud45cuc2dcud558uae30  (GET Task)

uac01 ub2e8uacc4ub97c ud558ub098uc529 uc0b4ud3bcubcf4uaca0uc2b5ub2c8ub2e4.

u200d

2.1 - VideoUrlUploadForm.tsxuc5d0uc11c ube44ub524uc624 ud30cuc77cub85c ube44ub524uc624 uc778ub371uc2f1 ud0dcuc2a4ud06c uc0dduc131ud558uae30

uc0acuc6a9uc790uac00 ub85cuceec uae30uae30uc5d0uc11c ube44ub524uc624 ud30cuc77cuc744 uc120ud0ddud558uace0 videoFileUploadFormuc744 uc81cucd9cud558uba74, ube44ub524uc624 uc778ub371uc2f1 ud504ub85cuc138uc2a4uac00 uc2dcuc791ub429ub2c8ub2e4. indexYouTubeVideoub294 API uc694uccaduc744 ubcf4ub0b4ub294 ub320 ud544uc694ud55c ub370uc774ud130(uc608: uc5b8uc5b4, uc778ub371uc2a4 id, ube44ub524uc624 ud30cuc77c)ub97c ud3fc ud615ud0dcub85c ubaa8uc544 uc11cubc84uc5d0 POST uc694uccaduc744 ubcf4ub0bdub2c8ub2e4. uadf8ub7ecuba74 uc11cubc84ub294 Twelve Labs APIuc758 u2018/tasksu2019 uc5d4ub4dcud3ecuc778ud2b8ub85c POST uc694uccaduc744 ubcf4ub0b4uac8c ub429ub2c8ub2e4.  (ud76cuc790uc138ud55c ub0b4uc6a9uc740 API ubb38uc11c ucc38uc870 - POST Task)

u200dserver.js (line 119 - 158)

/** Index a video and return a task ID */

app.post(
 "/index",
 upload.single("video_file"),
 async (request, response, next) => {
   const formData = new FormData();


   // Append data from request.body
   Object.entries(request.body).forEach(([key, value]) => {
     formData.append(key, value);
   });


   const blob = new Blob([request.file.buffer], {
     type: request.file.mimetype,
   });


   formData.append("video_file", blob, request.file.originalname);


   const options = {
     method: "POST",
     url: `${API_BASE_URL}/tasks`,
     headers: {
       "x-api-key": TWELVE_LABS_API_KEY,
       accept: "application/json",
       "Content-Type":
         "multipart/form-data; boundary=---011000010111000001101001",
     },
     data: formData,
   };
   try {
     const apiResponse = await axios.request(options);
     response.json(apiResponse.data);
   } catch (error) {
     const status = error.response?.status || 500;
     const message =
       error.response?.data?.message || "Error indexing a Video";
     return next({ status, message });
   }
 }
);

ubc29uae08 uc0dduc131ub41c ube44ub524uc624 ud0dcuc2a4ud06cuc758 idub97c ubc18ud658ud569ub2c8ub2e4. 

{
	"_id": "65e9f732bb29f13bdd6f305a"
}

u200d

2.2 - Task.tsxuc5d0uc11c uc778ub371uc2f1 ud0dcuc2a4ud06cuc758 uc9c4ud589 uc0c1ud669uc744 uc218uc2e0ud558uace0 ud45cuc2dcud558uae30

uc774uc804 ub2e8uacc4uc5d0uc11c ubc1buc740 ud0dcuc2a4ud06c idub97c ud65cuc6a9ud558uc5ec ud0dcuc2a4ud06cuc758 uc0acuc138 uc815ubcf4ub97c uac00uc838uc6a4uace0, uc0acuc6a9uc790uc5d0uac8c ud0dcuc2a4ud06c uc0c1ud0dcub97c uc9c0uc18duc801uc73cub85c uc5c5ub83cuc774ud2b8ud574 uc90dub2c8ub2e4. ub530ub77cuc11c, ud0dcuc2a4ud06c iduac00 uc788uc744 ub54c VideoFileUploadForm ub0b4ubd80uc5d0 Task ucef4ud3ecub10cud2b8uac00 ub80cub354ub9c1ub418ub3c4ub85d uc124uc815ud5e8uc2b5ub2c8ub2e4.

u200dVideoFileUploadForm.tsx (line 153)

{taskId && (
               <Task
                 taskId={taskId}
                 refetchVideos={refetchVideos}

Task ucef4ud3ecub10cud2b8 ub0b4ubd80uc5d0uc11cub294 uc11cubc84uc5d0 GET uc694uccaduc744 ubcf4ub0b4ub294 useGetTask React Query ud6dcuc744 uc0acuc6a9ud558uc5ec ub370uc774ud130ub97c uc218uc2e0ud569ub2c8ub2e4. uadf8ub7ecuba74 uc11cubc84ub294 uc544ub798uc640 uac1buc774 Twelve Labs APIuc5d0 GET uc694uccaduc744 ubcf4ub0bdub2c8ub2e4. (ud76cuc790uc138ud55c ub0b4uc6a9uc740 API ubb38uc11c ucc38uc870 - GET Task)

server.js (line 160 - 177)

/** Check the status of a specific indexing task */

app.get("/tasks/:taskId", async (request, response, next) => {
 const taskId = request.params.taskId;


 try {
   const options = {
     method: "GET",
     url: `${API_BASE_URL}/tasks/${taskId}`,
     headers: { ...HEADERS },
   };
   const apiResponse = await axios.request(options);
   response.tsxon(apiResponse.data);
 } catch (error) {
   const status = error.response?.status || 500;
   const message = error.response?.data?.message || "Error getting a task";
   return next({ status, message });
 }
});

uc774ub807uac8c ud558uba74 uc544ub798uc640 uac1buc774 ud0dcuc2a4ud06c uc0acuc138 uc815ubcf4ub97c ubc18ud658ud569ub2c8ub2e4.

{
	"_id": "65e9f732bb29f13bdd6f305a",
	"index_id": "65e9f6d6bb29f13bdd6f3059",
	"video_id": "65e9f73248db9fa679cb47a2",
	"status": "indexing",
	"metadata": {
		"filename": "fileName.mp4",
		"duration": 327.326988,
		"width": 1920,
		"height": 1080
	},
	"created_at": "2024-03-07T17:19:46.277Z",
	"updated_at": "2024-03-07T17:27:27.135Z",
	"estimated_time": "2024-03-07T17:25:59.621Z",
	"type": "index_task_info",
	"hls": {
		"video_url": "...",
		"thumbnail_urls": [
			"..."
		],
		"status": "COMPLETE",
		"updated_at": "2024-03-07T17:21:23.921Z"
	}
}

u201cstatusu201duac00 u201creadyu201duac00 ub420 ub54cuae4cuc9c0는 useGetTask ud6dcuc774 5,000msub9c8ub2e4 ub370uc774ud130ub97c ub2e4uc2dc uac00uc838uc640uc11c uc0acuc6a9uc790uac00 ud0dcuc2a4ud06c uc9c4ud589 uc0c1ud669uc744 uc2e4uc2dcuac04uc73cub85c ubcfc uc218 uc788ub3c4ub85d ud569ub2c8ub2e4. uc544ub798uc5d0uc11c uc81cuac00 useQueryuc758 refetchInterval uc18duc131uc744 uc5b4ub5bbuac8c ud65cuc6a9ud5c8ub294uc9c0 ud655uc778ud574 ubcf4uc138uc694. 

apiHooks.tsx (line 73 - 94)

export function useGetTask(taskId: string) {
 return useQuery<Task, Error, Task, [string, string]>({
   queryKey: [keys.TASK, taskId],
   queryFn: async (): Promise<Task> => {
     try {
       const response = await apiConfig.SERVER.get(`${apiConfig.TASKS_URL}/${taskId}`);
       const respData: Task = response.data;
       return respData;
     } catch (error) {
       console.error("Error fetching task:", error);
       throw error;
     }
   },
   refetchInterval: (query) => {
     const data = query.state.data;
     return data && (data.status === "ready" || data.status === "failed")
       ? false
       : 5000;
   },
   refetchIntervalInBackground: true,
 });
}

u200d

3 - uc0acuc6a9uc790 uc785ub825 uc218uc2e0 ubc0f uacb0uacfc uc0dduc131/ud45cuc2dc

uc774uc81c uac00uc7a5 ud575uc2ecuc774uc790 ud765ubbf8ub85cuc6b4 ubd80ubd84인 비디오로부터 텍스트를 생성하는 단계입니다! 사용자의 입력을 받은 후 Twelve Labs API의 ‘/analyze’ 엔드포인트를 사용하여 자유 형식의 텍스트를 생성합니다.

1. InputForm.tsxuc5d0uc11c uc8fcuc694 uc18cuc15c ubbf8ub524uc5b4 ud50cub7abud3bcuc744 ub0aaud0c0ub0bcub294 ud504ub9acuc14b ub7bcub524uc624 ubc14ud2bc ub610ub294 ud14duc2a4ud2b8 uc5d0uc5b4ub9acuc5b4 ud3fcuc744 ud1b5ud574 uc0acuc6a9uc790uc758 uc785ub825uc744 ubc1buc2b5ub2c8ub2e4.

2. uc0acuc6a9uc790uc758 uc785ub825uc744 ubc14ud0d5uc73cub85c Result.tsxuc5d0uc11c u2018analyzeu2019 API ud638ucd9cuc744 uc2e4ud589ud569ub2c8ub2e4. (POST Open-ended texts)

3. Result.tsxuc5d0uc11c uacb0uacfcub97c ubcf4uc5ecuc90dub2c8ub2e4.

uac01 ub2e8uacc4ub97c uc790uc138ud788 uc0b4ud3bcubcf4uaca0uc2b5ub2c8ub2e4.

u200d

3.1 - InputForm.tsxuc5d0uc11c uc8fcuc694 uc18cuc15c ubbf8ub524uc5b4 ud50cub7abud3bcuc744 ub0aaud0c0ub0bcub294 ud504ub9acuc14b ub7bcub524uc624 ubc14ud2bc ub610ub294 ud14duc2a4ud2b8 uc5d0uc5b4ub9acuc5b4 ud3fcuc744 ud1b5ud574 uc0acuc6a9uc790uc758 uc785ub825uc744 ubc1buc2b5ub2c8ub2e4.

InputFormuc740 5uac00uc9c0 ub7bcub524uc624 ubc14ud2bcuc73cub85c uad6cuc131ub41c uac04ub2e8ud55c ud3fcuc785ub2c8ub2e4. ub124 uac1cub294 uac01uac01 uc778uc2a4ud0c0uadf8ub7a8, ud398uc774uc2a4ubd81, X, ube14ub85cuadf8ub97c ub0aaud0c0ub0b4uace0, ub9c8uc9c0ub9c9 ud558ub098ub294 uc0acuc6a9uc790uac00 ube44ub524uc624uc5d0uc11c uc6d0ud55cub294 ud14duc2a4ud2b8uc758 uc885ub958ub97c uc9c1uc811 uc124uc815ud560 uc218 uc788ub294 u2018기타(Others)u2019ub97c ub0aaud0c0ub0b5ub2c8ub2e4.

uc0acuc6a9uc790uac00 ud504ub9acuc14b uc18cuc15c ud50cub7abud3bcuc744 uc120ud0ddud558uba74, ud574ub2f9 ud50cub7abud3bcuc5d0 ub3c0ud574 ub0b4uc7a5ub41c ud504ub86cud504ud2b8uac00 promptub85c uc124uc815ub4ebdub2c8ub2e4. uc774ub294 ub098uc911uc5d0 result.tsxuc5d0uc11c generate APIub97c ud638ucd9cud558ub294 ub320 uc0acuc6a9ub429ub2c8ub2e4. uc0acuc6a9uc790uac00 u2018uae30ud0c0(Others)u2019ub97c uc120ud0ddud558uba74 uc0acuc6a9uc790uac00 uc785ub825ud55c ub0b4uc6a9uc774 promptub85c uc124uc815ub4ebdub2c8ub2e4. 

u200dInputForm.tsx (line 76 - 107)

async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
   event.preventDefault();
   let promptValue = "";
   let platformValue = "";


   if (instagramRef.current?.checked) {
     promptValue = "write a Instagram post with emojis, 100 words or less. Do not provide an explanation. Do not provide a summary.";
     platformValue = "Instagram";
   } else if (facebookRef.current?.checked) {
     promptValue = "write a Facebook post with emojis, 150 words or less. Do not provide an explanation. Do not provide a summary.";
     platformValue = "Facebook";
   } else if (xRef.current?.checked) {
     promptValue = "write a X (formerly Twitter) post with emojis, 50 words or less. Do not provide an explanation. Do not provide a summary.";
     platformValue = "X";
   } else if (blogRef.current?.checked) {
     promptValue = "write a blog post with details. Divide sections with subtitles. Do not provide an explanation. Do not provide a summary.";
     platformValue = "Blog";
   } else if (textRadioRef.current?.checked) {
     const inputValue = textAreaRef.current?.value.trim();
     if (inputValue?.length && inputValue?.length > 0) {
       promptValue = inputValue;
       platformValue = `"${inputValue}"`;
     } else {
       setShowCheckWarning(true)

ud83dudca1 ud504ub86cud504ud2b8 uc5d4uc9c0ub2c8uc5b4ub9c1 ud301

uc778uc2a4ud0c0uadf8ub7a8, ud398uc2aceubd81 ub4f1uc744 uc704ud574 uc81cuac00 uad6fuc131ud55c ub0b4uc7a5 ud504ub86cud504ud2b8ub97c uc0b4ud3bcubcf4uc138uc694. Twelve Labs APIuc5d0 ub9deucda4ud615uc73cub85c uc81cuc791ub41c ud504ub86cud504ud2b8 uc5d4uc9c0ub2c8uc5b4ub9c1uc5d0 ub300ud55c uc774 uac00uc774ub4dcub97c ud655uc778ud574 ubcf4uc138uc694!

u200d

3.2 - uc0acuc6a9uc790uc758 uc785ub825uc744 ubc14ud0d5uc73cub85c Result.tsxuc5d0uc11c u2018/analyzeu2019 API ud638ucd9cuc744 uc2e4ud589ud569ub2c8ub2e4.

ud3fcuc774 uc81cucd9cub418uace0 ube44ub524uc624 iduc640 promptuac00 uc124uc815ub420 ub54c, Result.tsxuc5d0uc11c useAnalyze ud6dcuc774 ud638ucd9cub429ub2c8ub2e4. uadf8ub7ecuba74 ud574ub2f9 ud6dcuc740 uc11cubc84uc5d0 uc694uccaduc744 ubcf4ub0b4uace0, uc11cubc84uc5d0uc11c Twelve Labs APIub85cuc758 API uc694uccaduc774 uc2e4ud589ub429ub2c8ub2e4. (ud76cuc790uc138ud55c ub0b4uc6a9uc740 API ubb38uc11c ucc38uc870 - POST Open-ended analysis)

server.tsx (line 98 - 116)

/** Generate open-ended text of a video */
app.post("/videos/:videoId/analyze", async (request, response, next) => {
 const videoId = request.params.videoId;
 let prompt = request.body.data;
 try {
   const options = {
     method: "POST",
     url: `${API_BASE_URL}/analyze`,
     headers: { ...HEADERS, accept: "application/json" },
     data: { ...prompt, video_id: videoId, temperature: 0.3, stream: false },
   };
   const apiResponse = await axios.request(options);
   response.json(apiResponse.data);
 } catch (error) {
   const status = error.response?.status || 500;
   const message = error.response?.data?.message || "Error Generating Text";
   return next({ status, message });
 }
});

uc0acuc6a9uc790uac00 uc81cuacf5ud55c ud504ub86cud504ud2b8ub97c ubc14ud0d5uc73cub85c uc0dduc131ub41c ud14duc2a4ud2b8uc778 uc751ub2b5 u2018idu2019uc640 u2018datau2019ub85c uad6cuc131ub41c uac1duccb4ub97c ubc18ud658ud569ub2c8ub2e4. uc544ub798ub294 u2018uc778uc2a4ud0c0uadf8ub7a8u2019uc744 uc120ud0ddud5bcuc5c5ub2e4 ubc1buac8c ub418ub294 uacb0uacfcuc758 uc608uc2dcuc785ub2c8ub2e4.

	id: '2403323b-b648-48a7-8897-95258e68e8a4',
    data: "👨‍🍳 Tuna isn't just for cat food! 🐱 Today, I elevated canned tuna into 4 delicious dishes: 🍚 Spicy tuna fried rice with veggies & scrambled eggs, 🍔 tuna burger packed with flavor & topped with arugula, 🍝 tuna pasta tossed with capers & lemon zest, and 🍙 tuna mayo onigiri - a tasty snack! 🍲 Each dish is simple, nutritious, and perfect for any meal. Plus, I shared some cooking tips & tricks along the way. 🎉 Thanks for joining me, and don't forget to like & subscribe! 🙏 #TunaTransformation #CookingWithTuna #SimpleMeals #HomeCooking",
    usage: { output_tokens: 151 }

u200d

3.3 - Result.tsxuc5d0uc11c uacb0uacfcub97c ubcf4uc5ecuc90dub2c8ub2e4.

uc720ud55c ub2e8uacc4uc5d0uc11c ubc1buc740 uc751ub2b5uc744 ubc14ud0d5uc73cub85c, uacb0uacfcuac00 Result ucef4ud3ecub10cud2b8uc5d0 ud45cuc2dcub429ub2c8ub2e4. Result ucef4ud3ecub10cud2b8uc5d0uc11c uacb0uacfc ud45cuc2dcub97c uac1cuc120ud558uae30 uc704ud574, ubc18ud658ub41c ubb38uc790uc5f4uc744 uc904ubc14uafc8(u201c\nu201d)uc744 uae30uc900uc73cub85c ub098ub204uace0 uac01 uc904uc744 uac1cubcc4 <p> ud0dcuadf8 ub0b4uc5d0uc11c ub86cub354ub9c1ud560 uc218 uc788uc2b5ub2c8ub2e4.

u200dResult.tsx (line 54 - 56)

{result.data.split("\n").map((paragraph:string, index:number) => (
               <p key={index}>{paragraph}<

uacb0ub860

Twelve Labsuc758 /analyze API ub355ubd84uc5d0 ube44ub524uc624 ucf58ud150uce20uc758 uc7a0uc7acub825uc744 uc644uc804ud788 ubc1cud718ud558ub294 uac83uc774 uacfcuac70uc5b4ub290 ub54cubcf4ub2e4 uc26cuc6ccuc9c0uc14buc2b5ub2c8ub2e4! uc774 uac15ub825ud55c uae30uc220uc744 uc0acuc6a9ud558uba74 ube44ub524uc624ub97c uc778uc2a4ud0c0uadf8ub7a8, X, ubbf8ub514uc5b4, uadf8ub9acuace0 ube14ub85cuadf8 uae00uae4cuc9c0 uac01 ud50cub7abud3bcuc5d0 ub9deucda4ud615uc73cub85c uc81cuc791ub41c ub9e4ub82duc801uc778 uc18cuc15c ubbf8ub524uc5b4 uac8cuc2dcubb3cub85c uc190uc26duac8c ubcc0ud658ud560 uc218 uc788uc2b5ub2c8ub2e4! uc18cuc15c ubbf8ub524uc5b4uc5d0uc11c uad00uac1duc758 ucc38uc5ecub97c uc720ub3c4ud558uace0 uc2f6uc73cuc2dcub4e0, ub9e4ub82duc801uc778 ube14ub85cuadf8 ucf58ud150uce20ub97c ub9ccub4e4uace0 uc2f6uc73cuc2dcub4e0 그 가능성은 무궁무진합니다.

uc774 uc561ub9acucf00uc774uc158uc740 uc81cuac00 Twelve Labsuc758 Analyze APIub97c ud65cuc6a9ud558uc5ec uac1cubc1cud55c uc77cub828uc758 ud234ub4e4uc758 uacb0uc815uccb4uc785ub2c8ub2e4. u201cYouTube ube44ub524uc624 uc694uc51dud558uae30u201dub97c ud1b5ud574 ub2e4ub978 uc778ud50cub8e8uc5b8uc11cub4e4ub85cubd80ud130 uc601uc0c1uc744 uc5bbub294 uac83ubd80ud130, u201cub0b4 ube44ub524uc624ub97c uc704ud55c uc81cubaa9uacfc ud574uc2dcud0dcuadf8 uc0dduc131u201duc744 ud1b5ud574 ube44ub524uc624 uc5c5ub85cub4dcub97c uc704ud55c uc81cubaa9, uc8fcuc81c, ud574uc2dcud0dcuadf8ub97c uc190uc26duac8c uc0dduc131ud558ub294 uac83, u201cuc774 ud234u201duc744 ud1b5ud574 ub2e4uc591ud55c ud50cub7abud3bcuc6a9uc73cub85c ucf58ud150uce20ub97c uc7acuac00uacf5ud558ub294 uac83uae4cuc9c0, uc774 ubaa8ub4e0 uac83uc740 ucf58ud150uce20 uc0dduc131 ud504ub85cuc138uc2a4ub97c ub2e8uc21cud654ud558ub294 ub320 ubaa9uc801uc774 uc788uc2b5ub2c8ub2e4. uc774 ud750ub984 uc18duc5d0uc11c uc138 uac00uc9c0 uc561ub9acucf00uc774uc158uc744 ubaa8ub450 uc790uc720ub86duac8c ud65cuc6a9ud574 ubcf4uc138uc694!

u200d

ub2e4uc74c ub2e8uacc4ub294 ubb34uc5c7uc778uac00uc694?

• ube60ub978 uc2dcuc791 ud29cud1a0ub9acuc5bcuc744 ud655uc778ud558uace0, Twelve Labsuc640 ud568uaed8 ub180ub7ecuc6b4 uc571 uad6cucd95uc744 uc2dcuc791ud558uc138uc694.

• Twelve Labsuc758 Playgroundub97c uc2dcud5d8ud574 ubcf4uc138uc694. uae30ubcf8 ube44ub524uc624 ud06cub808ub527uc740 10uc2dcuac04uc774 uc81cuacf5ub4ebdub2c8ub2e4.

• X (Twitter)uc640 LinkedInuc5d0uc11c Twelve Labsub97c ud314ub85cuc6b0ud558uc138uc694.

• Discord ucee4ubba4ub2c8ud22cuc5d0 uac00uc785ud558uc5ec ub3d9ub8cc uc0acuc6a9uc790 ubc0f uac1cubc1cuc790ub4e4uacfc uc18cud1b5ud558uc138uc694.