“说”出一个UI原型稿:来自北邮课堂的一款文心应用

1503e46454c6e46d0acaf39d106bf0f6.gif

在2023年秋季学期,北京邮电大学联合百度飞桨,设计了“文心一言X产品设计”的集训营主题,并融入到了“移动交互设计”的课程中。在完成结业作业的过程中,同学们将基于文心一言开展产品原型设计与初步开发。

641132f53abf867adbe08915ade8bc64.png

众所周知,产品原型设计,是实现产品从0到1的必要一环。

基于同学们在本课程的学习和实践需求,我们与外部开发者合作,设计并开发出面向前端交互原型制作的实训工具——ChatDesign,为同学们的设计和开发提供便捷的智慧工具。工具在北邮内测仅三天,已消耗了30万Token数。欢迎更多朋友扫描文末二维码,参与该工具的内测!

cab5f28276aaba16aa0005aa0d0b7fea.gif

该工具基于ERNIE Bot SDK打造,能够使用户输入对产品的页面想象文字后,就能得到网页可视化效果图。不仅如此,用户也可以与大模型在线协同编辑。

0faeab071a27a828496a7ce32bd459a3.gif

同时,ChatDesign支持html、css和JavaScript的完整代码及单个文件代码的导出和迁移,加速前端工程的实现。

476fefa70e9641601ee62059274abbb5.gif

值得一提的是,该产品也支持用户本地图像素材的上传,使大模型能够读取UI素材,并嵌入到交互原型中,助力高保真原型的制作。

我们将Chatdesign的设计、开发和使用过程的经历,以实践营形式整理为课程,欢迎大家加入大模型X交互设计实践营,探索更多产品可能性!

5a83073246b5547918874741547e2f8f.jpeg

56e692e88146ba7920d67451e9a043cb.png

da3824a284e17016651db557febbbc25.jpeg

3a557375eb85a9957475ab6eb7bd965d.jpeg

2ae4dbef8d5e4ee6d2381e8d33b2daf1.jpeg

34aaef01076977632a9f54ca3fe19dfb.gif

关注【飞桨PaddlePaddle】公众号

获取更多技术内容~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/156327.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

容性负载箱与电容器的关系是什么?

容性负载箱用于测试电容器性能的设备,电容器是储存电能的元件,具有储存和释放电荷的能力。容性负载箱通过对电容器施加不同的负载,可以测量电容器的容量、电压响应、损耗等参数。 容性负载箱与电容器的关系主要体现在以下几个方面&#xff1a…

外贸自建站怎么做?做外贸要怎样建设网站?

外贸自建站如何建立?海洋建站的具体步骤有哪些? 通过建立自己的外贸网站,您可以更好地展示公司的产品和服务,吸引更多的潜在客户,提高品牌知名度,拓展海外市场。那么,如何建立一个成功的外贸自…

系列三、GC垃圾回收【总体概览】

一、GC垃圾回收【总体概览】 JVM进行GC时,并非每次都对上面的三个内存区域(新生区、养老区、元空间/永久代)一起回收,大部分回收的是新生区里边的垃圾,因此GC按照回收的区域又分为了两种类型,一种是发生在新…

6块钱改变世界,网易和拼多多踏入同一条河流?

年底将至,各种颁奖盛典星光熠熠。如果要给今年深蹲反弹中的互联网大厂颁奖,2023表现最突出的可能是师出同门的兄弟网易和拼多多。 从市场表现来看,两家企业录得今年互联网中概股最高涨幅,被称为“中概股之光”:2023年…

移动硬盘打不开?正确操作方法分享!

“我的移动硬盘用了好几年了,但是不知道为什么,最近每次把移动硬盘插入电脑都显示无法打开。我还有一些很重要的数据在里面呢,有什么比较好的方法可以解决这个问题吗?” 作为一个便捷的存储工具,移动硬盘给我们带来了很…

Python plt.scatter()函数用法

一.scatter()函数的定义 matplotlib.pyplot.scatter(x, y, sNone, cNone, markerNone, cmapNone, normNone, vminNone, vmaxNone, alphaNone, linewidthsNone, vertsNone, edgecolorsNone, *, dataNone, **kwargs) 特征值作用x,y绘制散点图…

OpenCV快速入门:初探

文章目录 一、什么是OpenCV二、安装OpenCV三、图像读取与显示读取图像显示图像等待按键与关闭窗口 四、视频加载与摄像头调用从视频文件中读取从摄像头中读取关闭窗口与释放资源 五、图像的基本存储方式RGB矩阵矩阵操作与像素访问使用矩阵来显示图像 六、图像保存读取图像保存图…

