|
### 🖼️ Xem trước Đa khung Chính xác
Trình xuất headless của OpenPencil được cài đặt sẽ kết xuất các bản xem trước trung thành với thiết kế: khung cấp cao nhất đầu tiên dưới dạng một PNG lớn an toàn để phát lại, cùng một dải ảnh thu nhỏ cuộn ngang, chọn bằng cách nhấp chuột và điều hướng trước/sau cho các tài liệu nhiều khung.
|
### 🗺️ Canvas Tương tác
"Mở canvas tương tác" tải trễ SDK Web OpenPencil chỉ đọc với các thao tác pan, zoom và vừa khung — kiểm tra mọi trang, nút lồng nhau hoặc trang không hoạt động mà không cần rời khỏi cuộc hội thoại.
|
|
### ✏️ Trình biên tập Quản lý
Với `editable: true`, hành động chỉnh sửa sẽ mở trình biên tập OpenPencil được quản lý — chọn đối tượng, lớp, thuộc tính, công cụ vẽ, hoàn tác/làm lại và ngữ nghĩa lưu tường minh — trong một khu làm việc bên phải có thể thay đổi kích thước kèm tùy chọn toàn màn hình.
|
### 🤖 Công cụ Thiết kế dành riêng cho Agent
Năm công cụ thao tác canvas trực tiếp cùng sáu công cụ `openpencil_pipeline_*` cho phép Agent tạo, kiểm tra, tinh chỉnh, công bố, sửa đổi và đọc một canvas thực qua các runtime OpenPencil được quản lý.
|
|
### 🔐 Cấp quyền được Kiểm soát bằng Capability
Các quyền truy cập hình ảnh và tài liệu là các capability được ký và ràng buộc băm. Siêu dữ liệu trình duyệt không bao giờ lộ một đường dẫn máy chủ tùy ý, và các capability xem trước/biên tập được ký không bao giờ đi vào kết quả công cụ chuẩn hoặc ngữ cảnh mô hình.
|
### ⚡ An toàn Giao dịch
Tài liệu trong pipeline đầy đủ vẫn là bản nháp riêng tư, chưa công bố cho đến khi vượt qua mọi cổng chất lượng native và DSH. Việc công bố không ghi đè đường dẫn hiện có; thao tác hủy hoặc batch thất bại không để lại đích rỗng.
|
|
### 🌍 Tuân theo Diện mạo & Cảm nhận của DSH
Thẻ công cụ và trình biên tập quản lý tuân theo ngôn ngữ Trung/Anh và chủ đề sáng/tối của DSH mà không cần tải lại phiên chỉnh sửa.
|
### 🎯 Một Quy trình Hoàn chỉnh
"Yêu cầu → bản nháp riêng tư → các batch ngữ nghĩa → bản xem trước live cho người dùng → xác thực tất định về cấu trúc/layout/chất lượng → công bố nguyên tử với tính toàn vẹn của PNG cuối" — một vòng khép kín trong DSH.
|
## Cài đặt vào DSH
DSH là một gói riêng. Cài một lần nếu bạn chưa có:
```sh
npm install -g @deepseek-ai/dsh@latest
```
Sau đó thêm plugin vào một profile và khởi động ứng dụng web:
```sh
dsh plugin --profile web add @zseven-w/dsh-openpencil@next
dsh web
```
Để phát triển cục bộ, hãy build checkout này, liên kết đường dẫn tuyệt đối của nó vào profile Web, rồi khởi động lại DSH hoàn toàn:
```sh
pnpm run build
dsh plugin --profile web add link:/absolute/path/to/dsh-openpencil
dsh web
```
Phụ thuộc `link:` làm cho các bản build lại sau đó hiển thị trực tiếp từ checkout này. Tuy nhiên, DSH phải được khởi động lại hoàn toàn sau khi thay thế phụ thuộc profile vì profile Web đi kèm không hot-reload các bundle host theo mặc định.
Không muốn cài DSH toàn cục? Chạy đúng hai bước đó qua `pnpm dlx`:
```sh
pnpm dlx --package=@deepseek-ai/dsh@latest dsh plugin --profile web add @zseven-w/dsh-openpencil@next
pnpm dlx --package=@deepseek-ai/dsh@latest dsh web
```
> Plugin OpenPencil là công khai và không yêu cầu token npm. Nếu bản prerelease của DSH tự nó yêu cầu xác thực registry, hãy giữ thông tin xác thực đó trong một cấu hình npm cấp người dùng hoặc tạm thời bên ngoài thư mục checkout. Kho lưu trữ này cố ý không chứa bất kỳ thông tin xác thực registry nào.
## Công cụ Thiết kế
Lựa chọn tùy chọn theo `openpencil_style_plan` → `openpencil_style_confirm` → `openpencil_pipeline_begin`, giữ brief gốc và truyền `style_selection`. Danh mục và chọn chính xác không cần đề xuất; nhà cung cấp mặc định tắt. Handoff hỗ trợ script, không hỗ trợ app-agent hay commerce. Tạo app-agent thông thường vẫn dùng được.
| Công cụ | Chức năng |
| --- | --- |
| `openpencil_new` | Lối nhanh tương thích cho tác vụ đơn giản: chạy một script QuickJS `batch_design` giao dịch, chỉ công bố nếu đích chưa tồn tại và trả về phần trình bày có thể chỉnh sửa. Hãy ưu tiên pipeline đầy đủ cho thiết kế production. |
| `openpencil_pipeline_begin` | Bắt đầu bản nháp riêng của phiên, tạo nội bộ root duy nhất, trả về hợp đồng canvas/build gọn khớp runtime và mở ngay chính bản nháp live đó trong thanh bên; `.op` đích vẫn chưa công bố. |
| `openpencil_pipeline_context` | Chỉ tải một chi tiết cụ thể về hướng dẫn, style, theme hoặc UI kit thực sự thiếu trong hợp đồng begin; đây không phải bước khởi động cố định. |
| `openpencil_pipeline_batch` | Chạy tối đa hai script tạo native trực tiếp `I(...)`/`K(...)`: viewport đầu tiên bị giới hạn bởi `begin.next`, rồi mọi vùng còn lại trong batch thứ hai và cuối. Mỗi giao dịch thành công chỉ thử hiển thị PNG chính xác cho người dùng. |
| `openpencil_pipeline_inspect` | Chỉ cung cấp chẩn đoán thủ công khi người dùng yêu cầu rõ ràng; quá trình tạo thông thường không dùng nó làm bản xem trước hay bước xem xét trực quan của mô hình. |
| `openpencil_pipeline_finish` | Trong một lần gọi lành mạnh, hoàn tất và xác thực bản nháp, tự động render bản xem trước PNG chính xác của root cuối và công bố nguyên tử bằng `createIfAbsent`. Chỉ kết quả `needs_correction`, `canContinue: true`, có `repairTargets` đầy đủ không rỗng và `omitted: 0` mới cho phép một lần sửa U-only và một lần finish cuối; mọi kết quả chưa công bố khác đều là terminal. |
| `openpencil_pipeline_abort` | Loại bỏ bản nháp chưa công bố mà không tạo tệp đích. |
| `openpencil_create` | Áp dụng một chương trình `batch_design` giao dịch để tạo hoặc tái cấu trúc các nút trên một canvas trực tiếp hiện có. |
| `openpencil_edit` | Sửa đổi một nút tường minh hoặc nút duy nhất do người dùng chọn. |
| `openpencil_render` | Tạo một ảnh chụp `.op` bất biến, định địa chỉ theo nội dung và kết xuất mọi khung cấp cao nhất trên trang đang hoạt động — `scale` và `editable` tùy chọn. |
| `openpencil_selection` | Đọc chính xác các nút đang được chọn trong canvas của trình biên tập trực tiếp. |
## Quy trình Thiết kế của Agent
Với một yêu cầu ngắn thông thường, hãy gọi ngay `openpencil_pipeline_begin` và đi theo lối nhanh cố định: batch JS trực tiếp đầu tiên bị giới hạn bởi `begin.next` → batch JS trực tiếp thứ hai và cuối chứa mọi vùng còn lại → một lần gọi `openpencil_pipeline_finish`. Begin tạo root duy nhất và mở ngay canvas live riêng trong thanh bên; đường dẫn workspace được yêu cầu vẫn chưa tồn tại cho đến khi công bố nguyên tử. Sau mỗi begin hoặc batch thành công, hãy thực hiện ngay lời gọi bắt buộc tiếp theo mà không tường thuật, lập kế hoạch, so sánh, kiểm tra hay gọi công cụ không liên quan. Mặc định toàn bộ thiết kế chỉ dùng đúng một ảnh; mỗi frame Hero/Product/Art/Media có đúng một hình ảnh chính, không bao giờ kết hợp ảnh với icon giữ chỗ.
Sau mỗi batch được commit thành công, công cụ chỉ thử trình bày bản xem trước PNG chính xác cho người dùng. Ngay khi lời gọi trả về, hãy làm theo `next` ngay lập tức; đừng chờ mô hình tự kiểm tra trực quan. Nếu `next` báo `previewUnavailable`, script đã được commit trên canvas live: không chạy lại batch và không gọi `openpencil_pipeline_inspect` hay `read_image`. `openpencil_pipeline_inspect` chỉ dành cho chẩn đoán mà người dùng yêu cầu rõ ràng.
Finish chạy các kiểm tra tất định native về finalization, lint, độ tương phản và layout cùng các cổng chất lượng cứng của DSH. Một lần gọi lành mạnh render PNG chính xác của root cuối và công bố trong cùng bước. Chỉ cho phép sửa khi kết quả đồng thời có `stage: "needs_correction"`, `canContinue: true`, `repairTargets` đầy đủ không rỗng với `omitted: 0`, và mỗi target có `operation: "U"`, `nodeId` chính xác không rỗng cùng `patch` không rỗng. Áp dụng mọi target cùng lúc trong đúng một batch U-only, rồi gọi finish đúng một lần cuối mà không tường thuật. Mọi kết quả chưa công bố khác, error hoặc `canContinue: false` đều là terminal: chỉ báo cáo một lần và không retry, inspect, đọc image/context, abort hay bắt đầu draft thay thế. Khi `published: true`, PNG cuối và trình biên tập live đã được đính kèm: trả kết quả và kết thúc ngay. Cổng thất bại hoặc `openpencil_pipeline_abort` giữ đích không tồn tại. Quyền chỉnh sửa theo tài liệu chỉ tự mở thanh bên khi thanh bên đang trống và luôn giữ **Sửa canvas** để chuyển đổi rõ ràng.
Trong cùng dịch vụ DSH đang chạy, sau khi đổi trình duyệt hoặc tải lại, một publication bền vững được phân tích nghiêm ngặt từ `openpencil_new` hoặc `openpencil_pipeline_finish` có thể được khôi phục thành PNG chính xác cùng hành động **Sửa canvas** rõ ràng. Thẻ lịch sử không bao giờ tự mở thanh bên; người dùng phải bấm hành động đó. `openpencil_render` lịch sử thông thường vẫn chỉ đọc, và kết nối không phải loopback không bao giờ nhận quyền biên tập.
Skill `openpencil-design` đi kèm vẫn là tài liệu tham khảo mỏng, tùy chọn; quá trình tạo thông thường bắt đầu trực tiếp từ hợp đồng begin gọn và đầy đủ. Schema công cụ native hiện tại là nguồn thẩm quyền, còn runtime được quản lý không phụ thuộc vào binary desktop. `openpencil_new` vẫn là lối nhanh một batch tương thích.
Chỉ dùng `openpencil_create` và `openpencil_edit` cho một canvas trực tiếp hiện có. Các chỉnh sửa của chúng vẫn chưa được lưu cho đến khi hành động Lưu của trình biên tập được thực hiện.
## Tài nguyên Web Viewer
DSH chỉ phục vụ `client.js` cho một client plugin, vì vậy SDK ESM của OpenPencil, WASM của nó và CanvasKit được đưa vào làm các tài nguyên cùng nguồn gốc tường minh:
```sh
pnpm run sync:viewer-assets
```
Lệnh sync ưu tiên dùng thư mục checkout `../openpencil` liền kề (phát triển cục bộ), rồi dự phòng sang submodule `vendor/openpencil` được đưa vào kho (CI và các bản clone mới). Ghi đè nó bằng `OPENPENCIL_ROOT` hoặc `--openpencil-root`. Một thư mục tài nguyên đã được dựng sẵn hoàn chỉnh có thể được chọn bằng `DSHPLUGIN_OPENPENCIL_VIEWER_SOURCE`. Việc tra cứu lúc chạy có thể được ghi đè bằng `DSHPLUGIN_OPENPENCIL_VIEWER_ASSET_DIR`.
Tài nguyên viewer chỉ được tải trễ sau khi người dùng mở canvas. Nếu chúng vắng mặt hoặc không hợp lệ, bản xem trước PNG vẫn khả dụng và không có nút canvas nào được quảng bá.
## Trình biên tập Quản lý
Các phiên có thể chỉnh sửa sử dụng web host được quản lý của OpenPencil — cùng kiến trúc được `op-vscode` sử dụng. Plugin chỉ khởi động host sau một hành động người dùng được ủy quyền, giữ token daemon trong bộ nhớ, xác thực nguồn và origin của iframe, và đóng tiến trình khi phiên trình biên tập kết thúc. Bề mặt trình biên tập được chọn dần: chi tiết Tool gốc khi host khai báo ranh giới đó, nếu không thì là khu làm việc bên phải của plugin với các điều khiển thay đổi kích thước và toàn màn hình.
Quá trình khởi động dùng listening handshake an toàn với mount chậm: các probe sẵn sàng chỉ bắt đầu sau khi host đi kèm công bố địa chỉ đã bind. Không cần cài OpenPencil bản desktop.
Các bản cài đặt đã phát hành chọn gói phù hợp với OS/CPU hiện tại trong sáu gói nền tảng native: `darwin-arm64`, `darwin-x64`, `linux-arm64`, `linux-x64`, `win32-arm64` và `win32-x64`; cả hai gói Linux đều nhắm tới glibc. Gói gốc khai báo chúng là `optionalDependencies` với phiên bản chính xác để trình quản lý gói chọn đúng biến thể (ví dụ `@zseven-w/dsh-openpencil-darwin-arm64`). Gói đó phân phối `op-host-web-server`, web bundle của trình biên tập và CanvasKit tương thích với nhau như một runtime duy nhất. Vì vậy, trình biên tập được quản lý không phụ thuộc vào `/Applications/OpenPencil.app`, `openpencil-desktop` trong `PATH` hay một checkout mã nguồn OpenPencil.
Nếu DSH tải lại hoặc gỡ plugin trong khi canvas đang có thay đổi chưa lưu, host giữ một bản nháp phục hồi cục bộ không thể đọc được trong tối đa bảy ngày. Việc mở lại cùng nguồn đó sẽ hỏi trước khi khôi phục nó vào canvas trực tiếp; phục hồi không bao giờ ghi đè tệp `.op` cho đến khi người dùng lưu một cách tường minh.
Các gói chính thức cho sáu nền tảng được chèn endpoint bootstrap cộng tác dành cho Trung Quốc và Toàn cầu trong build release được bảo vệ; các giá trị đã chèn được xác thực trước khi phát hành. Bản tự build cục bộ không có bước chèn này có thể ghi đè bootstrap trước khi khởi động DSH bằng `OPENPENCIL_COLLAB_BOOTSTRAP_URL=https://