---
layout: modern
title: Home
---
<!-- Hero Section -->
<section class="hero">
<div class="hero-container">
<div class="hero-content">
<div class="hero-badge">
<i class="fas fa-star"></i> v1.0 Now Available
</div>
<h1 class="hero-title">Next-Generation AI Image Generation</h1>
<p class="hero-subtitle">
Generate stunning images in seconds with FLUX schnell fp8, fully containerized and ready for production
</p>
<div class="hero-buttons">
<a href="{{ site.baseurl }}/quickstart" class="btn btn-primary">
<i class="fas fa-rocket"></i> Get Started
</a>
<a href="https://github.com/dhofheinz/mcp-comfyui-flux" class="btn btn-secondary">
<i class="fab fa-github"></i> View on GitHub
</a>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="stats">
<div class="stats-container">
<div class="stat-item">
<div class="stat-value">2-4s</div>
<div class="stat-label">Generation Time</div>
</div>
<div class="stat-item">
<div class="stat-value">~10GB</div>
<div class="stat-label">VRAM Usage</div>
</div>
<div class="stat-item">
<div class="stat-value">4x</div>
<div class="stat-label">Upscaling Power</div>
</div>
<div class="stat-item">
<div class="stat-value">100%</div>
<div class="stat-label">Docker Ready</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features">
<div class="features-container">
<div class="features-header">
<h2 class="features-title gradient-text">Powerful Features</h2>
<p class="features-subtitle">Everything you need for professional AI image generation</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3 class="feature-title">Lightning Fast</h3>
<p class="feature-description">
Generate high-quality images in just 2-4 seconds with FLUX schnell fp8 optimization
</p>
</div>
<div class="feature-card">
<div class="feature-icon">🚀</div>
<h3 class="feature-title">Production Ready</h3>
<p class="feature-description">
Fully containerized with Docker for seamless deployment and scaling
</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎮</div>
<h3 class="feature-title">GPU Optimized</h3>
<p class="feature-description">
Leverages NVIDIA CUDA for maximum performance with ~10GB VRAM usage
</p>
</div>
<div class="feature-card">
<div class="feature-icon">🤖</div>
<h3 class="feature-title">Claude Integration</h3>
<p class="feature-description">
Native MCP support for seamless integration with Claude Desktop
</p>
</div>
<div class="feature-card">
<div class="feature-icon">📦</div>
<h3 class="feature-title">Batch Processing</h3>
<p class="feature-description">
Generate up to 8 image variations efficiently in a single request
</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3 class="feature-title">Image Processing</h3>
<p class="feature-description">
Built-in background removal and 4x AI upscaling with specialized models
</p>
</div>
</div>
</div>
</section>
<!-- Code Examples -->
<section class="code-examples">
<div class="code-container">
<div class="features-header">
<h2 class="features-title gradient-text">Simple Yet Powerful</h2>
<p class="features-subtitle">See how easy it is to generate amazing images</p>
</div>
<div class="code-tabs">
<button class="code-tab active" data-tab="simple">Simple Generation</button>
<button class="code-tab" data-tab="advanced">Advanced Options</button>
<button class="code-tab" data-tab="processing">Image Processing</button>
</div>
<div class="code-content" id="simple-content">
<pre><code class="language-javascript">// Generate a stunning image with just a prompt
generate_image({
prompt: "cyberpunk city at night, neon lights, rain"
})</code></pre>
</div>
<div class="code-content" id="advanced-content" style="display: none;">
<pre><code class="language-javascript">// Fine-tune your generation with advanced parameters
generate_image({
prompt: "fantasy dragon in flight, epic lighting",
batch_size: 4, // Generate 4 variations
seed: 42, // Reproducible results
width: 1280, // Custom dimensions
height: 768,
negative_prompt: "blurry, low quality"
})</code></pre>
</div>
<div class="code-content" id="processing-content" style="display: none;">
<pre><code class="language-javascript">// Process your images with AI-powered tools
// Remove background
remove_background({
image_path: "output/image.png",
alpha_matting: true
})
// Upscale to 4K resolution
upscale_image({
image_path: "output/image.png",
model: "ultrasharp"
})</code></pre>
</div>
</div>
</section>
<!-- Installation CTA -->
<section class="features">
<div class="features-container">
<div class="hero-content">
<h2 class="features-title gradient-text">Ready to Start?</h2>
<p class="features-subtitle">Get up and running in minutes with our simple installation</p>
<div class="code-content" style="max-width: 600px; margin: 2rem auto;">
<pre><code class="language-bash"># One-command installation
git clone https://github.com/dhofheinz/mcp-comfyui-flux.git
cd mcp-comfyui-flux
./install.sh</code></pre>
</div>
<div class="hero-buttons">
<a href="{{ site.baseurl }}/quickstart" class="btn btn-primary">
<i class="fas fa-book"></i> Read Documentation
</a>
<a href="{{ site.baseurl }}/examples" class="btn btn-secondary">
<i class="fas fa-flask"></i> View Examples
</a>
</div>
</div>
</div>
</section>
<script>
// Tab switching for code examples
document.querySelectorAll('.code-tab').forEach(tab => {
tab.addEventListener('click', () => {
// Remove active class from all tabs
document.querySelectorAll('.code-tab').forEach(t => t.classList.remove('active'));
// Hide all content
document.querySelectorAll('.code-content').forEach(c => c.style.display = 'none');
// Add active class to clicked tab
tab.classList.add('active');
// Show corresponding content
const contentId = tab.dataset.tab + '-content';
document.getElementById(contentId).style.display = 'block';
});
});
</script>
