update

app.py

@@ -63,10 +63,7 @@ observe_js = """
 		entries.forEach((entry) => {
 			const target = entry.target;
 			const newWidth = entry.contentRect.width;
-			
-			target.style.backgroundSize = `${newWidth}px`;
 			target.style.setProperty("--channel-indicator-size", `${newWidth*0.025}px`);
-			target.style.setProperty("--channel-name-size", `${newWidth*0.035}px`);
 		});
 	});
 	observer.observe(document.querySelector("#radio-group > div:nth-of-type(2)"));
@@ -89,9 +86,7 @@ init_js = """
 	}else return;
 	
 	const div = document.querySelector(selector);
-	const divWidth = div.clientWidth;
-	div.style.setProperty("--channel-indicator-size", `${divWidth*0.025}px`);
-	div.style.setProperty("--channel-name-size", `${divWidth*0.035}px`);
+	div.style.setProperty("--channel-indicator-size", `${div.clientWidth*0.025}px`);
 	
 	// add figure of the input montage
 	div.style.cssText = `
@@ -100,7 +95,7 @@ init_js = """
 		aspect-ratio: 1;
 		background-image: url("file=${stage1_info.fileNames.originalMontage}");
 		background-position: left bottom;
-		background-size: ${divWidth}px;
+		background-size: 100%;
 	`;
 	
 	// move the radios/checkboxes
@@ -123,7 +118,7 @@ init_js = """
 		`;
 	});
 	
-	// add indication for the empty tpl_channels
+	// 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];
@@ -146,7 +141,7 @@ init_js = """
 			z-index: 1;
 			left: ${left+2.7}%;
 			bottom: ${bottom}%;
-			font-size: var(--channel-name-size);
+			font-size: 1em;
 			font-weight: 900;
 			color: red;
 		}
@@ -213,7 +208,7 @@ update_js = """
 			z-index: 1;
 			left: ${left+2.7}%;
 			bottom: ${bottom}%;
-			font-size: var(--channel-name-size);
+			font-size: 1em;
 			font-weight: 900;
 			color: red;
 		}
@@ -815,7 +810,7 @@ with gr.Blocks(js=observe_js, delete_cache=(3600, 3600)) as demo:
 			stage2_info["errorFlag"] = True
 			return {stage2_json : stage2_info}
 		elif samplerate.isdigit() == False:
-			gr.Warning("The sampling rate needs to be an integer.")
+			gr.Warning("The sampling rate must be an integer.")
 			stage2_info["errorFlag"] = True
 			return {stage2_json : stage2_info}