import ConfigControl from '../config/configControl.js';
import puppeteer from 'puppeteer';
import fs from 'fs';
import path from 'path';
import markdownit from 'markdown-it';
import hljs from 'highlight.js';
class Renderer {
constructor() {
this.browser = null;
this.config = null;
this.isInitialized = false;
}
async init() {
try {
this.config = await ConfigControl.get('ai');
this.browser = await puppeteer.launch({
headless: true,
args: ['--no-sandbox', '--disable-setuid-sandbox'],
});
this.isInitialized = true;
} catch (error) {
console.error(`[crystelf-renderer] 初始化失败: ${error.message}`);
}
}
async renderCode(code, language = 'text') {
if (!this.isInitialized) await this.init();
try {
const page = await this.browser.newPage();
const html = this.getCodeTemplate(code, language, this.config?.codeRenderer || {});
await page.setContent(html, { waitUntil: 'networkidle0' });
await page.waitForSelector('#render-complete', { timeout: 5000 });
const rect = await page.evaluate(() => {
const body = document.body;
return { width: body.scrollWidth, height: body.scrollHeight };
});
await page.setViewport({
width: Math.ceil(rect.width),
height: Math.ceil(rect.height),
});
const tempDir = path.join(process.cwd(), 'temp', 'html');
if (!fs.existsSync(tempDir)) fs.mkdirSync(tempDir, { recursive: true });
const filepath = path.join(tempDir, `code_${Date.now()}.png`);
await page.screenshot({ path: filepath, fullPage: false });
await page.close();
logger.info(`[crystelf-ai] 代码渲染完成: ${filepath}`);
return filepath;
} catch (error) {
logger.error(`[crystelf-ai] 代码渲染失败: ${error.message}`);
return null;
}
}
async renderMarkdown(markdown) {
if (!this.isInitialized) await this.init();
try {
const page = await this.browser.newPage();
const html = this.getMarkdownTemplate(markdown, this.config?.markdownRenderer || {});
await page.setContent(html, { waitUntil: 'networkidle0' });
await page.waitForSelector('#render-complete', { timeout: 5000 });
const rect = await page.evaluate(() => {
const body = document.body;
return { width: body.scrollWidth, height: body.scrollHeight };
});
await page.setViewport({
width: Math.ceil(rect.width),
height: Math.ceil(rect.height),
});
const tempDir = path.join(process.cwd(), 'temp', 'html');
if (!fs.existsSync(tempDir)) fs.mkdirSync(tempDir, { recursive: true });
const filepath = path.join(tempDir, `markdown_${Date.now()}.png`);
await page.screenshot({ path: filepath, fullPage: false });
await page.close();
logger.info(`[crystelf-ai] Markdown渲染完成: ${filepath}`);
return filepath;
} catch (error) {
logger.error(`[crystelf-ai] Markdown渲染失败: ${error.message}`);
return null;
}
}
getCodeTemplate(code, language = 'text', config = {}) {
const themeColor = '#0f172a';
const fontSize = config.fontSize || 16;
const escapedCode = this.escapeHtml(code);
const colorMap = {
javascript: 'from-yellow-400 to-yellow-600',
typescript: 'from-blue-400 to-blue-600',
python: 'from-cyan-400 to-cyan-600',
html: 'from-orange-400 to-red-500',
css: 'from-indigo-400 to-indigo-600',
json: 'from-emerald-400 to-emerald-600',
yaml: 'from-amber-400 to-amber-600',
c: 'from-blue-300 to-blue-500',
cpp: 'from-blue-400 to-indigo-600',
java: 'from-red-400 to-orange-500',
kotlin: 'from-pink-400 to-purple-500',
csharp: 'from-violet-400 to-purple-600',
'c#': 'from-violet-400 to-purple-600',
dotnet: 'from-purple-400 to-indigo-600',
bash: 'from-gray-400 to-gray-600',
shell: 'from-gray-400 to-gray-600',
text: 'from-slate-400 to-slate-600',
};
const barColor = colorMap[language.toLowerCase()] || 'from-cyan-400 to-cyan-600';
const highlightedCode = hljs.highlight(code, { language }).value;
const lines = highlightedCode
.split('\n')
.map(
(line, i) => `
${i + 1}
${line}
`
)
.join('');
return `
`;
}
getMarkdownTemplate(markdown, config = {}) {
const themeColor = '#0f172a';
const fontSize = config.fontSize || 18;
const md = markdownit({
html: true,
linkify: true,
typographer: true,
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return (
'' +
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
'
'
);
} catch (__) {}
}
return '' + md.utils.escapeHtml(str) + '
';
},
});
return `
${md.render(markdown)}
`;
}
escapeHtml(text) {
const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' };
return text.replace(/[&<>"']/g, (m) => map[m]);
}
async close() {
if (this.browser) {
await this.browser.close();
this.browser = null;
this.isInitialized = false;
}
}
}
export default new Renderer();