File size: 4,579 Bytes
f56c599
eae04fe
 
 
f56c599
eae04fe
f56c599
 
 
 
eae04fe
f56c599
eae04fe
f56c599
eae04fe
f56c599
 
 
 
 
eae04fe
f56c599
eae04fe
f56c599
eae04fe
f56c599
 
 
 
eae04fe
f56c599
eae04fe
f56c599
 
 
eae04fe
 
 
f56c599
 
 
eae04fe
 
 
f56c599
 
 
eae04fe
 
 
f56c599
 
 
eae04fe
13c2b9b
 
f56c599
 
 
 
 
 
 
 
 
 
13c2b9b
eae04fe
 
f56c599
 
eae04fe
f56c599
eae04fe
f56c599
 
 
eae04fe
f56c599
eae04fe
f56c599
 
 
 
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
# μ—μ΄μ „νŠΈ μ•„ν‚€ν…μ²˜

## κ°œμš”

ν”„λ‘œμ νŠΈλŠ” μ„Έ 개의 UI μ§„μž…μ κ³Ό ν•˜λ‚˜μ˜ 곡용 μ±„νŒ… λŸ°νƒ€μž„μœΌλ‘œ κ΅¬μ„±λ©λ‹ˆλ‹€.

1. `app.py`
2. `app_gradio.py`
3. `app_gradio_messenger.py`
4. `megumin_agent/`

각 UI 계측은 같은 μ±„νŒ… μ„œλΉ„μŠ€ 헬퍼λ₯Ό ν˜ΈμΆœν•˜κ³ , μ±„νŒ… μ„œλΉ„μŠ€λŠ” 검색, μ—μ΄μ „νŠΈ μ‹€ν–‰, 슀트리밍, μ„Έμ…˜ μƒνƒœ 관리λ₯Ό λ‹΄λ‹Ήν•©λ‹ˆλ‹€.

## λŸ°νƒ€μž„ 흐름

1. `megumin_agent/bootstrap.py`κ°€ ν™˜κ²½ λ³€μˆ˜λ₯Ό 뢈러였고 둜컬 λ˜λŠ” 원격 데이터 νŒŒμΌμ„ μ€€λΉ„ν•©λ‹ˆλ‹€.
2. `megumin_agent/retrieval.py`κ°€ 페λ₯΄μ†Œλ‚˜/사싀 검색에 ν•„μš”ν•œ FAISS μΈλ±μŠ€μ™€ 메타데이터λ₯Ό λ‘œλ“œν•©λ‹ˆλ‹€.
3. `megumin_agent/agent.py`κ°€ ADK μ—μ΄μ „νŠΈλ₯Ό κ΅¬μ„±ν•˜κ³  검색 기반 도ꡬλ₯Ό μ—°κ²°ν•©λ‹ˆλ‹€.
4. `megumin_agent/chat.py`κ°€ μ±„νŒ… μ„œλΉ„μŠ€λ₯Ό λ§Œλ“€κ³  λΆ€λΆ„ 응닡 슀트리밍과 μ„Έμ…˜ λ©”λͺ¨λ¦¬λ₯Ό κ΄€λ¦¬ν•©λ‹ˆλ‹€.
5. UI λͺ¨λ“ˆμ΄ 화면을 λ Œλ”λ§ν•˜κ³  μ‚¬μš©μž λ©”μ‹œμ§€λ₯Ό `stream_chat()`으둜 μ „λ‹¬ν•©λ‹ˆλ‹€.

## λͺ¨λ“ˆλ³„ μ„€λͺ…

### `megumin_agent/bootstrap.py`

- `.env`λ₯Ό λ‘œλ“œν•©λ‹ˆλ‹€.
- ν•„μš” μ‹œ 둜컬 `adk-python/src` 경둜λ₯Ό μ€€λΉ„ν•©λ‹ˆλ‹€.
- κ°€λŠ₯ν•˜λ©΄ Hugging Faceμ—μ„œ 데이터셋 μžμ‚°μ„ λ‚΄λ €λ°›μŠ΅λ‹ˆλ‹€.
- 원격 μžμ‚°μ„ μ‚¬μš©ν•  수 μ—†μœΌλ©΄ 둜컬 처리 λ°μ΄ν„°λ‘œ ν΄λ°±ν•©λ‹ˆλ‹€.

### `megumin_agent/retrieval.py`

