Files
2025-09-16 18:46:02 +08:00

907 lines
32 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XEMY4SEV43"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XEMY4SEV43');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ComfyUI-Copilot - Your Intelligent Assistant for ComfyUI</title>
<meta name="description" content="ComfyUI-Copilot is an AIGC intelligent assistant built on ComfyUI that provides comprehensive support for workflow building, debugging, and optimization.">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="ComfyUI-Copilot - Your Intelligent Assistant for ComfyUI">
<meta property="og:description" content="Enhancing Image Generation Development with Smart Assistance">
<meta property="og:type" content="website">
<meta property="og:url" content="https://aidc-ai.github.io/ComfyUI-Copilot/">
<!-- Favicon -->
<link rel="icon" type="image/png" href="assets/logo.png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
:root {
--primary-color: #5462eb;
--secondary-color: #f8fafc;
--accent-color: #10b981;
--text-primary: #1e293b;
--text-secondary: #64748b;
--border-color: #e2e8f0;
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
color: var(--text-primary);
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
animation: slide 20s linear infinite;
}
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(-100px); }
}
.header-content {
position: relative;
z-index: 1;
}
.logo {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.tagline {
font-size: 1.25rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.badges {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 2rem;
}
.badge {
display: inline-block;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50px;
text-decoration: none;
color: white;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.badge:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border: none;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
cursor: pointer;
}
.btn-primary {
background: white;
color: var(--primary-color);
}
.btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* Video Section */
.video-section {
padding: 4rem 0;
background: var(--secondary-color);
text-align: center;
}
.video-container {
max-width: 800px;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.video-placeholder {
width: 100%;
height: 450px;
background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: var(--text-secondary);
}
/* Features Section */
.features {
padding: 5rem 0;
}
.section-title {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
text-align: center;
font-size: 1.2rem;
color: var(--text-secondary);
margin-bottom: 3rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.feature-card {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.feature-icon {
width: 60px;
height: 60px;
background: var(--gradient-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
margin-bottom: 1.5rem;
}
.feature-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-primary);
}
.feature-description {
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.feature-image {
width: 100%;
border-radius: 8px;
margin-top: 1rem;
}
/* Update Section */
.update-section {
padding: 4rem 0;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
text-align: center;
}
.update-content {
max-width: 800px;
margin: 0 auto;
}
.update-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.update-subtitle {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.update-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 3rem;
}
.update-feature {
background: rgba(255, 255, 255, 0.1);
padding: 1.5rem;
border-radius: 12px;
backdrop-filter: blur(10px);
}
/* Installation Section */
.installation {
padding: 5rem 0;
background: var(--secondary-color);
}
.installation-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.step-card {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: var(--shadow-md);
position: relative;
}
.step-number {
position: absolute;
top: -15px;
left: 2rem;
width: 30px;
height: 30px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
}
.step-title {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 1rem;
margin-top: 1rem;
}
.code-block {
background: #1e293b;
color: #e2e8f0;
padding: 1rem;
border-radius: 8px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 0.9rem;
overflow-x: auto;
margin: 1rem 0;
}
/* Contact Section */
.contact {
padding: 4rem 0;
text-align: center;
}
.contact-methods {
display: flex;
justify-content: center;
gap: 3rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.contact-method {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.contact-qr {
width: 120px;
height: 120px;
border-radius: 12px;
box-shadow: var(--shadow-md);
}
/* Footer */
.footer {
background: #1e293b;
color: white;
padding: 3rem 0 2rem;
text-align: center;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3 {
margin-bottom: 1rem;
color: #f1f5f9;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.5rem;
}
.footer-links a {
color: #94a3b8;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: white;
}
.footer-bottom {
border-top: 1px solid #334155;
padding-top: 2rem;
color: #94a3b8;
}
/* Responsive Design */
@media (max-width: 768px) {
.container {
padding: 0 15px;
}
.logo {
font-size: 2rem;
}
.tagline {
font-size: 1.1rem;
}
.section-title {
font-size: 2rem;
}
.features-grid {
grid-template-columns: 1fr;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.contact-methods {
gap: 2rem;
}
.contact-qr {
width: 100px;
height: 100px;
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-on-scroll {
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
.animate-on-scroll.visible {
animation-play-state: running;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<div class="container">
<div class="header-content">
<h1 class="logo">🎯 ComfyUI-Copilot</h1>
<p class="tagline">Your Intelligent Assistant for ComfyUI</p>
<div class="badges">
<a href="#" class="badge">
<i class="fas fa-tag"></i> Version 2.0.0
</a>
<a href="https://github.com/AIDC-AI/ComfyUI-Copilot" class="badge">
<i class="fab fa-github"></i> GitHub
</a>
<a href="https://discord.gg/7H9dMCvuMp" class="badge">
<i class="fab fa-discord"></i> Discord
</a>
<a href="https://aclanthology.org/2025.acl-demo.61.pdf" class="badge">
<i class="fas fa-file-pdf"></i> ACL2025 Paper
</a>
</div>
<div class="cta-buttons">
<a href="#installation" class="btn btn-primary">
<i class="fas fa-download"></i>
Get Started
</a>
<a href="https://github.com/AIDC-AI/ComfyUI-Copilot" class="btn btn-secondary">
<i class="fab fa-github"></i>
View on GitHub
</a>
</div>
</div>
</div>
</header>
<!-- Video Section -->
<section class="video-section">
<div class="container">
<h2 class="section-title">See ComfyUI-Copilot in Action</h2>
<div class="video-container">
<video controls width="100%" style="max-width: 800px; border-radius: 8px; box-shadow: var(--shadow-lg);">
<source src="https://github.com/user-attachments/assets/4b5806b8-dd34-4219-ac9f-6896115c5600" type="video/mp4">
<p>Your browser doesn't support HTML5 video. Here is a <a href="https://github.com/user-attachments/assets/4b5806b8-dd34-4219-ac9f-6896115c5600">link to the video</a> instead.</p>
</video>
</div>
</div>
</section>
<!-- Major Update Section -->
<section class="update-section">
<div class="container">
<div class="update-content">
<h2 class="update-title">🎉 Major Update v2.0</h2>
<p class="update-subtitle">Evolving into a Workflow Development Coworker</p>
<p>ComfyUI-Copilot v2.0 evolves from a "helper tool" into a "development partner"—not just assisting with workflow development, but capable of autonomously completing development tasks.</p>
<div class="update-features">
<div class="update-feature">
<h3>🔧 One-Click Debug</h3>
<p>Automatically detects errors in your workflow, precisely identifies issues, and provides repair suggestions.</p>
</div>
<div class="update-feature">
<h3>🔄 Workflow Rewriting</h3>
<p>Optimizes the current workflow based on your description, such as adjusting parameters, adding nodes, and improving logic.</p>
</div>
<div class="update-feature">
<h3>🚀 Enhanced Generation</h3>
<p>Understands your requirements more accurately and generates tailored workflows, lowering the barrier to entry for beginners.</p>
</div>
<div class="update-feature">
<h3>🧠 Upgraded Architecture</h3>
<p>Now aware of your local ComfyUI environment, Copilot delivers optimized, personalized solutions.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features" id="features">
<div class="container">
<h2 class="section-title">🔥 Core Features</h2>
<p class="section-subtitle">Comprehensive support for your ComfyUI workflow development</p>
<div class="features-grid">
<div class="feature-card animate-on-scroll">
<div class="feature-icon">
<i class="fas fa-magic"></i>
</div>
<h3 class="feature-title">💎 Generate First Version Workflow</h3>
<p class="feature-description">
Based on your text description, we provide workflows that meet your needs, returning 3 high-quality workflows from our library and 1 AI-generated workflow. You can import them into ComfyUI with one click to start generating images.
</p>
<div class="feature-demo">
<strong>Usage:</strong> Simply type "I want a workflow for xxx."
</div>
</div>
<div class="feature-card animate-on-scroll">
<div class="feature-icon">
<i class="fas fa-bug"></i>
</div>
<h3 class="feature-title">💎 Workflow Debug</h3>
<p class="feature-description">
Automatically analyze errors in workflows, help you fix parameter errors and workflow connection errors, and provide optimization suggestions. Includes automatic model download suggestions.
</p>
<div class="feature-demo">
<strong>Usage:</strong> Click the Debug button in the upper right corner of the input box.
</div>
</div>
<div class="feature-card animate-on-scroll">
<div class="feature-icon">
<i class="fas fa-edit"></i>
</div>
<h3 class="feature-title">💎 Workflow Rewriting</h3>
<p class="feature-description">
Tell us what you're not satisfied with, and let us help you modify the workflow, add nodes, modify parameters, and optimize workflow structure.
</p>
<div class="feature-demo">
<strong>Usage:</strong> Type "Help me add xxx to the current canvas."
</div>
</div>
<div class="feature-card animate-on-scroll">
<div class="feature-icon">
<i class="fas fa-sliders-h"></i>
</div>
<h3 class="feature-title">💎 Parameter Tuning</h3>
<p class="feature-description">
Set parameter ranges, and the system will automatically batch execute different parameter combinations and generate visual comparison results to help you find the optimal configuration.
</p>
<div class="feature-demo">
<strong>Usage:</strong> Switch to the GenLab tab and follow the guidance.
</div>
</div>
<div class="feature-card animate-on-scroll">
<div class="feature-icon">
<i class="fas fa-lightbulb"></i>
</div>
<h3 class="feature-title">💎 Node Recommendations</h3>
<p class="feature-description">
Based on your description, recommend nodes you might need and provide recommendation reasons.
</p>
<div class="feature-demo">
<strong>Usage:</strong> Type "I want a node for xxx."
</div>
</div>
<div class="feature-card animate-on-scroll">
<div class="feature-icon">
<i class="fas fa-search"></i>
</div>
<h3 class="feature-title">💎 Node Query System</h3>
<p class="feature-description">
Select a node on the canvas, click the node query button to explore the node in depth, view its description, parameter definitions, usage tips, and downstream workflow recommendations.
</p>
<div class="feature-demo">
<strong>Usage:</strong> Type "What's the usage, input and output of node xxx."
</div>
</div>
<div class="feature-card animate-on-scroll">
<div class="feature-icon">
<i class="fas fa-cube"></i>
</div>
<h3 class="feature-title">💎 Model Recommendations</h3>
<p class="feature-description">
Based on your text requirements, Copilot helps you find base models and LoRA models that suit your needs.
</p>
<div class="feature-demo">
<strong>Usage:</strong> Type "I want a Lora that generates xxx images."
</div>
</div>
<div class="feature-card animate-on-scroll">
<div class="feature-icon">
<i class="fas fa-sitemap"></i>
</div>
<h3 class="feature-title">💎 Downstream Node Recommendations</h3>
<p class="feature-description">
After you select a node on the canvas, based on the existing nodes on your canvas, recommend downstream subgraphs you might need.
</p>
<div class="feature-demo">
<strong>Usage:</strong> Select a node and get intelligent recommendations.
</div>
</div>
</div>
</div>
</section>
<!-- Installation Section -->
<section class="installation" id="installation">
<div class="container">
<h2 class="section-title">🚀 Getting Started</h2>
<p class="section-subtitle">Easy installation in just a few steps</p>
<div class="installation-steps">
<div class="step-card animate-on-scroll">
<div class="step-number">1</div>
<h3 class="step-title">Clone Repository</h3>
<p>Clone ComfyUI-Copilot in the ComfyUI custom_nodes directory:</p>
<div class="code-block">cd ComfyUI/custom_nodes<br>git clone https://github.com/AIDC-AI/ComfyUI-Copilot</div>
</div>
<div class="step-card animate-on-scroll">
<div class="step-number">2</div>
<h3 class="step-title">Install Dependencies</h3>
<p>Install the required dependencies:</p>
<div class="code-block">cd ComfyUI/custom_nodes/ComfyUI-Copilot<br>pip install -r requirements.txt</div>
<p><strong>For Windows users:</strong></p>
<div class="code-block">python_embeded\python.exe -m pip install -r ComfyUI\custom_nodes\ComfyUI-Copilot\requirements.txt</div>
</div>
<div class="step-card animate-on-scroll">
<div class="step-number">3</div>
<h3 class="step-title">Activate Copilot</h3>
<p>After running ComfyUI, find the Copilot activation button on the left side of the panel to launch its service.</p>
</div>
<div class="step-card animate-on-scroll">
<div class="step-number">4</div>
<h3 class="step-title">Generate API Key</h3>
<p>Click the * button, enter your email address, and the API Key will be automatically sent to your email address. Paste it into the input box and click save to activate Copilot.</p>
</div>
</div>
<div style="text-align: center; margin-top: 3rem;">
<div class="step-card" style="display: inline-block; max-width: 600px;">
<h3 style="color: var(--primary-color); margin-bottom: 1rem;">
<i class="fas fa-store"></i> Alternative: ComfyUI Manager
</h3>
<p>Open ComfyUI Manager, click on Custom Nodes Manager, search for ComfyUI-Copilot, and click the install button. Remember to update to the latest version.</p>
<p style="margin-top: 1rem; font-size: 0.9rem; color: var(--text-secondary);">
<strong>Note:</strong> The Manager requires permissions. Run ComfyUI with "sudo python main.py" to prevent errors.
</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact" id="contact">
<div class="container">
<h2 class="section-title">📞 Contact Us</h2>
<p class="section-subtitle">For any queries or suggestions, feel free to reach out!</p>
<div style="margin: 2rem 0;">
<p><strong>Email:</strong> ComfyUI-Copilot@service.alibaba.com</p>
</div>
<div class="contact-methods">
<div class="contact-method">
<img src="assets/qrcode.png" alt="WeChat QR Code" class="contact-qr">
<h3>WeChat</h3>
</div>
<div class="contact-method">
<img src="assets/discordqrcode.png" alt="Discord QR Code" class="contact-qr">
<h3>Discord</h3>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>ComfyUI-Copilot</h3>
<p>Your Intelligent Assistant for ComfyUI - Enhancing Image Generation Development with Smart Assistance</p>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul class="footer-links">
<li><a href="#features">Features</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="https://github.com/AIDC-AI/ComfyUI-Copilot">GitHub</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Community</h3>
<ul class="footer-links">
<li><a href="https://discord.gg/7H9dMCvuMp">Discord</a></li>
<li><a href="https://x.com/Pixelle_AI">Twitter</a></li>
<li><a href="https://aclanthology.org/2025.acl-demo.61.pdf">Research Paper</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Company</h3>
<p>👾 <strong>Alibaba International Digital Commerce</strong> 👾</p>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 ComfyUI-Copilot. Licensed under the MIT License.</p>
<p>⭐ Star us on <a href="https://github.com/AIDC-AI/ComfyUI-Copilot" style="color: var(--accent-color);">GitHub</a> if you find this project useful!</p>
</div>
</div>
</footer>
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Animate elements on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
// Observe all elements with animation class
document.querySelectorAll('.animate-on-scroll').forEach(el => {
observer.observe(el);
});
// Add stagger animation delay to feature cards
document.querySelectorAll('.feature-card').forEach((card, index) => {
card.style.animationDelay = `${index * 0.1}s`;
});
// Add stagger animation delay to step cards
document.querySelectorAll('.step-card').forEach((card, index) => {
card.style.animationDelay = `${index * 0.15}s`;
});
// Copy code blocks on click
document.querySelectorAll('.code-block').forEach(block => {
block.style.cursor = 'pointer';
block.title = 'Click to copy';
block.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText(block.textContent);
// Visual feedback
const originalBg = block.style.background;
block.style.background = 'var(--accent-color)';
setTimeout(() => {
block.style.background = originalBg;
}, 200);
} catch (err) {
console.error('Failed to copy text: ', err);
}
});
});
// Add loading animation to badges
document.querySelectorAll('.badge').forEach(badge => {
badge.addEventListener('mouseenter', () => {
badge.style.transform = 'translateY(-2px) scale(1.05)';
});
badge.addEventListener('mouseleave', () => {
badge.style.transform = 'translateY(0) scale(1)';
});
});
// Parallax effect for header background
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const header = document.querySelector('.header::before');
if (header) {
header.style.transform = `translateY(${scrolled * 0.5}px)`;
}
});
</script>
</body>
</html>