Upload clm-frontend-dev.py

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)