Skip to content

Commit 607ff68

Browse files
committed
Include simple lexicon helper to annotate transcripts
1 parent ba038a5 commit 607ff68

File tree

6 files changed

+186
-43
lines changed

6 files changed

+186
-43
lines changed

_layouts/talk.html

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
/<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
@@ -8,6 +8,7 @@
88
<meta name="viewport" content="width=device-width, initial-scale=1">
99
<link rel="stylesheet" href="../style.css">
1010
<link rel="stylesheet" href="../presentation-viewer.css">
11+
<link rel="stylesheet" href="../tooltip.css">
1112
<meta name="twitter:site" content="@w3c">
1213
<meta name="twitter:card" content="summary_large_image">
1314
<meta property="og:title" content=
@@ -120,6 +121,7 @@ <h3>Transcript</h3>
120121
</div><!-- id=player -->
121122
<!-- @@@ talk navigation from above -->
122123
</form>
124+
<div id=lexicon></div>
123125
</main>
124126
<footer class="footer" id="footer">
125127
<p>
@@ -150,5 +152,7 @@ <h3>Transcript</h3>
150152
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.js"></script>
151153
<script src="../presentation-viewer.js"></script>
152154
<script src="../pdf-loader.js"></script>
155+
<script src="../tooltip.js"></script>
156+
<script src="../lexicon.js"></script>
153157
</body>
154158
</html>

_tools/build-transcript.js

+2-42
Original file line numberDiff line numberDiff line change
@@ -3,49 +3,9 @@ const WebVTTParser = require("webvtt-parser").WebVTTParser;
33
const parser = new WebVTTParser();
44
const splitter = require("sentence-splitter");
55
const talks = require("../_data/talks.json");
6+
const lexicon = require("../lexicon.json");
67

7-
const linkableTerms = [
8-
"GAN",
9-
"GRU",
10-
"SoC",
11-
"multiply-add",
12-
"matrix",
13-
"tensor",
14-
"convolution",
15-
"correlation",
16-
"SNR",
17-
"DNN",
18-
"FTT",
19-
"IFFT",
20-
"EMScripten",
21-
"WebAssembly",
22-
"WASM",
23-
"WebGL",
24-
"WebGPU",
25-
"SIMD",
26-
"vocoder",
27-
"TTS",
28-
"DSP",
29-
"WebBLE",
30-
"WASI",
31-
"CG",
32-
"OpenVINO",
33-
"PyTorch",
34-
"Keras",
35-
"TensorFlow.js",
36-
"TensorFlow",
37-
"TFJS",
38-
"python",
39-
"model DAG",
40-
"YOLO",
41-
"differential privacy",
42-
"NLP",
43-
"ASR",
44-
"NPM",
45-
"Node.js",
46-
"WebRTC",
47-
"WebXR"
48-
];
8+
const linkableTerms = Object.keys(lexicon);
499

