51
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Difyとは

Difyとは簡単にAIアプリを作ることができるプラットフォームです。
直感的なUIと豊富な機能を備えているので、エンジニアはもちろん、プログラミング未経験者でも簡単にAIアプリを作成できます。

作るもの

今回は、私が働いている株式会社Hajimariのホームページを学習させ、会社について教えてくれる簡易的なチャットボットを作成します。

作ってみよう

Difyにログイン

まず、公式サイトにアクセスし、右上にある「始める」からログインします。GoogleまたはGithubのアカウントでログインできます。

アプリを作成

ログイン後、「最初から作成」をクリックし、アプリのタイプとして「チャットボット」を選択します。
オーケストレーション方法は「Chatflow」を選び、アプリ名を入力して「作成する」を押します。

スクリーンショット 2024-06-24 4.11.19.png

作成後は以下のように、ユーザーの質問に対してGPT3.5 Turbo が回答してくれる構成になっています。

スクリーンショット 2024-06-24 4.32.31.png

ナレッジの作成

データソースの選択

次に、チャットボットの情報源となるナレッジを作成します。
画面上部の「ナレッジ」 > 「知識を作成」をクリックし、データソースとして「ウェブサイトから同期」を選びます。

スクリーンショット 2024-06-24 4.55.02.png

FireCrawlのAPIキーの取得

「ウェブサイトから同期」機能を使うにはFireCrawlというツールのAPIキーが必要です。
FireCrawlの公式サイトでアカウントを作成し、「Dashboard」 > 「API Keys」からAPIキーをコピーします。

FireCrawlのAPIキーを設定

Difyの「データソースの選択」ページに戻り、「Configure」 > 「Configure」を選択してAPIキーを貼り付けて保存します。
「Base URL」は空欄で大丈夫です。

スクリーンショット 2024-06-24 5.19.52.png

データの取得

APIキーが無事設定できたら以下のような画面になります。

スクリーンショット 2024-06-24 5.27.03.png

それぞれの項目の説明はこの記事から引用させて頂きます。

  • Crawl sub-pages: サブページもクロールするかどうかを指定します。
  • Limit: クロールするページの最大数を指定します(必須項目)。
  • Max depth: クロールの深さを指定します。
  • Exclude paths: クロールしないパスを指定します(例: blog/, about/)。
  • Include only paths: クロールするパスを指定します(例: articles/*)。
  • Extract only main content: メインコンテンツのみを抽出するかどうかを指定します(ヘッダー、ナビゲーション、フッターなどを除外)。

今回は以下のように設定しました。

スクリーンショット 2024-06-24 5.38.27.png

設定できたら「Run」をクリックします。
少し待つと以下のように取得してきたサイトのURLの一覧が表示されるので、ナレッジとして使用したいものを選択して「次へ」を押します。

スクリーンショット 2024-06-24 5.39.45.png

ナレッジのカスタマイズ

ナレッジとして使用したいものを選択すると、ナレッジのカスタマイズ画面が表示されます。
今回は簡易的なチャットボットなので、以下のように「自動」と「経済的」を選択して保存します。
これでナレッジの作成が完了です。

スクリーンショット 2024-06-24 5.43.49.png

ナレッジとアプリを紐づける

ナレッジの作成が完了したのでアプリとナレッジの紐付けを行なっていきます。
「スタジオ」ページに戻って、「開始」と「LLM」を結ぶ線をクリックして、「知識取得」を追加します。

スクリーンショット 2024-06-24 6.04.10.png

「知識」の右にある「+」ボタンをクリックして、先程作成したナレッジを選択します。
これでナレッジとアプリの紐付けが完了です。

スクリーンショット 2024-06-24 6.43.59.png

プロンプトの設定

最後に、紐付けたナレッジから回答を生成するようにプロンプトを設定していきます。
「知識取得」の右にある「LLM」を選択して、以下の設定を行います。

  • コンテキスト:result
  • SYSTEM:コンテキスト(ナレッジ)を基に回答を生成するよう指示する。

スクリーンショット 2024-06-24 6.38.01.png

動作確認!

「デバッグとプレビュー」をクリックするとチャット画面が表示されるので、質問して動作確認をしてみます。
試しにhajimariのビジョンについて聞いてみると、ちゃんと回答が生成されました!

スクリーンショット 2024-06-24 0.35.45.png

右上の「公開する」をクリックするとURLが発行され、誰でもこのチャットボットが使えるようになります。
他にもサイトに埋め込んだり、APIとして使用することも可能だそうです!
便利ですね!

まとめ

最後まで見て頂きありがとうございます!
今回初めてDifyを触ったのですが、簡易的なものとはいえ、わずか10分程度でチャットボットが作成できるのは驚きでした。
Difyを使ってWeb開発の幅を広げられるよう、もっと勉強していこうと思います!

51
44
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
51
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?