convert_to_base64.html•3.84 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image to Base64 Converter</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.container {
display: flex;
flex-direction: column;
gap: 20px;
}
.preview {
margin-top: 20px;
max-width: 100%;
}
.preview img {
max-width: 100%;
max-height: 300px;
border: 1px solid #ddd;
}
.result {
margin-top: 20px;
}
textarea {
width: 100%;
height: 100px;
margin-top: 10px;
}
button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.copy-button {
margin-top: 10px;
}
.code-block {
background-color: #f5f5f5;
padding: 15px;
border-radius: 4px;
overflow-x: auto;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Image to Base64 Converter for MCP Testing</h1>
<p>Use this tool to convert a local image to a base64 string that can be used with the MCP server's multi_image_analysis tool.</p>
<div class="container">
<div>
<label for="imageInput">Select an image:</label><br>
<input type="file" id="imageInput" accept="image/*">
</div>
<div class="preview" id="preview">
<h3>Image Preview:</h3>
<div id="imagePreview"></div>
</div>
<div class="result" id="result">
<h3>Base64 String:</h3>
<textarea id="base64Output" readonly></textarea>
<button class="copy-button" id="copyButton">Copy to Clipboard</button>
</div>
<div>
<h3>How to use with MCP:</h3>
<div class="code-block">
<pre>
{
"images": [
{
"url": "PASTE_BASE64_STRING_HERE"
}
],
"prompt": "Please describe this image in detail. What does it show?",
"model": "qwen/qwen2.5-vl-32b-instruct:free"
}
</pre>
</div>
</div>
</div>
<script>
document.getElementById('imageInput').addEventListener('change', function(event) {
const file = event.target.files[0];
if (!file) return;
// Display image preview
const preview = document.getElementById('imagePreview');
preview.innerHTML = '';
const img = document.createElement('img');
img.src = URL.createObjectURL(file);
preview.appendChild(img);
// Convert to base64
const reader = new FileReader();
reader.onload = function(e) {
const base64String = e.target.result; // This already includes "data:image/jpeg;base64,"
document.getElementById('base64Output').value = base64String;
};
reader.readAsDataURL(file);
});
document.getElementById('copyButton').addEventListener('click', function() {
const textarea = document.getElementById('base64Output');
textarea.select();
document.execCommand('copy');
this.textContent = 'Copied!';
setTimeout(() => {
this.textContent = 'Copy to Clipboard';
}, 2000);
});
</script>
</body>
</html>
