허깅 페이스: 오픈 ML 모델을 사용한 웹 앱 생성기 만들기

허깅 페이스는 텍스트 프롬프트를 기능적인 웹 애플리케이션으로 변환하는 생성형 AI 웹 서버를 만드는 방법을 상세히 설명했습니다. 실시간으로 HTML, CSS, 자바스크립트를 스트리밍하고 렌더링함으로써 개발자는 오픈 머신 러닝 모델을 사용하여 '텍스트-앱' 파이프라인을 구축할 수 있습니다.

기술 아키텍처 및 스택

이 시스템은 서버 환경으로 NodeJS를 사용하고 라우팅 및 스트리밍 처리를 위해 Express.js를 활용하여 구축됩니다. 핵심 생성 엔진은 WizardCoder-15B이며, 고성능 코드 생성에 필요한 하드웨어 가속 및 메모리(일반적으로 32GB 이상)를 보장하기 위해 Hugging Face Inference Endpoints API를 통해 배포됩니다.

대체 구현 경로는 다음과 같습니다:

  • Inference API: 작은 규모의 커뮤니티 중심 모델에 적합합니다.
  • Python Bridges: Pythonia 같은 라이브러리를 사용하여 Node에서 Python 모듈을 호출합니다.
  • Local LLM Libraries: 하드웨어 가속 없이 더 많은 리소스를 소모하지만, llama-node (llama.cpp) 또는 transformers.js를 활용하여 로컬에서 실행할 수 있습니다.

실시간 HTML 스트리밍

생성기는 모델의 출력을 브라우저로 직접 스트리밍하여 작동합니다. 사용자가 URL 매개변수를 통해 프롬프트를 제공하면, 서버는 초기 HTML 보일러플레이트 (<html><head></head><body>)를 전송한 후 hf.textGenerationStream을 사용하여 생성된 토큰을 HTTP 응답에 직접 파이프합니다.

이 접근 방식은 AI가 코드를 작성하는 동안 웹 페이지가 렌더링을 시작하도록 허용하여 프롬프트에서 기능적인 인터페이스로의 원활한 전환을 만듭니다.

웹 생성을 위한 프롬프트 엔지니어링

생성된 코드가 기능적이고 시각적으로 매력적이도록 보장하기 위해 WizardCoder 모델에 특정한 프롬프트 전략이 사용됩니다:

Tailwind CSS를 사용한 스타일링

Tailwind CSS 유틸리티 클래스를 사용하면 별도의 스타일시트 없이 모델이 실시간으로 스타일을 생성할 수 있습니다. 프롬프트는 모델에게 중앙 레이아웃(예: `<div class=

Sources