UIGEN-T1-Qwen-7b: Modelos especializados para generar componentes de interfaz de usuario HTML y CSS

Introducción general

UIGEN-T1 es un sistema de 7.000 millones de parámetros Transformador basado en Qwen2.5-Coder-7B-Instruct y diseñado para la generación de interfaces de usuario basadas en el razonamiento. Utiliza un sofisticado enfoque de cadena de pensamiento para generar potentes componentes de interfaz de usuario basados en HTML y CSS. Actualmente, se limita a aplicaciones básicas como cuadros de mando, páginas de destino y formularios de registro. El modelo genera diseños HTML y CSS razonando sobre principios de diseño. Aunque cuenta con un potente proceso de razonamiento en cadena, actualmente está limitado a elementos de interfaz de usuario basados en texto y aplicaciones frontales más sencillas. El modelo destaca en paneles de control, páginas de destino y formularios de registro, pero carece de interactividad avanzada (por ejemplo, funciones que hagan un uso intensivo de JavaScript).

Lista de funciones

• Generación de IUCapacidad de generar código HTML y CSS para crear interfaces de usuario.
• pensamiento en cadenaGenerar diseños de interfaz de usuario razonando sobre los principios de diseño utilizando un enfoque de pensamiento en cadena.
• Escenarios aplicables: Especialmente adecuado para aplicaciones básicas como cuadros de mando, páginas de destino y formularios de registro.
• generación de códigoEl código generado está bien estructurado y es eficaz.

Utilizar la ayuda

UIGEN-T1 es capaz de generar código HTML y CSS de interfaz de usuario (UI) basado en palabras clave. A continuación se indican los pasos y consideraciones básicos para utilizar el modelo:

1. Preparar el entorno

Asegúrese de que su entorno cumple los siguientes requisitos:

• softwareSe recomiendan al menos 12 GB de VRAM.
• hardware::
  • Biblioteca Transformers (Cara de abrazo)
  • PyTorch

2. Instalación de dependencias

pip install transformers
pip install torch

3. Código de razonamiento básico

Utilice el siguiente código para el razonamiento básico:

from transformers import AutoModelForCausalLM, AutoTokenizer
model_name = "smirki/UIGEN-T1"
tokenizer = AutoTokenizer.from_pretrained(model_name)
model = AutoModelForCausalLM.from_pretrained(model_name).to("cuda")
prompt = """<|im_start|>user
Make a dark-themed dashboard for an oil rig.<|im_end|>
<|im_start|>assistant
<|im_start|>think
"""
inputs = tokenizer(prompt, return_tensors="pt").to("cuda")
outputs = model.generate(**inputs, max_new_tokens=12012, do_sample=True, temperature=0.7) #max tokens has to be greater than 12k
print(tokenizer.decode(outputs[0], skip_special_tokens=True))

4. Interpretación de los códigos

• Modelo de carga::
  • model_name = "smirki/UIGEN-T1"Especifica el nombre del modelo.
  • tokenizer = AutoTokenizer.from_pretrained(model_name)Carga el desambiguador preentrenado.
  • model = AutoModelForCausalLM.from_pretrained(model_name).to("cuda")Carga el modelo y muévelo al dispositivo CUDA (si está disponible).
• Preparación de la palabra clave::
  • promptPalabras clave que contienen instrucciones para el usuario. Por ejemplo, crear un salpicadero de temática oscura para una plataforma petrolífera.
• razonamiento modelizado::
  • inputs = tokenizer(prompt, return_tensors="pt").to("cuda")Convertir la palabra clave en un tensor PyTorch y moverlo a un dispositivo CUDA.
  • outputs = model.generate(**inputs, max_new_tokens=12012, do_sample=True, temperature=0.7): Generar salida.
    • max_new_tokensEstablece el número máximo de fichas generadas, que debe ser superior a 12012.
    • do_sample: Permitir el muestreo para aumentar la diversidad de los contenidos generados.
    • temperature: controlan la diversidad del contenido generado; los valores más bajos hacen que la salida sea más determinista.
• Descodificación de salida::
  • print(tokenizer.decode(outputs, skip_special_tokens=True))Decodifica el token generado en texto e imprime el resultado.

5. Técnicas de utilización

• Palabra clave ingeniería::
  • Para un mejor razonamiento, puede ser necesario añadir "respuesta" al final de la pregunta de entrada.
  • Ejemplo:Make a dark-themed dashboard for an oil rig. answer
• Postprocesado manual::
  • El código de interfaz de usuario generado puede requerir un postprocesamiento manual para su perfeccionamiento.
• ajuste fino::
  • El modelo puede ajustarse aún más para marcos frontales específicos (por ejemplo, React, Vue, etc.).

6. Limitaciones

• No es adecuado para aplicaciones frontales complejasEste modelo no se aplica a las aplicaciones frontales complejas que implican muchas interacciones de JavaScript.
• Diversidad limitada de diseñosEl modelo favorece los diseños frontales básicos y puede que no genere diseños de interfaz de usuario creativos o avanzados.
• artefactosAlgunos resultados pueden contener errores de formato.

7. Escenarios aplicables

• paneles de instrumentos: Genere rápidamente pantallas de presentación de datos.
• página de aterrizaje: Crea sencillas aplicaciones de una página.
• formulario de inscripción: Genera la pantalla de registro de usuario.