File size: 5,227 Bytes
babf3f3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAG 챗봇 - ν™ˆ</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fas fa-robot me-2"></i>RAG 챗봇
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="/"><i class="fas fa-home me-1"></i>ν™ˆ</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/chat"><i class="fas fa-comments me-1"></i>μ±„νŒ…</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/knowledge"><i class="fas fa-database me-1"></i>μ§€μ‹λ² μ΄μŠ€</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-8 text-center">
                <h1 class="display-4 mb-4">RAG 챗봇</h1>
                <p class="lead mb-5">Retrieval-Augmented Generation 기반 μ§€λŠ₯ν˜• 챗봇 μ„œλΉ„μŠ€</p>
                
                <div class="row mt-5">
                    <div class="col-md-4">
                        <div class="card mb-4 shadow-sm h-100">
                            <div class="card-body text-center py-4">
                                <i class="fas fa-comments fa-4x mb-3 text-primary"></i>
                                <h3 class="card-title">ν…μŠ€νŠΈ μ±„νŒ…</h3>
                                <p class="card-text">ν…μŠ€νŠΈλ‘œ μ§ˆλ¬Έμ„ μž…λ ₯ν•˜κ³  지식 기반 닡변을 λ°›μœΌμ„Έμš”.</p>
                                <a href="/chat" class="btn btn-primary mt-2">μ±„νŒ… μ‹œμž‘</a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="card mb-4 shadow-sm h-100">
                            <div class="card-body text-center py-4">
                                <i class="fas fa-microphone fa-4x mb-3 text-danger"></i>
                                <h3 class="card-title">μŒμ„± μ±„νŒ…</h3>
                                <p class="card-text">VITO STTλ₯Ό ν™œμš©ν•œ μŒμ„± 질문으둜 λŒ€ν™”ν•˜μ„Έμš”.</p>
                                <a href="/chat" class="btn btn-danger mt-2">μŒμ„± μ±„νŒ…</a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="card mb-4 shadow-sm h-100">
                            <div class="card-body text-center py-4">
                                <i class="fas fa-database fa-4x mb-3 text-success"></i>
                                <h3 class="card-title">μ§€μ‹λ² μ΄μŠ€</h3>
                                <p class="card-text">λ¬Έμ„œλ₯Ό μ—…λ‘œλ“œν•˜μ—¬ μ±—λ΄‡μ˜ 지식을 ν™•μž₯ν•˜μ„Έμš”.</p>
                                <a href="/knowledge" class="btn btn-success mt-2">μ§€μ‹λ² μ΄μŠ€ 관리</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row mt-5">
                    <div class="col-md-12">
                        <div class="card shadow-sm">
                            <div class="card-body">
                                <h4 class="mb-3">RAG κΈ°μˆ μ— λŒ€ν•˜μ—¬</h4>
                                <p>RAG(Retrieval-Augmented Generation)λŠ” λŒ€κ·œλͺ¨ μ–Έμ–΄ λͺ¨λΈ(LLM)에 μ™ΈλΆ€ 지식을 μ œκ³΅ν•˜μ—¬ 더 μ •ν™•ν•˜κ³  μ΅œμ‹  정보λ₯Ό λ°”νƒ•μœΌλ‘œ 응닡을 μƒμ„±ν•˜λŠ” κΈ°μˆ μž…λ‹ˆλ‹€.</p>
                                <p>λ³Έ 챗봇은 λ¬Έμ„œ 검색과 LLM 생성을 κ²°ν•©ν•˜μ—¬ μ‚¬μš©μž μ§ˆλ¬Έμ— λŒ€ν•œ λ§₯락 기반 응닡을 μ œκ³΅ν•©λ‹ˆλ‹€.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-white text-center py-3 mt-5">
        <div class="container">
            <p class="mb-0">RAG 챗봇 ν΄λΌμ΄μ–ΈνŠΈ &copy; 2025</p>
        </div>
    </footer>

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>