WEBVTT 00:00.620 --> 00:05.360 グラジオのJupyterLabにようこそ。 00:05.360 --> 00:19.460 ひとつはGPTとチャットするためのもので、 GPTのストリーム機能を使ったもの。 00:19.580 --> 00:21.980 ええと、 それで今、 君に聞いてみたんだ。 00:22.010 --> 00:25.310 仮にこのような関数を書いたとしよう。 00:25.310 --> 00:28.160 この関数は複合関数のようなものだ。 00:28.160 --> 00:32.330 ストリームモデルと呼ばれる、 他を呼び出す関数だ。 00:32.330 --> 00:40.040 そして、 プロンプトを受け取り、 モデルを受け取り、 モデルがGPTであれば、 ストリームGPTを呼び出す。 00:40.370 --> 00:42.530 モデルがクロードの場合、 ストリームを呼び出す。 00:42.530 --> 00:44.420 そうでなければクロードはエラーを投げる。 00:44.420 --> 00:46.130 だからGPTかクロードである必要がある。 00:46.130 --> 00:51.140 そして、 基本的に反復して各チャンクを順番に降ろす。 00:51.140 --> 00:53.420 だから、 私はこれを関数と呼んだが、 実はそうではないのだ。 00:53.420 --> 00:54.440 発電機だ。 00:54.590 --> 01:01.970 そして、 どちらのモデルが呼び出されたかに応じて、 どちらか一方のモデルからチャンクを生成する。 01:02.000 --> 01:03.500 まあ、 明らかにうまくいくだろうね。 01:03.530 --> 01:07.730 これで、 さらにいくつかの変数を持つ関数になった。 01:07.730 --> 01:12.140 だから、 グラディオに関する限り、 それは単なる機能の一つに過ぎない。 01:12.140 --> 01:16.490 つまり、 その機能を中心にユーザー・インターフェースを簡単に構築できるということだ。 01:16.490 --> 01:17.660 見てみよう。 01:17.690 --> 01:18.800 これだ。 01:18.800 --> 01:20.450 これがインターフェイスだ。 01:20.480 --> 01:26.840 この関数が受け取るのは、 今入力を書いたハイブリッドジェネレーターのようなものだ。 01:26.840 --> 01:29.000 もちろん、 これで2つのインプットを持つことになる。 01:29.000 --> 01:30.890 そのうちのひとつがあなたのメッセージになる。 01:30.890 --> 01:34.010 そしてもうひとつは、 こんなに簡単だったらいいのにと思う。 01:34.040 --> 01:39.230 GPTまたはClaudeラベルの2つの値のドロップダウンでモデルを選択します。 01:39.230 --> 01:41.990 そして、 それを出力するんだ。 01:42.470 --> 01:44.630 しかし、 物事がそんなに簡単であることはめったにない。 01:44.660 --> 01:47.600 ああ、 でもここはグラディオだから、 物事は本当に簡単なんだ。 01:47.690 --> 01:50.240 申し訳ないが、 まずこれを実行しなければならない。 01:50.480 --> 01:51.320 これでよし。 01:51.320 --> 01:52.100 そんなに簡単なことじゃない。 01:52.130 --> 01:54.110 それでも、 すべてのコードを実行しなければならない。 01:54.290 --> 01:56.390 ええと、 それではどうぞ。 01:56.390 --> 02:05.750 タイムズ・スクエアからグランド・セントラルまでどうやって行けばいいんだ? 02:06.210 --> 02:08.160 そして、 私たちのモデルの一つを選ぶ。 02:08.160 --> 02:12.600 GPTを選び、 それを送信すると、 マークダウンでストリーミングバックされる。 02:12.600 --> 02:17.310 その質問に対するGPTの回答が方向性だ。 02:17.610 --> 02:19.230 最後にもう一度、 訪問を楽しもう。 02:19.260 --> 02:20.190 とても素晴らしい。 02:20.310 --> 02:23.760 あー、 今回は選択肢が増えたような気がするけど、 まあいいや。 02:23.790 --> 02:24.480 そうではないかもしれない。 02:24.600 --> 02:25.710 おそらく覚えているだろう。 02:25.980 --> 02:29.640 クロードに同じ質問をすればいい。 02:29.640 --> 02:32.490 同じ質問に対するクロードの答えはこうだ。 02:32.640 --> 02:34.260 クロードの俳句を使ってね。 02:34.290 --> 02:37.950 そのためか、 回答はやや短く、 簡潔なものになっている。 02:37.950 --> 02:40.230 でも、 それってすごいことじゃない? 02:40.230 --> 02:40.890 クールだろ? 02:40.890 --> 02:42.300 我々はこの機能を構築したばかりだ。 02:42.330 --> 02:46.470 私たちは2つの異なるモデルの間を行き来し、 同じ質問をして回答を得ることができる。 02:46.560 --> 02:53.610 もしチャットUIを作りたいなら、 このチャットUIをいつか実行させればいい。 02:53.670 --> 02:55.710 便利な道具だよ。 02:56.820 --> 03:05.160 うーん、 それで、 そうだな、 双子座を単純にミックスに加えるという明らかな練習を想像できるだろう。 03:05.160 --> 03:05.670 なぜだ? 03:05.700 --> 03:06.450 想像がつくだろう。 03:06.450 --> 03:07.230 超簡単だよ。 03:07.230 --> 03:08.070 ただ加えるだけだ。 03:08.070 --> 03:09.470 双子座という選択肢もある。 03:09.470 --> 03:15.680 Geminiからのストリーミングバックのやり方はまだお見せしていませんが、 とてもよく似ていますし、 03:15.680 --> 03:22.820 ググればドキュメントがとてもわかりやすいのですぐにわかります。 03:22.820 --> 03:23.810 それはいいことだ。 03:24.770 --> 03:25.700 分かった。 03:25.700 --> 03:30.230 だから、 このラボの次のラストは大丈夫だ。 03:30.230 --> 03:35.810 前回作った会社案内ジェネレーターを使って、 ユーザー・インターフェースを作ってみよう。 03:35.840 --> 03:37.070 すごいことだと思わない? 03:37.250 --> 03:41.750 ええと、 だから、 今言ったように、 本当に、 本当に簡単なことなんだ。 03:41.750 --> 03:44.660 だから、 私は以前のバージョンのパンフレットを使うことに決めたんだ。 03:44.660 --> 03:48.200 ランディング・ページだけを使います。 03:48.200 --> 03:54.350 すべてのリンクを集めるという2段階のプロセスを行うつもりはない。 03:54.440 --> 04:02.210 ええと、 URL、 タイトル、 テキストを持つウェブサイト・クラスのシンプルなバージョンを用意するだけです。 04:02.210 --> 04:10.160 リクエスト・パッケージを使い、 素晴らしいビューティフル・スープを使って解析し、 どうでもいいものを取り除いてテキストを取得する。 04:10.160 --> 04:19.840 そして、 小さなgetcontextヘルパーがあり、 getcontentsヘルパーのようなもので、 ページのタイトルと本文を与えてくれる。 04:19.840 --> 04:21.160 これがヘルパークラスだ。 04:21.190 --> 04:22.180 忘れずに実行すること。 04:22.210 --> 04:23.170 システムプロンプト。 04:23.170 --> 04:28.750 あなたは、 企業のウェブサイトのランディングページの内容を分析し、 短いパンフレットを作成するシステムに入っている。 04:28.750 --> 04:31.180 マークダウンにはシステム・プロンプトがある。 04:31.180 --> 04:41.350 ここでは、 会社名、 URL、 モデルを受け取るパンフレットのストリーム機能を紹介します。 04:42.160 --> 04:46.510 会社名のパンフレットを作成してください。 04:46.510 --> 04:48.250 これが彼らのランディングページだ。 04:48.250 --> 04:54.370 そして、 このウェブサイト・ヘルパークラスを使ってURLを読み込み、 内容を取得する。 04:54.370 --> 04:56.140 だから、 これはすべて理にかなっている。 04:56.140 --> 04:59.230 ウェブサイトのコンテンツを取得するだけだ。 04:59.230 --> 05:00.790 それをプロンプトに変えるんだ。 05:00.790 --> 05:04.330 そしてGPTならGPTからストリーミングする。 05:04.360 --> 05:06.640 クロードなら、 クロードからストリーミングするつもりだ。 05:06.850 --> 05:15.510 ええと、 そうでなければエラーを発生させ、 これをジェネレーターにして、 チャンクごとに結果を出します。 05:16.830 --> 05:23.340 このチャンクをチャンクと呼ぶのは少し誤解を招くかもしれない。 05:23.370 --> 05:25.560 全額だ。 05:25.590 --> 05:31.260 だから、 この名前を変更した方がいいかもしれない。 05:32.160 --> 05:33.810 でも、 おわかりだろう。 05:33.840 --> 05:36.030 それでうまくいくはずだ。 05:36.420 --> 05:37.770 ええと、 それならいいんじゃない? 05:37.770 --> 05:39.420 もう古くなるから言うのはやめるよ。 05:39.450 --> 05:40.470 でも、 いいものだよ。 05:40.470 --> 05:45.090 これはもう、 関数をストリームパンフレットに置き換えるだけの簡単なことだ。 05:45.090 --> 05:46.560 そして、 ここにインプットを見ることができる。 05:46.560 --> 05:48.570 もちろん、 この3つのインプットはある。 05:48.600 --> 05:49.800 これで社名が決まった。 05:49.800 --> 05:51.420 ランディングページのURLがあります。 05:51.420 --> 05:53.490 そしてモデルを選ぶことができる。 05:53.610 --> 05:56.520 そして、 それを試してみよう。 05:56.970 --> 05:58.170 さあ、 行くぞ。 05:58.170 --> 05:59.190 ローカルで走っている。 05:59.190 --> 06:03.960 社名を抱きしめている顔を言えるように、 その話を持ち出そう。 06:06.240 --> 06:09.510 ランディングページのURL 06:09.750 --> 06:10.830 そして、 ただやるだけだ。 06:13.740 --> 06:19.040 Sを抱きしめる。 コとモデルを選択する。 06:19.040 --> 06:26.240 まずGPTに追加を依頼し、 送信を押すだけだ。 06:26.420 --> 06:27.920 そして、 こうなる。 06:27.920 --> 06:34.280 Huggingfaceの会社案内を、 ウェブスクレイプに基づきマークダウンしてお届けします。 06:34.280 --> 06:35.540 すべてそこにある。 06:35.540 --> 06:39.680 下の方にいろいろなリンクがある。 06:39.770 --> 06:43.220 ああ、 そのリンクは正しいようだ。 06:43.220 --> 06:44.270 うまくいきそうだ。 06:44.270 --> 06:49.700 これらのリンクのいくつかは、 その、 生成された方法のために機能しないように見える。 06:49.700 --> 06:53.900 それにしても、 かなり印象的なウェブページ、 印象的なパンフレットと言わざるを得ない。 06:53.900 --> 06:55.610 つまり、 大好きなんだ。 06:55.640 --> 06:58.520 クロードがこのクロード俳句で何をするか見てみよう。 06:58.550 --> 06:59.060 もちろんだ。 06:59.060 --> 07:05.120 だから、 スリムなモデルだが、 まったく問題ない。 07:05.120 --> 07:07.190 AIの未来を一緒に築いていきましょう。 07:07.280 --> 07:11.150 ええと、 俳句のパンフレットはとても良かったよ。 07:11.570 --> 07:13.880 ああ、 そうだ。 07:13.910 --> 07:14.840 私は。 07:14.840 --> 07:21.400 gradioを使うたびに、 そのシンプルさと効果に驚かされる。 07:21.400 --> 07:29.650 私たちはパンフレットを中心に、 さまざまなモデルを選べるユーザー・インターフェイスを構築しました。 07:29.860 --> 07:33.880 だから、 あなたにとってやるべきこと、 これをより良くする方法はたくさんある。 07:33.940 --> 07:38.260 先ほどの例だけでなく、 この例にも双子座を加えることができる。 07:38.410 --> 07:55.540 もう一つのアイデアは、 別の選択項目を追加して、 前回覚えているスタイルや口調を選択できるようにすることだ。 07:55.840 --> 08:04.390 それなら、 ドロップダウンから別のトーンを選んで、 そのトーンで会社案内を作成できるように設定したらどうだろう。 08:04.510 --> 08:07.330 それはとても簡単なことなんだ。 08:07.450 --> 08:08.410 だから試してみてほしい。 08:08.440 --> 08:08.980 そうしてくれ。 08:08.980 --> 08:14.920 そして、 このアプリケーションをますます機能性の高いものに強化していくのだ。 08:14.950 --> 08:16.930 だから、 それを楽しんでほしい。 08:16.930 --> 08:17.860 その後、 コードを確認する。 08:17.860 --> 08:18.880 だから私はそれを見ることができる。 08:18.880 --> 08:22.180 それではまた、 次回の講義でお会いしましょう。