public/index.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>UGS Demo</title>
		<!-- Anyline Guidance SDK css -->
		<link rel="stylesheet" type="text/css" href="./build/index.css" />
		<style>
			body {
				font-family: Arial, Helvetica, sans-serif;
			}
			.button {
				min-width: 100px;
				height: 54px;
			}
		</style>
		<!-- Anyline Guidance SDK js -->
		<script src="./build/index.js"></script>
		<script type="text/javascript">
			document.addEventListener('DOMContentLoaded', event => {
				let blobUrl = '';
				const startSdk = async config => {
					const errorElement = document.getElementById('error');
					errorElement.innerText = '';
					try {
						Anyline.default(config, {
							onComplete: ({ blob }) => {
								blobUrl = URL.createObjectURL(blob);
								const imgElement =
									document.getElementById('new-image');

								imgElement.src = blobUrl;
							},
						});
					} catch (err) {
						console.log('Error', err);
						errorElement.innerText = err;
					}
				};

				const config = {
					onboardingInstructions: {
						timesShown: 3,
					},
				};

				document
					.getElementById('start-sdk-btn')
					.addEventListener('click', () => startSdk(config, 'asd'));

				document
					.getElementById('download-button')
					.addEventListener('click', () => {
						if (blobUrl) {
							console.log('Blob', blobUrl);
							const link = document.createElement('a');
							link.href = blobUrl;
							link.download = `guidance-${new Date()}`;
							link.click();
						}
					});

				document
					.getElementById('reset-times-shown')
					.addEventListener('click', () => {
						localStorage.clear();
						alert('Reset timesShown back to 3');
					});
			});
		</script>
	</head>
	<body>
		<button id="start-sdk-btn" class="button">Start SDK</button>
		<button id="reset-times-shown" class="button">
			Reset timesShown to 3
		</button>
		<br /><br />
		<img
			id="new-image"
			alt="Demo"
			width="100%"
			style="max-width: 500px"
		/><br />
		<br />
		<button id="download-button" class="button">Download Image</button>
		<br />
		<div id="error"></div>
	</body>
</html>