AI 编码输出格式演进：从 Markdown 到 HTML 到富媒体的完整知识体系

// Markdown 解析器实现：展示 AI 生成的 Markdown 如何被转换为 HTML

interface MarkdownToken {
  type: string;      // heading, paragraph, code_block, list_item
  content: string;
  level?: number;    // for headings
  language?: string; // for code blocks
}

class SimpleMarkdownParser {
  // 正则模式：使用字符类避免转义问题
  private patterns = {
    heading: /^(#{1,6})[ ]+(.+)$/m,
    codeBlockStart: /^```([a-zA-Z]*)/m,
    codeBlockEnd: /^```$/m,
    bold: /[*][*](.+?)[*][*]|__(.+?)__/g,
    italic: /[*](.+?)[*]|_(.+?)_/g,
    inlineCode: /`(.+?)`/g,
    listItem: /^[-*][ ]+(.+)$/m,
  };

  parse(text: string): MarkdownToken[] {
    const tokens: MarkdownToken[] = [];
    const lines = text.split('\n');
    let i = 0;

    while (i < lines.length) {
      const line = lines[i];

      // 检测代码块
      const codeMatch = line.match(this.patterns.codeBlockStart);
      if (codeMatch) {
        const lang = codeMatch[1] || '';
        const codeLines: string[] = [];
        i++;
        while (i < lines.length) {
          if (this.patterns.codeBlockEnd.test(lines[i])) break;
          codeLines.push(lines[i]);
          i++;
        }
        tokens.push({
          type: 'code_block',
          content: codeLines.join('\n'),
          language: lang
        });
        i++;
        continue;
      }

      // 检测标题
      const headingMatch = line.match(this.patterns.heading);
      if (headingMatch) {
        tokens.push({
          type: 'heading',
          content: headingMatch[2],
          level: headingMatch[1].length
        });
        i++;
        continue;
      }

      // 检测列表项
      const listMatch = line.match(this.patterns.listItem);
      if (listMatch) {
        tokens.push({
          type: 'list_item',
          content: listMatch[1]
        });
        i++;
        continue;
      }

      // 默认：段落
      if (line.trim()) {
        tokens.push({ type: 'paragraph', content: line });
      }
      i++;
    }

    return tokens;
  }

  toHtml(tokens: MarkdownToken[]): string {
    return tokens.map(t => {
      switch (t.type) {
        case 'heading':
          return '<h' + t.level + '>' + t.content + '</h' + t.level + '>';
        case 'code_block': {
          const cls = t.language ? ' class="language-' + t.language + '"' : '';
          return '<pre><code' + cls + '>' + this.escapeHtml(t.content) + '</code></pre>';
        }
        case 'list_item':
          return '<li>' + this.inlineFormat(t.content) + '</li>';
        case 'paragraph':
          return '<p>' + this.inlineFormat(t.content) + '</p>';
        default:
          return '';
      }
    }).join('\n');
  }

  private inlineFormat(text: string): string {
    text = text.replace(this.patterns.inlineCode, '<code>$1</code>');
    text = text.replace(this.patterns.bold, '<strong>$1</strong>');
    text = text.replace(this.patterns.italic, '<em>$1</em>');
    return text;
  }

  private escapeHtml(text: string): string {
    return text
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;');
  }
}

// 示例：解析 AI 生成的 Markdown 文档
const mdText = `# AI 编码输出格式

## Markdown 的优势

- 语法简单：只有 6-10 个基本元素
- 容错率高：语法错误不影响整体可读性

\`\`\`python
def hello():
    print("Hello, AI!")
\`\`\`
`;

const parser = new SimpleMarkdownParser();
const tokens = parser.parse(mdText);
const html = parser.toHtml(tokens);
console.log(html);

// 沙箱化代码执行引擎：Web Worker + CSP 双重隔离
// 用于在富媒体 AI 输出中安全执行用户/生成的代码

interface ExecutionResult {
  output: string;
  error: string | null;
  executionTime: number;
  memoryUsage: number;
}

class SandboxExecutor {
  private worker: Worker | null = null;
  private timeout: number = 5000; // 5 秒超时
  private maxMemoryMB: number = 128; // 最大内存 128MB

  async initialize(): Promise<void> {
    // 创建带 CSP 限制的 Worker
    const workerCode = `
      const ALLOWED_GLOBALS = [
        'Math', 'JSON', 'Array', 'Object', 'String',
        'Number', 'Boolean', 'Date', 'RegExp', 'Map',
        'Set', 'Promise', 'console'
      ];

      self.onmessage = async (e) => {
        const { code, language, timeout } = e.data;
        const startTime = performance.now();

        try {
          let result;
          if (language === 'javascript') {
            const safeFunc = new Function(
              ...ALLOWED_GLOBALS,
              'return ' + code
            );
            result = safeFunc(
              Math, JSON, Array, Object, String,
              Number, Boolean, Date, RegExp, Map,
              Set, Promise, console
            );
          }

          self.postMessage({
            success: true,
            output: String(result ?? ''),
            executionTime: performance.now() - startTime
          });
        } catch (error) {
          self.postMessage({
            success: false,
            error: error.message,
            executionTime: performance.now() - startTime
          });
        }
      };
    `;

    const blob = new Blob([workerCode], { type: 'application/javascript' });
    this.worker = new Worker(URL.createObjectURL(blob));
  }

