coffee:使用AI构建和迭代React UI速度提高10

该项目的目的不仅仅是一个漂亮的演示,而是一个可以编写生产质量代码并与之交互的人体工学工具。

特征

  • 适用于任何 React 代码库,包括 Next.js、Remix 等。
  • 对于大多数标准 UI 组件来说足够可靠
  • 支持最简单的 prop 类型(数据、回调等)
  • 使用相同的 DX 编辑现有组件以及从头开始创建新组件
  • 生成干净、可维护的代码
  • 这就是人工智能辅助代码生成的未来发展方向

Coffee 使用 Docker 来确保它运行的任何代理代码都是完全隔离的。 Coffee目前是用Python实现的(但是你不需要接触Python来使用Coffee),并且代码生成代理相对简单。

当您运行 Coffee 时,它​​将侦听源目录中 js/jsx/ts/tsx 文件的更改,如果检测到  JSX 组件,它将开始它的魔力!

Here is where you put your prompt that Coffee will use to generate the first   version of your desired component.

  This is the same type of prompt that you'd use with any LLM like ChatGPT, so
feel free to get creative and apply your favorite prompt engineering tricks.

  Finally, you can also pass in any parameters you want from your parent component
by simply adding them as demonstrated above.

每次保存源文件时,Coffee 都会查看是否有任何 组件需要酝酿(如果它们是新的,或者它们的道具或提示已更新)。对于代理找到的每个 组件,Coffee 都会将您的父组件代码、任何现有的子组件代码、提示和任何自定义配置传递给 OpenAI 聊天完成 API,以便生成目标组件的新版本。

您的应用程序可能会在第一次保存后立即显示错误,因为 Coffee 代理尚未将 Coffee 组件写入其中。这是正常现象,在咖啡代理有时间冲泡该组件后就会消失。

在构建组件后对其进行迭代也同样简单:

To edit and update the brewed component, all you need to **do** is replace the prompt with   your desired changes. For instance, "make the button background darker".

目前酿造过程有点慢,但我们正在研究多种方法来使其速度显着加快。
最后,一旦您对酿造的组件感到满意,您可以将 pour="ComponentName.tsx" 属性添加到您的  组件并保存文件,这将自动用生成的组件替换  组件。

export function Example() {
return (
<Coffee
title="Click Me" onClick={() => console.log('clicked')}
pour="MyButton.tsx" >
Whatever you prompted Coffee to generate

)
}

在此示例中,我们添加了一个特殊的 pour 属性。当您保存此文件时,Coffee 会将此代码替换为以下内容:

import MyButton from './MyButton'

export function Example() {
return (
<MyButton title='Click Me' onClick={() => console.log('clicked')} />
)
}

现在您拥有一个功能齐全、可重用的 React 组件,可以在生产中使用。

Coffee 最酷的部分是您可以像从头开始创建新组件一样轻松地编辑现有的 React 组件。 https://www.jdon.com/70914.html

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用opencv的Canny算子实现图像边缘检测

1 边缘检测介绍 图像边缘检测技术是图像处理和计算机视觉等领域最基本的问题&#xff0c;也是经典的技术难题之一。如何快速、精确地提取图像边缘信息&#xff0c;一直是国内外的研究热点&#xff0c;同时边缘的检测也是图像处理中的一个难题。早期的经典算法包括边缘算子方法…

【论文阅读】Uncertainty-aware Self-training for Text Classification with Few Label

