update

app.py

@@ -20,6 +20,18 @@ quickstart = """
 Upload your data's channel locations in `.loc` format, which can be obtained using **EEGLAB**.  
 >If you cannot obtain it, we recommend you to download the standard montage <a href="">here</a>. If the channels in those files doesn't match yours, you can use **EEGLAB** to modify them to your needed montage.
 
+### Mapping
+
+- Step1: Mapping result
+
+- Step2:
+
+- Step3:
+
+### Model
+
+### Run model
+
 ### Imputation
 The models was trained using the EEG signals of 30 channels, including: `Fp1, Fp2, F7, F3, Fz, F4, F8, FT7, FC3, FCz, FC4, FT8, T7, C3, Cz, C4, T8, TP7, CP3, CPz, CP4, TP8, P7, P3, Pz, P4, P8, O1, Oz, O2`.
 We expect your input data to include these channels as well.  
@@ -53,10 +65,10 @@ init_js = """
 	let channel, left, bottom;
 	
 	if(app_state.stage1State == "step2-selecting"){
-	    selector = "#radio> div:nth-of-type(2)";
+	    selector = "#radio > div:nth-of-type(2)";
 	    attribute = "value";
 	}else if(app_state.stage1State == "step3-selecting"){
-	    selector = "#chkbox-group> div:nth-of-type(2)";
+	    selector = "#chkbox-group > div:nth-of-type(2)";
 	    attribute = "name";
 	}else return;
 	
@@ -70,7 +82,7 @@ init_js = """
 	
 	
 	// move the radios/checkboxes
-	let all_elem = document.querySelectorAll(selector+"> label");
+	let all_elem = document.querySelectorAll(selector+" > label");
 	Array.from(all_elem).forEach((item) => {
 		channel = item.querySelector("input").getAttribute(attribute);
 		left = channel_info.inputByName[channel].css_position[0];
@@ -83,7 +95,7 @@ init_js = """
 			bottom: ${bottom};
 		`;
 		item.className = "";
-		item.querySelector(":scope> span").innerText = "";
+		item.querySelector(":scope > span").innerText = "";
 	});
 	
 	
@@ -104,7 +116,6 @@ init_js = """
 			bottom: ${bottom};
 		}
 	`;
-	
 	// check if indicator already exist
 	let exist = 0;
 	const styleSheet = document.styleSheets[0];
@@ -114,10 +125,10 @@ init_js = """
 			//console.log('exist!');
 			styleSheet.deleteRule(i);
 			styleSheet.insertRule(rule, styleSheet.cssRules.length);
-			break;
 		}
 	}
-	if(exist == 0) styleSheet.insertRule(rule, styleSheet.cssRules.length);
+	if(exist == 0) 
+	styleSheet.insertRule(rule, styleSheet.cssRules.length);
 }
 """
 
@@ -130,10 +141,10 @@ update_js = """
 	let channel, left, bottom;
 	
 	if(app_state.stage1State == "step2-selecting"){
-	    selector = "#radio> div:nth-of-type(2)";
+	    selector = "#radio > div:nth-of-type(2)";
 	    
 	    // update the radios
-		let all_elem = document.querySelectorAll(selector+"> label");
+		let all_elem = document.querySelectorAll(selector+" > label");
 		Array.from(all_elem).forEach((item) => {
 			channel = item.querySelector("input").value;
 			left = channel_info.inputByName[channel].css_position[0];
@@ -146,10 +157,10 @@ update_js = """
 				bottom: ${bottom};
 			`;
 			item.className = "";
-			item.querySelector(":scope> span").innerText = "";
+			item.querySelector(":scope > span").innerText = "";
 		});
 	}else if(app_state.stage1State == "step3-selecting"){
-	    selector = "#chkbox-group> div:nth-of-type(2)";
+	    selector = "#chkbox-group > div:nth-of-type(2)";
 	}else return;
 	
 	// update indication
@@ -169,7 +180,6 @@ update_js = """
 			bottom: ${bottom};
 		}
 	`;
-	
 	// check if indicator already exist
 	let exist = 0;
 	const styleSheet = document.styleSheets[0];
