Proyecto
Comprueba entrada vacía, filas desiguales y nombres desconectados, devolviendo límites exclusivos solo si cada área llena su rectángulo.
Espacio de programación con IA
Áreas rectangulares de CSS Grid
Valida áreas rectangulares con identificadores ASCII y celdas vacías de un solo punto.
● ● ●Arevia●
Flujos de trabajo · Áreas rectangulares de 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✳Áreas rectangulares de CSS Grid
✓ CambiosRevisa antes de aplicar ↗
Vista ilustrativa
Revisa antes de aplicar
Compara el comportamiento real con el resultado esperado. Si una prueba falla, investiga la causa antes de hacer más cambios.
Modelos
Configura un endpoint compatible con OpenAI o Anthropic usando la URL base y, si hace falta, una clave API. Prueba la conexión. Un servidor local debe estar en ejecución; las herramientas remotas pueden enviar datos por separado.
Flujos de trabajo
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 resultLleva la regla de diseño hasta una respuesta útil de la interfaz
Arevia es un entorno de programación con IA para Windows destinado a desarrollar el código que conecta las entradas de diseño con el comportamiento visible. Abre los archivos pertinentes del proyecto y describe qué debe poder expresar la persona que edita el diseño. Pide al modelo que examine el validador y el código que lo llama antes de cambiar cualquiera de los dos lados de esa interacción.
Eliges el modelo de asistencia mediante un endpoint compatible con OpenAI o de Anthropic admitido y proporcionas credenciales cuando sean necesarias. Puedes seleccionar un modelo de IA sin censura si tu endpoint lo ofrece. Sus restricciones, compatibilidad con herramientas y capacidad de contexto siguen siendo propiedades de esa configuración, no garantías asociadas a la tarea de diseño.
Una comprobación de áreas rectangulares de cuadrícula CSS es un ejemplo de solicitud. Aporta a la conversación una cuadrícula válida, una región con nombre desconectada y una fila irregular. Pregunta cómo la implementación actual acepta o rechaza cada caso y revisa después una propuesta de cambio que conserve los diseños válidos y explique al usuario los no válidos.
Mantén el resultado del validador y la respuesta de la interfaz en la misma revisión. Un rechazo correcto también necesita un mensaje útil, y un diseño aceptado debe llegar a la ruta de renderizado prevista. Ejecuta las pruebas del proyecto, examina el código modificado y prueba diseños representativos en tu propia interfaz antes de decidir que la función se comporta según lo especificado.
Del diseño introducido a la respuesta al usuario
- ¿Qué distingue un error de reglas de cuadrícula de un problema de renderizado?
Comprueba primero si la estructura enviada supera la validación prevista. Si la supera, sigue la salida aceptada hasta el renderizado. Pide al modelo que examine ambas rutas con el mismo caso de prueba, en vez de cambiar el CSS antes de identificar la etapa que falla.
- ¿Debe repararse automáticamente una región no válida?
Solo si es un requisito explícito del producto. La reparación puede alterar el diseño que alguien pretendía crear. Define si la interfaz debe rechazar, explicar o transformar la entrada y revisa el código resultante conforme a ese comportamiento elegido.
- ¿Qué ejemplos de cuadrícula deben acompañar una solicitud de cambio?
Incluye un rectángulo válido, una región con nombre que tenga un hueco y filas de anchuras diferentes. Indica el resultado esperado para cada caso. Añade el caso de prueba más pequeño que reproduzca tu problema para que la revisión siga vinculada al comportamiento comunicado.
- ¿Cómo mantengo un alcance adecuado al trabajar en una vista previa del diseño?
Indica los archivos y los casos de aceptación antes de solicitar el trabajo. Revisa las acciones propuestas con herramientas, ya que la inferencia local del modelo requiere un servidor separado y no hace que todas las herramientas sean locales. Verifica la interfaz resultante en el entorno que realmente utilizas.
Arevia · Actualizado 2026-10-25