File size: 2,422 Bytes
194ff6b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FLUX Text to Image Generation</title>
<link rel="stylesheet" href="/static/style.css">
<script src="/static/cloudhands/index.umd.js"></script> <!-- Load UMD version -->
</head>
<body>
<div class="container">
<img src="/static/cloudhands-logo.webp" alt="Cloudhands Logo" class="logo" />
<h1>FLUX Text to Image Generation</h1>
<div id="image-container" class="image-container"></div>
<input type="text" id="user_input" placeholder="Enter your prompt..." />
<button id="pay_button">Generate Image</button>
<div id="result" class="result-text"></div>
</div>
<script>
const cloudhandsSDK = new cloudhands.default('pK--Z2H4X7e1uqXgDqPx2rvq8iGBMkXR');
document.getElementById('pay_button').addEventListener('click', async () => {
const userInput = document.getElementById('user_input').value.trim();
if (!userInput) {
document.getElementById('result').innerText = "Please enter a prompt.";
return;
}
const chargeData = cloudhandsSDK.CreateCharge(
1,
'Image Generation',
cloudhands.ChargeType.Each,
{ userInput: userInput }
);
if (!cloudhandsSDK.IsAuthenticated()) {
await cloudhandsSDK.Authenticate();
}
const paymentResult = await cloudhandsSDK.CloudhandsPurchase(chargeData);
if (paymentResult.success) {
document.getElementById('result').innerText = "Generating image...";
const response = await fetch('/pay', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt: userInput })
});
const data = await response.json();
if (data.success) {
document.getElementById('image-container').innerHTML = `
<img src="${data.image_path}" alt="Generated Image" />
`;
document.getElementById('result').innerText = "";
} else {
document.getElementById('result').innerText = `Error generating image: ${data.error}`;
}
} else {
document.getElementById('result').innerText = `Payment failed: ${paymentResult.message}`;
}
});
</script>
</body>
</html>
|