Python 輕松實現(xiàn) markdown 轉網頁應用,完美支持 mermaid 圖表
大家好我是費老師,markdown作為經典易用的文檔格式,隨著近幾年AI大模型的普及,更是成為了大模型內容輸出的標準內容格式。
針對markdown格式的內容,使用Python中的一些寶藏庫,我們可以將其輕松轉化為可訪問的應用頁面,并且對markdown中嵌入的latex公式、HTML代碼塊,以及目前非常流行的內嵌mermaid圖表等形式豐富的內容,都可以完美的渲染展示出來,非常適合自建文檔、知識庫等應用場景。
今天的文章中,我們就來一起學習如何基于Python輕松實現(xiàn)markdown轉網頁應用??~
Python輕松實現(xiàn)markdown轉網頁應用
我們使用Python中的fmc庫實現(xiàn)markdown到網頁應用的直接轉換:
fmc在線文檔地址:https://fmc.feffery.tech
在已激活Python環(huán)境的前提下(推薦Python版本在3.8到3.12之間),終端執(zhí)行下列命令完成對fmc庫最新正式版本的安裝:
pip install feffery-markdown-components -U
下面我們先通過一個最簡單的例子,了解基于fmc渲染markdown的基本方法,fmc依托于Python生態(tài)中著名的全棧應用框架Dash,因此下面的示例中,我們通過將fmc的markdown渲染組件放置在應用的頁面內容中,便可實現(xiàn)渲染。
(1) app1.py
import dash
import feffery_markdown_components as fmc
app = dash.Dash(__name__)
raw_markdown = """
# 1 示例一級標題
## 1.1 示例二級標題
這是一段*示例內容*。
"""
app.layout = fmc.FefferyMarkdown(markdownStr=raw_markdown)
if __name__ == "__main__":
app.run(debug=True)
終端執(zhí)行python app1.py,按照輸出的地址瀏覽器訪問即可,可以看到對應的markdown內容被正確渲染:
除了常規(guī)的markdown內容以外,基于fmc我們還可以渲染內嵌的mermaid圖表,以通過deepseek生成的大模型綜述內容為例:
對應代碼如下,具體設置參考fmc相關在線文檔( https://fmc.feffery.tech/render-mermaid ):
(2) app2.py
import dash
import feffery_markdown_components as fmc
app = dash.Dash(
__name__,
# 使用mermaid圖表渲染功能時,需在應用實例化時額外引入必要的mermaid靜態(tài)資源,譬如下面示例的CDN地址
external_scripts=[
"https://registry.npmmirror.com/mermaid/latest/files/dist/mermaid.min.js"
],
)
raw_markdown = """
以下是簡潔的大模型發(fā)展綜述的Mermaid圖表表示:
```mermaid
timeline
title 大模型發(fā)展史
section 萌芽期 (2017-2018)
Transformer架構提出 : 2017: Vaswani等提出自注意力機制
GPT-1誕生 : 2018: OpenAI發(fā)布1.17億參數(shù)模型
section 快速發(fā)展期 (2019-2020)
BERT崛起 : 2019: Google提出雙向Transformer
GPT-3突破 : 2020: 1750億參數(shù)模型問世
section 多模態(tài)時代 (2021-2022)
CLIP模型 : 2021: 圖文跨模態(tài)理解
ChatGPT發(fā)布 : 2022: 對話能力突破
section 生態(tài)競爭期 (2023-)
開源模型爆發(fā) : LLaMA/PaLM等競品
多模態(tài)大模型 : GPT-4V/Gemini
```
```mermaid
graph TD
A[核心技術] --> B[架構創(chuàng)新]
A --> C[規(guī)模擴展]
A --> D[訓練方法]
B --> B1[Transformer]
B --> B2[Moe結構]
C --> C1[千億參數(shù)]
C --> C2[分布式訓練]
D --> D1[RLHF]
D --> D2[提示工程]
```
```mermaid
pie
title 2023年模型參數(shù)分布
"百億級" : 35
"千億級" : 55
"萬億級" : 10
```
關鍵發(fā)展特征:
1. 模型規(guī)模指數(shù)增長(2018-2023年參數(shù)增長1000倍)
2. 訓練范式轉變:從監(jiān)督學習到自監(jiān)督/強化學習
3. 應用場景擴展:單模態(tài)→多模態(tài)→智能體系統(tǒng)
4. 技術挑戰(zhàn):推理成本、幻覺問題、安全對齊
注:可根據(jù)需要調整時間節(jié)點或技術分類,此圖表突出關鍵里程碑和技術維度。
"""
app.layout = fmc.FefferyMarkdown(markdownStr=raw_markdown, mermaidOptinotallow=True)
if __name__ == "__main__":
app.run(debug=True)
在fmc中渲染markdown內嵌的mermaid圖表,可以自由指定依賴的mermaid資源版本,使得相關功能非常靈活且穩(wěn)定,譬如可以完美渲染mermaid中新引入的特殊圖表類型,以雷達圖為例:
除了上面展示的部分示例以外,通過fmc渲染markdown支持但不限于的功能有(以下示例均來自fmc在線文檔:https://fmc.feffery.tech ):
內置多種代碼塊主題
Latex公式渲染
渲染原生HTML
自定義代碼塊樣式
渲染圖片內容
各類型元素樣式可自定義
內置多種主題
自動目錄生成
關鍵詞高亮功能
基于fmc以及Dash應用生態(tài)中的其他組件庫,我們可以純Python輕松定制化實現(xiàn)各種文檔、知識庫類應用??。