|
<!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> |
|
</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> |
|
|
