绝了~GLM 做个代码阅读器,发现更强大的是可以把图片变成代码~

职场   2024-12-05 17:27   福建  

我们做开发的都知道,经常会接手一个以前同事的旧项目~~~

别人的项目特点如下:
  • 文档?不存在的~
  • 代码注释?那是什么?
  • 规范?字典没这两个字~
有时候我们向前同事请教,他们总是回复“这很简单,你自己理解下”,宰了前同事的心都有。

我估摸着他自己也忘记当初为什么这么写了~~~
不过时代变了,AI 来了,没有文档,没有注释,同事不帮忙,这些都不是事,求人不如求己,我直接手搓个代码阅读器,让它扫描整个项目的所有文件,然后让 AI 逐一为我解读,甚至还能自动添加注释,更绝的是可以直接把图片变成代码。
今天,我们就来尝试下智谱 BigModel 开放平台的模型 —— GLM-4-Plus 与 GLM-4V-Plus。
  • GLM-4-Plus:这是一个升级版的 GLM-4 模型,拥有更多的参数和更好的性能,适用于各种文本处理任务,比如文本生成、理解和分类。

  • GLM-4V-Plus:这是 GLM-4-Plus 的视觉增强版,不仅能够处理文本,还能处理图像信息,适用于需要同时理解文本和图像的多模态任务。


1、环境安装
先安装下智谱的 Python SDK 库:
pip install zhipuai
Python SDK 源码地址:https://github.com/zhipuai/zhipuai-sdk-python-v4
服务端采用 FastAPI 来实现文件读取和 API 的请求功能,安装 FastAPI 和 Uvicorn:
pip install fastapi uvicorn
前端采用的是 SSE 调用,所以还要安装一个专门用于处理 Server-Sent Events (SSE) 的库:
 pip install sse-starlette
在代码中导入 EventSourceResponse: 
 from sse_starlette.sse import EventSourceResponse

2、代码编写
前端采用 bootstrap 和 codemirror 来创建,左侧包含文件列表,右侧包含文件的代码内容及 “AI 解读”按钮:
前端部分 HTML 代码如下:

JavaScript 读取文件列表与加载文件内容代码如下:

点击 “AI 解读” 按钮向后端发送请求代码如下:

后端需要实现的功能为:

  • 1、读取指定目录下的文件列表。
  • 2、获取文件代码内容,并输出到代码编辑器中。
  • 3、利用智谱大模型的 API 解析用户提交到代码内容,对其进行解析,并返回输出。

后端读取文件目录列表与读取文件代码内容完整代码如下:

智谱大模型 glm-4-plus API 解析用户发送的代码内容:
启动 FastAPI:
uvicorn main:app --reload

3、功能测试
假设我的项目目录有以下文件:
接下来我们在浏览器中访问 http://127.0.0.1:8000/,就能把项目的文件读取到左侧菜单,页面如下所示:
让我们看代码执行的演示:


4、图片生成代码

以上功能已经很强了,但对 AI 来说也就是基础功能,接下来我们来看一个更牛逼的操作,直接通过网页截图生成需要的网页代码,这里要使用的模型是 :GLM-4V-Plus

GLM-4V-Plus 是集图像理解与视频理解能力于一体的多模态模型,我们就利用它这个强大的能力,把一个图片、设计稿或者网页截图直接转化为 HTML、CSS 或 JavaScript 代码,这样能帮助开发者快速生成前端代码。

假设我们的图片如下:

通过以下代码解析图片内容,并让他生成一个跟他一模一样前端代码文件:

生成的代码如下:

在浏览器查看,展示效果如下:

有了这个能力,下次产品经理出了原型设计稿都可以直接跳过设计师让大模型来实现前端页面了。。。

🚀 想要解锁图片转代码的超能力吗?

👉 长按识别下方二维码,立即体验这项神奇技能!


智谱 AI 开放平台:https://bigmodel.cn?utm_source=2&utm_campaign=yrgzh&_channel_track_key=qY2wSfNO

👇点击「阅读原文」,解锁 AI 超能力!👇


菜鸟教程
学的不仅是技术,更是梦想!
 最新文章