OpenUI – Mã nguồn mở tạo giao diện web trong 1 câu lệnh

Bạn muốn tạo giao diện web nhanh chóng mà không cần giỏi code? OpenUI có thể làm được điều đó! Chỉ cần nhập mô tả, công cụ mã nguồn mở này sẽ biến chúng thành giao diện thực tế trong vòng vài giây. Cùng Tentenai.vn tìm hiểu OpenUI là gì, những tính năng và cách sử dụng mã nguồn mở tiện lợi này nhé!

OpenUI là gì?

OpenUI là công cụ mã nguồn mở giúp tạo giao diện người dùng (UI) nhanh chóng và thú vị. Chỉ cần mô tả ý tưởng bằng lời, OpenUI sẽ biến chúng thành giao diện trực quan trong tích tắc. Được phát triển bởi W&B, công cụ này đang được dân công nghệ săn đón để tạo mẫu ứng dụng, đặc biệt là các dự án dùng mô hình ngôn ngữ lớn (LLM).

Những tính năng của OpenUI 

Nhanh chóng, dễ sử dụng

Chỉ cần mô tả giao diện, OpenUI sẽ tạo mã HTML hoặc chuyển đổi sang React, Svelte, Web Components. Tất cả chỉ diễn ra có trong vỏn vẹn vài giây là có thể xem trước giao diện.

Linh hoạt, Tích hợp dễ dàng

Mã nguồn này hỗ trợ nhiều mô hình AI như OpenAI, Groq, Gemini, Anthropic, Ollama. Ngoài ra, nó hỗ trợ kết nối với LiteLLM để hỗ trợ hầu hết dịch vụ LLM hiện có.

Mã nguồn mở

OpenUI là mã nguồn mở được chia sẻ miễn phí trên GitHub, cả người mới và nhà phát triển chuyên nghiệp đều có thể sử dụng được.

Những đối tượng nào sẽ phù hợp với OpenUI?

Chắc hẳn, khi đọc xong, bạn đã có những mường tượng về lợi ích của mã nguồn mở này. Nó đặc biệt phù hợp với một số đối tượng:

• Lập trình viên: Tạo mẫu giao diện nhanh cho ứng dụng web hoặc mobile.
• Nhà thiết kế UI/UX: Thử nghiệm ý tưởng thiết kế mà không cần viết mã.
• Dự án AI: Xây dựng giao diện cho các ứng dụng dựa trên LLM.
• Học tập: Người mới học lập trình có thể thực hành thiết kế giao diện đơn giản.

Hướng dẫn tải và sử dụng OpenUI

Yêu cầu trước khi cài đặt

1. Môi trường:

• Python 3.8 hoặc cao hơn.
• Node.js và npm (cho phần giao diện người dùng frontend).
• Docker (tùy chọn, nếu bạn muốn chạy qua Docker).
• Git (để clone mã nguồn).

2. API Key (tùy chọn):

• Để sử dụng các mô hình AI như OpenAI, bạn cần OPENAI_API_KEY.
• Các mô hình khác như Grok, Anthropic, Gemini, v.v. yêu cầu các API key tương ứng (nếu sử dụng).
• Nếu chỉ dùng mô hình cục bộ (như Ollama), bạn có thể đặt OPENAI_API_KEY=xxx

3. Hệ điều hành: Hỗ trợ Linux, macOS, Windows.

Hướng dẫn cài đặt

Bước 1: Clone mã nguồn

Mở terminal và chạy lệnh sau để tải mã nguồn:

Bước 2: Cài đặt môi trường

OpenUI có hai phần chính: backend (Python) và frontend (TypeScript/React). Bạn cần cài đặt cả hai.

1. Để cài đặt Backend, sử dụng Python và các thư viện liên quan.

a. Tạo môi trường ảo:

b. Di chuyển vào thư mục backend và cài đặt:

c. Cài đặt thêm các phụ thuộc (nếu cần):

Nếu bạn muốn dùng các mô hình AI bổ sung qua LiteLLM, chạy:

d. Cấu hình API Key:

Để chạy với các mô hình cục bộ (như Ollama), đặt biến môi trường:

Nếu dùng OpenAI hoặc các mô hình khác, thay xxx bằng API key thực tế:

2. Để cài đặt Frontend, sử dụng Vite, React, và Tailwind CSS.

a. Di chuyển vào thư mục frontend:

