WEBVTT 00:00.770 --> 00:09.020 유피터랩에 온 건 이번이 마지막이에요 5일째를 보고 있어요 프로그램 00:09.020 --> 00:13.130 마지막 주 마지막 날, 8주째죠 00:13.130 --> 00:21.140 GR로 그라디오를 가져오는 아름다운 장면으로 시작해요 제가 그라디오의 열성 00:21.140 --> 00:25.880 팬이라 스트림릿으로 할까 생각 중이에요 00:25.880 --> 00:30.440 이번에는 압류에서 보실 수 있는데, 간소화의 다른 예제 프로젝트들이 있어요 00:30.620 --> 00:36.920 하지만 그래디오와 스트림리츠에는 좋은 점이 많아요 전체적으로 그래디오에 00:36.920 --> 00:39.650 더 집중하고 싶어요 00:39.650 --> 00:43.880 그러니 불필요한 걸 보여줘서 혼란스럽게 할 필요가 없죠 전부 00:43.910 --> 00:45.350 안정적이니까요 00:45.380 --> 00:46.640 자, 됐어요 00:46.850 --> 00:53.720 그렇게 해서 거래 에이전트 프레임워크를 수입하죠 00:53.720 --> 00:58.010 기본적으로 여기서 전에 봤던 모든 걸 불러오는 거죠 00:58.010 --> 01:04.820 기억하세요 이걸 인스턴스화하고 실행을 호출해 시작하세요 기회와 거래를 01:04.820 --> 01:06.200 불러올게요 01:06.200 --> 01:14.510 간단히 다뤘던 것 같은데 과거에는 그레이디오에 두 가지 수준의 세부 사항이 있었죠 높은 01:14.510 --> 01:20.930 수준의 API와 낮은 수준이요 H깅페이스가 파이프라인과 토큰라이저와 01:20.960 --> 01:24.710 모델을 가진 것처럼요 01:24.740 --> 01:32.900 그레이디오는 인터페이스가 훌륭합니다 인터페이스를 빠르게 구축하기 위한 상위 레벨 API입니다 단일 함수나 입력, 출력이 01:32.900 --> 01:36.470 있다면 get up 실행이 정말 간단합니다 팝업 창을 열고 01:36.470 --> 01:42.050 싶다면 훌륭한 인터페이스와 그 사촌인 채팅 인터페이스를 이용하면 됩니다 물론 우리가 01:42.050 --> 01:44.360 아주 성공적으로 사용했죠 01:44.570 --> 01:48.560 인터페이스는 get과 실행에 훌륭한 방법이에요 01:48.560 --> 01:56.120 하위 레벨 API는 GR.블록스라고 합니다 GR블록스는 보다 정교하게 사용자 인터페이스를 01:56.120 --> 01:58.640 만들 수 있게 해주죠 01:58.910 --> 02:04.880 바리케이드도 있고 원하는 대로 부를 수 있어요 02:04.970 --> 02:11.600 여기 있는 그대로라고 하고 UI.Clow라고 해요 인터페이스 대신요 시작 .in-browser 02:11.600 --> 02:12.650 .=true 02:12.650 --> 02:17.480 그냥 링크가 아니라 이걸 실행하자마자 새 스크린이 나온다는 02:17.480 --> 02:18.380 뜻이죠 02:18.680 --> 02:20.570 알아서 다행이네요 02:20.780 --> 02:25.370 앞으로 나올 창의 이름을 붙일 수도 있어요 02:25.370 --> 02:27.470 필 너비는 참은 알 가치가 있어요 02:27.500 --> 02:33.020 그걸 설정하지 않으면 창문 양쪽의 마진이 크게 남아요 그게 필요할 때도 02:33.050 --> 02:33.620 있죠 02:33.620 --> 02:38.630 하지만 종종, 특히 우리가 만들 UI의 종류에 있어서 가능한 모든 픽셀을 02:38.630 --> 02:40.100 사용하고 싶어하죠 02:40.370 --> 02:43.970 필링 너비는 참이란 너비 전체를 채운다는 뜻이죠 02:44.000 --> 02:50.240 그리고 여러분이 익숙해질 만한 개념이 있는데 다시 말하지만 이건 몇 번 다뤘던 개념이에요. 02:50.240 --> 02:51.380 Get it. 02:51.380 --> 02:58.670 get을 하고 사용자 인터페이스를 각각의 행에 놓고 사용자 인터페이스를 이런 02:58.670 --> 03:00.470 행으로 나누면 되죠 03:00.470 --> 03:08.150 각각의 컨텍스트 관리자 각각의 조각들에 다양한 UI 위젯을 놓을 수 있어요 03:08.300 --> 03:15.590 그리고 좀 혼란스러운 건 Column도 있어요 행 안에 있다고 하는 거죠 03:15.620 --> 03:18.020 물건을 열로 쪼개고 싶어요 03:18.050 --> 03:19.640 잠시 후에 보실 거예요 03:19.670 --> 03:25.250 전문가로서 알아야 할 또 다른 팁은 지오 열은 최상위 레벨에서 가질 수 없다는 거예요 03:25.250 --> 03:30.230 0에서 시작해야 해요 그런 다음 열과 행을 중첩할 수 있죠 그 안에서 원하는 03:30.230 --> 03:31.370 만큼 깊이요 03:31.370 --> 03:37.280 하지만 최상위 레벨 1은 열로 되어 있어야 합니다 그래디오는 전형적인 스크롤 가능한 창을 상상하도록 만들어졌거든요 03:37.820 --> 03:44.000 좋아요, 지오 Row로 시작할게요 마크다운을 입력하죠 여기다가요 03:44.000 --> 03:48.680 GR. 마크다운을 쓸 때 마크다운 필드를 제공하죠 지금 많이 사용했어요 03:48.680 --> 03:55.310 HTML을 바로 넣을 수도 있어요 중앙에 큰 텍스트를 넣기 위해 제가 하는 거죠 03:55.310 --> 03:56.480 가격이 적당해요 03:56.480 --> 03:59.960 그 아래에도 뭔가를 Put처럼 했어요 03:59.990 --> 04:01.370 실행해 보죠 04:01.370 --> 04:04.910 이 감방을 실행하면 창문이 열리죠 04:04.910 --> 04:07.250 지금은 아주 밋밋해요 04:07.250 --> 04:08.420 가격이 적당해요 04:08.420 --> 04:09.140 방향이 있어요 04:09.140 --> 04:12.050 이게 행이고 저게 또 다른 행이죠 04:12.050 --> 04:13.430 다 됐어요 04:13.430 --> 04:14.870 아주 간단하죠 04:14.900 --> 04:15.590 닫을게요 04:15.590 --> 04:16.760 이리 와요 04:17.570 --> 04:21.500 이제 비트 더 넣을 수 있어요 04:21.500 --> 04:27.230 이제 행을 하나 더 추가할 거예요 04:27.770 --> 04:34.160 이 행은 기본적으로 테이블인 GR 데이터 프레임을 포함하고 있어요 04:34.160 --> 04:38.630 스프레드시트를 생각해 보세요 스크린에 스프레드시트를 끼워 넣는 거죠 04:38.630 --> 04:46.460 헤더에 대해 설명, 가격 추정, 디스카운트 URL 그리고 랩은 엑셀이나 04:46.460 --> 04:50.600 구글 시츠에 있는 것과 비슷해요. 04:50.630 --> 04:55.910 상대적인 셀 너비 내에서 래핑하고 싶다고 말하고 있어요 04:55.910 --> 04:59.930 첫 번째 것은 다른 것의 4배로 만들라고 할 수 있죠 04:59.930 --> 05:05.650 행의 개수, 열의 개수 고정된 높이를 원한다면 높이를 정하죠 05:05.650 --> 05:07.090 어떤 건 선택 사항이에요 05:07.660 --> 05:15.520 UI.Dload라는 걸 호출하고 있어요 그러디오 기능처럼 05:15.520 --> 05:16.780 보이죠 05:16.780 --> 05:24.640 그라디오에 걸쳐 일관된 패턴이 보일 겁니다 함수가 함수의 이름을 취한다고 할 05:24.640 --> 05:25.240 때요 05:25.240 --> 05:29.110 이 경우에는 테이블 입력과 출력을 get으로 하고요 05:29.110 --> 05:34.660 이 사용자 인터페이스에 제공하는 함수를 연결하는 방법이죠 05:34.690 --> 05:41.410 그러니까 제 말은 저한테 기회가 있다는 거예요 잠시 후에 말씀드릴게요 05:41.410 --> 05:45.580 그게 이 테이블의 입력값이 되길 원해요 05:45.580 --> 05:47.380 결과물도 필요해요 05:47.380 --> 05:53.770 이게 뭘 반환하든 데이터 프레임에 연결하고 싶어요 여기서 방금 정의한 거죠 05:54.220 --> 05:58.900 입력이 기회라는 것이 된다는 것을 이해하셨나요? 잠시 후에 말씀드릴게요 05:58.900 --> 06:06.640 이 get 테이블이 반환하는 게 뭐든 그게 이 테이블에 연결되길 원해요 우리가 구성한 이 데이터 06:06.640 --> 06:07.990 프레임에요 06:08.860 --> 06:10.090 이해가 되면 좋겠네요 06:10.090 --> 06:12.790 기회라는 게 뭔가요? 06:12.790 --> 06:18.340 이 기회란 건 훌륭한 상태예요 사용자 인터페이스가 기억해야 할 정보의 06:18.340 --> 06:19.810 비트란 뜻이죠 06:19.960 --> 06:26.080 이 훌륭한 상태는 초기 기회라는 것을 갖게 됩니다 여기서 하드 코딩하는 06:26.080 --> 06:34.630 뭔가가 되겠죠 거래를 할 기회가 될 겁니다 예를 들어 설명 가격은 100달러죠 06:34.630 --> 06:36.970 URL cnn이 뜨겠죠 코무요 06:36.970 --> 06:38.530 그게 다예요 06:38.530 --> 06:41.440 실행해 어떻게 되는지 보죠 06:41.440 --> 06:43.300 get in 사용자 인터페이스가 있어요 06:43.300 --> 06:48.010 이렇게 멋진 데이터 프레임이 생겼어요 get 테이블 같은 거죠 06:48.010 --> 06:54.460 한 행에 제가 방금 만든 게 있어요 설명, 가격, 추정값, 06:54.460 --> 06:57.490 디스카운트 URL 06:57.520 --> 07:00.670 그게 전부인 것 같아요 07:01.360 --> 07:03.430 지금까진 좋아요 07:03.460 --> 07:05.260 계속 가보죠 07:05.500 --> 07:06.250 좋아요 07:06.280 --> 07:08.260 얘기가 복잡해지네요 07:08.260 --> 07:11.890 다음 셀에서 사용자 인터페이스를 매번 구축하고 있는 걸 보실 수 있어요 07:11.890 --> 07:12.550 전 그런 게 좋아요 07:12.550 --> 07:17.680 그게 훌륭한 점 중 하나죠 유피터 랩의 훌륭한 점과 그래디오의 멋진 점이 이런 07:17.680 --> 07:21.070 식으로 점진적으로 구축할 수 있다는 거예요 07:21.070 --> 07:27.310 이제 에이전트 프레임워크의 새 인스턴스를 생성하겠습니다 딜 에이전트 프레임워크요 07:27.670 --> 07:36.310 안 그러면 이 영상은 다음에 봐야 할 것 같네요 07:36.310 --> 07:41.890 지금은 이걸 연결하는 것만 신경 쓰고 있어요 07:41.890 --> 07:47.260 스스로 생성하는 걸 봤죠 일부 정보를 봤어요 기회를 선택할 수 있도록요 07:47.260 --> 07:51.910 그 기회에 대해 경고하기 위해 메신저를 호출하죠 07:52.120 --> 07:59.320 여기 아래를 보시면 두 개의 다른 것을 라디오로 연결했어요 표준 패턴이죠 07:59.350 --> 08:01.120 아까랑 똑같네요 08:01.120 --> 08:08.200 gettable이라고 불러도 기회를 지나쳐 프레임에 출력되죠 08:08.410 --> 08:16.510 선택하면.. 만약 데이터 프레임에 SELECT U 함수를 호출하면 08:16.510 --> 08:24.130 선택이 되면 함수를 호출하고 입력이 기회가 되겠죠. 08:24.130 --> 08:25.840 결과물이 없어요 08:25.840 --> 08:27.880 무엇을 선택할까요? 08:27.910 --> 08:30.910 여러분이 선택한 것의 인덱스를 찾아요 08:30.910 --> 08:37.840 그걸 바로 여기 인수로 갖고 그걸 지정합니다 기회 목록에서 기회를 찾아내는 08:37.840 --> 08:38.950 거죠 08:38.950 --> 08:45.880 에이전트 프레임워크를 기획자 메신저로 호출해 그 기회에 대한 경고를 보내죠 08:46.330 --> 08:47.200 좋아요 08:47.350 --> 08:48.700 합리적인 것 같네요 08:48.730 --> 08:49.990 이걸 실행하죠 08:50.020 --> 08:55.300 이걸 실행하면 제일 먼저 많은 게 보일 거예요 08:55.960 --> 08:57.640 너무 빨랐어요 08:57.670 --> 09:00.100 되돌아가면 인쇄되고 있는 게 보일 거예요 09:00.130 --> 09:08.290 물론 로그 출력은 명령줄로 유피터 랩의 출력으로 가죠 09:08.290 --> 09:09.580 표준형 밖을 볼 수 있죠 09:09.580 --> 09:10.780 그걸 노린 거예요 09:10.810 --> 09:15.580 그 다음 표준 아웃은 색깔을 입힌 로그 메시지를 보여줘요 09:15.580 --> 09:17.020 뭐가 뭘 하는지 알 수 있죠 09:17.050 --> 09:18.280 우리가 바라던 대로예요 09:18.880 --> 09:22.270 여기 오면 CNN이 우리 테이블을 보여주고 있어요 09:22.270 --> 09:27.700 이걸 클릭하면 방금 알림이 나타났어요 get get get get 09:27.730 --> 09:30.220 잠깐만요, 다시 눌러볼게요 09:30.220 --> 09:33.190 Get 버튼을 누르면 알림이 울리죠 09:33.610 --> 09:37.210 그렇게 된 거예요 09:37.240 --> 09:44.140 이제 그라디오와 우리 요원 프레임워크를 연결했으니 우리에게 통보할 수 있어요 09:44.140 --> 09:47.020 사용자 인터페이스의 시작이죠 09:47.020 --> 09:51.100 에이전트 프레임워크가 막후에서 작동하는 것의 시작이죠 09:51.130 --> 09:59.530 다음 비디오에선 유피터 랩 환경에서 사용자 인터페이스를 위한 진짜 코드로 옮겨가죠 09:59.560 --> 10:00.640 그때 봐요