tcpsyn
bd6c8ccbab
- Add testimonial slider with 8 fake caller reviews - Add how-it-works page with visual architecture diagram - Expand voice pools: Inworld 25 voices (14M/11F), ElevenLabs 22 (14M/8F) - Voice pools auto-switch when TTS provider changes - Add cover art locally, update cache-busted image refs - Add "More from Luke" footer links (MMG, prints, YouTube) - Ad channel configurable in settings UI Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
246 lines
13 KiB
HTML
246 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>How It Works — Luke at the Roost</title>
|
|
<meta name="description" content="How Luke at the Roost works: AI-generated callers with unique personalities, real phone calls, voice synthesis, and a live control room — all built from scratch.">
|
|
<link rel="canonical" href="https://lukeattheroost.com/how-it-works">
|
|
|
|
<meta property="og:title" content="How It Works — Luke at the Roost">
|
|
<meta property="og:description" content="The tech behind a one-of-a-kind AI radio show. Real callers, AI callers, voice synthesis, and a live control room.">
|
|
<meta property="og:image" content="https://podcast.macneilmediagroup.com/media/podcasts/LukeAtTheRoost/cover_feed.png?v=3">
|
|
<meta property="og:url" content="https://lukeattheroost.com/how-it-works">
|
|
<meta property="og:type" content="website">
|
|
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4c-2 0-4 2-4 5 0 1 .3 2 .8 3C26 13 24 16 24 20c0 2 .5 4 1.5 5.5L22 28c-2 1-4 3-5 6l-3 10c-.5 2 .5 3 2 3h4l1-4 2 4h6l-1-6 3 6h6l-1-6 3 6h4c1.5 0 2.5-1 2-3l-3-10c-1-3-3-5-5-6l-3.5-2.5C35.5 24 36 22 36 20c0-4-2-7-4.8-8 .5-1 .8-2 .8-3 0-3-2-5-4-5z' fill='%23e8791d'/%3E%3Ccircle cx='30' cy='17' r='1.5' fill='%231a1209'/%3E%3Cpath d='M36 15c1-1 3-1 4 0s1 3 0 4' fill='none' stroke='%23cc2222' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M28 22c2 1 4 1 6 0' fill='none' stroke='%23e8791d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E">
|
|
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Nav -->
|
|
<nav class="page-nav">
|
|
<a href="/" class="nav-home">Luke at the Roost</a>
|
|
</nav>
|
|
|
|
<!-- Page Header -->
|
|
<section class="page-header">
|
|
<h1>How It Works</h1>
|
|
<p class="page-subtitle">Every caller on the show is a one-of-a-kind character — generated in real time by a custom-built AI system. Here's a peek behind the curtain.</p>
|
|
</section>
|
|
|
|
<!-- Overview -->
|
|
<section class="hiw-section">
|
|
<div class="hiw-card hiw-hero-card">
|
|
<div class="hiw-diagram">
|
|
<div class="diagram-row">
|
|
<div class="diagram-box diagram-accent">
|
|
<div class="diagram-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
|
|
</div>
|
|
<span>Luke (Host)</span>
|
|
</div>
|
|
</div>
|
|
<div class="diagram-arrow">↓</div>
|
|
<div class="diagram-row">
|
|
<div class="diagram-box">
|
|
<div class="diagram-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
|
</div>
|
|
<span>Control Room</span>
|
|
</div>
|
|
</div>
|
|
<div class="diagram-arrow">↓</div>
|
|
<div class="diagram-row diagram-row-split">
|
|
<div class="diagram-box">
|
|
<div class="diagram-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
|
</div>
|
|
<span>AI Brain</span>
|
|
</div>
|
|
<div class="diagram-box">
|
|
<div class="diagram-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/></svg>
|
|
</div>
|
|
<span>Voice Engine</span>
|
|
</div>
|
|
<div class="diagram-box">
|
|
<div class="diagram-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
|
</div>
|
|
<span>Live News</span>
|
|
</div>
|
|
</div>
|
|
<div class="diagram-arrow">↓</div>
|
|
<div class="diagram-row diagram-row-split">
|
|
<div class="diagram-box diagram-accent">
|
|
<div class="diagram-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
|
</div>
|
|
<span>AI Callers</span>
|
|
</div>
|
|
<div class="diagram-box diagram-accent">
|
|
<div class="diagram-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
|
</div>
|
|
<span>Real Callers</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Steps -->
|
|
<section class="hiw-section">
|
|
<h2>The Anatomy of an AI Caller</h2>
|
|
|
|
<div class="hiw-steps">
|
|
<div class="hiw-step">
|
|
<div class="hiw-step-number">1</div>
|
|
<div class="hiw-step-content">
|
|
<h3>A Person Is Born</h3>
|
|
<p>Every caller starts as a blank slate. The system generates a complete identity: name, age, job, hometown, and personality. Each caller gets a unique speaking style — some ramble, some are blunt, some deflect with humor. They have relationships, vehicles, opinions, memories, and reasons for being up this late.</p>
|
|
<div class="hiw-detail-grid">
|
|
<div class="hiw-detail">
|
|
<span class="hiw-detail-label">Unique Names</span>
|
|
<span class="hiw-detail-value">48 names</span>
|
|
</div>
|
|
<div class="hiw-detail">
|
|
<span class="hiw-detail-label">Personality Layers</span>
|
|
<span class="hiw-detail-value">20+</span>
|
|
</div>
|
|
<div class="hiw-detail">
|
|
<span class="hiw-detail-label">Towns with Real Knowledge</span>
|
|
<span class="hiw-detail-value">32</span>
|
|
</div>
|
|
<div class="hiw-detail">
|
|
<span class="hiw-detail-label">Unique Voices</span>
|
|
<span class="hiw-detail-value">25</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hiw-step">
|
|
<div class="hiw-step-number">2</div>
|
|
<div class="hiw-step-content">
|
|
<h3>They Know Their World</h3>
|
|
<p>Callers know real facts about where they live — the restaurants, the highways, the local gossip. When a caller says they're from Lordsburg, they actually know about the Hidalgo Hotel and the drive to Deming. The system pulls in real-time news so callers can reference things that actually happened today.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hiw-step">
|
|
<div class="hiw-step-number">3</div>
|
|
<div class="hiw-step-content">
|
|
<h3>They Have a Reason to Call</h3>
|
|
<p>Some callers have a problem — a fight with a neighbor, a situation at work, something weighing on them at 2 AM. Others call to geek out about Severance, argue about poker strategy, or share something they read about quantum physics. Every caller has a purpose, not just a script.</p>
|
|
<div class="hiw-split-stat">
|
|
<div class="hiw-stat">
|
|
<span class="hiw-stat-number">70%</span>
|
|
<span class="hiw-stat-label">Need advice</span>
|
|
</div>
|
|
<div class="hiw-stat">
|
|
<span class="hiw-stat-number">30%</span>
|
|
<span class="hiw-stat-label">Want to talk about something</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hiw-step">
|
|
<div class="hiw-step-number">4</div>
|
|
<div class="hiw-step-content">
|
|
<h3>The Conversation Is Real</h3>
|
|
<p>Luke talks to each caller using push-to-talk, just like a real radio show. His voice is transcribed in real time, sent to an AI that responds in character, and then converted to speech using a voice engine — all in a few seconds. The AI doesn't just answer questions; it reacts, gets emotional, goes on tangents, and remembers what was said earlier in the show.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hiw-step">
|
|
<div class="hiw-step-number">5</div>
|
|
<div class="hiw-step-content">
|
|
<h3>Real Callers Call In Too</h3>
|
|
<p>When you dial 208-439-LUKE, your call goes into a live queue. Luke sees you waiting and can take your call right from the control room. Your voice streams in real time — no pre-recording, no delay. You're live on the show, talking to Luke, and the AI callers might even react to what you said.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hiw-step">
|
|
<div class="hiw-step-number">6</div>
|
|
<div class="hiw-step-content">
|
|
<h3>The Control Room</h3>
|
|
<p>The entire show runs through a custom-built control panel. Luke manages callers, plays music and sound effects, runs ads, monitors the call queue, and controls everything from one screen. Audio is routed across multiple channels simultaneously — caller voices, music, sound effects, and live phone audio all on separate tracks for professional mixing.</p>
|
|
<div class="hiw-detail-grid">
|
|
<div class="hiw-detail">
|
|
<span class="hiw-detail-label">Audio Channels</span>
|
|
<span class="hiw-detail-value">5 independent</span>
|
|
</div>
|
|
<div class="hiw-detail">
|
|
<span class="hiw-detail-label">Caller Slots</span>
|
|
<span class="hiw-detail-value">10 per session</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- What makes it different -->
|
|
<section class="hiw-section">
|
|
<h2>What Makes This Different</h2>
|
|
<div class="hiw-features">
|
|
<div class="hiw-feature">
|
|
<div class="hiw-feature-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
|
|
</div>
|
|
<h3>Not Scripted</h3>
|
|
<p>Every conversation is improvised. Luke doesn't know what the caller is going to say. The AI doesn't follow a script. It's a real conversation between a human and an AI character who has a life, opinions, and something on their mind.</p>
|
|
</div>
|
|
<div class="hiw-feature">
|
|
<div class="hiw-feature-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
</div>
|
|
<h3>Built From Scratch</h3>
|
|
<p>This isn't an app with a plugin. Every piece — the caller generator, the voice engine, the control room, the phone system, the audio routing — was built specifically for this show. No templates, no shortcuts.</p>
|
|
</div>
|
|
<div class="hiw-feature">
|
|
<div class="hiw-feature-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
</div>
|
|
<h3>Real Time</h3>
|
|
<p>Everything happens live. Caller generation, voice synthesis, news lookups, phone routing — all in real time during the show. There's no post-production trickery on the caller side. What you hear is what happened.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="hiw-section hiw-cta">
|
|
<p>Want to hear it for yourself?</p>
|
|
<a href="/" class="hiw-cta-btn">Listen to Episodes</a>
|
|
<div class="hiw-cta-phone">
|
|
Or call in live: <strong>208-439-LUKE</strong>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="footer-links">
|
|
<a href="/">Home</a>
|
|
<a href="https://open.spotify.com/show/0ZrpMigG1fo0CCN7F4YmuF?si=f990713adce84ba4" target="_blank" rel="noopener">Spotify</a>
|
|
<a href="https://www.youtube.com/watch?v=xryGLifMBTY&list=PLGq4uZyNV1yYH_rcitTTPVysPbC6-7pe-" target="_blank" rel="noopener">YouTube</a>
|
|
<a href="https://podcast.macneilmediagroup.com/@LukeAtTheRoost/feed.xml" target="_blank" rel="noopener">RSS</a>
|
|
</div>
|
|
<div class="footer-projects">
|
|
<span class="footer-projects-label">More from Luke</span>
|
|
<div class="footer-projects-links">
|
|
<a href="https://macneilmediagroup.com" target="_blank" rel="noopener">MacNeil Media Group</a>
|
|
<a href="https://prints.macneilmediagroup.com" target="_blank" rel="noopener">Photography Prints</a>
|
|
<a href="https://youtube.com/lukemacneil" target="_blank" rel="noopener">YouTube</a>
|
|
</div>
|
|
</div>
|
|
<p class="footer-contact">Sales & Collaboration: <a href="mailto:luke@macneilmediagroup.com">luke@macneilmediagroup.com</a></p>
|
|
<p>© 2026 Luke at the Roost</p>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|