- QA JSON μ†ŒμŠ€μ™€ FAISS 인덱슀λ₯Ό λ‘œλ“œν•©λ‹ˆλ‹€.
- 페λ₯΄μ†Œλ‚˜ν˜• 데이터와 μ‚¬μ‹€ν˜• 데이터에 λŒ€ν•΄ 검색을 μˆ˜ν–‰ν•©λ‹ˆλ‹€.
- ν”„λ‘¬ν”„νŠΈ ꡬ성에 μ‚¬μš©ν•  κ°„κ²°ν•œ 검색 κ²°κ³Όλ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€.

### `megumin_agent/agent.py`

- 메ꡬ밍 페λ₯΄μ†Œλ‚˜ ν”„λ‘¬ν”„νŠΈμ™€ 검색 도ꡬλ₯Ό μ •μ˜ν•©λ‹ˆλ‹€.
- 페λ₯΄μ†Œλ‚˜ 검색과 사싀 검색을 ν•˜λ‚˜μ˜ μ—μ΄μ „νŠΈ νλ¦„μœΌλ‘œ ν•©μΉ©λ‹ˆλ‹€.
- λ©€ν‹°ν„΄ λŒ€ν™”μ— ν•„μš”ν•œ μš”μ•½ μƒνƒœλ₯Ό κ΄€λ¦¬ν•©λ‹ˆλ‹€.

### `megumin_agent/chat.py`

- 곡용 λŸ¬λ„ˆμ™€ λ©”λͺ¨λ¦¬ 기반 μ„Έμ…˜ μ„œλΉ„μŠ€λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.
- `stream_chat()`으둜 SSE μŠ€νƒ€μΌμ˜ λΆ€λΆ„ 응닡을 μ œκ³΅ν•©λ‹ˆλ‹€.
- 졜근 ν„΄ μƒνƒœμ™€ μš”μ•½ 정보λ₯Ό μœ μ§€ν•΄ 후속 λŒ€ν™”λ₯Ό μ§€μ›ν•©λ‹ˆλ‹€.

### `app_gradio.py`

- κΈ°μ‘΄ 닀쀑 νŒ¨λ„ κ΅¬μ„±μ˜ 메인 μ±„νŒ… UIμž…λ‹ˆλ‹€.
- 첫 μš”μ²­ μ‹œμ μ— μ±„νŒ… μ„œλΉ„μŠ€λ₯Ό μ§€μ—° μ΄ˆκΈ°ν™”ν•©λ‹ˆλ‹€.
- μ–΄μ‹œμŠ€ν„΄νŠΈμ˜ λΆ€λΆ„ 응닡을 ν™”λ©΄μ˜ μ±„νŒ… μ˜μ—­μ— μŠ€νŠΈλ¦¬λ°ν•©λ‹ˆλ‹€.

### `app_gradio_messenger.py`

