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 それではまた次回、 グラディオをさらに有効活用するためにお会いしましょう。