Buckets:
| <meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"웹훅 서버","local":"webhooks-server","sections":[{"title":"엔드포인트 생성","local":"create-an-endpoint","sections":[],"depth":2},{"title":"웹훅 설정하기","local":"configure-a-webhook","sections":[],"depth":2},{"title":"Space에 배포하기","local":"deploy-to-a-space","sections":[],"depth":2},{"title":"고급 사용법","local":"advanced-usage","sections":[{"title":"다중 엔드포인트","local":"multiple-endpoints","sections":[],"depth":3},{"title":"사용자 정의 서버","local":"custom-server","sections":[],"depth":3}],"depth":2}],"depth":1}"> | |
| <link href="/docs/huggingface_hub/pr_4191/ko/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4191/ko/_app/immutable/entry/start.fe6be944.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4191/ko/_app/immutable/chunks/scheduler.0cf4ef2e.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4191/ko/_app/immutable/chunks/singletons.2fa98b71.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4191/ko/_app/immutable/chunks/paths.31ea97d2.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4191/ko/_app/immutable/entry/app.045e7a41.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4191/ko/_app/immutable/chunks/preload-helper.1b7ceac4.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4191/ko/_app/immutable/chunks/index.abc433bf.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4191/ko/_app/immutable/nodes/0.94b9f935.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4191/ko/_app/immutable/chunks/each.e59479a4.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4191/ko/_app/immutable/nodes/16.f6e0679e.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4191/ko/_app/immutable/chunks/MermaidChart.svelte_svelte_type_style_lang.db5d1a99.js"> | |
| <link rel="modulepreload" href="/docs/huggingface_hub/pr_4191/ko/_app/immutable/chunks/CodeBlock.91954c7e.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"웹훅 서버","local":"webhooks-server","sections":[{"title":"엔드포인트 생성","local":"create-an-endpoint","sections":[],"depth":2},{"title":"웹훅 설정하기","local":"configure-a-webhook","sections":[],"depth":2},{"title":"Space에 배포하기","local":"deploy-to-a-space","sections":[],"depth":2},{"title":"고급 사용법","local":"advanced-usage","sections":[{"title":"다중 엔드포인트","local":"multiple-endpoints","sections":[],"depth":3},{"title":"사용자 정의 서버","local":"custom-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>웹훅 서버</span></h1> <p data-svelte-h="svelte-4gg1j0">웹훅은 MLOps 관련 기능의 기반이 됩니다. 이를 통해 특정 저장소의 새로운 변경 사항을 수신하거나, | |
| 관심 있는 특정 사용자/조직에 속한 모든 저장소의 변경 사항을 받아볼 수 있습니다. | |
| 이 가이드에서는 <code>huggingface_hub</code>를 활용하여 웹훅을 수신하는 서버를 만들고 Space에 배포하는 방법을 설명합니다. | |
| 이를 위해서는 Huggingface Hub의 웹훅 개념에 대해 익숙해야 합니다. | |
| 웹훅 자체에 대해 더 자세히 알아보려면 이 <a href="https://huggingface.co/docs/hub/webhooks" rel="nofollow">가이드</a>를 먼저 읽어보세요.</p> <p data-svelte-h="svelte-1r6c7en">이 가이드에서 사용할 기본 클래스는 <a href="/docs/huggingface_hub/pr_4191/ko/package_reference/webhooks_server#huggingface_hub.WebhooksServer">WebhooksServer()</a>입니다. | |
| 이 클래스는 Huggingface Hub에서 웹훅을 받을 수 있는 서버를 쉽게 구성할 수 있습니다. 서버는 <a href="https://gradio.app/" rel="nofollow">Gradio</a> 앱을 기반으로 합니다. | |
| 이 서버에는 사용자를 위한 지침을 표시하는 UI와 웹훅을 수신하는 API가 있습니다.</p> <blockquote class="tip" data-svelte-h="svelte-1r07ujg"><p>웹훅 서버의 실행 예시를 보려면 <a href="https://huggingface.co/spaces/spaces-ci-bot/webhook" rel="nofollow">Spaces CI Bot</a>을 확인하세요. | |
| 이것은 Space의 PR이 열릴 때마다 임시 환경을 실행하는 Space입니다.</p></blockquote> <blockquote class="warning" data-svelte-h="svelte-9wofpa"><p>이것은 <a href="../package_reference/environment_variables#hfhubdisableexperimentalwarning">실험적 기능</a>입니다. | |
| 본 API는 현재 개선 작업 중이며, 향후 사전 통지 없이 주요 변경 사항이 도입될 수 있습니다. | |
| requirements에서 <code>huggingface_hub</code>의 버전을 고정하는 것을 권장합니다.</p></blockquote> <h2 class="relative group"><a id="create-an-endpoint" 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="#create-an-endpoint"><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>엔드포인트 생성</span></h2> <p data-svelte-h="svelte-127cxas">웹훅 엔드포인트를 구현하는 것은 함수에 데코레이터를 추가하는 것만큼 간단합니다. | |
| 주요 개념을 설명하기 위해 첫 번째 예시를 살펴보겠습니다:</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"># 데이터 세트가 업데이트되면 학습 작업을 트리거합니다.</span> | |
| ...<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1tktkge">이 코드 스니펫을 <code>'app.py'</code>라는 파일에 저장하고 <code>'python app.py'</code>로 실행하면 다음과 같은 메시지가 표시될 것입니다:</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-115owcb">축하합니다! 웹훅 서버를 실행했습니다! 정확히 어떤 일이 일어났는지 살펴보겠습니다:</p> <ol data-svelte-h="svelte-ze25b5"><li><a href="/docs/huggingface_hub/pr_4191/ko/package_reference/webhooks_server#huggingface_hub.webhook_endpoint">webhook_endpoint()</a>로 함수에 데코레이터를 추가하면 백그라운드에서 <a href="/docs/huggingface_hub/pr_4191/ko/package_reference/webhooks_server#huggingface_hub.WebhooksServer">WebhooksServer()</a> 객체가 생성됩니다. | |
| 볼 수 있듯이 이 서버는 <a href="http://127.0.0.1:7860" rel="nofollow">http://127.0.0.1:7860</a> 에서 실행되는 Gradio 앱입니다. | |
| 이 URL을 브라우저에서 열면 등록된 웹훅에 대한 지침이 있는 랜딩 페이지를 볼 수 있습니다.</li> <li>Gradio 앱은 내부적으로 FastAPI 서버입니다. 새로운 POST 경로 <code>/webhooks/trigger_training</code>이 추가되었습니다. | |
| 이 경로는 웹훅을 수신하고 트리거될 때 <code>trigger_training</code> 함수를 실행합니다. | |
| FastAPI는 자동으로 페이로드를 구문 분석하고 <a href="/docs/huggingface_hub/pr_4191/ko/package_reference/webhooks_server#huggingface_hub.WebhookPayload">WebhookPayload</a> 객체로 함수에 전달합니다. | |
| 이 <code>pydantic</code> 객체에는 웹훅을 트리거한 이벤트에 대한 모든 정보가 포함되어 있습니다.</li> <li>Gradio 앱은 인터넷에서 요청을 받을 수 있는 터널도 열었습니다. | |
| 이것은 흥미로운 부분으로, <a href="https://huggingface.co/settings/webhooks" rel="nofollow">https://huggingface.co/settings/webhooks</a> 에서 로컬 머신을 가리키는 웹훅을 구성할 수 있습니다. | |
| 이를 통해 웹훅 서버를 디버깅하고 Space에 배포하기 전에 빠르게 반복할 수 있습니다.</li> <li>마지막으로 로그에는 서버가 현재 비밀로 보호되지 않는다고 알려줍니다. | |
| 이것은 로컬 디버깅에는 문제가 되지 않지만 나중에 고려해야 할 사항입니다.</li></ol> <blockquote class="warning" data-svelte-h="svelte-8hq98d"><p>기본적으로 서버는 스크립트 끝에서 시작됩니다. | |
| 주피터 노트북에서 실행 중이라면 <code>decorated_function.run()</code>을 호출하여 서버를 수동으로 시작할 수 있습니다. | |
| 고유한 서버를 사용하기 때문에 여러 엔드포인트가 있더라도 서버를 한 번만 시작하면 됩니다.</p></blockquote> <h2 class="relative group"><a id="configure-a-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="#configure-a-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>웹훅 설정하기</span></h2> <p data-svelte-h="svelte-1470z52">웹훅 서버를 실행하고 있으므로, 이제 메시지를 수신하기 위해 웹훅을 구성해야 합니다. | |
| <a href="https://huggingface.co/settings/webhooks" rel="nofollow">https://huggingface.co/settings/webhooks</a> 로 이동하여 “Add a new webhook”을 클릭하고 웹훅을 구성하세요. | |
| 모니터링할 대상 저장소와 웹훅 URL <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-wva2c8">이걸로 끝입니다! 이제 대상 저장소를 업데이트하면 웹훅을 트리거할 수 있습니다. 예를 들면, 커밋 푸시가 그 방법이 될 수 있습니다. | |
| 웹훅의 Activity 탭에서 트리거된 이벤트를 확인할 수 있습니다. 이제 작동하는 구성이 있으므로 테스트하고 빠르게 반복할 수 있습니다. | |
| 코드를 수정하고 서버를 다시 시작하면 공개 URL이 변경될 수 있습니다. | |
| 필요한 경우 Hub에서 웹훅 구성을 업데이트하세요.</p> <h2 class="relative group"><a id="deploy-to-a-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="#deploy-to-a-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>Space에 배포하기</span></h2> <p data-svelte-h="svelte-139ad60">이제 작동하는 웹훅 서버가 마련되었으므로, 다음 목표는 이를 Space에 배포하는 것입니다. <a href="https://huggingface.co/new-space" rel="nofollow">https://huggingface.co/new-space</a> 에 가서 Space를 생성합니다. | |
| 이름을 지정하고, Gradio SDK를 선택한 다음 “Create Space”를 클릭합니다. 코드를 <code>app.py</code> 파일로 Space에 업로드합니다. | |
| Space가 자동으로 시작됩니다! | |
| Space에 대한 자세한 내용은 이 <a href="https://huggingface.co/docs/hub/spaces-overview" rel="nofollow">가이드</a>를 참조하세요.</p> <p data-svelte-h="svelte-hd20iz">웹훅 서버가 이제 공개 Space에서 실행 중입니다. 대부분의 경우 비밀번호로 보안을 설정하고 싶을 것입니다. | |
| Space 설정 > “Repository secrets” 섹션 > “Add a secret” 로 이동합니다. <code>WEBHOOK_SECRET</code> 환경 변수에 원하는 값을 설정합니다. | |
| <a href="https://huggingface.co/settings/webhooks" rel="nofollow">Webhooks 설정</a>으로 돌아가서 웹훅 구성에 비밀번호를 설정합니다. | |
| 이제 올바른 비밀번호가 있는 요청만 서버에서 허용됩니다.</p> <p data-svelte-h="svelte-1qk017i">이게 전부입니다! Space가 이제 Hub의 웹훅을 수신할 준비가 되었습니다. | |
| 무료 하드웨어인 ‘cpu-basic’에서 Space를 실행 시, 48시간 동안 비활성화되면 종료된다는 점을 유념하세요. | |
| 영구적인 Space가 필요한 경우 <a href="https://huggingface.co/docs/hub/spaces-gpus#hardware-specs" rel="nofollow">업그레이드된 하드웨어</a>를 설정해야 합니다.</p> <h2 class="relative group"><a id="advanced-usage" 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="#advanced-usage"><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>고급 사용법</span></h2> <p data-svelte-h="svelte-wy94mh">위의 가이드에서는 <a href="/docs/huggingface_hub/pr_4191/ko/package_reference/webhooks_server#huggingface_hub.WebhooksServer">WebhooksServer()</a>를 설정하는 가장 빠른 방법에 대해 설명했습니다. | |
| 이 섹션에서는 이를 더욱 사용자 정의하는 방법을 살펴보겠습니다.</p> <h3 class="relative group"><a id="multiple-endpoints" 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="#multiple-endpoints"><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>다중 엔드포인트</span></h3> <p data-svelte-h="svelte-1o0nvdm">동일한 서버에 여러 엔드포인트를 등록할 수 있습니다. | |
| 예를 들어, 하나의 엔드포인트는 학습 작업을 트리거하고 다른 엔드포인트는 모델 평가를 트리거하도록 할 수 있습니다. | |
| 이를 위해 여러 개의 <code>@webhook_endpoint</code> 데코레이터를 추가하면 됩니다:</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"># 데이터 세트가 업데이트되면 학습 작업을 트리거합니다.</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"># 모델이 업데이트되면 평가 작업을 트리거합니다. </span> | |
| ...<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1vtbzwm">이렇게 하면 두 개의 엔드포인트가 생성됩니다:</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="custom-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="#custom-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>사용자 정의 서버</span></h3> <p data-svelte-h="svelte-15d7oof">더 많은 유연성을 얻기 위해 <a href="/docs/huggingface_hub/pr_4191/ko/package_reference/webhooks_server#huggingface_hub.WebhooksServer">WebhooksServer()</a> 객체를 직접 생성할 수도 있습니다. | |
| 이것은 서버의 랜딩 페이지를 사용자 정의하고자 할 때 유용합니다. | |
| 기본 페이지를 덮어쓸 <a href="https://gradio.app/docs/#blocks" rel="nofollow">Gradio UI</a>를 전달하여 이를 수행할 수 있습니다. | |
| 예를 들어, 사용자를 위한 지침을 추가하거나 웹훅을 수동으로 트리거하는 양식을 추가할 수 있습니다. | |
| <a href="/docs/huggingface_hub/pr_4191/ko/package_reference/webhooks_server#huggingface_hub.WebhooksServer">WebhooksServer()</a>를 생성할 때, <code>add_webhook()</code> 데코레이터를 사용하여 새로운 웹훅을 등록할 수 있습니다.</p> <p data-svelte-h="svelte-1sqiojg">전체 예제는 다음과 같습니다:</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. UI 정의</span> | |
| <span class="hljs-keyword">with</span> gr.Blocks() <span class="hljs-keyword">as</span> ui: | |
| ... | |
| <span class="hljs-comment"># 2. 사용자 정의 UI와 시크릿으로 WebhooksServer 생성</span> | |
| app = WebhooksServer(ui=ui, webhook_secret=<span class="hljs-string">"my_secret_key"</span>) | |
| <span class="hljs-comment"># 3. 명시적 이름으로 웹훅 등록</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. 암시적 이름으로 웹훅 등록</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. 서버 시작 (선택 사항)</span> | |
| app.run()<!-- HTML_TAG_END --></pre></div> <ol data-svelte-h="svelte-1r43eoj"><li>Gradio 블록을 사용하여 사용자 정의 UI를 정의합니다. 이 UI는 서버의 랜딩 페이지에 표시됩니다.</li> <li>사용자 정의 UI와 시크릿으로 <a href="/docs/huggingface_hub/pr_4191/ko/package_reference/webhooks_server#huggingface_hub.WebhooksServer">WebhooksServer()</a> 객체를 생성합니다. | |
| 시크릿은 선택 사항이며 <code>WEBHOOK_SECRET</code> 환경 변수로 설정할 수 있습니다.</li> <li>명시적 이름으로 웹훅을 등록합니다. 이렇게 하면 <code>/webhooks/say_hello</code> 엔드포인트가 생성됩니다.</li> <li>암시적 이름으로 웹훅을 등록합니다. 이렇게 하면 <code>/webhooks/goodbye</code> 엔드포인트가 생성됩니다.</li> <li>서버를 시작합니다. 이것은 선택 사항이며 스크립트 끝에서 자동으로 서버가 시작됩니다.</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/ko/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_1221zlh = { | |
| assets: "/docs/huggingface_hub/pr_4191/ko", | |
| base: "/docs/huggingface_hub/pr_4191/ko", | |
| env: {} | |
| }; | |
| const element = document.currentScript.parentElement; | |
| const data = [null,null]; | |
| Promise.all([ | |
| import("/docs/huggingface_hub/pr_4191/ko/_app/immutable/entry/start.fe6be944.js"), | |
| import("/docs/huggingface_hub/pr_4191/ko/_app/immutable/entry/app.045e7a41.js") | |
| ]).then(([kit, app]) => { | |
| kit.start(app, element, { | |
| node_ids: [0, 16], | |
| data, | |
| form: null, | |
| error: null | |
| }); | |
| }); | |
| } | |
| </script> | |
Xet Storage Details
- Size:
- 36.3 kB
- Xet hash:
- fdee5497ff01c8ae9e56db9cdb852046428c05d2534542a868be430de86a0a24
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.