快速构建前端应用: 从图中提取曲线坐标数据的在线工具

前言：为了从一个图片形式的曲线图中提取坐标数据，可以采用Origin、WebPlotDigitizer这一类较为成熟的工具。但是这个前端功能考虑到还算简单，为什么不用AI代码生成构建一个前端应用呢？因此尝试用nocode进行了一次实践。

结果

在线提取曲线/条形图数据链接直达->

https://curve-data-extractor.nocode.host/https://curve-data-extractor.nocode.host/

功能特色：

• 通过添加和拖拽锚点的方案在画布上进行曲线数据点标记。
• 通过X、Y轴手动拖拽标尺线（红色）以及设置值域，确定锚点的实际数值。
• 所有的X、Y坐标经过转换显示在表格中，可供导出成csv文件下载。

构建方式

采用AI网页生成一站式实现源码生成、在线调试和网址部署，这里用的是某团旗下nocode平台：NoCode-零代码应用生成平台

功能梳理

可按照总体目标、输入输出、前端界面元素、技术栈等层面进行描述。本次project的功能梳理：

一个网页前端，可以实现图像中的曲线数据提取。

输入: 上传图片，手动点击和拖拽得到数据锚点，手动拖拽标尺对齐坐标轴，手动输入横纵坐标范围。

输出：一个表格，展示提取到的锚点坐标数据（从左到右排序），可导出为csv

技术栈：采用canvas实现显示图片作为背景，可拖动锚点、标尺在图上面标注操作

编写prompt

可根据以下原则来编写prompt

1. 输入目标页面场景（如「在线表单」「商品展示页」）；

2. 描述页面整体框架（如「顶部导航栏 + 中部内容区 + 底部按钮」）；

3. 提供清晰、详细的需求提示；

4. 拆分复杂需求，避免长文本输入，降低模型理解偏差；

5. 发送指令，等待生成结果。

本项目中，直接以功能为导向进行了应用构建，没有太多顾及展示方式。用到的主要prompt如下：

请你写一个网页前端，可以实现图像中的曲线数据提取。## 输入: 上传图片，手动点击和拖拽得到数据锚点，手动拖拽标尺对齐坐标轴，手动输入横纵坐标范围。## 输出：一个表格，展示提取到的锚点坐标数据（从左到右排序），可导出为csv；## 技术栈：采用canvas实现显示图片作为背景，可拖动锚点、标尺在图上面标注操作

期间，发现“根据标尺和用户指定的xy范围”功能未能正确实现。这部分逻辑让AI写可能会有问题，因此在prompt中直接告诉AI运行的核心逻辑，即坐标计算的公式实现：

很好！现在做一些细微的修改，你需要对“坐标轴最大最小值设置”进行修改，因为你只知道用户给出的x最小最大值x_m,x_M,以及y最小最大值y_m,y_M，但最大值和最小值的canvas坐标位置需要用户在图上指定. \n\n 你可以用两个纵向可拖拽标线获取x最小最大值的x坐标x_{min}、x_{max}，两个横向可拖拽标线获取y最小最大值的y坐标y_{min}、y_{max}。只有知道了最大最小值的坐标，你才能根据某个锚点的坐标(x,y)推算出其实际坐标(((x-x_{min})/(x_{max}-x_{min})*(x_M))+(1-(x-x_{min})/(x_{max}-x_{min})*(x_m)), ((y-y_{min})/(y_{max}-y_{min})*(y_M))+(1-(y-y_{min})/(y_{max}-y_{min})*(y_m)))

开发过程中，可以实时查看到编写出的前端应用渲染出来是什么样子，很方便

部署

点击右上角一键部署

拓展

仅仅是实现一个数据标注的app就结束了吗？不是的。

按照这个逻辑，很多“在线工具”其实就可以自己实现，比如文件转换、在线提取数据、在线压缩图片大小......

好处是什么呢？

• 可定制性。这一点是已有的在线工具不能比拟的。
• 保密性。如果构建的应用只依赖前端，完全可以在页面加载完成后，把网线拔了运行，不必担心文件或文本上传到在线平台引起隐私问题。
• 低门槛性。前端应用的本质是代码实现某种算法逻辑，但vibe coding是不需要太多代码知识的，只需要把逻辑梳理清楚，回归到算法本质。