Create langfuse and langsmith page (#131)

jp/guides/monitoring/integrate_external_ops_tools/integrate_langfuse.md

@@ -1,3 +1,61 @@
 # LangFuseの統合
 
-🚧 メンテナンス待機中
+### 1 Langfuseとは
+
+LangfuseはLLMアプリケーションの開発者がデバッグ、分析、反復等を使用してアプリケーションのパフォーマンスを向上させるためのツールです。
+
+{% hint style="info" %}
+Langfuseの公式サイト：[https://langfuse.com/](https://langfuse.com/)
+{% endhint %}
+
+***
+
+### 2 Langfuseの使い方
+
+1. Langfuseの[公式サイト](https://langfuse.com/)から登録し、ログインする。
+2. Langfuseからプロジェクトを作成します
+ログイン後、ホームページの **New** をクリックし、新たな**プロジェクト**を作成します。このプロジェクトは、Dify内の**アプリ**と連動したデータモニタリングに使用されます。
+
+<figure><img src="../../../.gitbook/assets/image (249).png" alt=""><figcaption><p>新たなプロジェクトを作成します。</p></figcaption></figure>
+
+プロジェクトの名前を付けます。
+
+<figure><img src="../../../.gitbook/assets/image (251).png" alt=""><figcaption><p>プロジェクトの名前を付けます。</p></figcaption></figure>
+
+3. プロジェクト認証情報の作成
+左のサイドバーでプロジェクト **設定** を見つける。
+
+<figure><img src="../../../.gitbook/assets/image (253).png" alt=""><figcaption><p>左のサイドバーをクリックします</p></figcaption></figure>
+
+**Create API Key**をクリックし，新たな認証情報を作ります。
+
+<figure><img src="../../../.gitbook/assets/image (252).png" alt=""><figcaption><p>プロジェクトのAPI Keyを作ります。</p></figcaption></figure>
+
+复制并保存 **Secret Key** ，**Public Key，Host**
+
+<figure><img src="../../../.gitbook/assets/image (254).png" alt=""><figcaption><p>获取 API Key 配置</p></figcaption></figure>
+
+4\. Dify アプリの中に Langfuse を設定します
+監視用のアプリのサイトメニューの**監視**ボタンをクリックし，**設定**をクリックします。
+
+<figure><img src="../../../.gitbook/assets/image (255).png" alt=""><figcaption><p>Langfuseを設定します</p></figcaption></figure>
+
+それから，Langfuse から作った **Secret Key, Public Key** と **Host** を**設定**の中に貼り付け、保存します。
+
+<figure><img src="../../../.gitbook/assets/image (256).png" alt=""><figcaption><p>Langfuseを設定します</p></figcaption></figure>
+
+保存に成功すると、現在のページで監視状態を見ることができます。
+
+<figure><img src="../../../.gitbook/assets/image (257).png" alt=""><figcaption><p>監視状態を見る</p></figcaption></figure>
+
+***
+
+### 3 Langfuse ページで監視データをチェックします
+
+設定した後， Difyのアプリや生産データは Langfuse の中にチェクをできます。
+
+<figure><img src="../../../.gitbook/assets/image (259).png" alt=""><figcaption><p>Dify 内でのアプリの調整</p></figcaption></figure>
+
+<figure><img src="../../../.gitbook/assets/image (258).png" alt=""><figcaption><p>Langfuse でアプリデータを見る</p></figcaption></figure>
+
+<figure><img src="../../../.gitbook/assets/image.png" alt=""><figcaption><p>Langfuse でアプリデータを見る</p></figcaption></figure>

jp/guides/monitoring/integrate_external_ops_tools/integrate_langsmith.md

@@ -1,6 +1,69 @@
 # LangSmithの統合
 
-🚧 メンテナンス中のためお待ちください
+### 1 LangSmithとは
 
-<用語>
+LangSmithはLLMアプリケーションの開発、コラボレーション、テスト、デプロイ、監視などのツールを提供するプラットフォームです。
-{LangSmith} -> {LangSmith}
+
+{% hint style="info" %}
+LangSmithの公式サイト：[https://www.langchain.com/langsmith](https://www.langchain.com/langsmith)
+{% endhint %}
+
+***
+
+### 2 LangSmithの使い方
+
+1. LangSmithの[公式サイト](https://www.langchain.com/langsmith)から登録し、ログインする。
+2. LangSmithからプロジェクトを作成します
+ログイン後、ホームページの **New Project** をクリックし、新たな**プロジェクト**を作成します。このプロジェクトは、Dify内の**アプリ**と連動したデータモニタリングに使用されます。
+
+<figure><img src="../../../.gitbook/assets/image (3).png" alt=""><figcaption><p>新たなプロジェクトを作成します。</p></figcaption></figure>
+
+作成する後、プロジェクトの中にチェクできます。
+
+<figure><img src="../../../.gitbook/assets/image (7).png" alt=""><figcaption><p>LangSmithの中にプロジェクトをチェクします。</p></figcaption></figure>
+
+3. プロジェクト認証情報の作成
+左のサイドバーでプロジェクト **設定** を見つける。
+
+<figure><img src="../../../.gitbook/assets/image (8).png" alt=""><figcaption><p>プロジェクトを設定し</p></figcaption></figure>
+
+**Create API Key**をクリックし，新たな認証情報を作ります。
+
+<figure><img src="../../../.gitbook/assets/image (3) (1).png" alt=""><figcaption><p>プロジェクトのAPI Keyを作ります。</p></figcaption></figure>
+
+**Personal Access Token** を選び，のちほとのAPI身分証明の時使えます。
+
+<figure><img src="../../../.gitbook/assets/image (5).png" alt=""><figcaption><p>Personal Access Tokenを選択します</p></figcaption></figure>
+
+新たなAPI keyをコピーし、保存します。
+
+<figure><img src="../../../.gitbook/assets/image (9).png" alt=""><figcaption><p>新たなAPI keyをコピーします</p></figcaption></figure>
+
+4. Dify アプリの中に LangSmith を設定します
+監視用のアプリのサイトメニューの**監視**ボタンをクリックし，**設定**をクリックします。
+
+<figure><img src="../../../.gitbook/assets/image (11).png" alt=""><figcaption><p>LangSmithを設定します</p></figcaption></figure>
+
+
+
+それから，LangSmith から作った **API Key** と**プロジェクト名**を**設定**の中に貼り付け、保存します。
+
+<figure><img src="../../../.gitbook/assets/image (12).png" alt=""><figcaption><p> LangSmithを設定します。</p></figcaption></figure>
+
+{% hint style="info" %}
+設定したプロジェクト名は LangSmith のいるプロジェクト名と必ず一致します。一致しない場合、データの同期時に LangSmith は自動的に新しいプロジェクトを作成します。
+{% endhint %}
+
+保存に成功すると、現在のページで監視状態を見ることができます。
+
+<figure><img src="../../../.gitbook/assets/image (15).png" alt=""><figcaption><p>監視状態を見る</p></figcaption></figure>
+
+### 3 LangSmith ページで監視データをチェックします
+
+設定した後， Difyのアプリや生産データは LangSmith の中にチェクをできます。
+
+<figure><img src="../../../.gitbook/assets/image (17).png" alt=""><figcaption><p>Dify内でのアプリの調整</p></figcaption></figure>
+
+<figure><img src="../../../.gitbook/assets/image (2).png" alt=""><figcaption><p>LangSmithでアプリデータを見る</p></figcaption></figure>
+
+<figure><img src="../../../.gitbook/assets/image (18).png" alt=""><figcaption><p>LangSmithでアプリデータを見る</p></figcaption></figure>