- λ™μΌν•œ 곡용 μ±„νŒ… μ„œλΉ„μŠ€ 계측 μœ„μ— λ©”μ‹ μ €ν˜• UIλ₯Ό 올린 νŒŒμΌμž…λ‹ˆλ‹€.
- 쒌츑과 우츑 μ„Ήν„°λŠ” Gradio `Column(scale=3)`κ³Ό `Column(scale=7)`으둜 `3:7` λΉ„μœ¨μ„ μœ μ§€ν•©λ‹ˆλ‹€.
- λ°μŠ€ν¬ν†± λ©”μ‹ μ € λ ˆμ΄μ•„μ›ƒμ€ μ˜λ„μ μœΌλ‘œ κ³ μ • 높이λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.
- 우츑 μ„Ήν„°λŠ” `상단 헀더`, `λ©”μ‹œμ§€ ν‘œμ‹œ μ˜μ—­`, `μž…λ ₯ μ˜μ—­`의 μ„Έ 파트둜 λ‚˜λ‰˜λ©°, κ³ μ • 3ν–‰ grid둜 λ°°μΉ˜λ©λ‹ˆλ‹€.
- `상단 헀더`와 `μž…λ ₯ μ˜μ—­`은 λͺ…μ‹œμ μΈ ν”½μ…€ 높이λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.
- λ©”μ‹œμ§€ λ·°ν¬νŠΈλŠ” `calc(...)`둜 λ‚¨λŠ” λ†’μ΄λ§Œ μ‚¬μš©ν•©λ‹ˆλ‹€.
- 아바타 μ΄λ―Έμ§€λŠ” μ™ΈλΆ€ μ €μž₯μ†Œ λŒ€μ‹  ν”„λ‘œμ νŠΈ λ‚΄λΆ€ `source_file` ν΄λ”μ˜ 둜컬 이미지 νŒŒμΌμ„ Gradio 파일 라우트둜 μ„œλΉ™ν•©λ‹ˆλ‹€.
- μš°μ„ μ μœΌλ‘œ `megumin_profile` μ΄λ¦„μ˜ `png`, `jpg`, `jpeg`, `webp` νŒŒμΌμ„ μ°Ύκ³ , μ—†μœΌλ©΄ 같은 ν΄λ”μ˜ 첫 번째 이미지 νŒŒμΌμ„ μ‚¬μš©ν•©λ‹ˆλ‹€.
- fallback SVGλŠ” 둜컬 이미지 λ‘œλ“œ μ‹€νŒ¨ μ‹œμ—λ§Œ ν‘œμ‹œλ˜λ©°, `source_file` ν΄λ”λŠ” λ©”μ‹ μ € 단독 μ‹€ν–‰κ³Ό `app.py` 경유 μ‹€ν–‰ λͺ¨λ‘μ—μ„œ `allowed_paths`둜 λͺ…μ‹œμ μœΌλ‘œ λ…ΈμΆœν•©λ‹ˆλ‹€.
- Gradio μžλ™ stretch λž˜νΌκ°€ μ„Έλ‘œ ν™•μž₯을 λ‹€μ‹œ μœ λ°œν•  수 μžˆμœΌλ―€λ‘œ 이 νŒŒμΌμ—μ„œλŠ” `gr.Blocks(fill_height=True)`λ₯Ό μ‚¬μš©ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

### `app.py`

- Hugging Face Spaces μ§„μž…μ μž…λ‹ˆλ‹€.
- `MEGUMIN_UI` 값에 따라 κΈ°λ³Έ UI와 λ©”μ‹ μ € UI 쀑 ν•˜λ‚˜λ₯Ό μ„ νƒν•©λ‹ˆλ‹€.

## μ„Έμ…˜ λͺ¨λΈ

- ν˜„μž¬ μ„Έμ…˜ μ €μž₯μ†ŒλŠ” λ©”λͺ¨λ¦¬ κΈ°λ°˜μž…λ‹ˆλ‹€.
- μ•± ν”„λ‘œμ„ΈμŠ€κ°€ μ‚΄μ•„ μžˆλŠ” λ™μ•ˆ λŒ€ν™” 연속성이 μœ μ§€λ©λ‹ˆλ‹€.
- 졜근 λ©”μ‹œμ§€λŠ” 직접 λ³΄μ‘΄ν•˜κ³ , 였래된 λ§₯락은 μš”μ•½ μƒνƒœλ‘œ μΆ•μ•½ν•©λ‹ˆλ‹€.

## λ©”μ‹ μ € λ ˆμ΄μ•„μ›ƒ μœ μ§€λ³΄μˆ˜ κ·œμΉ™

- `app_gradio_messenger.py`λŠ” 뷰포트λ₯Ό 꽉 μ±„μš°λŠ” flex μ‹€ν—˜μ΄ μ•„λ‹ˆλΌ κ³ μ • 높이 λ ˆμ΄μ•„μ›ƒμœΌλ‘œ λ‹€λ£Ήλ‹ˆλ‹€.
- λ©”μ‹ μ € νŒ¨λ„ 높이가 λ°”λ€Œλ©΄ CSS λ³€μˆ˜μ™€ 이 λ¬Έμ„œλ₯Ό ν•¨κ»˜ μˆ˜μ •ν•©λ‹ˆλ‹€.
- 쒌우 λΉ„μœ¨μ΄ λ°”λ€Œλ©΄ Gradio `scale` κ°’κ³Ό README λ©”λͺ¨λ₯Ό ν•¨κ»˜ μˆ˜μ •ν•©λ‹ˆλ‹€.
- νŠΉλ³„ν•œ μ΄μœ μ™€ λΈŒλΌμš°μ € 검증 없이 λ‚΄λΆ€ λž˜νΌμ— μ€‘μ²©λœ κ³ μ • `min-height` 체인을 λ‹€μ‹œ λ„μž…ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.