File size: 4,171 Bytes
88f3fce
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
# ์ฐจํŠธ ์‹œ๊ฐํ™” ๋„๊ตฌ

์ฐจํŠธ ์‹œ๊ฐํ™” ๋„๊ตฌ๋Š” Python์„ ํ†ตํ•ด ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ์ฝ”๋“œ๋ฅผ ์ƒ์„ฑํ•˜๊ณ , ์ตœ์ข…์ ์œผ๋กœ [@visactor/vmind](https://github.com/VisActor/VMind)๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ฐจํŠธ ์‚ฌ์–‘์„ ์–ป์Šต๋‹ˆ๋‹ค. ์ฐจํŠธ ๋ Œ๋”๋ง์€ [@visactor/vchart](https://github.com/VisActor/VChart)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌํ˜„๋ฉ๋‹ˆ๋‹ค.

## ์„ค์น˜ (Mac / Linux)

1. Node.js 18 ์ด์ƒ ์„ค์น˜

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# nvm ํ™œ์„ฑํ™”, ์˜ˆ๋ฅผ ๋“ค์–ด Bash
source ~/.bashrc
# ๊ทธ๋Ÿฐ ๋‹ค์Œ ์ตœ์‹  ์•ˆ์ • ๋ฒ„์ „์˜ Node ์„ค์น˜
nvm install node
# ์‚ฌ์šฉ ํ™œ์„ฑํ™”, ์˜ˆ๋ฅผ ๋“ค์–ด ์ตœ์‹  ์•ˆ์ • ๋ฒ„์ „์ด 22์ธ ๊ฒฝ์šฐ use 22
nvm use 22
```

2. ์˜์กด์„ฑ ์„ค์น˜

```bash
# ํ˜„์žฌ ์ €์žฅ์†Œ์—์„œ ํ•ด๋‹น ์œ„์น˜๋กœ ์ด๋™
cd app/tool/chart_visualization
npm install
```

## ์„ค์น˜ (Windows)
1. nvm-windows ์„ค์น˜

    [๊ณต์‹ GitHub ํŽ˜์ด์ง€](https://github.com/coreybutler/nvm-windows?tab=readme-ov-file#readme)์—์„œ ์ตœ์‹  ๋ฒ„์ „์˜ `nvm-setup.exe`๋ฅผ ๋‹ค์šด๋กœ๋“œํ•˜๊ณ  ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค.

2. nvm์„ ์‚ฌ์šฉํ•˜์—ฌ Node.js ์„ค์น˜

```powershell
# ๊ทธ๋Ÿฐ ๋‹ค์Œ ์ตœ์‹  ์•ˆ์ • ๋ฒ„์ „์˜ Node ์„ค์น˜
nvm install node
# ์‚ฌ์šฉ ํ™œ์„ฑํ™”, ์˜ˆ๋ฅผ ๋“ค์–ด ์ตœ์‹  ์•ˆ์ • ๋ฒ„์ „์ด 22์ธ ๊ฒฝ์šฐ use 22
nvm use 22
```

3. ์˜์กด์„ฑ ์„ค์น˜

```bash
# ํ˜„์žฌ ์ €์žฅ์†Œ์—์„œ ํ•ด๋‹น ์œ„์น˜๋กœ ์ด๋™
cd app/tool/chart_visualization
npm install
```

## ๋„๊ตฌ
### python_execute

Python ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ ๋ถ„์„์˜ ํ•„์š”ํ•œ ๋ถ€๋ถ„(๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ์ œ์™ธ)์„ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—๋Š” ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ, ๋ฐ์ดํ„ฐ ์š”์•ฝ, ๋ณด๊ณ ์„œ ์ƒ์„ฑ ๋ฐ ์ผ๋ถ€ ์ผ๋ฐ˜์ ์ธ Python ์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๊ฐ€ ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

#### ์ž…๋ ฅ
```typescript
{
  // ์ฝ”๋“œ ์œ ํ˜•: ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ/๋ฐ์ดํ„ฐ ๋ณด๊ณ ์„œ/๊ธฐํƒ€ ์ผ๋ฐ˜ ์ž‘์—…
  code_type: "process" | "report" | "others"
  // ์ตœ์ข… ์‹คํ–‰ ์ฝ”๋“œ
  code: string;
}
```

#### ์ถœ๋ ฅ
Python ์‹คํ–‰ ๊ฒฐ๊ณผ, ์ค‘๊ฐ„ ํŒŒ์ผ ์ €์žฅ ๋ฐ ์ถœ๋ ฅ ๊ฒฐ๊ณผ ํฌํ•จ.

### visualization_preparation

๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”๋ฅผ ์œ„ํ•œ ์‚ฌ์ „ ๋„๊ตฌ๋กœ ๋‘ ๊ฐ€์ง€ ๋ชฉ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

#### ๋ฐ์ดํ„ฐ -> ์ฐจํŠธ
๋ถ„์„์— ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ(.csv)์™€ ํ•ด๋‹น ์‹œ๊ฐํ™” ์„ค๋ช…์„ ๋ฐ์ดํ„ฐ์—์„œ ์ถ”์ถœํ•˜์—ฌ ์ตœ์ข…์ ์œผ๋กœ JSON ๊ตฌ์„ฑ ํŒŒ์ผ์„ ์ถœ๋ ฅํ•ฉ๋‹ˆ๋‹ค.

#### ์ฐจํŠธ + ์ธ์‚ฌ์ดํŠธ -> ์ฐจํŠธ
๊ธฐ์กด ์ฐจํŠธ์™€ ํ•ด๋‹น ๋ฐ์ดํ„ฐ ์ธ์‚ฌ์ดํŠธ๋ฅผ ์„ ํƒํ•˜๊ณ , ๋ฐ์ดํ„ฐ ์ฃผ์„ ํ˜•ํƒœ๋กœ ์ฐจํŠธ์— ์ถ”๊ฐ€ํ•  ๋ฐ์ดํ„ฐ ์ธ์‚ฌ์ดํŠธ๋ฅผ ์„ ํƒํ•˜์—ฌ ์ตœ์ข…์ ์œผ๋กœ JSON ๊ตฌ์„ฑ ํŒŒ์ผ์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

#### ์ž…๋ ฅ
```typescript
{
  // ์ฝ”๋“œ ์œ ํ˜•: ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ๋˜๋Š” ๋ฐ์ดํ„ฐ ์ธ์‚ฌ์ดํŠธ ์ถ”๊ฐ€
  code_type: "visualization" | "insight"
  // ์ตœ์ข… JSON ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” Python ์ฝ”๋“œ
  code: string;
}
```

#### ์ถœ๋ ฅ
`data_visualization tool`์— ์‚ฌ์šฉ๋˜๋Š” ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”๋ฅผ ์œ„ํ•œ ๊ตฌ์„ฑ ํŒŒ์ผ.

## data_visualization

`visualization_preparation`์˜ ๋‚ด์šฉ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํŠน์ • ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

### ์ž…๋ ฅ
```typescript
{
  // ๊ตฌ์„ฑ ํŒŒ์ผ ๊ฒฝ๋กœ
  json_path: string;
  // ํ˜„์žฌ ๋ชฉ์ , ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ๋˜๋Š” ์ธ์‚ฌ์ดํŠธ ์ฃผ์„ ์ถ”๊ฐ€
  tool_type: "visualization" | "insight";
  // ์ตœ์ข… ์ œํ’ˆ png ๋˜๋Š” html; html์€ vchart ๋ Œ๋”๋ง ๋ฐ ์ƒํ˜ธ์ž‘์šฉ ์ง€์›
  output_type: 'png' | 'html'
  // ์–ธ์–ด, ํ˜„์žฌ ์ค‘๊ตญ์–ด ๋ฐ ์˜์–ด ์ง€์›
  language: "zh" | "en"
}
```

## VMind ๊ตฌ์„ฑ

### LLM

VMind๋Š” ์ง€๋Šฅํ˜• ์ฐจํŠธ ์ƒ์„ฑ์„ ์œ„ํ•ด LLM ํ˜ธ์ถœ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ `config.llm["default"]` ๊ตฌ์„ฑ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

### ์ƒ์„ฑ ์„ค์ •

์ฃผ์š” ๊ตฌ์„ฑ์—๋Š” ์ฐจํŠธ ํฌ๊ธฐ, ํ…Œ๋งˆ ๋ฐ ์ƒ์„ฑ ๋ฐฉ๋ฒ•์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.
### ์ƒ์„ฑ ๋ฐฉ๋ฒ•
๊ธฐ๋ณธ๊ฐ’: png. ํ˜„์žฌ LLM์ด ์ปจํ…์ŠคํŠธ์— ๋”ฐ๋ผ `output_type`์„ ์ž๋™์œผ๋กœ ์„ ํƒํ•˜๋Š” ๊ฒƒ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

### ํฌ๊ธฐ
๊ธฐ๋ณธ ํฌ๊ธฐ๋Š” ์ง€์ •๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. HTML ์ถœ๋ ฅ์˜ ๊ฒฝ์šฐ ์ฐจํŠธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ์ฑ„์›๋‹ˆ๋‹ค. PNG ์ถœ๋ ฅ์˜ ๊ฒฝ์šฐ ๊ธฐ๋ณธ๊ฐ’์€ `1000*1000`์ž…๋‹ˆ๋‹ค.

### ํ…Œ๋งˆ
๊ธฐ๋ณธ ํ…Œ๋งˆ: `'light'`. VChart๋Š” ์—ฌ๋Ÿฌ ํ…Œ๋งˆ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. [ํ…Œ๋งˆ](https://www.visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Extension)๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.

## ํ…Œ์ŠคํŠธ

ํ˜„์žฌ, ์„œ๋กœ ๋‹ค๋ฅธ ๋‚œ์ด๋„์˜