rdkit smiles格式实时在线分子图像展示用flask

flask 入口页

mol.index

from flask import Flask, render_template
from rdkit import Chem
from rdkit.Chem import Draw
import base64
from io import BytesIO

app = Flask(__name__)

@app.route('/')
def hello_world():
    smiless = [
    "O=C(Oc1ccccc1C(=O)O)C", # Aspirin (acetylsalicylic acid)
    "CC(=O)Nc1ccc(O)cc1", # Paracetamol (acetaminophen)
    "CC(C)Cc1ccc(C(C)C)cc1", # Ibuprofen
    "CCCCCCCCCCCCCCC(=O)O", # Naproxen
    "OC1(C(C(C(O1)N2C(=NC=N2)C)O)C)C", # Penicillin
    "CCC1(C(C(C(O1)N2C(=NC=N2)C)O)C)CC", # Amoxicillin
    "Fc1cc(N2C(=O)N(C3CC3)C(=O)N=C2C(=O)c2ccccc2)ccc1", # Ciprofloxacin
    "CCC(=O)NC1C(O)C(C(O)C(O)C1O)N", # Metformin
    "CC1(C(C(C(O1)I)C(C(C(C(O2)I)I)I)O)O)C", # Levothyroxine
    "CNC(=O)c1ccc(C(=O)NC2C(C(C(C2O)O)O)O)cc1" # Omeprazole
]

    
    img_list = []

    for simle in smiless:
        print(simle)
        mol = Chem.MolFromSmiles(simle)
        if mol:
            # img = Draw.MolToImage(molecule)
            img = Draw.MolToImage(mol)
            # 将图片数据保存在内存中
            img_data = BytesIO()
            img.save(img_data, format='PNG')
            img_data.seek(0)
            
            # 将图片数据转换为 Base64 编码的字符串
            img_base64 = base64.b64encode(img_data.getvalue()).decode('utf-8')
            img_list.append((img_base64,simle))
        else:
            print("simles Chem.MolFromSmiles error",simle)
 
    return render_template('molecule.html', title='化合物分子展示', img_list=img_list)

@app.route('/molecule/<smiles>')
def molecule(smiles):
    print(smiles)
    molecule = Chem.MolFromSmiles(smiles)
    
    # img = Draw.MolToImage(molecule)
    img = Draw.MolToImage(molecule)
    # 将图片数据保存在内存中
    img_data = BytesIO()
    img.save(img_data, format='PNG')
    img_data.seek(0)
    
    # 将图片数据转换为 Base64 编码的字符串
    img_base64 = base64.b64encode(img_data.getvalue()).decode('utf-8')
 
    return render_template('molecule1.html', title='化合物分子展示', molecule=molecule, img_data=img_base64)

if __name__ == '__main__':
    app.run(debug=True)

templates 静态页目录

在这里插入图片描述
molecule1.html

<!-- 这是 HTML 的注释 -->
<!DOCTYPE html>
<html>
  <head>
    <title>化合物分子展示</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  </head>
  <body>
    
    <!-- 这里使用了 Jinja2 模板引擎的变量插值 -->
    <h1>{{ title }}</h1>
    <p>这是一个化合物分子的展示页面。</p>
    <!-- 这里使用了 Jinja2 模板引擎的条件控制语句 -->
    
      <!-- 这里使用了 Jinja2 模板引擎的数据类型转换 -->
      <!-- 展示分子图像 -->

      <img src="data:image/png;base64,{{ img_data }}" alt="Molecule">


      


<!-- 引入 Bootstrap JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  </body>
</html>

在这里插入图片描述

molecule.html

<!-- 这是 HTML 的注释 -->
<!DOCTYPE html>
<html>
  <head>
    <title>化合物分子展示</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <style>
        .compound-block {
            display: inline-block;
            margin: 10px;
            text-align: center;
            width: 20%;
        }
    </style>
  </head>
  <body>
    
    <!-- 这里使用了 Jinja2 模板引擎的变量插值 -->
    <h1 >{{ title }}</h1>
    <p>这是一个化合物分子的展示页面。</p>
    <!-- 这里使用了 Jinja2 模板引擎的条件控制语句 -->
    
      <!-- 这里使用了 Jinja2 模板引擎的数据类型转换 -->
      <!-- 展示分子图像 -->
     
    
    {% for img_base64, smiles in img_list %}
        <div class="compound-block">
            <img src="data:image/png;base64,{{ img_base64 }}" alt="Compound image">
            <br>
            {{ smiles }}
        </div>
    
    {% endfor %}
    
    

      <!-- <div class="text-center mt-5">
        <img src="data:image/png;base64,{{ img_data }}" alt="Molecule" class="img-fluid">
      </div> -->
      <!-- <img src="data:image/png;base64,{{ img_data|safe }}"> -->
  

    <!-- 引入 Bootstrap CSS 样式 -->


<!-- 引入 Bootstrap JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  </body>
</html>

在这里插入图片描述

原文链接：https://blog.csdn.net/weixin_42357472/article/details/128571570