Skip to content

Instantly share code, notes, and snippets.

@jzstark

jzstark/example_08.html

Last active December 8, 2019 10:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jzstark/2270b0779dd6aa8d9fffb4493544d32d to your computer and use it in GitHub Desktop.
Save jzstark/2270b0779dd6aa8d9fffb4493544d32d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
example_08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Owl - OCaml Scientic and Engineering Computing</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body,{
delimiters: [
{left: "<math>", right: "</math>", display: false},
{left: "$$", right: "$$", display: true},
{left: "$", right: "$", display: false},
{left: "\\[", right: "\\]", display: true},
{left: "\\(", right: "\\)", display: false},
]}
);
});
</script>
<script>
function copyToClipboard(latexID) {
var latexItem = document.getElementById(latexID);
navigator.clipboard.writeText(latexItem.innerHTML).then(function() {
console.log("owl: copy to clipboard.");
}, function(err) {
console.error('owl: fail to copy latex due to ', err);
});
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.1/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@2.6.1/build/d3-graphviz.js"></script>
</head>
<body>
<div class="text-center" style="padding:20px">
<h1> Owl-Symbolic $\LaTeX$ Engine </h1>
</div>
<div class="container jumbotron" style="padding-top:30px; padding-bottom:20px">
<h2>
<span class="badge badge-secondary">
<i class="fa fa-square-root-alt"></i>
Expression #1
</span>
</h2>
<div id="expr-latex-1" style="visibility:hidden; height:0px">\exp(\sin(x_0)^2+\cos(x_0)^2)+10\times x_0^2+\exp(\pi\times 1.00i)</div>
$$\exp(\sin(x_0)^2+\cos(x_0)^2)+10\times x_0^2+\exp(\pi\times 1.00i)$$
<div style="text-align:center; padding:20px">
<button class="btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#viz-graph-1" aria-expanded="false" aria-controls="viz-graph-1">
<i class="fas fa-plus"></i>
computation graph
</button>
<button class="btn btn-outline-primary" type="button" onClick="copyToClipboard('expr-latex-1')">
<i class="far fa-copy"></i>
copy LaTeX
</button>
</div>
<div class="collapse" style="text-align:center" id="viz-graph-1"></div>
<script>
d3.select("#viz-graph-1").graphviz()
.fade(false)
.renderDot(`digraph CG {
node [shape=record];
24 -> 25;
11 -> 25;
23 -> 24;
15 -> 24;
22 -> 23;
21 -> 22;
18 -> 22;
20 -> 21;
19 -> 21;
7 -> 20;
17 -> 18;
16 -> 18;
7 -> 17;
14 -> 15;
13 -> 15;
7 -> 13;
12 -> 13;
10 -> 11;
9 -> 10;
8 -> 10;
25 [ label="{{#25 | { add_21 | Add }} | r:0; v:NaN;}"];
24 [ label="{{#24 | { add_20 | Add }} | r:1; v:NaN;}"];
23 [ label="{{#23 | { exp_19 | Exp }} | r:1; v:NaN;}"];
22 [ label="{{#22 | { add_18 | Add }} | r:1; v:NaN;}"];
21 [ label="{{#21 | { pow_17 | Pow }} | r:1; v:NaN;}"];
20 [ label="{{#20 | { sin_16 | Sin }} | r:1; v:NaN;}"];
7 [ label="{{#7 | { x_0 | Variable }} | r:3; v:NaN;}"];
19 [ label="{{#19 | { float_15 | Float }} | r:1; v:2.;}"];
18 [ label="{{#18 | { pow_14 | Pow }} | r:1; v:NaN;}"];
17 [ label="{{#17 | { cos_13 | Cos }} | r:1; v:NaN;}"];
16 [ label="{{#16 | { float_12 | Float }} | r:1; v:2.;}"];
15 [ label="{{#15 | { mul_11 | Mul }} | r:1; v:NaN;}"];
14 [ label="{{#14 | { float_10 | Float }} | r:1; v:10.;}"];
13 [ label="{{#13 | { pow_9 | Pow }} | r:1; v:NaN;}"];
12 [ label="{{#12 | { float_8 | Float }} | r:1; v:2.;}"];
11 [ label="{{#11 | { exp_7 | Exp }} | r:1; v:NaN;}"];
10 [ label="{{#10 | { mul_6 | Mul }} | r:1; v:NaN;}"];
9 [ label="{{#9 | { pi_5 | Pi }} | r:1; v:NaN;}"];
8 [ label="{{#8 | { complex_4 | Complex }} | r:1; v:NaN;}"];
}`);
</script>
</div>
<div class="container jumbotron" style="padding-top:30px; padding-bottom:20px">
<h2>
<span class="badge badge-secondary">
<i class="fa fa-square-root-alt"></i>
Expression #2
</span>
</h2>
<div id="expr-latex-2" style="visibility:hidden; height:0px">6+x_0+x_1</div>
$$6+x_0+x_1$$
<div style="text-align:center; padding:20px">
<button class="btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#viz-graph-2" aria-expanded="false" aria-controls="viz-graph-2">
<i class="fas fa-plus"></i>
computation graph
</button>
<button class="btn btn-outline-primary" type="button" onClick="copyToClipboard('expr-latex-2')">
<i class="far fa-copy"></i>
copy LaTeX
</button>
</div>
<div class="collapse" style="text-align:center" id="viz-graph-2"></div>
<script>
d3.select("#viz-graph-2").graphviz()
.fade(false)
.renderDot(`digraph CG {
node [shape=record];
5 -> 6;
2 -> 6;
4 -> 5;
3 -> 5;
6 [ label="{{#6 | { add_3 | Add }} | r:0; v:NaN;}"];
5 [ label="{{#5 | { add_2 | Add }} | r:1; v:NaN;}"];
4 [ label="{{#4 | { integer_1 | Int }} | r:1; v:6;}"];
3 [ label="{{#3 | { x_0 | Variable }} | r:1; v:NaN;}"];
2 [ label="{{#2 | { x_1 | Variable }} | r:1; v:NaN;}"];
}`);
</script>
</div>
<div class="container" style="width:100%; text-align:center">
OCaml Scientific and Engineering Computing <br />
Copyright (c) 2016-2019 <a href="http://ocaml.xyz">ocaml.xyz</a>
</div>
</body>
</html>
Raw
example_08.ml
open Owl_symbolic
open Op
open Infix
let make_expr0 () =
let x = variable "x_0" in
let y =
exp ((sin x ** float 2.) + (cos x ** float 2.))
+ (float 10. * (x ** float 2.))
+ exp (pi () * complex 0. 1.)
in
let expr = SymGraph.make_graph [| y |] "sym_graph" in
LaTeX_Engine.of_symbolic expr |> print_endline;
expr
let make_expr1 () =
let y = int 6 + variable "x_0" + variable "x_1" in
let expr = SymGraph.make_graph [| y |] "sym_graph" in
LaTeX_Engine.of_symbolic expr |> print_endline;
expr
let _ =
let exprs = [ make_expr0 (); make_expr1 (); ] in
LaTeX_Engine.html ~dot:true ~exprs "example_08.html"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment