Merges two scripts: 1) Renders HTML/Mermaid/ECharts code blocks with advanced syntax correction. 2) Replaces pollinations.ai image links with the actual rendered images.
// ==UserScript==
// @name Gemini Advanced Renderer (HTML, Mermaid, Pollinations)
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Merges two scripts: 1) Renders HTML/Mermaid/ECharts code blocks with advanced syntax correction. 2) Replaces pollinations.ai image links with the actual rendered images.
// @author YourName (Refactored by AI & Combined)
// @match https://gemini.google.com/*
// @grant GM_xmlhttpRequest
// @grant GM_setClipboard
// @grant GM_openInTab
// @connect kroki.io
// @connect cdn.jsdelivr.net
// @connect image.pollinations.ai
// @connect *
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const DEBUG = true;
// --- Styles ---
const styles = `
.render-preview-button{margin-left:10px;cursor:pointer;padding:4px 8px;background-color:#1a73e8;color:#fff;border:none;border-radius:4px;font-size:12px;font-weight:500;opacity:.9;transition:opacity .3s,background-color .3s}.render-preview-button:hover:not(:disabled){opacity:1;background-color:#185abc}.render-preview-button:disabled{background-color:#9e9e9e;cursor:not-allowed}.mermaid-button{background-color:#9c27b0}.mermaid-button:hover:not(:disabled){background-color:#7b1fa2}.echarts-button{background-color:#4caf50}.echarts-button:hover:not(:disabled){background-color:#45a049}.preview-container{width:100%;margin-top:10px;border:1px solid #dee2e6;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.05);background-color:#fff;position:relative}.preview-iframe{width:100%;height:600px;border:none;display:block}.preview-controls{padding:8px;background-color:#f5f5f5;border-bottom:1px solid #dee2e6;font-size:12px;display:flex;gap:10px;align-items:center;color:#333}.control-button{padding:4px 8px;background:#6c757d;color:#fff;border:none;border-radius:3px;cursor:pointer;font-size:11px}.control-button:hover{background:#5a6268}.mermaid-preview-container{width:100%;margin-top:10px;border:1px solid #dee2e6;border-radius:8px;padding:20px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.05);min-height:200px;max-height:600px;overflow:auto;text-align:center;position:relative}.preview-overlay{flex-grow:1;text-align:left}.preview-error{padding:15px;color:#d32f2f;background:#ffeaea;border-radius:4px;font-family:monospace;white-space:pre-wrap;text-align:left;font-size:13px}.mermaid-success-badge{position:absolute;top:5px;right:5px;background:#4caf50;color:#fff;padding:2px 8px;border-radius:3px;font-size:12px}.mermaid-warning-badge{position:absolute;top:5px;left:5px;background:#ff9800;color:#fff;padding:2px 8px;border-radius:3px;font-size:12px;cursor:help}
`;
const styleSheet = document.createElement("style");
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);
// --- Trusted Types & Utilities ---
let trustedPolicy;
function getTrustedPolicy() {
if (trustedPolicy) return trustedPolicy;
if (window.trustedTypes && window.trustedTypes.createPolicy) {
try {
trustedPolicy = window.trustedTypes.createPolicy('gemini-advanced-renderer-policy-v1', {
createHTML: (string) => string, createScript: (string) => string,
});
} catch (e) { trustedPolicy = window.trustedTypes.getPolicy('gemini-advanced-renderer-policy-v1'); }
}
return trustedPolicy;
}
function safeSetHTML(element, html) {
const policy = getTrustedPolicy();
element.innerHTML = policy ? policy.createHTML(html) : html;
}
function fetchResource(url, method = 'GET', data = null, responseType = 'text') {
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method, url, data, responseType,
headers: data ? { 'Content-Type': 'text/plain', 'Accept': 'image/svg+xml' } : {},
onload: (res) => (res.status >= 200 && res.status < 300) ? resolve(responseType === 'blob' ? res.response : res.responseText) : reject(new Error(`Request failed: ${res.status}\n${res.responseText}`)),
onerror: (err) => reject(new Error(`Network error: ${err.toString()}`)),
ontimeout: () => reject(new Error(`Request timed out`))
});
});
}
// --- HTML Rendering Engine ---
async function createSelfContainedHTML(html, updateStatus) {
updateStatus('Parsing HTML...');
const parser = new DOMParser(); const policy = getTrustedPolicy();
const trustedHtmlInput = policy ? policy.createHTML(html) : html;
const doc = parser.parseFromString(trustedHtmlInput, 'text/html');
doc.querySelectorAll('script[src], link[rel="stylesheet"][href]').forEach(el => { el.dataset.originalUrl = new URL(el.src || el.href, window.location.href).href; });
const resources = Array.from(doc.querySelectorAll('script[src], link[rel="stylesheet"][href]'));
updateStatus(`Found ${resources.length} external resource(s).`);
for (const res of resources) {
const url = res.dataset.originalUrl;
try {
updateStatus(`Downloading: ${url.split('/').pop()}`);
const content = await fetchResource(url, 'GET', null, 'text');
if (res.tagName === 'SCRIPT') {
const newScript = doc.createElement('script');
newScript.textContent = policy ? policy.createScript(content) : content;
res.parentNode.replaceChild(newScript, res);
} else {
const newStyle = doc.createElement('style');
newStyle.textContent = content;
res.parentNode.replaceChild(newStyle, res);
}
} catch (error) {
console.error(error);
if (res.tagName === 'SCRIPT') {
const errorScript = doc.createElement('script');
const errorContent = `console.error("Failed to load script: ${url}. ${error.message.replace(/"/g, '\\"')}");`;
errorScript.textContent = policy ? policy.createScript(errorContent) : errorContent;
res.parentNode.replaceChild(errorScript, res);
}
}
}
updateStatus('All resources embedded.');
return `<!DOCTYPE html><html><head>${doc.head.innerHTML}</head><body>${doc.body.innerHTML}</body></html>`;
}
async function renderHTML(content, codeBlockContainer) {
const previewContainer = document.createElement('div'); previewContainer.className = 'preview-container';
const controls = document.createElement('div'); controls.className = 'preview-controls';
const openInTabBtn = document.createElement('button'); openInTabBtn.className = 'control-button'; openInTabBtn.textContent = 'Open in New Tab'; openInTabBtn.disabled = true;
const statusContainer = document.createElement('div'); statusContainer.className = 'preview-overlay'; statusContainer.textContent = 'Initializing...';
controls.appendChild(statusContainer); controls.appendChild(openInTabBtn);
const iframe = document.createElement('iframe'); iframe.className = 'preview-iframe'; iframe.removeAttribute('sandbox');
previewContainer.appendChild(controls); previewContainer.appendChild(iframe);
codeBlockContainer.parentNode.insertBefore(previewContainer, codeBlockContainer.nextSibling);
try {
const selfContainedHTML = await createSelfContainedHTML(content, (msg) => { statusContainer.textContent = msg; });
const blob = new Blob([selfContainedHTML], { type: 'text/html' });
const url = URL.createObjectURL(blob);
previewContainer.dataset.blobUrl = url;
iframe.onload = () => { statusContainer.textContent = 'Render successful! 🎉'; };
iframe.onerror = () => { statusContainer.textContent = 'Error loading content in iframe.'; statusContainer.style.color = '#d32f2f'; };
iframe.src = url;
openInTabBtn.onclick = () => GM_openInTab(url, { active: true });
openInTabBtn.disabled = false;
} catch (error) {
console.error('HTML rendering failed:', error);
const errorDiv = document.createElement('div'); errorDiv.className = 'preview-error'; errorDiv.textContent = `Fatal Error: ${error.message}`;
statusContainer.replaceChildren(errorDiv);
}
}
// --- Mermaid Diagram Rendering Engine ---
function isMermaidCode(content) {
const keywords = ['C4Context','C4Container','C4Component','C4Dynamic','classDiagram','erDiagram','flowchart','gantt','gitGraph','graph','journey','mindmap','pie','quadrantChart','requirementDiagram','sequenceDiagram','stateDiagram','timeline'];
const trimmed = content.trim();
return keywords.some(k => trimmed.startsWith(k)) || trimmed.startsWith('%%{init:');
}
function fixGanttSyntax(code) {
const lines = code.split('\n'); let fixes = [];
const fixedLines = lines.map((line, index) => {
let processedLine = line;
const afterMatches = line.match(/after\s+\w+/g);
if (afterMatches && afterMatches.length > 1) {
afterMatches.slice(1).forEach(extraAfter => { processedLine = processedLine.replace(`, ${extraAfter}`, ''); });
fixes.push(`Line ${index + 1}: Removed extraneous 'after' clauses.`);
}
if (line.includes('：')) {
processedLine = processedLine.replace(/：/g, ':');
fixes.push(`Line ${index + 1}: Replaced full-width colon.`);
}
return processedLine;
});
return { code: fixedLines.join('\n'), fixes };
}
function fixQuadrantChartSyntax(code) {
const lines = code.split('\n'); let fixes = [];
const fixedLines = lines.map((line, index) => {
const match = line.match(/^( *)(title|x-axis|y-axis|quadrant-\d+) (?!")(.*)$/);
if (match) {
const indent = match[1], keyword = match[2]; let text = match[3];
if (keyword === 'x-axis' || keyword === 'y-axis') {
const parts = text.split('-->').map(p => p.trim());
if (parts.length === 2) {
fixes.push(`Line ${index + 1}: Added quotes to axis labels.`);
return `${indent}${keyword} "${parts[0]}" --> "${parts[1]}"`;
}
} else {
fixes.push(`Line ${index + 1}: Added quotes to label.`);
return `${indent}${keyword} "${text}"`;
}
}
return line;
});
return { code: fixedLines.join('\n'), fixes };
}
function fixRequirementDiagramSyntax(code) {
const lines = code.split('\n'); let fixes = [];
const fixedLines = lines.map((line, index) => {
const match = line.match(/^( *)text: (?!")(.*)$/);
if (match) {
fixes.push(`Line ${index + 1}: Added quotes to 'text' property.`);
return `${match[1]}text: "${match[2]}"`;
}
return line;
});
return { code: fixedLines.join('\n'), fixes };
}
function preprocessMermaidCode(code) {
let allFixes = [];
let processedCode = code.trim();
if (processedCode.startsWith('gantt')) {
const result = fixGanttSyntax(processedCode);
processedCode = result.code;
allFixes = allFixes.concat(result.fixes);
if (!processedCode.includes('dateFormat')) {
const lines = processedCode.split('\n');
lines.splice(1, 0, ' dateFormat YYYY-MM-DD');
processedCode = lines.join('\n');
allFixes.push('Added default `dateFormat`.');
}
} else if (processedCode.startsWith('quadrantChart')) {
const result = fixQuadrantChartSyntax(processedCode);
processedCode = result.code;
allFixes = allFixes.concat(result.fixes);
} else if (processedCode.startsWith('requirementDiagram')) {
const result = fixRequirementDiagramSyntax(processedCode);
processedCode = result.code;
allFixes = allFixes.concat(result.fixes);
}
return { code: processedCode, fixes: allFixes };
}
async function renderMermaid(content, codeBlockContainer) {
const previewContainer = document.createElement('div');
previewContainer.className = 'mermaid-preview-container';
previewContainer.textContent = '🎨 Rendering diagram with Kroki.io...';
codeBlockContainer.parentNode.insertBefore(previewContainer, codeBlockContainer.nextSibling);
try {
const { code, fixes } = preprocessMermaidCode(content);
if (DEBUG) { console.log("Processed Mermaid Code:\n", code); console.log("Fixes applied:", fixes); }
const svg = await fetchResource('https://kroki.io/mermaid/svg', 'POST', code, 'text');
safeSetHTML(previewContainer, svg);
const svgElement = previewContainer.querySelector('svg');
if (svgElement && !svgElement.querySelector('text > tspan[x="10"]')) {
const successBadge = document.createElement('div');
successBadge.className = 'mermaid-success-badge';
successBadge.textContent = '✓ Rendered';
previewContainer.appendChild(successBadge);
if (fixes.length > 0) {
const warningBadge = document.createElement('div');
warningBadge.className = 'mermaid-warning-badge';
warningBadge.textContent = '⚠️ Auto-fixed';
warningBadge.title = 'Applied fixes:\n' + fixes.join('\n');
previewContainer.appendChild(warningBadge);
}
}
} catch (error) {
console.error('Mermaid rendering error:', error);
const errorContainer = document.createElement('div');
errorContainer.className = 'preview-error';
if (error.message.includes('</svg>')) {
safeSetHTML(errorContainer, error.message.substring(error.message.indexOf('<?xml')));
} else { errorContainer.textContent = `Mermaid Render Failed:\n${error.message}`; }
previewContainer.replaceChildren(errorContainer);
}
}
// --- Pollinations.ai Image Rendering Engine ---
async function renderPollinationsLink(node) {
if (node.tagName !== 'A' || !node.href || node.dataset.rendered) return;
let imageUrl = null;
if (node.href.startsWith('https://image.pollinations.ai/prompt/')) {
imageUrl = node.href;
} else if (node.href.includes('google.com/search?q=https://image.pollinations.ai/prompt/')) {
imageUrl = new URL(node.href).searchParams.get('q');
}
if (!imageUrl) return;
node.dataset.rendered = 'true';
const placeholder = document.createElement('div');
placeholder.textContent = 'Loading Pollinations image...';
placeholder.style.cssText = 'padding: 10px; border: 1px dashed #ccc; display: inline-block;';
node.parentNode.replaceChild(placeholder, node);
try {
const imageBlob = await fetchResource(imageUrl, 'GET', null, 'blob');
const imageUrlObject = URL.createObjectURL(imageBlob);
const img = document.createElement('img');
img.src = imageUrlObject;
img.style.cssText = 'max-width: 100%; height: auto; display: block; border-radius: 8px;';
img.onload = () => placeholder.parentNode.replaceChild(img, placeholder);
img.onerror = () => { throw new Error("Image could not be loaded into element."); };
} catch (error) {
placeholder.textContent = `Image failed to load: ${error.message}`;
placeholder.style.color = 'red';
console.error(`Pollinations render error for ${imageUrl}:`, error);
}
}
// --- Main Script Logic & Observer ---
function addRenderButton(codeBlockContainer) {
if (codeBlockContainer.querySelector('.render-preview-button')) return;
const header = codeBlockContainer.querySelector('.code-block-decoration');
const codeElement = codeBlockContainer.querySelector('pre > code');
if (!header || !codeElement) return;
const content = codeElement.textContent || '';
const lang = header.querySelector('span')?.textContent.trim().toLowerCase() || '';
const isHtml = lang === 'html';
const isMermaid = lang === 'mermaid' || isMermaidCode(content);
if (!isHtml && !isMermaid) return;
const button = document.createElement('button');
button.className = 'render-preview-button';
let buttonText = '', renderFn = null;
if (isMermaid) {
buttonText = '📊 Render Diagram';
button.classList.add('mermaid-button');
renderFn = () => renderMermaid(content, codeBlockContainer);
} else {
buttonText = '▶️ Render HTML';
if (content.toLowerCase().includes('echarts')) {
buttonText = '📈 Render ECharts';
button.classList.add('echarts-button');
}
renderFn = () => renderHTML(content, codeBlockContainer);
}
button.innerText = buttonText;
button.onclick = async (e) => {
e.stopPropagation();
const existingPreview = codeBlockContainer.nextElementSibling;
if (existingPreview?.matches('.preview-container, .mermaid-preview-container')) {
if (existingPreview.dataset.blobUrl) URL.revokeObjectURL(existingPreview.dataset.blobUrl);
existingPreview.remove();
button.innerText = buttonText;
button.disabled = false;
} else {
button.disabled = true;
button.innerText = '⏳ Rendering...';
await renderFn();
button.innerText = '❌ Close Preview';
button.disabled = false;
}
};
const buttonsDiv = header.querySelector('.buttons');
if (buttonsDiv) {
buttonsDiv.prepend(button);
} else {
if (DEBUG) console.warn('Renderer script: ".buttons" div not found. Appending to header as fallback.');
header.appendChild(button);
}
}
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
for (const addedNode of mutation.addedNodes) {
if (addedNode.nodeType !== 1) continue; // Ensure it's an element
// --- Find and process new Code Blocks ---
if (addedNode.matches('div.code-block')) {
addRenderButton(addedNode);
}
addedNode.querySelectorAll('div.code-block').forEach(addRenderButton);
// --- Find and process new Pollinations Links ---
const linkSelector = 'a[href*="image.pollinations.ai/prompt/"]';
if (addedNode.matches(linkSelector)) {
renderPollinationsLink(addedNode);
}
addedNode.querySelectorAll(linkSelector).forEach(renderPollinationsLink);
}
}
});
if (DEBUG) console.log(`Gemini Advanced Renderer (v1.0) is active.`);
// Start observing the document body for changes
observer.observe(document.body, { childList: true, subtree: true });
// Initial run for any content already on the page when the script loads
document.querySelectorAll('div.code-block').forEach(addRenderButton);
document.querySelectorAll('a[href*="image.pollinations.ai/prompt/"]').forEach(renderPollinationsLink);
})();