Hugging Face's logo

Spaces:
gapura-dev
/
gapura-rag
Running

App Files Community
gapura-rag
File size: 7,584 Bytes
f258251
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>I'm in Charge — Virtual Assistant</title>
    <meta name="description" content="Bilingual RAG virtual assistant for Gapura Airport Services document intelligence.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
    <div class="app-shell">
        <!-- Sidebar (desktop) / Drawer (mobile) -->
        <div class="sidebar-overlay" id="sidebar-overlay"></div>
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <img src="/assets/image.png" alt="Gapura Airport Services" class="logo">
                <button class="btn-close-sidebar" id="btn-close-sidebar" aria-label="Close menu">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>
            </div>

            <nav class="sidebar-nav">
                <button class="nav-btn active" data-panel="chat" id="nav-chat">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                    </svg>
                    <span>Chat</span>
                </button>
            </nav>

            <div class="sidebar-footer">
                <div class="lang-switcher">
                    <label for="lang-select">Language</label>
                    <select id="lang-select">
                        <option value="auto">Auto-Detect</option>
                        <option value="en">English</option>
                        <option value="id">Bahasa Indonesia</option>
                    </select>
                </div>
                <div class="stats-mini" id="stats-mini"></div>
            </div>
        </aside>

        <!-- Main content -->
        <main class="main-content">
            <!-- Chat Panel -->
            <section class="panel active" id="panel-chat">
                <header class="panel-header">
                    <button class="btn-menu" id="btn-menu" aria-label="Open menu">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/>
                        </svg>
                    </button>
                    <div class="header-title">
                        <h1><em>I'm in Charge</em> Virtual Assistant</h1>
                        <p class="header-sub">Bilingual document intelligence — English & Bahasa Indonesia</p>
                    </div>
                    <button class="btn-icon" id="btn-clear-chat" title="Clear conversation">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                        </svg>
                    </button>
                </header>

                <div class="chat-container" id="chat-container">
                    <div class="chat-welcome" id="chat-welcome">
                        <div class="welcome-icon">
                            <img src="/assets/image.png" alt="" class="welcome-logo">
                        </div>
                        <h2>How can I help you today?</h2>
                        <p>Upload documents and ask questions — I'll answer based on your files.</p>
                        <div class="welcome-hints">
                            <button class="hint-chip" onclick="sendHint(this)">Ringkasan dokumen ini apa?</button>
                            <button class="hint-chip" onclick="sendHint(this)">What are the key findings?</button>
                            <button class="hint-chip" onclick="sendHint(this)">Jelaskan poin utama</button>
                        </div>
                    </div>
                    <div class="messages" id="messages"></div>
                </div>

                <div class="chat-input-area">
                    <form id="chat-form" class="chat-form">
                        <div class="input-wrapper">
                            <textarea id="chat-input" placeholder="Ask a question about your documents..." rows="1" maxlength="2000"></textarea>
                            <button type="submit" class="btn-send" id="btn-send" disabled>
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
                                </svg>
                            </button>
                        </div>
                    </form>
                </div>
            </section>


            <!-- Mobile Bottom Nav -->
            <nav class="bottom-nav" id="bottom-nav">
                <button class="bottom-nav-btn active" data-panel="chat">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                    </svg>
                    <span>Chat</span>
                </button>
                <button class="bottom-nav-btn" id="btn-bottom-settings">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
                    </svg>
                    <span>Settings</span>
                </button>
            </nav>
        </main>
    </div>

    <script src="/static/app.js"></script>
</body>
</html>