Skip to content

Create deployment to be used in the blog #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 19, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
339 changes: 339 additions & 0 deletions content/3rd-party-libs.ipynb
Original file line number Diff line number Diff line change
@@ -0,0 +1,339 @@
{
"metadata": {
"kernelspec": {
"name": "xcpp23",
"display_name": "C++23",
"language": "cpp"
},
"language_info": {
"codemirror_mode": "text/x-c++src",
"file_extension": ".cpp",
"mimetype": "text/x-c++src",
"name": "C++",
"version": "23"
}
},
"nbformat_minor": 5,
"nbformat": 4,
"cells": [
{
"id": "472d1671-a068-4ce5-afae-076586f0b1b3",
"cell_type": "markdown",
"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\nThis 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\n1. **Scientific Computation (Symbolic & Numeric)**: `boost`, `symengine`, `openblas`\n2. **Array based Computation through Xtensor-stack**: `xtl`, `xtensor`, `xsimd`, `xtensor-blas`\n3. **Interactive Widgets**: `xwidgets`, `xcanvas`\n4. **Utilities & Miscellaneous**: `nlohmann_json`, and others",
"metadata": {}
},
{
"id": "c5f00d53-7cc9-43fb-82c7-c69b631e7b92",
"cell_type": "markdown",
"source": "## Scientific Computation (Symbolic & Numeric)\n\nLet’s begin with powerful C++ libraries for symbolic math, high-precision arithmetic, and efficient numerical computation using BLAS and LAPACK routines.",
"metadata": {}
},
{
"id": "7ef2ba09-bcc8-41e2-b503-3b21e60fdd3e",
"cell_type": "code",
"source": "#include <boost/multiprecision/cpp_int.hpp>\nusing namespace boost::multiprecision;\nusing namespace std;\n\nint128_t boost_product(long long A, long long B)\n{\n int128_t ans = (int128_t)A * B;\n return ans;\n}\n\nlong long first = 98745636214564698;\nlong long second = 7459874565236544789;\ncout << \"Product of \" << first << \" * \" << second << \" = \\n\"\n << boost_product(first, second);",
"metadata": {
"trusted": true
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": "Product of 98745636214564698 * 7459874565236544789 = \n736630060025131838840151335215258722"
}
],
"execution_count": 1
},
{
"id": "d8e235a1-5d41-43f8-8908-9f76b4c6c1d7",
"cell_type": "code",
"source": "#include <symengine/expression.h>\n\nusing namespace SymEngine;\n\nExpression x(\"x\");\nauto ex = pow(x + sqrt(Expression(2)), 6);",
"metadata": {
"trusted": true
},
"outputs": [],
"execution_count": 2
},
{
"id": "82912670-8abf-4364-8bfb-b55e206fb153",
"cell_type": "code",
"source": "#include <xcpp/xdisplay.hpp>\nxcpp::display(ex);",
"metadata": {
"trusted": true
},
"outputs": [
{
"output_type": "display_data",
"data": {
"text/latex": "$\\left(x + \\sqrt{2}\\right)^6$",
"text/plain": "(x + sqrt(2))**6"
},
"metadata": {}
}
],
"execution_count": 3
},
{
"id": "f738315b-f1ed-48b8-ae71-250b3667c694",
"cell_type": "code",
"source": "auto expanded_ex = expand(ex);\nxcpp::display(expanded_ex);",
"metadata": {
"trusted": true
},
"outputs": [
{
"output_type": "display_data",
"data": {
"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$",
"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"
},
"metadata": {}
}
],
"execution_count": 4
},
{
"id": "f25ec9b7-951e-4494-b932-64d71a601127",
"cell_type": "code",
"source": "#include <iostream>\n#include <iomanip>\n\ntypedef int INTEGER;\ntypedef double DOUBLE;\n\nextern \"C\" {\n int dgetrf_(const INTEGER* m, const INTEGER* n, DOUBLE* a,\n const INTEGER* lda, INTEGER* ipiv, INTEGER* info);\n}\n\nconst INTEGER m = 3, n = 3, lda = 3;\nDOUBLE 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\nINTEGER ipiv[3];\nINTEGER info;\n\ndgetrf_(&m, &n, A, &lda, ipiv, &info);\n\n// Output\nstd::cout << std::fixed << std::setprecision(6);\nstd::cout << \"LU Decomposition (OpenBLAS dgetrf_)\\n\";\nstd::cout << \"info: \" << info << \"\\n\\n\";\n\nstd::cout << \"Factorized Matrix (A after dgetrf_):\\n\";\nfor (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\nstd::cout << \"\\nPivot Indices:\\n\";\nfor (int i = 0; i < std::min(m, n); ++i)\n std::cout << ipiv[i] << \" \";\nstd::cout << \"\\n\";\n",
"metadata": {
"trusted": true
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": "LU Decomposition (OpenBLAS dgetrf_)\ninfo: 0\n\nFactorized 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\nPivot Indices:\n3 3 3 \n"
}
],
"execution_count": 5
},
{
"id": "6b7e64a2-546c-47a7-b4ed-95e98febd785",
"cell_type": "markdown",
"source": "## Array based Computation through Xtensor-stack\n\nExplore NumPy-style array computing in C++ with Xtensor, Xtensor-BLAS, and Xsimd — enabling high-performance numerical and SIMD-accelerated workflows.",
"metadata": {}
},
{
"id": "6496d5e7-d1e5-4437-be87-bb26b48ce735",
"cell_type": "code",
"source": "#include \"xtensor/containers/xarray.hpp\"\n#include \"xtensor/io/xio.hpp\"\n#include \"xtensor/views/xview.hpp\"\n\nxt::xarray<double> arr1 = {{1.0, 2.0, 3.0}, {2.0, 5.0, 7.0}, {2.0, 5.0, 7.0}};\nxt::xarray<double> arr2{5.0, 6.0, 7.0};\n\nxcpp::display(xt::view(arr1, 1) + arr2);",
"metadata": {
"trusted": true
},
"outputs": [
{
"output_type": "display_data",
"data": {
"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>"
},
"metadata": {}
}
],
"execution_count": 6
},
{
"id": "c748227d-4083-4c19-8f07-a449d41e67fe",
"cell_type": "code",
"source": "xt::xarray<int> arr = {1, 2, 3, 4, 5, 6, 7, 8, 9};\narr.reshape({3, 3});\n\nxcpp::display(arr);",
"metadata": {
"trusted": true
},
"outputs": [
{
"output_type": "display_data",
"data": {
"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>"
},
"metadata": {}
}
],
"execution_count": 7
},
{
"id": "74298554-9964-4633-bff3-e67d03a1797d",
"cell_type": "code",
"source": "#include <iostream>\n#include \"xtensor-blas/xlinalg.hpp\"\n\nxt::xtensor<double, 2> M = {{1.5, 0.5}, {0.7, 1.0}};",
"metadata": {
"trusted": true
},
"outputs": [],
"execution_count": 8
},
{
"id": "22dadb84-d39e-4028-a919-febd64f4a60d",
"cell_type": "code",
"source": "std::cout << \"Matrix rank: \" << xt::linalg::matrix_rank(M) << std::endl;\nstd::cout << \"Matrix inverse: \" << std::endl;\nxcpp::display(xt::linalg::inv(M));\nstd::cout << \"Eigen values: \" << std::endl;\nxcpp::display(xt::linalg::eigvals(M));",
"metadata": {
"trusted": true
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": "Matrix rank: 2\nMatrix inverse: \n"
},
{
"output_type": "display_data",
"data": {
"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>"
},
"metadata": {}
},
{
"name": "stdout",
"output_type": "stream",
"text": "Eigen values: \n"
},
{
"output_type": "display_data",
"data": {
"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>"
},
"metadata": {}
}
],
"execution_count": 9
},
{
"id": "d8e9e9e7-5def-4d77-b459-afb8002282ae",
"cell_type": "code",
"source": "#include <xsimd/xsimd.hpp>\n\nnamespace xs = xsimd;\n\n// Define two SIMD float vectors using the wasm backend\nxs::batch<float, xs::wasm> X = {1.2f, 3.4f, 5.6f, 7.8f};\nxs::batch<float, xs::wasm> Y = {2.1f, 4.3f, 6.5f, 8.7f};\n\n// Perform SIMD addition\nxs::batch<float, xs::wasm> Z = X + Y;\n\n// Print the result\nstd::cout << Z << std::endl;",
"metadata": {
"trusted": true
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": "(3.300000, 7.700000, 12.100000, 16.500000)\n"
}
],
"execution_count": 10
},
{
"id": "0f0978c4-7ec4-4615-894a-c6558503d851",
"cell_type": "markdown",
"source": "## Interactive Widgets\n\nBuild rich, interactive UI components in C++ using xwidgets and xcanvas, seamlessly integrated with the Jupyter frontend.",
"metadata": {}
},
{
"id": "2ce27d4d-43f7-464c-a611-5400c3cdb735",
"cell_type": "code",
"source": "#include <xwidgets/xslider.hpp>\n\nxw::slider<double> slider;",
"metadata": {
"trusted": true
},
"outputs": [],
"execution_count": 11
},
{
"id": "36b1b0f7-00d9-47bf-8543-985e27088d07",
"cell_type": "code",
"source": "slider.value = 20;\nslider.max = 40;\nslider.style().handle_color = \"blue\";\nslider.orientation = \"vertical\";\nslider.description = \"A slider\";",
"metadata": {
"trusted": true
},
"outputs": [],
"execution_count": 12
},
{
"id": "b2647bb5-0c2e-4f12-b0ed-0c0f5c7ed65c",
"cell_type": "code",
"source": "// Need to re-run this to see the slider being displayed\nxcpp::display(slider);",
"metadata": {
"trusted": true
},
"outputs": [
{
"output_type": "display_data",
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "07f19b34aac74f97947e4e9b068ebe5f",
"version_major": 2,
"version_minor": 1
},
"text/plain": "A Jupyter widget with unique id: 07f19b34aac74f97947e4e9b068ebe5f"
},
"metadata": {}
}
],
"execution_count": 13
},
{
"id": "0f3e4dcb-5d9f-479b-b568-8d7625683946",
"cell_type": "code",
"source": "#include <sstream>\n#include \"xcanvas/xcanvas.hpp\"\n\nauto canvas = xc::canvas().initialize()\n .width(300)\n .height(300)\n .finalize();",
"metadata": {
"trusted": true
},
"outputs": [],
"execution_count": 14
},
{
"id": "1eed2b39-b632-440c-9d3d-c8d377bc504c",
"cell_type": "code",
"source": "canvas.shadow_offset_x = 0;\ncanvas.shadow_offset_y = 0;\ncanvas.shadow_blur = 0;\n\nfor (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}",
"metadata": {
"trusted": true
},
"outputs": [],
"execution_count": 15
},
{
"id": "4d1797e5-3ce1-4737-9561-a87a7e82cce1",
"cell_type": "code",
"source": "// Need to re-run this to see the canvas being displayed\nxcpp::display(canvas);",
"metadata": {
"trusted": true
},
"outputs": [
{
"output_type": "display_data",
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "e34c45cc453240cebac33426cd7c448d",
"version_major": 2,
"version_minor": 1
},
"text/plain": "A Jupyter widget with unique id: e34c45cc453240cebac33426cd7c448d"
},
"metadata": {}
}
],
"execution_count": 16
},
{
"id": "d26a70d2-9dc6-4ca0-b974-2cfd4249a8a7",
"cell_type": "markdown",
"source": "## Miscallaneous\n\nFeel free to explore other useful C++ libraries in the browser, like nlohmann_json, pugixml, xtl etc",
"metadata": {}
},
{
"id": "e1fdb4b5-384a-42a1-80c1-ba2bcd515e01",
"cell_type": "code",
"source": "#include \"nlohmann/json.hpp\"\n\nnlohmann::json jsonObject;\n\njsonObject[\"name\"] = \"John Doe\";\njsonObject[\"age\"] = 30;\njsonObject[\"is_student\"] = false;\njsonObject[\"skills\"] = {\"C++\", \"Python\", \"JavaScript\"};\n\nstd::cout << jsonObject.dump(4) << std::endl;",
"metadata": {
"trusted": true
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": "{\n \"age\": 30,\n \"is_student\": false,\n \"name\": \"John Doe\",\n \"skills\": [\n \"C++\",\n \"Python\",\n \"JavaScript\"\n ]\n}\n"
}
],
"execution_count": 17
},
{
"id": "ed69c0cd-c65a-47d7-9ee2-13502953e876",
"cell_type": "code",
"source": "",
"metadata": {
"trusted": true
},
"outputs": [],
"execution_count": null
}
]
}
Binary file added content/audio.wav
Binary file not shown.
Loading
Loading