jiwnchoi/bavisitter

[VIS 2024] Integrating Design Guidelines into Large Language Models for Visualization Authoring

Bavisitter: Babysitting LLMs for Visualization

import os
from bavisitter import Bavisitter

os.environ["OPENAI_API_KEY"] = "sk-"
# If you are using different LLMs (e.g., Claude, Gemini) use different api keys.

bavisitter = Bavisitter(df, model="gpt-4o", color_mode="dark")
bavisitter

Development

Install pnpm and Hatch to set up the development environment.

git clone https://github.com/jiwnchoi/bavisitter.git && cd bavisitter
pnpm install
hatch shell
pnpm dev

bavisitter's Issues

Visualization Linter 만들기

Description

Visualization Linter 및 Fixer 만들기

Feature

• Linter / Fixer Spec 정하기
• Encoding Level Linter / Fixer
• Perception Level Linter / Fixer
• Task Level Linter / Fixer

References

feat(llm4vis): OpenAI API 연결

Description

OpenAI API를 통해서 LLM과 통신하는 코드를 개발합니다.

주의사항: Assistant API를 사용하면 (제가 알기로) OpenAI VM에서 Python 코드가 실행됩니다. 우리는 이렇게 하지 않고 생성된 Python 코드를 우리 인스턴스에서 실행하고자 하므로 Assistant API를 사용하지 말도록 주의해주세요.

Feature

• widget __init__으로부터 KEY와 DF를 받아서 처리합니다.
• Message들의 DTO를 정의합니다.
• Messages 상태를 저장하는 trailet 기반의 state management 코드를 개발합니다.
• open-interpreter와 현재 State를 연동하는 controller계층을 개발합니다.

References

• Open AI
• open-interpreter

feat(widget): 채팅 및 시각화 렌더링 인터페이스 구현

Description

채팅 및 채팅에 따른 시각화 렌더러 인터페이스를 구현합니다.

Feature

• Dummy 채팅 데이터 및 Dummy Vega-Lite 추가
• 채팅 및 시각화 types 선언
• 채팅 인터페이스 개발

• 프롬프트 입력 창 개발
• 대화 목록 인터페이스 개발
• Dummy 채팅 데이터 렌더링

• Dummy Vega-Lite 렌더링
• 채팅 보내서 console.log 찍기

References

• Chakra UI
• react-vega

Artifacts 브라우징하는 컨트롤러 개발

Description

현재 Agent가 DF를 조작하고 새로운 csv 파일을 생성했을 때 해당 csv 파일에 접근할 수 없음.

as-is: data.csv 파일에 저장하도록 Prompting 하고 매 메시지 세션이 끝날 때마다 해당 파일을 reload하는 Observer

to-be: artifacts 폴더에 접근 가능할 수 있는 Custom Event 개발 / artifacts 내의 relative link 전달하면 해당 파일 버퍼 읽어서 websocket혹은 json으로 전달

Feature

• 상대 경로 입력으로 하는 Python Event 개발
• JavaScript 비동기 핸들러 개발

References

• https://ipywidgets.readthedocs.io/en/8.1.2/examples/Widget%20Low%20Level.html
• https://stackoverflow.com/questions/48056345/jupyter-lab-browsing-the-remote-file-system-inside-a-notebook
• manzt/anywidget#352

feat(widget): 인터페이스 개선

Description

인터페이스를 개선합니다.

todo 상태에서 더 추가될 수 있습니다.

Feature

• 채팅 콘텐트 스크롤 하면서 현재 채팅에 대응되는 시각화 표시하기
• 시각화 썸네일 생성하는 로직 개발

• 제목, 축 제목, legend 삭제하고 vega-embed로 Canvas 객체로 만들기
• 크기 입력 받아서 resized canvas 반환

• 시각화 썸네일로 히스토리 보여주는 뷰 개발 (현재 차트 아래)

• 썸네일들 컴포넌트 만들기
• 누르면 채팅 focused 되게 만들기 (scrollInto)

• JSON Code Block (Vega-Lite) Collapsable하게 만들기
• 스트리밍 중에 스크롤 올리면 하단 자동 스크롤 취소하기
• code block minWidth 0, overflow scroll 만들기
• Syntax Highlighter 교체 (아마도 shiki)

References

• https://github.com/vega/vega-embed

feat(Bavisitter): In-Message Codeblock Controller에서 분리하기

Description

Open-interpreter에서 json codeblock을 생성하면 code가 아닌 message에 끼어서 생성되는 문제가 있는데 이를 해결하기 위함

Feature

• append_chunk에 json,  식별하고 code 형식으로 추가하는 로직 개발

차트 파싱 로직 빼기

Description

useChart에 들어있는 차트 파싱 로직 shared로 빼기

Feature

• ㅈㄱㄴ

References

feat(widget): 사용자 입력 처리 컨트롤러 개발

Description

인터페이스 상에서 채팅을 할 수 있도록 하는 내부 컨트롤러를 개발합니다.

Feature

• 메시지를 관리하기 위한 State Management System 개발

Jupyter WIdget의 State는 trailets를 이용해 Python과 실시간으로 동기되는 전역 상태를 가지므로 별도의 전역 상태 기술을 (Redux, Recoil, Context API) 도입할 필요는 없습니다.

하지만, Anywidget의 useModelState는 getter와 setter만을 제공하는 원시 API만을 사용하므로 이를 캡슐화 할 필요가 있습니다.
useModelState를 한 번 더 감싸서 채팅 State에 CRUD를 제공하는 Hook (useChat.tsx)을 선언합니다.
chatList, appendUserContent(content: string), updateUserContent(id), removeUserContent(id)

• 사용자 메시지 목록에 추가
• chatList 이용해서 채팅 렌더링 (ChatView.tsx)
• chatList 이용해서 Vega-Lite Spec 렌더링 (일단은 가장 최근 스펙만 렌더링) (ChartView.tsx)

• PromptView.tsx에 useChat 연결

References

• https://react.dev/learn/reusing-logic-with-custom-hooks

feat(Bavisitter): 채팅 보내기 Event로 변경

Description

현재 Observer Pattern으로 되어있는 메시지 전송을 Event로 변경한다

Feature

• 현재 Observer Pattern으로 되어있는 메시지 전송을 Event로 변경한다.
• JavaScript에서 Custom Event 개발
• React Custom Hook 개발
• Python Message Handler 개발

References

manzt/anywidget#352

chore: 제목 및 패키지 변경

Description

패키지 제목 변경

Feature

• 패키지 제목 변경

References

• 이 문제 / 코딩 내용을 알기 위해서 필요한 논문이나 문서등이 있다면 첨부합니다.
• 예시: 참고논문