Upload 8 files

.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": ["@babel/preset-env"],
+    "plugins": ["@babel/plugin-transform-runtime"]
+  }
+  

clm-frontend-dev.py

@@ -0,0 +1,233 @@
+import gradio as gr
+from fastapi import FastAPI
+from starlette.staticfiles import StaticFiles
+import uvicorn
+import logging
+from pydantic import BaseModel
+import pandas as pd
+import time
+
+logging.basicConfig(level=logging.DEBUG, format='%(asctime)s - %(levelname)s - %(message)s')
+logger = logging.getLogger(__name__)
+
+class SmilesData(BaseModel):
+    smiles: str
+
+app = FastAPI()
+
+# 将 ketcher 目录挂载为静态资源，确保 ketcher/index.html 存在
+app.mount("/ketcher", StaticFiles(directory="ketcher"), name="ketcher")
+
+# 接收前端发送的SMILES数据的接口
+@app.post("/update_smiles")
+async def update_smiles(data: SmilesData):
+    logger.info(f"Received SMILES from front-end: {data.smiles}")
+    print(f"[PRINT-Backend] Received SMILES from front-end: {data.smiles}")
+    return {"status": "ok", "received_smiles": data.smiles}
+
+# 前端嵌入的HTML和脚本
+KETCHER_HTML = r'''
+<iframe id="ifKetcher" src="/ketcher/index.html" width="100%" height="600px" style="border: 1px solid #ccc;"></iframe>
+
+<script>
+console.log("[Front-end] Ketcher-Gradio integration script loaded.");
+
+let ketcher = null;
+let lastSmiles = '';
+
+function findSmilesInput() {
+    const inputContainer = document.getElementById('combined_smiles_input');
+    if (!inputContainer) {
+        console.warn("[Front-end] combined_smiles_input element not found.");
+        return null;
+    }
+    const input = inputContainer.querySelector('input[type="text"]');
+    return input;
+}
+
+function updateGradioInput(smiles) {
+    const input = findSmilesInput();
+    if (input && input.value !== smiles) {
+        input.value = smiles;
+        // 手动触发input事件让 Gradio 更新状态
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        console.log("[Front-end] Updated Gradio input with SMILES:", smiles);
+    }
+}
+
+async function handleKetcherChange() {
+    console.log("[Front-end] handleKetcherChange called, retrieving SMILES...");
+    try {
+        const smiles = await ketcher.getSmiles({ arom: false });
+        console.log("[Front-end] SMILES retrieved from Ketcher:", smiles);
+        if (smiles !== lastSmiles) {
+            lastSmiles = smiles;
+            updateGradioInput(smiles);
+
+            // 将SMILES发送给后端 (可以保留，但可能不是核心需求)
+            console.log("[Front-end] Sending SMILES to backend...");
+            fetch('/update_smiles', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({smiles: smiles})
+            })
+            .then(res => res.json())
+            .then(data => {
+                console.log("[Front-end] Backend response:", data);
+            })
+            .catch(err => console.error("[Front-end] Error sending SMILES to backend:", err));
+        }
+    } catch (err) {
+        console.error("[Front-end] Error getting SMILES from Ketcher:", err);
+    }
+}
+
+function initKetcher() {
+    console.log("[Front-end] initKetcher started.");
+    const iframe = document.getElementById('ifKetcher');
+    if (!iframe) {
+        console.error("[Front-end] iframe not found.");
+        setTimeout(initKetcher, 500);
+        return;
+    }
+
+    const ketcherWindow = iframe.contentWindow;
+    if (!ketcherWindow || !ketcherWindow.ketcher) {
+        console.log("[Front-end] ketcher not yet available in iframe, retrying...");
+        setTimeout(initKetcher, 500);
+        return;
+    }
+
+    ketcher = ketcherWindow.ketcher;
+    console.log("[Front-end] Ketcher instance acquired:", ketcher);
+
+    // 设置初始分子
+    ketcher.setMolecule('C').then(() => {
+        console.log("[Front-end] Initial molecule set to 'C'.");
+    });
+
+    const editor = ketcher.editor;
+    console.log("[Front-end] Editor object:", editor);
+
+    // 尝试绑定变化事件
+    let eventBound = false;
+    if (editor && typeof editor.subscribe === 'function') {
+        console.log("[Front-end] Using editor.subscribe('change', ...)");
+        editor.subscribe('change', handleKetcherChange);
+        eventBound = true;
+    }
+
+    if (!eventBound) {
+        console.error("[Front-end] No suitable event binding found. Check Ketcher version and event API.");
+    }
+}
+
+document.getElementById('ifKetcher').addEventListener('load', () => {
+    console.log("[Front-end] iframe loaded. Initializing Ketcher in 1s...");
+    setTimeout(initKetcher, 1000);
+});
+</script>
+'''
+
+# --- 模拟后端功能 (来自第二个版本) ---
+def smiles_to_structure(smiles):
+    """Dummy function"""
+    time.sleep(1)
+    return f"Structure Generated from: {smiles}"
+
+def fragment_molecule(smiles):
+    """Dummy function"""
+    time.sleep(2)
+    return "Fragment1", "Fragment2", "1-2"
+
+def generate_analogs(main_cls, minor_cls, number, delta_value):
+    """Dummy function"""
+    time.sleep(3)
+    return [
+        {"SMILE": "c1cccc1", "MolWt": 100, "TPSA": 20, "SLogP": 1, "SA": 30, "QED": 0.8},
+        {"SMILE": "c1ccccc1", "MolWt": 105, "TPSA": 25, "SLogP": 1.2, "SA": 32, "QED": 0.9},
+    ]
+
+def update_output_table(data):
+    df = pd.DataFrame(data)
+    return df
+
+# --- Gradio 界面 ---
+def create_combined_interface():
+    with gr.Blocks() as demo:
+        gr.Markdown("# Fragment Optimization Tools with Ketcher")
+
+        with gr.Row():
+            with gr.Column(scale=2):
+                gr.HTML(KETCHER_HTML)  # 嵌入 Ketcher
+
+            with gr.Column(scale=1):
+                with gr.Group():
+                    gr.Markdown("### Input SMILES (From Ketcher)")
+                    combined_smiles_input = gr.Textbox(
+                        label="",
+                        value="C",
+                        placeholder="SMILES from Ketcher will appear here",
+                        elem_id="combined_smiles_input"
+                    )
+                    with gr.Row():
+                        # 可以保留一个按钮来触发某些操作，例如手动同步
+                        get_ketcher_smiles_btn = gr.Button("Get SMILES from Ketcher")
+                        # 示例：将当前输入框的 SMILES 设置到 Ketcher (需要额外的前端 JavaScript)
+                        # set_ketcher_smiles_btn = gr.Button("Set SMILES to Ketcher")
+                        fragment_btn = gr.Button("Fragmentize Molecule")
+
+                with gr.Group():
+                    with gr.Row():
+                        constant_frag_input = gr.Textbox(label="Constant Fragment", placeholder="SMILES of constant fragment")
+                        variable_frag_input = gr.Textbox(label="Variable Fragment", placeholder="SMILES of variable fragment")
+                        attach_order_input = gr.Textbox(label="Attachment Order", placeholder="Attachment Order of SMILES")
+
+                with gr.Group():
+                    gr.Markdown("### Generate analogs")
+                    with gr.Row():
+                        main_cls_dropdown = gr.Dropdown(label="Main Cls", choices=["None", "Cl", "Br"])
+                        minor_cls_dropdown = gr.Dropdown(label="Minor Cls", choices=["None", "Cl", "Br"])
+                        number_input = gr.Number(label="Number", value=5, step=1)
+
+                    delta_value_slider = gr.Slider(minimum=0, maximum=10, step=1, label="Delta Value", interactive=True)
+                    generate_analogs_btn = gr.Button("Generate")
+
+        with gr.Row():
+            with gr.Column():
+                selected_columns = gr.CheckboxGroup(["SMILE", "MolWt", "TPSA", "SLogP", "SA", "QED"], value=["SMILE", "MolWt", "TPSA", "SLogP"], label="")
+
+        output_table = gr.Dataframe(headers=["SMILE", "MolWt", "TPSA", "SLogP", "SA", "QED"])
+
+        with gr.Row():
+            download_all_btn = gr.Button("Download All")
+            download_selected_btn = gr.Button("Download Selected")
+
+        # --- 事件处理 ---
+        # 当点击按钮时，手动从 Ketcher 获取 SMILES 并更新输入框
+        get_ketcher_smiles_btn.click(
+            fn=None,
+            inputs=None,
+            outputs=combined_smiles_input,
+            js="async () => { const iframe = document.getElementById('ifKetcher'); if(iframe && iframe.contentWindow && iframe.contentWindow.ketcher) { const smiles = await iframe.contentWindow.ketcher.getSmiles(); return smiles; } else { console.error('Ketcher not ready'); return ''; } }"
+        )
+
+        fragment_btn.click(fragment_molecule, inputs=combined_smiles_input, outputs=[constant_frag_input, variable_frag_input, attach_order_input])
+
+        def update_table_with_analogs(main_cls, minor_cls, number, delta_value):
+            analogs_data = generate_analogs(main_cls, minor_cls, number, delta_value)
+            return update_output_table(analogs_data)
+
+        generate_analogs_btn.click(update_table_with_analogs,
+                                  inputs=[main_cls_dropdown, minor_cls_dropdown, number_input, delta_value_slider],
+                                  outputs=output_table)
+
+        # TODO: 添加下载功能的回调
+
+    return demo
+
+combined_demo = create_combined_interface()
+app = gr.mount_gradio_app(app, combined_demo, path="/")
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="127.0.0.1", port=7860)

