Ollama 설치 안내 UI + 온보딩 Ollama 단계

- StatusBar: 오프라인 3초 후 넛징 버블 표시 ("설치 안내 보기→" 링크)
- OllamaGuideModal: 3단계 설치 안내 (다운로드→모델 pull→자동 연결)
- OnboardingModal: Step 3에 Ollama 설치 안내 단계 추가
- Settings 정보 탭: "초기 설정 안내 다시 보기" 버튼
- system.openExternal IPC 추가 (외부 URL 열기)
This commit is contained in:
Yun Chan 2026-04-05 13:38:26 +09:00
parent ea48168b1e
commit dc06a326b5
6 changed files with 341 additions and 35 deletions

View file

@ -14,6 +14,7 @@ import {
import MicIcon from '@mui/icons-material/Mic'
import KeyboardIcon from '@mui/icons-material/Keyboard'
import CheckCircleIcon from '@mui/icons-material/CheckCircle'
import OpenInNewIcon from '@mui/icons-material/OpenInNew'
import { d3roPalette, d3roFontMono } from '../theme'
import { Led } from './ds'
import { HotkeyRecordModal } from './HotkeyRecordModal'
@ -25,7 +26,7 @@ interface OnboardingModalProps {
}
export function OnboardingModal({ open, onClose }: OnboardingModalProps): React.ReactElement {
const [step, setStep] = useState(0) // 0: 환영, 1: 마이크, 2: 핫키, 3: 완료
const [step, setStep] = useState(0) // 0: 환영, 1: 마이크, 2: 핫키, 3: Ollama, 4: 완료
const [devices, setDevices] = useState<AudioDevice[]>([])
const [selectedDevice, setSelectedDevice] = useState('default')
const [hotkeyBinding, setHotkeyBinding] = useState<HotkeyBinding | null>(null)
@ -199,8 +200,45 @@ export function OnboardingModal({ open, onClose }: OnboardingModalProps): React.
</Box>
)}
{/* Step 3: 완료 */}
{/* Step 3: Ollama 설치 */}
{step === 3 && (
<Box>
<Stack direction="row" alignItems="center" gap={1} mb={3}>
<Led color="amber" size={12} />
<Typography sx={{ fontFamily: d3roFontMono, fontWeight: 700, fontSize: '14px' }}>
Ollama ()
</Typography>
</Stack>
<Typography variant="body2" sx={{ color: d3roPalette.text.secondary, mb: 2 }}>
, LLM Ollama가 .
Ollama .
</Typography>
<Button
variant="outlined"
endIcon={<OpenInNewIcon sx={{ fontSize: 14 }} />}
onClick={() => window.electronAPI.system.openExternal({ url: 'https://ollama.com/download' })}
fullWidth
sx={{ mb: 1.5, fontFamily: d3roFontMono }}
>
Ollama
</Button>
<Box sx={{ p: 1.5, borderRadius: '8px', bgcolor: d3roPalette.bg.inset, boxShadow: 'inset 0 1px 4px rgba(0,0,0,0.3)', mb: 3 }}>
<Typography sx={{ fontFamily: d3roFontMono, fontSize: '11px', color: d3roPalette.accent.amber }}>
$ ollama pull qwen3:4b
</Typography>
<Typography sx={{ fontSize: '10px', color: d3roPalette.text.inactive, mt: 0.5 }}>
</Typography>
</Box>
<Stack direction="row" justifyContent="space-between">
<Button onClick={() => setStep(2)} sx={{ color: d3roPalette.text.inactive }}></Button>
<Button variant="contained" onClick={() => setStep(4)}></Button>
</Stack>
</Box>
)}
{/* Step 4: 완료 */}
{step === 4 && (
<Box sx={{ textAlign: 'center', py: 3 }}>
<CheckCircleIcon sx={{ fontSize: 48, color: d3roPalette.tag.green, mb: 2 }} />
<Typography sx={{ fontFamily: d3roFontMono, fontSize: '18px', fontWeight: 700, mb: 1 }}>