tool: added interactive architecture finder — 3-question tool that recommends rent/split/DIY for AI agent hosting
This commit is contained in:
Oliver
@@ -78,6 +78,42 @@
|
||||
body { padding: 24px 16px; }
|
||||
.header h1 { font-size: 1.6rem; }
|
||||
}
|
||||
|
||||
/* ── Architecture Tool ───────────────────────────── */
|
||||
.arch-tool { background: #010f20; border: 1px solid #001a2e; border-radius: 18px; padding: 32px; margin: 24px 0; position: relative; overflow: hidden; }
|
||||
.arch-progress { display: flex; gap: 8px; margin-bottom: 28px; justify-content: center; }
|
||||
.arch-step { width: 36px; height: 36px; border-radius: 50%; background: #001a2e; color: #555; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; transition: all .3s; position: relative; }
|
||||
.arch-step.active { background: #00f5ff; color: #000; box-shadow: 0 0 20px rgba(0,245,255,0.3); }
|
||||
.arch-step:not(:last-child)::after { content: ''; position: absolute; left: 36px; top: 50%; width: 40px; height: 2px; background: #001a2e; }
|
||||
.arch-step.active:not(:last-child)::after { background: #00f5ff; }
|
||||
.arch-question h3 { color: #f0f0ff; margin: 0 0 6px; font-size: 1.15rem; }
|
||||
.arch-hint { color: #888; font-size: 0.9rem; margin-bottom: 20px; }
|
||||
.arch-options { display: flex; gap: 16px; }
|
||||
.arch-options.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
|
||||
.arch-opt { background: #000810; border: 1px solid #001a2e; border-radius: 14px; padding: 20px; cursor: pointer; text-align: left; transition: all .25s; flex: 1; color: inherit; font-family: inherit; display: flex; flex-direction: column; gap: 8px; }
|
||||
.arch-opt:hover { border-color: rgba(0,245,255,0.3); background: #001220; transform: translateY(-2px); }
|
||||
.arch-opt.selected { border-color: #00f5ff; background: #001a30; box-shadow: 0 0 24px rgba(0,245,255,0.12); }
|
||||
.arch-icon { font-size: 1.6rem; }
|
||||
.arch-label { font-weight: 700; color: #f0f0ff; font-size: 1rem; }
|
||||
.arch-desc { font-size: 0.82rem; color: #999; line-height: 1.5; }
|
||||
.arch-desc strong { color: #c8c8d8; }
|
||||
.arch-result-bg { display: none; }
|
||||
.arch-result-bg.show { display: block; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,245,255,0.06) 0%, transparent 70%); pointer-events: none; }
|
||||
.arch-result-inner { text-align: center; padding: 24px 0 8px; position: relative; z-index: 1; }
|
||||
.arch-result-icon { font-size: 3rem; margin-bottom: 12px; }
|
||||
.arch-result-inner h3 { color: #f0f0ff; font-size: 1.3rem; margin: 0 0 8px; }
|
||||
.arch-result-text { color: #c8c8d8; max-width: 520px; margin: 0 auto 20px; font-size: 0.95rem; }
|
||||
.arch-result-details { max-width: 520px; margin: 0 auto 20px; text-align: left; }
|
||||
.arch-rec-line { display: flex; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #001a2e; font-size: 0.88rem; color: #c8c8d8; }
|
||||
.arch-rec-line:last-child { border-bottom: none; }
|
||||
.arch-rec-label { font-weight: 600; color: #00f5ff; min-width: 100px; flex-shrink: 0; }
|
||||
.arch-result-actions { margin-top: 16px; }
|
||||
@media (max-width: 700px) {
|
||||
.arch-options { flex-direction: column; }
|
||||
.arch-options.three-col { grid-template-columns: 1fr; }
|
||||
.arch-tool { padding: 20px; }
|
||||
}
|
||||
/* ── End Architecture Tool ────────────────────────── */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -214,6 +250,221 @@
|
||||
<li>Coupon codes reduce the first month to as low as $0.00 for evaluation</li>
|
||||
</ul>
|
||||
|
||||
<h2>Find Your Architecture — Interactive Tool</h2>
|
||||
<p>Not sure whether to rent everything, go full DIY, or split the two? Answer three questions and get your personalized recommendation.</p>
|
||||
|
||||
<div id="arch-tool" class="arch-tool">
|
||||
<div class="arch-progress">
|
||||
<div class="arch-step active" data-step="1">1</div>
|
||||
<div class="arch-step" data-step="2">2</div>
|
||||
<div class="arch-step" data-step="3">3</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 1: Runtime -->
|
||||
<div class="arch-question" data-step="1">
|
||||
<h3>1. What are your runtime requirements?</h3>
|
||||
<p class="arch-hint">How will your agent be used — always-on or on-demand?</p>
|
||||
<div class="arch-options">
|
||||
<button class="arch-opt" data-value="247" onclick="archPick(1, '247')">
|
||||
<span class="arch-icon">⏰</span>
|
||||
<span class="arch-label">24/7 Always-On</span>
|
||||
<span class="arch-desc">I need <strong>cron jobs</strong>, automated workflows, and my agent available around the clock. It should respond instantly whenever called.</span>
|
||||
</button>
|
||||
<button class="arch-opt" data-value="ondemand" onclick="archPick(1, 'ondemand')">
|
||||
<span class="arch-icon">⚡</span>
|
||||
<span class="arch-label">On-Demand</span>
|
||||
<span class="arch-desc">I'll use my agent <strong>intermittently</strong> — during work hours, for specific projects, or when I manually start it. No background tasks needed.</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Privacy -->
|
||||
<div class="arch-question" data-step="2" style="display:none">
|
||||
<h3>2. Where can your LLM inference run?</h3>
|
||||
<p class="arch-hint">Do you need to keep the model in-house, or can you use external APIs?</p>
|
||||
<div class="arch-options">
|
||||
<button class="arch-opt" data-value="own" onclick="archPick(2, 'own')">
|
||||
<span class="arch-icon">🏢</span>
|
||||
<span class="arch-label">Company-Controlled</span>
|
||||
<span class="arch-desc">I need <strong>everything in-house</strong> — the agent and the LLM. Company data never leaves my infrastructure. I'm prepared to invest in a GPU server.</span>
|
||||
</button>
|
||||
<button class="arch-opt" data-value="api" onclick="archPick(2, 'api')">
|
||||
<span class="arch-icon">☁️</span>
|
||||
<span class="arch-label">API-Flexible</span>
|
||||
<span class="arch-desc">I'm fine using <strong>API-based LLMs</strong> (OpenRouter, OpenAI, Anthropic). Data is handled via API calls — no GPU hardware needed on my end.</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Skill Level -->
|
||||
<div class="arch-question" data-step="3" style="display:none">
|
||||
<h3>3. What is your technical skill level?</h3>
|
||||
<p class="arch-hint">How comfortable are you managing infrastructure yourself?</p>
|
||||
<div class="arch-options three-col">
|
||||
<button class="arch-opt" data-value="expert" onclick="archPick(3, 'expert')">
|
||||
<span class="arch-icon">🧑💻</span>
|
||||
<span class="arch-label">Expert</span>
|
||||
<span class="arch-desc">I run Linux servers, configure networks, manage Docker, and troubleshoot production systems. <strong>Infrastructure is not a barrier.</strong></span>
|
||||
</button>
|
||||
<button class="arch-opt" data-value="intermediate" onclick="archPick(3, 'intermediate')">
|
||||
<span class="arch-icon">🛠️</span>
|
||||
<span class="arch-label">Intermediate</span>
|
||||
<span class="arch-desc">I've used Linux before. I <strong>can follow a guide</strong> to set up a server, but I'd rather not maintain infrastructure daily.</span>
|
||||
</button>
|
||||
<button class="arch-opt" data-value="beginner" onclick="archPick(3, 'beginner')">
|
||||
<span class="arch-icon">🚀</span>
|
||||
<span class="arch-label">Beginner</span>
|
||||
<span class="arch-desc">I want my agent to <strong>just work</strong>. I don't want to manage servers, SSH, or infrastructure. I prefer a dashboard and one-click setup.</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Result -->
|
||||
<div id="arch-result" style="display:none">
|
||||
<div id="arch-result-bg" class="arch-result-bg"></div>
|
||||
<div class="arch-result-inner">
|
||||
<div id="arch-result-icon" class="arch-result-icon">✅</div>
|
||||
<h3 id="arch-result-title">Your Recommendation</h3>
|
||||
<p id="arch-result-text" class="arch-result-text"></p>
|
||||
<div id="arch-result-details" class="arch-result-details"></div>
|
||||
<div class="arch-result-actions">
|
||||
<button class="btn" onclick="archReset()">↻ Start Over</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
// Avoid polluting global namespace beyond what onclick needs
|
||||
window._arch = { s1: null, s2: null, s3: null };
|
||||
})();
|
||||
|
||||
function archPick(step, value) {
|
||||
window._arch['s' + step] = value;
|
||||
|
||||
// Visual feedback — highlight selected
|
||||
document.querySelectorAll('.arch-question[data-step="' + step + '"] .arch-opt').forEach(function(el) {
|
||||
el.classList.toggle('selected', el.getAttribute('data-value') === value);
|
||||
});
|
||||
|
||||
if (step < 3) {
|
||||
// Advance to next step after brief delay for effect
|
||||
setTimeout(function() {
|
||||
document.querySelector('.arch-question[data-step="' + step + '"]').style.display = 'none';
|
||||
document.querySelector('.arch-question[data-step="' + (step + 1) + '"]').style.display = 'block';
|
||||
// Update progress
|
||||
document.querySelectorAll('.arch-step').forEach(function(el) {
|
||||
el.classList.toggle('active', parseInt(el.getAttribute('data-step')) <= step + 1);
|
||||
});
|
||||
// Scroll to keep tool visible
|
||||
document.getElementById('arch-tool').scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}, 300);
|
||||
} else {
|
||||
// All answers collected — compute result
|
||||
setTimeout(function() { archCompute(); }, 300);
|
||||
}
|
||||
}
|
||||
|
||||
function archCompute() {
|
||||
var s1 = window._arch.s1;
|
||||
var s2 = window._arch.s2;
|
||||
var s3 = window._arch.s3;
|
||||
var result = {};
|
||||
|
||||
// Hide questions, show result
|
||||
document.querySelectorAll('.arch-question').forEach(function(q) { q.style.display = 'none'; });
|
||||
document.querySelector('.arch-progress').style.display = 'none';
|
||||
|
||||
if (s2 === 'own' && s3 === 'expert') {
|
||||
result = {
|
||||
icon: '🖥️',
|
||||
title: 'Full DIY — Agent + GPU on Your Own',
|
||||
text: 'You have the skills and the need for full control. Run everything on your own hardware.',
|
||||
details: '<div class="arch-rec-line"><span class="arch-rec-label">Agent:</span><span>Your own VPS or server — install Hermes/OpenClaw manually</span></div><div class="arch-rec-line"><span class="arch-rec-label">Inference:</span><span>Own GPU server running Llama, Mistral, or DeepSeek (24 GB+ VRAM)</span></div><div class="arch-rec-line"><span class="arch-rec-label">Monthly cost:</span><span>$80–$1,000+ (GPU server) + VPS</span></div><div class="arch-rec-line"><span class="arch-rec-label">Pros:</span><span>Complete control, no third-party dependency</span></div><div class="arch-rec-line"><span class="arch-rec-label">Cons:</span><span>Highest upfront cost, ongoing maintenance</span></div>'
|
||||
};
|
||||
} else if (s2 === 'own' && s3 === 'intermediate') {
|
||||
result = {
|
||||
icon: '🔀',
|
||||
title: 'Split — Managed Agent + Your Own GPU',
|
||||
text: 'Let a provider handle the agent infrastructure while you keep inference in-house for privacy.',
|
||||
details: '<div class="arch-rec-line"><span class="arch-rec-label">Agent:</span><span>derez.ai managed hosting ($4.99–$14.99/mo) — full Linux, SSH, backups, dashboard</span></div><div class="arch-rec-line"><span class="arch-rec-label">Inference:</span><span>Your own GPU server — run open-weight models locally</span></div><div class="arch-rec-line"><span class="arch-rec-label">Monthly cost:</span><span>$5–$15 (agent) + GPU server</span></div><div class="arch-rec-line"><span class="arch-rec-label">Pros:</span><span>No agent infra to manage, full inference privacy</span></div><div class="arch-rec-line"><span class="arch-rec-label">Cons:</span><span>Still need GPU hardware and know-how</span></div>'
|
||||
};
|
||||
} else if (s2 === 'own' && s3 === 'beginner') {
|
||||
result = {
|
||||
icon: '📞',
|
||||
title: 'A Note on Your Requirements',
|
||||
text: 'Running your own GPU requires substantial technical knowledge. Consider starting with managed hosting and API-based inference, then migrating to self-hosted inference as your skills grow.',
|
||||
details: '<div class="arch-rec-line"><span class="arch-rec-label">Recommendation:</span><span>Start with <strong>Managed Agent + API inference</strong> below</span></div><div class="arch-rec-line"><span class="arch-rec-label">Long-term goal:</span><span>Once comfortable, add your own GPU server and switch inference to self-hosted</span></div>'
|
||||
};
|
||||
} else if (s1 === '247' && s2 === 'api' && s3 === 'beginner') {
|
||||
result = {
|
||||
icon: '✅',
|
||||
title: 'Rent It All — Managed Hosting + API Inference',
|
||||
text: 'Perfect match. derez.ai handles your agent 24/7 with cron jobs, backups, and SSH — while you use API-based LLMs. No infrastructure to manage.',
|
||||
details: '<div class="arch-rec-line"><span class="arch-rec-label">Agent:</span><span>derez.ai managed — runs 24/7 with cron, backups, full Linux access</span></div><div class="arch-rec-line"><span class="arch-rec-label">Inference:</span><span>OpenRouter, OpenAI, or Anthropic API — pay per token</span></div><div class="arch-rec-line"><span class="arch-rec-label">Monthly cost:</span><span>$5–$15/mo (agent) + ~$2–$20/mo (inference tokens)</span></div><div class="arch-rec-line"><span class="arch-rec-label">Effort:</span><span>Zero server management. Configure from a dashboard.</span></div>'
|
||||
};
|
||||
} else if (s1 === '247' && s2 === 'api' && s3 === 'intermediate') {
|
||||
result = {
|
||||
icon: '✅',
|
||||
title: 'Rent It All — or Split for Flexibility',
|
||||
text: 'You can handle some infra, but why bother? Managed agent hosting + API inference saves you hours each week.',
|
||||
details: '<div class="arch-rec-line"><span class="arch-rec-label">Best option:</span><span>derez.ai managed agent + API inference — $5–$15/mo, no maintenance</span></div><div class="arch-rec-line"><span class="arch-rec-label">Alternative:</span><span>DIY on your own VPS ($5–$10/mo) + API inference if you enjoy tinkering</span></div><div class="arch-rec-line"><span class="arch-rec-label">The difference:</span><span>Managed saves ~3–5 hours/month on updates, backups, and troubleshooting</span></div>'
|
||||
};
|
||||
} else if (s1 === '247' && s2 === 'api' && s3 === 'expert') {
|
||||
result = {
|
||||
icon: '🔀',
|
||||
title: 'Split — DIY Agent + API Inference',
|
||||
text: 'You have the skills. Run the agent on your own $5–10/mo VPS and use API-based LLMs. Maximum flexibility, minimum spend.',
|
||||
details: '<div class="arch-rec-line"><span class="arch-rec-label">Agent:</span><span>Your own VPS — install Hermes Agent manually (DigitalOcean, Hetzner, etc.)</span></div><div class="arch-rec-line"><span class="arch-rec-label">Inference:</span><span>OpenRouter or direct API — pay per token, no GPU needed</span></div><div class="arch-rec-line"><span class="arch-rec-label">Monthly cost:</span><span>$5–$10/mo (VPS) + ~$2–$20/mo (inference tokens)</span></div><div class="arch-rec-line"><span class="arch-rec-label">Pros:</span><span>Full control, lowest cost, no vendor lock-in</span></div><div class="arch-rec-line"><span class="arch-rec-label">Cons:</span><span>You handle updates, backups, and security yourself</span></div>'
|
||||
};
|
||||
} else if (s1 === 'ondemand' && s2 === 'api' && s3 === 'beginner') {
|
||||
result = {
|
||||
icon: '✅',
|
||||
title: 'Rent It All — Low Commitment, High Value',
|
||||
text: 'On-demand use + API inference + managed hosting means you pay only when you use it. No idle costs.',
|
||||
details: '<div class="arch-rec-line"><span class="arch-rec-label">Agent:</span><span>derez.ai managed — start/stop as needed, pay monthly</span></div><div class="arch-rec-line"><span class="arch-rec-label">Inference:</span><span>API-based — pay only for tokens you use</span></div><div class="arch-rec-line"><span class="arch-rec-label">Monthly cost:</span><span>$5–$15/mo (agent) + pennies for inference</span></div><div class="arch-rec-line"><span class="arch-rec-label">Perfect for:</span><span>Learning, experimenting, prototyping before committing to 24/7</span></div>'
|
||||
};
|
||||
} else if (s1 === 'ondemand' && s2 === 'api' && (s3 === 'intermediate' || s3 === 'expert')) {
|
||||
result = {
|
||||
icon: '🔀',
|
||||
title: 'Split — DIY VPS + API Inference',
|
||||
text: 'On-demand use on your own VPS is the cheapest path. Spin up your agent when you need it, tear down when done.',
|
||||
details: '<div class="arch-rec-line"><span class="arch-rec-label">Agent:</span><span>Your own VPS — spin up on demand (hourly billing possible)</span></div><div class="arch-rec-line"><span class="arch-rec-label">Inference:</span><span>API-based — pay per token</span></div><div class="arch-rec-line"><span class="arch-rec-label">Monthly cost:</span><span>$5–$10/mo (VPS, potentially lower with hourly billing)</span></div><div class="arch-rec-line"><span class="arch-rec-label">Pros:</span><span>Absolute lowest cost, full control</span></div>'
|
||||
};
|
||||
} else {
|
||||
// Catch-all
|
||||
result = {
|
||||
icon: '🔀',
|
||||
title: 'A Balanced Approach',
|
||||
text: 'Based on your answers, a split architecture makes the most sense. Let us handle what you don\'t want to, and you keep control of what matters.',
|
||||
details: '<div class="arch-rec-line"><span class="arch-rec-label">Recommendation:</span><span>Explore derez.ai managed hosting + your preferred inference method</span></div><div class="arch-rec-line"><span class="arch-rec-label">Talk to us:</span><span>support@derez.ai — we help with architecture decisions</span></div>'
|
||||
};
|
||||
}
|
||||
|
||||
// Show result
|
||||
document.getElementById('arch-result-bg').className = 'arch-result-bg show';
|
||||
document.getElementById('arch-result-icon').textContent = result.icon;
|
||||
document.getElementById('arch-result-title').textContent = result.title;
|
||||
document.getElementById('arch-result-text').textContent = result.text;
|
||||
document.getElementById('arch-result-details').innerHTML = result.details;
|
||||
document.getElementById('arch-result').style.display = 'block';
|
||||
document.getElementById('arch-result').scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
|
||||
function archReset() {
|
||||
window._arch = { s1: null, s2: null, s3: null };
|
||||
document.getElementById('arch-result').style.display = 'none';
|
||||
document.querySelector('.arch-progress').style.display = 'flex';
|
||||
document.querySelectorAll('.arch-question').forEach(function(q) { q.style.display = 'none'; });
|
||||
document.querySelector('.arch-question[data-step="1"]').style.display = 'block';
|
||||
document.querySelectorAll('.arch-step').forEach(function(el) {
|
||||
el.classList.toggle('active', el.getAttribute('data-step') === '1');
|
||||
});
|
||||
document.querySelectorAll('.arch-opt').forEach(function(el) { el.classList.remove('selected'); });
|
||||
}
|
||||
</script>
|
||||
|
||||
<h2>Further Reading</h2>
|
||||
<ul>
|
||||
<li><a href="https://derez.ai/blog/posts/hermes-agent-setup-guide.html">Hermes Agent Setup Guide</a> — From zero to a running agent</li>
|
||||
|
||||
Reference in New Issue
Block a user