clm-frontend.py

@@ -0,0 +1,181 @@
+import gradio as gr
+from fastapi import FastAPI
+from starlette.staticfiles import StaticFiles
+import uvicorn
+import logging
+from pydantic import BaseModel
+
+logging.basicConfig(level=logging.DEBUG, format='%(asctime)s - %(levelname)s - %(message)s')
+logger = logging.getLogger(__name__)
+
+class SmilesData(BaseModel):
+    smiles: str
+
+app = FastAPI()
+
+# 将 ketcher 目录挂载为静态资源，确保 ketcher/index.html 存在
+app.mount("/ketcher", StaticFiles(directory="ketcher"), name="ketcher")
+
+# 接收前端发送的SMILES数据的接口
+@app.post("/update_smiles")
+async def update_smiles(data: SmilesData):
+    logger.info(f"Received SMILES from front-end: {data.smiles}")
+    print(f"[PRINT] Received SMILES from front-end: {data.smiles}")
+    return {"status": "ok", "received_smiles": data.smiles}
+
+# 前端嵌入的HTML和脚本
+# 这个HTML中会有一个iframe加载/ketcher/index.html
+# 并在前端监听Ketcher事件，将SMILES更新到Gradio输入框并发送给后端
+KETCHER_HTML = r'''
+<iframe id="ifKetcher" src="/ketcher/index.html" width="100%" height="600px" style="border: 1px solid #ccc;"></iframe>
+
+<script>
+console.log("[Front-end] Ketcher-Gradio integration script loaded.");
+
+let ketcher = null;
+let lastSmiles = '';
+
+function findSmilesInput() {
+    const inputContainer = document.getElementById('smiles_input');
+    if (!inputContainer) {
+        console.warn("[Front-end] smiles_input element not found.");
+        return null;
+    }
+    const input = inputContainer.querySelector('input[type="text"]');
+    return input;
+}
+
+function updateGradioInput(smiles) {
+    const input = findSmilesInput();
+    if (input && input.value !== smiles) {
+        input.value = smiles;
+        // 手动触发input事件让Gradio更新状态
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        console.log("[Front-end] Updated Gradio input with SMILES:", smiles);
+    }
+}
+
+async function handleKetcherChange() {
+    console.log("[Front-end] handleKetcherChange called, retrieving SMILES...");
+    try {
+        const smiles = await ketcher.getSmiles({ arom: false });
+        console.log("[Front-end] SMILES retrieved from Ketcher:", smiles);
+        if (smiles !== lastSmiles) {
+            lastSmiles = smiles;
+            updateGradioInput(smiles);
+
+            // 将SMILES发送给后端
+            console.log("[Front-end] Sending SMILES to backend...");
+            fetch('/update_smiles', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({smiles: smiles})
+            })
+            .then(res => res.json())
+            .then(data => {
+                console.log("[Front-end] Backend response:", data);
+            })
+            .catch(err => console.error("[Front-end] Error sending SMILES to backend:", err));
+        }
+    } catch (err) {
+        console.error("[Front-end] Error getting SMILES from Ketcher:", err);
+    }
+}
+
+function initKetcher() {
+    console.log("[Front-end] initKetcher started.");
+    const iframe = document.getElementById('ifKetcher');
+    if (!iframe) {
+        console.error("[Front-end] iframe not found.");
+        setTimeout(initKetcher, 500);
+        return;
+    }
+
+    const ketcherWindow = iframe.contentWindow;
+    if (!ketcherWindow || !ketcherWindow.ketcher) {
+        console.log("[Front-end] ketcher not yet available in iframe, retrying...");
+        setTimeout(initKetcher, 500);
+        return;
+    }
+
+    ketcher = ketcherWindow.ketcher;
+    console.log("[Front-end] Ketcher instance acquired:", ketcher);
+
+    // 设置初始分子
+    ketcher.setMolecule('C').then(() => {
+        console.log("[Front-end] Initial molecule set to 'C'.");
+    });
+
+    const editor = ketcher.editor;
+    console.log("[Front-end] Editor object:", editor);
+
+    // 尝试绑定变化事件，根据Ketcher版本，可尝试多种方式
+    let eventBound = false;
+    if (editor && typeof editor.subscribe === 'function') {
+        console.log("[Front-end] Using editor.subscribe('change', ...)");
+        editor.subscribe('change', handleKetcherChange);
+        eventBound = true;
+    }
+    // 如果其他版本需要 editor.events.change.subscribe(handleKetcherChange);
+    // 或 editor.structChanged.add(handleKetcherChange); 可在此添加尝试。
+
+    if (!eventBound) {
+        console.error("[Front-end] No suitable event binding found. Check Ketcher version and event API.");
+    }
+}
+
+document.getElementById('ifKetcher').addEventListener('load', () => {
+    console.log("[Front-end] iframe loaded. Initializing Ketcher in 1s...");
+    setTimeout(initKetcher, 1000);
+});
+</script>
+'''
+
+em_js = '''
+setTimeout(() => {
+    console.log('inited')
+    k = document.getElementById('ifKetcher');
+    btn = document.getElementById('btn');
+    btn.addEventListener('click', () => {
+        k.contentWindow.ketcher.getSmiles().then((v) => {
+            document.querySelector('#output_smi textarea').value = v;
+        })
+    });
+}, 2e3)
+'''
+
+def create_interface():
+    with gr.Blocks(js=em_js) as demo:
+        gr.Markdown("# Ketcher 与 Gradio 整合示例")
+        with gr.Row():
+            with gr.Column(scale=2):
+                # 嵌入前面定义的HTML
+                gr.HTML(KETCHER_HTML)
+
+            with gr.Column(scale=1):
+                gr.Markdown("### SMILES 输入框 (自动更新)")
+                smiles_input = gr.Textbox(
+                    label="SMILES",
+                    value="C",
+                    placeholder="SMILES structure",
+                    elem_id="smiles_input"
+                )
+
+                get_smiles_btn = gr.Button("手动获取当前SMILES", elem_id='btn')
+                smiles_output = gr.Textbox(label="当前 SMILES(按钮点击获取)", elem_id='output_smi')
+
+                def get_smiles_from_input():
+                    logger.info("Button clicked: Retrieved SMILES value from input.")
+                    print("Button clicked: Current SMILES from input:", smiles_input.value)
+                    return smiles_input.value
+
+                get_smiles_btn.click(fn=None, inputs=None, outputs=smiles_output, js="async () => { k = document.getElementById('ifKetcher'); a = await k.contentWindow.ketcher.getSmiles(); return a; }")
+
+    return demo
+
+demo = create_interface()
+app = gr.mount_gradio_app(app, demo, path="/")
+
+if __name__ == "__main__":
+    # 启动命令：python app.py
+    uvicorn.run(app, host="127.0.0.1", port=7860)

