${texts.colorSchemes.map((scheme, index) => `
`).join('')}
`;
document.body.appendChild(modal);
const schemeOptions = modal.querySelectorAll('.ai-scheme-option');
schemeOptions.forEach(option => {
option.addEventListener('click', () => {
schemeOptions.forEach(opt => opt.classList.remove('selected'));
option.classList.add('selected');
selectedSchemeIndex = parseInt(option.dataset.index);
});
});
modal.querySelector('#ai-cancel-btn').addEventListener('click', () => {
document.body.removeChild(modal);
});
modal.querySelector('#ai-export-btn').addEventListener('click', async () => {
document.body.removeChild(modal);
await generateAndDownloadImage(aiDiv, texts.colorSchemes[selectedSchemeIndex], texts);
});
}
// Generate and download image (fixed typo)
async function generateAndDownloadImage(aiDiv, colorScheme, texts) {
const clonedDiv = aiDiv.cloneNode(true);
const buttonDiv = clonedDiv.querySelector('.ds-flex[style*="margin-top"]');
if (buttonDiv) buttonDiv.remove();
const container = document.createElement('div');
container.style.width = '600px';
container.style.borderRadius = '10px';
container.style.overflow = 'hidden';
container.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
container.style.display = 'flex';
container.style.flexDirection = 'column';
const topSection = document.createElement('div');
topSection.style.padding = '20px';
topSection.style.backgroundColor = colorScheme.top;
topSection.style.color = colorScheme.textTop;
fixTextContrast(clonedDiv, colorScheme);
topSection.appendChild(clonedDiv);
const bottomSection = document.createElement('div');
bottomSection.textContent = texts.footer;
bottomSection.style.padding = '10px';
bottomSection.style.textAlign = 'center';
bottomSection.style.fontSize = '14px';
bottomSection.style.fontFamily = 'Arial, sans-serif';
bottomSection.style.backgroundColor = colorScheme.bottom;
bottomSection.style.color = colorScheme.textBottom;
container.appendChild(topSection);
container.appendChild(bottomSection);
container.style.position = 'absolute';
container.style.left = '-9999px';
document.body.appendChild(container);
try {
const canvas = await html2canvas(container, {
scale: 2,
backgroundColor: null,
useCORS: true,
logging: false
});
const link = document.createElement('a');
link.download = `ai_answer_${new Date().toISOString().split('T')[0]}.png`;
link.href = canvas.toDataURL('image/png');
link.click();
} catch (error) {
console.error('Error generating image:', error);
alert(texts.error);
}
document.body.removeChild(container);
}
// Fix text contrast
function fixTextContrast(element, colorScheme) {
if (colorScheme.textTop === '#FFFFFF') {
const allTextElements = element.querySelectorAll('*');
allTextElements.forEach(el => {
if (el.childNodes && Array.from(el.childNodes).some(node =>
node.nodeType === Node.TEXT_NODE && node.textContent.trim().length > 0)) {
const computedStyle = window.getComputedStyle(el);
const currentColor = computedStyle.color;
const isDarkColor = currentColor === 'rgb(0, 0, 0)' || currentColor === '#000000' || currentColor === 'black';
const isCloseToBlack = currentColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/) &&
parseInt(RegExp.$1) < 100 &&
parseInt(RegExp.$2) < 100 &&
parseInt(RegExp.$3) < 100;
if (isDarkColor || isCloseToBlack) {
el.style.color = '#FFFFFF';
}
}
});
const codeElements = element.querySelectorAll('pre, code');
codeElements.forEach(codeEl => {
if (codeEl.tagName === 'PRE') {
codeEl.style.backgroundColor = '#2A2A2A';
codeEl.style.border = '1px solid #444';
codeEl.style.color = '#E0E0E0';
}
if (codeEl.tagName === 'CODE' && codeEl.parentElement.tagName !== 'PRE') {
codeEl.style.backgroundColor = '#3A3A3A';
codeEl.style.color = '#E0E0E0';
codeEl.style.padding = '2px 4px';
codeEl.style.borderRadius = '3px';
}
const syntaxElements = codeEl.querySelectorAll('span');
syntaxElements.forEach(span => {
const spanColor = window.getComputedStyle(span).color;
if (spanColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/) &&
parseInt(RegExp.$1) < 100 &&
parseInt(RegExp.$2) < 100 &&
parseInt(RegExp.$3) < 100) {
const r = parseInt(RegExp.$1);
const g = parseInt(RegExp.$2);
const b = parseInt(RegExp.$3);
if (r > g && r > b) {
span.style.color = '#FF9090';
} else if (g > r && g > b) {
span.style.color = '#90FF90';
} else if (b > r && b > g) {
span.style.color = '#9090FF';
} else {
span.style.color = '#E0E0E0';
}
}
});
});
}
}
// Initialize
function init() {
addStyles();
createFAB();
addExportButtonsToAnswers();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();