> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coreweave.com/llms.txt
> Use this file to discover all available pages before exploring further.

# トレース表示の確認とカスタマイズ

> UI で Call を確認し、トレースデータの表示方法をカスタマイズします

W\&B Weave で Call を作成した後、個別の Call を開いて入力、出力、メタデータを確認することがよくあります。このページでは、UI または SDK で Call を確認する方法と、`weave.Markdown` を使用して Weave が UI でトレースデータをレンダリングする方法をカスタマイズする手順を説明します。以下のタブから、ワークフローに適したインターフェースを選択してください。

<Tabs>
  <Tab title="Web アプリ">
    UI で Call を確認するには:

    1. [Forge](https://forge.coreweave.com/wandb) にアクセスし、project を選択します。
    2. Weave プロジェクトのサイドバーで、**Traces** をクリックします。
    3. 表で確認したい Call を検索します。
    4. Call をクリックして詳細ページを開きます。

    トレースビューの詳細については、[Weave のトレースビューの操作](/ja/products/wandb/weave/guides/tracking/trace-tree)を参照してください。
  </Tab>

  <Tab title="Python">
    W\&B Weave Python SDK を使用して Call を確認するには、[`get_call`](/ja/products/wandb/weave/reference/python-sdk/trace/weave_client#method-get_call) メソッドを使用します:

    ```python lines theme={"system"}
    import weave

    # クライアントを初期化します
    client = weave.init("your-project-name")

    # ID を指定して特定の Call を取得します
    call = client.get_call("call-uuid-here")

    print(call)
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript twoslash lines theme={"system"}
    // @noErrors
    import * as weave from 'weave'

    // クライアントを初期化します
    const client = await weave.init('intro-example')

    // ID を指定して特定の Call を取得します
    const call = await client.getCall('call-uuid-here')

    console.log(call)
    ```
  </Tab>

  <Tab title="HTTP API">
    サービス API を使用して Call を確認するには、[`/call/read`](/ja/products/wandb/weave/reference/service-api/calls/call-read) エンドポイントにリクエストを送信します。

    ```bash theme={"system"}
    curl -L 'https://trace.wandb.ai/call/read' \
    -H 'Content-Type: application/json' \
    -H 'Accept: application/json' \
    -d '{
        "project_id": "string",
        "id": "string",
    }'
    ```
  </Tab>
</Tabs>

<h2 id="customize-rendered-traces-with-weavemarkdown">
  `weave.Markdown` でレンダリングされるトレースをカスタマイズする
</h2>

Call を表示できるようになったら、UI での入力と出力の表示方法を調整できます。`weave.Markdown` を使用すると、元のデータを失わずに、Weave でのトレース情報の表示をカスタマイズできます。これにより、基になるデータ構造を保持しながら、入力と出力を読みやすい書式付きコンテンツのブロックとしてレンダリングできます。

<Tabs>
  <Tab title="Python">
    `@weave.op` デコレーターで `postprocess_inputs` 関数と `postprocess_output` 関数を使用して、トレースデータの書式を設定します。次のコード例では、後処理関数を使用して、Weave で Call をより読みやすい書式でレンダリングします。

    ```python lines theme={"system"}
    import weave

    def postprocess_inputs(query) -> weave.Markdown:
        search_box = f"""
    **Search Query:**
    ``+`
    {query}
    ``+`
    """
        return {"search_box": weave.Markdown(search_box),
                "query": query}

    def postprocess_output(docs) -> weave.Markdown:
        formatted_docs = f"""
    # {docs[0]["title"]}

    {docs[0]["content"]}

    [Read more]({docs[0]["url"]})

    ---

    # {docs[1]["title"]}

    {docs[1]["content"]}

    [Read more]({docs[1]["url"]})
    """
        return weave.Markdown(formatted_docs)

    @weave.op(
        postprocess_inputs=postprocess_inputs,
        postprocess_output=postprocess_output,
    )
    def rag_step(query):
        # S&P 500 の構成企業に関する新聞記事の例 
        docs = [
            {
                "title": "OpenAI",
                "content": "OpenAI is a company that makes AI models.",
                "url": "https://www.openai.com",
            },
            {
                "title": "Google",
                "content": "Google is a company that makes search engines.",
                "url": "https://www.google.com",
            },
        ]
        return docs

    if __name__ == "__main__":
        weave.init('markdown_renderers')
        rag_step("Tell me about OpenAI")
    ```
  </Tab>

  <Tab title="TypeScript">
    ```plaintext theme={"system"}
    This feature is not available in the TypeScript SDK yet.
    ```
  </Tab>
</Tabs>

op を実行すると、Weave は Call の詳細ページで、書式設定された Markdown を元のデータとともにレンダリングします。次のスクリーンショットでは、書式設定前と書式設定後の出力が並んで表示されています。

<img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/weave/_media/md-call-render.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=1480c4a1d422367033a540959562e759" alt="コード例を使用して Weights & Biases UI にレンダリングされた Call。" width="1372" height="1980" data-path="products/wandb/weave/_media/md-call-render.png" />
