Add dynamic download buttons

src/app.css

@@ -4,6 +4,10 @@
 
 	--text-main: #232323;
 	--accent: #351e75;
+	
+	--highlight: #ffa74d;
+	--highlight-major: #fb701a;
+	--shadow: rgba(80, 80, 80, 0.5);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -12,6 +16,7 @@
 		--bg-bright: black;
 
 		--text-main: #f3f3f3;
+		--shadow: rgba(5, 5, 5, 0.5);
 	}
 
 	#output-graph > div {
@@ -20,9 +25,11 @@
 }
 
 html, body {
-	margin: 0; padding: 0;
+	margin: 0;
+	padding: 0;
 	font-size: 100%;
 }
+
 body {
 	min-height: 100vh;
 	font-family: Ubuntu, sans-serif;
@@ -34,6 +41,7 @@ body {
 	grid-template-rows: auto 75vh 1fr auto;
 	grid-template-areas: "header"
 		"summary"
+		"controls"
 		"graph"
 		"footer";
 }
@@ -54,6 +62,12 @@ textarea, input, #output-graph {
 	grid-area: summary;
 }
 
+#controls-intermediate {
+	grid-area: controls;
+	display: flex;
+	justify-content: center;
+}
+
 #output-graph {
 	grid-area: graph;
 	overflow-x: scroll;
@@ -73,3 +87,29 @@ footer {
 	max-width: 1.25em;
 	vertical-align: middle;
 }
+
+.action-button.major {
+	background: var(--highlight-major);
+}
+
+.action-button {
+	margin: 1em;
+	display: inline-block;
+	padding: .35em .45em;
+	border-radius: .25em;
+	background: var(--highlight);
+	color: var(--text-main);
+	font-size: 1.25em;
+	text-decoration: none;
+	box-shadow: 0 0 .5em var(--shadow);
+	cursor: pointer;
+	transition: box-shadow .25s, transform .25s;
+}
+.action-button:hover {
+	box-shadow: 0 .25em .65em var(--shadow);
+	transform: translateY(-.25em);
+}
+.action-button:active {
+	box-shadow: 0 0 .25em var(--shadow);
+	transform: translateY(.1em)
+}

src/app.mjs

@@ -3,7 +3,12 @@
 import parse_summary from './lib/parse_summary.mjs';
 import make_graph from './lib/make_graph.mjs';
 
-function do_visualisation(el_in, el_out) {
+function do_visualisation() {
+	const el_in = document.querySelector("#input-summary");
+	const el_out = document.querySelector("#output-graph");
+	const el_link_source = document.querySelector("#button-download-source");
+	const el_link_svg = document.querySelector("#button-download-svg");
+	
 	console.log(el_in, el_out);
 	const source = el_in.value.trim();
 	
@@ -12,20 +17,24 @@ function do_visualisation(el_in, el_out) {
 	const summary = parse_summary(source);
 	console.log(summary);
 	
-	const svg = make_graph(summary);
+	const result = make_graph(summary);
 	
 	const container = document.createElement("div");
-	container.innerHTML = svg;
+	container.innerHTML = result.svg;
 	
 	el_out.replaceChildren(container);
+	
+	el_link_source.setAttribute("href", `data:text/plain;base64,${btoa(result.source)}`);
+	el_link_source.setAttribute("download", "model.nomnoml");
+	el_link_svg.setAttribute("href", `data:text/plain;base64,${btoa(result.svg)}`);
+	el_link_svg.setAttribute("download", "model.svg");
 }
 
 window.addEventListener("load", () => {
 	const el_in = document.querySelector("#input-summary");
-	const el_out = document.querySelector("#output-graph");
 	
-	el_in.addEventListener("changed", do_visualisation.bind(this, el_in, el_out));
+	el_in.addEventListener("changed", do_visualisation);
-	el_in.addEventListener("keyup", do_visualisation.bind(this, el_in, el_out));
+	el_in.addEventListener("keyup", do_visualisation);
 	
-	do_visualisation(el_in, el_out);
+	do_visualisation();
 });

src/index.html

@@ -14,6 +14,12 @@
 		</h1>
 		
 		<textarea name="input-summary" id="input-summary" placeholder="Paste a tensorflow summary here"></textarea>
+		
+		<div id="controls-intermediate">
+			<a class="action-button major" target="_blank" id="button-download-svg">Download SVG</a>
+			<a class="action-button major" target="_blank" id="button-download-source">Download nomnoml source</a>
+		</div>
+		
 		<div id="output-graph"></div>
 		
 		<footer>

src/lib/make_graph.mjs

@@ -22,5 +22,5 @@ export default function make_graph(summary) {
 	console.info(`[make_graph] nomnoml source:\n${nomnoml_source}`);
 	
 	const svg = nomnoml.renderSvg(nomnoml_source);
-	return svg;
+	return { svg, source: nomnoml_source };
 }