Spaces:
Running
Running
File size: 3,874 Bytes
1fbeebb |
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 107 108 109 110 111 112 113 114 115 116 |
class MetadataGenerator {
constructor() {
this.init();
}
init() {
this.cacheElements();
this.attachEventListeners();
}
cacheElements() {
this.metadataUrl = document.getElementById('metadataUrl');
this.generateBtn = document.getElementById('generateBtn');
this.metadataPreview = document.getElementById('metadataPreview');
this.previewTitle = document.getElementById('previewTitle');
this.previewDescription = document.getElementById('previewDescription');
this.previewTags = document.getElementById('previewTags');
this.previewHashtags = document.getElementById('previewHashtags');
this.loadingOverlay = document.getElementById('loadingOverlay');
this.toast = document.getElementById('toast');
}
attachEventListeners() {
this.generateBtn.addEventListener('click', () => this.handleGenerate());
this.metadataUrl.addEventListener('keypress', (e) => {
if (e.key === 'Enter') this.handleGenerate();
});
}
async handleGenerate() {
const url = this.metadataUrl.value.trim();
if (!url) {
this.showToast('Please enter a valid Instagram Reel URL', 'error');
return;
}
this.showLoading();
try {
const response = await fetch('/generate-preview', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url })
});
const data = await response.json();
if (data.success) {
this.displayMetadata(data);
this.showToast('AI metadata generated successfully!', 'success');
} else {
throw new Error(data.error || 'Generation failed');
}
} catch (error) {
this.showToast('Generation failed: ' + error.message, 'error');
} finally {
this.hideLoading();
}
}
displayMetadata(data) {
this.previewTitle.textContent = data.title || '-';
this.previewDescription.textContent = data.description || '-';
// Display tags
this.previewTags.innerHTML = '';
if (data.tags && data.tags.length > 0) {
data.tags.slice(0, 15).forEach(tag => {
const span = document.createElement('span');
span.textContent = tag;
this.previewTags.appendChild(span);
});
}
// Display hashtags
this.previewHashtags.innerHTML = '';
if (data.hashtags && data.hashtags.length > 0) {
data.hashtags.slice(0, 20).forEach(hashtag => {
const span = document.createElement('span');
span.textContent = hashtag;
this.previewHashtags.appendChild(span);
});
}
this.metadataPreview.style.display = 'block';
}
showLoading() {
this.loadingOverlay.style.display = 'flex';
}
hideLoading() {
this.loadingOverlay.style.display = 'none';
}
showToast(message, type = 'info') {
this.toast.textContent = message;
this.toast.className = 'toast show';
if (type === 'success') {
this.toast.style.borderLeft = '4px solid var(--success)';
} else if (type === 'error') {
this.toast.style.borderLeft = '4px solid var(--error)';
}
setTimeout(() => {
this.toast.classList.remove('show');
}, 4000);
}
}
document.addEventListener('DOMContentLoaded', () => {
new MetadataGenerator();
});
|