Dự án
Thử đầu vào rỗng, hàng không đều và tên bị tách rời, chỉ trả về biên loại trừ khi mỗi vùng lấp đầy hình chữ nhật của nó.
Không gian lập trình với AI
Vùng chữ nhật trong CSS Grid
Kiểm tra các vùng chữ nhật có tên ASCII và dấu chấm đơn cho ô trống.
● ● ●Arevia●
Quy trình · Vùng chữ nhật trong CSS Grid ×
import re
def grid_areas(rows):
if type(rows) is not list or any(type(r) is not str for r in rows):
raise ValueError("grid.rows")
if not rows:
return {}
cells = [r.split() for r in rows]
width = len(cells[0])
if not width or any(len(r) != width for r in cells):
raise ValueError("grid.width")
groups = {}
for y, row in enumerate(cells):
for x, name in enumerate(row):
if name == ".":
continue
if not re.fullmatch(r"[A-Za-z_][A-Za-z0-9_-]*", name):
raise ValueError("grid.name")
groups.setdefault(name, []).append((y, x))
result = {}
for name, points in groups.items():
top, bottom = min(y for y,x in points), max(y for y,x in points)+1
left, right = min(x for y,x in points), max(x for y,x in points)+1
if len(points) != (bottom-top)*(right-left):
raise ValueError("grid.rectangle")
result[name] = (top, bottom, left, right)
return result✳Vùng chữ nhật trong CSS Grid
✓ Thay đổiKiểm tra trước khi áp dụng ↗
Minh họa không gian làm việc
Kiểm tra trước khi áp dụng
So sánh hành vi thực tế với kết quả mong đợi. Nếu kiểm tra thất bại, tìm nguyên nhân trước khi sửa tiếp.
Mô hình
Cấu hình endpoint tương thích OpenAI hoặc Anthropic bằng URL cơ sở và khóa API nếu cần. Kiểm tra kết nối. Máy chủ mô hình cục bộ phải đang chạy; công cụ từ xa có thể truyền dữ liệu riêng.
Quy trình
import re
def grid_areas(rows):
if type(rows) is not list or any(type(r) is not str for r in rows):
raise ValueError("grid.rows")
if not rows:
return {}
cells = [r.split() for r in rows]
width = len(cells[0])
if not width or any(len(r) != width for r in cells):
raise ValueError("grid.width")
groups = {}
for y, row in enumerate(cells):
for x, name in enumerate(row):
if name == ".":
continue
if not re.fullmatch(r"[A-Za-z_][A-Za-z0-9_-]*", name):
raise ValueError("grid.name")
groups.setdefault(name, []).append((y, x))
result = {}
for name, points in groups.items():
top, bottom = min(y for y,x in points), max(y for y,x in points)+1
left, right = min(x for y,x in points), max(x for y,x in points)+1
if len(points) != (bottom-top)*(right-left):
raise ValueError("grid.rectangle")
result[name] = (top, bottom, left, right)
return resultĐưa quy tắc bố cục thành phản hồi hữu ích trên giao diện
Arevia là không gian lập trình AI trên Windows để phát triển mã kết nối đầu vào bố cục với hành vi hiển thị. Mở các tệp dự án liên quan và mô tả những gì người chỉnh bố cục được phép biểu đạt. Yêu cầu mô hình xem xét bộ kiểm tra cùng nơi gọi nó trước khi thay đổi một trong hai phía của tương tác.
Bạn chọn mô hình hỗ trợ qua điểm cuối tương thích OpenAI hoặc Anthropic được hỗ trợ và cung cấp thông tin xác thực khi cần. Có thể chọn mô hình AI không kiểm duyệt nếu điểm cuối cung cấp. Các hạn chế, khả năng dùng công cụ và dung lượng ngữ cảnh vẫn phụ thuộc thiết lập đó, chứ không phải bảo đảm gắn với tác vụ bố cục.
Kiểm tra vùng lưới CSS hình chữ nhật là một yêu cầu ví dụ. Đưa vào cuộc trao đổi một lưới hợp lệ, một vùng có tên bị ngắt quãng và một hàng không đều. Hỏi cách triển khai hiện tại chấp nhận hay từ chối từng trường hợp, rồi xem xét sửa đổi được đề xuất nhằm giữ nguyên bố cục hợp lệ và giải thích bố cục không hợp lệ cho người dùng.
Xem xét kết quả kiểm tra và phản hồi giao diện cùng nhau. Việc từ chối đúng vẫn cần thông báo hữu ích, còn bố cục được chấp nhận phải đi vào luồng kết xuất dự kiến. Chạy kiểm thử dự án, đọc mã đã thay đổi và thử các bố cục tiêu biểu trên giao diện của bạn trước khi kết luận tính năng hoạt động đúng đặc tả.
Từ đầu vào bố cục đến phản hồi
- Điều gì phân biệt lỗi quy tắc lưới với vấn đề kết xuất?
Trước hết kiểm tra cấu trúc gửi vào có vượt qua bước kiểm tra dự kiến không. Nếu có, theo dõi đầu ra được chấp nhận tới bước kết xuất. Yêu cầu mô hình xem cả hai luồng với cùng dữ liệu mẫu, thay vì sửa CSS trước khi xác định giai đoạn lỗi.
- Có nên tự động sửa vùng không hợp lệ không?
Chỉ khi đó là yêu cầu sản phẩm rõ ràng. Việc sửa có thể thay đổi bố cục người dùng mong muốn. Xác định giao diện cần từ chối, giải thích hay chuyển đổi đầu vào rồi đối chiếu mã với hành vi đã chọn.
- Nên kèm ví dụ lưới nào trong yêu cầu thay đổi?
Kèm một hình chữ nhật hợp lệ, một vùng có tên bị hở và các hàng khác chiều rộng. Nêu kết quả mong đợi cho mỗi trường hợp. Thêm dữ liệu mẫu nhỏ nhất tái hiện lỗi của bạn để việc rà soát bám sát hành vi được báo cáo.
- Làm sao giới hạn phạm vi tác vụ xem trước bố cục cho phù hợp?
Nêu tên tệp và các trường hợp nghiệm thu trước khi yêu cầu thực hiện. Xem xét mọi thao tác công cụ được đề xuất, vì suy luận mô hình cục bộ cần máy chủ riêng và không khiến mọi công cụ đều chạy cục bộ. Kiểm chứng giao diện thu được trong môi trường bạn thực sự sử dụng.
Arevia · Cập nhật 2026-10-25