Hugging Face's logo

Spaces:
shri210620
/
ai-notes
Running

App Files Community
shri210620 commited on
Commit
dc1407e
·
verified ·
1 Parent(s): 2689edf

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1077 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Notes
3
- emoji: 😻
4
- colorFrom: gray
5
- colorTo: green
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: ai-notes
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
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,1077 @@
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>NeoNotes - Advanced Note Taking with Mind Mapping</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cytoscape.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-cose-bilkent.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]/dist/universal-sentence-encoder.min.js"></script>
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+ <style>
14
+ #cy {
15
+ width: 100%;
16
+ height: 500px;
17
+ border: 1px solid #e5e7eb;
18
+ border-radius: 0.5rem;
19
+ background-color: #f9fafb;
20
+ }
21
+
22
+ .note-card:hover {
23
+ transform: translateY(-2px);
24
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
25
+ }
26
+
27
+ .tag-chip {
28
+ transition: all 0.2s ease;
29
+ }
30
+
31
+ .tag-chip:hover {
32
+ background-color: #3b82f6;
33
+ color: white;
34
+ }
35
+
36
+ .mindmap-node {
37
+ transition: all 0.3s ease;
38
+ }
39
+
40
+ .mindmap-node:hover {
41
+ transform: scale(1.05);
42
+ }
43
+
44
+ .ql-editor {
45
+ min-height: 200px;
46
+ font-size: 16px;
47
+ line-height: 1.6;
48
+ }
49
+
50
+ .search-highlight {
51
+ background-color: rgba(255, 255, 0, 0.5);
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-gray-50">
56
+ <div class="flex h-screen overflow-hidden">
57
+ <!-- Sidebar -->
58
+ <div class="w-64 bg-white border-r border-gray-200 flex flex-col">
59
+ <div class="p-4 border-b border-gray-200">
60
+ <h1 class="text-2xl font-bold text-blue-600 flex items-center">
61
+ <i class="fas fa-project-diagram mr-2"></i> NeoNotes
62
+ </h1>
63
+ <p class="text-sm text-gray-500">Advanced note-taking with mind mapping</p>
64
+ </div>
65
+
66
+ <div class="p-4">
67
+ <button id="new-note-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md flex items-center justify-center mb-4">
68
+ <i class="fas fa-plus mr-2"></i> New Note
69
+ </button>
70
+
71
+ <div class="mb-4">
72
+ <h3 class="font-semibold text-gray-700 mb-2">Quick Filters</h3>
73
+ <div class="space-y-1">
74
+ <button class="filter-btn w-full text-left px-2 py-1 rounded hover:bg-gray-100" data-filter="recent">
75
+ <i class="fas fa-clock mr-2 text-gray-500"></i> Recent
76
+ </button>
77
+ <button class="filter-btn w-full text-left px-2 py-1 rounded hover:bg-gray-100" data-filter="starred">
78
+ <i class="fas fa-star mr-2 text-yellow-500"></i> Starred
79
+ </button>
80
+ <button class="filter-btn w-full text-left px-2 py-1 rounded hover:bg-gray-100" data-filter="connected">
81
+ <i class="fas fa-link mr-2 text-blue-500"></i> Highly Connected
82
+ </button>
83
+ </div>
84
+ </div>
85
+
86
+ <div class="mb-4">
87
+ <h3 class="font-semibold text-gray-700 mb-2">Tags</h3>
88
+ <div id="tag-cloud" class="flex flex-wrap gap-2">
89
+ <!-- Tags will be dynamically added here -->
90
+ </div>
91
+ </div>
92
+
93
+ <div class="mb-4">
94
+ <h3 class="font-semibold text-gray-700 mb-2">Mind Map Views</h3>
95
+ <div class="space-y-1">
96
+ <button class="map-view-btn w-full text-left px-2 py-1 rounded hover:bg-gray-100" data-view="full">
97
+ <i class="fas fa-globe mr-2 text-green-500"></i> Full Knowledge Graph
98
+ </button>
99
+ <button class="map-view-btn w-full text-left px-2 py-1 rounded hover:bg-gray-100" data-view="current">
100
+ <i class="fas fa-focus mr-2 text-purple-500"></i> Current Note Context
101
+ </button>
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="mt-auto p-4 border-t border-gray-200">
107
+ <div class="flex items-center">
108
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
109
+ <i class="fas fa-user"></i>
110
+ </div>
111
+ <div class="ml-2">
112
+ <p class="text-sm font-medium">User</p>
113
+ <p class="text-xs text-gray-500">Premium</p>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- Main Content -->
120
+ <div class="flex-1 flex flex-col overflow-hidden">
121
+ <!-- Top Bar -->
122
+ <div class="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
123
+ <div class="relative w-1/3">
124
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
125
+ <i class="fas fa-search text-gray-400"></i>
126
+ </div>
127
+ <input id="search-input" type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search notes, tags, or connections...">
128
+ </div>
129
+
130
+ <div class="flex items-center space-x-4">
131
+ <button id="ai-suggest-btn" class="flex items-center text-sm text-gray-600 hover:text-blue-600">
132
+ <i class="fas fa-lightbulb mr-1"></i> AI Suggestions
133
+ </button>
134
+ <button id="embedding-btn" class="flex items-center text-sm text-gray-600 hover:text-blue-600">
135
+ <i class="fas fa-brain mr-1"></i> Analyze Text
136
+ </button>
137
+ <button id="visualize-btn" class="flex items-center text-sm text-gray-600 hover:text-blue-600">
138
+ <i class="fas fa-project-diagram mr-1"></i> Visualize
139
+ </button>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Dual Panel Layout -->
144
+ <div class="flex-1 flex overflow-hidden">
145
+ <!-- Notes List Panel -->
146
+ <div class="w-1/3 border-r border-gray-200 bg-white overflow-y-auto">
147
+ <div class="p-4">
148
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">Your Notes</h2>
149
+ <div id="notes-list" class="space-y-3">
150
+ <!-- Notes will be dynamically added here -->
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Note Editor and Visualization Panel -->
156
+ <div class="flex-1 flex flex-col overflow-hidden">
157
+ <div class="flex-1 overflow-y-auto p-6">
158
+ <!-- Note Editor View -->
159
+ <div id="editor-view" class="h-full">
160
+ <div class="mb-4 flex justify-between items-center">
161
+ <input id="note-title" type="text" class="text-2xl font-bold w-full border-none focus:ring-0 focus:outline-none" placeholder="Note Title">
162
+ <div class="flex space-x-2">
163
+ <button id="star-note" class="text-gray-400 hover:text-yellow-500">
164
+ <i class="far fa-star"></i>
165
+ </button>
166
+ <button id="delete-note" class="text-gray-400 hover:text-red-500">
167
+ <i class="far fa-trash-alt"></i>
168
+ </button>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="mb-4">
173
+ <div id="tags-input" class="flex flex-wrap items-center gap-2">
174
+ <!-- Tags will be dynamically added here -->
175
+ <input id="new-tag-input" type="text" class="flex-1 min-w-0 border-none focus:ring-0 focus:outline-none text-sm" placeholder="Add tags...">
176
+ </div>
177
+ </div>
178
+
179
+ <div id="editor-container" class="bg-white rounded-lg border border-gray-200">
180
+ <div id="editor" class="p-4"></div>
181
+ </div>
182
+
183
+ <div class="mt-4">
184
+ <h3 class="font-medium text-gray-700 mb-2">Connections</h3>
185
+ <div id="connections-list" class="flex flex-wrap gap-2">
186
+ <!-- Connections will be dynamically added here -->
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Visualization View -->
192
+ <div id="visualization-view" class="h-full hidden">
193
+ <div class="flex justify-between items-center mb-4">
194
+ <h2 class="text-xl font-semibold">Knowledge Graph Visualization</h2>
195
+ <div class="flex space-x-2">
196
+ <button id="close-visualization" class="text-gray-600 hover:text-blue-600">
197
+ <i class="fas fa-times"></i> Close
198
+ </button>
199
+ </div>
200
+ </div>
201
+ <div id="cy"></div>
202
+ <div class="mt-4 flex justify-between">
203
+ <div>
204
+ <span class="inline-block w-3 h-3 rounded-full bg-blue-500 mr-1"></span>
205
+ <span class="text-sm">Current Note</span>
206
+ <span class="inline-block w-3 h-3 rounded-full bg-green-500 mr-1 ml-2"></span>
207
+ <span class="text-sm">Connected Notes</span>
208
+ <span class="inline-block w-3 h-3 rounded-full bg-gray-300 mr-1 ml-2"></span>
209
+ <span class="text-sm">Other Notes</span>
210
+ </div>
211
+ <div class="flex space-x-2">
212
+ <button id="layout-force" class="px-3 py-1 text-sm bg-gray-100 rounded hover:bg-gray-200">
213
+ Force Layout
214
+ </button>
215
+ <button id="layout-hierarchical" class="px-3 py-1 text-sm bg-gray-100 rounded hover:bg-gray-200">
216
+ Hierarchical
217
+ </button>
218
+ <button id="layout-concentric" class="px-3 py-1 text-sm bg-gray-100 rounded hover:bg-gray-200">
219
+ Concentric
220
+ </button>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- AI Suggestions Panel -->
227
+ <div id="ai-panel" class="hidden border-t border-gray-200 bg-gray-50 p-4">
228
+ <div class="flex justify-between items-center mb-3">
229
+ <h3 class="font-medium">AI Suggestions</h3>
230
+ <button id="close-ai" class="text-gray-500 hover:text-gray-700">
231
+ <i class="fas fa-times"></i>
232
+ </button>
233
+ </div>
234
+ <div id="ai-suggestions" class="space-y-3">
235
+ <div class="p-3 bg-white rounded-lg border border-gray-200">
236
+ <p class="font-medium text-blue-600 mb-1">Related Concepts</p>
237
+ <div class="flex flex-wrap gap-2">
238
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Machine Learning</span>
239
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Neural Networks</span>
240
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Deep Learning</span>
241
+ </div>
242
+ </div>
243
+ <div class="p-3 bg-white rounded-lg border border-gray-200">
244
+ <p class="font-medium text-purple-600 mb-1">Potential Connections</p>
245
+ <ul class="list-disc list-inside text-sm space-y-1">
246
+ <li>Link to your note on "Introduction to AI"</li>
247
+ <li>Connect with "History of Neural Networks"</li>
248
+ <li>Reference your research on "Backpropagation"</li>
249
+ </ul>
250
+ </div>
251
+ <div class="p-3 bg-white rounded-lg border border-gray-200">
252
+ <p class="font-medium text-green-600 mb-1">Content Suggestions</p>
253
+ <p class="text-sm">Consider adding a section on different types of neural network architectures (CNNs, RNNs, Transformers) and their applications.</p>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Quill Editor -->
263
+ <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
264
+ <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
265
+
266
+ <script>
267
+ // Initialize the app when DOM is loaded
268
+ document.addEventListener('DOMContentLoaded', function() {
269
+ // Initialize Quill editor
270
+ const quill = new Quill('#editor', {
271
+ theme: 'snow',
272
+ modules: {
273
+ toolbar: [
274
+ [{ 'header': [1, 2, 3, false] }],
275
+ ['bold', 'italic', 'underline', 'strike'],
276
+ [{ 'color': [] }, { 'background': [] }],
277
+ [{ 'list': 'ordered'}, { 'list': 'bullet' }],
278
+ ['link', 'image', 'video'],
279
+ ['clean']
280
+ ]
281
+ },
282
+ placeholder: 'Write your note here...'
283
+ });
284
+
285
+ // Sample data for demonstration
286
+ let notes = [
287
+ {
288
+ id: '1',
289
+ title: 'Introduction to Machine Learning',
290
+ content: '<p>Machine learning is a subset of artificial intelligence that focuses on building systems that can learn from data.</p><p>Key concepts include supervised learning, unsupervised learning, and reinforcement learning.</p>',
291
+ tags: ['AI', 'Machine Learning', 'Data Science'],
292
+ starred: true,
293
+ createdAt: new Date('2023-05-15'),
294
+ updatedAt: new Date('2023-05-16'),
295
+ connections: ['2', '3']
296
+ },
297
+ {
298
+ id: '2',
299
+ title: 'Neural Networks Fundamentals',
300
+ content: '<p>Neural networks are computing systems inspired by biological neural networks.</p><p>They consist of layers of interconnected nodes (neurons) that process information.</p>',
301
+ tags: ['AI', 'Neural Networks', 'Deep Learning'],
302
+ starred: false,
303
+ createdAt: new Date('2023-06-02'),
304
+ updatedAt: new Date('2023-06-05'),
305
+ connections: ['1', '3', '4']
306
+ },
307
+ {
308
+ id: '3',
309
+ title: 'Supervised Learning Techniques',
310
+ content: '<p>Supervised learning involves training a model on labeled data.</p><p>Common algorithms include linear regression, logistic regression, and support vector machines.</p>',
311
+ tags: ['Machine Learning', 'Supervised Learning', 'Algorithms'],
312
+ starred: false,
313
+ createdAt: new Date('2023-06-10'),
314
+ updatedAt: new Date('2023-06-12'),
315
+ connections: ['1', '2']
316
+ },
317
+ {
318
+ id: '4',
319
+ title: 'Deep Learning Architectures',
320
+ content: '<p>Deep learning uses neural networks with multiple hidden layers.</p><p>Popular architectures include CNNs for image processing and RNNs for sequence data.</p>',
321
+ tags: ['Deep Learning', 'Neural Networks', 'AI'],
322
+ starred: true,
323
+ createdAt: new Date('2023-07-01'),
324
+ updatedAt: new Date('2023-07-05'),
325
+ connections: ['2', '5']
326
+ },
327
+ {
328
+ id: '5',
329
+ title: 'Natural Language Processing Basics',
330
+ content: '<p>NLP enables computers to understand, interpret, and generate human language.</p><p>Key tasks include sentiment analysis, machine translation, and text summarization.</p>',
331
+ tags: ['NLP', 'AI', 'Text Processing'],
332
+ starred: false,
333
+ createdAt: new Date('2023-07-15'),
334
+ updatedAt: new Date('2023-07-18'),
335
+ connections: ['4']
336
+ }
337
+ ];
338
+
339
+ let currentNoteId = null;
340
+ let allTags = [];
341
+
342
+ // Initialize Cytoscape for visualization
343
+ let cy = cytoscape({
344
+ container: document.getElementById('cy'),
345
+ elements: [],
346
+ style: [
347
+ {
348
+ selector: 'node',
349
+ style: {
350
+ 'label': 'data(label)',
351
+ 'text-wrap': 'wrap',
352
+ 'text-max-width': '100px',
353
+ 'text-valign': 'center',
354
+ 'text-halign': 'center',
355
+ 'background-color': '#3b82f6',
356
+ 'color': '#ffffff',
357
+ 'width': '60',
358
+ 'height': '60',
359
+ 'font-size': '10'
360
+ }
361
+ },
362
+ {
363
+ selector: 'node[type="current"]',
364
+ style: {
365
+ 'background-color': '#ef4444',
366
+ 'width': '80',
367
+ 'height': '80',
368
+ 'font-size': '12'
369
+ }
370
+ },
371
+ {
372
+ selector: 'node[type="connected"]',
373
+ style: {
374
+ 'background-color': '#10b981'
375
+ }
376
+ },
377
+ {
378
+ selector: 'node[type="other"]',
379
+ style: {
380
+ 'background-color': '#9ca3af'
381
+ }
382
+ },
383
+ {
384
+ selector: 'edge',
385
+ style: {
386
+ 'width': 2,
387
+ 'line-color': '#9ca3af',
388
+ 'curve-style': 'bezier',
389
+ 'target-arrow-shape': 'triangle',
390
+ 'target-arrow-color': '#9ca3af'
391
+ }
392
+ },
393
+ {
394
+ selector: 'edge[type="strong"]',
395
+ style: {
396
+ 'line-color': '#3b82f6',
397
+ 'width': 3,
398
+ 'target-arrow-color': '#3b82f6'
399
+ }
400
+ }
401
+ ],
402
+ layout: {
403
+ name: 'cose-bilkent',
404
+ animate: true,
405
+ randomize: true,
406
+ nodeRepulsion: 4500,
407
+ idealEdgeLength: 100,
408
+ nodeDimensionsIncludeLabels: true
409
+ }
410
+ });
411
+
412
+ // Extract all tags from notes
413
+ function extractTags() {
414
+ allTags = [];
415
+ notes.forEach(note => {
416
+ note.tags.forEach(tag => {
417
+ if (!allTags.includes(tag)) {
418
+ allTags.push(tag);
419
+ }
420
+ });
421
+ });
422
+ renderTagCloud();
423
+ }
424
+
425
+ // Render tag cloud
426
+ function renderTagCloud() {
427
+ const tagCloud = document.getElementById('tag-cloud');
428
+ tagCloud.innerHTML = '';
429
+
430
+ allTags.forEach(tag => {
431
+ const tagElement = document.createElement('div');
432
+ tagElement.className = 'tag-chip px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full cursor-pointer';
433
+ tagElement.textContent = tag;
434
+ tagElement.addEventListener('click', () => filterByTag(tag));
435
+ tagCloud.appendChild(tagElement);
436
+ });
437
+ }
438
+
439
+ // Filter notes by tag
440
+ function filterByTag(tag) {
441
+ const filteredNotes = notes.filter(note => note.tags.includes(tag));
442
+ renderNotesList(filteredNotes);
443
+
444
+ // Highlight the selected tag
445
+ document.querySelectorAll('.tag-chip').forEach(chip => {
446
+ if (chip.textContent === tag) {
447
+ chip.classList.add('bg-blue-100', 'text-blue-800');
448
+ } else {
449
+ chip.classList.remove('bg-blue-100', 'text-blue-800');
450
+ }
451
+ });
452
+ }
453
+
454
+ // Render notes list
455
+ function renderNotesList(notesToRender = notes) {
456
+ const notesList = document.getElementById('notes-list');
457
+ notesList.innerHTML = '';
458
+
459
+ // Sort by updated date (newest first)
460
+ const sortedNotes = [...notesToRender].sort((a, b) => b.updatedAt - a.updatedAt);
461
+
462
+ sortedNotes.forEach(note => {
463
+ const noteElement = document.createElement('div');
464
+ noteElement.className = `note-card p-3 bg-white border border-gray-200 rounded-lg cursor-pointer transition-all ${currentNoteId === note.id ? 'border-blue-500 border-2' : ''}`;
465
+ noteElement.innerHTML = `
466
+ <div class="flex justify-between items-start">
467
+ <h3 class="font-medium text-gray-800 truncate">${note.title}</h3>
468
+ <div class="flex items-center">
469
+ ${note.starred ? '<i class="fas fa-star text-yellow-500 ml-2"></i>' : '<i class="far fa-star text-gray-300 ml-2"></i>'}
470
+ </div>
471
+ </div>
472
+ <p class="text-sm text-gray-500 mt-1 line-clamp-2">${note.content.replace(/<[^>]*>/g, '').substring(0, 100)}</p>
473
+ <div class="flex flex-wrap gap-1 mt-2">
474
+ ${note.tags.map(tag => `<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-xs rounded">${tag}</span>`).join('')}
475
+ </div>
476
+ <div class="flex justify-between items-center mt-2">
477
+ <span class="text-xs text-gray-400">${formatDate(note.updatedAt)}</span>
478
+ <span class="text-xs text-blue-500">${note.connections.length} connections</span>
479
+ </div>
480
+ `;
481
+
482
+ noteElement.addEventListener('click', () => loadNote(note.id));
483
+ notesList.appendChild(noteElement);
484
+ });
485
+ }
486
+
487
+ // Format date
488
+ function formatDate(date) {
489
+ const options = { year: 'numeric', month: 'short', day: 'numeric' };
490
+ return date.toLocaleDateString(undefined, options);
491
+ }
492
+
493
+ // Load a note into the editor
494
+ function loadNote(noteId) {
495
+ const note = notes.find(n => n.id === noteId);
496
+ if (!note) return;
497
+
498
+ currentNoteId = noteId;
499
+ document.getElementById('note-title').value = note.title;
500
+ quill.root.innerHTML = note.content;
501
+
502
+ // Update tags input
503
+ const tagsInput = document.getElementById('tags-input');
504
+ tagsInput.innerHTML = '';
505
+ note.tags.forEach(tag => {
506
+ const tagElement = document.createElement('div');
507
+ tagElement.className = 'tag-chip px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full flex items-center';
508
+ tagElement.innerHTML = `
509
+ ${tag}
510
+ <button class="ml-1 text-gray-500 hover:text-gray-700" data-tag="${tag}">
511
+ <i class="fas fa-times text-xs"></i>
512
+ </button>
513
+ `;
514
+ tagsInput.insertBefore(tagElement, document.getElementById('new-tag-input'));
515
+
516
+ // Add event listener to remove tag
517
+ tagElement.querySelector('button').addEventListener('click', (e) => {
518
+ e.stopPropagation();
519
+ removeTagFromNote(noteId, tag);
520
+ });
521
+ });
522
+
523
+ // Update starred status
524
+ const starButton = document.getElementById('star-note');
525
+ if (note.starred) {
526
+ starButton.innerHTML = '<i class="fas fa-star text-yellow-500"></i>';
527
+ } else {
528
+ starButton.innerHTML = '<i class="far fa-star"></i>';
529
+ }
530
+
531
+ // Update connections list
532
+ updateConnectionsList(noteId);
533
+
534
+ // Re-render notes list to highlight current note
535
+ renderNotesList();
536
+ }
537
+
538
+ // Update connections list for a note
539
+ function updateConnectionsList(noteId) {
540
+ const note = notes.find(n => n.id === noteId);
541
+ if (!note) return;
542
+
543
+ const connectionsList = document.getElementById('connections-list');
544
+ connectionsList.innerHTML = '';
545
+
546
+ note.connections.forEach(connId => {
547
+ const connectedNote = notes.find(n => n.id === connId);
548
+ if (connectedNote) {
549
+ const connElement = document.createElement('div');
550
+ connElement.className = 'px-3 py-1 bg-blue-50 text-blue-700 text-sm rounded-full flex items-center cursor-pointer';
551
+ connElement.innerHTML = `
552
+ ${connectedNote.title}
553
+ <button class="ml-1 text-blue-400 hover:text-blue-700" data-connection="${connId}">
554
+ <i class="fas fa-times text-xs"></i>
555
+ </button>
556
+ `;
557
+ connectionsList.appendChild(connElement);
558
+
559
+ // Add event listener to remove connection
560
+ connElement.querySelector('button').addEventListener('click', (e) => {
561
+ e.stopPropagation();
562
+ removeConnection(noteId, connId);
563
+ });
564
+
565
+ // Add event listener to navigate to connected note
566
+ connElement.addEventListener('click', () => {
567
+ loadNote(connId);
568
+ });
569
+ }
570
+ });
571
+
572
+ // Add "Add Connection" button if there are possible connections
573
+ const possibleConnections = notes.filter(n => n.id !== noteId && !note.connections.includes(n.id));
574
+ if (possibleConnections.length > 0) {
575
+ const addConnElement = document.createElement('div');
576
+ addConnElement.className = 'px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full flex items-center cursor-pointer';
577
+ addConnElement.innerHTML = `
578
+ <i class="fas fa-plus mr-1"></i> Add Connection
579
+ `;
580
+ connectionsList.appendChild(addConnElement);
581
+
582
+ addConnElement.addEventListener('click', () => {
583
+ showConnectionModal(noteId);
584
+ });
585
+ }
586
+ }
587
+
588
+ // Show modal to add connections
589
+ function showConnectionModal(noteId) {
590
+ // In a real app, this would be a proper modal
591
+ // For this demo, we'll just connect to a random note
592
+ const note = notes.find(n => n.id === noteId);
593
+ if (!note) return;
594
+
595
+ const possibleConnections = notes.filter(n => n.id !== noteId && !note.connections.includes(n.id));
596
+ if (possibleConnections.length > 0) {
597
+ const randomConn = possibleConnections[Math.floor(Math.random() * possibleConnections.length)];
598
+ addConnection(noteId, randomConn.id);
599
+ alert(`Connected to: ${randomConn.title}`);
600
+ }
601
+ }
602
+
603
+ // Add a connection between notes
604
+ function addConnection(noteId1, noteId2) {
605
+ const note1 = notes.find(n => n.id === noteId1);
606
+ const note2 = notes.find(n => n.id === noteId2);
607
+
608
+ if (note1 && note2) {
609
+ if (!note1.connections.includes(noteId2)) {
610
+ note1.connections.push(noteId2);
611
+ }
612
+ if (!note2.connections.includes(noteId1)) {
613
+ note2.connections.push(noteId1);
614
+ }
615
+
616
+ if (currentNoteId === noteId1) {
617
+ updateConnectionsList(noteId1);
618
+ }
619
+
620
+ renderNotesList();
621
+ }
622
+ }
623
+
624
+ // Remove a connection between notes
625
+ function removeConnection(noteId1, noteId2) {
626
+ const note1 = notes.find(n => n.id === noteId1);
627
+ const note2 = notes.find(n => n.id === noteId2);
628
+
629
+ if (note1 && note2) {
630
+ note1.connections = note1.connections.filter(id => id !== noteId2);
631
+ note2.connections = note2.connections.filter(id => id !== noteId1);
632
+
633
+ if (currentNoteId === noteId1) {
634
+ updateConnectionsList(noteId1);
635
+ }
636
+
637
+ renderNotesList();
638
+ }
639
+ }
640
+
641
+ // Remove tag from note
642
+ function removeTagFromNote(noteId, tag) {
643
+ const note = notes.find(n => n.id === noteId);
644
+ if (note) {
645
+ note.tags = note.tags.filter(t => t !== tag);
646
+ extractTags();
647
+
648
+ if (currentNoteId === noteId) {
649
+ loadNote(noteId);
650
+ }
651
+ }
652
+ }
653
+
654
+ // Create a new note
655
+ function createNewNote() {
656
+ const newNote = {
657
+ id: Date.now().toString(),
658
+ title: 'Untitled Note',
659
+ content: '',
660
+ tags: [],
661
+ starred: false,
662
+ createdAt: new Date(),
663
+ updatedAt: new Date(),
664
+ connections: []
665
+ };
666
+
667
+ notes.unshift(newNote);
668
+ extractTags();
669
+ renderNotesList();
670
+ loadNote(newNote.id);
671
+
672
+ // Focus on title input
673
+ document.getElementById('note-title').focus();
674
+ }
675
+
676
+ // Save current note
677
+ function saveCurrentNote() {
678
+ if (!currentNoteId) return;
679
+
680
+ const note = notes.find(n => n.id === currentNoteId);
681
+ if (note) {
682
+ note.title = document.getElementById('note-title').value;
683
+ note.content = quill.root.innerHTML;
684
+ note.updatedAt = new Date();
685
+
686
+ // Get tags from tags input
687
+ const tagElements = document.querySelectorAll('#tags-input .tag-chip');
688
+ note.tags = Array.from(tagElements).map(el => el.textContent.trim());
689
+
690
+ renderNotesList();
691
+ }
692
+ }
693
+
694
+ // Delete current note
695
+ function deleteCurrentNote() {
696
+ if (!currentNoteId) return;
697
+
698
+ if (confirm('Are you sure you want to delete this note?')) {
699
+ // Remove this note from other notes' connections
700
+ notes.forEach(note => {
701
+ note.connections = note.connections.filter(connId => connId !== currentNoteId);
702
+ });
703
+
704
+ // Remove the note itself
705
+ notes = notes.filter(note => note.id !== currentNoteId);
706
+
707
+ currentNoteId = null;
708
+ extractTags();
709
+ renderNotesList();
710
+
711
+ // Clear editor
712
+ document.getElementById('note-title').value = '';
713
+ quill.root.innerHTML = '';
714
+ document.getElementById('tags-input').innerHTML = '';
715
+ document.getElementById('connections-list').innerHTML = '';
716
+ document.getElementById('star-note').innerHTML = '<i class="far fa-star"></i>';
717
+ }
718
+ }
719
+
720
+ // Toggle star status of current note
721
+ function toggleStarNote() {
722
+ if (!currentNoteId) return;
723
+
724
+ const note = notes.find(n => n.id === currentNoteId);
725
+ if (note) {
726
+ note.starred = !note.starred;
727
+
728
+ const starButton = document.getElementById('star-note');
729
+ if (note.starred) {
730
+ starButton.innerHTML = '<i class="fas fa-star text-yellow-500"></i>';
731
+ } else {
732
+ starButton.innerHTML = '<i class="far fa-star"></i>';
733
+ }
734
+
735
+ renderNotesList();
736
+ }
737
+ }
738
+
739
+ // Add tag to current note
740
+ function addTagToCurrentNote(tag) {
741
+ if (!currentNoteId || !tag) return;
742
+
743
+ const note = notes.find(n => n.id === currentNoteId);
744
+ if (note && !note.tags.includes(tag)) {
745
+ note.tags.push(tag);
746
+ extractTags();
747
+ loadNote(currentNoteId);
748
+ }
749
+ }
750
+
751
+ // Visualize knowledge graph
752
+ function visualizeKnowledgeGraph() {
753
+ if (!currentNoteId) {
754
+ visualizeFullGraph();
755
+ return;
756
+ }
757
+
758
+ // Show visualization view
759
+ document.getElementById('editor-view').classList.add('hidden');
760
+ document.getElementById('visualization-view').classList.remove('hidden');
761
+
762
+ // Clear existing elements
763
+ cy.elements().remove();
764
+
765
+ // Add current note as center node
766
+ const currentNote = notes.find(n => n.id === currentNoteId);
767
+ if (!currentNote) return;
768
+
769
+ cy.add({
770
+ group: 'nodes',
771
+ data: {
772
+ id: currentNote.id,
773
+ label: currentNote.title,
774
+ type: 'current'
775
+ }
776
+ });
777
+
778
+ // Add connected notes
779
+ currentNote.connections.forEach(connId => {
780
+ const connectedNote = notes.find(n => n.id === connId);
781
+ if (connectedNote) {
782
+ cy.add({
783
+ group: 'nodes',
784
+ data: {
785
+ id: connectedNote.id,
786
+ label: connectedNote.title,
787
+ type: 'connected'
788
+ }
789
+ });
790
+
791
+ cy.add({
792
+ group: 'edges',
793
+ data: {
794
+ id: `${currentNote.id}-${connectedNote.id}`,
795
+ source: currentNote.id,
796
+ target: connectedNote.id,
797
+ type: 'strong'
798
+ }
799
+ });
800
+
801
+ // Add second-level connections
802
+ connectedNote.connections.forEach(secondConnId => {
803
+ if (secondConnId !== currentNote.id && !currentNote.connections.includes(secondConnId)) {
804
+ const secondConnectedNote = notes.find(n => n.id === secondConnId);
805
+ if (secondConnectedNote) {
806
+ // Check if node already exists
807
+ if (!cy.$id(secondConnectedNote.id).length) {
808
+ cy.add({
809
+ group: 'nodes',
810
+ data: {
811
+ id: secondConnectedNote.id,
812
+ label: secondConnectedNote.title,
813
+ type: 'other'
814
+ }
815
+ });
816
+ }
817
+
818
+ // Check if edge already exists
819
+ if (!cy.$id(`${connectedNote.id}-${secondConnectedNote.id}`).length) {
820
+ cy.add({
821
+ group: 'edges',
822
+ data: {
823
+ id: `${connectedNote.id}-${secondConnectedNote.id}`,
824
+ source: connectedNote.id,
825
+ target: secondConnectedNote.id
826
+ }
827
+ });
828
+ }
829
+ }
830
+ }
831
+ });
832
+ }
833
+ });
834
+
835
+ // Apply layout
836
+ cy.layout({ name: 'cose-bilkent' }).run();
837
+ }
838
+
839
+ // Visualize full knowledge graph
840
+ function visualizeFullGraph() {
841
+ // Show visualization view
842
+ document.getElementById('editor-view').classList.add('hidden');
843
+ document.getElementById('visualization-view').classList.remove('hidden');
844
+
845
+ // Clear existing elements
846
+ cy.elements().remove();
847
+
848
+ // Add all notes as nodes
849
+ notes.forEach(note => {
850
+ cy.add({
851
+ group: 'nodes',
852
+ data: {
853
+ id: note.id,
854
+ label: note.title,
855
+ type: note.id === currentNoteId ? 'current' : 'other'
856
+ }
857
+ });
858
+ });
859
+
860
+ // Add all connections as edges
861
+ notes.forEach(note => {
862
+ note.connections.forEach(connId => {
863
+ // Only add edge once (avoid duplicates)
864
+ if (note.id < connId) {
865
+ cy.add({
866
+ group: 'edges',
867
+ data: {
868
+ id: `${note.id}-${connId}`,
869
+ source: note.id,
870
+ target: connId,
871
+ type: note.id === currentNoteId || connId === currentNoteId ? 'strong' : 'normal'
872
+ }
873
+ });
874
+ }
875
+ });
876
+ });
877
+
878
+ // Apply layout
879
+ cy.layout({ name: 'cose-bilkent' }).run();
880
+ }
881
+
882
+ // Close visualization view
883
+ function closeVisualization() {
884
+ document.getElementById('editor-view').classList.remove('hidden');
885
+ document.getElementById('visualization-view').classList.add('hidden');
886
+ }
887
+
888
+ // Show AI suggestions
889
+ function showAISuggestions() {
890
+ document.getElementById('ai-panel').classList.remove('hidden');
891
+ }
892
+
893
+ // Close AI suggestions
894
+ function closeAISuggestions() {
895
+ document.getElementById('ai-panel').classList.add('hidden');
896
+ }
897
+
898
+ // Search notes
899
+ function searchNotes(query) {
900
+ if (!query) {
901
+ renderNotesList();
902
+ return;
903
+ }
904
+
905
+ const lowerQuery = query.toLowerCase();
906
+ const filteredNotes = notes.filter(note => {
907
+ return note.title.toLowerCase().includes(lowerQuery) ||
908
+ note.content.toLowerCase().includes(lowerQuery) ||
909
+ note.tags.some(tag => tag.toLowerCase().includes(lowerQuery));
910
+ });
911
+
912
+ renderNotesList(filteredNotes);
913
+
914
+ // Highlight search terms in note cards
915
+ document.querySelectorAll('.note-card').forEach(card => {
916
+ const title = card.querySelector('h3');
917
+ const content = card.querySelector('p');
918
+
919
+ if (title && content) {
920
+ const originalTitle = title.textContent;
921
+ const originalContent = content.textContent;
922
+
923
+ // Remove previous highlights
924
+ title.innerHTML = originalTitle;
925
+ content.innerHTML = originalContent;
926
+
927
+ // Add new highlights
928
+ if (lowerQuery) {
929
+ const regex = new RegExp(lowerQuery, 'gi');
930
+
931
+ title.innerHTML = originalTitle.replace(regex, match =>
932
+ `<span class="search-highlight">${match}</span>`
933
+ );
934
+
935
+ content.innerHTML = originalContent.replace(regex, match =>
936
+ `<span class="search-highlight">${match}</span>`
937
+ );
938
+ }
939
+ }
940
+ });
941
+ }
942
+
943
+ // Initialize text embedding (simulated for this demo)
944
+ async function analyzeTextEmbedding() {
945
+ if (!currentNoteId) return;
946
+
947
+ const note = notes.find(n => n.id === currentNoteId);
948
+ if (!note) return;
949
+
950
+ // In a real app, this would use Universal Sentence Encoder or similar
951
+ alert(`Analyzing text embeddings for: ${note.title}\n\nThis would generate vector representations of the text for semantic search and connection suggestions.`);
952
+
953
+ // Simulate finding similar notes based on content
954
+ const similarNotes = findSimilarNotes(note);
955
+ if (similarNotes.length > 0) {
956
+ const similarList = similarNotes.map(n => `- ${n.title}`).join('\n');
957
+ alert(`Potential similar notes based on content:\n${similarList}`);
958
+ }
959
+ }
960
+
961
+ // Find similar notes (simulated semantic similarity)
962
+ function findSimilarNotes(note) {
963
+ // This is a simplified simulation - real app would use vector similarity
964
+ const keywords = extractKeywords(note.content);
965
+ if (keywords.length === 0) return [];
966
+
967
+ return notes.filter(n => {
968
+ if (n.id === note.id) return false;
969
+
970
+ const otherKeywords = extractKeywords(n.content);
971
+ return keywords.some(kw => otherKeywords.includes(kw));
972
+ }).slice(0, 3); // Return top 3
973
+ }
974
+
975
+ // Extract keywords from content (simplified)
976
+ function extractKeywords(content) {
977
+ // Remove HTML tags
978
+ const text = content.replace(/<[^>]*>/g, '');
979
+
980
+ // Simple keyword extraction - real app would use NLP techniques
981
+ const commonWords = ['the', 'and', 'that', 'have', 'for', 'not', 'with', 'you', 'this', 'but'];
982
+ const words = text.toLowerCase().split(/\s+/);
983
+
984
+ return [...new Set(words.filter(word =>
985
+ word.length > 3 &&
986
+ !commonWords.includes(word) &&
987
+ /^[a-z]+$/.test(word)
988
+ ))].slice(0, 5); // Return top 5 unique keywords
989
+ }
990
+
991
+ // Event listeners
992
+ document.getElementById('new-note-btn').addEventListener('click', createNewNote);
993
+ document.getElementById('star-note').addEventListener('click', toggleStarNote);
994
+ document.getElementById('delete-note').addEventListener('click', deleteCurrentNote);
995
+ document.getElementById('visualize-btn').addEventListener('click', visualizeKnowledgeGraph);
996
+ document.getElementById('ai-suggest-btn').addEventListener('click', showAISuggestions);
997
+ document.getElementById('embedding-btn').addEventListener('click', analyzeTextEmbedding);
998
+ document.getElementById('close-visualization').addEventListener('click', closeVisualization);
999
+ document.getElementById('close-ai').addEventListener('click', closeAISuggestions);
1000
+ document.getElementById('search-input').addEventListener('input', (e) => searchNotes(e.target.value));
1001
+
1002
+ // Layout buttons
1003
+ document.getElementById('layout-force').addEventListener('click', () => {
1004
+ cy.layout({ name: 'cose-bilkent' }).run();
1005
+ });
1006
+
1007
+ document.getElementById('layout-hierarchical').addEventListener('click', () => {
1008
+ cy.layout({ name: 'dagre' }).run();
1009
+ });
1010
+
1011
+ document.getElementById('layout-concentric').addEventListener('click', () => {
1012
+ cy.layout({ name: 'concentric' }).run();
1013
+ });
1014
+
1015
+ // Map view buttons
1016
+ document.querySelectorAll('.map-view-btn').forEach(btn => {
1017
+ btn.addEventListener('click', () => {
1018
+ const view = btn.dataset.view;
1019
+ if (view === 'full') {
1020
+ visualizeFullGraph();
1021
+ } else {
1022
+ visualizeKnowledgeGraph();
1023
+ }
1024
+ });
1025
+ });
1026
+
1027
+ // Filter buttons
1028
+ document.querySelectorAll('.filter-btn').forEach(btn => {
1029
+ btn.addEventListener('click', () => {
1030
+ const filter = btn.dataset.filter;
1031
+ let filteredNotes = [];
1032
+
1033
+ if (filter === 'recent') {
1034
+ filteredNotes = [...notes].sort((a, b) => b.updatedAt - a.updatedAt);
1035
+ } else if (filter === 'starred') {
1036
+ filteredNotes = notes.filter(note => note.starred);
1037
+ } else if (filter === 'connected') {
1038
+ filteredNotes = [...notes].sort((a, b) => b.connections.length - a.connections.length);
1039
+ }
1040
+
1041
+ renderNotesList(filteredNotes);
1042
+ });
1043
+ });
1044
+
1045
+ // Tag input
1046
+ document.getElementById('new-tag-input').addEventListener('keydown', (e) => {
1047
+ if (e.key === 'Enter' || e.key === ',') {
1048
+ e.preventDefault();
1049
+ const tag = e.target.value.trim();
1050
+ if (tag) {
1051
+ addTagToCurrentNote(tag);
1052
+ e.target.value = '';
1053
+ }
1054
+ }
1055
+ });
1056
+
1057
+ // Auto-save when leaving editor
1058
+ quill.on('text-change', () => {
1059
+ if (currentNoteId) {
1060
+ saveCurrentNote();
1061
+ }
1062
+ });
1063
+
1064
+ document.getElementById('note-title').addEventListener('blur', saveCurrentNote);
1065
+
1066
+ // Initialize the app
1067
+ extractTags();
1068
+ renderNotesList();
1069
+
1070
+ // Load first note by default for demo
1071
+ if (notes.length > 0) {
1072
+ loadNote(notes[0].id);
1073
+ }
1074
+ });
1075
+ </script>
1076
+ <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=shri210620/ai-notes" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1077
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ i want to create note aap with tody advanced feature that tody not aap used and but searching my data should be easy and how can i use text embeding and visulization by map for text and their connection use neo4j for better and more focus note app that how it can give feture to use thir note data usful or present in such way so that it can be useful or may be more focused ui on mind map connection poision of data to other data notes these thing you shuld more foucus and build adavanced not aap