| import { Ketcher } from 'ketcher-standalone'; | |
| // 导出一个初始化函数，以便在 HTML 中调用 | |
| export function initializeKetcher(containerId, binaryWasmPath) { | |
| const ketcherInstance = new Ketcher(containerId, { | |
| preset: 'default', | |
| binaryWasmPath: binaryWasmPath, | |
| }); | |
| // 设置初始 SMILES 为 "c1cccc1" | |
| ketcherInstance.setMolecule("c1cccc1").then(() => { | |
| console.log("初始 SMILES 加载完成"); | |
| }).catch(err => { | |
| console.error("加载初始 SMILES 时出错:", err); | |
| }); | |
| // 监听 Ketcher 的 'change' 事件，当分子结构改变时触发 | |
| ketcherInstance.on('change', () => { | |
| ketcherInstance.getSmiles().then(smiles => { | |
| console.log("生成的新 SMILES:", smiles); | |
| // 在此处可以添加与 Gradio 后端的交互逻辑 | |
| }).catch(err => { | |
| console.error('获取 SMILES 时出错:', err); | |
| }); | |
| }); | |
| // 监听 Ketcher 的 'load' 事件，当分子结构加载时触发 | |
| ketcherInstance.on('load', () => { | |
| ketcherInstance.getSmiles().then(smiles => { | |
| console.log("加载的 SMILES:", smiles); | |
| }).catch(err => { | |
| console.error('获取 SMILES 时出错:', err); | |
| }); | |
| }); | |
| } | |