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

AlgorithmVisualizer 项目介绍

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

🔍 项目简介:


🚀 主要特点:

  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指令--后端(多种语言运行环境),下面的内容就是指令。

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"
相关推荐
JXL186034 分钟前
Leetcode-.42接雨水
算法·leetcode·职场和发展
啊我不会诶2 小时前
CF每日5题(1500-1600)
c++·学习·算法
巴伦是只猫2 小时前
Java 高频算法
java·开发语言·算法
点云SLAM2 小时前
C++中std::string和std::string_view使用详解和示例
开发语言·c++·算法·字符串·string·c++标准库算法·string_view
88号技师3 小时前
2025年7月Renewable Energy-冬虫夏草优化算法Caterpillar Fungus Optimizer-附Matlab免费代码
开发语言·人工智能·算法·matlab·优化算法
dragoooon344 小时前
优选算法:移动零
c++·学习·算法·学习方法
运维小文4 小时前
初探贪心算法 -- 使用最少纸币组成指定金额
c++·python·算法·贪心算法
智者知已应修善业5 小时前
【C# 找最大值、最小值和平均值及大于个数和值】2022-9-23
经验分享·笔记·算法·c#
Zz_waiting.5 小时前
Java 算法解析 - 双指针
java·开发语言·数据结构·算法·leetcode·双指针
overFitBrain6 小时前
数据结构-4(常用排序算法、二分查找)
linux·数据结构·算法