@@ -179,7 +189,6 @@ update_js = """
 			//console.log('exist!');
 			styleSheet.deleteRule(i);
 			styleSheet.insertRule(rule, styleSheet.cssRules.length);
-			break;
 		}
 	}
 	if(exist == 0) styleSheet.insertRule(rule, styleSheet.cssRules.length);
@@ -217,7 +226,7 @@ with gr.Blocks() as demo:
 			# stage1-1 : mapping result
 			with gr.Row():
 				tpl_montage = gr.Image("./template_montage.png", label="Template montage", visible=False)
-				map_montage = gr.Image(label="Input channels", visible=False)
+				in_montage = gr.Image(elem_id="input-montage", label="Input channels", visible=False)
 			
 			# stage1-2 : assign unmatched input channels to empty template channels
 			radio = gr.Radio(elem_id="radio", visible=False) #, label=""
@@ -315,7 +324,7 @@ with gr.Blocks() as demo:
 				# ------------------Stage1-----------------------
 				desc_md : gr.Markdown("### Step1: Mapping result", visible=False),
 				tpl_montage : gr.Image(visible=False),
-				map_montage : gr.Image(value=None, visible=False),
+				in_montage : gr.Image(value=None, visible=False),
 				radio : gr.Radio(choices=[], value=[], label="", visible=False),
 				in_fill_mode : gr.Dropdown(visible=False),
 				chkbox_group : gr.CheckboxGroup(choices=[], value=[], label="", visible=False),
@@ -353,7 +362,7 @@ with gr.Blocks() as demo:
 			return {app_state_json : app_state,
 					desc_md : gr.Markdown("### Step1: Mapping result", visible=True),
 					tpl_montage : gr.Image(visible=True),
-					map_montage : gr.Image(value=filename, visible=True),
+					in_montage : gr.Image(value=filename, visible=True),
 					run_btn : gr.Button(interactive=True)}
 		
 		# if matched channels < 30, and there're still some unmatched input channels
@@ -369,13 +378,13 @@ with gr.Blocks() as demo:
 		return {app_state_json : app_state,
 				desc_md : gr.Markdown("### Step1: Mapping result", visible=True),
 				tpl_montage : gr.Image(visible=True),
-				map_montage : gr.Image(value=filename, visible=True),
+				in_montage : gr.Image(value=filename, visible=True),
 				next_btn : gr.Button("Next step", visible=True)}
 	
 	map_btn.click(
 	    fn = reset_all,
 	    inputs = [in_raw_data, in_raw_loc, in_samplerate],
-	    outputs = [app_state_json, channel_info_json, desc_md, tpl_montage, map_montage, radio, in_fill_mode,
+	    outputs = [app_state_json, channel_info_json, desc_md, tpl_montage, in_montage, radio, in_fill_mode,
 	               chkbox_group, fillmode_btn, step2_btn, step3_btn, next_btn, run_btn, batch_md, out_denoised_data]
 	).success(
 	    fn = mapping_stage1,
@@ -385,7 +394,7 @@ with gr.Blocks() as demo:
 	).success(
 	    fn = mapping_result,
 	    inputs = [app_state_json, channel_info_json, in_raw_loc],
-	    outputs = [app_state_json, desc_md, tpl_montage, map_montage, next_btn, run_btn]
+	    outputs = [app_state_json, desc_md, tpl_montage, in_montage, next_btn, run_btn]
 	)
 	
 
@@ -410,7 +419,7 @@ with gr.Blocks() as demo:
 					    channel_info_json : channel_info,
 					    desc_md : gr.Markdown("### Step2"),
 					    tpl_montage : gr.Image(visible=False),
-					    map_montage : gr.Image(visible=False),
+					    in_montage : gr.Image(visible=False),
 					    radio : gr.Radio(choices=app_state["stage1UnassignedInputs"], value=[], label=label, visible=True),
 					    next_btn : gr.Button("Next step")}
 			else:
@@ -418,7 +427,7 @@ with gr.Blocks() as demo:
 					    channel_info_json : channel_info,
 					    desc_md : gr.Markdown("### Step2"),
 					    tpl_montage : gr.Image(visible=False),
-					    map_montage : gr.Image(visible=False),
+					    in_montage : gr.Image(visible=False),
 					    radio : gr.Radio(choices=app_state["stage1UnassignedInputs"], value=[], label=label, visible=True),
 					    step2_btn : gr.Button(visible=True),
 					    next_btn : gr.Button(visible=False)}
@@ -437,7 +446,7 @@ with gr.Blocks() as demo:
 			        channel_info_json : channel_info,
 					desc_md : gr.Markdown("### Step3"),
 					tpl_montage : gr.Image(visible=False),
-					map_montage : gr.Image(visible=False),
+					in_montage : gr.Image(visible=False),
 					in_fill_mode : gr.Dropdown(visible=True),
 					fillmode_btn : gr.Button(visible=True),
 					next_btn : gr.Button(visible=False)}
@@ -524,7 +533,7 @@ with gr.Blocks() as demo:
 	next_btn.click(
 		fn = init_next_step,
 		inputs = [app_state_json, channel_info_json, radio, chkbox_group],
-		outputs = [app_state_json, channel_info_json, desc_md, tpl_montage, map_montage, radio, in_fill_mode,
+		outputs = [app_state_json, channel_info_json, desc_md, tpl_montage, in_montage, radio, in_fill_mode,
 					chkbox_group, fillmode_btn, step2_btn, next_btn, run_btn]
 	).success(
 	    fn = None,