hdt/tests/resources/test-wasm.html at main · DeciSym/hdt · GitHub

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
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>HDT WASM32 Test</title>
		<style>
			body {
				font-family: monospace;
				padding: 20px;
				max-width: 1240px;
				margin: 0 auto;
			}
			pre {
				background: #f4f4f4;
				padding: 10px;
				border: 1px solid #ddd;
				overflow-x: auto;
			}
			.status {
				padding: 8px;
				margin: 10px 0;
				border-radius: 4px;
			}
			.loading {
				background: #fff3cd;
			}
			.success {
				background: #d4edda;
			}
			.error {
				background: #f8d7da;
			}
		</style>
	</head>
	<body>
		<h1>HDT WASM32 Test</h1>
		<dl>
			<dt>1. Build</dt>
			<dd>
				<code>RUSTFLAGS="-C target-feature=+simd128" wasm-pack build --target web --release -- --features wasm</code>
			</dd>

			<dt>2. Run server (requires downloading and unpacking <a href="https://github.com/KonradHoeffner/hdt/releases/download/benchmarkdata/persondata_en.hdt.bz2">persondata_en.hdt</a> into tests/resources)</dt>
			<dd>
				<code>python3 -m http.server 8000</code><br />
				(<em>or:</em> <code>php -S localhost:8000</code> <em>or:</em> <code>npx http-server -p 8000</code>)
			</dd>
		</dl>
		<div id="status" class="status loading">Loading...</div>
		<div id="output"></div>

		<script type="module">
			// new wasm32 code
			import init, { Hdt } from '../../pkg/hdt.js';
			const outputDiv = document.getElementById('output');

			async function run() {
				log('Loading WASM...');
				await init();
				log('WASM initialized.');
				log('Loading HDT file...');
				const path = '/tests/resources/persondata_en.hdt';
				const response = await fetch(path);
				const data = new Uint8Array(await response.arrayBuffer());
				log('Parsing HDT...');
				const hdt = new Hdt(data);
				log('HDT loaded.', 'success');
				let start = performance.now();
				log('Querying all triples with subject Belinda Wright...');
				const belindaIds = hdt.triple_ids_with_pattern('http://dbpedia.org/resource/Belinda_Wright_(conservationist)', null, null);
				log('Queried all triples with subject Belinda Wright, translating to strings...');
				const belindaStrings = hdt.ids_to_strings(belindaIds);
				outputDiv.innerText = belindaStrings;
				log(`Queried and translated all triples with subject Belinda Wright in ${performance.now() - start} ms, now loading all ~10M triple IDs`);
				start = performance.now();
				const ids = hdt.triple_ids_with_pattern(null, null, null);
				log(`Loaded all ~10M triple IDs in ${performance.now() - start} ms, translating the last 100 to strings... `);
				start = performance.now();
				const lastStrings = hdt.ids_to_strings(ids.subarray(-300));
				outputDiv.innerText = lastStrings;
				log(`Translated the last 100 triple IDs to string in ${performance.now() - start} ms`, 'success');
			}
			run();

			function log(message, status = 'loading') {
				const statusDiv = document.getElementById('status');
				statusDiv.innerHTML += '<br>\n' + message;
				statusDiv.className = `status ${status}`;
				console.log(`[${status}] ${message}`);
			}
		</script>
	</body>
</html>