@mseep/webperfect-mcp-server
Version:
An intelligent MCP server with a fully automated batch pipeline for web-ready images. Features include noise reduction, auto levels/curves, JPEG artifact removal, 4K resizing, smart sharpening with shadow/highlight enhancement, and advanced WebP conversio
101 lines (96 loc) • 2.94 kB
HTML
<html>
<head>
<title>WebPerfect Image Comparison</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
h1 {
color: #333;
text-align: center;
}
.stats {
background: #fff;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.comparison {
display: flex;
margin: 20px 0;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.image-container {
flex: 1;
padding: 10px;
}
.image-container h3 {
color: #666;
margin-bottom: 10px;
}
img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
.highlight {
color: #2196F3;
font-weight: bold;
}
</style>
</head>
<body>
<h1>🎨 WebPerfect Image Processing Results</h1>
<div class="stats">
<h2>📊 Processing Statistics</h2>
<p>Total Files Processed: <span class="highlight">3</span></p>
<p>Total Size Reduction: <span class="highlight">0.10MB → 0.02MB (80% reduction)</span></p>
<p>Applied Enhancements:</p>
<ul>
<li>Noise Reduction</li>
<li>Auto Levels & Curves</li>
<li>Texture Enhancement</li>
<li>Resolution Optimization</li>
</ul>
</div>
<div class="comparison">
<div class="image-container">
<h3>Original Image (35.27KB)</h3>
<img src="input/test1.jpg" alt="Original Image">
</div>
<div class="image-container">
<h3>Optimized Image (5.36KB)</h3>
<img src="output/test1.webp" alt="Optimized Image">
</div>
</div>
<div class="comparison">
<div class="image-container">
<h3>Original Image (35.32KB)</h3>
<img src="input/test2.jpg" alt="Original Image">
</div>
<div class="image-container">
<h3>Optimized Image (5.35KB)</h3>
<img src="output/test2.webp" alt="Optimized Image">
</div>
</div>
<div class="comparison">
<div class="image-container">
<h3>Original Image (35.31KB)</h3>
<img src="input/test3.jpg" alt="Original Image">
</div>
<div class="image-container">
<h3>Optimized Image (5.35KB)</h3>
<img src="output/test3.webp" alt="Optimized Image">
</div>
</div>
</body>
</html>