Spaces:
Running
Running
File size: 3,146 Bytes
cb83d91 |
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 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
const API_KEY_STORAGE_KEY = 'rapidapi_key';
document.addEventListener('DOMContentLoaded', () => {
const savedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
if (savedApiKey) {
document.getElementById('apiKey').value = savedApiKey;
}
});
function saveApiKey() {
const apiKey = document.getElementById('apiKey').value.trim();
if (apiKey) {
localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
showNotification('API key saved successfully!');
} else {
showNotification('Please enter a valid API key', true);
}
}
function showNotification(message, isError = false) {
const notification = document.createElement('div');
notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg text-white ${
isError ? 'bg-red-500' : 'bg-green-500'
} shadow-lg transform transition-transform duration-300 ease-in-out`;
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.transform = 'translateY(-100%)';
setTimeout(() => notification.remove(), 300);
}, 3000);
}
async function generateImage() {
const apiKey = document.getElementById('apiKey').value.trim();
const referenceImageUrl = document.getElementById('referenceImageUrl').value.trim();
const prompt = document.getElementById('prompt').value.trim();
const imageSize = document.getElementById('imageSize').value;
if (!apiKey) {
showNotification('Please enter your RapidAPI key', true);
return;
}
if (!referenceImageUrl) {
showNotification('Please enter a reference image URL', true);
return;
}
if (!prompt) {
showNotification('Please enter a prompt', true);
return;
}
const generateBtn = document.getElementById('generateBtn');
const loadingSpinner = document.getElementById('loadingSpinner');
const resultImage = document.getElementById('resultImage');
generateBtn.disabled = true;
loadingSpinner.classList.remove('hidden');
resultImage.classList.add('hidden');
try {
const response = await fetch('https://text-to-image-api-with-face.p.rapidapi.com/face-ai.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-rapidapi-host': 'text-to-image-api-with-face.p.rapidapi.com',
'x-rapidapi-key': apiKey
},
body: JSON.stringify({
reference_images: [{
image_url: referenceImageUrl
}],
prompt: prompt,
image_size: imageSize
})
});
const data = await response.json();
if (data.url) {
resultImage.src = data.url;
resultImage.classList.remove('hidden');
} else {
throw new Error('No image URL in response');
}
} catch (error) {
showNotification('Error generating image: ' + error.message, true);
} finally {
generateBtn.disabled = false;
loadingSpinner.classList.add('hidden');
}
}
document.querySelectorAll('input').forEach(input => {
input.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
if (input.id === 'apiKey') {
saveApiKey();
} else {
generateImage();
}
}
});
}); |