Artifacts - Giao diện tạo sinh

Khám phá tính năng Artifacts mang tính cách mạng của LibreChat để tạo tức thì các thành phần React, mã HTML và sơ đồ Mermaid.

Generative UI: Tạo các thành phần React, mã HTML và sơ đồ Mermaid
Tích hợp linh hoạt: Sử dụng bất kỳ model nào bạn đã thiết lập
Thiết kế lặp: Cải thiện và tinh chỉnh nhanh chóng các kết quả đầu ra được tạo ra
Tích hợp Agent: Cấu hình các artifact ở cấp độ agent (phương pháp được khuyến nghị)

Lưu ý: Cách ưu tiên để sử dụng artifacts hiện nay là thông qua tính năng Agents, cho phép kiểm soát chi tiết hơn bằng cách bật/tắt artifacts ở cấp độ agent thay vì trên toàn bộ ứng dụng.

Các tính năng chính của Code Artifacts trong LibreChat:

Tạo mẫu nhanh các trang web và giao diện người dùng với AI tạo sinh
Tạo bố cục linh hoạt, phản hồi nhanh một cách dễ dàng
Môi trường học tập tương tác cho React và HTML
Trực quan hóa ý tưởng phức tạp bằng sơ đồ Mermaid
Các phiên bản thiết kế trực quan, lấy người dùng làm trung tâm được hỗ trợ bởi AI
Giải pháp thay thế miễn phí và mã nguồn mở cho các công cụ AI trả phí

Trải nghiệm tương lai của thiết kế và phát triển UI/UX với các khả năng tạo sinh của LibreChat. Hiện thực hóa ý tưởng của bạn nhanh hơn bao giờ hết!

Content-Security-Policy

Bạn có thể cần cập nhật Content-Security-Policy của máy chủ web để bao gồm frame-src 'self' https://*.codesandbox.io nhằm tải các ứng dụng HTML được tạo trong bảng Artifacts. Đây là một phụ thuộc của thư viện sandpack.

Tự lưu trữ Sandpack Bundler

Artifacts trong LibreChat sử dụng thư viện Sandpack của CodeSandbox để hiển thị mã HTML/JS một cách an toàn. Theo mặc định, LibreChat kết nối với CDN công cộng của CodeSandbox, nơi cũng có thể truyền dữ liệu đo lường (telemetry) về việc sử dụng.

Để tăng cường quyền riêng tư, tuân thủ bảo mật hoặc trong các môi trường mạng biệt lập, bạn có thể tự lưu trữ trình đóng gói (bundler).

Tại sao nên tự lưu trữ (self-host) Sandpack Bundler?

Tự lưu trữ bundler mang lại một số lợi ích:

Quyền riêng tư & Bảo mật: Giữ việc thực thi mã trong cơ sở hạ tầng của riêng bạn
Độ tin cậy: Loại bỏ sự phụ thuộc vào các dịch vụ bên ngoài
Hiệu suất: Giảm độ trễ bằng cách lưu trữ bundler trong mạng của bạn
Tuân thủ: Đáp ứng các yêu cầu về xử lý dữ liệu của tổ chức
Control: Cấu hình và tùy chỉnh theo nhu cầu cụ thể của bạn

Cấu hình

Khi bạn đã thiết lập xong một bundler tự lưu trữ, chỉ cần cấu hình LibreChat để sử dụng nó bằng cách thiết lập biến môi trường:

# `.env` file
SANDPACK_BUNDLER_URL=http://your-bundler-url

Các cân nhắc chung

Việc tự lưu trữ (self-hosting) trình đóng gói (bundler) sẽ tạo thêm một số chi phí vận hành bổ sung:

CORS Configuration: Bạn sẽ cần quản lý các chính sách chia sẻ tài nguyên nguồn gốc chéo (cross-origin resource sharing)
Quản lý bảo mật: Bạn chịu trách nhiệm về bảo mật của dịch vụ bundler
Bảo trì: Các bản cập nhật và bản vá sẽ cần được áp dụng thủ công
Yêu cầu về tài nguyên: Cần có thêm tài nguyên máy chủ để lưu trữ bundler

Để biết hướng dẫn chi tiết về cách thiết lập và duy trì bundler tự lưu trữ của bạn, hãy tham khảo kho lưu trữ CodeSandbox đã được fork được tùy chỉnh cho việc triển khai LibreChat, bao gồm cả việc loại bỏ telemetry khỏi Sandpack.

Tin tức AI 2024: Nền tảng trò chuyện AI mã nguồn mở GỐC và TỐT NHẤT, LibreChat phát hành Code Artifacts! Công cụ UI tạo sinh này có thể tạo React, HTML & sơ đồ ngay lập tức từ một câu lệnh duy nhất trong trình duyệt của bạn với bất kỳ LLM nào, OpenAI, Anthropic, LLAMA, Mistral, DeepSeek Coder & nhiều hơn nữa nhờ tích hợp OLLAMA.

#AINews2024 #OpenSourceAI #GenerativeUI #CodeArtifacts #WebDevelopment #ReactJS #LLM #AIPrototyping #DevTools #OLLAMA #LibreChat