@cloudwerxlab/all-your-base64-mcp
Version:
MCP server that converts base64 images and image URLs into markdown for display in chat. Supports OpenWebUI
141 lines (126 loc) • 4.34 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Base64-to-URL MCP Test</title>
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.container {
background: #f7f7f7;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
h1 {
color: #333;
}
button {
background: #4285f4;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #3275e4;
}
pre {
background: #f0f0f0;
padding: 10px;
border-radius: 4px;
overflow: auto;
}
.result {
margin-top: 20px;
}
.image-preview {
margin-top: 20px;
border: 1px solid #ddd;
padding: 10px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>Base64-to-URL MCP Test</h1>
<div class="container">
<h2>Test Base64-to-URL MCP</h2>
<p>This will send a sample base64 image to the MCP server and display the response.</p>
<button id="testButton">Run Test</button>
<div class="result" id="result">
<h3>Results will appear here...</h3>
</div>
<div class="image-preview" id="imagePreview">
<h3>Image Preview</h3>
<div id="previewContent"></div>
</div>
</div>
<script>
// A small base64 encoded red dot image
const base64Image = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
document.getElementById('testButton').addEventListener('click', async () => {
const resultDiv = document.getElementById('result');
const previewDiv = document.getElementById('previewContent');
resultDiv.innerHTML = '<h3>Running test...</h3>';
try {
// Create a simple JSON-RPC request
const request = {
jsonrpc: '2.0',
id: 1,
method: 'base64-to-url',
params: {
data: `data:image/png;base64,${base64Image}`
}
};
// Send the request to the MCP server
const response = await fetch('http://localhost:6644/mcp', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(request)
});
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const result = await response.json();
console.log('Response:', result);
let resultHtml = '<h3>Test Results:</h3>';
resultHtml += `<pre>${JSON.stringify(result, null, 2)}</pre>`;
if (result.result && result.result.content && result.result.content[0].text) {
const markdown = result.result.content[0].text;
resultHtml += `<p>Markdown: <code>${markdown}</code></p>`;
resultHtml += '<p style="color: green; font-weight: bold;">Test Passed! ✅</p>';
// Extract the URL from markdown 
const urlMatch = markdown.match(/!\[Image\]\((.*?)\)/);
if (urlMatch && urlMatch[1]) {
const imageUrl = urlMatch[1];
previewDiv.innerHTML = `<p>Original Image:</p>
<img src="data:image/png;base64,${base64Image}" alt="Original">
<p>Converted Image:</p>
<img src="${imageUrl}" alt="Converted">`;
}
} else {
resultHtml += '<p style="color: red; font-weight: bold;">Test Failed: Unexpected response format ❌</p>';
}
resultDiv.innerHTML = resultHtml;
} catch (err) {
resultDiv.innerHTML = `<h3>Test Results:</h3>
<p style="color: red; font-weight: bold;">Test Failed: ${err.message} ❌</p>
<pre>${err.stack}</pre>`;
console.error('Test Failed:', err);
}
});
</script>
</body>
</html>