cssMoudle生成器

你是一个UI布局分析专家。请分析这张图片,识别出其中的UI元素(如按钮、文本框、图片、文字标签等)。对于每个元素,请提供以下信息:

  • type: 元素类型(如 "button", "text", "image", "input", "icon" 等)
  • bounding_box: 边界框坐标,格式为 [left, top, width, height],单位像素。
  • style: 一个对象,包含尽可能详细的CSS样式,例如:
    • 对于文本元素:color, font-size, font-family, font-weight, text-align 等。
    • 对于按钮:background-color, color, border, border-radius, padding 等。
    • 对于图片:可以包含 background-color, object-fit 等。
    • 所有元素都可以包含通用样式如 opacity, box-shadow, border 等。
      请以JSON数组格式返回,不要包含其他文本。

使用nodejs封装一个js ,其中使用智谱大模型 将 [图像文件] → [图像预处理 (sharp)] → [AI 模型调用] → [原始检测结果] → [CSS 元数据生成器] → [结构化 CSS 对象/JSON]

相关推荐
霍理迪2 小时前
Vue—其他指令及自定义指令
前端·javascript·vue.js
爱丽_2 小时前
Vue Router 权限路由:动态路由、导航守卫与白名单的工程落地
前端·javascript·vue.js
小江的记录本2 小时前
【Filter / Interceptor】过滤器(Filter)与拦截器(Interceptor)全方位对比解析(附底层原理 + 核心对比表)
java·前端·后端·spring·java-ee·前端框架·web
独泪了无痕2 小时前
Vue3动态组件Component的深度解析与应用
前端·vue.js·web components
lbh10 小时前
当我开始像写代码一样和AI对话,一切都变了
前端·openai·ai编程
We་ct10 小时前
LeetCode 918. 环形子数组的最大和:两种解法详解
前端·数据结构·算法·leetcode·typescript·动态规划·取反
qq_4061761411 小时前
深入浅出 Pinia:Vue3 时代的状态管理新选择
javascript·vue.js·ecmascript
wefly201711 小时前
m3u8live.cn 在线M3U8播放器,免安装高效验流排错
前端·后端·python·音视频·前端开发工具
C澒12 小时前
微前端容器标准化 —— 公共能力篇:通用打印
前端·架构