Buckets:
| <meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"Webhooks Server","local":"webhooks-server","sections":[{"title":"Einen Endpunkt erstellen","local":"einen-endpunkt-erstellen","sections":[],"depth":2},{"title":"Konfigurieren eines Webhook","local":"konfigurieren-eines-webhook","sections":[],"depth":2},{"title":"Bereitstellung in einem Space","local":"bereitstellung-in-einem-space","sections":[],"depth":2},{"title":"Erweiterte Nutzung","local":"erweiterte-nutzung","sections":[{"title":"Mehrere Endpunkte","local":"mehrere-endpunkte","sections":[],"depth":3},{"title":"Benutzerdefinierter Server","local":"benutzerdefinierter-server","sections":[],"depth":3}],"depth":2}],"depth":1}"> | |
| <link href="/docs/huggingface_hub/pr_4166/de/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4166/de/_app/immutable/entry/start.a1d7fe9c.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4166/de/_app/immutable/chunks/scheduler.de5597d1.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4166/de/_app/immutable/chunks/singletons.56253eb9.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4166/de/_app/immutable/chunks/paths.93148af8.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4166/de/_app/immutable/entry/app.5993e179.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4166/de/_app/immutable/chunks/preload-helper.1a3dff24.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4166/de/_app/immutable/chunks/index.bf1177c2.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4166/de/_app/immutable/nodes/0.04dc0571.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4166/de/_app/immutable/chunks/each.e59479a4.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4166/de/_app/immutable/nodes/14.31f3b2a4.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4166/de/_app/immutable/chunks/MermaidChart.svelte_svelte_type_style_lang.fdfedcfd.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4166/de/_app/immutable/chunks/CodeBlock.777502b8.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"Webhooks Server","local":"webhooks-server","sections":[{"title":"Einen Endpunkt erstellen","local":"einen-endpunkt-erstellen","sections":[],"depth":2},{"title":"Konfigurieren eines Webhook","local":"konfigurieren-eines-webhook","sections":[],"depth":2},{"title":"Bereitstellung in einem Space","local":"bereitstellung-in-einem-space","sections":[],"depth":2},{"title":"Erweiterte Nutzung","local":"erweiterte-nutzung","sections":[{"title":"Mehrere Endpunkte","local":"mehrere-endpunkte","sections":[],"depth":3},{"title":"Benutzerdefinierter Server","local":"benutzerdefinierter-server","sections":[],"depth":3}],"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="webhooks-server" 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="#webhooks-server"><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>Webhooks Server</span></h1> <p data-svelte-h="svelte-syi17b">Webhooks sind ein Grundpfeiler für MLOps-bezogene Funktionen. Sie ermöglichen es Ihnen, auf neue Änderungen in bestimmten Repos oder auf alle Repos, die bestimmten Benutzern/Organisationen gehören, die Sie interessieren, zu hören. Dieser Leitfaden erklärt, wie Sie den <code>huggingface_hub</code> nutzen können, um einen Server zu erstellen, der auf Webhooks hört und ihn in einen Space zu implementieren. Es wird davon ausgegangen, dass Sie mit dem Konzept der Webhooks auf dem Huggingface Hub vertraut sind. Um mehr über Webhooks selbst zu erfahren, können Sie zuerst diesen <a href="https://huggingface.co/docs/hub/webhooks" rel="nofollow">Leitfaden</a> lesen.</p> <p data-svelte-h="svelte-16brqny">Die Basis-Klasse, die wir in diesem Leitfaden verwenden werden, ist der <code>WebhooksServer()</code>. Es handelt sich um eine Klasse, mit der sich ein Server leicht konfigurieren lässt, der Webhooks vom Huggingface Hub empfangen kann. Der Server basiert auf einer Gradio-App. Er verfügt über eine Benutzeroberfläche zur Anzeige von Anweisungen für Sie oder Ihre Benutzer und eine API zum Hören auf Webhooks.</p> <blockquote class="tip" data-svelte-h="svelte-iqtm77"><p>Um ein Beispiel eines laufenden Webhook-Servers zu sehen, werfen Sie einen Blick auf den <a href="https://huggingface.co/spaces/spaces-ci-bot/webhook" rel="nofollow">Spaces CI Bot</a>. Es handelt sich um einen Space, der kurzlebige Umgebungen startet, wenn ein PR in einem Space geöffnet wird.</p></blockquote> <blockquote class="warning" data-svelte-h="svelte-f7fpc7"><p>Dies ist ein <a href="../package_reference/environment_variables#hfhubdisableexperimentalwarning">experimentelles Feature</a>. Das bedeutet, dass wir noch daran arbeiten, die API zu verbessern. Es könnten in der Zukunft ohne vorherige Ankündigung Änderungen vorgenommen werden. Stellen Sie sicher, dass Sie die Version des <code>huggingface_hub</code> in Ihren Anforderungen festlegen.</p></blockquote> <h2 class="relative group"><a id="einen-endpunkt-erstellen" 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="#einen-endpunkt-erstellen"><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>Einen Endpunkt erstellen</span></h2> <p data-svelte-h="svelte-dy9hz4">Das Implementieren eines Webhook-Endpunkts ist so einfach wie das Dekorieren einer Funktion. Lassen Sie uns ein erstes Beispiel betrachten, um die Hauptkonzepte zu erklären:</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=""><!-- HTML_TAG_START --><span class="hljs-comment"># app.py</span> | |
| <span class="hljs-keyword">from</span> huggingface_hub <span class="hljs-keyword">import</span> webhook_endpoint, WebhookPayload | |
| <span class="hljs-meta">@webhook_endpoint</span> | |
| <span class="hljs-keyword">async</span> <span class="hljs-keyword">def</span> <span class="hljs-title function_">trigger_training</span>(<span class="hljs-params">payload: WebhookPayload</span>) -> <span class="hljs-literal">None</span>: | |
| <span class="hljs-keyword">if</span> payload.repo.<span class="hljs-built_in">type</span> == <span class="hljs-string">"dataset"</span> <span class="hljs-keyword">and</span> payload.event.action == <span class="hljs-string">"update"</span>: | |
| <span class="hljs-comment"># Einen Trainingsjob auslösen, wenn ein Datensatz aktualisiert wird</span> | |
| ...<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1udi1nb">Speichern Sie diesen Ausschnitt in einer Datei namens <code>'app.py'</code> und führen Sie ihn mit <code>'python app.py'</code> aus. Sie sollten eine Nachricht wie diese sehen:</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=""><!-- HTML_TAG_START -->Webhook secret is not defined. This means your webhook endpoints will be open to everyone. | |
| To add a secret, set `WEBHOOK_SECRET` as environment variable or pass it at initialization: | |
| `app = WebhooksServer(webhook_secret='my_secret', ...)` | |
| For more details about webhook secrets, please refer to https://huggingface.co/docs/hub/webhooks#webhook-secret. | |
| Running on local URL: http://127.0.0.1:7860 | |
| Running on public URL: https://1fadb0f52d8bf825fc.gradio.live | |
| This share link expires in 72 hours. For free permanent hosting and GPU upgrades (NEW!), check out Spaces: https://huggingface.co/spaces | |
| Webhooks are correctly setup and ready to use: | |
| - POST https://1fadb0f52d8bf825fc.gradio.live/webhooks/trigger_training | |
| Go to https://huggingface.co/settings/webhooks to setup your webhooks.<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1tlyxs6">Gute Arbeit! Sie haben gerade einen Webhook-Server gestartet! Lassen Sie uns genau aufschlüsseln, was passiert ist:</p> <ol data-svelte-h="svelte-wf7tf8"><li>Durch das Dekorieren einer Funktion mit <code>webhook_endpoint()</code> wurde im Hintergrund ein <code>WebhooksServer()</code>-Objekt erstellt. Wie Sie sehen können, handelt es sich bei diesem Server um eine Gradio-App, die unter <a href="http://127.0.0.1:7860" rel="nofollow">http://127.0.0.1:7860</a> läuft. Wenn Sie diese URL in Ihrem Browser öffnen, sehen Sie eine Landing Page mit Anweisungen zu den registrierten Webhooks.</li> <li>Eine Gradio-App ist im Kern ein FastAPI-Server. Eine neue POST-Route <code>/webhooks/trigger_training</code> wurde hinzugefügt. Dies ist die Route, die auf Webhooks hört und die Funktion <code>trigger_training</code> ausführt, wenn sie ausgelöst wird. FastAPI wird das Payload automatisch parsen und es der Funktion als <code>WebhookPayload</code>-Objekt übergeben. Dies ist ein <code>pydantisches</code> Objekt, das alle Informationen über das Ereignis enthält, das den Webhook ausgelöst hat.</li> <li>Die Gradio-App hat auch einen Tunnel geöffnet, um Anfragen aus dem Internet zu empfangen. Das Interessante daran ist: Sie können einen Webhook auf <a href="https://huggingface.co/settings/webhooks" rel="nofollow">https://huggingface.co/settings/webhooks</a> konfigurieren, der auf Ihren lokalen Rechner zeigt. Dies ist nützlich zum Debuggen Ihres Webhook-Servers und zum schnellen Iterieren, bevor Sie ihn in einem Space bereitstellen.</li> <li>Schließlich teilen Ihnen die Logs auch mit, dass Ihr Server derzeit nicht durch ein Geheimnis gesichert ist. Dies ist für das lokale Debuggen nicht problematisch, sollte aber für später berücksichtigt werden.</li></ol> <blockquote class="warning" data-svelte-h="svelte-qsm983"><p>Standardmäßig wird der Server am Ende Ihres Skripts gestartet. Wenn Sie es in einem Notizbuch ausführen, können Sie den Server manuell starten, indem Sie <code>decorated_function.run()</code> aufrufen. Da ein einzigartiger Server verwendet wird, müssen Sie den Server nur einmal starten, auch wenn Sie mehrere Endpunkte haben.</p></blockquote> <h2 class="relative group"><a id="konfigurieren-eines-webhook" 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="#konfigurieren-eines-webhook"><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>Konfigurieren eines Webhook</span></h2> <p data-svelte-h="svelte-celrz4">Jetzt, da Sie einen Webhook-Server am Laufen haben, möchten Sie einen Webhook konfigurieren, um Nachrichten zu empfangen. | |
| Gehen Sie zu <a href="https://huggingface.co/settings/webhooks" rel="nofollow">https://huggingface.co/settings/webhooks</a>, klicken Sie auf “Add a new webhook” und konfigurieren Sie Ihren Webhook. Legen Sie die Ziel-Repositories fest, die Sie beobachten möchten, und die Webhook-URL, hier <code>https://1fadb0f52d8bf825fc.gradio.live/webhooks/trigger_training</code>.</p> <div class="flex justify-center" data-svelte-h="svelte-9ld38f"><img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/configure_webhook.png"></div> <p data-svelte-h="svelte-l7w1xv">Und das war’s! Sie können den Webhook jetzt auslösen, indem Sie das Ziel-Repository aktualisieren (z.B. einen Commit pushen). Überprüfen Sie den Aktivitäts-Tab Ihres Webhooks, um die ausgelösten Ereignisse zu sehen. Jetzt, wo Sie eine funktionierende Einrichtung haben, können Sie sie testen und schnell iterieren. Wenn Sie Ihren Code ändern und den Server neu starten, könnte sich Ihre öffentliche URL ändern. Stellen Sie sicher, dass Sie die Webhook-Konfiguration im Hub bei Bedarf aktualisieren.</p> <h2 class="relative group"><a id="bereitstellung-in-einem-space" 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="#bereitstellung-in-einem-space"><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>Bereitstellung in einem Space</span></h2> <p data-svelte-h="svelte-1ncmk3a">Jetzt, da Sie einen funktionierenden Webhook-Server haben, ist das Ziel, ihn in einem Space bereitzustellen. Gehen Sie zu <a href="https://huggingface.co/new-space" rel="nofollow">https://huggingface.co/new-space</a>, um einen Space zu erstellen. Geben Sie ihm einen Namen, wählen Sie das Gradio SDK und klicken Sie auf “Create Space”. Laden Sie Ihren Code in den Space in einer Datei namens <code>app.py</code> hoch. Ihr Space wird automatisch gestartet! Für weitere Informationen zu Spaces lesen Sie bitte diesen <a href="https://huggingface.co/docs/hub/spaces-overview" rel="nofollow">Leitfaden</a>.</p> <p data-svelte-h="svelte-1nxol3z">Ihr Webhook-Server läuft nun auf einem öffentlichen Space. In den meisten Fällen möchten Sie ihn mit einem Geheimnis absichern. Gehen Sie zu Ihren Space-Einstellungen > Abschnitt “Repository secrets” > “Add a secret”. Setzen Sie die Umgebungsvariable <code>WEBHOOK_SECRET</code> auf den von Ihnen gewählten Wert. Gehen Sie zurück zu den <a href="https://huggingface.co/settings/webhooks" rel="nofollow">Webhook-Einstellungen</a> und setzen Sie das Geheimnis in der Webhook-Konfiguration. Jetzt werden von Ihrem Server nur Anfragen mit dem korrekten Geheimnis akzeptiert.</p> <p data-svelte-h="svelte-1e7nrwh">Und das war’s! Ihr Space ist nun bereit, Webhooks vom Hub zu empfangen. Bitte beachten Sie, dass wenn Sie den Space auf einer kostenlosen ‘cpu-basic’ Hardware ausführen, er nach 48 Stunden Inaktivität heruntergefahren wird. Wenn Sie einen permanenten Space benötigen, sollten Sie in Erwägung ziehen, auf eine <a href="https://huggingface.co/docs/hub/spaces-gpus#hardware-specs" rel="nofollow">upgraded hardware</a> umzustellen.</p> <h2 class="relative group"><a id="erweiterte-nutzung" 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="#erweiterte-nutzung"><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>Erweiterte Nutzung</span></h2> <p data-svelte-h="svelte-8cnaqu">Der obenstehende Leitfaden erklärte den schnellsten Weg, einen <code>WebhooksServer()</code> einzurichten. In diesem Abschnitt werden wir sehen, wie man ihn weiter anpassen kann.</p> <h3 class="relative group"><a id="mehrere-endpunkte" 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="#mehrere-endpunkte"><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>Mehrere Endpunkte</span></h3> <p data-svelte-h="svelte-1kzmtha">Sie können mehrere Endpunkte auf demselben Server registrieren. Beispielsweise möchten Sie vielleicht einen Endpunkt haben, um einen Trainingsjob auszulösen und einen anderen, um eine Modellevaluierung auszulösen. Dies können Sie tun, indem Sie mehrere <code>@webhook_endpoint</code>-Dekorateure hinzufügen:</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=""><!-- HTML_TAG_START --><span class="hljs-comment"># app.py</span> | |
| <span class="hljs-keyword">from</span> huggingface_hub <span class="hljs-keyword">import</span> webhook_endpoint, WebhookPayload | |
| <span class="hljs-meta">@webhook_endpoint</span> | |
| <span class="hljs-keyword">async</span> <span class="hljs-keyword">def</span> <span class="hljs-title function_">trigger_training</span>(<span class="hljs-params">payload: WebhookPayload</span>) -> <span class="hljs-literal">None</span>: | |
| <span class="hljs-keyword">if</span> payload.repo.<span class="hljs-built_in">type</span> == <span class="hljs-string">"dataset"</span> <span class="hljs-keyword">and</span> payload.event.action == <span class="hljs-string">"update"</span>: | |
| <span class="hljs-comment"># Einen Trainingsjob auslösen, wenn ein Datensatz aktualisiert wird</span> | |
| ... | |
| <span class="hljs-meta">@webhook_endpoint</span> | |
| <span class="hljs-keyword">async</span> <span class="hljs-keyword">def</span> <span class="hljs-title function_">trigger_evaluation</span>(<span class="hljs-params">payload: WebhookPayload</span>) -> <span class="hljs-literal">None</span>: | |
| <span class="hljs-keyword">if</span> payload.repo.<span class="hljs-built_in">type</span> == <span class="hljs-string">"model"</span> <span class="hljs-keyword">and</span> payload.event.action == <span class="hljs-string">"update"</span>: | |
| <span class="hljs-comment"># Einen Evaluierungsauftrag auslösen, wenn ein Modell aktualisiert wird</span> | |
| ...<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-biux1g">Dies wird zwei Endpunkte erstellen:</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=""><!-- HTML_TAG_START -->(...) | |
| Webhooks are correctly setup and ready to use: | |
| - POST https://1fadb0f52d8bf825fc.gradio.live/webhooks/trigger_training | |
| - POST https://1fadb0f52d8bf825fc.gradio.live/webhooks/trigger_evaluation<!-- HTML_TAG_END --></pre></div> <h3 class="relative group"><a id="benutzerdefinierter-server" 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="#benutzerdefinierter-server"><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>Benutzerdefinierter Server</span></h3> <p data-svelte-h="svelte-5oiksx">Um mehr Flexibilität zu erhalten, können Sie auch direkt ein <code>WebhooksServer()</code> Objekt erstellen. Dies ist nützlich, wenn Sie die Startseite Ihres Servers anpassen möchten. Sie können dies tun, indem Sie eine <a href="https://gradio.app/docs/#blocks" rel="nofollow">Gradio UI</a> übergeben, die die Standard-UI überschreibt. Zum Beispiel können Sie Anweisungen für Ihre Benutzer hinzufügen oder ein Formular zur manuellen Auslösung der Webhooks hinzufügen. Bei der Erstellung eines <code>WebhooksServer()</code> können Sie mit dem Dekorateur <code>add_webhook()</code> neue Webhooks registrieren.</p> <p data-svelte-h="svelte-qjuq0f">Hier ist ein vollständiges Beispiel:</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=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr | |
| <span class="hljs-keyword">from</span> fastapi <span class="hljs-keyword">import</span> Request | |
| <span class="hljs-keyword">from</span> huggingface_hub <span class="hljs-keyword">import</span> WebhooksServer, WebhookPayload | |
| <span class="hljs-comment"># 1. Benutzerdefinierte UI definieren</span> | |
| <span class="hljs-keyword">with</span> gr.Blocks() <span class="hljs-keyword">as</span> ui: | |
| ... | |
| <span class="hljs-comment"># 2. Erstellen eines WebhooksServer mit benutzerdefinierter UI und Geheimnis</span> | |
| app = WebhooksServer(ui=ui, webhook_secret=<span class="hljs-string">"my_secret_key"</span>) | |
| <span class="hljs-comment"># 3. Webhook mit explizitem Namen registrieren</span> | |
| <span class="hljs-meta">@app.add_webhook(<span class="hljs-params"><span class="hljs-string">"/say_hello"</span></span>)</span> | |
| <span class="hljs-keyword">async</span> <span class="hljs-keyword">def</span> <span class="hljs-title function_">hello</span>(<span class="hljs-params">payload: WebhookPayload</span>): | |
| <span class="hljs-keyword">return</span> {<span class="hljs-string">"message"</span>: <span class="hljs-string">"hello"</span>} | |
| <span class="hljs-comment"># 4. Webhook mit implizitem Namen registrierene</span> | |
| <span class="hljs-meta">@app.add_webhook</span> | |
| <span class="hljs-keyword">async</span> <span class="hljs-keyword">def</span> <span class="hljs-title function_">goodbye</span>(<span class="hljs-params">payload: WebhookPayload</span>): | |
| <span class="hljs-keyword">return</span> {<span class="hljs-string">"message"</span>: <span class="hljs-string">"goodbye"</span>} | |
| <span class="hljs-comment"># 5. Server starten (optional)</span> | |
| app.run()<!-- HTML_TAG_END --></pre></div> <ol data-svelte-h="svelte-styu22"><li>Wir definieren eine benutzerdefinierte UI mit Gradio-Blöcken. Diese UI wird auf der Startseite des Servers angezeigt.</li> <li>Wir erstellen ein <code>WebhooksServer()</code>-Objekt mit einer benutzerdefinierten UI und einem Geheimnis. Das Geheimnis ist optional und kann mit der <code>WEBHOOK_SECRET</code> Umgebungsvariable gesetzt werden.</li> <li>Wir registrieren einen Webhook mit einem expliziten Namen. Dies wird einen Endpunkt unter <code>/webhooks/say_hello</code> erstellen.</li> <li>Wir registrieren einen Webhook mit einem impliziten Namen. Dies wird einen Endpunkt unter <code>/webhooks/goodbye</code> erstellen.</li> <li>Wir starten den Server. Dies ist optional, da Ihr Server automatisch am Ende des Skripts gestartet wird.</li></ol> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/huggingface_hub/blob/main/docs/source/de/guides/webhooks_server.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_1lehzo9 = { | |
| assets: "/docs/huggingface_hub/pr_4166/de", | |
| base: "/docs/huggingface_hub/pr_4166/de", | |
| env: {} | |
| }; | |
| const element = document.currentScript.parentElement; | |
| const data = [null,null]; | |
| Promise.all([ | |
| import("/docs/huggingface_hub/pr_4166/de/_app/immutable/entry/start.a1d7fe9c.js"), | |
| import("/docs/huggingface_hub/pr_4166/de/_app/immutable/entry/app.5993e179.js") | |
| ]).then(([kit, app]) => { | |
| kit.start(app, element, { | |
| node_ids: [0, 14], | |
| data, | |
| form: null, | |
| error: null | |
| }); | |
| }); | |
| } | |
| </script> | |
Xet Storage Details
- Size:
- 35.8 kB
- Xet hash:
- 601267ec9738ee42a8eb282aa5b7587449b1eb61c322f13e556a818308af04e3
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.