fixbug

app.py

@@ -1,399 +1,919 @@
-import gradio as gr
-import numpy as np
-import os
-import random
 import utils
-from channel_mapping import mapping, reorder_data
-
-import mne
-from mne.channels import read_custom_montage
-
-quickstart = """
-# Quickstart
+import app_utils
+import os
+import uuid
+import tempfile
+import gradio as gr
 
-## 1. Channel mapping
+gradio_temp_dir = os.path.join(tempfile.gettempdir(), 'gradio')
+os.makedirs(gradio_temp_dir, exist_ok=True)
+os.environ['GRADIO_TEMP_DIR'] = gradio_temp_dir
 
-### Raw data
-1. The data need to be a two-dimensional array (channel, timepoint).
-2. Make sure you have **resampled** your data to **256 Hz**.
-3. Upload your EEG data in `.csv` format.
 
-### Channel locations
-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.
+title = """
+<div>
+	<div style="display: flex; justify-content: center; text-align: center; font-size: 2rem;">
+		<b>Artifact Removal Transformer 🤗 Gradio Demo</b>
+	</div>
+	<br>
+	<div style="display: flex; justify-content: center; text-align: center;">
+		<p>
+		<b>ART: Artifact Removal Transformer for Reconstructing Noise-Free Multichannel Electroencephalographic Signals</b>
+		<br>
+		Chun-Hsiang Chuang, Kong-Yi Chang, Chih-Sheng Huang, Anne-Mei Bessas
+		</p>
+	</div>
+	<br>
+	<div style="display: flex; justify-content: center; column-gap: 4px;">
+		<a href='https://arxiv.org/abs/2409.07326' target='_blank'">
+			<img src='https://img.shields.io/badge/arXiv-paper-red'>
+		</a>
+		<a href='https://github.com/CNElab-Plus/ArtifactRemovalTransformer' target='_blank'>
+			<img src='https://img.shields.io/badge/GitHub-code-blue'>
+		</a>
+		<a href='https://sites.google.com/view/chchuang' target='_blank'>
+			<img src='https://img.shields.io/badge/CNElab-contact-9b27b1'>
+		</a>
+	</div>
+</div>
+"""
 
-### 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.  
-If your data doesn't contain all of the mentioned channels, there are 3 imputation ways you can choose from:
+guide = """
 
-<u>Manually</u>:  
-- **mean**: select the channels you wish to use for imputing the required one, and we will average their values. If you select nothing, zeros will be imputed. For example, you didn't have **FCZ** and you choose **FC1, FC2, FZ, CZ** to impute it(depending on the channels you have), we will compute the mean of these 4 channels and assign this new value to **FCZ**.
+This 🤗 Gradio Demo is designed to assist you with two main tasks:
+1. **Channel Mapping**: Align your EEG channels with our template channels to ensure compatibility with our models.
+2. **EEG Artifact Removal**: Use our models—**ART**, **IC-U-Net**, **IC-U-Net++**, and **IC-U-Net-Attn**—to denoise your EEG data.
 
-<u>Automatically</u>:  
-Firstly, we will attempt to find neighboring channel to use as alternative. For instance, if the required channel is **FC3** but you only have **FC1**, we will use it as a replacement for **FC3**.  
-Then, depending on the **Imputation** way you chose, we will:
-- **zero**: fill the missing channels with zeros.
-- **adjacent**: fill the missing channels using neighboring channels which are located closer to the center. For example, if the required channel is **FC3** but you only have **F3, C3**, then we will choose **C3** as the imputing value for **FC3**.
->Note: The imputed channels **need to be removed** after the data being reconstructed.
+## File Requirements and Preparation
+- **Channel locations**: If you don't have the channel location file, we recommend you to download the standard montage <a href="">here</a>. If the channels in those files don't match yours, you can use **EEGLAB** to adjust them to your required montage.
+- **Raw data**: Your data format must be a two-dimensional array (channels, timepoints).<br>
+❗️❗️❗️Your data must include some channels that correspond to our template channels, which include: **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**. At least some of them need to be present for successful mapping.<br>
+❗️❗️❗️Please remove any reference, ECG, EOG, EMG, or other non-EEG channels before uploading your files.
 
-### Mapping result
-Once the mapping process is finished, the **template montage** and the **input montage**(with the channels choosen by the mapping function displaying their names) will be shown.
+## Step1. Channel Mapping
+The following steps will guide you through the process of mapping your EEG channels to our template channels.
 
-### Missing channels
-The channels displayed here are those for which the template didn't find suitable channels to use, and utilized **Imputation** to fill the missing values.  
-Therefore, you need to
-<span style="color:red">**remove these channels**</span>
-after you download the denoised data.
+### Step1-1: Initial Matching and Scaling
+After clicking on `Map` button, we will first match your channels to our template channels by their names. Using the matched channels as reference points, we will apply Thin Plate Spline (TPS) transformation to scale your montage to align with our template's dimensions. The template montage and your scaled montage will be displayed side by side for comparison. Channels that do not have a match in our template will be **highlighted in red**.
+- If your data includes all the 30 template channels, you will be directed to **Mapping Result**.
+- If your data doesn't include all the 30 template channels and you have some channels that do not match the template, you will be directed to **Step2**.
+- If all your channels are included in our template but you have fewer than 30 channels, you will be directed to **Step3**.
 
-### Template location file
-You need to use this as the **new location file** for the denoised data.
+### Step1-2: Forwarding Unmatched Channels
+In this step, you will handle the channels that didn't have a direct match with our template, by manually assigning them to the template channels that are still empty, ensuring the most efficient use of your data.<br>
+Your unmatched channels, previously highlighted in red, will be shown on your montage with a radio button displayed above each. You can choose to forward the data from these unmatched channels to the empty template channels. The interface will display each empty template channel in sequence, allowing you to select which of your unmatched channels to forward.
+- If all empty template channels are filled by your selections, you will be directed to **Mapping Result**.
+- If there are still empty template channels remaining, you will be directed to **Step3**.
 