5010
function annotateSentence(sentence) {
5111
sentence = sentence.replace(/^slide [a-z0-9]*\.?/i, '');

lexicon.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
fetch("../lexicon.json").then(r => r.json())
2+
.then(lexicon => {
3+
const alreadyDone = {};
4+
[...document.querySelectorAll("a.dfn")].forEach(a => {
5+
if (lexicon[a.textContent] && !alreadyDone[a.textContent]) {
6+
let dfnTarget;
7+
if (!lexicon[a.textContent].alias) {
8+
dfnTarget = a.textContent;
9+
} else {
10+
dfnTarget = lexicon[a.textContent].alias;
11+
}
12+
const dfnId = dfnTarget.toLowerCase().replace(/[^a-z0-9]/g, '');
13+
14+
const dfn = document.createElement("p");
15+
dfn.id = dfnId;
16+
dfn.className = "hidden";
17+
dfn.innerHTML = lexicon[dfnTarget];
18+
document.getElementById("lexicon").appendChild(dfn);
19+
20+
a.className = "js-simple-tooltip";
21+
a.dataset.simpletooltipContentId = dfnId;
22+
alreadyDone[a.textContent] = true;
23+
} else {
24+
a.replaceWith(a.textContent);
25+
}
26+
});
27+
const my_tooltip = van11yAccessibleSimpleTooltipAria();
28+
my_tooltip.attach(document.getElementById('slides'));
29+
30+
});

lexicon.json

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"gigaflops": "a unit of measure of computation corresponding to 1 billion of floating point operations",
3+
"megaflops": "a unit of measure of computation corresponding to 1 million of floating point operations",
4+
"GAN": "GAN stands for Generative Adversarial Network, a type of neural network characterized by its training approach",
5+
"GRU": "GRU stands for Gated Recurrent Unit, a technique used to improve training of neural networks",
6+
"SoC": "SoC stands for System on a Chip, an integrated set of processors and microcontrollers",
7+
"multiply-add": "multiply-add is a frequently used primitive operation when running a machine learning model",
8+
"matrix": "matrices are a mathematical construct used throughout machine learning algorithms",
9+
"tensor": "tensors are a mathematical construct used throughout machine learning algorithms",
10+
"convolutional network": "a type of neural network using <a class=dfn>convolutions</a>",
11+
"convolution": "convolution is a frequently used mathematical operation when running a machine learning model",
12+
"SNR": "SNR stands for Signal-to-Noise Ratio, a measure of the quality of a signal (higher is better)",
13+
"DNN": "DNN stands for Deep Neural Network, a neural network with multiple layers of neurons",
14+
"FFT": "FFT stands for Fast Fourier Transform, a commonly used signal (e.g. for audio) processing operation",
15+
"IFFT": "IFFT stands for Inverse Fast Fourier Transform, a commonly used signal (e.g. for audio) processing operation" ,
16+
"EMScripten": "EMScripten is a tool that can compiles code from various programming languages into JavaScript or WebAssembly",
17+
"WebAssembly": "WebAssembly (WASM for short) is a format for programs that can be executed very fast (much faster than JavaScript) in browsers and that can be generated from existing code-base in non JavaScript languages (e.g. C, C++, rust)",
18+
"WASM": {"alias": "WebAssembly"},
19+
"WebGL": "WebGL is a JavaScript API designed to run GPU-accelerated 3D graphics in browsers and can also be used to take advantage of the parallel computing capabilities of GPUs in general, a much needed feature for running Machine Learning models",
20+
"WebGPU": "WebGPU is an emerging JavaScript API to interact with GPU capabilities with more in-depth integration than possible with WebGL. These capabilities include their fast parallel computing, a much needed feature for running Machine Learning models",
21+
"SIMD": "SIMD stands for Single Instruction Multiple Data, an approach to accelerate parallel computing operations on CPUs - a particularly needed feature for running Machine Learning models",
22+
"vocoder": "vocoder stands for voice coder, a category of algorithms to encode and decode human voice",
23+
"TTS": "TTS stands for Text-To-Speech",
24+
"DSP": "DSP can stand for Digital Signal Processing or Digital Signal Processor (a hardware chip specialized in Digital Signal Processing)",
25+
"WebBluetooth": "WebBluetooth (sometimes WebBLE in short) is a browser JavaScript API to interact with Bluetooth low-energy devices",
26+
"WebBLE": {"alias": "WebBluetooth"},
27+
"WASI": "WASI stands for WebAssembly System Interfaces, a series of APIs developed by the WebAssembly Community Group, meant to help running WebAssembly outside of the browsers by providing integration with operating systems",
28+
"CG": "CG stands for W3C Community Group, a type of group W3C makes available for everyone to propose and to join and where a lot of the W3C pre-standardization work happens",
29+
"OpenVINO": "OpenVINO is an Intel toolking to optimizing machine learning models",
30+
"PyTorch": "PyTorch is one of the most popular Python library for machine learning development, providing a low-level API",
31+
"Keras": "Keras is one of the most popular Python library for machine learning development that provides a high-level API running on top of other Machine Learning frameworks (such as TensorFlow)",
32+
"TensorFlow.js": "TensorFlow.js (TFJS for short) is a JavaScript library to run Machine Learning models",
33+
"TensorFlow": "TensorFlow is a Python framework to build Machine Learning systems",
34+
"TFJS": {"alias": "TensorFlow.js"},
35+
"python": "python is one of the most popular programming languages for machine learning development, due to a combination of its high-performance numeric capabilities and a large community of data science users and libraries",
36+
"model DAG": "DAG stands for Directed Acyclic Graph, a data structure that can be used to represent how a neural network operates",
37+
"YOLO": "YOLO (“you only look once”) is a machine learning framework for real-time object detection",
38+
"differential privacy": "Differential privacy is an approach to provide information about groups within dataset without revealing information about individuals",
39+
"NLP": "NLP stands for Natural Language Processing - in the context of computer science, aiming at making human language processable by computers",
40+
"ASR": "ASR stands for Automatic Speech Recognition",
41+
"NPM": "NPM is a package management system for <a class=dfn>node.js</a>",
42+
"Node.js": "Node.js is a non-browser JavaScript runtime and environment, which usually expose different set of APIs than the ones used in a browser",
43+
"WebRTC": "WebRTC stands for Web Real-Time Communications, a set of browser APIs and protocols that enable the exchange of audio, video and data in near real-time",
44+
"WebXR": "WebXR is a set of browser JavaScript APIs that enable to develop in-browser Virtual and Augmented Reality experiences"
45+
}