论文下载 GitHub bib: INPROCEEDINGS{mukherjee-awadallah-2020-ust,title "Uncertainty-aware Self-training for Few-shot Text Classification",author "Subhabrata Mukherjee and Ahmed Hassan Awadallah",booktitle "NeurIPS",yea…

目标检测YOLO实战应用案例100讲-自动驾驶复杂场景下目标检测

目录 前言 研究背景与意义 研究背景 研究意义 国内外研究现状

【Hadoop】WordCount源码分析

MapReduceWordCount单词统计WordCount源码分析参考 MapReduce MapReduce是一种可用于数据处理的编程模型。它的任务过程分为两个处理阶段&#xff1a; map 阶段和 reduce 阶段。每阶段都以 键-值对 作为输入和输出&#xff0c;其类型由我们按需选择。我们还需要写两个函数&…

关于嵌入式开发的一些信息汇总:C标准、芯片架构、编译器、MISRA-C

关于嵌入式开发的一些信息汇总&#xff1a;C标准、芯片架构、编译器、MISRA-C 关于C标准芯片架构是什么&#xff1f;架构对芯片有什么作用&#xff1f;arm架构X86架构mips架构小结 编译器LLVM是什么&#xff1f;前端在干什么&#xff1f;后端在干什么&#xff1f; MISRA C的诞生…

​LeetCode解法汇总1631. 最小体力消耗路径

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 描述&#xff1a; 你准备参…

计算机网络中的通信子网主要有哪些功能?

计算机网络中的通信子网主要具有以下功能&#xff1a; 负责全网的数据通信&#xff1a;通信子网通过使用各种通信协议和传输控制功能&#xff0c;能够确保数据从一台主机安全、准确地传输到另一台主机。这包括数据的封装、解封装、传输控制、差错控制等过程。 完成各种网络数据…

【Linux】使用官方脚本自动安装 Docker(Ubuntu 22.04)

前言 Docker是一种开源平台&#xff0c;用于开发、交付和运行应用程序。它利用了容器化技术&#xff0c;使开发人员能够将应用程序及其依赖项打包到一个称为Docker容器的可移植容器中。这些容器可以在任何运行Docker的机器上快速、一致地运行&#xff0c;无论是开发环境、测试…

make没有更新最新的uImage

在 LCD 驱动的时候发现&#xff0c;linux logo一直弄不出来&#xff0c;猜想可能是因为uImage的问题&#xff0c;就看了一眼 uImage 时间&#xff1a; ​ 我现在的时间是 &#xff0c;那可能就是没有更新make的时候没有更新&#xff0c;就上网搜了一下用下面的命令输出 uImage&…

Vue学习笔记-Vue3对响应式数据的判断

导入 import {isRef,isReactive,isReadonly,isProxy} from vue作用 isRef&#xff1a; 检查一个值是否为ref对象isReactive&#xff1a; 检查一个对象是否由reactive创建的响应式代理**isReadonly&#xff1a;**检查一个对象是否由readonly创建的只读代理**isProxy&#xff1…

数据结构(七):树介绍及面试常考算法

一、树介绍 1、定义 树形结构是一种层级式的数据结构&#xff0c;由顶点&#xff08;节点&#xff09;和连接它们的边组成。 树类似于图&#xff0c;但区分树和图的重要特征是树中不存在环路。树有以下特点&#xff1a; &#xff08;1&#xff09;每个节点有零个或多个子节点…

为什么 GAN 不好训练

为什么 GAN 不好训练&#xff1f;先看 GAN 的损失&#xff1a; 当生成器固定时&#xff0c;堆D(x)求导&#xff0c;推理得到&#xff08;加号右边先对log求导&#xff0c;再对负项求导&#xff09; 然后在面对最优Discriminator时&#xff0c;Generator的优化目标就变成了&…

微积分-三角函数2

三角函数 在上一节中&#xff0c;讨论了如何在直角三角形中定义三角函数&#xff0c;限制让我们扩展三角函数的定义域。 事实上我们可以取任意角的正弦和余弦&#xff0c;而不只是局限于 0 0 0~ π 2 \frac{\pi}{2} 2π​当中。 当然需要注意的是&#xff0c;正切函数对不是对…

指数分布的随机变量

如果连续型随机变量的概率密度满足如下条件&#xff1a; 其中为常数&#xff0c;那么就称服从参数为的指数分布。 指数分布的重要性质---无记忆性&#xff1a;

数据结构(7.5)-- 树扩展之字典树

一、字典树 1、字典树介绍 字典树&#xff0c;也称为“前缀树”&#xff0c;是一种特殊的树状数据结构&#xff0c;对于解决字符串相关问题非常有效。典型 用于统计、排序、和保存大量字符串。所以经常被搜索引擎系统用于文本词频统计。它的优点是&#xff1a; 利用字符串的…

(1)(1.8) MSP(MultiWii 串行协议)(4.1 版)

文章目录 前言 1 协议概述 2 配置 3 参数说明 前言 ArduPilot 支持 MSP 协议&#xff0c;可通过任何串行端口进行遥测和传感器。这允许 ArduPilot 将其遥测数据发送到 MSP 兼容设备&#xff08;如大疆护目镜&#xff09;&#xff0c;用于屏幕显示&#xff08;OSD&#xff…

VR智慧眼:为各行业打造3D数字化业务协同平台

自改革开放以来&#xff0c;城镇化建设一直在不断推进实施&#xff0c;如今各城市化速度虽然在不断加快&#xff0c;但随之而来的部分城市开始出现资源短缺、环境污染、交通拥堵、安全隐患等问题&#xff0c;因此为了满足智慧城市大型区域场景数字化升级需求&#xff0c;助力区…

【深入浅出SpringCloud源码探究】「Netflix系列之Ribbon+Fegin」微服务化的负载均衡组件源码剖析与实战开发全流程(Ribbon篇)

微服务化的负载均衡组件源码剖析与实战开发全流程 什么是负载均衡负载均衡的种类服务器端负载均衡&#xff08;S-LB&#xff09;客户端负载均衡&#xff08;C-LB&#xff09;注解LoadBalancedLoadBalancerAutoConfiguration类LoadBalancerClient类源码分析 ServiceInstanceChoo…

ToolLLM model 以及LangChain AutoGPT Xagent在调用外部工具Tools的表现对比浅析

文章主要谈及主流ToolLLM 以及高口碑Agent 在调用Tools上的一些对比&#xff0c;框架先上&#xff0c;内容会不断丰富与更新。 第一部分&#xff0c;ToolLLM model 先来说主打Function Call 的大模型们 OpenAI GPT 宇宙第一LLM&#xff0c;它的functionCall都知道&#xff0…

python 小程序学生选课系统源码

开发工具&#xff1a; PyCharm&#xff0c;mysql5.7&#xff0c;微信开发者工具 技术说明&#xff1a; python django html 小程序 功能介绍&#xff1a; 学生&#xff1a; 登录&#xff0c;选课&#xff08;查看课程及选择&#xff09;&#xff0c;我的成绩&#xff0c;…