欢迎来到海上华帆的博客园子

记录一些学习过程中的心得体会，供自己和有缘人参考！

大模型API的响应内容（markdown语法）在Html中显示实例

合集 - AI (7)
1.AI绘画常用prompt2.大模型api实战-open.bigmodel.cn3.大模型API实战-console.bce.baidu.com/qianfan/4.大模型API与前端的结合使用5.大模型API的响应内容（markdown语法）在Html中显示
6.大模型API的响应内容（markdown语法）在Html中显示实例
7.markdown.js,markdown(python环境),axios,ajax,sse,websocket和fastapi,fetch
收起

获取大模型API的响应内容的函数返回 return response.choices[0].message

from zhipuai import ZhipuAI

def get_response_from_model(question):
    client = ZhipuAI(api_key='your_api_key')
    response = client.chat.completions.create(
        model='glm-4-plus',
        messages=[
            {'role': 'user', 'content': question}
        ],
    )
    return response.choices[0].message

flask项目文件的渲染函数从响应内容获取所需content字符串传递给模版

from flask import Flask, request, render_template
from LLMapi import get_response_from_model
app = Flask(__name__)
@app.route('/apis', methods=['GET', 'POST'])
def apis():
    response = None
    if request.method == 'POST':
        question = request.form['question']
        response = get_response_from_model(question).content
        print(type(response))
        print(response)
        return render_template('apis.html', response=response)
    return render_template('apis.html', response=response)

if __name__ == '__main__':
    app.run(debug=False)

模版文件输入问题，当响应不为空的时候输出响应内容，并用marked.js库对markdown文本进行转换为html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APIs Interface</title>
    <script src="../static/marked.min.js"></script>
</head>
<body>
    <h1>Question Submission</h1>
    <form action="/apis" method="post">
        <label for="question">Enter you question:</label>
        <input type="text" id="question" name="question" required>
        <button type="submit">Submit</button>
    </form>

    {% if response %}
        <h1>Response:</h1>
        <div id="markdownContent"></div>
        <hr>
        <p>{{response}}</p>
        <hr>
        <hr>
        <!-- 使用 textarea 存储响应内容 -->
        <textarea id="responseContent" style="display:none;">{{ response }}</textarea>
        <script>

            document.addEventListener("DOMContentLoaded", function() {

                // 获取存储在 textarea 中的 response 内容
                var responseContent = document.getElementById('responseContent').value;
                var htmlContent = marked.parse(responseContent);
                document.getElementById('markdownContent').innerHTML = htmlContent;
            });
        </script>

    {% endif %}
</body>
</html>

关键步骤

1️⃣获取模型响应并返回response；

return response.choices[0].message

2️⃣在模版文件中用不显示的textarea元素接收以markdown语法书写并有特殊符号的字符串{{ response }}；

<!-- 使用 textarea 存储响应内容 -->
<textarea id="responseContent" style="display:none;">{{ response }}</textarea>

3️⃣找到textarea的value值并传递给markde.parse()函数进行转换为html语句，最后在相应位置展示出来。

// 获取存储在 textarea 中的 response 内容
var responseContent = document.getElementById('responseContent').value;
var htmlContent = marked.parse(responseContent);
document.getElementById('markdownContent').innerHTML = htmlContent;
posted @   海上华帆  阅读(202)  评论(0)  编辑  收藏  举报
相关博文：
·  大模型API的响应内容（markdown语法）在Html中显示
·  大模型API与前端的结合使用
·  1-1 Markdown学习
·  Springboot --- 使用国内的 AI 大模型 对话
·  Markdown转Html应用与实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示