-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtempllmos-basic.html
694 lines (629 loc) · 78.5 KB
/
templlmos-basic.html
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
<html>
<head>
<style id="osbase_general-styles">
body {
background-color: #FFF4DF;
overflow: hidden;
margin: 0;
padding: 0;
}
</style>
<script id="osbase_global-objects">
(() => {
window.os = {};
})()
</script>
<script id="osbase_filesystem">
(() => {
(function() {
if (!window.os) {
window.os = {};
}
if (!window.os.fs) {
window.os.fs = {};
}
const storageKey = 'filesystem';
let filesystem = JSON.parse(localStorage.getItem(storageKey)) || {
'about.txt': 'Welcome to TempLLMOS'
};
/**
* Saves the filesystem object to local storage.
* @function
*/
window.os.fs.sync = function() {
localStorage.setItem(storageKey, JSON.stringify(filesystem));
};
/**
* Processes and returns a path, handling `..`, `//`, and `/`.
* @param {string} path - The path to process.
* @returns {string|null} - The processed path or null if invalid.
*/
window.os.fs.getPath = function(path) {
const parts = path.split('/').filter(Boolean);
const stack = [];
for (const part of parts) {
if (part === '..') {
if (stack.length > 0) {
stack.pop();
} else {
return null;
}
} else {
stack.push(part);
}
}
return '/' + stack.join('/');
};
/**
* Checks if the path is valid.
* @param {string} path - The path to check.
* @returns {boolean} - True if valid, false otherwise.
*/
window.os.fs.isValidPath = function(path) {
return typeof path === 'string' && path.startsWith('/');
};
/**
* Returns a list of entries in the filesystem object at the given path.
* @param {string} path - The path to list entries from.
* @returns {Array} - An array of entries.
*/
window.os.fs.ls = function(path) {
const processedPath = this.getPath(path);
if (!this.isValidPath(processedPath)) return [];
const parts = processedPath.split('/').filter(Boolean);
let current = filesystem;
for (const part of parts) {
if (current[part]) {
current = current[part];
} else {
return [];
}
}
return Object.keys(current);
};
/**
* Creates an empty object at the given path.
* @param {string} path - The path to create the directory.
*/
window.os.fs.mkdir = function(path) {
const processedPath = this.getPath(path);
if (!this.isValidPath(processedPath)) return;
const parts = processedPath.split('/').filter(Boolean);
let current = filesystem;
for (const part of parts) {
if (!current[part]) {
current[part] = {};
}
current = current[part];
}
this.sync();
};
/**
* Removes the object at the given path.
* @param {string} path - The path to remove the object from.
*/
window.os.fs.rm = function(path) {
const processedPath = this.getPath(path);
if (!this.isValidPath(processedPath)) return;
const parts = processedPath.split('/').filter(Boolean);
let current = filesystem;
for (let i = 0; i < parts.length - 1; i++) {
if (current[parts[i]]) {
current = current[parts[i]];
} else {
return;
}
}
delete current[parts[parts.length - 1]];
this.sync();
};
/**
* Writes the content to an entry in the filesystem object at the given path.
* @param {string} path - The path to write to.
* @param {string} content - The content to write.
*/
window.os.fs.write = function(path, content) {
const processedPath = this.getPath(path);
if (!this.isValidPath(processedPath)) return;
const parts = processedPath.split('/').filter(Boolean);
let current = filesystem;
for (let i = 0; i < parts.length - 1; i++) {
if (!current[parts[i]]) {
current[parts[i]] = {};
}
current = current[parts[i]];
}
current[parts[parts.length - 1]] = content;
this.sync();
};
/**
* Reads an entry split by `\n` in the filesystem object at the given path.
* @param {string} path - The path to read from.
* @returns {string|null} - The content of the file or null if not found.
*/
window.os.fs.read = function(path) {
const processedPath = this.getPath(path);
if (!this.isValidPath(processedPath)) return null;
const parts = processedPath.split('/').filter(Boolean);
let current = filesystem;
for (const part of parts) {
if (current[part]) {
current = current[part];
} else {
return null;
}
}
return current;
};
window.os.fs.sync();
})();
})()
</script>
<style id="basic-registry_registry-close-button">
.close-button {
position: absolute;
top: 0;
right: 0;
padding: 5px;
cursor: pointer;
color: red;
}
</style>
<script id="basic-registry_registry">
(() => {
/**
* Registers a new application in the OS with a title, emoji, and a callback function.
* The callback function should return a DOM element that will be displayed in the body.
* A close button will be added to allow removal of the application from the body.
*
* @param {string} title - The title of the application.
* @param {string} emoji - The emoji representing the application.
* @param {function} callback - A function that returns a DOM element to be displayed.
*/
window.os = window.os || {};
window.os.registerApplication = function(title, emoji, callback) {
const appElement = callback();
appElement.style.position = 'relative';
const closeButton = document.createElement('span');
closeButton.className = 'close-button';
closeButton.textContent = '❌';
closeButton.addEventListener('click', function() {
document.body.removeChild(appElement);
});
appElement.appendChild(closeButton);
document.body.appendChild(appElement);
};
})()
</script>
<style id="presenter_presenter-styles">
.presenter {
width: 100%;
height: 100%;
background-color: white;
color: black;
font-family: monospace;
overflow: hidden;
display: flex;
flex-direction: column;
}
.presenter .header {
display: flex;
flex-direction: row;
height: 20px;
padding: 10px;
align-items: center;
justify-content: space-between;
background-color: yellow;
color: black;
}
.presenter .header img {
height: 100%;
}
.presenter .header p {
margin: 0;
}
.presenter .content {
display: flex;
position: relative;
flex: 1;
padding: 10px;
overflow: hidden;
background-color: white;
}
.presenter .footer {
display: flex;
flex-direction: row-reverse;
height: 20px;
padding: 10px;
align-items: center;
justify-content: space-between;
}
.presenter .slide {
position: absolute;
background-color: white;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
align-content: center;
}
.slide.dark {
background-color: black;
color: white;
}
.slide {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.slide h1 {
font-size: 5em;
}
.slide h2 {
font-size: 3em;
}
.slide h3 {
font-size: 2em;
}
.slide pre {
white-space: pre-wrap;
background-color: #201e30;
color: white;
padding: 5px;
margin: 0 auto;
max-width: 720px;
text-align: left;
}
</style>
<style id="terminal_terminal-style">
.terminal {
width: 100%;
height: 100%;
background-color: black;
color: white;
font-family: monospace;
overflow: hidden;
display: flex;
flex-direction: column;
}
.terminal-output {
flex: 1;
overflow-y: auto;
padding: 10px;
display: flex;
flex-direction: column-reverse;
}
.terminal-line {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
overflow-wrap: break-word; /* 'text-wrap' is not a valid CSS property */
}
.terminal-input {
display: flex;
flex-direction: row;
}
.terminal-input-text {
background-color: transparent;
border: none;
color: white;
font-family: monospace;
font-size: 16px;
flex: 1;
outline: none;
}
</style>
</head>
<body>
<span id="osbase_logo">
<svg height="100" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);" viewbox="0 0 100 100" width="100">
<g fill="none" stroke="black" stroke-width="2">
<polygon points="50,10 70,30 30,30">
</polygon>
<!-- Temple roof -->
<rect height="40" width="30" x="35" y="30">
</rect>
<!-- Temple body -->
<line x1="50" x2="50" y1="70" y2="90">
</line>
<!-- Temple door -->
</g>
<text fill="black" font-family="Arial" font-size="8" text-anchor="middle" x="50" y="95">
TempLLM OS
</text>
</svg>
</span>
<script id="osbase_fullscreen">
(() => {
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
const span = document.createElement('span');
span.textContent = '⌞ ⌝';
span.style.position = 'fixed';
span.style.bottom = '20px';
span.style.left = '50%';
span.style.transform = 'translateX(-50%)';
span.style.zIndex = '999999';
span.style.cursor = 'pointer';
span.onclick = toggleFullScreen;
document.body.appendChild(span);
})()
</script>
<script id="osbase_outputs">
(() => {
const asciiArt = `
TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT
T:::::::::::::::::::::T:::::::::::::T
T:::::::::::::::::::::T:::::::::::::T
T:::::TT:::::::TT:::::T:::::::::::::T
TTTTTT T:::::T TTTTTT:::::::::::::T
T:::::T T:::::::::::::T
T:::::T T:::::::::::::T
T:::::T T:::::::::::::T
T:::::T T:::::::::::::T
TTTTTTT TTTTTTTTTTTTTTT
`;
window.os.fs.write('/logo.txt', asciiArt);
})()
</script>
<script id="presenter_presenter-logic">
(() => {
function getSlideDOMElement(slides) {
const result = [];
slides.forEach(item => {
const lines = item.split('\n');
const slideElement = document.createElement('div');
slideElement.className = 'slide';
lines.forEach(line => {
if (line.startsWith('.')) {
slideElement.classList.add(line.substring(1).trim());
} else {
let element;
if (line.startsWith('# ')) {
element = document.createElement('h1');
element.textContent = line.substring(2).trim();
} else if (line.startsWith('## ')) {
element = document.createElement('h2');
element.textContent = line.substring(3).trim();
} else if (line.startsWith('### ')) {
element = document.createElement('h3');
element.textContent = line.substring(4).trim();
} else if (line.startsWith('![')) {
const altText = line.match(/!\[(.*?)\]/)[1];
const src = line.match(/\((.*?)\)/)[1];
element = document.createElement('img');
element.src = src;
element.alt = altText;
} else if (line.startsWith('`')) {
element = document.createElement('pre');
element.textContent = line.substring(1, line.length - 1).trim();
} else {
element = document.createElement('p');
element.textContent = line.trim();
}
slideElement.appendChild(element);
}
});
result.push(slideElement);
});
return result;
}
function getPresenterLayout() {
const presenter = document.createElement('div');
presenter.className = 'presenter';
const header = document.createElement('div');
header.className = 'header';
const headerImage = document.createElement('img');
headerImage.src = 'https://www.itdays.ro/public/images/logo-gri.png';
header.appendChild(headerImage);
const headerText = document.createElement('p');
headerText.textContent = 'INNOVATION, PROGRAMMING AND TECHNOLOGIES';
header.appendChild(headerText);
presenter.appendChild(header);
const content = document.createElement('div');
content.className = 'content';
presenter.appendChild(content);
const footer = document.createElement('div');
footer.className = 'footer';
const footerImage = document.createElement('img');
footerImage.src = 'https://ascentcore.com/wp-content/uploads/2023/08/AC-Logo.svg';
footer.appendChild(footerImage);
presenter.appendChild(footer);
return presenter;
}
function readFileContentSync(path) {
if (window.os.fs.isValidPath(path)) {
return window.os.fs.read(path);
}
return null;
}
window.apps = window.apps || {};
window.apps.presenter = function(_, path = '/itdays.xmd') {
const rootElement = getPresenterLayout();
const contentElement = rootElement.querySelector('.content');
const fileContent = readFileContentSync(path);
const slides = getSlideDOMElement(fileContent.split('---'));
slides.forEach(slide => contentElement.appendChild(slide));
let currentIndex = 0;
function showSlide(index) {
const allSlides = contentElement.children;
for (let i = 0; i < allSlides.length; i++) {
allSlides[i].style.display = (i === index) ? 'block' : 'none';
}
}
showSlide(currentIndex);
window.addEventListener('keydown', function(event) {
if (event.key === 'ArrowRight') {
currentIndex = Math.min(currentIndex + 1, contentElement.children.length - 1);
showSlide(currentIndex);
} else if (event.key === 'ArrowLeft') {
currentIndex = Math.max(currentIndex - 1, 0);
showSlide(currentIndex);
}
});
return rootElement;
};
window.os.registerApplication('Presenter', '📽️', window.apps.presenter);
})()
</script>
<script id="terminal_terminal-runtime">
(() => {
/**
* Removes all elements with the class name 'terminal-line' from the document.
* @function
*/
function clear() {
const terminalLines = document.querySelectorAll('.terminal-line');
terminalLines.forEach(line => line.remove());
}
let currentPath = '/';
/**
* Changes the current path to the specified path.
* @param {string} path - The new path to set as current.
*/
function cd(path) {
currentPath = path;
}
/**
* Returns the current working directory.
* @returns {string} - The current path.
*/
function pwd() {
return currentPath;
}
const bin = {
sync: window.os.fs.sync,
getPath: window.os.fs.getPath,
isValidPath: window.os.fs.isValidPath,
ls: window.os.fs.ls,
mkdir: window.os.fs.mkdir,
rm: window.os.fs.rm,
write: window.os.fs.write,
read: window.os.fs.read,
cd: cd,
pwd: pwd
};
/**
* Executes a command with the given string input, processing the command and its arguments.
* @param {string} input - The command input string to execute.
* @returns {any} - The result of the command execution or an error message.
*/
function execute(input) {
const args = input.match(/(?:[^\s"]+|"[^"]*")+/g).map(arg => arg.replace(/(^"|"$)/g, ''));
let path = currentPath;
const command = `bin.${args[0]}`;
if (args[1]) {
path = args[1].startsWith('/') ? window.os.fs.getPath(args[1]) : window.os.fs.getPath(`${currentPath}/${args[1]}`);
}
try {
return eval(`${command}("${path}", ${args.slice(2).map(arg => `"${arg}"`).join(', ')})`);
} catch (error) {
return error.message;
}
}
window.apps = window.apps || {};
/**
* Creates a terminal interface with output and input elements.
* @returns {HTMLElement} - The terminal root element.
*/
window.apps.terminal = function() {
const terminal = document.createElement('div');
terminal.className = 'terminal';
const terminalOutput = document.createElement('div');
terminalOutput.className = 'terminal-output';
terminal.appendChild(terminalOutput);
const welcomeMessage = document.createElement('pre');
welcomeMessage.className = 'terminal-line';
welcomeMessage.textContent = 'Welcome to TempLLM OS';
terminalOutput.appendChild(welcomeMessage);
const terminalInput = document.createElement('div');
terminalInput.className = 'terminal-input';
terminal.appendChild(terminalInput);
const prefix = document.createElement('span');
prefix.className = 'prefix';
prefix.textContent = '>';
terminalInput.appendChild(prefix);
const inputField = document.createElement('input');
inputField.className = 'terminal-input-text';
terminalInput.appendChild(inputField);
/**
* Outputs a value to the terminal with a specified color.
* @param {string|Array} value - The value to output.
* @param {string} [color='white'] - The color of the output text.
*/
function output(value, color = 'white') {
if (Array.isArray(value)) {
value.forEach(item => {
const pre = document.createElement('pre');
pre.className = 'terminal-line';
pre.style.color = color;
pre.textContent = item;
terminalOutput.prepend(pre);
});
} else {
const pre = document.createElement('pre');
pre.className = 'terminal-line';
pre.style.color = color;
pre.textContent = value;
terminalOutput.prepend(pre);
}
}
inputField.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
const currentTime = new Date().toLocaleTimeString();
const inputValue = inputField.value;
output(`[${currentTime}] ${inputValue}`, 'yellow');
const result = execute(inputValue);
output(result);
inputField.value = '';
inputField.focus();
prefix.textContent = pwd() + '>';
}
});
return terminal;
};
window.os.registerApplication('Terminal', '🖥️', window.apps.terminal);
})()
</script>
<script>
window.os.fs.write('/sources/os/general-styles_0.md', '## osbase_general-styles_0\n### API\n\n<pre style="text-wrap: wrap">\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ncss to apply a #FFF4DF background color, hidden overflow, 0 margin and padding to the body\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\nbody {\n background-color: #FFF4DF;\n overflow: hidden;\n margin: 0;\n padding: 0;\n}\n\n</pre>\n')
window.os.fs.write('/sources/os/logo_0.md', '## osbase_logo_0\n### API\n\n<pre style="text-wrap: wrap">\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\nSVG dom element, fixed centered on the screen, with a width of 100px and height of 100px of a line art temple logo and the text that says "TempLLM OS"\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n<svg width="100" height="100" viewBox="0 0 100 100" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);">\n <g fill="none" stroke="black" stroke-width="2">\n <polygon points="50,10 70,30 30,30" /> <!-- Temple roof -->\n <rect x="35" y="30" width="30" height="40" /> <!-- Temple body -->\n <line x1="50" y1="70" x2="50" y2="90" /> <!-- Temple door -->\n </g>\n <text x="50" y="95" font-family="Arial" font-size="8" text-anchor="middle" fill="black">TempLLM OS</text>\n</svg>\n\n</pre>\n')
window.os.fs.write('/sources/os/global-objects_0.md', '## osbase_global-objects_0\n### API\n\n<pre style="text-wrap: wrap">\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\nCreate a new empty object `os` on the window global object\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\nwindow.os = {};\n\n</pre>\n')
window.os.fs.write('/sources/os/fullscreen_0.md', '## osbase_fullscreen_0\n### API\n\n<pre style="text-wrap: wrap">\nfunction toggleFullScreen() { ... }\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\nCreate a new function `toggleFullScreen` that toggles the fullscreen mode of the browser\nadd a span position fixed bottom centered z-index 999999 with a text that says "⌞ ⌝" that when clicked calls the `toggleFullScreen` function\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\nfunction toggleFullScreen() {\n if (!document.fullscreenElement) {\n document.documentElement.requestFullscreen();\n } else {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n }\n }\n}\n\nconst span = document.createElement("span");\nspan.textContent = "⌞ ⌝";\nspan.style.position = "fixed";\nspan.style.bottom = "20px";\nspan.style.left = "50%";\nspan.style.transform = "translateX(-50%)";\nspan.style.zIndex = "999999";\nspan.style.cursor = "pointer";\nspan.onclick = toggleFullScreen;\n\ndocument.body.appendChild(span);\n\n</pre>\n')
window.os.fs.write('/sources/filesystem/filesystem_0.md', '## osbase_filesystem_0\n### API\n\n<pre style="text-wrap: wrap">\n /**\n * Saves the filesystem object to local storage.\n * @function\n */\nwindow.os.fs.sync = function() { ... }\n /**\n * Processes and returns a path, handling `..`, `//`, and `/`.\n * @param {string} path - The path to process.\n * @returns {string|null} - The processed path or null if invalid.\n */\nwindow.os.fs.getPath = function(path) { ... }\n /**\n * Checks if the path is valid.\n * @param {string} path - The path to check.\n * @returns {boolean} - True if valid, false otherwise.\n */\nwindow.os.fs.isValidPath = function(path) { ... }\n /**\n * Returns a list of entries in the filesystem object at the given path.\n * @param {string} path - The path to list entries from.\n * @returns {Array} - An array of entries.\n */\nwindow.os.fs.ls = function(path) { ... }\n /**\n * Creates an empty object at the given path.\n * @param {string} path - The path to create the directory.\n */\nwindow.os.fs.mkdir = function(path) { ... }\n /**\n * Removes the object at the given path.\n * @param {string} path - The path to remove the object from.\n */\nwindow.os.fs.rm = function(path) { ... }\n /**\n * Writes the content to an entry in the filesystem object at the given path.\n * @param {string} path - The path to write to.\n * @param {string} content - The content to write.\n */\nwindow.os.fs.write = function(path, content) { ... }\n /**\n * Reads an entry split by `\n` in the filesystem object at the given path.\n * @param {string} path - The path to read from.\n * @returns {string|null} - The content of the file or null if not found.\n */\nwindow.os.fs.read = function(path) { ... }\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\nLoad the `filesystem` object from the local storage as json, if it does not exist create an empty object with a property `about.txt` with the content `Welcome to TempLLMOS`\nDefine the following functions on the window.os.fs object:\n `sync` - save the filesystem object to the local storage that will be called by the other functions that modify the filesystem object\n `getPath` - process and return a path by taking into account `..`, `//` and `/`. return null if the path is invalid\n `isValidPath` - checks if the path is valid\n `ls` - returns a list of entries in the filesystem object at the given path\n `mkdir` - creates an empty object at the given path\n `rm` - removes the object at the given path\n `write` - writes the content to an entry in the filesystem object at the given path\n `read` - reads an entry split by `\n` in the filesystem object at the given path, last element in path is the file name\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n(function() {\n if (!window.os) {\n window.os = {};\n }\n if (!window.os.fs) {\n window.os.fs = {};\n }\n\n const storageKey = "filesystem";\n let filesystem = JSON.parse(localStorage.getItem(storageKey)) || {\n "about.txt": "Welcome to TempLLMOS"\n };\n\n /**\n * Saves the filesystem object to local storage.\n * @function\n */\n window.os.fs.sync = function() {\n localStorage.setItem(storageKey, JSON.stringify(filesystem));\n };\n\n /**\n * Processes and returns a path, handling `..`, `//`, and `/`.\n * @param {string} path - The path to process.\n * @returns {string|null} - The processed path or null if invalid.\n */\n window.os.fs.getPath = function(path) {\n const parts = path.split("/").filter(Boolean);\n const stack = [];\n for (const part of parts) {\n if (part === "..") {\n if (stack.length > 0) {\n stack.pop();\n } else {\n return null;\n }\n } else {\n stack.push(part);\n }\n }\n return "/" + stack.join("/");\n };\n\n /**\n * Checks if the path is valid.\n * @param {string} path - The path to check.\n * @returns {boolean} - True if valid, false otherwise.\n */\n window.os.fs.isValidPath = function(path) {\n return typeof path === "string" && path.startsWith("/");\n };\n\n /**\n * Returns a list of entries in the filesystem object at the given path.\n * @param {string} path - The path to list entries from.\n * @returns {Array} - An array of entries.\n */\n window.os.fs.ls = function(path) {\n const processedPath = this.getPath(path);\n if (!this.isValidPath(processedPath)) return [];\n const parts = processedPath.split("/").filter(Boolean);\n let current = filesystem;\n for (const part of parts) {\n if (current[part]) {\n current = current[part];\n } else {\n return [];\n }\n }\n return Object.keys(current);\n };\n\n /**\n * Creates an empty object at the given path.\n * @param {string} path - The path to create the directory.\n */\n window.os.fs.mkdir = function(path) {\n const processedPath = this.getPath(path);\n if (!this.isValidPath(processedPath)) return;\n const parts = processedPath.split("/").filter(Boolean);\n let current = filesystem;\n for (const part of parts) {\n if (!current[part]) {\n current[part] = {};\n }\n current = current[part];\n }\n this.sync();\n };\n\n /**\n * Removes the object at the given path.\n * @param {string} path - The path to remove the object from.\n */\n window.os.fs.rm = function(path) {\n const processedPath = this.getPath(path);\n if (!this.isValidPath(processedPath)) return;\n const parts = processedPath.split("/").filter(Boolean);\n let current = filesystem;\n for (let i = 0; i < parts.length - 1; i++) {\n if (current[parts[i]]) {\n current = current[parts[i]];\n } else {\n return;\n }\n }\n delete current[parts[parts.length - 1]];\n this.sync();\n };\n\n /**\n * Writes the content to an entry in the filesystem object at the given path.\n * @param {string} path - The path to write to.\n * @param {string} content - The content to write.\n */\n window.os.fs.write = function(path, content) {\n const processedPath = this.getPath(path);\n if (!this.isValidPath(processedPath)) return;\n const parts = processedPath.split("/").filter(Boolean);\n let current = filesystem;\n for (let i = 0; i < parts.length - 1; i++) {\n if (!current[parts[i]]) {\n current[parts[i]] = {};\n }\n current = current[parts[i]];\n }\n current[parts[parts.length - 1]] = content;\n this.sync();\n };\n\n /**\n * Reads an entry split by `\n` in the filesystem object at the given path.\n * @param {string} path - The path to read from.\n * @returns {string|null} - The content of the file or null if not found.\n */\n window.os.fs.read = function(path) {\n const processedPath = this.getPath(path);\n if (!this.isValidPath(processedPath)) return null;\n const parts = processedPath.split("/").filter(Boolean);\n let current = filesystem;\n for (const part of parts) {\n if (current[part]) {\n current = current[part];\n } else {\n return null;\n }\n }\n return current;\n };\n\n window.os.fs.sync();\n})();\n\n</pre>\n')
window.os.fs.write('/sources/filesystem/outputs_0.md', '## osbase_outputs_0\n### API\n\n<pre style="text-wrap: wrap">\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ncall write with the path `/logo.txt` and ascii art of text `TempLLM OS` on 10 lines\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\nconst asciiArt = `\nTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT\nT:::::::::::::::::::::T:::::::::::::T\nT:::::::::::::::::::::T:::::::::::::T\nT:::::TT:::::::TT:::::T:::::::::::::T\nTTTTTT T:::::T TTTTTT:::::::::::::T\n T:::::T T:::::::::::::T\n T:::::T T:::::::::::::T\n T:::::T T:::::::::::::T\n T:::::T T:::::::::::::T\n TTTTTTT TTTTTTTTTTTTTTT\n`;\n\nwindow.os.fs.write("/logo.txt", asciiArt);\n\n</pre>\n')
window.os.fs.write('/sources/basic_registry/registry-close-button_0.md', '## basic-registry_registry-close-button_0\n### API\n\n<pre style="text-wrap: wrap">\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\n.close-button position absolute, top 0, right 0, padding 5px, cursor pointer, color red\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n.close-button {\n position: absolute;\n top: 0;\n right: 0;\n padding: 5px;\n cursor: pointer;\n color: red;\n}\n\n</pre>\n')
window.os.fs.write('/sources/basic_registry/registry_0.md', '## basic-registry_registry_0\n### API\n\n<pre style="text-wrap: wrap">\n/**\n * Registers a new application in the OS with a title, emoji, and a callback function.\n * The callback function should return a DOM element that will be displayed in the body.\n * A close button will be added to allow removal of the application from the body.\n * \n * @param {string} title - The title of the application.\n * @param {string} emoji - The emoji representing the application.\n * @param {function} callback - A function that returns a DOM element to be displayed.\n */\nwindow.os.registerApplication = function(title, emoji, callback) { ... }\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ncreate a new function `registerApplication` on the `window.os` object and jsdoc that takes a title, emoji, callback by default having the following functionality:\n- execute the callback function and store the resulting DOM element in a variable\n- set position relative to the DOM element\n- create a new span dom element with the class .close-button and text: ❌, append it to the DOM element and add a click event listener that removes the DOM element from the body\n- append the DOM element to the body\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n/**\n * Registers a new application in the OS with a title, emoji, and a callback function.\n * The callback function should return a DOM element that will be displayed in the body.\n * A close button will be added to allow removal of the application from the body.\n * \n * @param {string} title - The title of the application.\n * @param {string} emoji - The emoji representing the application.\n * @param {function} callback - A function that returns a DOM element to be displayed.\n */\nwindow.os = window.os || {};\n\nwindow.os.registerApplication = function(title, emoji, callback) {\n const appElement = callback();\n appElement.style.position = "relative";\n\n const closeButton = document.createElement("span");\n closeButton.className = "close-button";\n closeButton.textContent = "❌";\n closeButton.addEventListener("click", function() {\n document.body.removeChild(appElement);\n });\n\n appElement.appendChild(closeButton);\n document.body.appendChild(appElement);\n};\n\n</pre>\n')
window.os.fs.write('/sources/apps_presenter/presenter-styles_0.md', '## presenter_presenter-styles_0\n### API\n\n<pre style="text-wrap: wrap">\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\n.presenter class with 100% width and height, white background, black color, monospace font-family, hidden overflow, flex display and column flex-direction\n.presenter .header class with display flex, row flex-direction, 20px height, padding 10px, align-items center and justify-content space-between, yellow background and black color text\n.presenter .header img with 100% height\n.presenter .header p with margin 0\n.presenter .content class with display flex, position realtive, flex 1, padding 10px, overflow hidden, white background\n.presenter .footer class with display flex, row-reverse flex-direction,, 20px height, padding 10px, align-items center and justify-content space-between\n.presenter .slide should have an absolute position, white background color, 100% width and height, hidden overflow, display flex and column flex-direction and align-content center\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n.presenter {\n width: 100%;\n height: 100%;\n background-color: white;\n color: black;\n font-family: monospace;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.presenter .header {\n display: flex;\n flex-direction: row;\n height: 20px;\n padding: 10px;\n align-items: center;\n justify-content: space-between;\n background-color: yellow;\n color: black;\n}\n\n.presenter .header img {\n height: 100%;\n}\n\n.presenter .header p {\n margin: 0;\n}\n\n.presenter .content {\n display: flex;\n position: relative;\n flex: 1;\n padding: 10px;\n overflow: hidden;\n background-color: white;\n}\n\n.presenter .footer {\n display: flex;\n flex-direction: row-reverse;\n height: 20px;\n padding: 10px;\n align-items: center;\n justify-content: space-between;\n}\n\n.presenter .slide {\n position: absolute;\n background-color: white;\n width: 100%;\n height: 100%;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-content: center;\n}\n\n</pre>\n')
window.os.fs.write('/sources/apps_presenter/presenter-styles_1.md', '## presenter_presenter-styles_1\n### API\n\n<pre style="text-wrap: wrap">\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\n.slide.dark with background-color black and color white\n.slide content should be centered with align-items center and justify-content center and text centered\n.slide h1 with font-size 5em\n.slide h2 with font-size 3em\n.slide h3 with font-size 2em\n.slide pre with white-space pre-wrap and background-color #201e30, white text, padding 5, margin 0 auto, max-width 720 and text-align left\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n.presenter {\n width: 100%;\n height: 100%;\n background-color: white;\n color: black;\n font-family: monospace;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.presenter .header {\n display: flex;\n flex-direction: row;\n height: 20px;\n padding: 10px;\n align-items: center;\n justify-content: space-between;\n background-color: yellow;\n color: black;\n}\n\n.presenter .header img {\n height: 100%;\n}\n\n.presenter .header p {\n margin: 0;\n}\n\n.presenter .content {\n display: flex;\n position: relative;\n flex: 1;\n padding: 10px;\n overflow: hidden;\n background-color: white;\n}\n\n.presenter .footer {\n display: flex;\n flex-direction: row-reverse;\n height: 20px;\n padding: 10px;\n align-items: center;\n justify-content: space-between;\n}\n\n.presenter .slide {\n position: absolute;\n background-color: white;\n width: 100%;\n height: 100%;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-content: center;\n}\n.slide.dark {\n background-color: black;\n color: white;\n}\n\n.slide {\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\n.slide h1 {\n font-size: 5em;\n}\n\n.slide h2 {\n font-size: 3em;\n}\n\n.slide h3 {\n font-size: 2em;\n}\n\n.slide pre {\n white-space: pre-wrap;\n background-color: #201e30;\n color: white;\n padding: 5px;\n margin: 0 auto;\n max-width: 720px;\n text-align: left;\n}\n\n</pre>\n')
window.os.fs.write('/sources/apps_presenter/presenter-logic_0.md', '## presenter_presenter-logic_0\n### API\n\n<pre style="text-wrap: wrap">\nfunction getSlideDOMElement(slides) { ... }\n const altText = line.match(/!\[(.*?)\]/)[1];\n const src = line.match(/\((.*?)\)/)[1];\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ndefine a function called getSlideDOMElement that takes an array of strings as an argument\niterate the array and for each item:\n split item by `\n`\n iterate the split result and for each line:\n if the line starts with a dot and a string append the class of the slide to the string\n create a slide div element with class slide\n generate html dom elements corresponding to the markdown syntax with headers, text, image and backtick as pre support and append them to the slide element\n append the slide element to the result array\nreturn the result array\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\nfunction getSlideDOMElement(slides) {\n const result = [];\n \n slides.forEach(item => {\n const lines = item.split("\n");\n const slideElement = document.createElement("div");\n slideElement.className = "slide";\n \n lines.forEach(line => {\n if (line.startsWith(".")) {\n slideElement.classList.add(line.substring(1).trim());\n } else {\n let element;\n if (line.startsWith("# ")) {\n element = document.createElement("h1");\n element.textContent = line.substring(2);\n } else if (line.startsWith("## ")) {\n element = document.createElement("h2");\n element.textContent = line.substring(3);\n } else if (line.startsWith("### ")) {\n element = document.createElement("h3");\n element.textContent = line.substring(4);\n } else if (line.startsWith("![")) {\n const altText = line.match(/!\[(.*?)\]/)[1];\n const src = line.match(/\((.*?)\)/)[1];\n element = document.createElement("img");\n element.src = src;\n element.alt = altText;\n } else if (line.startsWith("`")) {\n element = document.createElement("pre");\n element.textContent = line.substring(1, line.length - 1);\n } else {\n element = document.createElement("p");\n element.textContent = line;\n }\n slideElement.appendChild(element);\n }\n });\n \n result.push(slideElement);\n });\n \n return result;\n}\n\n</pre>\n')
window.os.fs.write('/sources/apps_presenter/presenter-logic_1.md', '## presenter_presenter-logic_1\n### API\n\n<pre style="text-wrap: wrap">\nfunction getPresenterLayout() { ... }\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ndefine a function called getPresenterLayout that creates the following dom structure of divs:\n .presenter\n .header\n img[`https://www.itdays.ro/public/images/logo-gri.png`]\n p`INNOVATION, PROGRAMMING AND TECHNOLOGIES`\n .content\n .footer\n img[`https://ascentcore.com/wp-content/uploads/2023/08/AC-Logo.svg`]\nand return the .presenter element\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\nfunction getSlideDOMElement(slides) {\n const result = [];\n \n slides.forEach(item => {\n const lines = item.split("\n");\n const slideElement = document.createElement("div");\n slideElement.className = "slide";\n \n lines.forEach(line => {\n if (line.startsWith(".")) {\n slideElement.classList.add(line.substring(1).trim());\n } else {\n let element;\n if (line.startsWith("# ")) {\n element = document.createElement("h1");\n element.textContent = line.substring(2);\n } else if (line.startsWith("## ")) {\n element = document.createElement("h2");\n element.textContent = line.substring(3);\n } else if (line.startsWith("### ")) {\n element = document.createElement("h3");\n element.textContent = line.substring(4);\n } else if (line.startsWith("![")) {\n const altText = line.match(/!\[(.*?)\]/)[1];\n const src = line.match(/\((.*?)\)/)[1];\n element = document.createElement("img");\n element.src = src;\n element.alt = altText;\n } else if (line.startsWith("`")) {\n element = document.createElement("pre");\n element.textContent = line.substring(1, line.length - 1);\n } else {\n element = document.createElement("p");\n element.textContent = line;\n }\n slideElement.appendChild(element);\n }\n });\n \n result.push(slideElement);\n });\n \n return result;\n}\nfunction getPresenterLayout() {\n const presenter = document.createElement("div");\n presenter.className = "presenter";\n\n const header = document.createElement("div");\n header.className = "header";\n\n const headerImage = document.createElement("img");\n headerImage.src = "https://www.itdays.ro/public/images/logo-gri.png";\n header.appendChild(headerImage);\n\n const headerText = document.createElement("p");\n headerText.textContent = "INNOVATION, PROGRAMMING AND TECHNOLOGIES";\n header.appendChild(headerText);\n\n presenter.appendChild(header);\n\n const content = document.createElement("div");\n content.className = "content";\n presenter.appendChild(content);\n\n const footer = document.createElement("div");\n footer.className = "footer";\n\n const footerImage = document.createElement("img");\n footerImage.src = "https://ascentcore.com/wp-content/uploads/2023/08/AC-Logo.svg";\n footer.appendChild(footerImage);\n\n presenter.appendChild(footer);\n\n return presenter;\n}\n\n</pre>\n')
window.os.fs.write('/sources/apps_presenter/presenter-logic_2.md', '## presenter_presenter-logic_2\n### API\n\n<pre style="text-wrap: wrap">\nfunction readFileContentSync(path) { ... }\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ndefine a function called readFileContentSync that takes a path as an argument\n read the file provided in the argument and return the content\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\nfunction getSlideDOMElement(slides) {\n const result = [];\n \n slides.forEach(item => {\n const lines = item.split("\n");\n const slideElement = document.createElement("div");\n slideElement.className = "slide";\n \n lines.forEach(line => {\n if (line.startsWith(".")) {\n slideElement.classList.add(line.substring(1).trim());\n } else {\n let element;\n if (line.startsWith("# ")) {\n element = document.createElement("h1");\n element.textContent = line.substring(2);\n } else if (line.startsWith("## ")) {\n element = document.createElement("h2");\n element.textContent = line.substring(3);\n } else if (line.startsWith("### ")) {\n element = document.createElement("h3");\n element.textContent = line.substring(4);\n } else if (line.startsWith("![")) {\n const altText = line.match(/!\[(.*?)\]/)[1];\n const src = line.match(/\((.*?)\)/)[1];\n element = document.createElement("img");\n element.src = src;\n element.alt = altText;\n } else if (line.startsWith("`")) {\n element = document.createElement("pre");\n element.textContent = line.substring(1, line.length - 1);\n } else {\n element = document.createElement("p");\n element.textContent = line;\n }\n slideElement.appendChild(element);\n }\n });\n \n result.push(slideElement);\n });\n \n return result;\n}\nfunction getPresenterLayout() {\n const presenter = document.createElement("div");\n presenter.className = "presenter";\n\n const header = document.createElement("div");\n header.className = "header";\n\n const headerImage = document.createElement("img");\n headerImage.src = "https://www.itdays.ro/public/images/logo-gri.png";\n header.appendChild(headerImage);\n\n const headerText = document.createElement("p");\n headerText.textContent = "INNOVATION, PROGRAMMING AND TECHNOLOGIES";\n header.appendChild(headerText);\n\n presenter.appendChild(header);\n\n const content = document.createElement("div");\n content.className = "content";\n presenter.appendChild(content);\n\n const footer = document.createElement("div");\n footer.className = "footer";\n\n const footerImage = document.createElement("img");\n footerImage.src = "https://ascentcore.com/wp-content/uploads/2023/08/AC-Logo.svg";\n footer.appendChild(footerImage);\n\n presenter.appendChild(footer);\n\n return presenter;\n}\nfunction readFileContentSync(path) {\n if (window.os.fs.isValidPath(path)) {\n return window.os.fs.read(path);\n }\n return null;\n}\n\n</pre>\n')
window.os.fs.write('/sources/apps_presenter/presenter-logic_3.md', '## presenter_presenter-logic_3\n### API\n\n<pre style="text-wrap: wrap">\nwindow.apps.presenter = function(_, path = "/itdays.xmd") { ... }\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ndefine on window.apps namespace a function called presenter that takes a _ and path string with default value "/itdays.xmd" as arguments\ngets the root element by executing getPresenterLayout and gets .content child as local reference\nexecute readFileContentSync with the argument and store value\nexecute getSlideDOMElement with the stored value split by `---` and append elements of result to the content element\nstarting with index 0, if the user presses arrow keys navigate through the slides by showing the slide at index\nreturns the root element\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\nfunction getSlideDOMElement(slides) {\n const result = [];\n \n slides.forEach(item => {\n const lines = item.split("\n");\n const slideElement = document.createElement("div");\n slideElement.className = "slide";\n \n lines.forEach(line => {\n if (line.startsWith(".")) {\n slideElement.classList.add(line.substring(1).trim());\n } else {\n let element;\n if (line.startsWith("# ")) {\n element = document.createElement("h1");\n element.textContent = line.substring(2);\n } else if (line.startsWith("## ")) {\n element = document.createElement("h2");\n element.textContent = line.substring(3);\n } else if (line.startsWith("### ")) {\n element = document.createElement("h3");\n element.textContent = line.substring(4);\n } else if (line.startsWith("![")) {\n const altText = line.match(/!\[(.*?)\]/)[1];\n const src = line.match(/\((.*?)\)/)[1];\n element = document.createElement("img");\n element.src = src;\n element.alt = altText;\n } else if (line.startsWith("`")) {\n element = document.createElement("pre");\n element.textContent = line.substring(1, line.length - 1);\n } else {\n element = document.createElement("p");\n element.textContent = line;\n }\n slideElement.appendChild(element);\n }\n });\n \n result.push(slideElement);\n });\n \n return result;\n}\nfunction getPresenterLayout() {\n const presenter = document.createElement("div");\n presenter.className = "presenter";\n\n const header = document.createElement("div");\n header.className = "header";\n\n const headerImage = document.createElement("img");\n headerImage.src = "https://www.itdays.ro/public/images/logo-gri.png";\n header.appendChild(headerImage);\n\n const headerText = document.createElement("p");\n headerText.textContent = "INNOVATION, PROGRAMMING AND TECHNOLOGIES";\n header.appendChild(headerText);\n\n presenter.appendChild(header);\n\n const content = document.createElement("div");\n content.className = "content";\n presenter.appendChild(content);\n\n const footer = document.createElement("div");\n footer.className = "footer";\n\n const footerImage = document.createElement("img");\n footerImage.src = "https://ascentcore.com/wp-content/uploads/2023/08/AC-Logo.svg";\n footer.appendChild(footerImage);\n\n presenter.appendChild(footer);\n\n return presenter;\n}\nfunction readFileContentSync(path) {\n if (window.os.fs.isValidPath(path)) {\n return window.os.fs.read(path);\n }\n return null;\n}\nwindow.apps = window.apps || {};\n\nwindow.apps.presenter = function(_, path = "/itdays.xmd") {\n const rootElement = getPresenterLayout();\n const contentElement = rootElement.querySelector(".content");\n const fileContent = readFileContentSync(path);\n const slides = getSlideDOMElement(fileContent.split("---"));\n \n slides.forEach(slide => contentElement.appendChild(slide));\n \n let currentIndex = 0;\n function showSlide(index) {\n const allSlides = contentElement.children;\n for (let i = 0; i < allSlides.length; i++) {\n allSlides[i].style.display = (i === index) ? "block" : "none";\n }\n }\n \n showSlide(currentIndex);\n \n window.addEventListener("keydown", function(event) {\n if (event.key === "ArrowRight") {\n currentIndex = Math.min(currentIndex + 1, slides.length - 1);\n showSlide(currentIndex);\n } else if (event.key === "ArrowLeft") {\n currentIndex = Math.max(currentIndex - 1, 0);\n showSlide(currentIndex);\n }\n });\n \n return rootElement;\n};\n\n</pre>\n')
window.os.fs.write('/sources/apps_presenter/presenter-logic_4.md', '## presenter_presenter-logic_4\n### API\n\n<pre style="text-wrap: wrap">\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ncall register application with "Presenter" title, 📽️ as emoji, presenter function reference and 1200x680 size for [xmd] extensions\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\nfunction getSlideDOMElement(slides) {\n const result = [];\n \n slides.forEach(item => {\n const lines = item.split("\n");\n const slideElement = document.createElement("div");\n slideElement.className = "slide";\n \n lines.forEach(line => {\n if (line.startsWith(".")) {\n slideElement.classList.add(line.substring(1).trim());\n } else {\n let element;\n if (line.startsWith("# ")) {\n element = document.createElement("h1");\n element.textContent = line.substring(2);\n } else if (line.startsWith("## ")) {\n element = document.createElement("h2");\n element.textContent = line.substring(3);\n } else if (line.startsWith("### ")) {\n element = document.createElement("h3");\n element.textContent = line.substring(4);\n } else if (line.startsWith("![")) {\n const altText = line.match(/!\[(.*?)\]/)[1];\n const src = line.match(/\((.*?)\)/)[1];\n element = document.createElement("img");\n element.src = src;\n element.alt = altText;\n } else if (line.startsWith("`")) {\n element = document.createElement("pre");\n element.textContent = line.substring(1, line.length - 1);\n } else {\n element = document.createElement("p");\n element.textContent = line;\n }\n slideElement.appendChild(element);\n }\n });\n \n result.push(slideElement);\n });\n \n return result;\n}\nfunction getPresenterLayout() {\n const presenter = document.createElement("div");\n presenter.className = "presenter";\n\n const header = document.createElement("div");\n header.className = "header";\n\n const headerImage = document.createElement("img");\n headerImage.src = "https://www.itdays.ro/public/images/logo-gri.png";\n header.appendChild(headerImage);\n\n const headerText = document.createElement("p");\n headerText.textContent = "INNOVATION, PROGRAMMING AND TECHNOLOGIES";\n header.appendChild(headerText);\n\n presenter.appendChild(header);\n\n const content = document.createElement("div");\n content.className = "content";\n presenter.appendChild(content);\n\n const footer = document.createElement("div");\n footer.className = "footer";\n\n const footerImage = document.createElement("img");\n footerImage.src = "https://ascentcore.com/wp-content/uploads/2023/08/AC-Logo.svg";\n footer.appendChild(footerImage);\n\n presenter.appendChild(footer);\n\n return presenter;\n}\nfunction readFileContentSync(path) {\n if (window.os.fs.isValidPath(path)) {\n return window.os.fs.read(path);\n }\n return null;\n}\nwindow.apps = window.apps || {};\n\nwindow.apps.presenter = function(_, path = "/itdays.xmd") {\n const rootElement = getPresenterLayout();\n const contentElement = rootElement.querySelector(".content");\n const fileContent = readFileContentSync(path);\n const slides = getSlideDOMElement(fileContent.split("---"));\n \n slides.forEach(slide => contentElement.appendChild(slide));\n \n let currentIndex = 0;\n function showSlide(index) {\n const allSlides = contentElement.children;\n for (let i = 0; i < allSlides.length; i++) {\n allSlides[i].style.display = (i === index) ? "block" : "none";\n }\n }\n \n showSlide(currentIndex);\n \n window.addEventListener("keydown", function(event) {\n if (event.key === "ArrowRight") {\n currentIndex = Math.min(currentIndex + 1, slides.length - 1);\n showSlide(currentIndex);\n } else if (event.key === "ArrowLeft") {\n currentIndex = Math.max(currentIndex - 1, 0);\n showSlide(currentIndex);\n }\n });\n \n return rootElement;\n};\nwindow.os.registerApplication("Presenter", "📽️", window.apps.presenter, 1200, 680, ["xmd"]);\n\n</pre>\n')
window.os.fs.write('/sources/apps_terminal/terminal-style_0.md', '## terminal_terminal-style_0\n### API\n\n<pre style="text-wrap: wrap">\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ndefine a terminal class with the following css properties\n- width: 100%\n- height: 100%\n- background-color: black\n- color: white\n- font-family: monospace\n- overflow: hidden\n- display: flex\n- flex-direction: column\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n.terminal {\n width: 100%;\n height: 100%;\n background-color: black;\n color: white;\n font-family: monospace;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n</pre>\n')
window.os.fs.write('/sources/apps_terminal/terminal-style_1.md', '## terminal_terminal-style_1\n### API\n\n<pre style="text-wrap: wrap">\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ndefine a terminal-output class with the following css properties\n- flex: 1\n- overflow-y: auto\n- padding: 10px\n- display: flex\n- flex-direction: column-reverse\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n.terminal {\n width: 100%;\n height: 100%;\n background-color: black;\n color: white;\n font-family: monospace;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n.terminal-output {\n flex: 1;\n overflow-y: auto;\n padding: 10px;\n display: flex;\n flex-direction: column-reverse;\n}\n\n</pre>\n')
window.os.fs.write('/sources/apps_terminal/terminal-style_2.md', '## terminal_terminal-style_2\n### API\n\n<pre style="text-wrap: wrap">\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ndefine a terminal-line class with the following css properties\n- display: flex\n- flex-direction: row\n- margin: 0\n- padding: 0\n- text-wrap: auto\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n.terminal {\n width: 100%;\n height: 100%;\n background-color: black;\n color: white;\n font-family: monospace;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n.terminal-output {\n flex: 1;\n overflow-y: auto;\n padding: 10px;\n display: flex;\n flex-direction: column-reverse;\n}\n.terminal-line {\n display: flex;\n flex-direction: row;\n margin: 0;\n padding: 0;\n overflow-wrap: break-word; /* "text-wrap" is not a valid CSS property */\n}\n\n</pre>\n')
window.os.fs.write('/sources/apps_terminal/terminal-style_3.md', '## terminal_terminal-style_3\n### API\n\n<pre style="text-wrap: wrap">\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ndefine a terminal-input class with the following css properties\n- display: flex\n- flex-direction: row\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n.terminal {\n width: 100%;\n height: 100%;\n background-color: black;\n color: white;\n font-family: monospace;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n.terminal-output {\n flex: 1;\n overflow-y: auto;\n padding: 10px;\n display: flex;\n flex-direction: column-reverse;\n}\n.terminal-line {\n display: flex;\n flex-direction: row;\n margin: 0;\n padding: 0;\n overflow-wrap: break-word; /* "text-wrap" is not a valid CSS property */\n}\n.terminal-input {\n display: flex;\n flex-direction: row;\n}\n\n</pre>\n')
window.os.fs.write('/sources/apps_terminal/terminal-style_4.md', '## terminal_terminal-style_4\n### API\n\n<pre style="text-wrap: wrap">\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ndefine a terminal-input-text class with the following css properties\n- background-color: transparent\n- border: none\n- color: white\n- font-family: monospace\n- font-size: 16px\n- flex: 1\n- outline: none\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n.terminal {\n width: 100%;\n height: 100%;\n background-color: black;\n color: white;\n font-family: monospace;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n.terminal-output {\n flex: 1;\n overflow-y: auto;\n padding: 10px;\n display: flex;\n flex-direction: column-reverse;\n}\n.terminal-line {\n display: flex;\n flex-direction: row;\n margin: 0;\n padding: 0;\n overflow-wrap: break-word; /* "text-wrap" is not a valid CSS property */\n}\n.terminal-input {\n display: flex;\n flex-direction: row;\n}\n.terminal-input-text {\n background-color: transparent;\n border: none;\n color: white;\n font-family: monospace;\n font-size: 16px;\n flex: 1;\n outline: none;\n}\n\n</pre>\n')
window.os.fs.write('/sources/apps_terminal/terminal-runtime_0.md', '## terminal_terminal-runtime_0\n### API\n\n<pre style="text-wrap: wrap">\n/**\n * Removes all elements with the class name "terminal-line" from the document.\n * @function\n */\nfunction clear() { ... }\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ndefine a function clear that removres all .terminal-line elements\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n/**\n * Removes all elements with the class name "terminal-line" from the document.\n * @function\n */\nfunction clear() {\n const terminalLines = document.querySelectorAll(".terminal-line");\n terminalLines.forEach(line => line.remove());\n}\n\n</pre>\n')
window.os.fs.write('/sources/apps_terminal/terminal-runtime_1.md', '## terminal_terminal-runtime_1\n### API\n\n<pre style="text-wrap: wrap">\n/**\n * Changes the current path to the specified path.\n * @param {string} path - The new path to set as current.\n */\nfunction cd(path) { ... }\n/**\n * Returns the current path.\n * @returns {string} - The current path.\n */\nfunction pwd() { ... }\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\nkeep a local variable called currentPath with value "/"\ndefine a local function `cd` that takes a string parameter and sets currentPath to it\ndefine a local function `pwd` that returns the parent scope defined currentPath\ndefine and object called bin and referece functions from objects:\n - all window.os.fs functions\n - all window.os.utils functions\n - cd and pwd functions\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n/**\n * Removes all elements with the class name "terminal-line" from the document.\n * @function\n */\nfunction clear() {\n const terminalLines = document.querySelectorAll(".terminal-line");\n terminalLines.forEach(line => line.remove());\n}\nlet currentPath = "/";\n\n/**\n * Changes the current path to the specified path.\n * @param {string} path - The new path to set as current.\n */\nfunction cd(path) {\n currentPath = path;\n}\n\n/**\n * Returns the current path.\n * @returns {string} - The current path.\n */\nfunction pwd() {\n return currentPath;\n}\n\nconst bin = {\n sync: window.os.fs.sync,\n getPath: window.os.fs.getPath,\n isValidPath: window.os.fs.isValidPath,\n ls: window.os.fs.ls,\n mkdir: window.os.fs.mkdir,\n rm: window.os.fs.rm,\n write: window.os.fs.write,\n read: window.os.fs.read,\n cd: cd,\n pwd: pwd\n};\n\n</pre>\n')
window.os.fs.write('/sources/apps_terminal/terminal-runtime_2.md', '## terminal_terminal-runtime_2\n### API\n\n<pre style="text-wrap: wrap">\n/**\n * Executes a command with the given parameters, processing the input string.\n * @param {string} input - The command input string to execute.\n * @returns {any} - The result of the command execution or an error message.\n */\nfunction execute(input) { ... }\n const args = input.match(/(?:[^\s"]+|"[^"]*")+/g).map(arg => arg.replace(/(^"|"$)/g, ""));\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ncurrentPath is defined in parent scope\ndefine a function `execute` that takes a string parameter and:\n - splits the string by space but keeps in a single element if it is in quotes\n - set path to currentPath\n - the first element is the command and prepend `bin.` to it\n - if the second element exists:\n - if it does not start with `/`, prepend `currentPath` to it and assign it to path after calling `getPath` on it\n - if it starts with `/`, assign it to path after calling `getPath` on it\n - return eval of `command` with `path` and rest of the parameters from the list as string arguments\n - if the eval throws an error, return the error message\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n/**\n * Removes all elements with the class name "terminal-line" from the document.\n * @function\n */\nfunction clear() {\n const terminalLines = document.querySelectorAll(".terminal-line");\n terminalLines.forEach(line => line.remove());\n}\nlet currentPath = "/";\n\n/**\n * Changes the current path to the specified path.\n * @param {string} path - The new path to set as current.\n */\nfunction cd(path) {\n currentPath = path;\n}\n\n/**\n * Returns the current path.\n * @returns {string} - The current path.\n */\nfunction pwd() {\n return currentPath;\n}\n\nconst bin = {\n sync: window.os.fs.sync,\n getPath: window.os.fs.getPath,\n isValidPath: window.os.fs.isValidPath,\n ls: window.os.fs.ls,\n mkdir: window.os.fs.mkdir,\n rm: window.os.fs.rm,\n write: window.os.fs.write,\n read: window.os.fs.read,\n cd: cd,\n pwd: pwd\n};\n/**\n * Executes a command with the given parameters, processing the input string.\n * @param {string} input - The command input string to execute.\n * @returns {any} - The result of the command execution or an error message.\n */\nfunction execute(input) {\n const args = input.match(/(?:[^\s"]+|"[^"]*")+/g).map(arg => arg.replace(/(^"|"$)/g, ""));\n let path = currentPath;\n const command = `bin.${args[0]}`;\n \n if (args[1]) {\n if (!args[1].startsWith("/")) {\n path = window.os.fs.getPath(`${currentPath}/${args[1]}`);\n } else {\n path = window.os.fs.getPath(args[1]);\n }\n }\n\n try {\n return eval(`${command}("${path}", ${args.slice(2).map(arg => `"${arg}"`).join(", ")})`);\n } catch (error) {\n return error.message;\n }\n}\n\n</pre>\n')
window.os.fs.write('/sources/apps_terminal/terminal-runtime_3.md', '## terminal_terminal-runtime_3\n### API\n\n<pre style="text-wrap: wrap">\nwindow.apps.terminal = function() { ... }\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ndefine a function `terminal` on window.apps namespace that creates a root element with class terminal and returns it at the end\ncreate the following dom structure:\n - .terminal\n - .terminal-output\n - .terminal-line with text "Welcome to TempLLM OS"\n - .terminal-input\n - .prefix with text ">"\n - input.terminal-input-text\ndefine inner function called output that takes two parameters: value and color with default value white. The function prepends a pre with class terminal-line having color style as provided in the function and the value as text to the terminal-output div. if the value is a list then prepend each item in the list as a separate pre\nwhen the user hits the enter key on the input take the content call the output function with the content prefixed with `[%current_time%]` and color yellow, call `output` with the resul of calling `execute` function with the value of the input, clear the input and focus it again and update .prefix text with the currentPath + ">" \n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n/**\n * Removes all elements with the class name "terminal-line" from the document.\n * @function\n */\nfunction clear() {\n const terminalLines = document.querySelectorAll(".terminal-line");\n terminalLines.forEach(line => line.remove());\n}\nlet currentPath = "/";\n\n/**\n * Changes the current path to the specified path.\n * @param {string} path - The new path to set as current.\n */\nfunction cd(path) {\n currentPath = path;\n}\n\n/**\n * Returns the current path.\n * @returns {string} - The current path.\n */\nfunction pwd() {\n return currentPath;\n}\n\nconst bin = {\n sync: window.os.fs.sync,\n getPath: window.os.fs.getPath,\n isValidPath: window.os.fs.isValidPath,\n ls: window.os.fs.ls,\n mkdir: window.os.fs.mkdir,\n rm: window.os.fs.rm,\n write: window.os.fs.write,\n read: window.os.fs.read,\n cd: cd,\n pwd: pwd\n};\n/**\n * Executes a command with the given parameters, processing the input string.\n * @param {string} input - The command input string to execute.\n * @returns {any} - The result of the command execution or an error message.\n */\nfunction execute(input) {\n const args = input.match(/(?:[^\s"]+|"[^"]*")+/g).map(arg => arg.replace(/(^"|"$)/g, ""));\n let path = currentPath;\n const command = `bin.${args[0]}`;\n \n if (args[1]) {\n if (!args[1].startsWith("/")) {\n path = window.os.fs.getPath(`${currentPath}/${args[1]}`);\n } else {\n path = window.os.fs.getPath(args[1]);\n }\n }\n\n try {\n return eval(`${command}("${path}", ${args.slice(2).map(arg => `"${arg}"`).join(", ")})`);\n } catch (error) {\n return error.message;\n }\n}\nwindow.apps = window.apps || {};\n\nwindow.apps.terminal = function() {\n const terminal = document.createElement("div");\n terminal.className = "terminal";\n\n const terminalOutput = document.createElement("div");\n terminalOutput.className = "terminal-output";\n const welcomeLine = document.createElement("pre");\n welcomeLine.className = "terminal-line";\n welcomeLine.textContent = "Welcome to TempLLM OS";\n terminalOutput.appendChild(welcomeLine);\n terminal.appendChild(terminalOutput);\n\n const terminalInput = document.createElement("div");\n terminalInput.className = "terminal-input";\n const prefix = document.createElement("span");\n prefix.className = "prefix";\n prefix.textContent = ">";\n const input = document.createElement("input");\n input.className = "terminal-input-text";\n terminalInput.appendChild(prefix);\n terminalInput.appendChild(input);\n terminal.appendChild(terminalInput);\n\n function output(value, color = "white") {\n if (Array.isArray(value)) {\n value.forEach(item => {\n const line = document.createElement("pre");\n line.className = "terminal-line";\n line.style.color = color;\n line.textContent = item;\n terminalOutput.prepend(line);\n });\n } else {\n const line = document.createElement("pre");\n line.className = "terminal-line";\n line.style.color = color;\n line.textContent = value;\n terminalOutput.prepend(line);\n }\n }\n\n input.addEventListener("keydown", function(event) {\n if (event.key === "Enter") {\n const currentTime = new Date().toLocaleTimeString();\n const content = input.value;\n output(`[${currentTime}] ${content}`, "yellow");\n const result = execute(content);\n output(result);\n input.value = "";\n input.focus();\n prefix.textContent = pwd() + ">";\n }\n });\n\n return terminal;\n};\n\n</pre>\n')
window.os.fs.write('/sources/apps_terminal/terminal-runtime_4.md', '## terminal_terminal-runtime_4\n### API\n\n<pre style="text-wrap: wrap">\n\n</pre>\n### Instruction\n\n<pre style="text-wrap: wrap">\ncall register application with "Terminal" title, 🖥️ as emoji, terminal function reference and 800x500 size\n</pre>\n### Output\n\n<pre style="text-wrap: wrap">\n/**\n * Removes all elements with the class name "terminal-line" from the document.\n * @function\n */\nfunction clear() {\n const terminalLines = document.querySelectorAll(".terminal-line");\n terminalLines.forEach(line => line.remove());\n}\nlet currentPath = "/";\n\n/**\n * Changes the current path to the specified path.\n * @param {string} path - The new path to set as current.\n */\nfunction cd(path) {\n currentPath = path;\n}\n\n/**\n * Returns the current path.\n * @returns {string} - The current path.\n */\nfunction pwd() {\n return currentPath;\n}\n\nconst bin = {\n sync: window.os.fs.sync,\n getPath: window.os.fs.getPath,\n isValidPath: window.os.fs.isValidPath,\n ls: window.os.fs.ls,\n mkdir: window.os.fs.mkdir,\n rm: window.os.fs.rm,\n write: window.os.fs.write,\n read: window.os.fs.read,\n cd: cd,\n pwd: pwd\n};\n/**\n * Executes a command with the given parameters, processing the input string.\n * @param {string} input - The command input string to execute.\n * @returns {any} - The result of the command execution or an error message.\n */\nfunction execute(input) {\n const args = input.match(/(?:[^\s"]+|"[^"]*")+/g).map(arg => arg.replace(/(^"|"$)/g, ""));\n let path = currentPath;\n const command = `bin.${args[0]}`;\n \n if (args[1]) {\n if (!args[1].startsWith("/")) {\n path = window.os.fs.getPath(`${currentPath}/${args[1]}`);\n } else {\n path = window.os.fs.getPath(args[1]);\n }\n }\n\n try {\n return eval(`${command}("${path}", ${args.slice(2).map(arg => `"${arg}"`).join(", ")})`);\n } catch (error) {\n return error.message;\n }\n}\nwindow.apps = window.apps || {};\n\nwindow.apps.terminal = function() {\n const terminal = document.createElement("div");\n terminal.className = "terminal";\n\n const terminalOutput = document.createElement("div");\n terminalOutput.className = "terminal-output";\n const welcomeLine = document.createElement("pre");\n welcomeLine.className = "terminal-line";\n welcomeLine.textContent = "Welcome to TempLLM OS";\n terminalOutput.appendChild(welcomeLine);\n terminal.appendChild(terminalOutput);\n\n const terminalInput = document.createElement("div");\n terminalInput.className = "terminal-input";\n const prefix = document.createElement("span");\n prefix.className = "prefix";\n prefix.textContent = ">";\n const input = document.createElement("input");\n input.className = "terminal-input-text";\n terminalInput.appendChild(prefix);\n terminalInput.appendChild(input);\n terminal.appendChild(terminalInput);\n\n function output(value, color = "white") {\n if (Array.isArray(value)) {\n value.forEach(item => {\n const line = document.createElement("pre");\n line.className = "terminal-line";\n line.style.color = color;\n line.textContent = item;\n terminalOutput.prepend(line);\n });\n } else {\n const line = document.createElement("pre");\n line.className = "terminal-line";\n line.style.color = color;\n line.textContent = value;\n terminalOutput.prepend(line);\n }\n }\n\n input.addEventListener("keydown", function(event) {\n if (event.key === "Enter") {\n const currentTime = new Date().toLocaleTimeString();\n const content = input.value;\n output(`[${currentTime}] ${content}`, "yellow");\n const result = execute(content);\n output(result);\n input.value = "";\n input.focus();\n prefix.textContent = pwd() + ">";\n }\n });\n\n return terminal;\n};\nwindow.os.registerApplication("Terminal", "🖥️", window.apps.terminal, 800, 500);\n\n</pre>\n')
</script>
<script>
window.os.fs.write('/itdays.xmd', '# Personalization\n---\n.dark\n# kernel panic!\n---\n# LLMs: A Paradigm Shift in Operating Systems\n\n## cornel stefanache\n### cto@ascentcore\n### [email protected]\n---\n# Can LLM Write Good OS Code?\n---\n# Can LLM Write OS Code?\n---\n# Can LLM Write OS?\n---\n# What to expect\n\n---\n# What to expect\n\n---\n# What to expect\n\n---\n# What to expect\n\n---\n# The first problem\n### Storage\n\n---\n# The second problem\n### No file concept\n\n---\n# The third problem\n### Interract\n\n---\n# Filesystem\n`Define the following functions on the window.os.fs object:`\n` sync - save the filesystem object to the local storage that will be called by the other functions that modify the filesystem object`\n` getPath - process and return a path by taking into account "..", "//" and "/"". return null if the path is invalid`\n` isValidPath - checks if the path is valid`\n` ls - returns a list of entries in the filesystem object at the given path`\n` mkdir - creates an empty object at the given path`\n` rm - removes the object at the given path`\n` write - writes the content to an entry in the filesystem object at the given path`\n` read - reads an entry split by \\n in the filesystem object at the given path, last element in path is the file name`\n---\n# Under the hood\n\n`<SYSTEM>`\n`<DEPENDENCIES>`\n`<INSTRUCTION>`\n---\n# Under the hood - CSS\n## System Prompt\n`You are a code generator that produces CSS code exclusively. When responding to queries, provide only valid and complete CSS code without any additional explanations or comments. Do not include any HTML, JavaScript, or commentary unless explicitly asked to. Follow best practices for CSS and ensure compatibility across modern browsers.`\n---\n# Under the hood - JS\n## System Prompt\n`You are a code generator that produces JavaScript code exclusively using vanilla JavaScript that will execute in a browser window. When responding to queries, provide only valid and complete JavaScript code without any additional explanations or comments. Do not include any frameworks or libraries such as jQuery, React, or others. Follow best practices for vanilla JavaScript and ensure compatibility with modern browsers. Do not write node or server-side code.`\n\n`if isLibrary == True:`\n` system_prompt += ". For each function, provide a brief description of its purpose in jsdoc format."`\n---\n# Generated JSDOC\n` /**`\n` * Returns a list of entries in the filesystem object at the given path.`\n` * @param {string} path - The path to list entries from.`\n` * @returns {Array} - An array of entries.`\n` */`\n` window.os.fs.ls = function(path) { ... }`\n` /**`\n` * Creates an empty object at the given path.`\n` * @param {string} path - The path to create the directory.`\n` */`\n` window.os.fs.mkdir = function(path) { ... }`\n` /**`\n` * Removes the object at the given path.`\n` * @param {string} path - The path to remove the object from.`\n` */`\n` window.os.fs.rm = function(path) { ... }`')
</script>
</body>
</html>