b. Cài đặt các phụ thuộc Node.js:

c. Build frontend (tạo các tệp tĩnh để backend sử dụng):

Lệnh này sẽ sao chép các tệp đã build vào thư mục backend/openui/dist.

3. Cài đặt Ollama (tùy chọn, cho mô hình cục bộ)

Nếu bạn muốn dùng các mô hình cục bộ như Llava:

a. Cài đặt Ollama theo hướng dẫn tại ollama.ai.

b. Kéo mô hình Llava:

c. Đảm bảo Ollama đang chạy:

Nếu Ollama không chạy trên http://127.0.0.1:11434, đặt biến môi trường:

Bước 3: Chạy ứng dụng

Có hai cách để chạy OpenUI: chạy cục bộ hoặc qua Docker.

Cách 1: Chạy cục bộ

Chạy backend: Từ thư mục backend, chạy:

Lệnh --dev kích hoạt chế độ phát triển, tự động reload khi có thay đổi.

Chạy frontend (trong terminal khác): Từ thư mục frontend, chạy:

Điều này sẽ mở một dịch vụ trên http://localhost:5173. Truy cập địa chỉ này để sử dụng giao diện OpenUI.

Cách 2: Chạy qua Docker

Nếu bạn muốn chạy toàn bộ ứng dụng bằng Docker:

1. Từ thư mục gốc của dự án, chạy:

Điều này sẽ khởi động cả backend và Ollama (nếu được cấu hình).

Truy cập ứng dụng tại http://localhost:7878.

Hướng dẫn sử dụng

Sau khi cài đặt và chạy, bạn có thể sử dụng OpenUI như sau:

1. Truy cập giao diện:

Nếu chạy cục bộ, mở trình duyệt tại http://localhost:5173 (hoặc http://localhost:7878 nếu dùng Docker).

Bạn sẽ thấy giao diện web của OpenUI như hình ở trên.

2. Tạo UI:

Trong giao diện, nhập mô tả UI bằng ngôn ngữ tự nhiên (ví dụ: “Tạo một nút màu xanh với văn bản ‘Click me'”). OpenUI sẽ sử dụng mô hình AI (OpenAI, Ollama, v.v.) để tạo mã HTML và hiển thị giao diện trực tiếp.

Bạn có thể yêu cầu chỉnh sửa UI hoặc chuyển đổi mã sang React, Svelte, Web Components, v.v.

3. Cấu hình mô hình AI:

Nhấn vào biểu tượng cài đặt (bánh răng) ở góc trên bên trái để chọn mô hình AI (OpenAI, Ollama, Groq, v.v.).

Nếu dùng Ollama, các mô hình đã tải (như Llava) sẽ xuất hiện trong danh sách.

4. Lưu và xuất mã:

Bạn có thể sao chép mã HTML hoặc mã đã chuyển đổi (React, Svelte, v.v.) từ giao diện. Lưu trữ các thiết kế UI để sử dụng sau.

Lưu ý quan trọng

a) API Key: Nếu gặp lỗi AuthenticationError: Incorrect API key provided, hãy kiểm tra lại API key hoặc đặt OPENAI_API_KEY=xxx để dùng Ollama.

b) Hiệu suất: Với các mô hình cục bộ, bạn cần máy có cấu hình đủ mạnh (ít nhất 16GB RAM để chạy Llava).

c) Lỗi cài đặt:

• Nếu gặp lỗi với weave trên macOS (M1), thử xóa tệp .python-version trong thư mục gốc và backend, sau đó tạo lại môi trường ảo.
• Đảm bảo kết nối internet ổn định khi clone hoặc cài đặt phụ thuộc.

d) Tùy chỉnh:

• OpenUI hỗ trợ LiteLLM để kết nối với hầu hết các mô hình AI. Xem tài liệu LiteLLM để cấu hình proxy nếu cần.
• Để chạy trên Gitpod hoặc Codespaces, tham khảo tệp .gitpod.yml trong mã nguồn.

Trên đây là toàn bộ những thông tin chi tiết về OpenUI – mã nguồn mở tạo giao diện web chỉ với 1 câu lệnh. Hãy theo dõi TentenAI để có thể cập nhật thêm những thông tin, kiến thức bạn cần biết về AI – không thể bị lạc hậu trong thời đại công nghệ phát triển nhanh vượt bậc như hiện nay.