AlphaFold3

接手了 AF3 的项目，涉及到一些蛋白质的技术，需要学习一下。

技术基础

1. AlphaFold 3 已具备药物设计的能力，能够精确预测药物中常见分子（如配体和抗体）的结构。这些分子可以与蛋白质结合，从而调控蛋白质在人体健康与疾病中的相互作用。在预测药物与蛋白质的相互作用（如配体与蛋白质、抗体与靶蛋白的结合）方面，AlphaFold 3 实现了前所未有的准确度。

2. PDB（Protein Data Bank）蛋白质数据库文件是生物大分子结构研究中的核心工具之一。PDB 文件格式广泛用于存储蛋白质、核酸及其相关配体的三维结构信息。研究人员可以通过这些文件，获取详细的原子坐标、化学组成以及生物大分子与配体之间的相互作用信息。
   还有其他文件格式（如 CIF、SDF、SMILES）同样在生物大分子和小分子化合物的研究中扮演着重要角色。
   【提示】附录中有 PDB 文件的预览地址，可用于生成、网络传输后的对比。

前端展示 pdb 文件

使用 rcsb-molstar 这个库。
文件存放于 public/rcsb 目录下，通过以下代码引入：

const script = document.createElement('script')
script.src = '/rcsb/rcsb-molstar.js'
script.type = 'text/javascript'
script.onload = () => {
  // 脚本加载完毕后的回调
  console.log('script rcsb-molstar loaded successfully.')
}
document.head.appendChild(script)

初始化时创建实例

let viewer: any
let intervalRcsb: any
const rcsbLoading = ref(false)
const initRcsb = (url?: any) => {
  try {
    viewer = new rcsbMolstar.Viewer('molViewer', {
      showImportControls: false,
      showSessionControls: false,
      layoutShowLog: false,
      layoutShowControls: false,
      showMembraneOrientationPreset: true,
      showNakbColorTheme: true
    })
  } catch (e) {
    console.log('rcsb plugin is loading...', e)
  }
  if (viewer) {
    rcsbLoading.value = false
    clearInterval(intervalRcsb)
    viewer.loadStructureFromUrl(url, 'pdb', false)
  }
}

点击按钮触发展示。

const showGraph = async (row: any) => {
  nextTick(() => {
    intervalRcsb = setInterval(() => {
      initRcsb(window.APP_CONFIG.fileApi)
    }, 100)
  })
}

前端绘制结构图

文件存放于 public/standalone 目录下，通过以下代码引入：

<Dialog
  v-model="canDraw"
  width="860px"
  max-height="auto"
  :fullscreen="false"
  :title="t('bioinformatics.draw')"
>
  <div v-loading="ketcherLoading">
    <iframe
      class="frame"
      id="idKetcher"
      src="/standalone/index.html"
      width="800"
      height="600"
    ></iframe>
    <BaseButton class="w-80px mb-20px" @click="getSmiles">
      {{ t('bioinformatics.save') }}
    </BaseButton>
  </div>
</Dialog>

初始化

const canDraw = ref(false)
const ketcherLoading = ref(false)
let ketcherObject: any = null
const initKetcher = () => {
  const ketcherFrame: any = document.getElementById('idKetcher')
  let ketcher = null
  if ('contentDocument' in ketcherFrame) {
    ketcher = ketcherFrame.contentWindow.ketcher
  } else {
    ketcher = document['frames']['idKetcher'].window.ketcher
  }
  if (ketcher) {
    clearInterval(intervalKetcher)
    ketcherLoading.value = false
    ketcherObject = ketcher
  } else {
    console.log('ketcher plugin is loading...')
  }
}

watch(canDraw, (show: boolean) => {
  if (!show) clearInterval(intervalKetcher)
})

点击按钮触发绘图功能。

const openDraw = (index: number) => {
  canDraw.value = true
  ketcherLoading.value = true
  nextTick(() => {
    intervalKetcher = setInterval(() => {
      initKetcher()
    }, 500)
  })
}

离子展示

第一次在网页中输出离子，例如：CU2+ 在数据传输中这样表示，但是在网页现实中需要将2+作为上标

<span>CU<sup>2+</sup></span>

附录
rcsb-molstar官方例子
pdb文件生成图预览
一文看懂AlphaFold2&3输出结果的json文件内容