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
|
<!DOCTYPE html>
<html>
<head>
<title>TaSTT</title>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Noto+Sans+Mono&display=swap">
</head>
<style>
body {
font-family: 'Noto Sans Mono', monospace;
font-size: 96px;
font-weight: 3200;
/* xdd */
/* https://stackoverflow.com/a/55097644 */
text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px
-9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px
#000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px
0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px
5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000,
-9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px
#000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px
0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px
-9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000,
9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px
#000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px
0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px
8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000,
-3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px
#000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px
0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px
-2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000,
-4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000;
}
.transcript {
color: white;
}
.preview {
color: white;
opacity: 0.65;
}
.red_circle {
height: 50px;
width: 50px;
background-color: red;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
margin: 20px;
}
.grey_circle {
height: 50px;
width: 50px;
background-color: grey;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
margin: 20px;
}
</style>
<body>
<div id="content"></div>
<script>
function scrollToBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
function getTranscript() {
$.ajax({
url: 'http://localhost:%PORT%/api/v0/transcript',
method: 'GET',
dataType: 'json',
success: function (data) {
// dirty hack: create a bunch of invisible content to push the
// transcript down the bottom
var transcriptHtml = '<span class="transcript" style="opacity: 0">'
+ '___ '.repeat(128) + '</span>';
data.commits.forEach(function (commit, index) {
let age = data.ts - commit.ts;
let min_age_s = 5.0;
let max_age_s = 60.0;
let opacity = 1.0 - (age - min_age_s) / (max_age_s - min_age_s);
opacity = Math.max(0, opacity);
opacity = Math.min(1, opacity);
transcriptHtml += `<span class="transcript" style="opacity: ${opacity};">${commit.delta}</span>`;
});
// Append the preview with full opacity if it exists
if (data.preview && data.preview.preview) {
transcriptHtml += `<span class="preview" style="opacity: 1;">${data.preview.preview}</span>`;
}
// Create the circle indicator
var circleHtml = data.preview.preview ?
'<span class="red_circle"></span>' :
'<span class="grey_circle"></span>';
$('#content').html(transcriptHtml + circleHtml);
$('#content').css("background-color", "#22222280");
},
error: function (jqXHR, textStatus, errorThrown) {
console.error('Error getting transcript: ', textStatus, errorThrown);
}
});
scrollToBottom();
}
setInterval(getTranscript, /*interval_ms=*/100);
</script>
</body>
</html>
|
