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

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

时间:2024-09-12 15:36:36浏览次数:1  
标签:__ content markdown HTML Flask Html API Markdown

大模型的API响应内容一般都是markdown语法的,示例如下:

{
  "created": 1703487403,
  "id": "8239375684858666781",
  "model": "glm-4",
  "request_id": "8239375684858666781",
  "choices": [
      {
          "finish_reason": "stop",
          "index": 0,
          "message": {
              "content": "要创建一个使用 Flask 的简单 Web 应用,该应用从前端接收问题,然后调用大模型服务提供商的 API 获取回复,并将回复展示在前端,可以按照以下步骤进行: 1. **安装 Flask**: 首先,确保你已经安装了 Flask。如果没有安装,可以使用 pip 安装: ```bash pip install Flask ``` ",
              "role": "assistant"
          }
      }
  ],
  "usage": {
      "completion_tokens": 217,
      "prompt_tokens": 31,
      "total_tokens": 248
  }
}

在网页中显示Markdown文本,通常需要将Markdown转换为HTML,因为网页浏览器只能直接渲染HTML。

以下是一些常用的方法来实现这一功能:

1. 使用JavaScript库,可以使用JavaScript库如marked.jsShowdownMarkdown-it来在客户端(浏览器)将Markdown转换为HTML。

示例:使用marked.js

首先,你需要在HTML文件中引入marked.js库:

<!DOCTYPE html>
<html>
<head>
    <title>Markdown to HTML</title>
</head>
<body>
    <div id="markdownContent"></div>

    <!-- 引入marked.js -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var markdownText = '**# Hello Markdown\n\nThis is *markdown* text.**';
            var htmlContent = marked.parse(markdownText);
            document.getElementById('markdownContent').innerHTML = htmlContent;
        });
    </script>
</body>
</html>

在这个例子中,当文档加载完成后,marked函数将Markdown文本转换为HTML,并将其设置为div元素的内容。

2. 使用服务器端转换

如果你使用服务器端技术(如Node.js、Python、Ruby等),可以在服务器上将Markdown转换为HTML,然后发送HTML到客户端。

示例:使用Python Flask

首先,你需要安装Flask和一个Markdown库(如markdown2):

pip install Flask markdown2

然后,创建一个简单的Flask应用:

from flask import Flask, render_template_string
import markdown2

app = Flask(__name__)

@app.route('/')
def home():
    markdown_text = '# Hello Markdown\n\nThis is *markdown* text.'
    html_content = markdown2.markdown(markdown_text)
    return render_template_string('<div>{{ content }}</div>', content=html_content)

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

在这个Flask应用中,Markdown文本在服务器端转换为HTML,然后通过Jinja2模板渲染到网页中。

选择哪种方法取决于你的具体需求,比如是否需要客户端或服务器端处理、是否需要实时预览等。

标签:__,content,markdown,HTML,Flask,Html,API,Markdown
From: https://www.cnblogs.com/aiparallelworld/p/18410297

相关文章

  • 面试-JS Web API-事件绑定和事件代理
    编写一个通用的事件监听函数描述事件冒泡的流程无线下拉的图片列表,如何监听每个图片的点击?---事件代理用e.target获取触发元素用matches判断是否是触发元素事件绑定addEventListenerfunctionbindEvent(elem,type,fn){elem.addEventListener(type,fn)}const......
  • 全国增值税发票查验接口平台-JavaScript发票验真api示例
    全国增值税发票查验接口平台旨在优化纳税服务,加强企业发票管理,确保税收工作的准确性。企业财务可以通过发票查验接口方便快捷的验证增值税发票管理系统开具发票的真伪,以实现发票的自动化管理,减少人工操作失误,提高识别、录入、查验的准确性和工作效率,从而有效防止税务欺诈和逃......
  • 淘宝api的理解与认知
    在当今电子商务的繁荣发展下,淘宝作为中国领先的电商平台,不仅为消费者提供了便捷的购物环境,也为商家们提供了强大的数据支持和服务能力。淘宝开放平台提供的API接口使得商家能够高效地获取店铺和商品的实时数据,从而更好地分析市场趋势、优化店铺运营、提升用户体验。淘宝API接口是为......
  • 大模型API与前端的结合使用
    大模型API与Flask项目示例一、输入问题交给后台处理获取表单GET,通过模版表单将问题提交给后台POST模版文件apis.html如下:<!DOCTYPEhtml><htmllang='en'><head><metacharset='UTF-8'><metaname='viewport'content='initinal-scale=......
  • 抖音电商商品采集接口api 店铺商品列表sku返回值
    如今,抖音已经成为国民最受欢迎的APP。因为抖音的存在,我们的生活开始变得更加有趣,同时,抖音带货,抖音duan等等呼之欲出,越来越多的人开始加入到抖音大战中去。在抖音进行带货或者进行短视频创作,做好数据统计工作是非常重要的。但是,很多抖音小白们并不是很明白抖音数据统计在哪里看,下面......
  • 如何将图片转换为向量?(通过DashScope API调用)
    本文介绍如何通过模型服务灵积DashScope将图片转换为向量,并入库至向量检索服务DashVector中进行向量检索。模型服务灵积DashScope,通过灵活、易用的模型API服务,让各种模态模型的能力,都能方便的为AI开发者所用。通过灵积API,开发者不仅可以直接集成大模型的强大能力,也可以对模型进......
  • 轻松构建RESTful API:Spring @ResponseBody注解全攻略,有两下子!
    ......
  • 【FastAPI】离线使用Swagger UI 或 国内网络如何快速加载Swagger UI
    在FastAPI中,默认情况下,当应用启动时,SwaggerUI会通过在线加载SwaggerUI的静态资源。这意味着如果应用运行在没有互联网连接的环境中,默认的Swagger文档页面将无法加载。为了在离线环境中使用SwaggerUI,你需要手动加载SwaggerUI的静态文件并将其与FastAPI集成。......
  • 如何使用API接口获取商品详情
    一、引言商品详情API接口是一种用于获取商品详细信息的应用程序接口。通过调用该接口,我们可以获取商品的名称、价格、描述、图片以及其他相关属性。对于电商平台、价格比较网站、数据分析等应用场景来说,商品详情API接口提供了便捷的数据获取方式。本文将详细介绍如何使用商品......
  • html+css网页设计 旅游 雪花旅行社5个页面
    html+css网页设计旅游雪花旅行社5个页面网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作)。获取源码1,访问该网站https://download.csdn.net/download/qq_42......