AlgorithmVisualizer项目改进与部署-网页算法可视化

AlgorithmVisualizer 项目介绍

​AlgorithmVisualizer 是一个开源的可视化平台，用于动态地展示各种计算机算法的执行过程，帮助用户更好地理解算法的内部机制和运行逻辑。这个项目非常适合学生、编程初学者或任何想更直观地理解算法如何工作的开发者。

🔍 项目简介：

• 类型：开源可视化学习工具
• 主要功能：通过动画和图形动态展示算法的执行过程
• GitHub 项目地址：https://github.com/algorithm-visualizer
  

🚀 主要特点：

1. 多种算法支持：
   • 排序算法（如冒泡排序、快速排序、归并排序）
   • 搜索算法（如二分查找、线性查找）
   • 路径搜索算法（如 A*、Dijkstra、BFS、DFS）
   • 数据结构操作（如栈、队列、树）
2. 可交互式界面：
   • 动画效果直观展示每一步操作
   • 用户可以自定义输入数据
   • 可调节执行速度
3. 多语言支持：
   • 后端支持 JavaScript、C++、Java 等
   • 可用的语言可拓展，适合教学和实验
4. Web 端运行：
   • 前端基于 React 构建，用户无需安装任何客户端程序
   • 可直接在浏览器中运行和查看动画效果
5. 对于编程教育：
   • 直观展示抽象算法逻辑
   • 提高学习兴趣和效率
   • 帮助调试和理解复杂问题的解决过程

官方部署方案

前端：NodeJs-v12.22.12+React

git clone https://github.com/algorithm-visualizer/algorithm-visualizer.git
npm install
npm start

后端：NodeIs-v12.22.12+Express+Docker+AWS 服务+Linux

后端需要用到Linux系统和Docker，部署方案可以参考：

https://blog.csdn.net/weixin_64094522/article/details/148370954

本文不推荐官方部署方案，因为Docker镜像被封杀的太厉害了，没有科学上网的不用试了。

git clone https://github.com/algorithm-visualizer/server.git
npm install
sudo npm run watch

可视化原理

前端（Js动画库）–Json指令–后端（多种语言运行环境）,下面的内容就是指令。

[
    {
        "args": ["20x20 Maze"], 
        "key": "4nif5m6s", 
        "method": "Array2DTracer"}, 
    {
        "args": ["Path Steps"], 
        "key": "m96ejo6t", 
        "method": "LogTracer"
    }, 
    {
        "args": [["4nif5m6s", "m96ejo6t"]], 
        "key": "g3swasyg", 
        "method": "VerticalLayout"}, 
    {
        "args": ["g3swasyg"], 
     	"key": null, 
     	"method": "setRoot"
    }
]

Python追踪器实现

​ 官方似乎没有完成Python版本的追踪器，由于博主喜欢使用Python,于是用ChatGPT辅助完成了该追踪器，经过测试，完美复现了该有的功能。

项目地址：https://github.com/HHP999/algorithm-visualizer-Python-Tracers

改进部署方案

​ 可以关注：https://gitee.com/xcbnh/line-code-view，目前由于参考需要暂未公开，感兴趣的可以联系我。

前端微调参数，减小了图像缩放幅度，添加了Python接口。

​ 后端统一本地部署语言环境，不再使用Docker和AWS远程服务方案。所有的部署环境使用了Piston项目的语言包：https://github.com/engineer-man/piston/releases/tag/pkgs，后端源码也相应的做了修改，主要添加了Python的API，同时统一使用调用脚本的方式运行各类语言。

​ 本文以Python为例，下载https://github.com/engineer-man/piston/releases/tag/pkgs里的Python语言包，解压放到一个目录下，将bin目录暴露到环境变量，目的是为了让系统直接找到Python3解释器，步骤自行解决。下载我的Python追踪器，复制algorithm_visualizer文件夹到python\3.10.0\lib\python3.10\site-packages的安装包目录，目的是直接让用户提交的Python代码可以自动识别包里的模块，当然有其他方法自行研究（博主懒）。配置一个shell脚本传入Python文件并运行该文件，最终会生成一个json文件，内部包含了指令内容。后端API触发时会调用该脚本执行。

参考考脚本:

#!/bin/bash

# 设置默认路径（如果没有设置环境变量）
source "/Programs/CodeEnvs/environment"

export PATH=$CodeEnvPackagesPath/python/3.10.0/bin:$PATH

echo "Using Python at: $(which python3.10)"

script_path="$1"

if [[ ! -f "$script_path" ]]; then
  echo "Error: script file '$script_path' does not exist."
  exit 1
fi

python3.10 "$script_path"

rm "$script_path"