
蛋白质结构发现的革命性变革:从 Ai-driven 对话式应用开发中获得的 5 个重要启示
- Rifx.Online
- Programming , Generative AI , Chatbots
- 27 Feb, 2025
Please translate the following text to Chinese. Requirements: 1. Keep code blocks (```) unchanged 2. Keep inline code (`) unchanged 3. Keep Markdown formatting 4. Use these technical term translations: AI -> 人工智能 AlphaFold -> AlphaFold protein -> 蛋白质 protein structure -> 蛋白质结构 protein sequence -> 蛋白质序列 protein discovery -> 蛋白质发现 drug discovery -> 药物发现 Node.js -> Node.js HTML -> HTML CSS -> CSS JavaScript -> JavaScript Express -> Express body-parser -> body-parser client-side -> 客户端 server-side -> 服务器端 API -> 应用程序接口 chatbot -> 聊天机器人 user-friendly -> 用户友好 conversational interfaces -> 对话式界面 autonomous agents -> 自主代理 agentic framework -> 代理框架 amino acids -> 氨基酸 dashboard -> 仪表板 repository -> 代码库 dependencies -> 依赖项 npm -> npm local machine -> 本地机器 server -> 服务器 frontend -> 前端 backend -> 后端 framework -> 框架 data -> 数据 dynamic response -> 动态响应 query -> 查询 sequence -> 序列 function -> 功能 design -> 设计 interface -> 界面 algorithm -> 算法 innovation -> 创新
Text: ## Building Apps Without Menus
Have you ever thought about building an app that isn’t based on menus? Often, when an app has too many features, finding the right option can be difficult.
In today’s AI-driven world, a better approach is to use conversational and context-based interactions. This method makes apps simpler and more user-friendly.
AI’s Impact on Scientific Research
At the AI Action Summit in Paris, Sundar Pichai, the CEO of Google and Alphabet, talked about how AI is transforming scientific research. He highlighted how AI tools like AlphaFold have helped predict protein structures, decoding millions of them. This breakthrough has greatly improved our understanding of biology.
At the AI Action Summit in Paris, Sundar Pichai, CEO of Google and Alphabet, highlighted AI’s transformative role in scientific discovery, particularly in predicting protein structures. AI tools like AlphaFold have decoded millions of protein structures, significantly advancing our understanding of biology.
Developed by Google DeepMind, AlphaFold has revolutionized protein structure prediction, solving a decades-long challenge. This breakthrough accelerates drug discovery and disease research, demonstrating AI’s profound influence on scientific innovation.
一种现代的人工智能驱动的蛋白质结构发现方法
这个已经可用的应用程序突出了在人工智能驱动的对话式和自主代理(人工智能代理)时代中的简化设计方法。
1. 引言
- 背景与动机:
- 讨论直观的对话式界面相较于传统菜单设计的必要性。
- 强调这样的界面如何通过减少复杂性来赋能老年人和非技术用户。
- 行业启示:
- 引用Sundar Pichai在巴黎人工智能峰会上最近的讲话,强调人工智能的变革性角色——即使在蛋白质结构预测等领域(例如,通过像AlphaFold这样的突破)。
2. 定义用例:“寻找蛋白质结构”
科学相关性:
- 解释蛋白质结构分析在药物发现和生物医学研究等领域的重要性。
- 提到人工智能模型(如AlphaFold)如何通过快速从序列数据预测蛋白质结构而彻底改变了这一领域。
用户视角:
- 描述一个场景,其中一位研究人员——甚至是一个热心的外行——向应用程序询问:“蛋白质X的结构是什么?”并收到一个清晰的、上下文相关的响应。
3. 设计理念:对话式和上下文相关
以用户为中心的方式:
- 强调构建一个使用自然语言进行交互的界面,消除令人困惑的菜单。
- 突出设计原则,如简洁性、清晰的排版和极简的布局,以迎合老年人和非技术用户。
上下文理解:
- 解释应用程序将如何解释用户查询,保持对话上下文,并提供后续问题以细化结果。
这是蛋白质结构发现的基本(虚拟)设计。
点击血红蛋白或胰岛素以继续。
说“嗨”并点击发送。
响应将在下一个弹出窗口中出现。
这是蛋白质结构发现基本界面的HTML代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Protein Structure Discovery Dashboard</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1, h2, h3 {
margin-bottom: 10px;
}
h1 {
color: #4CAF50;
}
<style>
#dashboard {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
gap: 20px;
}
.protein-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 20px;
width: 300px;
cursor: pointer;
transition: transform 0.2s;
}
.protein-card:hover {
transform: scale(1.02);
}
.protein-card h2 {
margin-top: 0;
}
#protein-details {
display: none;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin: 20px auto;
max-width: 1000px;
}
.chat-container {
display: flex;
gap: 10px;
margin-top: 20px;
}
.chat-box {
flex: 0 0 60%;
background-color: #fafafa;
border: 1px solid #ccc;
border-radius: 4px;
height: 400px;
padding: 10px;
overflow-y: auto;
}
.response-popup {
flex: 0 0 35%;
background-color: #e6f7ff;
border: 1px solid #91d5ff;
border-radius: 4px;
padding: 10px;
height: 400px;
overflow-y: auto;
display: none;
}
.response-popup h3 {
margin-bottom: 10px;
}
.message {
margin-bottom: 8px;
padding: 8px;
border-radius: 4px;
max-width: 80%;
word-wrap: break-word;
}
.user-message {
background-color: #d9f7be;
text-align: right;
margin-left: auto;
color: #155724;
}
.bot-message {
background-color: #fff1b8;
text-align: left;
color: #856404;
}
.input-area {
margin-top: 15px;
display: flex;
}
#user-input {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
button {
padding: 10px 20px;
margin-left: 10px;
border: none;
background-color: #1890ff;
color: #fff;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: #40a9ff;
}
</style>
</head>
<body>
<div class="container">
<h1>我是您进行蛋白质结构发现的好伙伴!<br>随时可以问我任何相关问题。</h1>
<div id="dashboard">
<div class="protein-card" data-protein-id="1">
<h2>血红蛋白</h2>
<p>功能:氧气运输</p>
<p>长度:约574个氨基酸</p>
</div>
<div class="protein-card" data-protein-id="2">
<h2>胰岛素</h2>
<p>功能:葡萄糖调节</p>
<p>长度:约110个氨基酸</p>
</div>
</div>
<div id="protein-details">
<h2>蛋白质详情 - <span id="protein-title"></span></h2>
<div class="chat-container">
<div class="chat-box" id="chatBox">
<div class="message bot-message">欢迎!询问有关该蛋白质的结构或功能。</div>
</div>
<div class="response-popup" id="responsePopup">
<h3>动态响应</h3>
<p id="responseContent"></p>
</div>
</div>
<div class="input-area">
<input type="text" id="user-input" placeholder="输入您的问题..." />
<button onclick="sendMessage()">发送</button>
</div>
</div>
</div>
<script>
const proteinCards = document.querySelectorAll('.protein-card');
const proteinDetails = document.getElementById('protein-details');
const proteinTitle = document.getElementById('protein-title');
const chatBox = document.getElementById('chatBox');
proteinCards.forEach(card => {
card.addEventListener('click', () => {
const proteinId = card.dataset.proteinId;
const proteinName = card.querySelector('h2').textContent;
proteinTitle.textContent = proteinName;
proteinDetails.style.display = 'block';
chatBox.innerHTML += `<div class="message bot-message">正在获取${proteinName}的结构数据...</div>`;
});
});
function appendMessage(text, sender) {
const messageDiv = document.createElement('div');
messageDiv.classList.add('message');
messageDiv.classList.add(sender === 'user' ? 'user-message' : 'bot-message');
messageDiv.textContent = text;
chatBox.appendChild(messageDiv);
chatBox.scrollTop = chatBox.scrollHeight;
}
function getDynamicResponse(userText) {
return `预测的结构为${proteinTitle.textContent}:根据您的查询"${userText}",AlphaFold显示出高置信度的预测,具有核心β-折叠结构域。`;
}
function showResponsePopup(responseText) {
const popup = document.getElementById('responsePopup');
const responseContent = document.getElementById('responseContent');
responseContent.textContent = responseText;
popup.style.display = 'block';
}
function sendMessage() {
const userInput = document.getElementById('user-input');
const userText = userInput.value.trim();
if (userText === "") return;
appendMessage(userText, 'user');
userInput.value = '';
setTimeout(() => {
const dynamicResponse = getDynamicResponse(userText);
appendMessage(dynamicResponse, 'bot');
showResponsePopup(dynamicResponse);
}, 1000);
}
</script>
</body>
</html>
4. 服务器端的代理框架
什么是代理框架?
- 定义为一个系统,其中使用自主人工智能代理来管理任务、做出决策和协调复杂的工作流程。
- 在您的应用中的应用:
- 任务编排: 代理可以处理各种功能——从获取蛋白质数据、与预测应用程序接口(如AlphaFold的开放访问模型)集成,到根据用户反馈优化查询。
- 自主推理: 代理不断评估用户输入和上下文,以决定咨询哪些数据源,确保响应保持相关性和准确性。
- 模块化与可扩展性: 这样的框架支持不断发展的功能,使您能够随着时间的推移集成额外的科学数据库或计算工具。
5. 实施考虑
自然语言处理 (NLP):
- 详细说明将如何使用 NLP 技术解析用户查询并将其转换为后端可执行的任务。
与蛋白质数据库的集成:
- 概述连接到公共蛋白质结构代码库或应用程序接口以获取最新数据的策略。
安全性与可靠性:
- 讨论如何确保人工智能保持准确和可信,符合行业领导者强调的更广泛的伦理和安全人工智能的行业推动。
6. 提高可访问性
界面设计提示:
- 使用大字体、简单图标和清晰指示。
- 考虑为可能觉得打字困难的用户提供语音输入选项。
用户测试:
- 强调与老年人和非技术用户测试应用程序的重要性,以收集反馈并完善对话体验。
7. 蛋白质结构发现的示例应用程序代码,包括前端和后端。
以下是一个完整的逐步指南,包括我们蛋白质结构发现应用程序的 HTML(客户端)代码和 Node.js(服务器端)代码,采用代理框架。请按照这些步骤在您的本地机器上设置和运行示例。
客户端代码 (HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protein Structure Discovery</title>
</head>
<body>
<h1>Protein Structure Discovery</h1>
<form id="protein-form">
<label for="protein-input">Enter Protein Sequence:</label>
<input type="text" id="protein-input" name="protein-input" required>
<button type="submit">Discover Structure</button>
</form>
<div id="result"></div>
<script src="app.js"></script>
</body>
</html>
服务器端代码 (Node.js)
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
app.use(bodyParser.json());
app.use(express.static('public'));
app.post('/discover', (req, res) => {
const proteinSequence = req.body.sequence;
// Logic to discover protein structure goes here
res.json({ structure: 'Example Structure' });
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
设置步骤
-
克隆代码库
使用以下命令将代码库克隆到您的本地机器:git clone https://github.com/example/protein-structure-discovery.git
-
导航到项目目录
将您的目录更改为项目文件夹:cd protein-structure-discovery
-
安装依赖项
使用 npm 安装所需的依赖项:npm install
-
运行应用程序
启动服务器:node server.js
-
访问应用程序
打开您的浏览器并访问http://localhost:3000
以访问应用程序。
结论
本指南为您提供了设置蛋白质结构发现应用程序所需的代码和步骤。您可以修改服务器端代码中的逻辑,以实现实际的结构发现算法。
第一步. 设置项目目录
- 为您的项目创建一个新文件夹(例如,
protein-discovery-app
)。 - 在此文件夹内,创建两个文件:
index.html
(用于客户端代码)server.js
(用于 Node.js 后端)
第2步. 创建HTML文件(index.html)
将以下HTML代码粘贴到您的index.html
文件中。该文件提供了一个包含蛋白质卡片(例如,血红蛋白、胰岛素)和聊天机器人的详细信息部分的仪表板。当点击某个蛋白质时,详细信息部分将被显示。聊天框允许您询问有关蛋白质的问题,动态响应将在聊天区域和弹出卡片中同时出现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>蛋白质结构发现仪表板</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1, h2, h3 {
margin-bottom: 10px;
}
<style>
#dashboard {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
gap: 20px;
}
.protein-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 20px;
width: 300px;
cursor: pointer;
transition: transform 0.2s;
}
.protein-card:hover {
transform: scale(1.02);
}
.protein-card h2 {
margin-top: 0;
}
#protein-details {
display: none;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin: 20px auto;
max-width: 1000px;
}
.chat-container {
display: flex;
gap: 10px;
margin-top: 20px;
}
.chat-box {
flex: 0 0 60%;
background-color: #fafafa;
border: 1px solid #ccc;
border-radius: 4px;
height: 400px;
padding: 10px;
overflow-y: auto;
}
.response-popup {
flex: 0 0 35%;
background-color: #e6f7ff;
border: 1px solid #91d5ff;
border-radius: 4px;
padding: 10px;
height: 400px;
overflow-y: auto;
display: none;
}
.response-popup h3 {
margin-bottom: 10px;
}
.message {
margin-bottom: 8px;
padding: 8px;
border-radius: 4px;
max-width: 80%;
word-wrap: break-word;
}
.user-message {
background-color: #d9f7be;
text-align: right;
margin-left: auto;
color: #155724;
}
.bot-message {
background-color: #fff1b8;
text-align: left;
color: #856404;
}
.input-area {
margin-top: 15px;
display: flex;
}
#user-input {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
button {
padding: 10px 20px;
margin-left: 10px;
border: none;
background-color: #1890ff;
color: #fff;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: #40a9ff;
}
</style>
</head>
<body>
<div class="container">
<h1>我是您进行蛋白质结构发现的好伙伴!<br>随时可以问我任何相关问题。</h1>
<div id="dashboard">
<div class="protein-card" data-protein-id="1">
<h2>血红蛋白</h2>
<p>功能:氧气运输</p>
<p>长度:约574个氨基酸</p>
</div>
<div class="protein-card" data-protein-id="2">
<h2>胰岛素</h2>
<p>功能:葡萄糖调节</p>
<p>长度:约110个氨基酸</p>
</div>
</div>
<div id="protein-details">
<h2>蛋白质细节 - <span id="protein-title"></span></h2>
<div class="chat-container">
<div class="chat-box" id="chatBox">
<div class="message bot-message">欢迎!请询问该蛋白质的结构或功能。</div>
</div>
<div class="response-popup" id="responsePopup">
<h3>动态响应</h3>
<p id="responseContent"></p>
</div>
</div>
<div class="input-area">
<input type="text" id="user-input" placeholder="输入您的问题..." />
<button onclick="sendMessage()">发送</button>
</div>
</div>
</div>
<script>
const proteinCards = document.querySelectorAll('.protein-card');
const proteinDetails = document.getElementById('protein-details');
const proteinTitle = document.getElementById('protein-title');
const chatBox = document.getElementById('chatBox');
proteinCards.forEach(card => {
card.addEventListener('click', () => {
const proteinId = card.dataset.proteinId;
const proteinName = card.querySelector('h2').textContent;
proteinTitle.textContent = proteinName;
proteinDetails.style.display = 'block';
chatBox.innerHTML += `<div class="message bot-message">正在获取${proteinName}的结构数据...</div>`;
});
});
function appendMessage(text, sender) {
const messageDiv = document.createElement('div');
messageDiv.classList.add('message');
messageDiv.classList.add(sender === 'user' ? 'user-message' : 'bot-message');
messageDiv.textContent = text;
chatBox.appendChild(messageDiv);
chatBox.scrollTop = chatBox.scrollHeight;
}
function sendMessage() {
const userInput = document.getElementById('user-input');
const userText = userInput.value.trim();
if (userText === "") return;
appendMessage(userText, 'user');
userInput.value = '';
fetch('/api/proteinResponse', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
proteinName: proteinTitle.textContent,
query: userText
})
})
.then(response => response.json())
.then(data => {
appendMessage(data.response, 'bot');
showResponsePopup(data.response);
})
.catch(error => {
console.error('获取蛋白质响应时出错:', error);
appendMessage("抱歉,处理您的请求时出错。", 'bot');
});
}
function showResponsePopup(responseText) {
const popup = document.getElementById('responsePopup');
const responseContent = document.getElementById('responseContent');
responseContent.textContent = responseText;
popup.style.display = 'block';
}
</script>
</body>
</html>
第 3 步. 创建服务器代码 (server.js)
将以下 Node.js 代码粘贴到您的 server.js
文件中。此代码创建一个简单的 Express 服务器,模拟用于蛋白质结构发现的“代理框架”。该服务器定义了一个 ProteinAgent
类,处理传入的查询并返回模拟的蛋白质结构预测。
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
app.use(bodyParser.json());
class ProteinAgent {
constructor(proteinName) {
this.proteinName = proteinName;
}
analyzeQuery(query) {
return `For protein ${this.proteinName}, your query "${query}" indicates a predicted structure featuring a dominant beta-sheet core with flanking alpha-helices. Confidence level: 95%.`;
}
}
app.post('/api/proteinResponse', (req, res) => {
const { proteinName, query } = req.body;
if (!proteinName || !query) {
return res.status(400).json({ error: 'Both proteinName and query are required.' });
}
const agent = new ProteinAgent(proteinName);
const responseText = agent.analyzeQuery(query);
res.json({ response: responseText });
});
app.listen(port, () => {
console.log(`Agentic Framework server listening at http://localhost:${port}`);
});
第4步. 安装依赖项并运行服务器
-
初始化一个 Node.js 项目: 打开终端(或命令提示符),导航到你的项目文件夹,并运行:
npm init -y
-
安装所需的包: 通过运行以下命令安装 Express 和 Body-Parser:
npm install express body-parser
-
启动服务器: 运行服务器:
node server.js
你应该会看到类似以下的消息:
Agentic Framework server listening at http://localhost:3000
第5步. 运行应用程序
-
打开HTML文件: 在您的网页浏览器中打开
index.html
。(对于本地开发,您可以使用简单的HTTP服务器,比如live-server
或http-server
来提供文件,以确保fetch调用正常工作。) -
测试应用程序:
- 点击其中一个蛋白质卡片(例如,血红蛋白)以加载其详细信息。
- 在聊天框中,输入一个问题(例如,“核心结构是什么?”)并按发送。
- 客户端的JavaScript将调用后端的应用程序接口
/api/proteinResponse
,您将在聊天框和弹出卡片中看到模拟的动态响应。
最后的想法
通过构建这个应用程序,专注于简洁性和上下文感知的对话,您不仅拥抱了前沿的人工智能技术,而且确保复杂的科学工具对每个人都变得可访问——即使是那些没有技术背景的人。这种方法与Sundar Pichai在巴黎人工智能峰会上所做的富有远见的评论相一致,强调了人工智能在转变技术和社会方面的潜力。