-
Vie
Vie
22/04/2025
Table Of Contents
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à 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).
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.
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ó.
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.
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:
1. Môi trường:
2. API Key (tùy chọn):
English (Eng)
Tiếng Việt (Vie)
EngOPENAI_API_KEY.OPENAI_API_KEY=xxx3. Hệ điều hành: Hỗ trợ Linux, macOS, Windows.
Bước 1: Clone mã nguồn
Mở terminal và chạy lệnh sau để tải mã nguồn:
git clone https://github.com/wandb/openui
cd openui
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:
python -m venv venv
source venv/bin/activate # Trên Windows: venv\Scripts\activate
b. Di chuyển vào thư mục backend và cài đặt:
cd backend
pip install .
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:
pip install litellm
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:
export OPENAI_API_KEY=xxx
Nếu dùng OpenAI hoặc các mô hình khác, thay xxx bằng API key thực tế:
export OPENAI_API_KEY=your_openai_key
export ANTHROPIC_API_KEY=your_anthropic_key # Tùy chọn
export GROQ_API_KEY=your_groq_key # Tùy chọn
2. Để cài đặt Frontend, sử dụng Vite, React, và Tailwind CSS.
a. Di chuyển vào thư mục frontend:
cd ../frontend
b. Cài đặt các phụ thuộc Node.js:
npm install
c. Build frontend (tạo các tệp tĩnh để backend sử dụng):
npm run build
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:
ollama pull llava
c. Đảm bảo Ollama đang chạy:
ollama serve
Nếu Ollama không chạy trên http://127.0.0.1:11434, đặt biến môi trường:
export OLLAMA_HOST=http://your_ollama_host:port
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:
python -m openui --dev
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:
npm run dev
Đ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:
docker-compose up
Đ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.
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.
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:
.python-version trong thư mục gốc và backend, sau đó tạo lại môi trường ảo.d) Tùy chỉnh:
.gitpod.yml trong mã nguồn.
26/04/2025
24/04/2025
23/04/2025
16/04/2025
Cảm ơn bạn
đã đăng ký thành công!
TentenAI sẽ liên hệ trong thời gian sớm nhất.
Có lỗi xảy ra vui lòng thử lại sau!
Tiếp tục khám phá