index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>Ketcher 集成测试</title>
+    <style>
+        /* 自定义 Ketcher 容器的样式 */
+        #ketcher-container {
+            width: 800px;
+            height: 600px;
+            border: 1px solid #ccc;
+            margin: 20px auto;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+        }
+    </style>
+</head>
+<body>
+    <div id="ketcher-container">
+      <iframe id="ifKetcher" src="/ketcher/index.html" width="800" height="600"></iframe>
+    </div>
+    <script>
+    setTimeout(() => {
+      var iframe = document.getElementById("ifKetcher");
+      // 访问iframe的window对象
+      var ketcherWindow = iframe.contentWindow;
+      var ketcher = ketcherWindow.ketcher;
+      ketcher.setMolecule('c1ccccc1');
+      console.log('set mol!')
+    }, 2e3)
+    </script>
+</body>
+</html>

ketcher_embed.html

@@ -0,0 +1,72 @@
+<!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>

package.json

@@ -0,0 +1,28 @@
+{
+  "dependencies": {
+    "@babel/runtime": "^7.26.0",
+    "ketcher-standalone": "^2.26.0"
+  },
+  "name": "2024-12-14-gradio-clm",
+  "version": "1.0.0",
+  "main": "index.js",
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "babel-loader": "^9.2.1",
+    "buffer": "^6.0.3",
+    "file-loader": "^6.2.0",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^5.1.4"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}

webpack.config.js

@@ -0,0 +1,55 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  mode: 'development', // 或 'production'
+  entry: './src/index.js', // 入口文件
+  output: {
+    path: path.resolve(__dirname, 'dist'), // 输出目录
+    filename: 'bundle.js',
+    library: 'KetcherBundle',
+    libraryTarget: 'umd',
+    globalObject: 'this',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/, // 处理所有 .js 文件
+        exclude: /node_modules/, // 排除 node_modules 目录
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'], // 使用 env 预设
+            plugins: ['@babel/plugin-transform-runtime'], // 使用 transform-runtime 插件
+          },
+        },
+      },
+      {
+        test: /\.wasm$/, // 处理 .wasm 文件
+        type: 'javascript/auto', // 需要设置为 'javascript/auto' 以正确加载 WASM 文件
+        loader: 'file-loader',
+        options: {
+          name: '[name].[hash].wasm',
+          outputPath: 'binaryWasm/', // 输出到 binaryWasm/ 目录
+        },
+      },
+    ],
+  },
+  resolve: {
+    fallback: {
+      path: require.resolve('path-browserify'), // Polyfill for 'path' module
+      buffer: require.resolve('buffer/'), // Polyfill for 'buffer' module
+      process: require.resolve('process/browser'), // Polyfill for 'process' module
+      fs: false, // 不提供 'fs' 模块的 polyfill
+    },
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'], // 自动提供 Buffer
+      process: 'process/browser', // 自动提供 process
+    }),
+  ],
+  experiments: {
+    asyncWebAssembly: true, // 启用异步 WASM
+  },
+};