1
+ {
2
+ "metadata" : {
3
+ "kernelspec" : {
4
+ "name" : " xcpp23" ,
5
+ "display_name" : " C++23" ,
6
+ "language" : " cpp"
7
+ },
8
+ "language_info" : {
9
+ "codemirror_mode" : " text/x-c++src" ,
10
+ "file_extension" : " .cpp" ,
11
+ "mimetype" : " text/x-c++src" ,
12
+ "name" : " C++" ,
13
+ "version" : " 23"
14
+ }
15
+ },
16
+ "nbformat_minor" : 5 ,
17
+ "nbformat" : 4 ,
18
+ "cells" : [
19
+ {
20
+ "id" : " 472d1671-a068-4ce5-afae-076586f0b1b3" ,
21
+ "cell_type" : " markdown" ,
22
+ "source" : " <center>\n <h1>Interactive Demos of C++ Libraries in the Browser</h1>\n <h3>Powered by Xeus-Cpp-Lite and WebAssembly</h3>\n </center>\n\n This notebook demonstrates several powerful C++ libraries running entirely in the browser using **xeus-cpp-lite**. The examples span symbolic computation, numerical analysis, interactive visualization, and more — all compiled to WebAssembly and ready to run in a JupyterLite environment.\n\n **Featured libraries:**\n\n 1. **Scientific Computation (Symbolic & Numeric)**: `boost`, `symengine`, `openblas`\n 2. **Array based Computation through Xtensor-stack**: `xtl`, `xtensor`, `xsimd`, `xtensor-blas`\n 3. **Interactive Widgets**: `xwidgets`, `xcanvas`\n 4. **Utilities & Miscellaneous**: `nlohmann_json`, and others" ,
23
+ "metadata" : {}
24
+ },
25
+ {
26
+ "id" : " c5f00d53-7cc9-43fb-82c7-c69b631e7b92" ,
27
+ "cell_type" : " markdown" ,
28
+ "source" : " ## Scientific Computation (Symbolic & Numeric)\n\n Let’s begin with powerful C++ libraries for symbolic math, high-precision arithmetic, and efficient numerical computation using BLAS and LAPACK routines." ,
29
+ "metadata" : {}
30
+ },
31
+ {
32
+ "id" : " 7ef2ba09-bcc8-41e2-b503-3b21e60fdd3e" ,
33
+ "cell_type" : " code" ,
34
+ "source" : " #include <boost/multiprecision/cpp_int.hpp>\n using namespace boost::multiprecision;\n using namespace std;\n\n int128_t boost_product(long long A, long long B)\n {\n int128_t ans = (int128_t)A * B;\n return ans;\n }\n\n long long first = 98745636214564698;\n long long second = 7459874565236544789;\n cout << \" Product of \" << first << \" * \" << second << \" = \\ n\"\n << boost_product(first, second);" ,
35
+ "metadata" : {
36
+ "trusted" : true
37
+ },
38
+ "outputs" : [
39
+ {
40
+ "name" : " stdout" ,
41
+ "output_type" : " stream" ,
42
+ "text" : " Product of 98745636214564698 * 7459874565236544789 = \n 736630060025131838840151335215258722"
43
+ }
44
+ ],
45
+ "execution_count" : 1
46
+ },
47
+ {
48
+ "id" : " d8e235a1-5d41-43f8-8908-9f76b4c6c1d7" ,
49
+ "cell_type" : " code" ,
50
+ "source" : " #include <symengine/expression.h>\n\n using namespace SymEngine;\n\n Expression x(\" x\" );\n auto ex = pow(x + sqrt(Expression(2)), 6);" ,
51
+ "metadata" : {
52
+ "trusted" : true
53
+ },
54
+ "outputs" : [],
55
+ "execution_count" : 2
56
+ },
57
+ {
58
+ "id" : " 82912670-8abf-4364-8bfb-b55e206fb153" ,
59
+ "cell_type" : " code" ,
60
+ "source" : " #include <xcpp/xdisplay.hpp>\n xcpp::display(ex);" ,
61
+ "metadata" : {
62
+ "trusted" : true
63
+ },
64
+ "outputs" : [
65
+ {
66
+ "output_type" : " display_data" ,
67
+ "data" : {
68
+ "text/latex" : " $\\ left(x + \\ sqrt{2}\\ right)^6$" ,
69
+ "text/plain" : " (x + sqrt(2))**6"
70
+ },
71
+ "metadata" : {}
72
+ }
73
+ ],
74
+ "execution_count" : 3
75
+ },
76
+ {
77
+ "id" : " f738315b-f1ed-48b8-ae71-250b3667c694" ,
78
+ "cell_type" : " code" ,
79
+ "source" : " auto expanded_ex = expand(ex);\n xcpp::display(expanded_ex);" ,
80
+ "metadata" : {
81
+ "trusted" : true
82
+ },
83
+ "outputs" : [
84
+ {
85
+ "output_type" : " display_data" ,
86
+ "data" : {
87
+ "text/latex" : " $8 + 24 \\ sqrt{2} x + 40 \\ sqrt{2} x^3 + 6 \\ sqrt{2} x^5 + 60 x^2 + 30 x^4 + x^6$" ,
88
+ "text/plain" : " 8 + 24*sqrt(2)*x + 40*sqrt(2)*x**3 + 6*sqrt(2)*x**5 + 60*x**2 + 30*x**4 + x**6"
89
+ },
90
+ "metadata" : {}
91
+ }
92
+ ],
93
+ "execution_count" : 4
94
+ },
95
+ {
96
+ "id" : " f25ec9b7-951e-4494-b932-64d71a601127" ,
97
+ "cell_type" : " code" ,
98
+ "source" : " #include <iostream>\n #include <iomanip>\n\n typedef int INTEGER;\n typedef double DOUBLE;\n\n extern \" C\" {\n int dgetrf_(const INTEGER* m, const INTEGER* n, DOUBLE* a,\n const INTEGER* lda, INTEGER* ipiv, INTEGER* info);\n }\n\n const INTEGER m = 3, n = 3, lda = 3;\n DOUBLE A[9] = {\n 1.0, 2.0, 3.0,\n 4.0, 5.0, 6.0,\n 7.0, 8.0, 10.0\n }; // Column-major layout\n\n INTEGER ipiv[3];\n INTEGER info;\n\n dgetrf_(&m, &n, A, &lda, ipiv, &info);\n\n // Output\n std::cout << std::fixed << std::setprecision(6);\n std::cout << \" LU Decomposition (OpenBLAS dgetrf_)\\ n\" ;\n std::cout << \" info: \" << info << \"\\ n\\ n\" ;\n\n std::cout << \" Factorized Matrix (A after dgetrf_):\\ n\" ;\n for (int i = 0; i < m; ++i) {\n for (int j = 0; j < n; ++j)\n std::cout << std::setw(10) << A[i + j * lda];\n std::cout << \"\\ n\" ;\n }\n\n std::cout << \"\\ nPivot Indices:\\ n\" ;\n for (int i = 0; i < std::min(m, n); ++i)\n std::cout << ipiv[i] << \" \" ;\n std::cout << \"\\ n\" ;\n " ,
99
+ "metadata" : {
100
+ "trusted" : true
101
+ },
102
+ "outputs" : [
103
+ {
104
+ "name" : " stdout" ,
105
+ "output_type" : " stream" ,
106
+ "text" : " LU Decomposition (OpenBLAS dgetrf_)\n info: 0\n\n Factorized Matrix (A after dgetrf_):\n 3.000000 6.000000 10.000000\n 0.333333 2.000000 3.666667\n 0.666667 0.500000 -0.500000\n\n Pivot Indices:\n 3 3 3 \n "
107
+ }
108
+ ],
109
+ "execution_count" : 5
110
+ },
111
+ {
112
+ "id" : " 6b7e64a2-546c-47a7-b4ed-95e98febd785" ,
113
+ "cell_type" : " markdown" ,
114
+ "source" : " ## Array based Computation through Xtensor-stack\n\n Explore NumPy-style array computing in C++ with Xtensor, Xtensor-BLAS, and Xsimd — enabling high-performance numerical and SIMD-accelerated workflows." ,
115
+ "metadata" : {}
116
+ },
117
+ {
118
+ "id" : " 6496d5e7-d1e5-4437-be87-bb26b48ce735" ,
119
+ "cell_type" : " code" ,
120
+ "source" : " #include \" xtensor/containers/xarray.hpp\"\n #include \" xtensor/io/xio.hpp\"\n #include \" xtensor/views/xview.hpp\"\n\n xt::xarray<double> arr1 = {{1.0, 2.0, 3.0}, {2.0, 5.0, 7.0}, {2.0, 5.0, 7.0}};\n xt::xarray<double> arr2{5.0, 6.0, 7.0};\n\n xcpp::display(xt::view(arr1, 1) + arr2);" ,
121
+ "metadata" : {
122
+ "trusted" : true
123
+ },
124
+ "outputs" : [
125
+ {
126
+ "output_type" : " display_data" ,
127
+ "data" : {
128
+ "text/html" : " <table style='border-style:solid;border-width:1px;'><tbody><tr><td style='font-family:monospace;' title='0'><pre> 7.</pre></td></tr><tr><td style='font-family:monospace;' title='1'><pre> 11.</pre></td></tr><tr><td style='font-family:monospace;' title='2'><pre> 14.</pre></td></tr></tbody></table>"
129
+ },
130
+ "metadata" : {}
131
+ }
132
+ ],
133
+ "execution_count" : 6
134
+ },
135
+ {
136
+ "id" : " c748227d-4083-4c19-8f07-a449d41e67fe" ,
137
+ "cell_type" : " code" ,
138
+ "source" : " xt::xarray<int> arr = {1, 2, 3, 4, 5, 6, 7, 8, 9};\n arr.reshape({3, 3});\n\n xcpp::display(arr);" ,
139
+ "metadata" : {
140
+ "trusted" : true
141
+ },
142
+ "outputs" : [
143
+ {
144
+ "output_type" : " display_data" ,
145
+ "data" : {
146
+ "text/html" : " <table style='border-style:solid;border-width:1px;'><tbody><tr><td style='font-family:monospace;' title='(0, 0)'><pre>1</pre></td><td style='font-family:monospace;' title='(0, 1)'><pre>2</pre></td><td style='font-family:monospace;' title='(0, 2)'><pre>3</pre></td></tr><tr><td style='font-family:monospace;' title='(1, 0)'><pre>4</pre></td><td style='font-family:monospace;' title='(1, 1)'><pre>5</pre></td><td style='font-family:monospace;' title='(1, 2)'><pre>6</pre></td></tr><tr><td style='font-family:monospace;' title='(2, 0)'><pre>7</pre></td><td style='font-family:monospace;' title='(2, 1)'><pre>8</pre></td><td style='font-family:monospace;' title='(2, 2)'><pre>9</pre></td></tr></tbody></table>"
147
+ },
148
+ "metadata" : {}
149
+ }
150
+ ],
151
+ "execution_count" : 7
152
+ },
153
+ {
154
+ "id" : " 74298554-9964-4633-bff3-e67d03a1797d" ,
155
+ "cell_type" : " code" ,
156
+ "source" : " #include <iostream>\n #include \" xtensor-blas/xlinalg.hpp\"\n\n xt::xtensor<double, 2> M = {{1.5, 0.5}, {0.7, 1.0}};" ,
157
+ "metadata" : {
158
+ "trusted" : true
159
+ },
160
+ "outputs" : [],
161
+ "execution_count" : 8
162
+ },
163
+ {
164
+ "id" : " 22dadb84-d39e-4028-a919-febd64f4a60d" ,
165
+ "cell_type" : " code" ,
166
+ "source" : " std::cout << \" Matrix rank: \" << xt::linalg::matrix_rank(M) << std::endl;\n std::cout << \" Matrix inverse: \" << std::endl;\n xcpp::display(xt::linalg::inv(M));\n std::cout << \" Eigen values: \" << std::endl;\n xcpp::display(xt::linalg::eigvals(M));" ,
167
+ "metadata" : {
168
+ "trusted" : true
169
+ },
170
+ "outputs" : [
171
+ {
172
+ "name" : " stdout" ,
173
+ "output_type" : " stream" ,
174
+ "text" : " Matrix rank: 2\n Matrix inverse: \n "
175
+ },
176
+ {
177
+ "output_type" : " display_data" ,
178
+ "data" : {
179
+ "text/html" : " <table style='border-style:solid;border-width:1px;'><tbody><tr><td style='font-family:monospace;' title='(0, 0)'><pre> 0.869565</pre></td><td style='font-family:monospace;' title='(0, 1)'><pre>-0.434783</pre></td></tr><tr><td style='font-family:monospace;' title='(1, 0)'><pre>-0.608696</pre></td><td style='font-family:monospace;' title='(1, 1)'><pre> 1.304348</pre></td></tr></tbody></table>"
180
+ },
181
+ "metadata" : {}
182
+ },
183
+ {
184
+ "name" : " stdout" ,
185
+ "output_type" : " stream" ,
186
+ "text" : " Eigen values: \n "
187
+ },
188
+ {
189
+ "output_type" : " display_data" ,
190
+ "data" : {
191
+ "text/html" : " <table style='border-style:solid;border-width:1px;'><tbody><tr><td style='font-family:monospace;' title='0'><pre> 1.892262+0.i</pre></td></tr><tr><td style='font-family:monospace;' title='1'><pre> 0.607738+0.i</pre></td></tr></tbody></table>"
192
+ },
193
+ "metadata" : {}
194
+ }
195
+ ],
196
+ "execution_count" : 9
197
+ },
198
+ {
199
+ "id" : " d8e9e9e7-5def-4d77-b459-afb8002282ae" ,
200
+ "cell_type" : " code" ,
201
+ "source" : " #include <xsimd/xsimd.hpp>\n\n namespace xs = xsimd;\n\n // Define two SIMD float vectors using the wasm backend\n xs::batch<float, xs::wasm> X = {1.2f, 3.4f, 5.6f, 7.8f};\n xs::batch<float, xs::wasm> Y = {2.1f, 4.3f, 6.5f, 8.7f};\n\n // Perform SIMD addition\n xs::batch<float, xs::wasm> Z = X + Y;\n\n // Print the result\n std::cout << Z << std::endl;" ,
202
+ "metadata" : {
203
+ "trusted" : true
204
+ },
205
+ "outputs" : [
206
+ {
207
+ "name" : " stdout" ,
208
+ "output_type" : " stream" ,
209
+ "text" : " (3.300000, 7.700000, 12.100000, 16.500000)\n "
210
+ }
211
+ ],
212
+ "execution_count" : 10
213
+ },
214
+ {
215
+ "id" : " 0f0978c4-7ec4-4615-894a-c6558503d851" ,
216
+ "cell_type" : " markdown" ,
217
+ "source" : " ## Interactive Widgets\n\n Build rich, interactive UI components in C++ using xwidgets and xcanvas, seamlessly integrated with the Jupyter frontend." ,
218
+ "metadata" : {}
219
+ },
220
+ {
221
+ "id" : " 2ce27d4d-43f7-464c-a611-5400c3cdb735" ,
222
+ "cell_type" : " code" ,
223
+ "source" : " #include <xwidgets/xslider.hpp>\n\n xw::slider<double> slider;" ,
224
+ "metadata" : {
225
+ "trusted" : true
226
+ },
227
+ "outputs" : [],
228
+ "execution_count" : 11
229
+ },
230
+ {
231
+ "id" : " 36b1b0f7-00d9-47bf-8543-985e27088d07" ,
232
+ "cell_type" : " code" ,
233
+ "source" : " slider.value = 20;\n slider.max = 40;\n slider.style().handle_color = \" blue\" ;\n slider.orientation = \" vertical\" ;\n slider.description = \" A slider\" ;" ,
234
+ "metadata" : {
235
+ "trusted" : true
236
+ },
237
+ "outputs" : [],
238
+ "execution_count" : 12
239
+ },
240
+ {
241
+ "id" : " b2647bb5-0c2e-4f12-b0ed-0c0f5c7ed65c" ,
242
+ "cell_type" : " code" ,
243
+ "source" : " // Need to re-run this to see the slider being displayed\n xcpp::display(slider);" ,
244
+ "metadata" : {
245
+ "trusted" : true
246
+ },
247
+ "outputs" : [
248
+ {
249
+ "output_type" : " display_data" ,
250
+ "data" : {
251
+ "application/vnd.jupyter.widget-view+json" : {
252
+ "model_id" : " 07f19b34aac74f97947e4e9b068ebe5f" ,
253
+ "version_major" : 2 ,
254
+ "version_minor" : 1
255
+ },
256
+ "text/plain" : " A Jupyter widget with unique id: 07f19b34aac74f97947e4e9b068ebe5f"
257
+ },
258
+ "metadata" : {}
259
+ }
260
+ ],
261
+ "execution_count" : 13
262
+ },
263
+ {
264
+ "id" : " 0f3e4dcb-5d9f-479b-b568-8d7625683946" ,
265
+ "cell_type" : " code" ,
266
+ "source" : " #include <sstream>\n #include \" xcanvas/xcanvas.hpp\"\n\n auto canvas = xc::canvas().initialize()\n .width(300)\n .height(300)\n .finalize();" ,
267
+ "metadata" : {
268
+ "trusted" : true
269
+ },
270
+ "outputs" : [],
271
+ "execution_count" : 14
272
+ },
273
+ {
274
+ "id" : " 1eed2b39-b632-440c-9d3d-c8d377bc504c" ,
275
+ "cell_type" : " code" ,
276
+ "source" : " canvas.shadow_offset_x = 0;\n canvas.shadow_offset_y = 0;\n canvas.shadow_blur = 0;\n\n for (std::size_t i = 0; i < 200; i++)\n {\n std::stringstream color;\n color << \" rgb(200, \" << 200 - i << \" , \" << i << \" )\" ;\n canvas.fill_style = color.str();\n canvas.fill_rect(0, 0, 200, 200 - i);\n }" ,
277
+ "metadata" : {
278
+ "trusted" : true
279
+ },
280
+ "outputs" : [],
281
+ "execution_count" : 15
282
+ },
283
+ {
284
+ "id" : " 4d1797e5-3ce1-4737-9561-a87a7e82cce1" ,
285
+ "cell_type" : " code" ,
286
+ "source" : " // Need to re-run this to see the canvas being displayed\n xcpp::display(canvas);" ,
287
+ "metadata" : {
288
+ "trusted" : true
289
+ },
290
+ "outputs" : [
291
+ {
292
+ "output_type" : " display_data" ,
293
+ "data" : {
294
+ "application/vnd.jupyter.widget-view+json" : {
295
+ "model_id" : " e34c45cc453240cebac33426cd7c448d" ,
296
+ "version_major" : 2 ,
297
+ "version_minor" : 1
298
+ },
299
+ "text/plain" : " A Jupyter widget with unique id: e34c45cc453240cebac33426cd7c448d"
300
+ },
301
+ "metadata" : {}
302
+ }
303
+ ],
304
+ "execution_count" : 16
305
+ },
306
+ {
307
+ "id" : " d26a70d2-9dc6-4ca0-b974-2cfd4249a8a7" ,
308
+ "cell_type" : " markdown" ,
309
+ "source" : " ## Miscallaneous\n\n Feel free to explore other useful C++ libraries in the browser, like nlohmann_json, pugixml, xtl etc" ,
310
+ "metadata" : {}
311
+ },
312
+ {
313
+ "id" : " e1fdb4b5-384a-42a1-80c1-ba2bcd515e01" ,
314
+ "cell_type" : " code" ,
315
+ "source" : " #include \" nlohmann/json.hpp\"\n\n nlohmann::json jsonObject;\n\n jsonObject[\" name\" ] = \" John Doe\" ;\n jsonObject[\" age\" ] = 30;\n jsonObject[\" is_student\" ] = false;\n jsonObject[\" skills\" ] = {\" C++\" , \" Python\" , \" JavaScript\" };\n\n std::cout << jsonObject.dump(4) << std::endl;" ,
316
+ "metadata" : {
317
+ "trusted" : true
318
+ },
319
+ "outputs" : [
320
+ {
321
+ "name" : " stdout" ,
322
+ "output_type" : " stream" ,
323
+ "text" : " {\n \" age\" : 30,\n \" is_student\" : false,\n \" name\" : \" John Doe\" ,\n \" skills\" : [\n \" C++\" ,\n \" Python\" ,\n \" JavaScript\"\n ]\n }\n "
324
+ }
325
+ ],
326
+ "execution_count" : 17
327
+ },
328
+ {
329
+ "id" : " ed69c0cd-c65a-47d7-9ee2-13502953e876" ,
330
+ "cell_type" : " code" ,
331
+ "source" : " " ,
332
+ "metadata" : {
333
+ "trusted" : true
334
+ },
335
+ "outputs" : [],
336
+ "execution_count" : null
337
+ }
338
+ ]
339
+ }
0 commit comments