Hugging Face 스페이스 연동을 통한 데모로 야매챗봇 제작후기

오늘 저는 Hugging face 가입 이례로 좀 재대로 써볼 생각을 하던 궁리 중,

벼락치기로 Space 에 있는 데모를 연동할 수 있는 모델을 통해 야메챗봇 데모를 구현해 보았습니다.

화면은 아래처럼 생겼습니다.

대충 내용은,

넌 반려동물 보조인데, 나는 반려견 키우고 싶은데 운동 못하고 털앨러지 있어. 이런 나에게 견종 추천좀

입니다. 그랬더니 조금 오래걸리긴 했지만 답변 줬습니다.

오늘 이렇게까지 개발해온 여정을 둘러보도록 하겠습니다.

Hugging Face Spaces

허깅페이스가 스페이스 기능을 연 지는 연 이례 최근으로 알고 있습니다.

여기서 여러 우수한 모델, 요즘 트랜드 등 여러 모델에 대한 데모를 제공하고 있습니다.

MS나 알리바바 등 대기업에서도 데모를 제공하고 있고, 속도도 빠릅니다.

몇몇 커뮤니티형 데모는 꽤 걸리긴 하지만 어떤 결과가 나오는지 가늠이 가능합니다.

Use via API

근데 말입니다.

데모를 하다가 맨 밑바닥에 이런 문구가 눈에 띕니다. 참으로 의심스럽죠.

대부분의 데모는 이런 문구가 보이더군요. 네. 파이썬 하시는 분들에겐 “이게 당연한건데 왜?” 하시겠죠.

데모에 따라서 자체적으로 독보적인 디자인으로 꾸민 데모가 있거나 해서 저런 문구가 보이지 않을 수 있습니다.

하지만 대체적으로 아래 문구에서 저는 힌트를 얻었죠.

오 API 개꿀인데?

네. API를 통해 직접 연동해서 웹 어플리케이션 데모도 가능하다는 뜻입니다.

당연하겠지만 파이썬이 제공됩니다. 하지만 저에게는 자바스크립트가 더 익숙했고, 자바스크립트 API를 제공한 게 참 다행이라 생각합니다.

저런 API 문서도 스페이스에 따라 대충 제공하거나 없을 수 있고, 당연하겠지만 대부분 파이썬 중심이라 자바스크립트 메뉴얼이 꽤 부실합니다. 위 스페이스를 데모로 보면,

파이썬 연동 메뉴얼은 꽤 친절한데 반해,

자바스크립트 메뉴얼은 좀 부실합니다.

하지만 희망을 잃지 마세요. 자바스크립트 API 패턴만 알면 파이썬 메뉴얼로도 충분히 파악이 가능합니다.

파이썬 API와 달리 자스 API는 배열로만 받습니다. 따라서 위에 파이썬 보시면 인자 순서가 있는데, 그대~로 따라가면 됩니다.

단, 파이썬은 마지막 인자에 끝점(Endpoint)을 받습니다. 자스는 첫번째 인자에 끝점을 받고, 두번째 인자에 배열로 API 인자를 받는다는 차이점만 주의하시면 되겠습니다.

리턴값도 마찬가지로 그대~로 따라가면 대부분 지켜집니다. 단지 리턴값에 `data` 속성이 추가되는 것만 빼면요.

따라서 파이썬의 아래와 같은 예제를,

from gradio_client import Client

client = Client("Qwen/Qwen1.5-32B-Chat-demo")
result = client.predict(
		query="Hello!!",
		history=[],
		system="You are a helpful assistant.",
		api_name="/model_chat"
)
print(result)

자바스크립트로 아래와 같이 대응할 수 있습니다.

import { client } from "@gradio/client";

const app = await client("Qwen/Qwen1.5-32B-Chat-demo");
const result = await app.predict("/model_chat", [		
				"Hello!!", // query argument		
				[[]], // history argument		
				"You are a helpful assistant.", // system argument
	]);

console.log(result.data);

여기서 주의할 차이점은 Python 의 Tuple 은 자바스크립트에게 배열 하나 더 추가되는 셈입니다. 따라서, 이중 배열을 넣어야 하고 받아낼 때 또한 똑같이 적용됩니다. 그래서 결과를 받을 때, 이 데모 기준으로 아래와 같은 구조를 취합니다.

즉, 이 데모의 경우, `result.data[1][0][1]` 이렇게 들어가야 답변 내용에 접근한다고 보면 되겠습니다. 나머지는 당신이 입력한 인자 그대로입니다.

[여기에 대충 프론트엔드 개발과정 입력]

어쨌든, 이런저런 패턴을 파악하여, 이 LLM 모델 데모를 연동하여 야매 챗봇을 만들었습니다.

사실, 실제로는 데모라는 특성 상 한 30초 있다가 나왔는데, 그걸 그대로 보여주려니 잉여 부분을 보여주기엔 영상 크기가 매우 커서 그냥 대충 짤라서 올리니 넓은 아량 부탁드립니다.

돌려보고 싶다고 하신다면, 네, 기꺼이 소스 올려놨으니 직접 돌려보시면 됩니다.

하지만 여기서 사용한 기술에 대해 어렵거나 개발을 모르시는 분들도 있을 테니,

바로 테스트가 가능한 링크도 첨부해 드립니다. 작동은 되긴 되네요.

결론

결론이요? 계기가 하나 생겼네요. 이 데모를 통해서 AI 모델 데모를 프로토타입 방식의 어플리케이션으로로 만들거나, 시연이 필요할 때, 기회가 넓어진다는 것을 깨닫는 계기를 얻었습니다.

요즘 AI 컨텐츠에 대한 회사의 요구상이 많아져서 AI를 접목시켜 무언가를 만들려는 인재를 꽤 뽑고 있는 걸로 알고 있습니다. 특히, 대형 연예기획사에서 그냥 기획자 개발자 디자이너가 아닌, AI를 매우 잘 활용하는 기획자 개발자 디자이너를 뽑고 있다는 것이죠. 저 또한 큰 네임드 업체까지는 아니지만, 이런 인재상에 탑승했고, 점점 뭔가 재밌게 흘러갈 것 같긴 하군요.

예전에 깃헙 활용을 개발자 자질 중 하나로 평가했듯이, 허깅페이스 활용 또한 자질이라고 보는 날도 머지 않으리라 생각합니다.

감사합니다.