UIGEN-T1-Qwen-7b : Modèles spécialisés pour la génération de composants UI HTML et CSS

Introduction générale

UIGEN-T1 est un système de mesure de 7 milliards de paramètres. Transformateur qui est affiné sur la base de Qwen2.5-Coder-7B-Instruct et conçu pour la génération d'interfaces utilisateur basées sur le raisonnement. Il utilise une approche sophistiquée de la chaîne de pensée pour générer de puissants composants d'interface utilisateur HTML et CSS. Actuellement, il est limité aux applications de base telles que les tableaux de bord, les pages d'atterrissage et les formulaires d'inscription. Le modèle génère des mises en page HTML et CSS en raisonnant sur les principes de conception. Bien qu'il dispose d'un puissant processus de raisonnement en chaîne, il est actuellement limité aux éléments d'interface utilisateur textuels et aux applications frontales les plus simples. Le modèle excelle dans les tableaux de bord, les pages d'atterrissage et les formulaires d'inscription, mais il manque d'interactivité avancée (par exemple, les fonctions qui font un usage intensif de JavaScript).

Liste des fonctions

• Génération d'interface utilisateurCapacité à générer du code HTML et CSS pour la construction d'interfaces utilisateur.
• réflexion en chaîneLes fonctions de l'interface utilisateur sont les suivantes : générer des modèles d'interface utilisateur en raisonnant sur les principes de conception à l'aide d'une approche de réflexion en chaîne.
• Scénarios applicablesLes applications de base telles que les tableaux de bord, les pages d'atterrissage et les formulaires d'inscription sont particulièrement adaptées.
• génération de codesLe code généré est bien structuré et efficace.

Utiliser l'aide

UIGEN-T1 est capable de générer le code HTML et CSS de l'interface utilisateur (UI) sur la base des mots-clés. Les étapes et considérations de base pour l'utilisation du modèle sont les suivantes :

1. préparer l'environnement

Assurez-vous que votre environnement répond aux exigences suivantes :

• logicielVRAM : Il est recommandé d'avoir au moins 12 Go de VRAM.
• matériel: :
  • Bibliothèque Transformers (Hugging Face)
  • PyTorch

2. installation des dépendances

pip install transformers
pip install torch

3. code de raisonnement de base

Utilisez le code suivant pour un raisonnement de base :

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. l'interprétation du code

• Chargement du modèle: :
  • model_name = "smirki/UIGEN-T1"Nom du modèle : Spécifie le nom du modèle.
  • tokenizer = AutoTokenizer.from_pretrained(model_name): Chargement du désambiguïsateur pré-entraîné.
  • model = AutoModelForCausalLM.from_pretrained(model_name).to("cuda")Chargement du modèle : charger le modèle et le déplacer vers le dispositif CUDA (s'il est disponible).
• Préparation des mots-clés: :
  • promptLes mots-clés : les mots-clés qui contiennent des instructions pour l'utilisateur. Par exemple, créer un tableau de bord à thème sombre pour une plate-forme pétrolière.
• raisonnement modélisé: :
  • inputs = tokenizer(prompt, return_tensors="pt").to("cuda")Le mot de repère est converti en un tenseur PyTorch et déplacé vers un périphérique CUDA.
  • outputs = model.generate(**inputs, max_new_tokens=12012, do_sample=True, temperature=0.7): Générer une sortie.
    • max_new_tokensNombre de jetons générés : Définit le nombre maximum de jetons générés, qui doit être supérieur à 12012.
    • do_sampleLes services d'échantillonnage permettent d'accroître la diversité du contenu généré.
    • temperature: contrôle la diversité du contenu généré ; des valeurs plus faibles rendent le résultat plus déterministe.
• Décodage de la sortie: :
  • print(tokenizer.decode(outputs, skip_special_tokens=True))Décodez le jeton généré en texte et imprimez le résultat.

5. les techniques d'utilisation

• Ingénierie du mot de repère: :
  • Pour un meilleur raisonnement, il peut être nécessaire d'ajouter "réponse" à la fin de l'invite de saisie.
  • Exemple :Make a dark-themed dashboard for an oil rig. answer
• Post-traitement manuel: :
  • Le code de l'interface utilisateur généré peut nécessiter un post-traitement manuel pour être affiné.
• réglage fin: :
  • Le modèle peut être affiné pour des frameworks frontaux spécifiques (par exemple React, Vue, etc.).

6. les limites

• Ne convient pas aux applications frontales complexesCe modèle ne s'applique pas aux applications frontales complexes qui impliquent de nombreuses interactions JavaScript.
• Diversité limitée des conceptionsLe modèle favorise les mises en page frontales de base et ne permet pas de générer des mises en page d'interface utilisateur créatives ou avancées.
• artefactsCertains résultats peuvent contenir des artefacts de formatage.

7. scénarios applicables

• tableaux de bordLes écrans de présentation des données : Générer rapidement des écrans de présentation des données.
• page d'atterrissageLes applications : Créer des applications simples d'une page.
• formulaire d'inscription: Génère l'écran d'enregistrement de l'utilisateur.