MCP Puppet Pipeline
by bermingham85
- mcp-puppet-pipeline
- public
index.html•11.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Puppet Character Production Dashboard</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>🎭 Puppet Character Production Studio</h1>
<p>Transform photos into puppet characters with AI-powered character development</p>
</header>
<div class="dashboard">
<!-- Step 1: Image Upload -->
<section class="card" id="image-upload-section">
<h2>📸 Step 1: Upload Character Photo</h2>
<div class="upload-area" id="upload-area">
<div class="upload-content">
<svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7,10 12,15 17,10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
<p>Drop image here or click to upload</p>
<small>Supports JPG, PNG (max 10MB)</small>
</div>
<input type="file" id="image-input" accept="image/*" hidden>
</div>
<div id="image-preview" class="image-preview hidden">
<img id="preview-img" alt="Character preview">
<button id="remove-image" class="btn-secondary">Remove Image</button>
</div>
</section>
<!-- Step 2: Character Profile Form -->
<section class="card" id="character-form-section">
<h2>🎨 Step 2: Character Profile</h2>
<form id="character-form">
<div class="form-group">
<label for="character-name">Character Name *</label>
<input type="text" id="character-name" required placeholder="e.g., Swimming Pool Guy">
<div class="validation-status" id="name-validation"></div>
</div>
<div class="form-group">
<label for="character-type">Character Type</label>
<select id="character-type">
<option value="Main Character">Main Character</option>
<option value="Supporting Character">Supporting Character</option>
<option value="Comic Relief">Comic Relief</option>
<option value="Villain">Villain</option>
<option value="Narrator">Narrator</option>
</select>
</div>
<div class="form-group">
<label for="personality-traits">Personality Traits</label>
<div class="trait-selector">
<div class="trait-pills">
<button type="button" class="trait-pill" data-trait="Confident">Confident</button>
<button type="button" class="trait-pill" data-trait="Friendly">Friendly</button>
<button type="button" class="trait-pill" data-trait="Energetic">Energetic</button>
<button type="button" class="trait-pill" data-trait="Wise">Wise</button>
<button type="button" class="trait-pill" data-trait="Funny">Funny</button>
<button type="button" class="trait-pill" data-trait="Shy">Shy</button>
<button type="button" class="trait-pill" data-trait="Brave">Brave</button>
<button type="button" class="trait-pill" data-trait="Curious">Curious</button>
</div>
<input type="text" id="custom-trait" placeholder="Add custom trait...">
</div>
<div id="selected-traits" class="selected-traits"></div>
</div>
<div class="form-group">
<label for="basic-backstory">Basic Backstory</label>
<textarea id="basic-backstory" rows="4" placeholder="Tell us about your character's background, job, hobbies, etc."></textarea>
<div class="backstory-actions">
<button type="button" id="enhance-backstory" class="btn-secondary">
✨ Enhance with AI
</button>
</div>
</div>
<div class="form-group">
<label for="enhanced-backstory">AI-Enhanced Backstory</label>
<textarea id="enhanced-backstory" rows="6" readonly placeholder="AI-enhanced backstory will appear here..."></textarea>
</div>
<div class="form-group">
<label for="voice-selection">Voice Selection</label>
<div class="voice-selector">
<select id="voice-selection" name="voiceId">
<option value="">Loading voices...</option>
</select>
<button type="button" id="sample-voice" class="btn-voice-sample" disabled>
🎵 Sample Voice
</button>
</div>
<div class="voice-info" id="voice-info"></div>
<audio id="voice-audio" controls style="display: none;"></audio>
</div>
<div class="form-group">
<label for="country-origin">Country of Origin</label>
<select id="country-origin" name="countryOrigin">
<option value="">Select country...</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Canada">Canada</option>
<option value="Australia">Australia</option>
<option value="Ireland">Ireland</option>
<option value="Scotland">Scotland</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Italy">Italy</option>
<option value="Spain">Spain</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="China">China</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
<label for="accent">Accent</label>
<input type="text" id="accent" name="accent" placeholder="e.g., British, Southern American, Neutral">
</div>
<div class="form-group">
<label for="voice-description">Additional Voice Notes</label>
<input type="text" id="voice-description" placeholder="e.g., Deep and confident, friendly warm tone">
</div>
</form>
</section>
<!-- Step 3: Reference Style -->
<section class="card" id="reference-section">
<h2>🎭 Step 3: Puppet Style Reference</h2>
<p>Your character will match this puppet construction style:</p>
<div class="reference-images">
<div class="reference-grid">
<img src="/attached_assets/IMG-20250921-WA0006_1758420223399.jpg" alt="Reference puppet 1">
<img src="/attached_assets/IMG-20250921-WA0007_1758420223399.jpg" alt="Reference puppet 2">
<img src="/attached_assets/IMG-20250921-WA0008_1758420223400.jpg" alt="Reference puppet 3">
</div>
<div class="style-details">
<h4>Style Specifications:</h4>
<ul>
<li>Natural felt skin matching photo skin tone</li>
<li>White circular eyes with black pupils</li>
<li>Professional puppet mechanics</li>
<li>Control rods visible</li>
<li>Studio lighting on white background</li>
</ul>
</div>
</div>
</section>
<!-- Step 4: Production Control -->
<section class="card" id="production-section">
<h2>⚙️ Step 4: Production Pipeline</h2>
<div class="production-options">
<label class="checkbox-option">
<input type="checkbox" id="generate-images" checked>
<span>Generate character blueprint images</span>
</label>
<label class="checkbox-option">
<input type="checkbox" id="store-database" checked>
<span>Store in Notion database</span>
</label>
<label class="checkbox-option">
<input type="checkbox" id="prepare-voice" checked>
<span>Prepare voice profile</span>
</label>
</div>
<button id="start-production" class="btn-primary" disabled>
🚀 Start Character Production
</button>
</section>
<!-- Progress and Results -->
<section class="card" id="results-section" style="display: none;">
<h2>📊 Production Results</h2>
<div id="progress-indicator" class="progress-indicator">
<div class="progress-bar">
<div id="progress-fill" class="progress-fill"></div>
</div>
<div id="progress-text">Ready to start...</div>
</div>
<div id="production-log" class="production-log"></div>
<div id="character-results" class="character-results">
<!-- Results will be populated here -->
</div>
</section>
</div>
</div>
<script src="dashboard.js"></script>
</body>
</html>
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/bermingham85/mcp-puppet-pipeline'
If you have feedback or need assistance with the MCP directory API, please join our Discord server