docs: add benchmark result

LogCreative · Jul 21, 2024 · 2b21923 · 2b21923
1 parent e071451
commit 2b21923
Show file tree

Hide file tree

Showing 23 changed files with 75 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -19,14 +19,16 @@ TikzEdt is the inspiration of this project, to create LaTeX TikZ graph in WYSIWY
 
     <a href="https://logcreative.github.io/PGFPlotsEdt/"><img src="res/logo/logo.svg" width="16px">https://logcreative.github.io/PGFPlotsEdt/ </a>
 
-    ![PGFPlotsEdt](res/demo/main.jpg)
+    ![PGFPlotsEdt](docs/figs/home.jpg)
 
 - **Deployment version** PGFPlotsEdt also provides several local deployment methods for faster compilation and other features, refer to the [documentation](https://github.com/LogCreative/PGFPlotsEdt/tree/master/docs#advanced) for details:
   - **Open locally**: open [index.html](index.html) in the browser.
-  - **Local compilation**: use `ppedt_server.py` to compile the tex files locally.
+  - **Local compilation**: use `ppedt_server.py` to compile standalone tex files locally in near real-time (see [pgfplots-benchmark](https://github.com/LogCreative/pgfplots-benchmark) repo for details).
+  ![PGFPlots benchmark](docs/figs/avg.png)
   - **LLM**: use `ppedt_server_llm.py` to enable code completion with Llama 3.
-  ![PGFPlotsEdt with LLM](res/demo/llm.jpg)
-  - **Deployment compilation**: use `deploy/gunicorn-deploy.py` for production use.
+  ![PGFPlotsEdt with LLM](docs/figs/llm.jpg)
+  - **Deployment compilation**: use `deploy/gunicorn-deploy.py` for production use to serve multiple users.
+
 
 
 #### Documentation

diff --git a/docs/README.md b/docs/README.md
@@ -8,13 +8,21 @@ PGFPlotsEdt: a PGFPlots statistic graph interactive editor, is a better entry to
 
 **Better entry tool**: PGFPlotsEdt presents the main features of PGFPlots clearly through a graphical user interface. You can customize your statistical graph code using familiar modular graphical options.
 
-**Faster compilation speed**: PGFPlotsEdt server, with the help of $\varepsilon\mathrm{-\TeX}$ caching technology, allows you to test $\mathrm{\TeX}$ code faster. With moderate $\mathrm{\TeX}$ file lengths, it can achieve compilation speed in near real-time[^1].
+![PGFPlotsEdt home page](figs/home.jpg)
 
-[^1]: Local deployment is required. Real-time performance requires the use of the pdfLaTeX compiler.
+**Faster compilation speed**: PGFPlotsEdt server, with the help of [mylatexformat](https://www.ctan.org/pkg/mylatexformat) caching technology [^1], allows you to test $\mathrm{\TeX}$ code faster. With moderate $\mathrm{\TeX}$ file lengths, it can achieve compilation speed in near real-time[^2].
 
-**Stronger data privacy**: PGFPlotsEdt can be deployed locally, allowing it to run without internet connections, thus protecting privacy and avoiding the risk of data leakage to online tools. PGFPlotsEdt also includes a deployment solution for [Llama3](https://llama.meta.com/llama3/), which provides code insights using a local large language model[^2].
+![PGFPlots benchmark](figs/avg.png)
 
-[^2]: Local deployment of the Llama3-8b model requires at least 6GB of available VRAM.
+[^1]: It is based on $\varepsilon-\mathrm{\TeX}$ engine. Acknowledge David Carlisle for the Chinese caching support method in the XeLaTeX program.
+
+[^2]: Local deployment is required. Real-time performance requires the use of the pdfLaTeX compiler. See [pgfplots-benchmark](https://github.com/LogCreative/pgfplots-benchmark) repo for details.
+
+**Stronger data privacy**: PGFPlotsEdt can be deployed locally, allowing it to run without internet connections, thus protecting privacy and avoiding the risk of data leakage to online tools. PGFPlotsEdt also includes a deployment solution for [Llama3](https://llama.meta.com/llama3/), which provides code insights using a local large language model[^3].
+
+![PGFPlotsEdt with LLM](figs/llm.jpg)
+
+[^3]: Local deployment of the Llama3-8b model requires at least 6GB of available VRAM.
 
 ## Getting Started
 
@@ -37,13 +45,13 @@ You can hover over the "+ Series" button in the data area and then click one of
 ![Data series](figs/function.png)
 
 ### Code Area
-After entering the data, you can see that the code in the code area is also updated, with a black block marking the last modified position. You can click the "Compile" button again to view the compilation result. If you are satisfied, you can click the first button in the code selection title bar to copy the PGFPlots code to the clipboard, and then you can insert it into your $\mathrm{\TeX}$ file[^3]; or you can download the PDF from the preview area and insert it into your $\mathrm{\TeX}$ file as an image[^4].
+After entering the data, you can see that the code in the code area is also updated, with a black block marking the last modified position. You can click the "Compile" button again to view the compilation result. If you are satisfied, you can click the first button in the code selection title bar to copy the PGFPlots code to the clipboard, and then you can insert it into your $\mathrm{\TeX}$ file[^4]; or you can download the PDF from the preview area and insert it into your $\mathrm{\TeX}$ file as an image[^5].
 
 ![Code copy](figs/code.png)
 
-[^3]: You need to load the necessary packages in the preamble of your own file.
+[^4]: You need to load the necessary packages in the preamble of your own file.
 
-[^4]: It is recommended to click the "Copy all code" button (the second button in the Code area) to save the plot code next to the PDF file for later use.
+[^5]: It is recommended to click the "Copy all code" button (the second button in the Code area) to save the plot code next to the PDF file for later use.
 
 Congratulations! You have generated your first statistical graph using PGFPlotsEdt!
 

diff --git a/docs/README_chs.md b/docs/README_chs.md
@@ -2,19 +2,27 @@
 
 ## 引言
 
-[PGFPlots](https://github.com/pgf-tikz/pgfplots) 由 Dr. Christian Feuersänger 基于 [PGF/TikZ](https://github.com/pgf-tikz/pgf) 开发，是 $\mathrm{\LaTeX}$ 中绘制高质量统计图的重要工具。在 ChatGPT 爆火之后，作为绘图的代码式媒介，它已经被越来越多的研究人员使用。但是面对 500 多页的[文档](https://mirrors.sjtug.sjtu.edu.cn/CTAN/graphics/pgf/contrib/pgfplots/doc/pgfplots.pdf)或频繁的 ChatGPT 询问，很多人对于将 PGFPlots 应用于日常学习工作中仍然望而却步。
+[PGFPlots](https://github.com/pgf-tikz/pgfplots) 由 Dr. Christian Feuersänger 基于 [PGF/TikZ](https://github.com/pgf-tikz/pgf) 开发，是 $\mathrm{\LaTeX}$ 中绘制高质量统计图的重要工具。在 ChatGPT 爆火之后，作为绘图的代码式媒介，它已经被越来越多的研究人员使用。但是面对 500 多页的[文档](https://mirrors.sjtug.sjtu.edu.cn/CTAN/graphics/pgf/contrib/pgfplots/doc/pgfplots.pdf)或频繁的 ChatGPT 询问，很多人对于将 PGFPlots 应用于日常学习工作中仍望而却步。
 
 PGFPlotsEdt：统计绘图交互式编辑器，是 PGFPlots 更好的入门工具、具有更快的编译速度、提供更强的数据隐私，可以帮助用户更快地使用 $\mathrm{\LaTeX}$ 编辑 PGFPlots 图形。
 
 **更好的入门工具** PGFPlotsEdt 通过图形式菜单将 PGFPlots 的主要功能清晰呈现，您可以通过熟悉的模块化图形选单调配出个性化的统计图代码。
 
-**更快的编译速度** PGFPlotsEdt 服务程序借助于 $\varepsilon\mathrm{-\TeX}$ 的缓存技术可以帮助您更快地测试 $\mathrm{\TeX}$ 代码，在适中 $\mathrm{\TeX}$ 文件长度下可以达到接近实时的编译速度[^1]。
+![PGFPlotsEdt 主页](figs/home_chs.jpg)
 
-[^1]: 需要本地部署或使用[官方网站](https://logcreative.tech/PGFPlotsEdt)，即时性的效果需要使用 pdfLaTeX 编译器。
+**更快的编译速度** PGFPlotsEdt 服务程序借助于 [mylatexformat](https://www.ctan.org/pkg/mylatexformat) 缓存技术[^1] 可以帮助您更快地测试 $\mathrm{\TeX}$ 代码，在适中 $\mathrm{\TeX}$ 文件长度下可以达到接近实时的编译速度[^2]。
 
-**更强的数据隐私** PGFPlotsEdt 可以自行被部署于本地环境，在不联网的情况下仍然可以运行从而保护隐私，免受向在线工具泄漏数据的风险。PGFPlotsEdt 还内置了 [Llama3](https://llama.meta.com/llama3/) 的部署方案[^2]，可以直接使用本地大语言模型获得代码见解。
+![PGFPlots 基准测试](figs/avg_chs.png)
 
-[^2]: 本地部署 Llama3-8b 模型至少需要 6GB 可用显存。
+[^1]: 基于 $\varepsilon-\mathrm{\TeX}$ 引擎，XeLaTeX 下的中文缓存支持方法来源于 David Carlisle。
+
+[^2]: 需要本地部署或使用[官方网站](https://logcreative.tech/PGFPlotsEdt)，即时性的效果需要使用 pdfLaTeX 编译器。详情见 [pgfplots-benchmark](https://github.com/LogCreative/pgfplots-benchmark) 存储库。
+
+**更强的数据隐私** PGFPlotsEdt 可以被自行部署于本地环境，在不联网的情况下仍然可以运行从而保护隐私，免受向在线工具泄漏数据的风险。PGFPlotsEdt 还内置了 [Llama3](https://llama.meta.com/llama3/) 部署方案[^3]，可以直接使用本地大语言模型获得代码见解。
+
+![PGFPlots 本地大模型部署](figs/llm_chs.jpg)
+
+[^3]: 本地部署 Llama3-8b 模型至少需要 6GB 可用显存。
 
 ## 入门
 
@@ -37,13 +45,13 @@ PGFPlotsEdt 的界面大致由 4 个部分组成，顶部为导航栏，左侧
 ![数据系列](figs/function_chs.png)
 
 ### 代码区
-完成数据的输入后，可以看到代码区的代码也得到了更新，黑色方块标记着上次修改的位置。您可以再次点击“编译”按钮查看编译结果，如果认为满意，可以点击代码选区标题栏第一个按钮，将绘图代码复制到剪贴板，之后就可以插入您的 $\mathrm{\TeX}$ 文件中使用了[^3]；或者下载预览区的 PDF 通过插入图片的方式插入到您的 $\mathrm{\TeX}$ 文件中[^4]。
+完成数据的输入后，可以看到代码区的代码也得到了更新，黑色方块标记着上次修改的位置。您可以再次点击“编译”按钮查看编译结果，如果认为满意，可以点击代码选区标题栏第一个按钮，将绘图代码复制到剪贴板，之后就可以插入您的 $\mathrm{\TeX}$ 文件中使用了[^4]；或者下载预览区的 PDF 通过插入图片的方式插入到您的 $\mathrm{\TeX}$ 文件中[^5]。
 
 ![代码复制](figs/code_chs.png)
 
-[^3]: 需要在自己文件的导言区加载必要的宏包。
+[^4]: 需要在自己文件的导言区加载必要的宏包。
 
-[^4]: 推荐按下复制全部代码按钮（代码区第二个按钮），将绘图代码保存至 PDF 文件旁备用。
+[^5]: 推荐按下复制全部代码按钮（代码区第二个按钮），将绘图代码保存至 PDF 文件旁备用。
 
 至此，您已经通过 PGFPlotsEdt 生成了第一个统计图！
 

diff --git a/docs/figs/avg.png b/docs/figs/avg.png
diff --git a/docs/figs/avg.tex b/docs/figs/avg.tex
@@ -0,0 +1,17 @@
+\documentclass{ppedt-docfig}
+\usepackage{pgfplots}
+\pgfplotsset{compat=newest}
+\usetikzlibrary{backgrounds}
+\begin{document}
+\begin{tikzpicture}[background rectangle/.style={fill=white},show background rectangle]
+\begin{axis}[xmin={0},
+xlabel={\directlua{tex.write(trans["doc"]["CompTime"])} (s)},
+height={5cm},
+width={10cm},
+grid={major},
+symbolic y coords={PGFPlotsEdt-deploy,PGFPlotsEdt,Overleaf,LaTeXOnline}, ytick=data,
+xbar,nodes near coords,enlarge y limits=0.3,extra x ticks={1},extra x tick style={grid style={blue},xticklabel=\empty},]
+ \addplot+ [] table[row sep=crcr,y=method,x=avg,] {method avg\\PGFPlotsEdt-deploy 0.6981601432847828\\PGFPlotsEdt 0.7784030871970631\\Overleaf 1.5030321224456265\\LaTeXOnline 1.97887559323296\\\\};
+\end{axis}
+\end{tikzpicture}
+\end{document}
diff --git a/docs/figs/avg_chs.png b/docs/figs/avg_chs.png
diff --git a/docs/figs/code.png b/docs/figs/code.png
diff --git a/docs/figs/code_chs.png b/docs/figs/code_chs.png
diff --git a/docs/figs/compile.png b/docs/figs/compile.png
diff --git a/docs/figs/compile_chs.png b/docs/figs/compile_chs.png
diff --git a/docs/figs/function.png b/docs/figs/function.png
diff --git a/docs/figs/function_chs.png b/docs/figs/function_chs.png
diff --git a/docs/figs/home.jpg b/docs/figs/home.jpg
diff --git a/docs/figs/home_chs.jpg b/docs/figs/home_chs.jpg
diff --git a/docs/figs/interface.png b/docs/figs/interface.png
diff --git a/docs/figs/interface_chs.png b/docs/figs/interface_chs.png
diff --git a/docs/figs/llm.jpg b/docs/figs/llm.jpg
diff --git a/docs/figs/llm_chs.jpg b/docs/figs/llm_chs.jpg
diff --git a/docs/pgfplotsedt.tex b/docs/pgfplotsedt.tex
@@ -4,12 +4,12 @@
 
 \documentclass{l3doc}
 
+% Language selection
 \directlua{local doc_lang = os.getenv("PPEDT_LANG")
 if doc_lang~=nil then
     tex.print("\\newcommand{\\langSuffix}{_" .. doc_lang .. "}")
 end}
 
-% Langugae selection
 \providecommand{\langSuffix}{}
 \newcommand{\langSuffixEN}{}
 \newcommand{\langSuffixCHS}{_chs}
@@ -37,11 +37,25 @@
 \usepackage{graphicx}
 % https://tex.stackexchange.com/a/316469
 \makeatletter
+% jpg will be inserted directly
+% png will be replaced by pdf
 \preto\Gin@extensions{png,}
 \DeclareGraphicsRule{.png}{pdf}{.pdf}{\noexpand\Gin@base.pdf}
+% Limit the figure width
+\setkeys{Gin}{width=\ifdim\Gin@nat@width>\linewidth
+    \linewidth
+\else
+    \Gin@nat@width
+\fi}
 \makeatother
 \graphicspath{{../../}} % compatible with l3build
 
+\usepackage{float}
+% make table `h' for here
+\makeatletter
+\renewcommand*{\fps@table}{H}
+\makeatother
+
 \usepackage{minted}
 \setminted{linenos}
 
@@ -64,12 +78,13 @@
         headingFive = {\paragraph{#1}},
         headingSix = {\subparagraph{#1}},
         link = {\href{#3}{#1}},
-        image = {\begin{figure}[h]\centering\includegraphics{#2}\caption{#1}\end{figure}},
+        image = {\begin{figure}[H]\centering\includegraphics{#2}\caption{#1}\end{figure}},
         blockQuoteBegin = {\begin{quote}},
         blockQuoteEnd = {\end{quote}},
     }
 }
 
+% Workaround for those logos
 \let\oldTeX\TeX
 \def\TeX{\text{\oldTeX}}
 \let\oldLaTeX\LaTeX

diff --git a/lang/chs.js b/lang/chs.js
@@ -143,6 +143,7 @@ const chs = {
   },
   "doc": {
     "Navigation": "导航",
-    "Preview": "预览"
+    "Preview": "预览",
+    "CompTime": "平均编译时间"
   }
 }
diff --git a/lang/en.js b/lang/en.js
@@ -144,6 +144,7 @@ const en = {
   },
   "doc": {
     "Navigation": "Navigation",
-    "Preview": "Preview"
+    "Preview": "Preview",
+    "CompTime": "Average Compilation Time"
   }
 }
diff --git a/res/demo/llm.jpg b/res/demo/llm.jpg
diff --git a/res/demo/main.jpg b/res/demo/main.jpg