Tùy chọn sử dụng Streamlit làm SDK tích hợp mặc định cho Spaces đã bị ngừng hỗ trợ. Nếu bạn muốn triển khai một Space với Streamlit, hãy chọn Docker SDK, sau đó sử dụng mẫu Streamlit.

Streamlit Spaces

Streamlit cho phép người dùng tự do xây dựng ứng dụng web đầy đủ tính năng bằng Python theo cách phản ứng. Mã của bạn sẽ được chạy lại mỗi khi trạng thái của ứng dụng thay đổi. Streamlit cũng rất tốt cho trực quan hóa dữ liệu và hỗ trợ một số thư viện biểu đồ như Bokeh, Plotly và Altair. Đọc bài đăng trên blog này về việc xây dựng và lưu trữ các ứng dụng Streamlit trên Spaces.

Việc chọn Streamlit làm SDK khi tạo một Space mới sẽ khởi tạo Space của bạn với phiên bản Streamlit mới nhất bằng cách đặt thuộc tính sdk thành streamlit trong khối YAML của tệp README.md. Nếu bạn muốn thay đổi phiên bản Streamlit, bạn có thể chỉnh sửa thuộc tính sdk_version.

Để sử dụng Streamlit trong một Space, hãy chọn Streamlit làm SDK khi bạn tạo một Space thông qua biểu mẫu New Space. Thao tác này sẽ tạo một repository chứa README.md với các thuộc tính sau trong khối cấu hình YAML:

sdk: streamlit
sdk_version: 1.25.0 # The latest supported version

Bạn có thể chỉnh sửa sdk_version, nhưng lưu ý rằng có thể xảy ra sự cố khi bạn sử dụng phiên bản Streamlit không được hỗ trợ. Không phải tất cả các phiên bản Streamlit đều được hỗ trợ, vì vậy hãy tham khảo mục tham khảo để xem những phiên bản nào có sẵn.

Để biết thông tin chi tiết về Streamlit, hãy tham khảo tài liệu Streamlit.

Chỉ cổng 8501 được phép cho Streamlit Spaces (cổng mặc định). Do đó, nếu bạn cung cấp tệp config.toml cho Space của mình, hãy đảm bảo rằng cổng mặc định không bị ghi đè.

Space Streamlit đầu tiên của bạn: Bộ phân loại xúc xích

Trong các phần tiếp theo, bạn sẽ học các kiến thức cơ bản về việc tạo một Space, cấu hình nó và triển khai mã của bạn lên đó. Chúng ta sẽ tạo một Space Hot Dog Classifier bằng Streamlit, được dùng để demo mô hình julien-c/hotdog-not-hotdog, có khả năng phát hiện xem một bức ảnh cho trước có chứa xúc xích 🌭 hay không

Bạn có thể tìm thấy phiên bản hoàn chỉnh của dự án này được lưu trữ tại NimaBoscarino/hotdog-streamlit.

Tạo một Space Streamlit mới

Chúng ta sẽ bắt đầu bằng cách tạo một Space hoàn toàn mới và chọn Streamlit làm SDK. Hugging Face Spaces là các kho Git, nghĩa là bạn có thể làm việc trên Space của mình theo từng bước (và hợp tác) bằng cách đẩy các commit. Hãy xem hướng dẫn Bắt đầu với Repositories để tìm hiểu cách tạo và chỉnh sửa các tệp trước khi tiếp tục.

Thêm các phụ thuộc

Đối với Hot Dog Classifier, chúng ta sẽ sử dụng 🤗 Transformers pipeline để dùng mô hình, vì vậy trước tiên cần cài đặt một số thư viện phụ thuộc. Bạn có thể thực hiện điều này bằng cách tạo tệp requirements.txt trong kho lưu trữ của mình và thêm các phụ thuộc sau vào đó:

transformers
torch

Trình chạy Spaces sẽ tự động cài đặt các phụ thuộc!

Tạo ứng dụng Streamlit

Để tạo ứng dụng Streamlit, hãy tạo một tệp mới trong kho có tên là app.py và thêm mã sau:

import streamlit as st
from transformers import pipeline
from PIL import Image

pipeline = pipeline(task="image-classification", model="julien-c/hotdog-not-hotdog")

st.title("Hot Dog? Or Not?")

file_name = st.file_uploader("Upload a hot dog candidate image")

if file_name is not None:
    col1, col2 = st.columns(2)

    image = Image.open(file_name)
    col1.image(image, use_column_width=True)
    predictions = pipeline(image)

    col2.header("Probabilities")
    for p in predictions:
        col2.subheader(f"{ p['label'] }: { round(p['score'] * 100, 1)}%")

Script Python này sử dụng 🤗 Transformers pipeline để tải mô hình julien-c/hotdog-not-hotdog, được dùng bởi giao diện Streamlit. Ứng dụng Streamlit sẽ yêu cầu bạn tải lên một hình ảnh, sau đó phân loại nó là hot dog hoặc not hot dog. Sau khi bạn đã lưu mã vào tệp app.py, hãy truy cập tab App để xem ứng dụng của bạn hoạt động!

Nhúng Streamlit Spaces vào các trang web khác

Bạn có thể sử dụng thẻ HTML <iframe> để nhúng một Streamlit Space dưới dạng khung inline trên các trang web khác. Chỉ cần bao gồm URL của Space, kết thúc bằng hậu tố .hf.space. Để tìm URL của Space, bạn có thể sử dụng nút “Embed this Space” từ các tùy chọn của Spaces.

Ví dụ, demo ở trên có thể được nhúng vào tài liệu này với thẻ sau:

<iframe
  src="https://NimaBoscarino-hotdog-streamlit.hf.space?embed=true"
  title="My awesome Streamlit Space"
></iframe>

Lưu ý rằng chúng tôi đã thêm ?embed=true vào URL, kích hoạt chế độ nhúng của ứng dụng Streamlit, loại bỏ một số khoảng trống và phần chân trang để nhúng gọn gàng hơn.

Nhúng Streamlit Spaces với IFrames tự động điều chỉnh kích thước

Streamlit đã hỗ trợ tự động điều chỉnh kích thước iframe kể từ 1.17.0 để kích thước của iframe cha được tự động điều chỉnh cho phù hợp với lượng nội dung của ứng dụng Streamlit được nhúng.

Nó dựa vào thư viện iFrame Resizer, bạn cần thêm vài dòng code, như trong ví dụ sau

• id được đặt thành <iframe /> để chỉ định đối tượng tự động thay đổi kích thước.
• iFrame Resizer được tải thông qua thẻ script.
• Hàm iFrameResize() được gọi với ID của phần tử iframe đích, để kích thước của nó thay đổi tự động.

Chúng ta có thể truyền các tùy chọn vào đối số đầu tiên của iFrameResize(). Xem tài liệu để biết chi tiết.

<iframe
	id="your-iframe-id"
	src="https://<space-subdomain>.hf.space"
	frameborder="0"
	width="850"
	height="450"
></iframe>
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.4/js/iframeResizer.min.js"></script>
<script>
  iFrameResize({}, "#your-iframe-id")
</script>

Ngoài ra, bạn có thể xem tài liệu của chúng tôi.