首页 > 其他分享 >大模型API的响应内容(markdown语法)在Html中显示实例

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

时间:2024-09-13 22:03:30浏览次数:10  
标签:__ markdown return responseContent question Html API document response

获取大模型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;

标签:__,markdown,return,responseContent,question,Html,API,document,response
From: https://www.cnblogs.com/aiparallelworld/p/18412973

相关文章

  • 一个简单的个人导航页html源码
    <!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>xxx个人导航页</title><......
  • 免费试用谷歌云API指南
    在云计算时代,各个云服务商提供的服务越来越多,为了方便用户在不同的云服务商之间进行选择,很多云厂商都开发了相应的API供用户调用。使用谷歌云API,可以让用户轻松调用谷歌云上的各种服务。现在,我们将以GoogleCloudPlatform(GCP)为例,向大家介绍使用谷歌云API的具体方法。......
  • Rust使用Actix-web和SeaORM开发WebAPI通过Swagger UI查看接口文档
    本文将介绍Rust语言使用Actix-web和SeaORM库,数据库使用PostgreSQL,开发增删改查项目,同时可以通过SwaggerUI查看接口文档和查看标准Rust文档开始项目首先创建新项目,名称为rusty_crab_apicargonewrusty_crab_apiCargo.toml[dependencies]sea-orm={version="1.0.0-rc.5......
  • HTML5中的enctype和formenctype有什么区别?
    enctype是HTML5中用于指定表单数据编码方式的属性。它决定了表单数据在提交到服务器时的编码格式。常见的enctype值包括application/x-www-form-urlencoded、multipart/form-data和text/plain等。不同的enctype值适用于不同的表单数据类型和提交方式。在实际开发中,需要根......
  • 如何订阅支付DeepL,订阅DeepL Pro以及申请DeepL API?深度解析DeepL,虚拟信用卡WildCard绑
    十里不同音,五里不同调在现今世界中,跨语言的交流能力愈发重要,无论是国际友人之间的沟通交流,还是与客户或者合作伙伴之间的业务沟通,高质量的语言翻译都是一种刚性需求。今天,我们就来看一家这样的独角兽企业——一个机器翻译平台DeepL,它可以立即准确、轻松地将书面内容翻译......
  • 什么是Restful风格的API
     1、REST的定义请参考论文:https://ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm2、API文档编写语义:本文档中的关键字:必须-MUST,不得-MUSTNOT,必需-REQUIRED,应该-SHALL,不应该-SHALLNOT,应该-SHOULD,不应该-SHOULDNOT,......
  • enrollmentapi.dll文件丢失导致程序无法运行问题
    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库,这时你可以下载这个enrollmentapi.dll文件(挑选合适的版本文件)......
  • Java Script - Web Api
    变量声明有3个ver、let和const。建议const优先,其次为let。constarr=['red','pink']arr.push('blue')arr=[1,2,4]arr.push(5)//错误,arr为const1、WebApi基本认知1.1、作用和分类作用:就是使用j......
  • Capital许可管理最佳实践
    Capital许可管理最佳实践:具体方法与案例引领企业走向合规与高效在数字化时代,软件已成为企业运营不可或缺的一部分,而Capital许可管理则是确保软件合规使用、优化成本和控制风险的关键。本文将结合具体实践方法和案例,为您详细介绍Capital许可管理的最佳实践。一、明确许可需求与策......
  • 【flask系列】基于flask的 RESTful API示例
    原创xlwin136人工智能教学实践RESTfulAPI(RepresentationalStateTransferApplicationProgrammingInterface)是一种基于REST架构风格的网络应用程序接口。REST是一种设计网络服务的架构风格,它通过使用HTTP协议的通用动词(如GET、POST、PUT、DELETE等)来允许客户端和......