907 lines
32 KiB
HTML
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>© 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>
|