gradio-client-lite : typescript도 개발된 경량 gradio client

 

 

 

gradio-client-lite란

 

gradio-client-lite는 다른 패키지나 플랫폼에 대한 의존성이 전혀 없는 경량 Gradio 클라이언트입니다.

 

 

공개된 페이지 상의 특징을 보면 다음과 같습니다. 

• 다른 패키지 의존성 없음
• 플랫폼 독립적임
• 서버리스 플랫폼에서도 작동 
• 복제 친화 매커니즘(Replica affinity mechanism)
• Typescript로 개발

 

주) 

1.언급된 복제 친화 매커니즘은 Gradio 앱을 쉽게 복제하고 배포할 수 있도록 하는 기능으로 보입니다.

   동일한 Gradio 인터페이스 유지하면서 여러 환경에서 앱 실행 가능하게 하는거죠.

2.서버리스 플랫폼에서 작동이라고 되어 있는데, 서버 자체 관리를 불필요하나 Node.js 같은 런타임 환경은 필요합니다. 

 

 

 

참고) 

Node.JS 개요

• Node.js는 Javascript 런타임으로 구글의 Chrome V8 엔진을 기반으로 개발되었습니다. 보통 javascript 코드의 경우, 실제도 동작하는 것은 Javascript 런타임을 내장한 브라우저 상에서 수행됩니다. 효율적인 비동기 I/O를 사용하므로 입/출력 성능이 뛰어나며, 서버 사이드 또한 클라이언트 사이드와 동일하게 Javascript를 이용하며 이벤트 기반으로 처리됩니다. 그리고 npm이라는 패키지 관리자를 사용하고 있습니다. 

NPM (Node Package Manager)

• npm은 node.js를 위한 패키지 매니저입니다. 

 

package.json

• Node.js 프로젝트의 구성과 실행을 체계적으로 관리하기 위한 파일입니다. 프로젝트 메타데이터(이름,버전, 설명, 저작권자 등), 의존성 관리, 스크립트 실행, 버전 제어, 애플리케이션의 시작 파일 지정 등을 하는 역할을 합니다. 

 

 

환경 구성

# 프로젝트 클론
$ git clone https://github.com/JacobLinCool/gradio-client-lite
$ cd gradio-client-lite

# 의존성 설치
$ npm install

 

build 실행 결과는 다음과 같습니다. 

$ npm run build

> gradio-client-lite@0.1.1 build
> tsup

CLI Building entry: src/index.ts
CLI Using tsconfig: tsconfig.json
CLI tsup v8.3.0
CLI Using tsup config: /hdd/git/gradio-client-lite/tsup.config.ts
CLI Target: es2017
CLI Cleaning output folder
CJS Build start
ESM Build start
CJS dist/index.cjs 7.26 KB
CJS ⚡️ Build success in 10ms
ESM dist/index.js 6.24 KB
ESM ⚡️ Build success in 10ms
DTS Build start
DTS ⚡️ Build success in 697ms
DTS dist/index.d.cts 3.53 KB
DTS dist/index.d.ts  3.53 KB

 

 

빌드까지 정상적으로 된 것 같으니 이제 실행 테스트만 해 보면 되지 않을까 싶습니다. 

npm run으로 등록된 것들을 확인하면 'test' 정도가 실행을 확인할 수 있는 방법일 것 같습니다. 

# node project에 등록된 script 확인 
$ npm run
Lifecycle scripts included in gradio-client-lite@0.1.1:
  test
    vitest
available via `npm run-script`:
  prepare
    husky
  build
    tsup
  format
    prettier --ignore-path .gitignore --write .
  changeset
    changeset
  build:docs
    typedoc --out docs src/index.ts

 

 

테스트를 실행해 보면 아래와 같이 나오네요.

$ npm run test
... <상략> ...
{
  current: 'event: complete',
  buffer: 'data: [{"path": "/tmp/gradio/9169acbbf120a1b6503a3b8bb3fc3f3c5ff5fc60/image.webp", "url": "https://black-forest-labs-flux-1-schnell.hf.space/file=/tmp/gradio/9169acbbf120a1b6503a3b8bb3fc3f3c5ff5fc60/image.webp", "size": null, "orig_name": "image.webp", "mime_type": null, "is_stream": false, "meta": {"_type": "gradio.FileData"}}, 1124442209]\n' +
    '\n',
  flag: false,
  eventCount: 0
}
{ text: '' }
{
  current: 'data: [{"path": "/tmp/gradio/9169acbbf120a1b6503a3b8bb3fc3f3c5ff5fc60/image.webp", "url": "https://black-forest-labs-flux-1-schnell.hf.space/file=/tmp/gradio/9169acbbf120a1b6503a3b8bb3fc3f3c5ff5fc60/image.webp", "size": null, "orig_name": "image.webp", "mime_type": null, "is_stream": false, "meta": {"_type": "gradio.FileData"}}, 1124442209]',
  buffer: '',
  flag: true,
  eventCount: 0
}
stream data [
  '[{"path": "/tmp/gradio/9169acbbf120a1b6503a3b8bb3fc3f3c5ff5fc60/image.webp", "url": "https://black-forest-labs-flux-1-schnell.hf.space/file=/tmp/gradio/9169acbbf120a1b6503a3b8bb3fc3f3c5ff5fc60/image.webp", "size": null, "orig_name": "image.webp", "mime_type": null, "is_stream": false, "meta": {"_type": "gradio.FileData"}}, 1124442209]'
]

 ✓ src/index.test.js (1) 5091ms
 ✓ src/index.test.ts (1) 4457ms

 Test Files  2 passed (2)
      Tests  2 passed (2)
   Start at  18:48:40
   Duration  5.55s (transform 43ms, setup 0ms, collect 67ms, tests 9.55s, environment 0ms, prepare 89ms)


 PASS  Waiting for file changes...
       press h to show help, press q to quit

 

 

로그 내용을 분석해 보면 데이터 스트림과 파일 관련 메타데이터 생성까지 모든 테스트가 통과된 것으로 나옵니다. 

 

 

그 뒤에는?

 

이 뒷부분 부터는 추가적으로 어떤 것을 해야할지 막혔습니다.

저는 데모로 제공된 코드를 이용해서 바로 작동할 것으로 예상하고 있었기 때문이죠... 

 

Node, Typescript에 대한 이해가 조금 더 깊어질 때까지 일단 이 부분은 보류해두기로 하겠습니다. 

 

 

참고) 코드(깃헙)