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.
 
 

571 lines
17 KiB

WEBVTT
00:00.710 --> 00:02.690
そして、 ラボにおかえりなさい。
00:02.690 --> 00:08.300
ここJupyter Labで2週目に入る。
00:08.300 --> 00:10.790
そして2日目に入る。
00:10.820 --> 00:12.440
ラジオの日だ。
00:12.470 --> 00:17.390
今日は、 とんでもなくシンプルなGradioフレームワークを使ってユーザー・インターフェースを構築する。
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:46.250
次のおなじみのセルは、 APIを立ち上げて準備するための3つの類似したコマンドだ。
00:46.790 --> 00:47.630
オーケー。
00:47.630 --> 00:53.960
変数にシステム・メッセージを設定することから始めましょう。 これは非常に一般的なUIで、
00:53.990 --> 01:00.380
システム・メッセージの標準的な出発点となることが多い、 役に立つアシスタントです。
01:00.620 --> 01:02.630
だから、 私たちが取るのはそれだ。
01:03.080 --> 01:07.490
さて、 これからGPT4ミニに電話をかける。
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
そしてOpenAIチャットの補完、 ドット補完、 ドット作成。
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:59.180
メッセージ GPTの得意なこと、 不得意なことをいくつか試してみた。
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
そして2つ目は、 トレーニングデータが2023年10月まで、
02:29.660 --> 02:34.310
つまり10月の初めまで有効だったということだ。
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
では、 shoutという非常にシンプルな関数を紹介しよう。
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
そして、 ハローと大文字で怒鳴るように言い返す。
03:17.890 --> 03:19.060
うーん、 わかった。
03:19.060 --> 03:29.620
つまり、 小さなハローを大きなハローに変換できる入出力を備えた洗練されたユーザー・インターフェースを構築するのは、
03:29.650 --> 03:33.250
これくらい簡単なことなのだ。
03:33.280 --> 03:36.910
2行で表示される素晴らしいインターフェイスだ。
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
入力と出力が1つずつしかない場合は、 それがどのようなものかを文字列で表せばいい。
04:06.280 --> 04:07.240
それだけで十分だ。
04:07.240 --> 04:08.950
それがすべてを解決してくれる。
04:09.070 --> 04:18.070
これは2行のコードですが、 お見せするために1行のコードにすることもできます。
04:18.130 --> 04:23.740
すべてを1行にまとめて、 それを実行して、 どうなるか見てみよう。
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:52.720
ここでひとつお気づきの点があるとすれば、 ここにフラグボタンがあり、 フラグ付きというフォルダが作成されていることだ。
04:52.720 --> 04:58.510
これは、 機械学習でよくあるユースケースで、 ユーザーが何が起こっているかを確認し、
04:58.510 --> 05:08.080
結果に問題があればメモを取ることができるようにしたい場合です。
05:08.320 --> 05:12.850
その代わりに、 フラグを立てることを許可するイコール
05:12.850 --> 05:16.780
"never "を渡すのだ。
05:16.780 --> 05:22.870
だから今、 その代わりにそれを実行すると、 あー、 繰り返しになるけど、 このように1行で済ませることも同じようにできたのに、
05:22.870 --> 05:27.970
2行にしたことがちょっと恨めしいよ。
05:28.000 --> 05:29.320
一本の線。
05:29.320 --> 05:33.850
そしてここに、 ユーザー・インターフェイスがある。
05:34.780 --> 05:38.110
ええと、 それで、 この件に関していくつかやったことがあるんだけど、 それについて言っておきたいことがあるんだ。
05:38.140 --> 05:43.150
そのうちのひとつは、 これらのケースのいずれかを選択した場合、 この一番上にリンクが表示されます。
05:43.150 --> 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
というのも、 Gradioを実行すると、 バックグラウンドで小さなウェブ・サーバーが動くからだ。
06:04.270 --> 06:08.350
ええと、 最初に空いているポートを見つけて、 ローカルで実行するんだ。
06:08.350 --> 06:13.750
何回目か、 何回目か......760回目くらいからが始まりで、 そこからが本番だと思う。
06:13.750 --> 06:15.190
だから、 最後の1本がそうだったんじゃないかと思う。
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
同じJupyterノートブックに出力することもできるし、
06:25.600 --> 06:29.290
別の画面に表示することもできる。
06:29.290 --> 06:36.250
しかしそれ以上に、 私がここで示したもう一つのことは、 シェア・イコール・トゥルーを通話に反映させることができるということだ。
06:36.250 --> 06:43.960
そうすれば、 Gradioは同じインターフェイスをパブリックURLで提供し、
06:43.960 --> 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
しかし、 submitを呼び出したとき、 submitを押して関数を呼び出したとき、 その関数helloは、
07:25.080 --> 07:29.580
このJupyter環境の私のローカル・ボックスで実行されている。
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:36.030
しかし、 ちょっと注目すべき点は、 ここに戻って出力を見てみると、 shoutが入力で呼ばれていることだ。
08:36.030 --> 08:37.320
これはとてもクールだ。
08:37.320 --> 08:41.340
つまり、 実行されている機能は私のボックスで実行されているのだ。
08:41.340 --> 08:50.010
ユーザー・インターフェースは公共ラジオGradioのウェブサイトを通じて提供されているが、 コードは私のローカル・ボックス上で動いている。
08:50.010 --> 08:54.690
つまり、 自分のローカル・ボックスで動作するモデルを書き、 インターフェイスを構築し、 それを自分のためにローカルに立ち上げることも、
08:54.690 --> 08:59.370
他の人と共有することもできるということだ。
08:59.370 --> 09:06.870
そして、 共有されたユーザー・インターフェイスで作業している人たちは、 自分のボックス上で動いているコードを信じられないほど便利なものとして呼び出しているのだ。
09:06.870 --> 09:12.210
そして、 想像できるように、 人々と共同作業をしたり、 モデルを共有したり、 同僚に協力してもらったりするのに、
09:12.210 --> 09:15.600
これ以上簡単なものはない。
09:16.710 --> 09:20.370
よし、 では続けてもう2つほど見せよう。
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
もう一度挨拶をして、 送信を押すことができる。
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:35.820
シャウトという言葉をその関数に置き換えるだけで、 LLMの上にユーザー・インターフェースを構築することができる。
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フォーミニの素晴らしいジョーク。
11:19.100 --> 11:25.730
そして、 LLMを舞台裏で使っているユーザー・インターフェースを構築することが、
11:25.730 --> 11:29.510
いかに簡単なことかを示す好例だ。
11:29.570 --> 11:34.760
皆さんも私と同じように、 この経験で大喜びしてほしい。
11:34.850 --> 11:37.370
グラディオはすごいと思う。
11:37.400 --> 11:41.330
それではまた次回、 グラディオをさらに有効活用するためにお会いしましょう。