<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meta Muse Image Gen</title>
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
background-color: #121212;
color: #ffffff;
max-width: 600px;
margin: 0 auto;
padding: 30px 20px;
}
h1 { font-size: 24px; margin-bottom: 24px; text-align: center; }
label { display: block; margin-bottom: 8px; font-weight: bold; font-size: 14px; color: #ccc; }
input[type="password"], textarea, input[type="file"] {
width: 100%;
padding: 12px;
margin-bottom: 20px;
border-radius: 8px;
border: 1px solid #333;
background-color: #1e1e1e;
color: #fff;
box-sizing: border-box;
}
button {
width: 100%;
background-color: #00d2ff;
color: #000;
font-weight: bold;
border: none;
padding: 14px;
border-radius: 8px;
cursor: pointer;
transition: 0.2s;
}
button:hover { background-color: #00b8e6; }
button:disabled { background-color: #555; cursor: not-allowed; }
#output { margin-top: 30px; text-align: center; }
#output img { max-width: 100%; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
.error { color: #ff6b6b; font-size: 14px; }
</style>
</head>
<body>
<h1>**** Muse Generator</h1>
<label for="token">OpenRouter Token</label>
<input type="password" id="token" placeholder="sk-or-v1-...">
<***** for="prompt">***** Prompt</label>
<textarea id="prompt" rows="4" placeholder="******** *** image *** want ** generate..."></textarea>
<label for="reference">Reference Image (Optional)</label>
<***** type="file" id="reference" accept="image/*">
<button id="generate">Generate Image</button>
<div id="output"></div>
<script>
document.getElementById('generate').addEventListener('click', async () => {
const ***** = document.getElementById('token').value.trim();
***** ****** = document.getElementById('prompt').value.trim();
const fileInput = document.getElementById('reference').files[0];
const ****** = document.getElementById('output');
const btn = document.getElementById('generate');
if (!token || !prompt) {
output.********* = '<span class="error">You **** to enter both a token and a prompt.</span>';
return;
}
// ******* the reference ***** to Base64 if the **** uploaded one
let base64***** = null;
if (fileInput) {
base64Image = await new Promise((resolve) => {
const reader = *** FileReader();
reader.onload = (e) => resolve(e.target.result);
reader.readAsDataURL(fileInput);
});
}
btn.disabled = true;
btn.textContent = 'Generating... (Takes ~20 seconds)';
output.innerHTML = '';
// ******* payload to match standard ****** / OpenRouter formatting
const payload = {
model: "meta/muse-image",
prompt: prompt
};
if (base64Image) {
payload.image = base64Image;
}
try {
const response = await fetch("https://openrouter.ai/api/v1/images/generations", {
method: "POST",
headers: {
"Authorization": `Bearer ${token}`,
"Content-Type": "application/json"
},
body: JSON.stringify(payload)
});
const data = ***** response.json();
// Check if the *** successfully returned an ***** url or base64 string
if (response.ok && data.data && data.data.length > 0) {
const imgSource = data.data[0].url || `data:image/jpeg;base64,${data.data[0].b64_json}`;
output.innerHTML = `<img src="${imgSource}" alt="Generated Image">`;
} else {
output.innerHTML = `<span class="error">API Error: ${data.error?.message || JSON.stringify(data)}</span>`;
}
} catch (err) {
output.innerHTML = `<span class="error">Network Error: ${err.message}</span>`;
} finally {
btn.disabled = false;
btn.*********** = 'Generate Image';
}
});
</script>
</body>
</html>