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]

相关推荐
许我半盏清茶3 分钟前
JavaScript 原型与原型链完全指南
javascript
葬送的代码人生3 分钟前
别再「Ctrl+C/V」了!Git 开发必备技能,10 分钟告别单机码农
前端·github·代码规范
xuankuxiaoyao5 分钟前
vue.js 设计与开发 ---路由
前端·javascript·vue.js
ZC跨境爬虫8 分钟前
跟着 MDN 学CSS day_6:(伪类和伪元素详解)
前端·javascript·css·数据库·ui·html
idcu9 分钟前
Lyt.js + Vite 快速开发指南
前端·typescript
暗不需求9 分钟前
玩转 React Hooks:从基础到实战,逐行解析带你彻底掌握
前端·react.js·面试
一颗小青松10 分钟前
css 文字区域根据图片形状显示,根据文字设置背景图
前端·css
阿黎梨梨12 分钟前
跟 Git 打交道的正确姿势
前端
idcu12 分钟前
深入 Lyt.js 路由系统:L6 生态系统层的核心
前端·typescript
idcu12 分钟前
用 Lyt.js 构建 Todo 应用:完整教程
前端·typescript