Projeto
Teste entrada vazia, linhas irregulares e nomes desconectados, retornando limites exclusivos apenas quando cada área preenche seu retângulo.
Ambiente de programação com IA
Áreas retangulares de CSS Grid
Valide áreas retangulares com identificadores ASCII e células vazias de um único ponto.
● ● ●Arevia●
Fluxos de trabalho · Áreas retangulares 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 retangulares de CSS Grid
✓ AlteraçõesRevise antes de aplicar ↗
Ilustração do ambiente
Revise antes de aplicar
Compare o comportamento real com o resultado esperado. Se uma verificação falhar, investigue a causa antes de fazer outras alterações.
Modelos
Configure um endpoint compatível com OpenAI ou Anthropic com a URL base e uma chave API, quando necessária. Teste a conexão. O servidor local precisa estar em execução; ferramentas remotas podem transmitir dados separadamente.
Fluxos de trabalho
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 resultLeve a regra de layout até uma resposta útil da interface
Arevia é um ambiente de programação com IA para Windows voltado ao desenvolvimento do código que conecta entradas de layout ao comportamento visível. Abra os arquivos relevantes do projeto e descreva o que a pessoa que edita o layout deve poder expressar. Peça ao modelo que examine o validador e o código que o chama antes de alterar qualquer lado dessa interação.
Você escolhe o modelo assistente por meio de um endpoint compatível com OpenAI ou da Anthropic que seja suportado e fornece credenciais quando necessário. É possível selecionar um modelo de IA sem censura se o seu endpoint oferecer essa opção. As restrições, o suporte a ferramentas e a capacidade de contexto continuam sendo características dessa configuração, e não garantias associadas à tarefa de layout.
Uma verificação de áreas retangulares de grade CSS é um exemplo de solicitação. Traga para a conversa uma grade válida, uma região nomeada desconectada e uma linha de largura desigual. Pergunte como a implementação atual aceita ou rejeita cada caso e revise uma proposta de alteração que preserve layouts válidos enquanto explica ao usuário por que um deles é inválido.
Mantenha o resultado do validador e a resposta da interface na mesma revisão. Uma rejeição correta ainda precisa de uma mensagem útil, e um layout aceito deve chegar ao fluxo de renderização pretendido. Execute os testes do projeto, examine o código alterado e experimente layouts representativos na sua própria interface antes de decidir que o recurso se comporta conforme a especificação.
Da entrada de layout ao retorno ao usuário
- O que diferencia um erro de regra da grade de um problema de renderização?
Primeiro, confira se a estrutura enviada passa pela validação pretendida. Se passar, acompanhe a saída aceita até a renderização. Peça ao modelo que examine os dois fluxos com o mesmo caso de teste, em vez de alterar o CSS antes de identificar a etapa que falha.
- Uma região inválida deve ser corrigida automaticamente?
Somente se isso for um requisito explícito do produto. A correção pode modificar o layout que alguém pretendia criar. Defina se a interface deve rejeitar, explicar ou transformar a entrada e revise o código resultante de acordo com esse comportamento escolhido.
- Quais exemplos de grade devem acompanhar uma solicitação de alteração?
Inclua um retângulo válido, uma região nomeada com uma lacuna e linhas com larguras diferentes. Informe o resultado esperado de cada caso. Acrescente o menor caso de teste que reproduza o seu problema para manter a revisão ligada ao comportamento relatado.
- Como manter o escopo adequado de uma tarefa de pré-visualização de layout?
Indique os arquivos e os casos de aceitação antes de solicitar o trabalho. Revise as ações propostas para ferramentas, pois a inferência local do modelo exige um servidor separado e não torna todas as ferramentas locais. Verifique a interface resultante no ambiente que você realmente utiliza.
Arevia · Atualizado 2026-10-25