Spaces:

Songyou
/

LLM-front

Runtime error

App Files Files Community

LLM-front / ketcher_embed.html

Songyou

Upload 8 files

99415de verified over 1 year ago

raw

history blame contribute delete

2.74 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Ketcher Embed</title>
	</head>
	<body>
	<iframe id="ifKetcher" src="/static/index.html" width="800" height="600"></iframe>
	<script>
	setTimeout(() => {
	var iframe = document.getElementById("ifKetcher");
	// 访问iframe的window对象
	var ketcherWindow = iframe.contentWindow;
	var ketcher = ketcherWindow.ketcher;
	ketcher.setMolecule('c1ccccc1');
	console.log('set mol!');
	// 监听 Ketcher 的 'change' 事件，当分子结构改变时触发
	ketcher.on('change', () => {
	ketcher.getSmiles().then(smiles => {
	console.log("生成的新 SMILES:", smiles);
	sendDataToBackend(smiles);
	}).catch(err => {
	console.error('获取 SMILES 时出错:', err);
	});
	});

	// 监听 Ketcher 的 'load' 事件，当分子结构加载时触发
	ketcher.on('load', () => {
	ketcher.getSmiles().then(smiles => {
	console.log("加载的 SMILES:", smiles);
	sendDataToBackend(smiles);
	}).catch(err => {
	console.error('获取 SMILES 时出错:', err);
	});
	});
	/**
	* 发送 SMILES 数据到 Gradio 后端的函数
	* @param {string} smiles - 分子的 SMILES 字符串
	*/
	function sendDataToBackend(smiles) {
	gradioApp().then((app) => {
	app.call('process_smiles', smiles).then((response) => {
	console.log("Backend response:", response);
	// 可以在这里处理后端返回的响应，例如更新某个组件
	}).catch(error => {
	console.error("调用后端函数时出错:", error);
	});
	}).catch(error => {
	console.error("获取 Gradio 应用时出错:", error);
	});
	}
	/**
	* 从 Gradio 前端加载 SMILES 到 Ketcher
	* @param {string} smiles - 分子的 SMILES 字符串
	*/
	function loadSmiles(smiles){
	if (ketcher){
	console.log("加载 SMILES 到 Ketcher:", smiles);
	ketcher.setMolecule(smiles).then(() => {
	console.log("SMILES 加载成功");
	}).catch(err => {
	console.error("加载 SMILES 时出错:", err);
	});
	}
	}

	window.loadSmiles = loadSmiles;
	}, 2e3)
	</script>
	</body>
	</html>