Hugging Face's logo

Spaces:
SandhyaMadhunagula
/
GNN-Knowledge-Graph
Sleeping

App Files Community
SandhyaMadhunagula commited on
Commit
2adbc09
·
verified ·
1 Parent(s): 4ff9d42

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +373 -0
index.html ADDED
@@ -0,0 +1,373 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <html lang="en">
4
+
5
+ <head>
6
+
7
+ <meta charset="UTF-8">
8
+
9
+ <title>GNN Knowledge Extraction Dashboard</title>
10
+
11
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
12
+
13
+ <style>
14
+
15
+ :root {
16
+
17
+ --primary-color: #0d6efd;
18
+
19
+ --glass-bg: rgba(255, 255, 255, 0.88);
20
+
21
+ }
22
+
23
+
24
+
25
+ body {
26
+
27
+ font-family: 'Segoe UI', sans-serif;
28
+
29
+ /* Using your uploaded background pattern style */
30
+
31
+ background: black url('static/network_bg.png') no-repeat center center fixed;
32
+
33
+ background-size: cover;
34
+
35
+ margin: 0;
36
+
37
+ padding: 20px;
38
+
39
+ height: 100vh;
40
+
41
+ overflow: hidden;
42
+
43
+ }
44
+
45
+
46
+
47
+ .project-header {
48
+
49
+ text-align: center;
50
+
51
+ color: white; /* Changed to white to pop against dark bg */
52
+
53
+ margin-bottom: 20px;
54
+
55
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
56
+
57
+ }
58
+
59
+
60
+
61
+ .dashboard-container {
62
+
63
+ display: flex;
64
+
65
+ max-width: 1600px;
66
+
67
+ margin: 0 auto;
68
+
69
+ gap: 20px;
70
+
71
+ height: calc(100vh - 120px);
72
+
73
+ }
74
+
75
+
76
+
77
+ .control-panel {
78
+
79
+ flex: 1;
80
+
81
+ background: var(--glass-bg);
82
+
83
+ padding: 25px;
84
+
85
+ border-radius: 15px;
86
+
87
+ box-shadow: 0 10px 40px rgba(0,0,0,0.5);
88
+
89
+ overflow-y: auto;
90
+
91
+ backdrop-filter: blur(10px); /* Makes it look modern */
92
+
93
+ }
94
+
95
+
96
+
97
+ .graph-panel {
98
+
99
+ flex: 2;
100
+
101
+ background: rgba(255, 255, 255, 0.95);
102
+
103
+ padding: 10px;
104
+
105
+ border-radius: 15px;
106
+
107
+ box-shadow: 0 10px 40px rgba(0,0,0,0.5);
108
+
109
+ display: flex;
110
+
111
+ flex-direction: column;
112
+
113
+ }
114
+
115
+
116
+
117
+ .card-section {
118
+
119
+ background: white;
120
+
121
+ padding: 15px;
122
+
123
+ border-radius: 10px;
124
+
125
+ margin-bottom: 20px;
126
+
127
+ border: 1px solid #dee2e6;
128
+
129
+ }
130
+
131
+
132
+
133
+ .answer-box {
134
+
135
+ background: #e3f2fd;
136
+
137
+ border-left: 5px solid #1976d2;
138
+
139
+ padding: 15px;
140
+
141
+ border-radius: 8px;
142
+
143
+ margin-top: 15px;
144
+
145
+ }
146
+
147
+
148
+
149
+ iframe {
150
+
151
+ flex-grow: 1;
152
+
153
+ width: 100%;
154
+
155
+ border-radius: 10px;
156
+
157
+ border: none;
158
+
159
+ }
160
+
161
+
162
+
163
+ .badge-interactive {
164
+
165
+ background: #6c5ce7;
166
+
167
+ color: white;
168
+
169
+ padding: 5px 10px;
170
+
171
+ border-radius: 20px;
172
+
173
+ font-size: 0.8rem;
174
+
175
+ }
176
+
177
+
178
+
179
+ /* --- GLOWING NODES CONFIGURATION --- */
180
+
181
+ /* This makes the bubbles in the graph look like they belong on your background */
182
+
183
+ .graph-panel iframe {
184
+
185
+ filter: drop-shadow(0 0 10px rgba(108, 92, 231, 0.3));
186
+
187
+ }
188
+
189
+ /* ------------------------------------ */
190
+
191
+ </style>
192
+
193
+ </head>
194
+
195
+ <body>
196
+
197
+
198
+
199
+ <div class="project-header">
200
+
201
+ <h2 class="fw-bold">🧠 GNN Knowledge Graph Extractor</h2>
202
+
203
+ <p>Intelligent Entity-Relationship Mapping & Discovery</p>
204
+
205
+ </div>
206
+
207
+ <div class="dashboard-container">
208
+
209
+ <div class="control-panel">
210
+
211
+ <form method="POST" enctype="multipart/form-data">
212
+
213
+ <div class="card-section shadow-sm">
214
+
215
+ <h5>1. Text & Documents</h5>
216
+
217
+ <!-- <textarea name="text" class="form-control mb-3" rows="5" placeholder="Paste text here...">{{ user_text }}</textarea>--->
218
+ <textarea name="text" class="form-control mb-3" rows="5" placeholder="Paste text here...">{{ session.get('user_text', '') }}</textarea>
219
+
220
+ <input type="file" name="file" class="form-control mb-3" accept=".pdf,.docx,.txt">
221
+
222
+ <button type="submit" class="btn btn-primary w-100">Process & Expand Graph</button>
223
+
224
+ </div>
225
+
226
+ </form>
227
+
228
+ <div class="card-section shadow-sm">
229
+ <h5>2. Ask the Graph</h5>
230
+ <form method="POST">
231
+
232
+ <input type="text" name="query" class="form-control mb-3" placeholder="Search entity..." value="{{ user_query }}">
233
+
234
+ <div class="d-flex gap-2">
235
+
236
+ <button type="submit" class="btn btn-success flex-grow-1">Ask Question</button>
237
+
238
+ <a href="/" class="btn btn-outline-secondary">Clear Query</a>
239
+ </div>
240
+ </form>
241
+
242
+ {% if answer %}
243
+
244
+ <div class="answer-box shadow-sm">
245
+
246
+ <strong>Result:</strong><br>
247
+
248
+ <div class="mt-2">{{ answer | safe }}</div>
249
+
250
+ </div>
251
+
252
+ {% endif %}
253
+
254
+ </div>
255
+
256
+ <div class="mt-auto">
257
+ <button type="button" class="btn btn-outline-info w-100 mb-2" data-bs-toggle="modal" data-bs-target="#dbModal">
258
+ 🔍 View Database Table
259
+ </button>
260
+ <a href="/clear" class="btn btn-danger w-100 opacity-75" onclick="return confirm('ERASE ALL KNOWLEDGE?')">
261
+ Reset Full Database
262
+ </a>
263
+ </div>
264
+
265
+ </div>
266
+
267
+
268
+
269
+ <div class="graph-panel">
270
+
271
+ <div class="d-flex justify-content-between align-items-center mb-2 px-2">
272
+
273
+ <h5 class="m-0">Graph Visualization</h5>
274
+
275
+ <span class="badge-interactive">Live Interactive Nodes</span>
276
+
277
+ </div>
278
+
279
+ {% if graph %}
280
+
281
+ <iframe src="{{ url_for('static', filename='graph.html') }}"></iframe>
282
+
283
+ {% else %}
284
+
285
+ <div class="h-100 d-flex align-items-center justify-content-center text-muted border rounded">
286
+
287
+ Waiting for data to map relationships...
288
+
289
+ </div>
290
+
291
+ {% endif %}
292
+
293
+ </div>
294
+
295
+ </div>
296
+
297
+ <div class="modal fade" id="dbModal" tabindex="-1" aria-hidden="true">
298
+
299
+ <div class="modal-dialog modal-lg modal-dialog-scrollable">
300
+
301
+ <div class="modal-content">
302
+
303
+ <div class="modal-header">
304
+
305
+ <h5 class="modal-title">Extracted Knowledge Base (Triples)</h5>
306
+ <a href="/export_csv" class="btn btn-success btn-sm ms-3">
307
+ 📊 Download CSV
308
+ </a>
309
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
310
+
311
+ </div>
312
+
313
+ <div class="modal-body">
314
+
315
+ <table class="table table-hover">
316
+
317
+ <thead class="table-dark">
318
+
319
+ <tr>
320
+
321
+ <th>Subject</th>
322
+
323
+ <th>Relationship</th>
324
+
325
+ <th>Object</th>
326
+
327
+ </tr>
328
+
329
+ </thead>
330
+
331
+ <tbody>
332
+
333
+ {% for triple in db_triples %}
334
+
335
+ <tr>
336
+
337
+ <td><strong>{{ triple.s }}</strong></td>
338
+
339
+ <td><span class="badge bg-primary">{{ triple.r }}</span></td>
340
+
341
+ <td><strong>{{ triple.o }}</strong></td>
342
+
343
+ </tr>
344
+
345
+ {% else %}
346
+
347
+ <tr>
348
+
349
+ <td colspan="3" class="text-center text-muted">No data in database yet.</td>
350
+
351
+ </tr>
352
+
353
+ {% endfor %}
354
+
355
+ </tbody>
356
+
357
+ </table>
358
+
359
+ </div>
360
+
361
+ </div>
362
+
363
+ </div>
364
+
365
+ </div>
366
+
367
+
368
+
369
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
370
+
371
+ </body>
372
+
373
+ </html>