如何在React中格式化AWS Bedrock LLAMA-2 API生成的内容？

一、让LLaMA-2输出标准Markdown格式（核心） #

模型输出格式混乱的根源是未明确要求格式规范，修改Lambda函数中的prompt构造，在用户问题前添加格式约束：

# Lambda函数中修改inputData的prompt字段
prompt = f"""
请用标准Markdown格式回答以下问题：
- 代码片段用三个反引号包裹，并指定编程语言（如```javascript）
- 项目符号使用-开头
- 段落之间空一行
- 关键内容用**加粗**标注

问题：{content}
"""

inputData = {
    "modelId": "meta.llama2-70b-chat-v1",
    "contentType": "application/json",
    "accept": "application/json",
    "body": {
        "prompt": prompt,
        "max_gen_len": 1024,  # 调大避免内容截断
        "temperature": 0.8,
        "top_p": 0.2
    }
}

二、后端补充格式修正（可选） #

若模型偶尔输出非标准格式（如<code>标签），在Node.js后端添加正则替换逻辑：

// 获取generation后添加处理代码
let formattedGeneration = generation;
// 替换<code>标签为Markdown代码块
formattedGeneration = formattedGeneration.replace(/<code>([\s\S]*?)<\/code>/g, (match, code) => {
    return '```javascript\n' + code.trim() + '\n```';
});
// 替换单行换行为Markdown换行格式
formattedGeneration = formattedGeneration.replace(/(?<!\n)\n(?!\n)/g, '  \n');

res.json({
    status: 200,
    message: formattedGeneration
});

三、React前端渲染Markdown #

使用现成库实现Markdown渲染与代码高亮：

1. 安装依赖：

npm install react-markdown remark-gfm react-syntax-highlighter

2. 编写渲染组件：

import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';

const MarkdownRenderer = ({ content }) => {
    return (
        <ReactMarkdown
            remarkPlugins={[remarkGfm]}
            components={{
                code({ node, inline, className, children, ...props }) {
                    const match = /language-(\w+)/.exec(className || '');
                    return !inline && match ? (
                        <SyntaxHighlighter
                            style={tomorrow}
                            language={match[1]}
                            PreTag="div"
                            {...props}
                        >
                            {String(children).replace(/\n$/, '')}
                        </SyntaxHighlighter>
                    ) : (
                        <code className={className} {...props}>
                            {children}
                        </code>
                    );
                }
            }}
        >
            {content}
        </ReactMarkdown>
    );
};

export default MarkdownRenderer;

3. 在聊天组件中使用：

import MarkdownRenderer from './MarkdownRenderer';

const ChatMessage = ({ message }) => {
    return (
        <div className="chat-message">
            <MarkdownRenderer content={message} />
        </div>
    );
};

四、额外优化 #

• 调整LLaMA-2参数：降低temperature至0.5左右，可提升输出格式稳定性；
• 后端添加截断检查：若返回内容存在未闭合的代码块或不完整段落，提示用户重新生成。

内容的提问来源于stack exchange，提问作者retro_coder