WEBVTT 00:00.710 --> 00:02.690 연구실에 잘 돌아왔어요 00:02.690 --> 00:08.300 주피터 연구소에 왔어요 이제 2주 차로 접어들죠 00:08.300 --> 00:10.790 이제 둘째 날로 가보죠 00:10.820 --> 00:12.440 라디오 데이예요 00:12.470 --> 00:17.390 오늘 우리는 사용자 인터페이스를 만들 겁니다 말도 안 되게 단순한 그래디오 프레임워크를 이용해서요 00:17.390 --> 00:19.010 기쁨을 준비하세요 00:19.760 --> 00:20.810 여기요 00:20.810 --> 00:22.490 수입도 좀 할 거예요 00:22.490 --> 00:27.140 그러디오가 GR를 상징하는 마법의 대사예요 00:27.170 --> 00:28.400 그렇다고 대답했죠 00:28.430 --> 00:30.200 자, 됐어요 00:30.200 --> 00:34.700 그리고 일반적인 접근법으로 환경 변수를 로드하죠 00:35.030 --> 00:43.010 다음으로 익숙한 셀은 API를 get up up 준비시키는 00:43.040 --> 00:46.250 다소 유사한 명령 3개죠 00:46.790 --> 00:47.630 네 00:47.630 --> 00:53.960 변수에 시스템 메시지를 설정하는 것으로 시작합니다 아주 일반적인 00:53.990 --> 01:00.380 UI가 될 거예요 시스템 메시지의 표준 시작점인 보조죠 01:00.620 --> 01:02.630 그렇게 할 거예요 01:03.080 --> 01:07.490 이제 GPT 4 미니와의 통화를 마무리할 거예요 01:07.490 --> 01:14.540 이런 간단한 함수에서 GPT는 프롬프트 메시지의 등호를 취하죠 01:14.540 --> 01:18.380 이쯤 되면 이 구조물에 질렸길 바라요 01:18.380 --> 01:24.620 잘 아시네요 간단한 대화 구조와 사전 시스템 목록 시스템 메시지 사용자, 01:24.620 --> 01:30.620 사용자 프롬프트 완성 오픈아이 채팅 .완성, .생성이죠 01:30.650 --> 01:33.620 모형을 전달하고 메시지를 전달하죠 01:33.620 --> 01:37.400 완료 .선택으로 반환되죠 01:37.400 --> 01:40.370 선택 닷 메시지 콘텐츠를 선택해요 01:40.370 --> 01:45.800 GPT 메시지를 래핑하고 응답을 반환하는 함수죠 01:45.800 --> 01:47.510 실행해 보죠 01:47.510 --> 01:49.700 빨리 시험해 보죠 01:49.730 --> 01:50.450 뭐라고 하죠? 01:50.480 --> 01:58.550 몇 가지를 시도해 보았습니다 GPT의 철자를 알고 있고 GPT의 장단점을 알고 01:58.550 --> 01:59.180 있죠 01:59.180 --> 02:00.260 하나만 더 해 보죠 02:00.260 --> 02:02.780 시사 문제에는 좋지 않죠 02:02.780 --> 02:04.730 아주 단순한 걸로 가죠 02:04.730 --> 02:13.430 오늘 날짜는 언제죠? GPT는 오늘 날짜를 어떻게 인식하는지 보죠 02:14.420 --> 02:18.080 오늘은 2023년 10월 3일이에요 02:18.410 --> 02:19.880 몇 가지 알아둘 게 있어요 02:19.880 --> 02:24.140 하나는 예상대로 시사 감각이 별로 없다는 거예요 02:24.140 --> 02:29.660 둘째, 훈련 데이터는 2023년 10월 초까지 지속된 것으로 보입니다. 02:29.660 --> 02:34.310 9월이라고 했을 때 제가 암시했던 거죠. 02:34.310 --> 02:39.860 10월인 줄 알았는데 10월 3일이면 논란의 여지가 있겠네요 02:39.860 --> 02:42.290 9월 말이 됐어요 02:42.320 --> 02:46.310 10월 초가 정답이겠죠 02:46.310 --> 02:48.950 아주 간단한 함수예요 02:48.950 --> 02:52.190 잠시 후 다루게 될 내용이니 마음 한구석에 두시고요. 02:52.190 --> 02:54.320 사용자 인터페이스를 만들 때죠 02:54.320 --> 02:56.770 우선 데이터 과학과는 아무 상관 없어요 02:56.770 --> 02:59.680 간단한 사용자 인터페이스를 만드는 방법을 보죠 02:59.680 --> 03:03.640 여기 샤우트라는 아주 간단한 함수가 있어요 03:03.640 --> 03:06.040 샤우트에는 텍스트가 좀 들어가요 03:06.040 --> 03:10.330 대문자로 답장할 거예요 03:10.330 --> 03:11.620 아주 간단한 질문이죠 03:11.620 --> 03:13.150 그럼 인사할까요? 03:13.150 --> 03:17.500 Hello와 대문자 큰 소리로 대답하죠 03:17.890 --> 03:19.060 네 03:19.060 --> 03:29.620 입력과 출력을 가지고 정교한 사용자 인터페이스를 구축하는 것은 작은 안녕을 큰 안녕으로 바꿀 수 03:29.650 --> 03:33.250 있습니다. 이렇게 간단해요. 03:33.280 --> 03:36.910 두 줄짜리 뷰는 훌륭한 인터페이스죠 03:36.910 --> 03:38.380 새 인터페이스가 필요하단 뜻이죠 03:38.380 --> 03:41.260 원하는 함수를 말해주세요 03:41.260 --> 03:46.630 사용자 인터페이스를 중심으로 한 함수인데 이 경우엔 샤우트죠 03:46.660 --> 03:51.730 이 함수는 제가 함수 이름을 넘기고 여러분이 넘기는 걸 설명해요 03:51.730 --> 03:53.560 입력과 출력을 통과해야 하죠 03:53.560 --> 03:57.820 그래디오는 융통성 있게 장면을 연출했어요 03:57.820 --> 04:01.390 입력과 출력이 여러 개라면 목록도 넘길 수 있어요 04:01.390 --> 04:06.280 입력도 하나, 출력도 하나라면 문자열로서 그게 뭔지 그냥 말할 수 있어요 04:06.280 --> 04:07.240 그거면 돼요 04:07.240 --> 04:08.950 다 해결될 거예요 04:09.070 --> 04:14.020 이건 코드 두 줄이지만 여러분께 보여드리기 위해 코드 한 줄로 04:14.020 --> 04:18.070 할 수도 있어요 이렇게 보여드리고 있으니까요 04:18.130 --> 04:23.740 모든 걸 한 줄에 넣고 실행해 어떻게 되는지 보죠 Put it's go 04:23.740 --> 04:26.950 사용자 인터페이스가 있어요 04:26.950 --> 04:28.810 안녕하세요라고 칠게요 04:28.960 --> 04:30.910 제출을 누르죠 04:31.510 --> 04:34.510 그리고 저한테도 큰 소리로 인사를 하죠 04:34.510 --> 04:38.920 훌륭한 컨트롤이 있는 사용자 인터페이스죠 04:38.920 --> 04:46.030 전부 이 브라우저 안에서 실행되도록 만들어졌어요 04:46.150 --> 04:51.430 한 가지 눈치채셨을지 모르겠는데 여기 플래그 버튼이 있어요 플래그드라는 폴더가 04:51.430 --> 04:52.720 여기 만들어졌죠 04:52.720 --> 04:58.510 이건 Gradio와 함께 나오는 기능으로 사용자가 결과를 플래그 지정할 수 04:58.510 --> 05:03.250 있게 해줍니다 머신 러닝에서 흔히 사용되는 경우죠 사용자가 무슨 05:03.280 --> 05:08.080 일이 벌어지는지 보고 결과에 문제가 있는지 기록하길 원하죠 05:08.320 --> 05:12.850 하지만 그 기능성은 특별히 우리가 원하는 게 아니죠 그걸 제거하는 05:12.850 --> 05:16.780 방법은 허용 플래깅 =never를 넘기는 거예요 05:16.780 --> 05:22.870 이제 실행해 볼게요. 두 줄로 놓은 것이 조금 억울하네요. 한 줄로 놓을 수도 05:22.870 --> 05:27.970 있었는데 말이죠. 얼마나 간단한지 보여드리기 위해서요. 05:28.000 --> 05:29.320 한 줄이에요 05:29.320 --> 05:33.850 Get in UI 사용자 인터페이스예요 05:34.780 --> 05:38.110 이것과 관련해 제가 한 게 몇 가지 있어요 05:38.140 --> 05:43.150 첫 번째는 이 두 케이스 중 어느 것이든 여기 위에 링크가 있어요 05:43.150 --> 05:49.000 이 링크를 클릭하면 완전히 분리된 창에서 인터페이스가 나타납니다 05:49.000 --> 05:51.220 마법 같죠 05:51.250 --> 05:51.820 가요 05:51.850 --> 05:52.750 안녕하세요 05:55.030 --> 05:56.830 잘 어울려요 05:56.860 --> 06:04.180 그건 그레이디오를 실행할 때 백그라운드에서 실행되는 작은 웹 서버를 실행하기 때문이죠 06:04.270 --> 06:08.350 처음 발견하는 포트에서 무료로 로컬에서 실행하는 거죠 06:08.350 --> 06:13.750 몇 번이 지나고 나서... 760번이었던 것 같아요 거기서부터 시작이죠 06:13.750 --> 06:15.190 아마 마지막이 그거였을 거예요 06:15.490 --> 06:15.880 네 06:16.000 --> 06:17.380 760개였나요? 06:17.530 --> 06:20.830 저 웹 서버를 실행할 거예요 06:20.830 --> 06:25.600 그래서 같은 주피터 노트북에서 출력물에 보여줄 수도 있고 별도의 06:25.600 --> 06:29.290 화면에서 불러올 수도 있어요 그 자체로 훌륭하죠 06:29.290 --> 06:35.500 하지만 그보다 더 중요한 건 여기서 보여드린 다른 건 호출에서 공유 = true를 넘기는 06:35.500 --> 06:36.250 거예요 06:36.250 --> 06:43.960 그렇게 하면 Gadio는 공용 URL 내의 동일한 인터페이스를 제공해 다른 사람들과 공유할 06:43.960 --> 06:50.010 수 있죠 여러분이 함께 일하는 다른 사람, 동료가 같은 모델을 사용해 여러분의 06:50.010 --> 06:53.430 프로토타입을 작업할 수 있도록요 06:53.430 --> 06:58.740 이 부분은 좀 기가 막힌 비트예요 06:58.740 --> 07:05.220 누가 사용자 인터페이스를 언급하면∙∙∙ 지금 할 건데 시간이 좀 걸려요 07:05.220 --> 07:06.690 비트가 더 있어요 07:06.690 --> 07:07.380 나오네요 07:07.380 --> 07:08.490 이게 사용자 인터페이스예요 07:08.490 --> 07:10.560 당연히 이것과 똑같죠 07:10.560 --> 07:11.640 내가 뛰어갈게 여보세요 07:11.640 --> 07:13.380 효과가 있을 거예요 07:14.940 --> 07:16.530 무슨 일이 일어나고 있는지요 07:16.530 --> 07:19.200 이건 물론 그래디오가 제공하죠 07:19.200 --> 07:25.080 보내기를 호출할 때 보내기를 누르고 함수를 호출할 때 그 함수가 hello를 07:25.080 --> 07:29.580 실행합니다 여기 주피터 환경의 제 로컬 상자에서요 07:29.670 --> 07:32.250 비트가 좀 심하죠 07:32.280 --> 07:34.920 박스에서 실행되는 것처럼 여전히 코드를 실행하고 있어요 07:34.920 --> 07:37.560 공개적으로 사용 가능한 URL 뿐이죠 07:37.590 --> 07:39.000 마법 같아요 07:39.000 --> 07:40.620 무슨 뜻인지 설명해 드리죠 07:40.620 --> 07:44.340 여기로 돌아가서 프린트하는 거죠 07:46.680 --> 07:52.020 입력된 외침이 울렸어요 07:54.840 --> 07:58.650 이제 상황을 분명히 설명하고 있어요 07:59.130 --> 08:01.980 실행하면 Shout이 입력과 함께 호출되었다고 나오죠 08:02.010 --> 08:02.550 안녕하세요 08:02.580 --> 08:06.480 이제 여기로 돌아와서 다시 실행해보죠 08:07.770 --> 08:12.240 이제 다시 공용 URL로 실행되고 있어요 08:13.020 --> 08:14.430 나오네요 08:16.020 --> 08:17.190 타이핑 할게요 08:17.190 --> 08:20.070 정말 멋져요 08:20.400 --> 08:22.110 제출을 누르세요 08:22.230 --> 08:24.570 물론 이것도 아주 근사하죠 08:24.600 --> 08:27.570 이 쇼는 그래디오가 진행해요 08:27.570 --> 08:34.050 하지만 다시 한 번 주목할 만한 건 여기로 돌아와서 제 출력을 보면 입력과 함께 호출된 08:34.050 --> 08:36.030 호출이 보이시죠 08:36.030 --> 08:37.320 정말 멋져요 08:37.320 --> 08:41.340 실행되는 함수는 제 상자에서 실행되죠 08:41.340 --> 08:47.850 사용자 인터페이스는 공용 라디오 그래디오 웹사이트를 통해 제공되지만 코드는 제 로컬 박스에서 실행되고 08:47.850 --> 08:50.010 있어요, 정말 대단하죠 08:50.010 --> 08:54.690 그 말은 즉 로컬 박스에서 실행되는 모델을 작성할 수 있고 인터페이스를 빌드할 08:54.690 --> 08:59.370 수 있고 로컬에서 불러올 수도 있고 다른 사람과 공유할 수도 있다는 거죠 08:59.370 --> 09:04.740 사람들이 공유 사용자 인터페이스를 작업하면서 여러분의 컴퓨터에서 실행 중인 코드를 여전히 09:04.740 --> 09:06.870 호출하고 있어요 아주 유용하죠 09:06.870 --> 09:12.210 상상이 되시겠지만 사람들과 협력하고 모델을 공유하고 동료들이 09:12.210 --> 09:15.600 함께 일하게 하는 건 정말 쉬운 일이에요 09:16.710 --> 09:20.370 좋아요, 몇 가지 더 보여드리죠 09:20.370 --> 09:25.590 이제 인터페이스를 불러올게요 입력과 출력을 지정해주는 거죠 09:25.800 --> 09:30.810 여길 보시면 제가 하는 게∙∙∙ 입력이∙∙∙ 목록이죠 09:30.810 --> 09:32.640 한 가지만 들어 있어요 09:32.640 --> 09:34.080 텍스트 박스죠 09:34.080 --> 09:37.740 메시지도 라벨에 6줄이나 돼요 09:37.740 --> 09:41.190 반응이 출력력이고요 줄이 8개예요 09:41.340 --> 09:43.650 함수 샤우트라고 부르네요 09:43.710 --> 09:49.620 그걸 보죠 여기로 불러오죠 09:50.340 --> 09:53.610 비트가 예상대로 나와서 좀 더 커지죠 09:53.610 --> 09:54.480 됐어요 09:54.510 --> 09:55.710 메시지가 있어요 09:55.710 --> 09:56.760 반응이 있어요 09:56.760 --> 10:02.010 다시 Hello를 하고 제출을 누를 수 있어요 10:02.010 --> 10:05.610 여기 대문자 버전이 있어요 10:05.700 --> 10:08.220 아주 쉽고, 멋지고, 구성할 수 있죠 10:08.250 --> 10:10.860 좋은 UI 같네요 10:11.790 --> 10:15.930 이제 뭘 제안할지 짐작이 가실 거예요 10:16.380 --> 10:17.820 멋지지 않아요? 10:17.850 --> 10:23.460 샤우트라는 단어를 다른 함수로 대체할 수 있다면 멋지지 않을까요? 10:23.490 --> 10:24.720 함수 같은 거요? 10:24.720 --> 10:28.170 왜 아까 만든 메시지 GPT 함수가 아닌 거죠? 10:28.170 --> 10:33.780 그냥 Shout이라는 단어를 그 함수로 대체할 수 있어요 그럼 LLM 위에 빌드된 10:33.780 --> 10:35.820 사용자 인터페이스가 생기죠 10:35.820 --> 10:37.380 정말 멋지지 않아요? 10:37.410 --> 10:38.640 멋지지 않아요? 10:38.970 --> 10:40.020 네 10:40.050 --> 10:41.640 한번 보죠 10:41.640 --> 10:42.770 한번 보죠 10:42.800 --> 10:43.700 시작할게요 10:43.700 --> 10:44.420 저도요 10:44.420 --> 10:45.500 코드가 같아요 10:45.500 --> 10:46.910 함수를 대체했어요 10:46.910 --> 10:47.840 소리 지르는 게 아니에요 10:47.840 --> 10:49.400 GPT에 메시지를 보내죠 10:49.610 --> 10:51.290 어떻게 되나 보죠 10:51.290 --> 10:53.480 다른 창으로 보죠 10:53.510 --> 10:54.740 여기 있네요 10:54.920 --> 11:02.240 농담 하나 해 주시면 제출할게요 11:02.240 --> 11:04.430 결과를 기다려 보죠 11:05.180 --> 11:07.310 허수아비가 왜 상을 받았냐고요? 11:07.310 --> 11:10.550 자기 분야에서 뛰어난 사람이었으니까요 11:10.580 --> 11:12.080 재미있는 농담이네요 11:13.730 --> 11:15.350 네 11:15.470 --> 11:19.100 GPT 4 미니의 멋진 농담이네요 11:19.100 --> 11:25.730 사용자 인터페이스를 크게 만드는 게 얼마나 쉬운지 보여주는 좋은 예죠 11:25.730 --> 11:29.510 LLM을 이용해 뒤에서 실행되는 거요 11:29.570 --> 11:34.760 당신도 나만큼 이 경험을 즐기길 바라요 11:34.850 --> 11:37.370 그래디오는 대단해요 11:37.400 --> 11:41.330 다음 시간에는 그래디오를 더 유용하게 사용할 겁니다 TREEN METING TO DETING TO DETING TO DETING TO DETING TO DETING TO DETING TO DETING TO DETING TO DETING TO DETING TO DETING TO DETING TO DETING TO DETING TO DETING TO DETING TO DETING TO DETING TO DETING TO DETY