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 それじゃ、 また