<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI智能体平台 - 沉浸式交互版</title>
<style>
:root {
--bg-dark: #121212;
--primary: #00e5ff;
--secondary: #ff2d75;
--text: rgba(255,255,255,0.87);
}
body {
background-color: var(--bg-dark);
color: var(--text);
font-family: 'Segoe UI', system-ui;
margin: 0;
overflow-x: hidden;
}
/* 粒子背景效果 */
#particles-js {
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
/* 3D导航卡片 */
.nav-card {
width: 200px;
height: 280px;
perspective: 1000px;
margin: 20px;
display: inline-block;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.nav-card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
.card-front {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
border: 1px solid rgba(0,229,255,0.2);
}
.card-back {
background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
transform: rotateY(180deg);
font-size: 14px;
line-height: 1.6;
}
/* 智能体开发平台的可视化编辑器 */
.workflow-editor {
width: 90%;
height: 500px;
margin: 30px auto;
background: rgba(30,30,40,0.7);
border-radius: 10px;
border: 1px solid rgba(0,229,255,0.3);
position: relative;
overflow: hidden;
}
.node {
position: absolute;
width: 120px;
background: rgba(26,32,44,0.9);
border: 1px solid var(--primary);
border-radius: 8px;
padding: 10px;
cursor: move;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: all 0.2s;
}
.node:hover {
box-shadow: 0 0 15px var(--primary);
}
.node-header {
color: var(--primary);
font-weight: bold;
margin-bottom: 8px;
border-bottom: 1px solid rgba(0,229,255,0.3);
padding-bottom: 5px;
}
.node-port {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--secondary);
display: inline-block;
margin: 0 5px;
cursor: pointer;
}
/* AI问答界面 */
.chat-container {
width: 70%;
height: 600px;
margin: 30px auto;
display: flex;
flex-direction: column;
background: rgba(20,20,30,0.8);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
.chat-messages {
flex: 1;
padding: 20px;
overflow-y: auto;
scroll-behavior: smooth;
}
.message {
margin-bottom: 15px;
max-width: 80%;
padding: 12px 18px;
border-radius: 18px;
line-height: 1.4;
position: relative;
animation: fadeIn 0.3s ease-out;
}
.user-message {
background: rgba(0,229,255,0.15);
border: 1px solid rgba(0,229,255,0.3);
margin-left: auto;
border-bottom-right-radius: 5px;
}
.ai-message {
background: rgba(255,45,117,0.15);
border: 1px solid rgba(255,45,117,0.3);
margin-right: auto;
border-bottom-left-radius: 5px;
}
.input-area {
display: flex;
padding: 15px;
background: rgba(30,30,40,0.9);
border-top: 1px solid rgba(255,255,255,0.1);
}
#user-input {
flex: 1;
padding: 12px 15px;
border-radius: 25px;
border: none;
background: rgba(255,255,255,0.1);
color: white;
font-size: 16px;
outline: none;
}
#send-btn {
background: var(--primary);
color: black;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
margin-left: 10px;
cursor: pointer;
transition: all 0.2s;
}
#send-btn:hover {
transform: scale(1.05);
box-shadow: 0 0 15px var(--primary);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<!-- 粒子背景 -->
<div id="particles-js"></div>
<header style="text-align: center; padding: 40px 0;">
<h1 style="font-size: 2.5em; margin-bottom: 30px; background: linear-gradient(90deg, var(--primary), var(--secondary));
-webkit-background-clip: text; color: transparent;">AI智能体开发平台</h1>
<!-- 3D导航卡片 -->
<div class="nav-card">
<div class="card-inner">
<div class="card-front">
<svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<h3>项目案例</h3>
</div>
<div class="card-back">
查看我们成功的AI实施案例，包括自然语言处理、计算机视觉等领域的应用
</div>
</div>
</div>
<div class="nav-card">
<div class="card-inner">
<div class="card-front">
<svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
<line x1="8" y1="21" x2="16" y1="21"></line>
<line x1="12" y1="17" x2="12" y1="21"></line>
</svg>
<h3>智能体开发</h3>
</div>
<div class="card-back">
使用我们的可视化工具快速构建AI智能体，支持拖拽式工作流设计
</div>
</div>
</div>
<!-- 其他导航卡片... -->
</header>
<!-- 智能体开发平台的可视化编辑器 -->
<section style="text-align: center; padding: 40px 0;">
<h2>智能体开发平台</h2>
<p>拖拽组件构建AI工作流，实时查看处理结果</p>
<div class="workflow-editor" id="workflow-area">
<div class="node" style="top: 50px; left: 100px;">
<div class="node-header">文本输入</div>
<div class="node-port" style="float: right;"></div>
<div>用户输入文本内容</div>
</div>
<div class="node" style="top: 50px; left: 300px;">
<div class="node-header">NLP处理</div>
<div class="node-port" style="float: left;"></div>
<div class="node-port" style="float: right;"></div>
<div>自然语言理解模块</div>
</div>
<div class="node" style="top: 50px; left: 500px;">
<div class="node-header">知识图谱</div>
<div class="node-port" style="float: left;"></div>
<div>领域知识查询</div>
</div>
<div class="node" style="top: 200px; left: 300px;">
<div class="node-header">响应生成</div>
<div class="node-port" style="float: left;"></div>
<div class="node-port" style="float: right;"></div>
<div>生成自然语言响应</div>
</div>
<div class="node" style="top: 350px; left: 300px;">
<div class="node-header">输出</div>
<div class="node-port" style="float: left;"></div>
<div>返回最终结果</div>
</div>
</div>
</section>
<!-- AI问答界面 -->
<section style="text-align: center; padding: 40px 0 80px;">
<h2>AI问答系统</h2>
<p>多模态交互支持文本、语音和图像输入</p>
<div class="chat-container">
<div class="chat-messages" id="chat-messages">
<div class="message ai-message">
您好！我是AI助手，可以回答关于智能体开发、项目案例等各种问题。请问有什么可以帮您？
</div>
</div>
<div class="input-area">
<input type="text" id="user-input" placeholder="输入您的问题...">
<button id="send-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</button>
</div>
</div>
</section>
<!-- 引入必要的JS库 -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// 初始化粒子背景
particlesJS("particles-js", {
particles: {
number: { value: 80, density: { enable: true, value_area: 800 } },
color: { value: "#00e5ff" },
shape: { type: "circle" },
opacity: { value: 0.5, random: true },
size: { value: 3, random: true },
line_linked: { enable: true, distance: 150, color: "#00e5ff", opacity: 0.4, width: 1 },
move: { enable: true, speed: 2, direction: "none", random: true, straight: false, out_mode: "out" }
},
interactivity: {
detect_on: "canvas",
events: {
onhover: { enable: true, mode: "repulse" },
onclick: { enable: true, mode: "push" }
}
}
});
// 实现节点拖拽功能
const nodes = document.querySelectorAll('.node');
nodes.forEach(node => {
let isDragging = false;
let offsetX, offsetY;
node.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - node.getBoundingClientRect().left;
offsetY = e.clientY - node.getBoundingClientRect().top;
node.style.zIndex = 1000;
e.preventDefault();
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const workflowArea = document.getElementById('workflow-area');
const rect = workflowArea.getBoundingClientRect();
let x = e.clientX - rect.left - offsetX;
let y = e.clientY - rect.top - offsetY;
// 限制在容器范围内
x = Math.max(0, Math.min(x, rect.width - node.offsetWidth));
y = Math.max(0, Math.min(y, rect.height - node.offsetHeight));
node.style.left = x + 'px';
node.style.top = y + 'px';
});
document.addEventListener('mouseup', () => {
isDragging = false;
node.style.zIndex = '';
});
});
// 实现AI聊天功能
document.getElementById('send-btn').addEventListener('click', sendMessage);
document.getElementById('user-input').addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage();
});
function sendMessage() {
const input = document.getElementById('user-input');
const message = input.value.trim();
if (!message) return;
// 添加用户消息
addMessage(message, 'user');
input.value = '';
// 模拟AI响应
setTimeout(() => {
const responses = [
"我理解您的问题是关于智能体开发的。我们的平台支持拖拽式工作流设计，您可以从左侧面板拖动组件到画布上。",
"项目案例库包含了我们在金融、医疗、教育等多个领域的成功实施案例。您想了解哪个行业的应用？",
"要开发一个新的智能体，建议您先从定义使用场景开始，然后逐步添加NLP、知识图谱等模块。",
"我们平台的帮助文档提供了详细的API参考和教程，您可以在文档中心搜索相关问题。"
];
const response = responses[Math.floor(Math.random() * responses.length)];
addMessage(response, 'ai');
}, 800);
}
function addMessage(text, sender) {
const messages = document.getElementById('chat-messages');
const message = document.createElement('div');
message.classList.add('message');
message.classList.add(sender === 'user' ? 'user-message' : 'ai-message');
message.textContent = text;
messages.appendChild(message);
messages.scrollTop = messages.scrollHeight;
}
</script>
</body>
</html>
index.html
style.css
index.js
index.html