<article>
	<div style="display:grid;grid-template-columns: repeat(4, 1fr);text-align: center; gap: 5px 10px;margin:10px 0">
		<div>loss</div>
		<div>opti</div>
		<div>dim_sample</div>
		<div>stupid mode</div>

		<select id="loss_mode" multiple>
			<option selected>mse</option>
			<option selected>mse+cos</option>
			<option selected>mse,cos</option>
		</select>

		<select id="opti_bwd" multiple>
			<option value="opti=adam-bwd_lr=1e-05">adam, lr=1e-5</option>
			<option selected value="opti=adam-bwd_lr=0.0001">adam, lr=1e-4</option>
			<option value="opti=adam-bwd_lr=0.001">adam, lr=1e-3</option>
			<option value="opti=adam-bwd_lr=0.01">adam, lr=1e-2</option>
		</select>

		<select id="dim_sample" multiple>
			<option value="3.814697265625e-06">2^-18</option>
			<option value="9.5367431640625e-07">2^-20</option>
			<option value="2.384185791015625e-07">2^-22</option>
			<option selected value="5.960464477539063e-08">2^-24</option>
		</select>

		<select id="stupid" multiple>
			<option>False</option>
			<option selected>True</option>
		</select>
	</div>
	<div style="display:grid;grid-template-columns: repeat(7, max-content);gap:10px;margin:10px 0">
		<input id="columns" type="number" value=3 min=0 max=10 style="width:100%">
		<div><input type="checkbox" id="show_confusion"   checked><label for="show_confusion"  >confusion</label></div>
		<div><input type="checkbox" id="show_ext_loss"    checked><label for="show_ext_loss"   >ext_loss</label></div>
		<div><input type="checkbox" id="show_loss_mse"    checked><label for="show_loss_mse"   >loss_mse</label></div>
		<div><input type="checkbox" id="show_loss_cos"    checked><label for="show_loss_cos"   >loss_cos</label></div>
		<div><input type="checkbox" id="show_loss_dot"           ><label for="show_loss_dot"   >loss_dot</label></div>
		<div><input type="checkbox" id="show_loss_dotsim"        ><label for="show_loss_dotsim">loss_dotsim</label></div>
	</div>
	<div id="container" style="display:grid;gap:5px"></div>
	<script>
		function $(id) {return document.getElementById(id)}
		function set_col(n) { container.style.gridTemplateColumns=`repeat(${n}, 1fr)` }
		$("columns").addEventListener('input',e=>set_col($("columns").value))
		set_col($("columns").value)

		function im_element(path,title,style="",alt="error") {
			let v = document.createElement('img')
			v.style="width:100%;"+style
			v.title=title
			v.src=path
			v.alt=alt
			return v
		}

		function add_viz(loss_mode,opti_bwd,dim_sample,stupid) {
			let ext_lr = 1e-4
			let identifier = `dim_sample=${dim_sample}-loss=${loss_mode}-${opti_bwd}-stupid=${stupid}`


			let root_path = "out"

			let c = $('container')
			let container = document.createElement('div')
			container.style="display:grid;grid-template-rows: 1fr max-content"
			c.appendChild(container)

			if($("show_confusion").checked) {
				let c = document.createElement('div');c.style="width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0 5px;text-align:center";

				let t1 = document.createElement('div');t1.style="margin:5px";t1.innerHTML=`on learn set`
				let t2 = document.createElement('div');t2.style="margin:5px";t2.innerHTML=`on test set`

				c.appendChild(im_element(`${root_path}/${identifier}-confusion-learn.png`,identifier,"image-rendering: pixelated;"))
				c.appendChild(im_element(`${root_path}/${identifier}-confusion-test.png`,identifier,"image-rendering: pixelated;"))
				c.appendChild(t1)
				c.appendChild(t2)
				container.appendChild(c)
			}
			if($("show_ext_loss").checked) { container.appendChild(im_element(`${root_path}/${identifier}.png`,identifier))}
			// if($("show_ext_mse").checked) { container.appendChild(im_element(`${root_path}/ext_mse-${identifier}.png`,identifier))}
			if($("show_loss_mse").checked) { container.appendChild(im_element(`${root_path}/loss-mse-${identifier}.png`,identifier))}
			if($("show_loss_cos").checked) { container.appendChild(im_element(`${root_path}/loss-cos-${identifier}.png`,identifier))}
			if($("show_loss_dot").checked) { container.appendChild(im_element(`${root_path}/loss-dot-${identifier}.png`,identifier))}
			if($("show_loss_dotsim").checked) { container.appendChild(im_element(`${root_path}/loss-dotsim-${identifier}.png`,identifier))}
		}

		let ids = ["loss_mode","opti_bwd","dim_sample","stupid"]
		let elements = ids.map(e=>$(e))
		function update() {
			let values = elements.map(e=>Array.from(e.selectedOptions).map(o=>o.value))
			let c = $('container');Array.from(c.children).forEach(e => c.removeChild(e))
			values[0].map(loss_mode=>{
			values[1].map(opti_bwd=>{
			values[2].map(dim_sample=>{
			values[3].map(stupid=>{
				add_viz(loss_mode,opti_bwd,dim_sample,stupid)
			})
			})
			})
			})
		}
		elements.map(e=>e.addEventListener('input',update))
		$('show_loss_dotsim').addEventListener('input',update)
		$('show_loss_dot').addEventListener('input',update)
		$('show_loss_mse').addEventListener('input',update)
		$('show_loss_cos').addEventListener('input',update)
		$('show_ext_loss').addEventListener('input',update)
		$('show_confusion').addEventListener('input',update)
		update()
	</script>
</article>
