You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

379 lines
13 KiB

WEBVTT
00:00.770 --> 00:13.130
そして、 JupyterLabでの最終回。 プログラムの最終週、 第8週の最終日である5日目を見ている。
00:13.130 --> 00:25.880
私がGradioの大ファンであることはご存じだろうから、 代わりにStreamlitを使うことも考えていた。
00:25.880 --> 00:30.440
今回、 私のレポにはStreamlitの他のサンプル・プロジェクトがいくつかある。
00:30.620 --> 00:39.650
でも、 GradioとStreamlitには素晴らしいところがたくさんあるし、 総合的に考えて、 僕はGradioをダブルダウンすると思う。
00:39.650 --> 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:06.200
覚えておいてほしいのは、 これをインスタンス化し、 runを呼び出して起動させればいいということだ。
01:06.200 --> 01:14.510
Huggingfaceがパイプラインを持ち、
01:14.510 --> 01:24.710
次にTokenizersとモデルを持つようなものだ。
01:24.740 --> 01:32.900
Gradioには素晴らしいインターフェイスがあり、 それはインターフェイスを素早く構築するための高レベルAPIで、
01:32.900 --> 01:36.470
一つの関数、 いくつかの入力と出力があり、 それをポップアップさせたい場合、
01:36.470 --> 01:44.360
本当に簡単に立ち上げることができます。
01:44.570 --> 01:48.560
うーん、 でも、 このインターフェイスは立ち上がるのに素晴らしい方法だよ。
01:48.560 --> 01:58.640
下位レベルのAPIはGRドット・ブロックと呼ばれ、 GRブロックはユーザー・インターフェースをより精巧に構築する能力を与えてくれる。
01:58.910 --> 02:04.880
そして、 あなたは道路封鎖のことを "道路封鎖 "と言っている。
02:04.970 --> 02:12.650
そして、 インターフェイス・ドット・ローンチではなく、 UIドット・ローンチ・イン・ブラウザ・ドット・イコール・トゥルーと言うのだ。
02:12.650 --> 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.620
これを設定しないと、 グラデーションはウィンドウの両側に大きな余白を作る。
02:33.620 --> 02:40.100
しかし、 多くの場合、 特にこれから作ろうとしている種類のUIでは、 可能な限りのピクセルを使いたい。
02:40.370 --> 02:43.970
つまり、 fill widthがtrueであれば、 幅いっぱいに表示されるということだ。
02:44.000 --> 02:51.380
だから、 この構成に慣れる必要があるんだ。
02:51.380 --> 03:00.470
しかし、 あなたはgrowと言い、 ユーザー・インターフェースの各行をこのように分割する。
03:00.470 --> 03:08.150
そして、 これらのコンテキスト・マネージャーや各部分には、 さまざまなUIウィジェットを置くことができる。
03:08.300 --> 03:15.590
それから、 少し紛らわしいのですが、 列を持つこともできます。
03:15.620 --> 03:18.020
それから、 物事を列に分けたい。
03:18.050 --> 03:19.640
それはすぐにわかる。
03:19.670 --> 03:25.250
もうひとつ、 プロとしての心得として知っておいて損はないのは、 トップレベルにジオ・カラムを持つことはできないということだ。
03:25.250 --> 03:31.370
ゼロから始めて、 その中に好きなだけ列や行を入れ子にすることができる。
03:31.370 --> 03:37.280
しかし、 Gradioは典型的なスクロール可能なウィンドウを想像して作られているため、 最上位のものは行でなければならない。
03:37.820 --> 03:44.000
では、 ジオ・ロウから始めます。 ここにマークダウンの見出しを付けます。
03:44.000 --> 03:48.680
GR dot markdownを使うと、 マークダウン・フィールドができ、
03:48.680 --> 03:55.310
これまで何度も使ってきたと思うが、 そこにHTMLをそのまま入れることもできる。
03:55.310 --> 03:56.480
価格は適正だ。
03:56.480 --> 03:59.960
そして、 その下にも何か入れる。
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
そこで、 これから行うのは、 もう1行追加することだ。
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
つまり、 最初の1本は他の4倍の大きさが欲しいということだ。
04:59.930 --> 05:05.650
行数、 列数、 高さを固定したい場合は高さを指定します。
05:05.650 --> 05:07.090
そして、 これらのいくつかはオプションである。
05:07.660 --> 05:16.780
それから、 僕がやっているのは、 UIドットロードというものを呼び出しているんだけど、 これはグラディオの関数の多くに似ている。
05:16.780 --> 05:25.240
Gradioでは、 関数が関数の名前を取るという、 非常に一貫したパターンが見られます。
05:25.240 --> 05:29.110
この場合、 テーブルのインプットとアウトプットを取得する。
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:07.990
そして、 このgetテーブルが返すものは何でも、 このテーブル、 つまり我々が構築したデータ・フレームにフックさせたい。
06:08.860 --> 06:10.090
それが理解できればいいのだが......。
06:10.090 --> 06:12.790
では、 この機会とは何なのか。
06:12.790 --> 06:19.810
つまり、 この機会というのは、 ユーザー・インターフェースに記憶させたいちょっとした情報なのだ。
06:19.960 --> 06:26.080
そしてこの素晴らしい状態には、 初回オポチュニティと呼ばれるものがあり、 これは私がここにハードコーディングしたもので、
06:26.080 --> 06:34.630
例の説明価格100ドルと呼ばれる取引のオポチュニティとなる。
06:34.630 --> 06:36.970
URLはcnnになります。 comに移籍した。
06:36.970 --> 06:38.530
それで終わりだろう。
06:38.530 --> 06:41.440
では、 これを実行してどうなるか見てみよう。
06:41.440 --> 06:43.300
私たちはユーザー・インターフェースを手に入れる。
06:43.300 --> 06:48.010
テーブルのような見栄えの良いデータフレームが出来上がる。
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
これはJupyter LabsとGradioの素晴らしい点の組み合わせで、
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:51.910
そして、 チャンスを選択すると、 メッセンジャーにそのチャンスについて警告を発するようにする。
07:52.120 --> 07:59.320
この下に見えるのは、 2つの異なるものを無線でつないだ、 標準的なパターンだ。
07:59.350 --> 08:01.120
これは以前と同じだ。
08:01.120 --> 08:08.200
gettableを呼び出すと、 機会が渡され、 出力はフレームに入る。
08:08.410 --> 08:16.510
もし選択するのであれば、 データ・フレーム自体でselect関数を呼び出しているのだから、
08:16.510 --> 08:24.130
選択が行われればselect関数が呼び出されるはずだ。
08:24.130 --> 08:25.840
アウトプットはない。
08:25.840 --> 08:27.880
セレクトは何をするのか。
08:27.910 --> 08:30.910
選択した項目のインデックスを見つける。
08:30.910 --> 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
もちろん、 ここでコマンドラインに出力されるログは、 Jupyterラボの出力になる。
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
そして、 これをクリックすると、 あなたがそれを信じていることを示す通知が届いた。
09:27.730 --> 09:30.220
ちょっと待って、 もう一度押すから。
09:30.220 --> 09:33.190
押すと、 バーンと通知が来る。
09:33.610 --> 09:37.210
それで、 こうなった。
09:37.240 --> 09:44.140
私たちは今、 少なくともエージェントフレームワークにgradioを接続し、 通知できるようにした。
09:44.140 --> 09:47.020
つまり、 ユーザーインターフェースの始まりだ。
09:47.020 --> 09:51.100
裏で動いているエージェント・フレームワークを使った何かの始まりだ。
09:51.130 --> 09:59.530
次のビデオでは、 Jupyter Lab環境からユーザー・インターフェースの実際のコードに移る。
09:59.560 --> 10:00.640
それじゃ、 また