-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
88 lines (77 loc) · 2.84 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Tokens Per Second Visualizer</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-4">
<h1 class="text-center">Tokens Per Second Visualizer</h1>
<div class="my-4">
<input type="number" id="tps" class="form-control" placeholder="Enter tokens per second" value="5">
<select id="presetText" class="form-control my-2">
<option value="random">Random Text</option>
<option value="prose">Prose</option>
<option value="code">Code</option>
<option value="bullets">Bullet Points</option>
</select>
<button class="btn btn-primary my-2" onclick="start()">Start</button>
<button class="btn btn-secondary my-2" onclick="stop()">Stop</button>
<button class="btn btn-danger my-2" onclick="clearOutput()">Clear</button>
</div>
<textarea id="output" class="form-control" rows="10" readonly></textarea>
</div>
<script>
let interval;
const texts = {
prose: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Sed euismod ultrices massa, et pharetra justo fermentum nec. Aliquam erat volutpat.",
code: "let x = 10;\nfunction foo(bar) {\n return bar * 2;\n}\nfoo(x);",
bullets: "- Item 1\n- Item 2\n- Item 3",
};
function generateToken() {
const tokenLength = Math.floor(Math.random() * 3) + 2;
return Array.from({ length: tokenLength }, () => String.fromCharCode(97 + Math.floor(Math.random() * 26))).join('');
}
let currentPosition = 0;
function start() {
stop();
const tps = parseInt(document.getElementById('tps').value, 10);
const preset = document.getElementById('presetText').value;
const output = document.getElementById('output');
let tokens;
if (preset === 'random') {
tokens = new Array(tps).fill(0).map(generateToken);
} else {
const allTokens = texts[preset].split(' ');
tokens = allTokens.slice(currentPosition, currentPosition + tps);
currentPosition = (currentPosition + tps) % allTokens.length;
}
tokens.forEach((token, i) => {
setTimeout(() => {
output.value += token + ' ';
}, (1000 / tps) * i);
});
interval = setInterval(() => {
if (preset === 'random') {
tokens = new Array(tps).fill(0).map(generateToken);
} else {
const allTokens = texts[preset].split(' ');
tokens = allTokens.slice(currentPosition, currentPosition + tps);
currentPosition = (currentPosition + tps) % allTokens.length;
}
tokens.forEach((token, i) => {
setTimeout(() => {
output.value += token + ' ';
}, (1000 / tps) * i);
});
}, 1000);
}
function stop() {
clearInterval(interval);
}
function clearOutput() {
document.getElementById('output').value = '';
}
</script>
</body>
</html>