tooltip.css

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/* Tooltip caché par défaut */
2+
.simpletooltip[aria-hidden="true"],
3+
.minimalist-simpletooltip[aria-hidden="true"],
4+
.minimalist-left-simpletooltip[aria-hidden="true"] {
5+
display: none;
6+
}
7+
/* position relative pour les conteneurs */
8+
.simpletooltip_container,
9+
.minimalist-simpletooltip_container,
10+
.minimalist-left-simpletooltip_container {
11+
position: relative;
12+
}
13+
14+
/* styles tooltip */
15+
.simpletooltip,
16+
.minimalist-simpletooltip,
17+
.minimalist-left-simpletooltip {
18+
position: absolute;
19+
z-index: 666;
20+
width: 10em;
21+
border-radius: .5em;
22+
background: rgba( 0, 0, 0, .9 );
23+
color: #eee;
24+
padding: .5em;
25+
text-align: left;
26+
line-height: 1.3;
27+
}
28+
.simpletooltip,
29+
.minimalist-simpletooltip {
30+
right: auto;
31+
left: 100%;
32+
margin-left: .5em;
33+
}
34+
.minimalist-left-simpletooltip {
35+
right: 100%;
36+
left: auto;
37+
margin-right: .5em;
38+
}
39+
/* utilise des pseudo-éléments pour faire les flèches */
40+
.simpletooltip::before,
41+
.minimalist-simpletooltip::before,
42+
.minimalist-left-simpletooltip::before {
43+
content: '';
44+
speak: none;
45+
position: absolute;
46+
z-index: 666;
47+
width: 10px;
48+
height: 10px;
49+
pointer-events: none;
50+
}
51+
.simpletooltip::before,
52+
.minimalist-simpletooltip::before {
53+
top: .5em;
54+
left: -10px;
55+
margin-left: -10px;
56+
border: 10px solid transparent;
57+
border-right: 10px solid rgba( 0, 0, 0, .9 );
58+
}
59+
.minimalist-left-simpletooltip::before {
60+
top: .5em;
61+
right: -10px;
62+
margin-right: -10px;
63+
border: 10px solid transparent;
64+
border-left: 10px solid rgba( 0, 0, 0, .9 )
65+
}
66+
67+
/* cela peut facilement être adapté pour les tablettes/mobiles */
68+
69+
/* pour cet exemple : mobile */
70+
@media (max-width: 44.375em) {
71+
72+
.simpletooltip,
73+
.minimalist-simpletooltip,
74+
.minimalist-left-simpletooltip {
75+
top: 100%;
76+
left: 50%;
77+
right: 0;
78+
margin: 0;
79+
margin-top: .7em;
80+
margin-left: -5em;
81+
}
82+
.simpletooltip::before,
83+
.minimalist-simpletooltip::before,
84+
.minimalist-left-simpletooltip::before {
85+
top: -10px;
86+
right: auto;
87+
left: 50%;
88+
margin-left: -5px;
89+
margin-top: -10px;
90+
border: 10px solid transparent;
91+
border-bottom: 10px solid rgba( 0, 0, 0, .9 );
92+
}
93+
94+
}
95+
.hidden {
96+
display: none;
97+
}

tooltip.js

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)