  async execute(
    code: string,
    language: string = 'javascript'
  ): Promise<ExecutionResult> {
    if (!this.worker) {
      await this.initialize();
    }

    return new Promise((resolve, reject) => {
      const timeoutId = setTimeout(() => {
        this.worker?.terminate();
        resolve({
          output: '',
          error: '执行超时（' + this.timeout + 'ms）',
          executionTime: this.timeout,
          memoryUsage: 0
        });
      }, this.timeout);

      this.worker.onmessage = (e) => {
        clearTimeout(timeoutId);
        resolve({
          output: e.data.output,
          error: e.data.error,
          executionTime: e.data.executionTime,
          memoryUsage: e.data.memoryUsage
        });
      };

      this.worker.onerror = (e) => {
        clearTimeout(timeoutId);
        resolve({
          output: '',
          error: 'Worker 错误: ' + e.message,
          executionTime: 0,
          memoryUsage: 0
        });
      };

      this.worker.postMessage({ code, language });
    });
  }

  destroy(): void {
    this.worker?.terminate();
    this.worker = null;
  }
}

// 使用示例
const executor = new SandboxExecutor();
const result = await executor.execute(
  'Array.from({length: 10}, (_, i) => i ** 2).filter(n => n < 50)',
  'javascript'
);
console.log(result.output); // [0, 1, 4, 9, 16, 25, 36, 49]

import MarkdownIt from 'markdown-it';

// 输出格式等级
type OutputLevel = 'markdown' | 'html' | 'rich-media';

interface RenderOptions {
  level: OutputLevel;
  enableCodeExecution?: boolean;
  enableInteractiveCharts?: boolean;
  sandboxUrl?: string; // 沙箱执行服务地址
}

interface RenderResult {
  content: string;
  level: OutputLevel;
  features: string[]; // 已启用的功能列表
  fallbackChain: OutputLevel[]; // 降级链路
}

class ProgressiveRenderer {
  private md: MarkdownIt;

  constructor() {
    this.md = new MarkdownIt({
      html: true,        // 允许 HTML 标签
      xhtmlOut: true,    // 输出 XHTML
      breaks: true,      // 换行转换为 br
      linkify: true,     // 自动链接 URL
      typographer: true, // 智能引号
    });
  }

  async render(
    markdown: string,
    options: RenderOptions
  ): Promise<RenderResult> {
    const result: RenderResult = {
      content: '',
      level: 'markdown',
      features: [],
      fallbackChain: []
    };

    // 第一层：Markdown（始终生成）
    const mdResult = this.md.render(markdown);

    if (options.level === 'markdown') {
      result.content = mdResult;
      return result;
    }

    // 第二层：HTML 增强
    result.level = 'html';
    result.content = mdResult;
    result.fallbackChain.push('markdown');

    if (options.level === 'html') {
      return result;
    }

    // 第三层：富媒体增强
    if (options.level === 'rich-media') {
      let enriched = mdResult;

      // 增强 1：代码块添加执行按钮
      if (options.enableCodeExecution) {
        enriched = this.addExecutionButtons(enriched, options.sandboxUrl);
      }

      // 增强 2：图表添加交互控件
      if (options.enableInteractiveCharts) {
        enriched = this.addChartControls(enriched);
      }

      result.content = enriched;
      result.level = 'rich-media';
      result.fallbackChain = ['html', 'markdown'];
      result.features = this.detectFeatures(enriched);
    }

    return result;
  }

  private addExecutionButtons(
    html: string,
    sandboxUrl?: string
  ): string {
    return html.replace(
      /<pre><code class="language-([a-zA-Z]+)">([\s\S]*?)<\/code><\/pre>/g,
      (match, lang, code) => {
        const encoded = Buffer.from(code).toString('base64');
        const execUrl = sandboxUrl || '#';
        return '<div class="code-block-executable">' +
          '<button class="execute-btn" data-lang="' + lang + '">' +
          '运行代码' +
          '</button>' +
          '<div class="output-panel" style="display:none">' +
          '<pre class="output"><code></code></pre>' +
          '</div></div>' + match;
      }
    );
  }

  private addChartControls(html: string): string {
    return html.replace(
      /<div class="mermaid">([\s\S]*?)<\/div>/g,
      (match, content) => {
        return '<div class="interactive-chart">' +
          '<div class="chart-controls">' +
          '<button onclick="zoomChart(this, 1.2)">放大</button>' +
          '<button onclick="zoomChart(this, 0.8)">缩小</button>' +
          '</div>' + match + '</div>';
      }
    );
  }

  private detectFeatures(html: string): string[] {
    const features: string[] = [];
    if (html.includes('execute-btn')) features.push('code-execution');
    if (html.includes('chart-controls')) features.push('interactive-charts');
    return features;
  }
}

// 使用示例
const renderer = new ProgressiveRenderer();

const mdResult = await renderer.render(
  markdownContent,
  { level: 'markdown' }
);

const htmlResult = await renderer.render(
  markdownContent,
  { level: 'html' }
);

const richResult = await renderer.render(
  markdownContent,
  {
    level: 'rich-media',
    enableCodeExecution: true,
    enableInteractiveCharts: true,
    sandboxUrl: '/api/sandbox'
  }
);