解决requests 2.28.x版本SSL错误:证书验证失败

1、问题背景 在使用requests 2.28.1版本时,我进行HTTP post传输报告负载时,由于SSL验证设置为True,请求失败,错误如下:(Caused by SSLError(SSLCertVerificationError(1, ‘[SSL: CERTIFICATE_VERIFY_FAILED] certifi…

邀请报名|11月24日阿里云原生 Serverless 技术实践营 深圳站

活动简介 “阿里云云原生 Serverless 技术实践营 ” 是一场以 Serverless 为主题的开发者活动,活动受众以关注 Serverless 技术的开发者、企业决策人、云原生领域创业者为主,活动形式为演讲、动手实操,让开发者通过一个下午的时间增进对 Ser…

高项备考葵花宝典-项目整合管理输入、输出、工具和技术

项目整合管理包括识别、定义、组合、统一和协调项目管理过程组的各个过程和项目管理活动。在项目管理中,整合管理兼具统一、合并、沟通和建立联系的性质,项目整合管理贯穿项目始终。 目录 一、项目整合管理输入、输出、工具和技术 1.1 制定项目章程 1…

7.docker运行redis容器

1.准备redis的配置文件 从上一篇运行MySQL容器我们知道,需要给容器挂载数据卷,来持久化数据和配置,相应的redis也不例外。这里我们以redis6.0.8为例来实际说明下。 1.1 查找redis的配置文件redis.conf 下面这个网址有各种版本的配置文件供…

【教3妹学编程-算法题】最大和查询

3妹:2哥,你有没有看到新闻“18岁父亲为4岁儿子落户现身亲子鉴定” 2哥 : 啥?18岁就当爹啦? 3妹:确切的说是14岁好吧。 2哥 : 哎,想我30了, 还是个单身狗。 3妹:别急啊, 2…

智慧校园电子班牌 智能互联家校互通源码 springboot

利用先进的云计算技术,将教育信息化资源和教学管理系统进行有效整合,实现生态基础数据共享、应用生态统一管理,为智慧教育建设的统一性,稳定性,可扩展性,互通性提供保障的智慧教育一体化云解决方案。 在大数…

内网穿透(frp和proxychains4)

一、准备工作 需要三台机器,去哦这里准备的是win7(目标主机),kali(攻击者),红帽(跳板) 攻击机(kali):192.168.10.15 跳板机&#xff0…

护眼台灯选购注意事项?考公专用护眼台灯推荐

随着科技的发展和进步,台灯的外观也不在和以往一般笨重,而是变得越来越美观,而且也更方便了,功能也越来越多元化了。台灯作为现在我们日常学习、阅读、办公必备的一盏照明灯具,其光源的舒适度是非常重要的。那么挑选台…

word文档转换为ppt文件,怎么做?

大家是否会遇到需要将word文档转换为ppt文件的情况?除了反反复复粘贴复制以外,还有其他方法可以转换文件格式,今天给大家分享word转换ppt方法。 首先我们先将word文件打开大纲模式 然后我们将文中的大标题设置为1级标题,副标题设…

idea 环境搭建及运行java后端源码

1、 idea 历史版本下载及安装 建议下载和我一样的版本,2020.3 https://www.jetbrains.com/idea/download/other.html,idea分为专业版本(Ultimate)和社区版本(Community),前期可以下载专业版本…

Modbus转Profinet网关在大型挤压涂布机应用配置案例

变频器和伺服电机是常用于工业生产线的电力传动设备。它们的功能是根据不同的控制信号调整电机的运行状态,实现对生产线速度和精度的精确控制。通过PLC与兴达易控Modbus转Profinet网关(XD-MDPN100)的连接,变频器和伺服电机可以与P…

Windows环境VSCode配置OpenCV-环境搭建(一)

软件准备 OpenCV cmake MinGW-W64 MinGW-W64要下载 否则后面编译出错&#xff1a; D:/openCV_win/opencv/sources/modules/core/include/opencv2/core/utility.hpp:719:29: error: Mutex is not a member of cvtypedef std::lock_guard<cv::Mutex> AutoLock;^~~~~D:/…

vue 城市选择器的使用 element-china-area-data

一、Element UI 中国省市区级联数据 本文参考&#xff1a;element-china-area-data - npm 1. 安装 npm install element-china-area-data -S2. 使用 import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from e…