V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
sparrowwht7
V2EX  ›  分享创造

开源 ant-codeAI,图片生成代码(React, Vue, Tailwind)

  •  
  •   sparrowwht7 · 214 天前 · 2903 次点击
    这是一个创建于 214 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前一阵体验试用 screenshot-to-code 通过截图生成代码挺有意思,本身也有一直关注尝试这个方向,但是试用尤其是截图背后的逻辑代码输出不太符合预期所以改了改代码。开源地址

    一、新增/修改能力

    1. 将后端代码从 python 改为 node (主要是更熟悉 node )。
    2. 提供自定义 prompt 能力让输出的代码更有逻辑、更可控。
    3. 新增 react+antd 、vue+element plus 、vue+tailwind 代码输出。
    4. 将输出的静态资源地址改为国内可访问地址。
    5. 设置上增加代理 openAI url 录入入口。
    6. 腾讯云部署了一份临时地址,技术可以自己源代码本地跑着玩玩。

    二、使用体验

    • 挺费钱,只保留了 gpt-4-vision-preview 的请求,一次差不多 0.3 元。
    • prompt 成本较高,需要反复调整 prompt 才可以输出期望的代码。
    • 每次使用相同的图片,输出的代码不一样不够稳定,有时输出的代码会有缺失报错。
    • system + 自定义 prompt 的组合可以输出功能相近有逻辑的代码。
    • 截图为中文,输出效果一般。

    三、效果截图

    在使用的技术( React ,Vue ,Tailwind ,组件库)官网上截图还原度会更高。下面是使用了项目修改后的效果图。 下面是 Tailwind 上截图生成的对比。

    原图 生成网页效果
    290960424-0620753c-9c48-4878-a40f-3d79e40f1230.png 290960726-18fd642c-9f92-4b76-a20d-7a59c6905256.png

    选择自定义的 prompt 后,会输出更相近且带有逻辑的页面。

    原图 生成网页效果
    586bde562bf342859178ac2e2794df09~tplv-k3u1fbpfcp-jj-mark_3024_0_0_0_q75.webp fce64d211bbf4c8b82c969c5e25a45be~tplv-k3u1fbpfcp-jj-mark_3024_0_0_0_q75.webp

    四、更新计划

    初步想法,随着更深入的研究计划可能有变。

    • 多图片分块支持。
    • 引入 langChain 输出更符合预期的代码。
    • 复杂开发场景支持。
    • 和可视化拖拽结合。
    • 简单场景完善整个链路,比如表单从截图生成到数据提交。

    五、交流

    🙋‍♂️目前定位还不清晰,可能偏向技术思维有些固化,想交流下是否有用过 screenshot-to-code 或者类似功能的使用感受?有没有在实际场景用到了?等相关交流看看这个开源项目可能往哪个方向继续做。


    六、开源地址:

    https://github.com/sparrow-js/ant-codeAI

    16 条回复    2023-12-19 13:16:37 +08:00
    sparrowwht7
        1
    sparrowwht7  
    OP
       214 天前
    有用过类似功能的没,或者随便说说给点意见 😄
    shuyu
        2
    shuyu  
       214 天前
    不错
    sparrowwht7
        3
    sparrowwht7  
    OP
       214 天前
    @shuyu 🤝
    triangle111
        4
    triangle111  
       214 天前
    https://github.com/abi/screenshot-to-code
    好像都差不多,干脆部署后直接出海吧
    emmettwoo
        5
    emmettwoo  
       214 天前
    刚知道有这么个东西,以后妈妈再也不用担心我不会写 CSS 了
    haoxuexiaoyao
        6
    haoxuexiaoyao  
       214 天前
    传了图片 没反应
    sparrowwht7
        7
    sparrowwht7  
    OP
       214 天前
    @triangle111 在 screenshot-to-code 基础上改的,现在类似的还都比较简单请求 GPT-4 Vision 接口,最近想想后续往哪个方向走
    sparrowwht7
        8
    sparrowwht7  
    OP
       214 天前
    @haoxuexiaoyao 需要 openAI key 支持 gpt-4-vision-preview ,和图片小于 200kb (腾讯云上有上传大小限制,没找到在哪改),或者要是技术本地源代码跑试试没有限制
    sparrowwht7
        9
    sparrowwht7  
    OP
       214 天前
    @emmettwoo 我自己测试中文网页样式还原度不高,反而加上自定义 prompt 逻辑代码输出的效果不错
    sparrowwht7
        10
    sparrowwht7  
    OP
       214 天前
    @emmettwoo 公司内部系统用应该没问题
    ruoxie
        11
    ruoxie  
       213 天前
    可以尝试先用 TypeChat 输出稳定的 json ,json 就是 dsl ,dsl 再去生成代码。直接生成没规范的代码我是不会用
    sparrowwht7
        12
    sparrowwht7  
    OP
       213 天前
    @ruoxie 使用定义的 prompt 后输出的代码还可以
    FightPig
        13
    FightPig  
       213 天前
    挺不错的样子
    himcheobeolx
        14
    himcheobeolx  
       213 天前
    定位是中后台开发,有没有搞手机端开发的想法?类似 flutter 、rn 、taro 这种
    sparrowwht7
        15
    sparrowwht7  
    OP
       213 天前
    @FightPig 瞎糊弄呗,😄
    sparrowwht7
        16
    sparrowwht7  
    OP
       213 天前
    @himcheobeolx 现在也是没有想好探索中,看看哪条路能走通吧,后面也先找一个移动端的试试,移动端逻辑相对更简单些
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2485 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:04 · PVG 20:04 · LAX 05:04 · JFK 08:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.