From the uDemy course on LLM engineering.
https://www.udemy.com/course/llm-engineering-master-ai-and-large-language-models
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
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 |
|
それじゃ、 また
|
|
|