-## 2. Decode data
+### Step1-3: Filling Remaining Template Channels
+To run the models successfully, we need to ensure that all 30 template channels are filled. In this step, you are required to select one of the methods provided below to fill the remaining empty template channels:
+- **Mean** method: Each empty template channel is filled with the average value of data from the nearest input channels. By default, the 4 closest input channels (determined after aligning your montage to the template's scale using TPS) are selected for this averaging process. On the interface, you will see checkboxes displayed above each of your channel. The 4 nearest channels are pre-selected by default for each empty template channel, but you can modify these selections as needed. If you uncheck all the checkboxes for a particular template channel, it will be filled with zeros.
+- **Zero** method: All empty template channels are filled with zeros.<br>
+Choose the method that best suits your needs, considering that the model's performance may vary depending on the method used.<br>
+Once all template channels are filled, you will be directed to **Mapping Result**.
 
-### Model
-Select the model you want to use.  
-The detailed description of the models can be found in other pages.
+### Mapping Result
+After completing the previous steps, your channels will be aligned with the template channels required by our models.
+- In case there are still some channels that haven't been mapped, we will automatically batch and optimally assign them to the template. This ensures that even channels not initially mapped will still be included in the final result.
+- Once the mapping process is completed, a JSON file containing the mapping result will be generated. This file is necessary only if you plan to run the models using the source code; otherwise, you can ignore it.
 
+## Step2. Data Denoising
+After uploading your EEG data and clicking on `Run` button, we will process your data based on the mapping result.<br>
+- If necessary, your data will be divided into batches and run the models on each batch sequentially, ensuring that all channels are properly processed.
 """
 
 icunet = """
-# IC-U-Net
+## IC-U-Net
 ### Abstract
 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.
 """
-unetpp = """
-# IC-U-Net++
-### Abstract
-Electroencephalographic (EEG) data is considered contaminated with various types of artifacts. Deep learning has been successfully applied to developing EEG artifact removal techniques to increase the signal-to-noise ratio (SNR) and enhance brain-computer interface performance. Recently, our research team has proposed an end-to-end UNet-based EEG artifact removal technique, IC-U-Net, which can reconstruct signals against various artifacts. However, this model suffers from being prone to overfitting with a limited training dataset size and demanding a high computational cost. To address these issues, this study attempted to leverage the architecture of UNet++ to improve the practicability of IC-U-Net by introducing dense skip connections in the encoder-decoder architecture. Results showed that this proposed model obtained superior SNR to the original model with half the number of parameters. Also, this proposed model achieved comparable convergency using a quarter of the training data size.
+
+js = """
+() => {
+	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);
+}
 """
 
-chkbox_js = """
-(state_json) => {
-	state_json = JSON.parse(JSON.stringify(state_json));
-	if(state_json.state == "finished") return;
+init_js = """
+(stage1_info, channel_info) => {
+	stage1_info = JSON.parse(JSON.stringify(stage1_info));
+	channel_info = JSON.parse(JSON.stringify(channel_info));
+	
+	let selector, attribute;
+	if(stage1_info.state == "step2-selecting"){
+		selector = "#radio-group > div:nth-of-type(2)";
+		attribute = "value";
+	}else if(stage1_info.state == "step3-2-selecting"){
+		selector = "#chkbox-group > div:nth-of-type(2)";
+		attribute = "name";
+	}else return;
+	
+	const div = document.querySelector(selector);
 	
-	document.querySelector("#chs-chkbox>div:nth-of-type(2)").style.cssText = `
+	// add figure of the input montage
+	div.style.cssText = `
 		position: relative;
-		width: 560px;
-		height: 560px;
-		background: url("file=${state_json.files.raw_montage}");
+		width: 100%;
+		aspect-ratio: 1;
+		background-image: url("file=${stage1_info.fileNames.originalMontage}");
+		background-position: left bottom;
+		background-size: 100%;
 	`;
-
-	let all_chkbox = document.querySelectorAll("#chs-chkbox> div:nth-of-type(2)> label");
-	all_chkbox = Array.apply(null, all_chkbox);
 	
-	all_chkbox.forEach((item, index) => {
-		let channel = state_json.inputByIndex[index];
-		let left = state_json.inputByName[channel].css_position[0];
-		let bottom = state_json.inputByName[channel].css_position[1];
-		//console.log(`left: ${left}, bottom: ${bottom}`);
+	// move the radios/checkboxes
+	let name, left, bottom;
+	const elements = div.querySelectorAll(":scope > label");
+	Array.from(elements).forEach( el => {
+		name = el.querySelector(":scope > input").getAttribute(attribute);
+		left = channel_info.inputDict[name].css_position[0];
+		bottom = channel_info.inputDict[name].css_position[1];
 		
-		item.style.cssText = `
-			position: absolute;
-			left: ${left};
-			bottom: ${bottom};
-		`;
-		item.className = "";
-		item.querySelector("span").innerText = "";
+		el.className = "channel-box";
+		el.style.cssText = `left: ${left}%; bottom: ${bottom}%;`;
+		el.querySelector(":scope > input").classList.add("channel-input");
+		el.querySelector(":scope > span").innerText = "";
 	});
 	
+	// add indication for the first empty tpl_channel
+	name = stage1_info.emptyTemplate[0];
+	left = channel_info.templateDict[name].css_position[0];
+	bottom = channel_info.templateDict[name].css_position[1];
+	const dotRule = `
+		${selector}::before {
+			content: "";
+			position: absolute;
+			left: ${left}%;
+			bottom: ${bottom}%;
+			width: 2%;
+			height: 2%;
+			border-radius: 50%;
+			background-color: red;
+		}
+	`;
+	const textRule = `
+		${selector}::after {
+			content: "${name}";
+			position: absolute;
+			z-index: 1;
+			left: ${left+2.7}%;
+			bottom: ${bottom}%;
+			font-size: 1em;
+			font-weight: 900;
+			color: red;
+		}
+	`;
+	// check if indicator already exist
+	const styleSheet = document.styleSheets[0];
+	for(let i=0; i<styleSheet.cssRules.length; i++){
+		let tmp = styleSheet.cssRules[i].selectorText;
+		if(tmp==selector+"::before" || tmp==selector+"::after"){
+			styleSheet.deleteRule(i);
+			i--;
+		}
+	}
+	styleSheet.insertRule(dotRule, styleSheet.cssRules.length);
+	styleSheet.insertRule(textRule, styleSheet.cssRules.length);
 }
 """
 
+update_js = """
+(stage1_info, channel_info) => {
+	stage1_info = JSON.parse(JSON.stringify(stage1_info));
+	channel_info = JSON.parse(JSON.stringify(channel_info));
+	
+	let selector;
+	let cnt, name, left, bottom;
+	if(stage1_info.state == "step2-selecting"){
+		selector = "#radio-group > div:nth-of-type(2)";
+		cnt = stage1_info.step2.count;
+		
+		// update the radios
+		const elements = document.querySelectorAll(selector+" > label");
+		Array.from(elements).forEach( el => {
+			name = el.querySelector(":scope > input").value;
+			left = channel_info.inputDict[name].css_position[0];
+			bottom = channel_info.inputDict[name].css_position[1];
+			el.style.cssText = `left: ${left}%; bottom: ${bottom}%;`;
+		});
+	}else if(stage1_info.state == "step3-2-selecting"){
+		selector = "#chkbox-group > div:nth-of-type(2)";
+		cnt = stage1_info.step3.count;
+	}else return;
+	
+	// update the indication
+	name = stage1_info.emptyTemplate[cnt-1];
+	left = channel_info.templateDict[name].css_position[0];
+	bottom = channel_info.templateDict[name].css_position[1];
+	const dotRule = `
+		${selector}::before {
+			content: "";
+			position: absolute;
+			left: ${left}%;
+			bottom: ${bottom}%;
+			width: 2%;
+			height: 2%;
+			border-radius: 50%;
+			background-color: red;
+		}
+	`;
+	const textRule = `
+		${selector}::after {
+			content: "${name}";
+			position: absolute;
+			z-index: 1;
+			left: ${left+2.7}%;
+			bottom: ${bottom}%;
+			font-size: 1em;
+			font-weight: 900;
+			color: red;
+		}
+	`;
+	
+	// update the rules
+	const styleSheet = document.styleSheets[0];
+	for(let i=0; i<styleSheet.cssRules.length; i++){
+		let tmp = styleSheet.cssRules[i].selectorText;
+		if(tmp==selector+"::before" || tmp==selector+"::after"){
+			styleSheet.deleteRule(i);
+			i--;
+		}
+	}
+	styleSheet.insertRule(dotRule, styleSheet.cssRules.length);
+	styleSheet.insertRule(textRule, styleSheet.cssRules.length);
+}
+"""
 
-with gr.Blocks() as demo:
-
-	state_json = gr.JSON(elem_id="state", visible=False)
+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)
+	channel_json = gr.JSON({}, visible=False)
 
+	gr.HTML(title)
 	with gr.Row():
-		gr.Markdown(
-			"""
-			
-			"""
-		)
-	with gr.Row():
-		with gr.Column():
-			gr.Markdown(
-				"""
-				# 1.Channel Mapping
-				"""
-			)
+
+		with gr.Column(variant="panel"):
+			gr.Markdown("## Step1. Channel Mapping")
+			# ---------------------input---------------------
+			in_loc_file = gr.File(label="Channel locations (.loc, .locs, .xyz, .sfp, .txt)",
+							file_types=[".loc", "locs", ".xyz", ".sfp", ".txt"])
+			map_btn = gr.Button("Map")
+			# ---------------------output--------------------
+			desc_md = gr.Markdown(visible=False)
+			out_result_file = gr.File(visible=False)
+			# --------------------mapping--------------------
+			# step1-1
 			with gr.Row():
-				in_raw_data = gr.File(label="Raw data (.csv)", file_types=[".csv"])
-				in_raw_loc = gr.File(label="Channel locations (.loc, .locs)", file_types=[".loc", "locs"])
+				tpl_img = gr.Image("./template_montage.png", label="Template montage", visible=False)
+				mapped_img = gr.Image(label="Matching result", visible=False)
+			# step1-2
+			radio_group = gr.Radio(elem_id="radio-group", visible=False)
+			# step1-3
 			with gr.Row():
-				in_fill_mode = gr.Dropdown(choices=["zero",
-									("adjacent channel", "adjacent"),
-									("mean (manually select channels)", "mean")],
-									value="zero",
-									label="Imputation",
-									scale=2)
-				map_btn = gr.Button("Mapping", scale=1)
-				channels_json = gr.JSON(visible=False)
-			res_md = gr.Markdown(
-						"""
-						### Mapping result:
-						""",
-						visible=False
-					)
+				in_fillmode = gr.Dropdown(choices=["mean", "zero"],
+											value="mean",
+											label="Filling method",
+											visible=False,
+											scale=2)
+				fillmode_btn = gr.Button("OK", visible=False, scale=1)
+			chkbox_group = gr.CheckboxGroup(elem_id="chkbox-group", visible=False)
+			
 			with gr.Row():
-				tpl_montage = gr.Image("./template_montage.png", label="Template montage", visible=False)
-				map_montage = gr.Image(label="Choosen channels", visible=False)
-			chs_chkbox = gr.CheckboxGroup(elem_id="chs-chkbox", label="", visible=False)
-			next_btn = gr.Button("Next", interactive=False, visible=False)
-			miss_txtbox = gr.Textbox(label="Missing channels", visible=False)
-			tpl_loc_file = gr.File("./template_chanlocs.loc", show_label=False, visible=False)
-		with gr.Column():
-			gr.Markdown(
-				"""
-				# 2.Decode Data
-				"""
-			)
+				clear_btn = gr.Button("Clear", visible=False)
+				step2_btn = gr.Button("Next", visible=False)
+				step3_btn = gr.Button("Next", visible=False)
+				next_btn = gr.Button("Next step", visible=False)
+			# -----------------------------------------------
+		
+		with gr.Column(variant="panel"):
+			gr.Markdown("## Step2. Data Denoising")
+			# ---------------------input---------------------
 			with gr.Row():
-				in_model_name = gr.Dropdown(choices=["IC-U-Net", "IC-U-Net++", "IC-U-Net-Attn", "ART", "(mapped data)"],
-									value="IC-U-Net",
-									label="Model",
-									scale=2)
-				run_btn = gr.Button(scale=1, interactive=False)
-			out_denoised_data = gr.File(label="Denoised data")
-	
-				
+				in_data_file = gr.File(label="Raw data (.csv)", file_types=[".csv"])
+				with gr.Column():
+					in_samplerate = gr.Textbox(label="Sampling rate (Hz)")
+					in_modelname = gr.Dropdown(choices=[
+										("ART", "ART"),
+										("IC-U-Net", "ICUNet"),
+										("IC-U-Net++", "ICUNet++"),
+										("IC-U-Net-Attn", "ICUNet_attn")],
+										value="ART",
+										label="Model")
+					run_btn = gr.Button("Run", interactive=False)
+					cancel_btn = gr.Button("Cancel", visible=False)
+			# ---------------------output--------------------
+			batch_md = gr.Markdown(visible=False)
+			out_data_file = gr.File(label="Denoised data", visible=False)
+			# -----------------------------------------------
+			
 	with gr.Row():
+		with gr.Tab("User Guide"):
+			gr.Markdown(guide)
 		with gr.Tab("ART"):
 			gr.Markdown()
 		with gr.Tab("IC-U-Net"):
 			gr.Markdown(icunet)
 		with gr.Tab("IC-U-Net++"):
-			gr.Markdown(unetpp)
-		with gr.Tab("IC-U-Net-Att"):
 			gr.Markdown()
-		with gr.Tab("QuickStart"):
-			gr.Markdown(quickstart)
-    
-	#demo.load(js=js)
+		with gr.Tab("IC-U-Net-Attn"):
+			gr.Markdown()
+	
+	def create_dir(req: gr.Request):
+		os.mkdir(gradio_temp_dir+'/'+req.session_hash+'/')
+		return gradio_temp_dir+'/'+req.session_hash+'/'
+	demo.load(create_dir, inputs=[], outputs=session_dir)
 	
-	def reset_layout(raw_data):
-		# establish temp folder
-		filepath = os.path.dirname(str(raw_data))
-		try:
-			os.mkdir(filepath+"/temp_data/")
-		except OSError as e:
-			utils.dataDelete(filepath+"/temp_data/")
-			os.mkdir(filepath+"/temp_data/")
-			#print(e)
-		state_obj = {
-			"filepath": filepath+"/temp_data/",
-			"files": {}
+	# +========================================================================================+
+	# |                                Stage1: channel mapping                                 |
+	# +========================================================================================+
+	def reset_all(rootpath, stage1_info, stage2_info, in_loc):
+		if in_loc == None:
+			gr.Warning("Please upload a file.")
+			stage1_info["errorFlag"] = True
+			return {stage1_json : stage1_info}
+		
+		# delete the previous folder of Stage1, 2
+		if "filePath" in stage1_info:
+			utils.dataDelete(stage1_info["filePath"])
+		if "filePath" in stage2_info and stage2_info.get("state")!="stopped":
+			utils.dataDelete(stage2_info["filePath"])
+		# establish a new folder
+		stage1_dir = uuid.uuid4().hex + '_stage1/'
+		os.mkdir(rootpath + stage1_dir)
+		
+		inputname = os.path.basename(str(in_loc))
+		outputname = inputname[:-4] + '_mapping_result.json'
+		
+		stage1_info = {
+			"filePath" : rootpath + stage1_dir,
+			"fileNames" : {
+				"inputData" : in_loc,
+				"originalMontage" : rootpath + stage1_dir + 'input_montage.png',
+				"mappedMontage" : rootpath + stage1_dir + 'mapped_montage.png',
+				"outputData" : rootpath + stage1_dir + outputname
+			},
+			"state" : "step1-initializing",
+			"errorFlag" : False,
+			"step2" : {
+				"count" : None,
+				"totalNum" : None
+			},
+			"step3" : {
+				"count" : None,
+				"totalNum" : None
+			},
+			"unassignedInput" : None,
+			"emptyTemplate" : None,
+			"batch" : None,
+			"mappingResult" : [
+			{
+				"index" : None,
+				"isOriginalData" : None
+				#"channelUsageNum" : None
+			}
+			]
 		}
-		return {state_json : state_obj,
-				chs_chkbox : gr.CheckboxGroup(choices=[], value=[], label="", visible=False), # choices, value ???
-				next_btn : gr.Button("Next", interactive=False, visible=False),
+		stage2_info = {}
+		channel_info = {}
+		return {stage1_json : stage1_info,
+				stage2_json : stage2_info,
+				channel_json : channel_info,
+				# --------------------Stage1-------------------------
+				map_btn : gr.Button(interactive=False),
+				desc_md : gr.Markdown("", visible=True),
+				out_result_file : gr.File(value=None, visible=False),
+				tpl_img : gr.Image(visible=False),
+				mapped_img : gr.Image(value=None, visible=False),
+				radio_group : gr.Radio(choices=[], value=[], label="", visible=False),
+				in_fillmode : gr.Dropdown(value="mean", visible=False),
+				fillmode_btn : gr.Button(visible=False),
+				chkbox_group : gr.CheckboxGroup(choices=[], value=[], label='', visible=False),
+				clear_btn : gr.Button(visible=False),
+				step2_btn : gr.Button(visible=False),
+				step3_btn : gr.Button(visible=False),
+				next_btn : gr.Button(visible=False),
+				# --------------------Stage2-------------------------
+				in_data_file : gr.File(value=None),
+				in_samplerate : gr.Textbox(value=None),
 				run_btn : gr.Button(interactive=False),
-				tpl_montage : gr.Image(visible=False),
-				map_montage : gr.Image(value=None, visible=False),
-				miss_txtbox : gr.Textbox(visible=False),
-				res_md : gr.Markdown(visible=False),
-				tpl_loc_file : gr.File(visible=False)}
-    	
-	def mapping_result(state_obj, channels_obj, raw_data, fill_mode):
-		state_obj.update(channels_obj)
+				cancel_btn : gr.Button(interactive=False),
+				batch_md : gr.Markdown("", visible=False),
+				out_data_file : gr.File(value=None, visible=False)}
+	
+	# +========================================================================================+
+	# |                                    step transition                                     |
+	# +========================================================================================+
+	def init_next_step(stage1_info, channel_info, fillmode, sel_radio, sel_chkbox):
+		if stage1_info["errorFlag"] == True:
+			stage1_info["errorFlag"] = False
+			return {stage1_json : stage1_info}
 		
-		if fill_mode=="mean" and channels_obj["missingChannelsIndex"]!=[]:
-			state_obj.update({
-				"state" : "initializing",
-				"fillingCount" : 0,
-				"totalFillingNum" : len(channels_obj["missingChannelsIndex"])-1
-			})
-			#print("Missing channels:", state_obj["missingChannelsIndex"])
-			return {state_json : state_obj,
+		# =======================================step1-0========================================
+		# step1-0 to step1-1
+		if stage1_info["state"] == "step1-initializing":
+			# match the names
+			stage1_info, channel_info, tpl_montage, in_montage = app_utils.match_name(stage1_info)
+			# scale the coordinates
+			channel_info = app_utils.align_coords(channel_info, tpl_montage, in_montage)
+			# generate and save figures of the montages
+			filename1 = stage1_info["fileNames"]["originalMontage"]
+			filename2 = stage1_info["fileNames"]["mappedMontage"]
+			channel_info = app_utils.save_figure(channel_info, tpl_montage, filename1, filename2)
+			
+			unassigned_num = len(stage1_info["unassignedInput"])
+			if unassigned_num == 0:
+				md = """
+				### Step1-1: Initial Matching and Scaling
+				Below is the result of mapping your channels to our template channels based on their names.
+				"""
+			else:
+				md = """
+				### Step1-1: Initial Matching and Scaling
+				Below is the result of mapping your channels to our template channels based on their names.<br>
+				- channels highlighted in red are those that do not match any template channels.
+				"""
+			stage1_info["state"] = "step1-finished"
+			return {stage1_json : stage1_info,
+					channel_json : channel_info,
+					map_btn : gr.Button(interactive=True),
+					desc_md : gr.Markdown(md),
+					tpl_img : gr.Image(visible=True),
+					mapped_img : gr.Image(value=filename2, visible=True),
 					next_btn : gr.Button(visible=True)}
-		else:
-			reorder_data(raw_data, channels_obj["newOrder"], fill_mode, state_obj)
-		    
-			missing_channels = [state_obj["templateByIndex"][idx] for idx in state_obj["missingChannelsIndex"]]
-			missing_channels = ', '.join(missing_channels)
-		    
-			state_obj.update({
-				"state" : "finished",
-				#"fillingCount" : -1,
-				#"totalFillingNum" : -1
-			})
-			return {state_json : state_obj,
-					res_md : gr.Markdown(visible=True),
-			        miss_txtbox : gr.Textbox(value=missing_channels, visible=True),
-			        tpl_loc_file : gr.File(visible=True),
-					run_btn : gr.Button(interactive=True)}
-	
-	def show_montage(state_obj, raw_loc):
-		filepath = state_obj["filepath"]
-		raw_montage = read_custom_montage(raw_loc)
 		
-		# convert all channel names to uppercase
-		for i in range(len(raw_montage.ch_names)):
-			channel = raw_montage.ch_names[i]
-			raw_montage.rename_channels({channel: str.upper(channel)})
+		# =======================================step1-1========================================
+		elif stage1_info["state"] == "step1-finished":
+			in_num = len(channel_info["inputNames"])
+			matched_num = 30 - len(stage1_info["emptyTemplate"])
+			
+			# step1-1 to step1-4
+			if matched_num == 30:
+				md = """
+				### Mapping Result
+				The mapping process has been finished.<br>
+				Download the file below if you plan to run the models using the source code.
+				"""
+				# finalize and save the mapping result
+				outputname = stage1_info["fileNames"]["outputData"]
+				stage1_info, channel_info = app_utils.mapping_result(stage1_info, channel_info, outputname)
+				
+				stage1_info["state"] = "finished"
+				return {stage1_json : stage1_info,
+						channel_json : channel_info,
+						desc_md : gr.Markdown(md),
+						out_result_file : gr.File(outputname, visible=True),
+						tpl_img : gr.Image(visible=False),
+						mapped_img : gr.Image(visible=False),
+						next_btn : gr.Button(visible=False),
+						run_btn : gr.Button(interactive=True)}
+			# step1-1 to step1-2
+			elif in_num > matched_num: 
+				md = """
+				### Step1-2: Forwarding Unmatched Channels
+				Select one of your unmatched channels to forward its data to the empty template channel 
+				currently indicated in red.
+				"""
+				# initialize the progress indication label
+				stage1_info["step2"] = {
+					"count" : 1,
+					"totalNum" : len(stage1_info["emptyTemplate"])
+				}
+				tpl_name = stage1_info["emptyTemplate"][0]
+				label = '{} (1/{})'.format(tpl_name, stage1_info["step2"]["totalNum"])
+				
+				stage1_info["state"] = "step2-selecting"
+				# determine which button to display
+				if stage1_info["step2"]["totalNum"] == 1:
+					return {stage1_json : stage1_info,
+							desc_md : gr.Markdown(md),
+							tpl_img : gr.Image(visible=False),
+							mapped_img : gr.Image(visible=False),
+							radio_group : gr.Radio(choices=stage1_info["unassignedInput"], value=[], label=label, visible=True),
+							clear_btn : gr.Button(visible=True)}
+				else:
+					return {stage1_json : stage1_info,
+							desc_md : gr.Markdown(md),
+							tpl_img : gr.Image(visible=False),
+							mapped_img : gr.Image(visible=False),
+							radio_group : gr.Radio(choices=stage1_info["unassignedInput"], value=[], label=label, visible=True),
+							clear_btn : gr.Button(visible=True),
+							step2_btn : gr.Button(visible=True),
+							next_btn : gr.Button(visible=False)}
+			# step1-1 to step1-3-1
+			elif in_num == matched_num:
+				md = """
+				### Step1-3: Filling Remaining Template Channels
+				Select one of the methods provided below to fill the remaining template channels.
+				"""
+				stage1_info["state"] = "step3-select-method"
+				return {stage1_json : stage1_info,
+						desc_md : gr.Markdown(md),
+						tpl_img : gr.Image(visible=False),
+						mapped_img : gr.Image(visible=False),
+						in_fillmode : gr.Dropdown(visible=True),
+						fillmode_btn : gr.Button(visible=True),
+						next_btn : gr.Button(visible=False)}
 		
-		if state_obj["state"] == "initializing":
-			filename = filepath+"raw_montage_"+str(random.randint(1,10000))+".png"
-			state_obj["files"]["raw_montage"] = filename
-			raw_fig = raw_montage.plot()
-			raw_fig.set_size_inches(5.6, 5.6)
-			raw_fig.savefig(filename, pad_inches=0)
+		# =======================================step1-2========================================
+		elif stage1_info["state"] == "step2-selecting":
+			
+			if sel_radio != []:
+				stage1_info["unassignedInput"].remove(sel_radio)
+				
+				prev_tpl_name = stage1_info["emptyTemplate"][stage1_info["step2"]["count"]-1]
+				prev_tpl_idx = channel_info["templateDict"][prev_tpl_name]["index"]
+				sel_idx = channel_info["inputDict"][sel_radio]["index"]
+				
+				stage1_info["mappingResult"][0]["index"][prev_tpl_idx] = [sel_idx]
+				stage1_info["mappingResult"][0]["isOriginalData"][prev_tpl_idx] = True
+				channel_info["templateDict"][prev_tpl_name]["matched"] = True
+				channel_info["inputDict"][sel_radio]["assigned"] = True
+			
+			# exclude the tpl_channels filled in step1-2
+			stage1_info["emptyTemplate"] = app_utils.get_empty_template(channel_info["templateNames"],
+																			channel_info["templateDict"])
 			
-			return {state_json : state_obj}#,
-					#tpl_montage : gr.Image(visible=True),
-					#in_montage : gr.Image(value=filename, visible=True),
-					#map_montage : gr.Image(visible=False)}
+			# step1-2 to step1-4
+			if len(stage1_info["emptyTemplate"]) == 0:
+				md = """
+				### Mapping Result
+				The mapping process has been finished.<br>
+				Download the file below if you plan to run the models using the source code.
+				"""
+				outputname = stage1_info["fileNames"]["outputData"]
+				stage1_info, channel_info = app_utils.mapping_result(stage1_info, channel_info, outputname)
+				
+				stage1_info["state"] = "finished"
+				return {stage1_json : stage1_info,
+						channel_json : channel_info,
+						desc_md : gr.Markdown(md),
+						out_result_file : gr.File(outputname, visible=True),
+						radio_group : gr.Radio(visible=False),
+						clear_btn : gr.Button(visible=False),
+						next_btn : gr.Button(visible=False),
+						run_btn : gr.Button(interactive=True)}
+			# step1-2 to step1-3-1
+			else:
+				md = """
+				### Step1-3: Filling Remaining Template Channels
+				Select one of the methods provided below to fill the remaining template channels.
+				"""
+				stage1_info["state"] = "step3-select-method"
+				return {stage1_json : stage1_info,
+						channel_json : channel_info,
+						desc_md : gr.Markdown(md),
+						radio_group : gr.Radio(visible=False),
+						in_fillmode : gr.Dropdown(visible=True),
+						fillmode_btn : gr.Button(visible=True),
+						clear_btn : gr.Button(visible=False),
+						next_btn : gr.Button(visible=False)}
 		
-		elif state_obj["state"] == "finished":
-			# didn't find any way to hide the dark points...
-			# tmp
-			filename = filepath+"mapped_montage_"+str(random.randint(1,10000))+".png"
-			state_obj["files"]["map_montage"] = filename
+		# ======================================step1-3-1=======================================
+		elif stage1_info["state"] == "step3-select-method":
+			# step1-3-1 to step1-4
+			if fillmode == "zero":
+				md = """
+				### Mapping Result
+				The mapping process has been finished.<br>
+				Download the file below if you plan to run the models using the source code.
+				"""
+				outputname = stage1_info["fileNames"]["outputData"]
+				stage1_info, channel_info = app_utils.mapping_result(stage1_info, channel_info, outputname)
+				
+				stage1_info["state"] = "finished"
+				return {stage1_json : stage1_info,
+						channel_json : channel_info,
+						desc_md : gr.Markdown(md),
+						out_result_file : gr.File(outputname, visible=True),
+						in_fillmode : gr.Dropdown(visible=False),
+						fillmode_btn : gr.Button(visible=False),
+						run_btn : gr.Button(interactive=True)}
+			# step1-3-1 to step1-3-2
+			elif fillmode == "mean":
+				md = """
+				### Step1-3: Fill the remaining template channels
+				The current empty template channel, indicated in red, will be filled with the average 
+				value of the data from the selected channels. (By default, the 4 nearest channels are pre-selected.)
+				"""
+				# find the 4 nearest in_channels for each unmatched tpl_channel
+				stage1_info["mappingResult"][0]["index"] = app_utils.find_neighbors(
+																		channel_info,
+																		stage1_info["emptyTemplate"],
+																		stage1_info["mappingResult"][0]["index"])
+				# initialize the progress indication label
+				stage1_info["step3"] = {
+					"count" : 1,
+					"totalNum" : len(stage1_info["emptyTemplate"])
+				}
+				tpl_name = stage1_info["emptyTemplate"][0]
+				label = '{} (1/{})'.format(tpl_name, stage1_info["step3"]["totalNum"])
+				
+				tpl_idx = channel_info["templateDict"][tpl_name]["index"]
+				value = stage1_info["mappingResult"][0]["index"][tpl_idx]
+				value = [channel_info["inputNames"][i] for i in value]
+				
+				stage1_info["state"] = "step3-2-selecting"
+				# determine which button to display
+				if stage1_info["step3"]["totalNum"] == 1:
+					return {stage1_json : stage1_info,
+							desc_md : gr.Markdown(md),
+							in_fillmode : gr.Dropdown(visible=False),
+							fillmode_btn : gr.Button(visible=False),
+							chkbox_group : gr.CheckboxGroup(choices=channel_info["inputNames"],
+															value=value, label=label, visible=True),
+							next_btn : gr.Button(visible=True)}
+				else:
+					return {stage1_json : stage1_info,
+							desc_md : gr.Markdown(md),
+							in_fillmode : gr.Dropdown(visible=False),
+							fillmode_btn : gr.Button(visible=False),
+							chkbox_group : gr.CheckboxGroup(choices=channel_info["inputNames"],
+															value=value, label=label, visible=True),
+							step3_btn : gr.Button(visible=True)}
+		
+		# ======================================step1-3-2=======================================
+		# step1-3-2 to step1-4
+		elif stage1_info["state"] == "step3-2-selecting":
 			
-			show_names= []
-			for channel in state_obj["inputByName"]:
-			    if state_obj["inputByName"][channel]["used"]:
-			        if channel=='CZ' and state_obj["CZImputed"]:
-			            continue
-			        show_names.append(channel)
-			mapped_fig = raw_montage.plot(show_names=show_names)
-			mapped_fig.set_size_inches(5.6, 5.6)
-			mapped_fig.savefig(filename, pad_inches=0)
+			prev_tpl_name = stage1_info["emptyTemplate"][stage1_info["step3"]["count"]-1]
+			prev_tpl_idx = channel_info["templateDict"][prev_tpl_name]["index"]
+			sel_idx = [channel_info["inputDict"][name]["index"] for name in sel_chkbox]
+			stage1_info["mappingResult"][0]["index"][prev_tpl_idx] = sel_idx if sel_idx!=[] else [None]
 			
-			return {state_json : state_obj,
-					tpl_montage : gr.Image(visible=True),
-					map_montage : gr.Image(value=filename, visible=True)}
-					
-		elif state_obj["state"] == "selecting":
-			# update in_montage here ?
-			#return {in_montage : gr.Image()}
-			return {state_json : state_obj}
-	
-	def generate_chkbox(state_obj):
-		if state_obj["state"] == "initializing":
-			in_channels = [channel for channel in state_obj["inputByName"]]
-			state_obj["state"] = "selecting"
+			md = """
+			### Mapping Result
+			The mapping process has been finished.<br>
+			Download the file below if you plan to run the models using the source code.
+			"""
+			outputname = stage1_info["fileNames"]["outputData"]
+			stage1_info, channel_info = app_utils.mapping_result(stage1_info, channel_info, outputname)
 			
-			first_idx = state_obj["missingChannelsIndex"][0]
-			first_name = state_obj["templateByIndex"][first_idx]
-			chkbox_label = first_name+' (1/'+str(state_obj["totalFillingNum"]+1)+')'
-			return {state_json : state_obj,
-					chs_chkbox : gr.CheckboxGroup(choices=in_channels, label=chkbox_label, visible=True),
-					next_btn : gr.Button(interactive=True)}
-		else:
-			return {state_json : state_obj}
-
+			stage1_info["state"] = "finished"
+			return {stage1_json : stage1_info,
+					channel_json : channel_info,
+					desc_md : gr.Markdown(md),
+					out_result_file : gr.File(outputname, visible=True),
+					chkbox_group : gr.CheckboxGroup(visible=False),
+					next_btn : gr.Button(visible=False),
+					run_btn : gr.Button(interactive=True)}
+	
+	next_btn.click(
+		fn = init_next_step,
+		inputs = [stage1_json, channel_json, in_fillmode, radio_group, chkbox_group],
+		outputs = [stage1_json, channel_json, desc_md, out_result_file, tpl_img, mapped_img, radio_group,
+					in_fillmode, fillmode_btn, chkbox_group, clear_btn, step2_btn, step3_btn, next_btn, run_btn]
+	).success(
+		fn = None,
+		js = init_js,
+		inputs = [stage1_json, channel_json],
+		outputs = []
+	)
 	
+	# +========================================================================================+
+	# |                                      Stage1-step0                                      |
+	# +========================================================================================+
 	map_btn.click(
-	    fn = reset_layout,
-	    inputs = in_raw_data,
-		outputs = [state_json, chs_chkbox, next_btn, run_btn, tpl_montage, map_montage, miss_txtbox,
-					res_md, tpl_loc_file]
-		
+		fn = reset_all,
+		inputs = [session_dir, stage1_json, stage2_json, in_loc_file],
+		outputs = [stage1_json, stage2_json, channel_json, map_btn, desc_md, out_result_file, tpl_img, mapped_img,
+					radio_group, in_fillmode, fillmode_btn, chkbox_group, clear_btn, step2_btn, step3_btn, next_btn,
+					in_data_file, in_samplerate, run_btn, cancel_btn, batch_md, out_data_file]
 	).success(
-		fn = mapping, 
-		inputs = [in_raw_data, in_raw_loc, in_fill_mode], 
-		outputs = channels_json
+		fn = init_next_step,
+		inputs = [stage1_json, channel_json, in_fillmode, radio_group, chkbox_group], 
+		outputs = [stage1_json, channel_json, map_btn, desc_md, tpl_img, mapped_img, next_btn]
+	)
+	
+	# +========================================================================================+
+	# |                                      Stage1-step2                                      |
+	# +========================================================================================+
+	@radio_group.select(inputs = stage1_json, outputs = [step2_btn, next_btn])
+	def determine_button(stage1_info):
+		if len(stage1_info["unassignedInput"]) == 1:
+			return {step2_btn : gr.Button(visible=False),
+					next_btn : gr.Button(visible=True)}
+		else:
+			return {step2_btn : gr.Button()}
+	# clear the selected value and reset the buttons
+	@clear_btn.click(inputs = stage1_json, outputs = [radio_group, step2_btn, next_btn])
+	def clear_value(stage1_info):
+		if len(stage1_info["unassignedInput"])==1 and stage1_info["step2"]["count"]<stage1_info["step2"]["totalNum"]:
+			return {radio_group : gr.Radio(value=[]),
+					step2_btn : gr.Button(visible=True),
+					next_btn : gr.Button(visible=False)}
+		else:
+			return {radio_group : gr.Radio(value=[])}
+	
+	def update_radio(stage1_info, channel_info, sel_name):
+		step2 = stage1_info["step2"]
+		# check if the user has selected an in_channel to forward to the previous target tpl_channel
+		if sel_name != []:
+			stage1_info["unassignedInput"].remove(sel_name)
+			
+			prev_tpl_name = stage1_info["emptyTemplate"][step2["count"]-1]
+			prev_tpl_idx = channel_info["templateDict"][prev_tpl_name]["index"]
+			sel_idx = channel_info["inputDict"][sel_name]["index"]
+			
+			stage1_info["mappingResult"][0]["index"][prev_tpl_idx] = [sel_idx]
+			stage1_info["mappingResult"][0]["isOriginalData"][prev_tpl_idx] = True
+			channel_info["templateDict"][prev_tpl_name]["matched"] = True
+			channel_info["inputDict"][sel_name]["assigned"] = True
 		
-	).success(
-		fn = mapping_result, 
-		inputs = [state_json, channels_json, in_raw_data, in_fill_mode], 
-		outputs = [state_json, chs_chkbox, next_btn, miss_txtbox, res_md, tpl_loc_file, run_btn]
+		# update the new round
+		step2["count"] += 1
+		tpl_name = stage1_info["emptyTemplate"][step2["count"]-1]
+		label = '{} ({}/{})'.format(tpl_name, step2["count"], step2["totalNum"])
 		
+		stage1_info["step2"] = step2
+		# determine which button to display
+		if step2["count"] == step2["totalNum"]:
+			return {stage1_json : stage1_info,
+					channel_json : channel_info,
+					radio_group : gr.Radio(choices=stage1_info["unassignedInput"],
+											value=[], label=label),
+					step2_btn : gr.Button(visible=False),
+					next_btn : gr.Button(visible=True)}
+		else:
+			return {stage1_json : stage1_info,
+					channel_json : channel_info,
+					radio_group : gr.Radio(choices=stage1_info["unassignedInput"],
+											value=[], label=label)}
+	step2_btn.click(
+		fn = update_radio,
+		inputs = [stage1_json, channel_json, radio_group],
+		outputs = [stage1_json, channel_json, radio_group, step2_btn, next_btn]
 	).success(
-		fn = show_montage, 
-		inputs = [state_json, in_raw_loc], 
-		outputs = [state_json, tpl_montage, map_montage]
+		fn = None,
+		js = update_js,
+		inputs = [stage1_json, channel_json],
+		outputs = []
+	)
+	
+	# +========================================================================================+
+	# |                                      Stage1-step3                                      |
+	# +========================================================================================+	
+	def update_chkbox(stage1_info, channel_info, sel_name):
+		step3 = stage1_info["step3"]
 		
-	).success(
-		fn = generate_chkbox, 
-		inputs = state_json, 
-		outputs = [state_json, chs_chkbox, next_btn]
+		prev_tpl_name = stage1_info["emptyTemplate"][step3["count"]-1]
+		prev_tpl_idx = channel_info["templateDict"][prev_tpl_name]["index"]
+		sel_idx = [channel_info["inputDict"][name]["index"] for name in sel_name]
+		stage1_info["mappingResult"][0]["index"][prev_tpl_idx] = sel_idx if sel_idx!=[] else [None]
+		
+		# update the new round
+		step3["count"] += 1
+		tpl_name = stage1_info["emptyTemplate"][step3["count"]-1]
+		label = '{} ({}/{})'.format(tpl_name, step3["count"], step3["totalNum"])
+		
+		tpl_idx = channel_info["templateDict"][tpl_name]["index"]
+		value = stage1_info["mappingResult"][0]["index"][tpl_idx]
+		value = [channel_info["inputNames"][i] for i in value]
+		
+		stage1_info["step3"] = step3
+		# determine which button to display
+		if step3["count"] == step3["totalNum"]:
+			return {stage1_json : stage1_info,
+					chkbox_group : gr.CheckboxGroup(value=value, label=label),
+					step3_btn : gr.Button(visible=False),
+					next_btn : gr.Button(visible=True)}
+		else:
+			return {stage1_json : stage1_info,
+					chkbox_group : gr.CheckboxGroup(value=value, label=label)}
+	
+	fillmode_btn.click(
+		fn = init_next_step,
+		inputs = [stage1_json, channel_json, in_fillmode, radio_group, chkbox_group],
+		outputs = [stage1_json, channel_json, desc_md, out_result_file, in_fillmode, fillmode_btn,
+					chkbox_group, step3_btn, next_btn, run_btn]
 	).success(
 		fn = None,
-		js = chkbox_js,
-		inputs = state_json,
+		js = init_js,
+		inputs = [stage1_json, channel_json],
 		outputs = []
 	)
-    
-
-	def check_next(state_obj, selected, raw_data, fill_mode):
-		if state_obj["state"] == "selecting":
-			
-			# save info before clicking on next_btn
-			prev_target_idx = state_obj["missingChannelsIndex"][state_obj["fillingCount"]]
-			prev_target_name = state_obj["templateByIndex"][prev_target_idx]
-			
-			selected_idx = [state_obj["inputByName"][channel]["index"] for channel in selected]
-			state_obj["newOrder"][prev_target_idx] = selected_idx
-			
-			if len(selected)==1 and state_obj["inputByName"][selected[0]]["used"]==False:
-			    state_obj["inputByName"][selected[0]]["used"] = True
-			    state_obj["missingChannelsIndex"][state_obj["fillingCount"]] = -1
-			
-			print('Selection for missing channel "{}"({}): {}'.format(prev_target_name, prev_target_idx, selected))
-			
-			# update next round
-			state_obj["fillingCount"] += 1
-			if state_obj["fillingCount"] <= state_obj["totalFillingNum"]:
-				target_idx = state_obj["missingChannelsIndex"][state_obj["fillingCount"]]
-				target_name = state_obj["templateByIndex"][target_idx]
-				chkbox_label = target_name+' ('+str(state_obj["fillingCount"]+1)+'/'+str(state_obj["totalFillingNum"]+1)+')'
-				btn_label = "Submit" if state_obj["fillingCount"]==state_obj["totalFillingNum"] else "Next"
-				
-				return {state_json : state_obj,
-						chs_chkbox : gr.CheckboxGroup(value=[], label=chkbox_label),
-						next_btn : gr.Button(btn_label)}
-			else:
-				state_obj["state"] = "finished"
-				reorder_data(raw_data, state_obj["newOrder"], fill_mode, state_obj)
-				
-				missing_channels = []
-				for idx in state_obj["missingChannelsIndex"]:
-				    if idx != -1:
-				        missing_channels.append(state_obj["templateByIndex"][idx])
-				missing_channels = ', '.join(missing_channels)
-					
-				return {state_json : state_obj,
-						chs_chkbox : gr.CheckboxGroup(visible=False),
-						next_btn : gr.Button(visible=False),
-						res_md : gr.Markdown(visible=True),
-			        	miss_txtbox : gr.Textbox(value=missing_channels, visible=True),
-			        	tpl_loc_file : gr.File(visible=True),
-						run_btn : gr.Button(interactive=True)}
 	
-	next_btn.click(
-	    fn = check_next, 
-	    inputs = [state_json, chs_chkbox, in_raw_data, in_fill_mode],
-	    outputs = [state_json, chs_chkbox, next_btn, run_btn, res_md, miss_txtbox, tpl_loc_file]
-	    
+	step3_btn.click(
+		fn = update_chkbox,
+		inputs = [stage1_json, channel_json, chkbox_group],
+		outputs = [stage1_json, chkbox_group, step3_btn, next_btn]
 	).success(
-	    fn = show_montage, 
-	    inputs = [state_json, in_raw_loc], 
-	    outputs = [state_json, tpl_montage, map_montage]
+		fn = None,
+		js = update_js,
+		inputs = [stage1_json, channel_json],
+		outputs = []
 	)
-    
-    
-	@run_btn.click(inputs=[state_json, in_raw_data, in_model_name], outputs=out_denoised_data)
-	def run_model(state_obj, raw_file, model_name):    	
-		filepath = state_obj["filepath"]
-    	
-		input_name = os.path.basename(str(raw_file))
-		output_name = os.path.splitext(input_name)[0]+'_'+model_name+'.csv'
+	
+	# +========================================================================================+
+	# |                                  Stage2: data denoising                                |
+	# +========================================================================================+
+	@cancel_btn.click(inputs = stage2_json, outputs = [stage2_json, cancel_btn, batch_md])
+	def stop_stage2(stage2_info):
+		utils.dataDelete(stage2_info["filePath"])
+		stage2_info["state"] = "stopped"
+		return stage2_info, gr.Button(interactive=False), gr.Markdown(visible=False)
+	
+	def reset_stage2(rootpath, stage2_info, in_data, samplerate, modelname):
+		if in_data==None or samplerate=="":
+			gr.Warning("Please upload a file and enter the sampling rate.")
+			stage2_info["errorFlag"] = True
+			return {stage2_json : stage2_info}
+		elif samplerate.isdigit() == False:
+			gr.Warning("The sampling rate must be an integer.")
+			stage2_info["errorFlag"] = True
+			return {stage2_json : stage2_info}
 		
-		if model_name == "(mapped data)":
-		    return filepath + 'mapped.csv'
-    	
-    	# step1: Data preprocessing
-		total_file_num = utils.preprocessing(filepath, 'mapped.csv', 256)
+		# delete the previous folder of Stage2
+		if "filePath" in stage2_info and stage2_info.get("state")=="finished":
+			utils.dataDelete(stage2_info["filePath"])
+		# establish a new folder
+		stage2_dir = uuid.uuid4().hex + '_stage2/'
+		os.mkdir(rootpath + stage2_dir)
 		
-		# step2: Signal reconstruction
-		utils.reconstruct(model_name, total_file_num, filepath, output_name)
+		inputname = os.path.basename(str(in_data))
+		outputname = modelname + '_'+inputname[:-4] + '.csv'
 		
-		return filepath + output_name
-    
-
+		stage2_info = {
+			"filePath" : rootpath + stage2_dir,
+			"fileNames" : {
+				"inputData" : in_data,
+				"outputData" : rootpath + stage2_dir + outputname
+			},
+			"state" : "running",
+			"errorFlag" : False
+		}
+		return {stage2_json : stage2_info,
+				run_btn : gr.Button(visible=False),
+				cancel_btn : gr.Button(visible=True, interactive=True),
+				batch_md : gr.Markdown("", visible=True),
+				out_data_file : gr.File(value=None, visible=False)}
+	
+	def run_model(stage1_info, stage2_info, channel_info, samplerate, modelname):
+		if stage2_info["errorFlag"] == True:
+			stage2_info["errorFlag"] = False
+			yield {stage2_json : stage2_info}
+		
+		else:
+			filepath = stage2_info["filePath"]
+			inputname = stage2_info["fileNames"]["inputData"]
+			outputname = stage2_info["fileNames"]["outputData"]
+			channel_num = len(channel_info["inputNames"])
+			mapping_result = stage1_info["mappingResult"]
+			
+			break_flag = False
+			for i in range(stage1_info["batch"]):
+				yield {batch_md : gr.Markdown('Running model({}/{})...'.format(i+1, stage1_info["batch"]))}
+				try:
+					# step1: Data preprocessing
+					preprocess_data = utils.preprocessing(filepath, inputname, int(samplerate), mapping_result[i])
+					# step2: Signal reconstruction
+					reconstructed_data = utils.reconstruct(modelname, preprocess_data, filepath, i)
+					# step3: Data postprocessing
+					utils.postprocessing(reconstructed_data, int(samplerate), outputname, mapping_result[i], i, channel_num)
+				except FileNotFoundError:
+					print('stop!!')
+					break_flag = True
+					break
+			
+			if break_flag == False:
+				stage2_info["state"] = "finished"
+				yield {stage2_json : stage2_info,
+						run_btn : gr.Button(visible=True),
+						cancel_btn : gr.Button(visible=False),
+						batch_md : gr.Markdown(visible=False),
+						out_data_file : gr.File(outputname, visible=True)}
+			else:
+				yield {run_btn : gr.Button(visible=True),
+						cancel_btn : gr.Button(visible=False)}
+	run_btn.click(
+		fn = reset_stage2,
+		inputs = [session_dir, stage2_json, in_data_file, in_samplerate, in_modelname],
+		outputs = [stage2_json, run_btn, cancel_btn, batch_md, out_data_file]
+	).success(
+		fn = run_model,
+		inputs = [stage1_json, stage2_json, channel_json, in_samplerate, in_modelname],
+		outputs = [stage2_json, run_btn, cancel_btn, batch_md, out_data_file]
+	)
+	
+	def delete_dir(req: gr.Request):
+		utils.dataDelete(gradio_temp_dir+'/'+req.session_hash)
+	demo.unload(delete_dir)
+	
 if __name__ == "__main__":
-    demo.launch()
+	demo.launch()
+