update

app.py

@@ -57,17 +57,25 @@ icunet = """
 Electroencephalography (EEG) signals are often contaminated with artifacts. It is imperative to develop a practical and reliable artifact removal method to prevent the misinterpretation of neural signals and the underperformance of brain–computer interfaces. Based on the U-Net architecture, we developed a new artifact removal model, IC-U-Net, for removing pervasive EEG artifacts and reconstructing brain signals. IC-U-Net was trained using mixtures of brain and non-brain components decomposed by independent component analysis. It uses an ensemble of loss functions to model complex signal fluctuations in EEG recordings. The effectiveness of the proposed method in recovering brain activities and removing various artifacts (e.g., eye blinks/movements, muscle activities, and line/channel noise) was demonstrated in a simulation study and four real-world EEG experiments. IC-U-Net can reconstruct a multi-channel EEG signal and is applicable to most artifact types, offering a promising end-to-end solution for automatically removing artifacts from EEG recordings. It also meets the increasing need to image natural brain dynamics in a mobile setting.
 """
 
-observe_js = """
+js = """
 () => {
-	const observer = new ResizeObserver((entries) => {
-		entries.forEach((entry) => {
-			const target = entry.target;
-			const newWidth = entry.contentRect.width;
-			target.style.setProperty("--indicator-size", `${newWidth*0.025}px`);
-		});
-	});
-	observer.observe(document.querySelector("#radio-group > div:nth-of-type(2)"));
-	observer.observe(document.querySelector("#chkbox-group > div:nth-of-type(2)"));
+	const styleSheet = document.styleSheets[0];
+	styleSheet.insertRule(`
+		.channel-box {
+			position: absolute;
+			z-index: 2;
+			width: 2.5%;
+			height: 2.5%;
+			transform: translate(-50%, 50%);
+		}
+	`, styleSheet.cssRules.length);
+	styleSheet.insertRule(`
+		.channel-input {
+			display: block !important;
+			width: 100% !important;
+			height: 100% !important;
+		}
+	`, styleSheet.cssRules.length);
 }
 """
 
@@ -86,7 +94,6 @@ init_js = """
 	}else return;
 	
 	const div = document.querySelector(selector);
-	div.style.setProperty("--indicator-size", `${div.clientWidth*0.025}px`);
 	
 	// add figure of the input montage
 	div.style.cssText = `
@@ -106,16 +113,10 @@ init_js = """
 		left = channel_info.inputDict[name].css_position[0];
 		bottom = channel_info.inputDict[name].css_position[1];
 		
-		el.style.cssText = `position: absolute; left: ${left}%; bottom: ${bottom}%;`;
-		el.className = "";
+		el.className = "channel-box";
+		el.style.cssText = `left: ${left}%; bottom: ${bottom}%;`;
+		el.querySelector(":scope > input").classList.add("channel-input");
 		el.querySelector(":scope > span").innerText = "";
-		el.querySelector(":scope > input").style.cssText = `
-			position: absolute;
-			z-index: 2;
-			width: var(--indicator-size);
-			height: var(--indicator-size);
-			transform: translate(-50%, -50%);
-		`;
 	});
 	
 	// add indication for the first empty tpl_channel
@@ -128,8 +129,8 @@ init_js = """
 			position: absolute;
 			left: ${left}%;
 			bottom: ${bottom}%;
-			width: var(--indicator-size);
-			height: var(--indicator-size);
+			width: 2%;
+			height: 2%;
 			border-radius: 50%;
 			background-color: red;
 		}
@@ -177,8 +178,7 @@ update_js = """
 			name = el.querySelector(":scope > input").value;
 			left = channel_info.inputDict[name].css_position[0];
 			bottom = channel_info.inputDict[name].css_position[1];
-			el.style.left = `${left}%`;
-			el.style.bottom = `${bottom}%`;
+			el.style.cssText = `left: ${left}%; bottom: ${bottom}%;`;
 		});
 	}else if(stage1_info.state == "step3-2-selecting"){
 	    selector = "#chkbox-group > div:nth-of-type(2)";
@@ -195,8 +195,8 @@ update_js = """
 			position: absolute;
 			left: ${left}%;
 			bottom: ${bottom}%;
-			width: var(--indicator-size);
-			height: var(--indicator-size);
+			width: 2%;
+			height: 2%;
 			border-radius: 50%;
 			background-color: red;
 		}
@@ -228,7 +228,7 @@ update_js = """
 }
 """
 
-with gr.Blocks(js=observe_js, delete_cache=(3600, 3600)) as demo:
+with gr.Blocks(js=js, delete_cache=(3600, 3600)) as demo:
 	session_dir = gr.State("")
 	stage1_json = gr.JSON({}, visible=False)
 	stage2_json = gr.JSON({}, visible=False)

app_utils.py

@@ -187,7 +187,7 @@ def save_figure(channel_info, tpl_montage, filename1, filename2):
 	# plot in_channels on it
 	ax.scatter(in_coords[:,0], in_coords[:,1], s=35, color='black')
 	for i, name in enumerate(in_names):
-		ax.text(in_coords[i,0]+0.003, in_coords[i,1], name, color='black', fontsize=10.0, va='center')
+		ax.text(in_coords[i,0]+0.004, in_coords[i,1], name, color='black', fontsize=10.0, va='center')
 	# save input_montage
 	fig.savefig(filename1)
 	
@@ -197,7 +197,7 @@ def save_figure(channel_info, tpl_montage, filename1, filename2):
 	if indices != []:
 		ax.scatter(in_coords[indices,0], in_coords[indices,1], s=35, color='red')
 		for i in indices:
-			ax.text(in_coords[i,0]+0.003, in_coords[i,1], in_names[i], color='red', fontsize=10.0, va='center')
+			ax.text(in_coords[i,0]+0.004, in_coords[i,1], in_names[i], color='red', fontsize=10.0, va='center')
 	# save mapped_montage
 	fig.savefig(filename2)