131 lines
3.7 KiB
HTML
131 lines
3.7 KiB
HTML
<!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> |