Buckets:
| <meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"Các tính năng nâng cao của Interface","local":"các-tính-năng-nâng-cao-của-interface","sections":[{"title":"Sử dụng trạng thái để duy trì dữ liệu","local":"sử-dụng-trạng-thái-để-duy-trì-dữ-liệu","sections":[],"depth":3},{"title":"Sử dụng diễn giải để hiểu các dự đoán","local":"sử-dụng-diễn-giải-để-hiểu-các-dự-đoán","sections":[],"depth":3}],"depth":1}"> | |
| <link href="/docs/course/pr_1069/vi/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload"> | |
| <link rel="modulepreload" href="/docs/course/pr_1069/vi/_app/immutable/entry/start.bcd19957.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1069/vi/_app/immutable/chunks/scheduler.37c15a92.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1069/vi/_app/immutable/chunks/singletons.20a6a839.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1069/vi/_app/immutable/chunks/index.18351ede.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1069/vi/_app/immutable/chunks/paths.c89f4ad2.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1069/vi/_app/immutable/entry/app.38d32b86.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1069/vi/_app/immutable/chunks/index.2bf4358c.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1069/vi/_app/immutable/nodes/0.cba642dc.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1069/vi/_app/immutable/chunks/each.e59479a4.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1069/vi/_app/immutable/nodes/75.b9f7f8eb.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1069/vi/_app/immutable/chunks/CodeBlock.4e987730.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1069/vi/_app/immutable/chunks/DocNotebookDropdown.efc1fb7c.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1069/vi/_app/immutable/chunks/getInferenceSnippets.24b50994.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"Các tính năng nâng cao của Interface","local":"các-tính-năng-nâng-cao-của-interface","sections":[{"title":"Sử dụng trạng thái để duy trì dữ liệu","local":"sử-dụng-trạng-thái-để-duy-trì-dữ-liệu","sections":[],"depth":3},{"title":"Sử dụng diễn giải để hiểu các dự đoán","local":"sử-dụng-diễn-giải-để-hiểu-các-dự-đoán","sections":[],"depth":3}],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <h1 class="relative group"><a id="các-tính-năng-nâng-cao-của-interface" 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="#các-tính-năng-nâng-cao-của-interface"><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>Các tính năng nâng cao của Interface</span></h1> <div class="flex space-x-1 absolute z-10 right-0 top-0"> <a href="https://colab.research.google.com/github/huggingface/notebooks/blob/master/course/vi/chapter9/section6.ipynb" target="_blank"><img alt="Open In Colab" class="!m-0" src="https://colab.research.google.com/assets/colab-badge.svg"></a> <a href="https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/vi/chapter9/section6.ipynb" target="_blank"><img alt="Open In Studio Lab" class="!m-0" src="https://studiolab.sagemaker.aws/studiolab.svg"></a></div> <p data-svelte-h="svelte-123kffg">Bây giờ chúng ta có thể xây dựng và chia sẻ giao diện cơ bản, hãy cùng khám phá một số tính năng nâng cao hơn như trạng thái và diễn giải.</p> <h3 class="relative group"><a id="sử-dụng-trạng-thái-để-duy-trì-dữ-liệu" 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="#sử-dụng-trạng-thái-để-duy-trì-dữ-liệu"><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>Sử dụng trạng thái để duy trì dữ liệu</span></h3> <p data-svelte-h="svelte-1b05z2j">Gradio hỗ trợ <em>trạng thái phiên</em>, nơi dữ liệu tồn tại qua nhiều lần gửi trong một tải trang. Trạng thái phiên hữu ích khi xây dựng các bản demo, chẳng hạn như chatbot ở nơi bạn muốn giữ nguyên dữ liệu khi người dùng tương tác với mô hình. Lưu ý rằng trạng thái phiên không chia sẻ dữ liệu giữa những người dùng khác nhau trong mô hình của bạn.</p> <p data-svelte-h="svelte-s0bszo">Để lưu trữ dữ liệu ở trạng thái phiên, bạn cần thực hiện ba việc:</p> <ol data-svelte-h="svelte-1agcbd1"><li>Truyền một <em>tham số bổ sung</em> vào hàm của bạn, nó thể hiện trạng thái của giao diện.</li> <li>Khi kết thúc hàm, trả về giá trị đã cập nhật của trạng thái dưới dạng <em>giá trị trả về bổ sung</em>.</li> <li>Thêm thành phần đầu vào ‘state’ và đầu ra ‘state’ khi tạo <code>Interface</code> của bạn.</li></ol> <p data-svelte-h="svelte-3hcc1w">Xem ví dụ về chatbot bên dưới:</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> random | |
| <span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr | |
| <span class="hljs-keyword">def</span> <span class="hljs-title function_">chat</span>(<span class="hljs-params">message, history</span>): | |
| history = history <span class="hljs-keyword">or</span> [] | |
| <span class="hljs-keyword">if</span> message.startswith(<span class="hljs-string">"How many"</span>): | |
| response = random.randint(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>) | |
| <span class="hljs-keyword">elif</span> message.startswith(<span class="hljs-string">"How"</span>): | |
| response = random.choice([<span class="hljs-string">"Great"</span>, <span class="hljs-string">"Good"</span>, <span class="hljs-string">"Okay"</span>, <span class="hljs-string">"Bad"</span>]) | |
| <span class="hljs-keyword">elif</span> message.startswith(<span class="hljs-string">"Where"</span>): | |
| response = random.choice([<span class="hljs-string">"Here"</span>, <span class="hljs-string">"There"</span>, <span class="hljs-string">"Somewhere"</span>]) | |
| <span class="hljs-keyword">else</span>: | |
| response = <span class="hljs-string">"I don't know"</span> | |
| history.append((message, response)) | |
| <span class="hljs-keyword">return</span> history, history | |
| iface = gr.Interface( | |
| chat, | |
| [<span class="hljs-string">"text"</span>, <span class="hljs-string">"state"</span>], | |
| [<span class="hljs-string">"chatbot"</span>, <span class="hljs-string">"state"</span>], | |
| allow_screenshot=<span class="hljs-literal">False</span>, | |
| allow_flagging=<span class="hljs-string">"never"</span>, | |
| ) | |
| iface.launch()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-Chatbot-Demo.hf.space" frameborder="0" height="350" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe> <p data-svelte-h="svelte-1ay4493">Lưu ý trạng thái của thành phần đầu ra vẫn tồn tại qua các lần gửi. | |
| Lưu ý: bạn có thể chuyển giá trị mặc định vào tham số trạng thái, được sử dụng làm giá trị ban đầu của trạng thái.</p> <h3 class="relative group"><a id="sử-dụng-diễn-giải-để-hiểu-các-dự-đoán" 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="#sử-dụng-diễn-giải-để-hiểu-các-dự-đoán"><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>Sử dụng diễn giải để hiểu các dự đoán</span></h3> <p data-svelte-h="svelte-daxd5l">Hầu hết các mô hình học máy là hộp đen và logic bên trong của hàm bị ẩn khỏi người dùng cuối. Để khuyến khích tính minh bạch, chúng tôi đã giúp bạn dễ dàng thêm thông dịch vào mô hình của mình bằng cách chỉ cần đặt từ khóa thông dịch trong lớp Interface thành mặc định. Điều này cho phép người dùng của bạn hiểu những phần nào của đầu vào chịu trách nhiệm cho đầu ra. Hãy xem giao diện đơn giản bên dưới hiển thị bộ phân loại hình ảnh đồng thời bao gồm phần diễn giải:</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> requests | |
| <span class="hljs-keyword">import</span> tensorflow <span class="hljs-keyword">as</span> tf | |
| <span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr | |
| inception_net = tf.keras.applications.MobileNetV2() <span class="hljs-comment"># tải mô hình</span> | |
| <span class="hljs-comment"># Tải nhãn con người đọc được cho ImageNet.</span> | |
| response = requests.get(<span class="hljs-string">"https://git.io/JJkYN"</span>) | |
| labels = response.text.split(<span class="hljs-string">"\n"</span>) | |
| <span class="hljs-keyword">def</span> <span class="hljs-title function_">classify_image</span>(<span class="hljs-params">inp</span>): | |
| inp = inp.reshape((-<span class="hljs-number">1</span>, <span class="hljs-number">224</span>, <span class="hljs-number">224</span>, <span class="hljs-number">3</span>)) | |
| inp = tf.keras.applications.mobilenet_v2.preprocess_input(inp) | |
| prediction = inception_net.predict(inp).flatten() | |
| <span class="hljs-keyword">return</span> {labels[i]: <span class="hljs-built_in">float</span>(prediction[i]) <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-built_in">range</span>(<span class="hljs-number">1000</span>)} | |
| image = gr.Image(shape=(<span class="hljs-number">224</span>, <span class="hljs-number">224</span>)) | |
| label = gr.Label(num_top_classes=<span class="hljs-number">3</span>) | |
| title = <span class="hljs-string">"Gradio Image Classifiction + Interpretation Example"</span> | |
| gr.Interface( | |
| fn=classify_image, inputs=image, outputs=label, interpretation=<span class="hljs-string">"default"</span>, title=title | |
| ).launch()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1uei318">Kiểm tra hàm thông dịch bằng cách gửi đầu vào, sau đó nhấp vào Interpret tương ứng diễn giải bên dưới thành phần đầu ra.</p> <iframe src="https://course-demos-gradio-image-interpretation.hf.space" frameborder="0" height="570" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe> <p data-svelte-h="svelte-u6k88k">Bên cạnh phương pháp diễn giải mặc định mà Gradio cung cấp, bạn cũng có thể chỉ định <code>shap</code> cho tham số <code>interpretation</code> và đặt tham số <code>num_shap</code>. Điều này sử dụng diễn giải dựa trên Shapley, bạn có thể đọc thêm về <a href="https://christophm.github.io/interpretable-ml-book/shap.html" rel="nofollow">tại đây</a>. | |
| Cuối cùng, bạn cũng có thể chuyển hàm thông dịch của riêng mình vào tham số <code>interpretation</code>. Xem ví dụ trong trang bắt đầu của Gradio <a href="https://gradio.app/getting_started/" rel="nofollow">tại đây</a>.</p> <p data-svelte-h="svelte-1oiysvl">Điều này kết thúc việc đi sâu vào lớp <code>Interface</code> của Gradio. Như chúng ta đã thấy, lớp này giúp việc tạo trình diễn học máy trở nên đơn giản trong một vài dòng mã Python. Tuy nhiên, đôi khi bạn sẽ muốn tùy chỉnh bản demo của mình bằng cách thay đổi bố cục hoặc xâu chuỗi nhiều hàm dự đoán lại với nhau. Sẽ thật tuyệt nếu bằng cách nào đó chúng ta có thể chia <code>Interface</code> thành các “khối” có thể tùy chỉnh? May mắn thay, có! Đó là chủ đề của phần cuối cùng.</p> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/course/blob/main/chapters/vi/chapter9/6.mdx" target="_blank"><span data-svelte-h="svelte-1kd6by1"><</span> <span data-svelte-h="svelte-x0xyl0">></span> <span data-svelte-h="svelte-1dajgef"><span class="underline ml-1.5">Update</span> on GitHub</span></a> <p></p> | |
| <script> | |
| { | |
| __sveltekit_rdxbtd = { | |
| assets: "/docs/course/pr_1069/vi", | |
| base: "/docs/course/pr_1069/vi", | |
| env: {} | |
| }; | |
| const element = document.currentScript.parentElement; | |
| const data = [null,null]; | |
| Promise.all([ | |
| import("/docs/course/pr_1069/vi/_app/immutable/entry/start.bcd19957.js"), | |
| import("/docs/course/pr_1069/vi/_app/immutable/entry/app.38d32b86.js") | |
| ]).then(([kit, app]) => { | |
| kit.start(app, element, { | |
| node_ids: [0, 75], | |
| data, | |
| form: null, | |
| error: null | |
| }); | |
| }); | |
| } | |
| </script> | |
Xet Storage Details
- Size:
- 19.1 kB
- Xet hash:
- 307bc8421515c2e01684d7f9f8ab7f360d49b62ddc3a5939eb3264a84a84eeeb
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.