Buckets:

hf-doc-build
/

doc-dev

Files

xet

hf-doc-build/doc-dev / hub /pr_2521 /en /spaces-sdks-docker-langfuse.html

HuggingFaceDocBuilder

about 1 month ago

download

raw

35.8 kB

	<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"Langfuse on Spaces","local":"langfuse-on-spaces","sections":[{"title":"What is Langfuse?","local":"what-is-langfuse","sections":[],"depth":2},{"title":"Why LLM Observability?","local":"why-llm-observability","sections":[],"depth":2},{"title":"Step 1: Set up Langfuse on Spaces","local":"step-1-set-up-langfuse-on-spaces","sections":[{"title":"User Access","local":"user-access","sections":[{"title":"1. (Recommended) Hugging Face native org-level OAuth restrictions","local":"1-recommended-hugging-face-native-org-level-oauth-restrictions","sections":[],"depth":4},{"title":"2. Manual access control","local":"2-manual-access-control","sections":[],"depth":4}],"depth":3}],"depth":2},{"title":"Step 2: Use Langfuse","local":"step-2-use-langfuse","sections":[{"title":"Monitor Any Application","local":"monitor-any-application","sections":[],"depth":3},{"title":"Example 1: Trace Calls to Inference Providers","local":"example-1-trace-calls-to-inference-providers","sections":[],"depth":3},{"title":"Example 2: Monitor a Gradio Application","local":"example-2-monitor-a-gradio-application","sections":[],"depth":3}],"depth":2},{"title":"Step 3: View Traces in Langfuse","local":"step-3-view-traces-in-langfuse","sections":[],"depth":2},{"title":"Additional Resources and Support","local":"additional-resources-and-support","sections":[],"depth":2}],"depth":1}">
	<link href="/docs/hub/pr_2521/en/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/entry/start.d19e5ca7.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/scheduler.409792a1.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/singletons.1ece723a.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/index.0f0d9f26.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/paths.a67d9216.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/entry/app.98ab229a.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/preload-helper.78e52d9f.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/index.92d389ff.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/nodes/0.7799902b.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/each.e59479a4.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/nodes/222.86d4945b.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/CopyLLMTxtMenu.dcf7fb47.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/MermaidChart.svelte_svelte_type_style_lang.0c189c7e.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/CodeBlock.5ed269c1.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"Langfuse on Spaces","local":"langfuse-on-spaces","sections":[{"title":"What is Langfuse?","local":"what-is-langfuse","sections":[],"depth":2},{"title":"Why LLM Observability?","local":"why-llm-observability","sections":[],"depth":2},{"title":"Step 1: Set up Langfuse on Spaces","local":"step-1-set-up-langfuse-on-spaces","sections":[{"title":"User Access","local":"user-access","sections":[{"title":"1. (Recommended) Hugging Face native org-level OAuth restrictions","local":"1-recommended-hugging-face-native-org-level-oauth-restrictions","sections":[],"depth":4},{"title":"2. Manual access control","local":"2-manual-access-control","sections":[],"depth":4}],"depth":3}],"depth":2},{"title":"Step 2: Use Langfuse","local":"step-2-use-langfuse","sections":[{"title":"Monitor Any Application","local":"monitor-any-application","sections":[],"depth":3},{"title":"Example 1: Trace Calls to Inference Providers","local":"example-1-trace-calls-to-inference-providers","sections":[],"depth":3},{"title":"Example 2: Monitor a Gradio Application","local":"example-2-monitor-a-gradio-application","sections":[],"depth":3}],"depth":2},{"title":"Step 3: View Traces in Langfuse","local":"step-3-view-traces-in-langfuse","sections":[],"depth":2},{"title":"Additional Resources and Support","local":"additional-resources-and-support","sections":[],"depth":2}],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <div class="items-center shrink-0 min-w-[100px] max-sm:min-w-[50px] justify-end ml-auto flex" style="float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"><div class="inline-flex rounded-md max-sm:rounded-sm"><button class="inline-flex items-center gap-1 h-7 max-sm:h-7 px-2 max-sm:px-1.5 text-sm font-medium text-gray-800 border border-r-0 rounded-l-md max-sm:rounded-l-sm border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-live="polite"><span class="inline-flex items-center justify-center rounded-md p-0.5 max-sm:p-0 hover:text-gray-800 dark:hover:text-gray-200"><svg class="sm:size-3.5 size-3" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg></span> <span>Copy page</span></button> <button class="inline-flex items-center justify-center w-6 max-sm:w-5 h-7 max-sm:h-7 disabled:pointer-events-none text-sm text-gray-500 hover:text-gray-700 dark:hover:text-white rounded-r-md max-sm:rounded-r-sm border border-l transition border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-haspopup="menu" aria-expanded="false" aria-label="Open copy menu"><svg class="transition-transform text-gray-400 overflow-visible sm:size-3.5 size-3 rotate-0" width="1em" height="1em" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="currentColor"></path></svg></button></div> </div> <h1 class="relative group"><a id="langfuse-on-spaces" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#langfuse-on-spaces"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Langfuse on Spaces</span></h1> <p data-svelte-h="svelte-vy9kw">This guide shows you how to deploy Langfuse on Hugging Face Spaces and start instrumenting your LLM application for observability. This integration helps you to experiment with LLM APIs on the Hugging Face Hub, manage your prompts in one place, and evaluate model outputs.</p> <h2 class="relative group"><a id="what-is-langfuse" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#what-is-langfuse"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>What is Langfuse?</span></h2> <p data-svelte-h="svelte-1nkjp04"><a href="https://langfuse.com" rel="nofollow">Langfuse</a> is an open-source LLM engineering platform that helps teams collaboratively debug, evaluate, and iterate on their LLM applications.</p> <p data-svelte-h="svelte-8ggida">Key features of Langfuse include LLM tracing to capture the full context of your application’s execution flow, prompt management for centralized and collaborative prompt iteration, evaluation metrics to assess output quality, dataset creation for testing and benchmarking, and a playground to experiment with prompts and model configurations.</p> <p data-svelte-h="svelte-2bxtk"><em>This video is a 10 min walkthrough of the Langfuse features:</em></p> <iframe width="700" height="394" src="https://www.youtube.com/embed/2E8iTvGo9Hs?si=i_mPeArwkWc5_4EO" title="10 min Walkthrough of Langfuse – Open Source LLM Observability, Evaluation, and Prompt Management" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe> <h2 class="relative group"><a id="why-llm-observability" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#why-llm-observability"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Why LLM Observability?</span></h2> <ul data-svelte-h="svelte-1jn2keu"><li>As language models become more prevalent, understanding their behavior and performance is important.</li> <li><strong>LLM observability</strong> involves monitoring and understanding the internal states of an LLM application through its outputs.</li> <li>It is essential for addressing challenges such as:
	<ul><li><strong>Complex control flows</strong> with repeated or chained calls, making debugging challenging.</li> <li><strong>Non-deterministic outputs</strong>, adding complexity to consistent quality assessment.</li> <li><strong>Varied user intents</strong>, requiring deep understanding to improve user experience.</li></ul></li> <li>Building LLM applications involves intricate workflows, and observability helps in managing these complexities.</li></ul> <h2 class="relative group"><a id="step-1-set-up-langfuse-on-spaces" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#step-1-set-up-langfuse-on-spaces"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Step 1: Set up Langfuse on Spaces</span></h2> <p data-svelte-h="svelte-151jv6s">The Langfuse Hugging Face Space allows you to get up and running with a deployed version of Langfuse with just a few clicks.</p> <a href="https://huggingface.co/new-space?template=langfuse/langfuse-template-space" data-svelte-h="svelte-11txfe0"><img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/deploy-to-spaces-lg.svg"></a> <p data-svelte-h="svelte-l3pd7w">To get started, click the button above or follow these steps:</p> <ol data-svelte-h="svelte-awap9y"><li>Create a <a href="https://huggingface.co/new-space" rel="nofollow"><strong>new Hugging Face Space</strong></a></li> <li>Select <strong>Docker</strong> as the Space SDK</li> <li>Select <strong>Langfuse</strong> as the Space template</li> <li>Attach a <strong><a href="https://huggingface.co/docs/hub/storage-buckets" rel="nofollow">Storage Bucket</a></strong> to ensure your Langfuse data is persisted across restarts</li> <li>Ensure the space is set to <strong>public</strong> visibility so Langfuse API/SDK’s can access the app (see note below for more details)</li> <li>[Optional but recommended] For a secure deployment, replace the default values of the <strong>environment variables</strong>:
	<ul><li><code>NEXTAUTH_SECRET</code>: Used to validate login session cookies, generate secret with at least 256 entropy using <code>openssl rand -base64 32</code>.</li> <li><code>SALT</code>: Used to salt hashed API keys, generate secret with at least 256 entropy using <code>openssl rand -base64 32</code>.</li> <li><code>ENCRYPTION_KEY</code>: Used to encrypt sensitive data. Must be 256 bits, 64 string characters in hex format, generate via: <code>openssl rand -hex 32</code>.</li></ul></li> <li>Click <strong>Create Space</strong>!</li></ol> <p data-svelte-h="svelte-132ufd1"><img src="https://langfuse.com/images/cookbook/huggingface/huggingface-space-setup.png" alt="Clone the Langfuse Space"></p> <h3 class="relative group"><a id="user-access" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#user-access"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>User Access</span></h3> <p data-svelte-h="svelte-1ojzvkr">Your Langfuse Space is pre-configured with Hugging Face OAuth for secure authentication, so you’ll need to authorize <code>read</code> access to your Hugging Face account upon first login by following the instructions in the pop-up.</p> <p data-svelte-h="svelte-6pwoe1">Once inside the app, you can use <a href="https://langfuse.com/docs/rbac" rel="nofollow">the native Langfuse features</a> to manage Organizations, Projects, and Users.</p> <p data-svelte-h="svelte-1vt3nv">The Langfuse space <em>must</em> be set to <strong>public</strong> visibility so that Langfuse API/SDK’s can reach the app. This means that by default, <em>any</em> logged-in Hugging Face user will be able to access the Langfuse space.</p> <p data-svelte-h="svelte-hwuny8">You can prevent new users from signing up and accessing the space via two different methods:</p> <h4 class="relative group"><a id="1-recommended-hugging-face-native-org-level-oauth-restrictions" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#1-recommended-hugging-face-native-org-level-oauth-restrictions"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>1. (Recommended) Hugging Face native org-level OAuth restrictions</span></h4> <p data-svelte-h="svelte-1vqu6qn">If you want to restrict access to only members of a specified organization(s), you can simply set the <code>hf_oauth_authorized_org</code> metadata field in the space’s <code>README.md</code> file, as shown <a href="https://huggingface.co/docs/hub/spaces-oauth#create-an-oauth-app" rel="nofollow">here</a>.</p> <p data-svelte-h="svelte-108e7i2">Once configured, only users who are members of the specified organization(s) will be able to access the space.</p> <h4 class="relative group"><a id="2-manual-access-control" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#2-manual-access-control"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>2. Manual access control</span></h4> <p data-svelte-h="svelte-qogabc">You can also restrict access on a per-user basis by setting the <code>AUTH_DISABLE_SIGNUP</code> environment variable to <code>true</code>. Be sure that you’ve first signed in & authenticated to the space before setting this variable else your own user profile won’t be able to authenticate.</p> <blockquote class="tip" data-svelte-h="svelte-1s6dphs"><p><strong>Note:</strong> If you’ve set the <code>AUTH_DISABLE_SIGNUP</code> environment variable to <code>true</code> to restrict access, and want to grant a new user access to the space, you’ll need to first set it back to <code>false</code> (wait for rebuild to complete), add the user and have them authenticate with OAuth, and then set it back to <code>true</code>.</p></blockquote> <h2 class="relative group"><a id="step-2-use-langfuse" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#step-2-use-langfuse"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Step 2: Use Langfuse</span></h2> <p data-svelte-h="svelte-fyf0p4">Now that you have Langfuse running, you can start instrumenting your LLM application to capture traces and manage your prompts. Let’s see how!</p> <h3 class="relative group"><a id="monitor-any-application" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#monitor-any-application"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Monitor Any Application</span></h3> <p data-svelte-h="svelte-139sagn">Langfuse is model agnostic and can be used to trace any application. Follow the <a href="https://langfuse.com/docs" rel="nofollow">get-started guide</a> in Langfuse documentation to see how you can instrument your code.</p> <p data-svelte-h="svelte-i1c0fr">Langfuse maintains native integrations with many popular LLM frameworks, including <a href="https://langfuse.com/docs/integrations/langchain/tracing" rel="nofollow">Langchain</a>, <a href="https://langfuse.com/docs/integrations/llama-index/get-started" rel="nofollow">LlamaIndex</a> and <a href="https://langfuse.com/docs/integrations/openai/python/get-started" rel="nofollow">OpenAI</a> and offers Python and JS/TS SDKs to instrument your code. Langfuse also offers various API endpoints to ingest data and has been integrated by other open source projects such as <a href="https://langfuse.com/docs/integrations/langflow" rel="nofollow">Langflow</a>, <a href="https://langfuse.com/docs/integrations/dify" rel="nofollow">Dify</a> and <a href="https://langfuse.com/docs/integrations/haystack/get-started" rel="nofollow">Haystack</a>.</p> <h3 class="relative group"><a id="example-1-trace-calls-to-inference-providers" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#example-1-trace-calls-to-inference-providers"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Example 1: Trace Calls to Inference Providers</span></h3> <p data-svelte-h="svelte-17w8vd9">As a simple example, here’s how to trace LLM calls to <a href="https://huggingface.co/docs/inference-providers/en/index" rel="nofollow">Inference Providers</a> using the Langfuse Python SDK.</p> <p data-svelte-h="svelte-114kpko">Be sure to first configure your <code>LANGFUSE_HOST</code>, <code>LANGFUSE_PUBLIC_KEY</code> and <code>LANGFUSE_SECRET_KEY</code> environment variables, and make sure you’ve <a href="https://huggingface.co/docs/huggingface_hub/en/quick-start#authentication" rel="nofollow">authenticated with your Hugging Face account</a>.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-python "><!-- HTML_TAG_START --><span class="hljs-keyword">from</span> langfuse.openai <span class="hljs-keyword">import</span> openai
	<span class="hljs-keyword">from</span> huggingface_hub <span class="hljs-keyword">import</span> get_token

	client = openai.OpenAI(
	base_url=<span class="hljs-string">"https://router.huggingface.co/hf-inference/models/meta-llama/Llama-3.3-70B-Instruct/v1"</span>,
	api_key=get_token(),
	)

	messages = [{<span class="hljs-string">"role"</span>: <span class="hljs-string">"user"</span>, <span class="hljs-string">"content"</span>: <span class="hljs-string">"What is observability for LLMs?"</span>}]

	response = client.chat.completions.create(
	model=<span class="hljs-string">"meta-llama/Llama-3.3-70B-Instruct"</span>,
	messages=messages,
	max_tokens=<span class="hljs-number">100</span>,
	)<!-- HTML_TAG_END --></pre></div> <h3 class="relative group"><a id="example-2-monitor-a-gradio-application" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#example-2-monitor-a-gradio-application"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Example 2: Monitor a Gradio Application</span></h3> <p data-svelte-h="svelte-6vxni8">We created a Gradio template space that shows how to create a simple chat application using a Hugging Face model and trace model calls and user feedback in Langfuse - without leaving Hugging Face.</p> <a href="https://huggingface.co/spaces/langfuse/langfuse-gradio-example-template?duplicate=true" data-svelte-h="svelte-8dloj9"><img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/deploy-to-spaces-lg.svg"></a> <p data-svelte-h="svelte-mjg2ze">To get started, <a href="https://huggingface.co/spaces/langfuse/langfuse-gradio-example-template?duplicate=true" rel="nofollow">duplicate this Gradio template space</a> and follow the instructions in the <a href="https://huggingface.co/spaces/langfuse/langfuse-gradio-example-template/blob/main/README.md" rel="nofollow">README</a>.</p> <h2 class="relative group"><a id="step-3-view-traces-in-langfuse" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#step-3-view-traces-in-langfuse"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Step 3: View Traces in Langfuse</span></h2> <p data-svelte-h="svelte-yven2u">Once you have instrumented your application, and ingested traces or user feedback into Langfuse, you can view your traces in Langfuse.</p> <p data-svelte-h="svelte-vd8u74"><img src="https://langfuse.com/images/cookbook/huggingface/huggingface-gradio-example-trace.png" alt="Example trace with Gradio"></p> <p data-svelte-h="svelte-6epg7l"><em><a href="https://langfuse-langfuse-template-space.hf.space/project/cm4r1ajtn000a4co550swodxv/traces/9cdc12fb-71bf-4074-ab0b-0b8d212d839f?timestamp=2024-12-20T12%3A12%3A50.089Z&view=preview" rel="nofollow">Example trace in the Langfuse UI</a></em></p> <h2 class="relative group"><a id="additional-resources-and-support" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#additional-resources-and-support"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Additional Resources and Support</span></h2> <ul data-svelte-h="svelte-1qfhr7c"><li><a href="https://langfuse.com/docs" rel="nofollow">Langfuse documentation</a></li> <li><a href="https://github.com/langfuse/langfuse" rel="nofollow">Langfuse GitHub repository</a></li> <li><a href="https://langfuse.com/discord" rel="nofollow">Langfuse Discord</a></li> <li><a href="https://huggingface.co/spaces/langfuse/langfuse-template-space" rel="nofollow">Langfuse template Space</a></li></ul> <p data-svelte-h="svelte-nfywgw">For more help, open a support thread on <a href="https://langfuse.com/discussions" rel="nofollow">GitHub discussions</a> or <a href="https://github.com/langfuse/langfuse/issues" rel="nofollow">open an issue</a>.</p> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/hub-docs/blob/main/docs/hub/spaces-sdks-docker-langfuse.md" target="_blank"><svg class="mr-1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M31,16l-7,7l-1.41-1.41L28.17,16l-5.58-5.59L24,9l7,7z"></path><path d="M1,16l7-7l1.41,1.41L3.83,16l5.58,5.59L8,23l-7-7z"></path><path d="M12.419,25.484L17.639,6.552l1.932,0.518L14.351,26.002z"></path></svg> <span data-svelte-h="svelte-zjs2n5"><span class="underline">Update</span> on GitHub</span></a> <p></p>

	<script>
	{
	__sveltekit_1bollga = {
	assets: "/docs/hub/pr_2521/en",
	base: "/docs/hub/pr_2521/en",
	env: {}
	};

	const element = document.currentScript.parentElement;

	const data = [null,null];

	Promise.all([
	import("/docs/hub/pr_2521/en/_app/immutable/entry/start.d19e5ca7.js"),
	import("/docs/hub/pr_2521/en/_app/immutable/entry/app.98ab229a.js")
	]).then(([kit, app]) => {
	kit.start(app, element, {
	node_ids: [0, 222],
	data,
	form: null,
	error: null
	});
	});
	}
	</script>

Xet Storage Details

Size:: 35.8 kB
Xet hash:: 775eb4b29a5ff70e5980e490fe40c1cb4f1114bcbbc52b24c0e924ba17f59a57

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.