UIGEN-T1-Qwen-7b: HTML 및 CSS UI 컴포넌트 생성을 위한 전문 모델

10.4K 00

일반 소개

UIGEN-T1은 70억 개의 파라미터로 구성된 트랜스포머 모델을 기반으로 미세 조정되고 추론 기반 UI 생성을 위해 설계된 Qwen2.5-Coder-7B-Instruct를 기반으로 합니다. 이 모델은 정교한 사고의 사슬 접근 방식을 사용하여 강력한 HTML 및 CSS 기반 UI 구성 요소를 생성합니다. 현재는 대시보드, 랜딩 페이지, 등록 양식과 같은 기본 애플리케이션으로 제한되어 있습니다. 이 모델은 디자인 원칙을 추론하여 HTML 및 CSS 레이아웃을 생성합니다. 강력한 연쇄 사고 추론 프로세스를 갖추고 있지만, 현재는 텍스트 기반 UI 요소와 간단한 프런트엔드 애플리케이션으로 제한되어 있습니다. 이 모델은 대시보드, 랜딩 페이지 및 등록 양식에 탁월하지만 고급 상호 작용(예: JavaScript를 많이 사용하는 기능)이 부족합니다.

기능 목록

UI 생성사용자 인터페이스 구축을 위한 HTML 및 CSS 코드 생성 기능.
연쇄 사고연쇄적 사고 방식을 사용하여 디자인 원칙을 추론하여 UI 레이아웃을 생성합니다.
적용 가능한 시나리오대시보드, 랜딩 페이지 및 등록 양식과 같은 기본 애플리케이션에 특히 적합합니다.
코드 생성생성된 코드가 잘 구조화되어 있고 효과적입니다.

도움말 사용

UIGEN-T1은 큐 단어를 기반으로 사용자 인터페이스(UI) HTML 및 CSS 코드를 생성할 수 있습니다. 다음은 이 모델을 사용하기 위한 기본 단계와 고려 사항입니다:

1. 환경 준비하기

사용 중인 환경이 다음 요구 사항을 충족하는지 확인하세요:

소프트웨어최소 12GB의 VRAM이 권장됩니다.
하드웨어::
- 트랜스포머 라이브러리(포옹하는 얼굴)
- PyTorch

2. 종속성 설치

pip install transformers
pip install torch

3. 기본 추론 코드

기본 추론은 다음 코드를 사용합니다:

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. 코드 해석

모델 로드::
- model_name = "smirki/UIGEN-T1": 모델 이름을 지정합니다.
- tokenizer = AutoTokenizer.from_pretrained(model_name): 사전 학습된 동의어를 로드합니다.
- model = AutoModelForCausalLM.from_pretrained(model_name).to("cuda")모델을 로드하고 CUDA 장치로 이동합니다(가능한 경우).
큐 워드 준비::
- prompt: 사용자 지침이 포함된 프롬프트 단어입니다. 예를 들어 석유 굴착 장치에 대한 어두운 테마 대시보드를 만듭니다.
모델링된 추론::
- inputs = tokenizer(prompt, return_tensors="pt").to("cuda"): 큐 워드를 PyTorch 텐서로 변환하고 CUDA 장치로 이동합니다.
- outputs = model.generate(**inputs, max_new_tokens=12012, do_sample=True, temperature=0.7): 출력을 생성합니다.
  - max_new_tokens: 생성되는 토큰의 최대 개수를 설정하며, 12012보다 커야 합니다.
  - do_sample샘플링을 활성화하여 생성된 콘텐츠의 다양성을 높일 수 있습니다.
  - temperature: 생성되는 콘텐츠의 다양성을 제어하며, 값이 낮을수록 출력의 결정성이 높아집니다.
출력 디코딩::
- print(tokenizer.decode(outputs, skip_special_tokens=True))생성된 토큰을 텍스트로 디코딩하고 결과를 인쇄합니다.

5. 사용 기술

큐 워드 엔지니어링::
- 더 나은 추론을 위해 입력 프롬프트 끝에 "답"을 추가해야 할 수도 있습니다.
- 예시:Make a dark-themed dashboard for an oil rig. answer
수동 후처리::
- 생성된 UI 코드는 다듬기 위해 수동 후처리가 필요할 수 있습니다.
미세 조정::
- 이 모델은 특정 프런트엔드 프레임워크(예: React, Vue 등)에 맞게 더욱 세밀하게 조정할 수 있습니다.

6. 제한 사항

복잡한 프론트엔드 애플리케이션에는 적합하지 않음이 모델은 자바스크립트 상호 작용이 많은 복잡한 프런트엔드 애플리케이션에는 적용되지 않습니다.
제한된 디자인 다양성이 모델은 기본 프런트엔드 레이아웃을 선호하며 창의적이거나 고급 UI 레이아웃을 생성하지 않을 수 있습니다.
아티팩트일부 출력에는 서식 지정 아티팩트가 포함될 수 있습니다.

7. 적용 가능한 시나리오