โปรเจกต์
ทดสอบอินพุตว่าง แถวไม่เท่ากัน และชื่อที่แยกจากกัน โดยคืนขอบเขตแบบไม่รวมปลายเฉพาะพื้นที่ที่เต็มสี่เหลี่ยม.
พื้นที่เขียนโค้ดด้วย AI
พื้นที่สี่เหลี่ยมใน CSS Grid
ตรวจสอบพื้นที่สี่เหลี่ยมที่ใช้ชื่อ ASCII และจุดเดี่ยวสำหรับช่องว่าง.
● ● ●Arevia●
ขั้นตอนการทำงาน · พื้นที่สี่เหลี่ยมใน 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✳พื้นที่สี่เหลี่ยมใน CSS Grid
✓ การเปลี่ยนแปลงตรวจสอบก่อนนำไปใช้ ↗
ภาพประกอบพื้นที่ทำงาน
ตรวจสอบก่อนนำไปใช้
เปรียบเทียบการทำงานจริงกับผลที่คาดหวัง หากการตรวจสอบไม่ผ่าน ให้หาสาเหตุก่อนแก้ไขเพิ่มเติม
โมเดล
ตั้งค่า endpoint ที่รองรับ OpenAI หรือ Anthropic ด้วย URL หลักและคีย์ API หากจำเป็น ทดสอบการเชื่อมต่อ เซิร์ฟเวอร์โมเดลในเครื่องต้องทำงานอยู่ เครื่องมือระยะไกลอาจส่งข้อมูลแยกต่างหาก
ขั้นตอนการทำงาน
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เชื่อมกฎเลย์เอาต์ไปจนถึงการตอบสนองของอินเทอร์เฟซที่เป็นประโยชน์
Arevia เป็นพื้นที่ทำงานเขียนโค้ดด้วย AI บน Windows สำหรับพัฒนาโค้ดที่เชื่อมข้อมูลเลย์เอาต์กับพฤติกรรมที่มองเห็นได้ เปิดไฟล์โครงการที่เกี่ยวข้องและอธิบายว่าผู้แก้เลย์เอาต์ควรระบุอะไรได้บ้าง ขอให้โมเดลตรวจทั้งตัวตรวจสอบและโค้ดที่เรียกใช้ก่อนเปลี่ยนส่วนใดส่วนหนึ่งของการทำงานร่วมกันนี้
คุณเลือกโมเดลผู้ช่วยผ่านปลายทางที่รองรับซึ่งเข้ากันได้กับ OpenAI หรือปลายทาง Anthropic และให้ข้อมูลรับรองเมื่อจำเป็น เลือกโมเดล AI ไร้การเซ็นเซอร์ได้หากปลายทางมีให้ ข้อจำกัด การรองรับเครื่องมือ และความจุบริบทยังคงขึ้นกับการตั้งค่านั้น ไม่ใช่การรับประกันที่มากับงานเลย์เอาต์
การตรวจว่าพื้นที่ CSS grid-area เป็นสี่เหลี่ยมเป็นตัวอย่างคำขอหนึ่ง นำกริดที่ถูกต้อง พื้นที่มีชื่อที่ไม่เชื่อมต่อกัน และแถวที่กว้างไม่เท่ากันเข้าสู่การสนทนา ถามว่าโค้ดปัจจุบันยอมรับหรือปฏิเสธแต่ละกรณีอย่างไร แล้วตรวจการแก้ไขที่เสนอซึ่งรักษาเลย์เอาต์ที่ถูกต้องพร้อมอธิบายเลย์เอาต์ที่ผิดให้ผู้ใช้เข้าใจ
ตรวจผลจากตัวตรวจสอบและการตอบสนองของอินเทอร์เฟซร่วมกัน แม้ปฏิเสธได้ถูกต้องก็ยังต้องมีข้อความที่เป็นประโยชน์ และเลย์เอาต์ที่ยอมรับควรไปถึงเส้นทางแสดงผลที่ต้องการ รันการทดสอบโครงการ ตรวจซอร์สที่เปลี่ยน และลองเลย์เอาต์ตัวแทนในอินเทอร์เฟซของคุณก่อนตัดสินว่าฟีเจอร์ทำงานตามข้อกำหนด
จากข้อมูลเลย์เอาต์สู่คำอธิบายผล
- อะไรแยกข้อผิดพลาดของกฎกริดจากปัญหาการแสดงผล?
ตรวจโครงสร้างที่ส่งมาก่อนว่าผ่านการตรวจสอบตามที่ตั้งใจหรือไม่ หากผ่าน ให้ติดตามผลที่ยอมรับเข้าสู่การแสดงผล ขอให้โมเดลตรวจทั้งสองเส้นทางด้วยชุดข้อมูลเดียวกัน แทนการแก้ CSS ก่อนรู้ว่าขั้นใดล้มเหลว
- ควรซ่อมพื้นที่ที่ไม่ถูกต้องโดยอัตโนมัติหรือไม่?
ทำเฉพาะเมื่อเป็นข้อกำหนดผลิตภัณฑ์ที่ชัดเจน การซ่อมอาจเปลี่ยนเลย์เอาต์ที่ผู้ใช้ตั้งใจ กำหนดว่าอินเทอร์เฟซควรปฏิเสธ อธิบาย หรือแปลงข้อมูล แล้วตรวจโค้ดที่ได้เทียบกับพฤติกรรมที่เลือก
- ควรแนบตัวอย่างกริดใดกับคำขอแก้ไข?
ใส่สี่เหลี่ยมที่ถูกต้อง พื้นที่มีชื่อที่มีช่องว่าง และแถวที่กว้างต่างกัน ระบุผลที่คาดหวังแต่ละกรณี เพิ่มชุดข้อมูลเล็กที่สุดที่ทำให้เกิดปัญหาของคุณ เพื่อให้การตรวจยังยึดกับพฤติกรรมที่รายงาน
- จะจำกัดขอบเขตงานตัวอย่างเลย์เอาต์ให้เหมาะสมได้อย่างไร?
ระบุไฟล์และกรณีตรวจรับก่อนขอให้ทำงาน ตรวจการใช้เครื่องมือที่เสนอ เพราะการอนุมานด้วยโมเดลภายในเครื่องต้องมีเซิร์ฟเวอร์แยกและไม่ได้ทำให้เครื่องมือทั้งหมดอยู่ภายในเครื่อง ตรวจอินเทอร์เฟซที่ได้ในสภาพแวดล้อมที่คุณใช้จริง
Arevia · อัปเดต 2026-10-25