UIGEN-T1-Qwen-7b: Modelos especializados para geração de componentes de interface do usuário HTML e CSS

Introdução geral

O UIGEN-T1 é um sistema de 7 bilhões de parâmetros Transformador que é ajustado com base no Qwen2.5-Coder-7B-Instruct e projetado para geração de IU baseada em raciocínio. Ele usa uma abordagem sofisticada de cadeia de pensamento para gerar componentes avançados de UI baseados em HTML e CSS. Atualmente, ele está limitado a aplicativos básicos, como painéis, páginas de destino e formulários de registro. O modelo gera layouts HTML e CSS raciocinando sobre princípios de design. Embora tenha um poderoso processo de raciocínio de pensamento em cadeia, atualmente está limitado a elementos de UI baseados em texto e aplicativos front-end mais simples. O modelo é excelente em painéis, páginas de destino e formulários de registro, mas carece de interatividade avançada (por exemplo, recursos que fazem uso intenso de JavaScript).

Lista de funções

• Geração da interface do usuárioCapacidade de gerar código HTML e CSS para criar interfaces de usuário.
• pensamento em cadeiaGeração de layouts de interface do usuário por meio de raciocínio sobre princípios de design usando uma abordagem de pensamento em cadeia.
• Cenários aplicáveis: Particularmente adequado para aplicativos básicos, como painéis, páginas de destino e formulários de registro.
• geração de códigoO código gerado é bem estruturado e eficaz.

Usando a Ajuda

O UIGEN-T1 é capaz de gerar códigos HTML e CSS da interface do usuário (UI) com base em palavras-chave. Veja a seguir as etapas e considerações básicas para usar o modelo:

1. preparação do ambiente

Certifique-se de que seu ambiente atenda aos seguintes requisitos:

• softwareVRAM: Recomenda-se pelo menos 12 GB de VRAM.
• hardware::
  • Transformers Library (Cara de abraço)
  • PyTorch

2. instalação de dependências

pip install transformers
pip install torch

3. código de raciocínio básico

Use o código a seguir para raciocínio básico:

from transformers import AutoModelForCausalLM, AutoTokenizer
nome_do_modelo = "smirki/UIGEN-T1"
tokeniser = AutoTokenizer.from_pretrained(nome_do_modelo)
model = AutoModelForCausalLM.from_pretrained(nome_do_modelo).to("cuda")
prompt = """usuário
Crie um painel de controle com tema sombrio para uma plataforma de petróleo.
assistente
pensar
"""
inputs = tokenizer(prompt, return_tensors="pt").to("cuda")
outputs = model.generate(**inputs, max_new_tokens=12012, do_sample=True, temperature=0.7) #max tokens deve ser maior que 12k
print(tokeniser.decode(outputs[0], skip_special_tokens=True))

4. interpretação do código

• Carregamento do modelo::
  • nome_do_modelo = "smirki/UIGEN-T1"Nome do modelo: Especifica o nome do modelo.
  • tokenizer = AutoTokenizer.from_pretrained(nome_do_modelo)Carregamento do desambiguador pré-treinado: carrega o desambiguador pré-treinado.
  • model = AutoModelForCausalLM.from_pretrained(nome_do_modelo).to("cuda")Carga: Carregue o modelo e mova-o para o dispositivo CUDA (se disponível).
• Preparação da palavra-chave::
  • imediatoPalavras de prompt que contêm instruções para o usuário. Por exemplo, criar um painel de controle com tema escuro para uma plataforma de petróleo.
• raciocínio modelado::
  • inputs = tokenizer(prompt, return_tensors="pt").to("cuda")Converta a palavra-chave em um tensor PyTorch e mova-o para um dispositivo CUDA.
  • outputs = model.generate(**inputs, max_new_tokens=12012, do_sample=True, temperature=0.7)Gerar saída: Gerar saída.
    • max_new_tokensDefine o número máximo de tokens gerados, que deve ser maior que 12012.
    • do_samplePermitir a amostragem para aumentar a diversidade do conteúdo gerado.
    • temperaturaControle a diversidade do conteúdo gerado; valores mais baixos tornam a saída mais determinística.
• Decodificação de saída::
  • print(tokeniser.decode(outputs, skip_special_tokens=True))Decodificação: Decodifica o token gerado em texto e imprime o resultado.

5. técnicas de uso

• Engenharia de palavras::
  • Para melhorar o raciocínio, pode ser necessário adicionar "answer" (resposta) ao final do prompt de entrada.
  • Exemplo:Crie um painel de controle com tema sombrio para uma plataforma de petróleo. Resposta
• Pós-processamento manual::
  • O código da interface do usuário gerado pode exigir pós-processamento manual para refinamento.
• ajuste fino::
  • O modelo pode ser ajustado ainda mais para estruturas de front-end específicas (por exemplo, React, Vue etc.).

6. limitações

• Não é adequado para aplicativos front-end complexosEsse modelo não se aplica a aplicativos front-end complexos que envolvem muitas interações com JavaScript.
• Diversidade limitada de designO modelo favorece layouts básicos de front-end e pode não gerar layouts de IU criativos ou avançados.
• artefatosAlguns resultados podem conter artefatos de formatação.

7. cenários aplicáveis

• painéis de instrumentosGeração rápida de telas de apresentação de dados.
• página de destinoCrie aplicativos simples de uma página.
• Formulário de registroGerar a tela de registro do usuário.