Hugging Face's logo

Spaces:
junho85
/
graphrag
Running

App Files Community
junho85 commited on
Commit
b540505
·
verified ·
1 Parent(s): 25f1c03

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +496 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Graphrag
3
- emoji: 🦀
4
- colorFrom: purple
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: graphrag
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,496 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Microsoft GraphRAG Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes pulse {
11
+ 0%, 100% { opacity: 1; }
12
+ 50% { opacity: 0.5; }
13
+ }
14
+ .animate-pulse {
15
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
16
+ }
17
+ .graph-container {
18
+ background-image: radial-gradient(circle at 1px 1px, #e5e7eb 1px, transparent 0);
19
+ background-size: 20px 20px;
20
+ }
21
+ .sidebar {
22
+ scrollbar-width: thin;
23
+ scrollbar-color: #3b82f6 #f1f1f1;
24
+ }
25
+ .sidebar::-webkit-scrollbar {
26
+ width: 6px;
27
+ }
28
+ .sidebar::-webkit-scrollbar-track {
29
+ background: #f1f1f1;
30
+ }
31
+ .sidebar::-webkit-scrollbar-thumb {
32
+ background-color: #3b82f6;
33
+ border-radius: 3px;
34
+ }
35
+ .result-card {
36
+ transition: all 0.3s ease;
37
+ }
38
+ .result-card:hover {
39
+ transform: translateY(-2px);
40
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-50 font-sans">
45
+ <div class="flex h-screen overflow-hidden">
46
+ <!-- Sidebar -->
47
+ <div class="sidebar w-64 bg-white border-r border-gray-200 flex flex-col overflow-y-auto">
48
+ <div class="p-4 border-b border-gray-200">
49
+ <div class="flex items-center space-x-2">
50
+ <i class="fab fa-microsoft text-blue-600 text-2xl"></i>
51
+ <h1 class="text-xl font-semibold text-gray-800">GraphRAG</h1>
52
+ </div>
53
+ </div>
54
+ <div class="p-4">
55
+ <div class="mb-6">
56
+ <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Navigation</h2>
57
+ <ul>
58
+ <li class="mb-1">
59
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-blue-600 bg-blue-50 rounded-lg">
60
+ <i class="fas fa-home mr-3"></i>
61
+ Dashboard
62
+ </a>
63
+ </li>
64
+ <li class="mb-1">
65
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg">
66
+ <i class="fas fa-project-diagram mr-3"></i>
67
+ Knowledge Graphs
68
+ </a>
69
+ </li>
70
+ <li class="mb-1">
71
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg">
72
+ <i class="fas fa-database mr-3"></i>
73
+ Data Sources
74
+ </a>
75
+ </li>
76
+ <li class="mb-1">
77
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg">
78
+ <i class="fas fa-chart-line mr-3"></i>
79
+ Analytics
80
+ </a>
81
+ </li>
82
+ </ul>
83
+ </div>
84
+ <div class="mb-6">
85
+ <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Recent Queries</h2>
86
+ <ul>
87
+ <li class="mb-1">
88
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg">
89
+ <i class="fas fa-search mr-3 text-gray-400"></i>
90
+ Customer segmentation...
91
+ </a>
92
+ </li>
93
+ <li class="mb-1">
94
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg">
95
+ <i class="fas fa-search mr-3 text-gray-400"></i>
96
+ Product recommendations...
97
+ </a>
98
+ </li>
99
+ <li class="mb-1">
100
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg">
101
+ <i class="fas fa-search mr-3 text-gray-400"></i>
102
+ Sales forecast Q3...
103
+ </a>
104
+ </li>
105
+ </ul>
106
+ </div>
107
+ <div>
108
+ <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Settings</h2>
109
+ <ul>
110
+ <li class="mb-1">
111
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg">
112
+ <i class="fas fa-cog mr-3"></i>
113
+ Configuration
114
+ </a>
115
+ </li>
116
+ <li class="mb-1">
117
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg">
118
+ <i class="fas fa-user mr-3"></i>
119
+ Account
120
+ </a>
121
+ </li>
122
+ </ul>
123
+ </div>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Main Content -->
128
+ <div class="flex-1 flex flex-col overflow-hidden">
129
+ <!-- Top Navigation -->
130
+ <header class="bg-white border-b border-gray-200">
131
+ <div class="flex items-center justify-between px-6 py-4">
132
+ <div class="flex items-center">
133
+ <h2 class="text-lg font-semibold text-gray-800">GraphRAG Explorer</h2>
134
+ </div>
135
+ <div class="flex items-center space-x-4">
136
+ <div class="relative">
137
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 w-64">
138
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
139
+ </div>
140
+ <button class="p-2 text-gray-500 hover:text-gray-700">
141
+ <i class="fas fa-bell"></i>
142
+ </button>
143
+ <div class="flex items-center space-x-2">
144
+ <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">JD</div>
145
+ <span class="text-sm font-medium">John Doe</span>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </header>
150
+
151
+ <!-- Main Content Area -->
152
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
153
+ <div class="mb-6">
154
+ <div class="bg-white p-6 rounded-xl shadow-sm">
155
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">GraphRAG Query Interface</h3>
156
+ <div class="flex space-x-4 mb-4">
157
+ <div class="flex-1">
158
+ <label for="query" class="block text-sm font-medium text-gray-700 mb-1">Enter your question</label>
159
+ <textarea id="query" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Ask anything about your connected data..."></textarea>
160
+ </div>
161
+ <div class="w-48">
162
+ <label for="data-source" class="block text-sm font-medium text-gray-700 mb-1">Data Source</label>
163
+ <select id="data-source" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
164
+ <option>All Sources</option>
165
+ <option>Sales Data</option>
166
+ <option>Customer Feedback</option>
167
+ <option>Product Catalog</option>
168
+ <option>Market Research</option>
169
+ </select>
170
+ </div>
171
+ </div>
172
+ <div class="flex justify-between items-center">
173
+ <div class="flex space-x-2">
174
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
175
+ <i class="fas fa-paper-plane mr-2"></i> Submit Query
176
+ </button>
177
+ <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
178
+ <i class="fas fa-history mr-2"></i> History
179
+ </button>
180
+ </div>
181
+ <div class="flex items-center space-x-2">
182
+ <span class="text-sm text-gray-500">Advanced</span>
183
+ <label class="relative inline-flex items-center cursor-pointer">
184
+ <input type="checkbox" value="" class="sr-only peer">
185
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
186
+ </label>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
193
+ <!-- Knowledge Graph Summary -->
194
+ <div class="bg-white p-6 rounded-xl shadow-sm">
195
+ <div class="flex justify-between items-center mb-4">
196
+ <h3 class="text-lg font-semibold text-gray-800">Knowledge Graph</h3>
197
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Active</span>
198
+ </div>
199
+ <div class="graph-container h-48 rounded-lg bg-gray-50 mb-4 flex items-center justify-center">
200
+ <div class="text-center">
201
+ <i class="fas fa-project-diagram text-gray-300 text-5xl mb-2"></i>
202
+ <p class="text-gray-500 text-sm">Visual representation of connected data</p>
203
+ </div>
204
+ </div>
205
+ <div class="grid grid-cols-3 gap-2 text-center">
206
+ <div class="p-2">
207
+ <div class="text-2xl font-bold text-blue-600">1,248</div>
208
+ <div class="text-xs text-gray-500">Entities</div>
209
+ </div>
210
+ <div class="p-2">
211
+ <div class="text-2xl font-bold text-blue-600">3,572</div>
212
+ <div class="text-xs text-gray-500">Relationships</div>
213
+ </div>
214
+ <div class="p-2">
215
+ <div class="text-2xl font-bold text-blue-600">87%</div>
216
+ <div class="text-xs text-gray-500">Confidence</div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Data Sources -->
222
+ <div class="bg-white p-6 rounded-xl shadow-sm">
223
+ <div class="flex justify-between items-center mb-4">
224
+ <h3 class="text-lg font-semibold text-gray-800">Connected Data Sources</h3>
225
+ <button class="text-blue-600 text-sm font-medium">Manage</button>
226
+ </div>
227
+ <div class="space-y-3">
228
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg">
229
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
230
+ <i class="fas fa-database text-blue-600"></i>
231
+ </div>
232
+ <div class="flex-1">
233
+ <h4 class="text-sm font-medium text-gray-800">Azure SQL Database</h4>
234
+ <p class="text-xs text-gray-500">Last synced 2 hours ago</p>
235
+ </div>
236
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
237
+ </div>
238
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg">
239
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
240
+ <i class="fab fa-microsoft text-purple-600"></i>
241
+ </div>
242
+ <div class="flex-1">
243
+ <h4 class="text-sm font-medium text-gray-800">SharePoint</h4>
244
+ <p class="text-xs text-gray-500">Last synced 1 day ago</p>
245
+ </div>
246
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
247
+ </div>
248
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg">
249
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
250
+ <i class="fas fa-file-excel text-green-600"></i>
251
+ </div>
252
+ <div class="flex-1">
253
+ <h4 class="text-sm font-medium text-gray-800">Excel Files</h4>
254
+ <p class="text-xs text-gray-500">Last synced 3 days ago</p>
255
+ </div>
256
+ <div class="w-2 h-2 rounded-full bg-yellow-500"></div>
257
+ </div>
258
+ </div>
259
+ <button class="w-full mt-4 py-2 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:bg-gray-50">
260
+ <i class="fas fa-plus mr-2"></i> Add Data Source
261
+ </button>
262
+ </div>
263
+
264
+ <!-- Query History -->
265
+ <div class="bg-white p-6 rounded-xl shadow-sm">
266
+ <div class="flex justify-between items-center mb-4">
267
+ <h3 class="text-lg font-semibold text-gray-800">Recent Queries</h3>
268
+ <button class="text-blue-600 text-sm font-medium">View All</button>
269
+ </div>
270
+ <div class="space-y-3">
271
+ <div class="p-3 border border-gray-200 rounded-lg">
272
+ <div class="flex justify-between items-start mb-1">
273
+ <h4 class="text-sm font-medium text-gray-800 truncate">What were our top selling products last quarter?</h4>
274
+ <span class="text-xs text-gray-500">2h ago</span>
275
+ </div>
276
+ <p class="text-xs text-gray-500 mb-2">Generated 12 insights from Sales Data</p>
277
+ <div class="flex space-x-2">
278
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Sales</span>
279
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Products</span>
280
+ </div>
281
+ </div>
282
+ <div class="p-3 border border-gray-200 rounded-lg">
283
+ <div class="flex justify-between items-start mb-1">
284
+ <h4 class="text-sm font-medium text-gray-800 truncate">Show customer complaints by region</h4>
285
+ <span class="text-xs text-gray-500">1d ago</span>
286
+ </div>
287
+ <p class="text-xs text-gray-500 mb-2">Generated 8 insights from Customer Feedback</p>
288
+ <div class="flex space-x-2">
289
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">Customers</span>
290
+ <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Regions</span>
291
+ </div>
292
+ </div>
293
+ <div class="p-3 border border-gray-200 rounded-lg">
294
+ <div class="flex justify-between items-start mb-1">
295
+ <h4 class="text-sm font-medium text-gray-800 truncate">Compare Q2 and Q3 revenue growth</h4>
296
+ <span class="text-xs text-gray-500">2d ago</span>
297
+ </div>
298
+ <p class="text-xs text-gray-500 mb-2">Generated 5 insights from Financial Data</p>
299
+ <div class="flex space-x-2">
300
+ <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">Finance</span>
301
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">Comparison</span>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Query Results -->
309
+ <div class="bg-white p-6 rounded-xl shadow-sm">
310
+ <div class="flex justify-between items-center mb-6">
311
+ <h3 class="text-lg font-semibold text-gray-800">Query Results</h3>
312
+ <div class="flex space-x-2">
313
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">
314
+ <i class="fas fa-download mr-1"></i> Export
315
+ </button>
316
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">
317
+ <i class="fas fa-filter mr-1"></i> Filter
318
+ </button>
319
+ </div>
320
+ </div>
321
+
322
+ <div class="space-y-4">
323
+ <!-- Result Card 1 -->
324
+ <div class="result-card p-4 border border-gray-200 rounded-lg hover:border-blue-200">
325
+ <div class="flex items-start">
326
+ <div class="flex-shrink-0 mt-1">
327
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
328
+ <i class="fas fa-chart-bar text-blue-600"></i>
329
+ </div>
330
+ </div>
331
+ <div class="ml-3 flex-1">
332
+ <div class="flex justify-between items-start">
333
+ <h4 class="text-base font-medium text-gray-800">Sales Performance Analysis</h4>
334
+ <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">High Confidence</span>
335
+ </div>
336
+ <p class="text-sm text-gray-600 mt-1">Based on the connected sales data from Q3 2023, the top performing product was the Azure AI Suite with a 34% increase in sales compared to Q2. The Western region showed the highest growth at 42%.</p>
337
+ <div class="mt-2 flex items-center text-xs text-gray-500">
338
+ <span class="mr-3">Source: Azure SQL Database</span>
339
+ <span>Generated: Just now</span>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ <!-- Result Card 2 -->
346
+ <div class="result-card p-4 border border-gray-200 rounded-lg hover:border-blue-200">
347
+ <div class="flex items-start">
348
+ <div class="flex-shrink-0 mt-1">
349
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center">
350
+ <i class="fas fa-users text-purple-600"></i>
351
+ </div>
352
+ </div>
353
+ <div class="ml-3 flex-1">
354
+ <div class="flex justify-between items-start">
355
+ <h4 class="text-base font-medium text-gray-800">Customer Sentiment Trends</h4>
356
+ <span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full">Medium Confidence</span>
357
+ </div>
358
+ <p class="text-sm text-gray-600 mt-1">Customer feedback analysis shows a 12% improvement in satisfaction scores for the Azure platform, while concerns about documentation clarity persist (18% of negative feedback mentions this).</p>
359
+ <div class="mt-2 flex items-center text-xs text-gray-500">
360
+ <span class="mr-3">Source: SharePoint Feedback</span>
361
+ <span>Generated: Just now</span>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- Result Card 3 -->
368
+ <div class="result-card p-4 border border-gray-200 rounded-lg hover:border-blue-200">
369
+ <div class="flex items-start">
370
+ <div class="flex-shrink-0 mt-1">
371
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
372
+ <i class="fas fa-lightbulb text-green-600"></i>
373
+ </div>
374
+ </div>
375
+ <div class="ml-3 flex-1">
376
+ <div class="flex justify-between items-start">
377
+ <h4 class="text-base font-medium text-gray-800">Recommendation</h4>
378
+ <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Actionable</span>
379
+ </div>
380
+ <p class="text-sm text-gray-600 mt-1">Cross-analysis suggests bundling the Azure AI Suite with documentation workshops could increase adoption by 22% based on similar successful initiatives in Q1. The knowledge graph shows a strong correlation between documentation clarity and product adoption.</p>
381
+ <div class="mt-2 flex items-center text-xs text-gray-500">
382
+ <span class="mr-3">Sources: Multiple</span>
383
+ <span>Generated: Just now</span>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+
390
+ <div class="mt-6 flex justify-center">
391
+ <button class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">
392
+ <i class="fas fa-ellipsis-h mr-1"></i> Load More Results
393
+ </button>
394
+ </div>
395
+ </div>
396
+ </main>
397
+ </div>
398
+ </div>
399
+
400
+ <script>
401
+ // Simple interactive elements
402
+ document.addEventListener('DOMContentLoaded', function() {
403
+ // Toggle advanced options
404
+ const advancedToggle = document.querySelector('input[type="checkbox"]');
405
+ advancedToggle.addEventListener('change', function() {
406
+ const advancedOptions = document.querySelectorAll('.advanced-option');
407
+ advancedOptions.forEach(option => {
408
+ option.classList.toggle('hidden');
409
+ });
410
+ });
411
+
412
+ // Simulate query submission
413
+ const submitButton = document.querySelector('button:has(.fa-paper-plane)');
414
+ submitButton.addEventListener('click', function() {
415
+ const queryTextarea = document.getElementById('query');
416
+ if (queryTextarea.value.trim() === '') {
417
+ alert('Please enter a query before submitting');
418
+ return;
419
+ }
420
+
421
+ // Show loading state
422
+ submitButton.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> Processing...';
423
+ submitButton.disabled = true;
424
+
425
+ // Simulate API call
426
+ setTimeout(() => {
427
+ // Add a new result card
428
+ const resultsContainer = document.querySelector('.space-y-4');
429
+ const newCard = document.createElement('div');
430
+ newCard.className = 'result-card p-4 border border-gray-200 rounded-lg hover:border-blue-200 animate-pulse';
431
+ newCard.innerHTML = `
432
+ <div class="flex items-start">
433
+ <div class="flex-shrink-0 mt-1">
434
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
435
+ <i class="fas fa-search text-blue-600"></i>
436
+ </div>
437
+ </div>
438
+ <div class="ml-3 flex-1">
439
+ <h4 class="text-base font-medium text-gray-800">New Result for: "${queryTextarea.value.substring(0, 30)}..."</h4>
440
+ <p class="text-sm text-gray-600 mt-1">Analyzing your query across connected data sources...</p>
441
+ <div class="mt-2 flex items-center text-xs text-gray-500">
442
+ <span>Processing...</span>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ `;
447
+ resultsContainer.prepend(newCard);
448
+
449
+ // Scroll to results
450
+ resultsContainer.scrollIntoView({ behavior: 'smooth' });
451
+
452
+ // Reset button
453
+ setTimeout(() => {
454
+ submitButton.innerHTML = '<i class="fas fa-paper-plane mr-2"></i> Submit Query';
455
+ submitButton.disabled = false;
456
+
457
+ // Simulate result completion
458
+ newCard.classList.remove('animate-pulse');
459
+ newCard.innerHTML = `
460
+ <div class="flex items-start">
461
+ <div class="flex-shrink-0 mt-1">
462
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
463
+ <i class="fas fa-check-circle text-blue-600"></i>
464
+ </div>
465
+ </div>
466
+ <div class="ml-3 flex-1">
467
+ <div class="flex justify-between items-start">
468
+ <h4 class="text-base font-medium text-gray-800">Analysis Complete</h4>
469
+ <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">High Confidence</span>
470
+ </div>
471
+ <p class="text-sm text-gray-600 mt-1">Your query "${queryTextarea.value.substring(0, 50)}..." has been processed across all connected data sources. The knowledge graph identified 3 key insights and 2 recommendations.</p>
472
+ <div class="mt-2 flex items-center text-xs text-gray-500">
473
+ <span class="mr-3">Sources: Multiple</span>
474
+ <span>Generated: Just now</span>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ `;
479
+ }, 2000);
480
+ }, 1500);
481
+ });
482
+
483
+ // Add hover effects to result cards
484
+ const resultCards = document.querySelectorAll('.result-card');
485
+ resultCards.forEach(card => {
486
+ card.addEventListener('mouseenter', function() {
487
+ this.style.borderColor = '#93c5fd';
488
+ });
489
+ card.addEventListener('mouseleave', function() {
490
+ this.style.borderColor = '#e5e7eb';
491
+ });
492
+ });
493
+ });
494
+ </script>
495
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=junho85/graphrag" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
496
+ </html>