diff --git a/README.md b/README.md index b8fa286..4d61f82 100644 --- a/README.md +++ b/README.md @@ -19,14 +19,16 @@ TikzEdt is the inspiration of this project, to create LaTeX TikZ graph in WYSIWY https://logcreative.github.io/PGFPlotsEdt/ - ![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 index f9e695c..5a69158 100644 --- 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 index f13cc06..910db7f 100644 --- 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 new file mode 100644 index 0000000..5492918 Binary files /dev/null and b/docs/figs/avg.png differ diff --git a/docs/figs/avg.tex b/docs/figs/avg.tex new file mode 100644 index 0000000..ffb2780 --- /dev/null +++ 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} \ No newline at end of file diff --git a/docs/figs/avg_chs.png b/docs/figs/avg_chs.png new file mode 100644 index 0000000..2cc511e Binary files /dev/null and b/docs/figs/avg_chs.png differ diff --git a/docs/figs/code.png b/docs/figs/code.png index 5b08817..fecc137 100644 Binary files a/docs/figs/code.png and b/docs/figs/code.png differ diff --git a/docs/figs/code_chs.png b/docs/figs/code_chs.png index 53684c6..15c3dec 100644 Binary files a/docs/figs/code_chs.png and b/docs/figs/code_chs.png differ diff --git a/docs/figs/compile.png b/docs/figs/compile.png index 6cfaf82..80ad3d2 100644 Binary files a/docs/figs/compile.png and b/docs/figs/compile.png differ diff --git a/docs/figs/compile_chs.png b/docs/figs/compile_chs.png index 4644251..1712f14 100644 Binary files a/docs/figs/compile_chs.png and b/docs/figs/compile_chs.png differ diff --git a/docs/figs/function.png b/docs/figs/function.png index d8cc777..51f4148 100644 Binary files a/docs/figs/function.png and b/docs/figs/function.png differ diff --git a/docs/figs/function_chs.png b/docs/figs/function_chs.png index 4997bbf..b3f3b76 100644 Binary files a/docs/figs/function_chs.png and b/docs/figs/function_chs.png differ diff --git a/docs/figs/home.jpg b/docs/figs/home.jpg new file mode 100644 index 0000000..9ff6850 Binary files /dev/null and b/docs/figs/home.jpg differ diff --git a/docs/figs/home_chs.jpg b/docs/figs/home_chs.jpg new file mode 100644 index 0000000..0359914 Binary files /dev/null and b/docs/figs/home_chs.jpg differ diff --git a/docs/figs/interface.png b/docs/figs/interface.png index 73f8a42..0542b9f 100644 Binary files a/docs/figs/interface.png and b/docs/figs/interface.png differ diff --git a/docs/figs/interface_chs.png b/docs/figs/interface_chs.png index 6dd697d..39d4b36 100644 Binary files a/docs/figs/interface_chs.png and b/docs/figs/interface_chs.png differ diff --git a/docs/figs/llm.jpg b/docs/figs/llm.jpg new file mode 100644 index 0000000..c2cd505 Binary files /dev/null and b/docs/figs/llm.jpg differ diff --git a/docs/figs/llm_chs.jpg b/docs/figs/llm_chs.jpg new file mode 100644 index 0000000..939fa55 Binary files /dev/null and b/docs/figs/llm_chs.jpg differ diff --git a/docs/pgfplotsedt.tex b/docs/pgfplotsedt.tex index 8ac4460..7488114 100644 --- 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 index a79ce2f..5408eb3 100644 --- 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 index d9e46e9..3d09bb9 100644 --- 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 deleted file mode 100644 index ff81bbb..0000000 Binary files a/res/demo/llm.jpg and /dev/null differ diff --git a/res/demo/main.jpg b/res/demo/main.jpg deleted file mode 100644 index e138237..0000000 Binary files a/res/demo/main.jpg and /dev/null differ