NextStep-1: Toward Autoregressive Image Generation with Continuous Tokens at Scale

在这里插入图片描述

文章主要内容总结

本文介绍了NextStep-1,这是一款用于文本到图像生成的自回归模型,旨在推动自回归范式在图像生成领域的发展。该模型由140亿参数的Transformer骨干网络、1.57亿参数的流匹配头(flow matching head)和图像令牌器(image tokenizer)组成,通过统一离散文本令牌和连续图像令牌为单一序列,以“下一个令牌预测”为目标进行训练。

NextStep-1在文本到图像生成任务中表现出当前自回归模型的最优性能,在多个基准测试(如WISE、GenAI-Bench、DPG-Bench等)中取得优异成绩,尤其在高保真图像合成、复杂场景理解和世界知识整合方面能力突出。此外,基于该模型微调的NextStep-1-Edit在图像编辑任务中也展现出强竞争力,支持添加对象、背景修改、风格迁移等多种编辑需求。

为促进开放研究,作者团队计划开源模型代码和权重。

创新点

  1. 突破现有自回归模型局限:避免依赖繁重的扩散模型或向量量化(VQ)技术,直接处理连续图像令牌,消除量化损失和暴露偏差(exposure bias)问题。
  2. 统一多模态架构:将文本和图像令牌整合为单一序列,通过自回归目标((p(x)=\prod_{i=1}^{n} p(x_{i} | x_{<
<template> <view class="page-container"> <!-- 打开弹框的按钮 --> <!-- 遮罩层 --> <view class="mask" v-if="localShow" @click="hideDialog"></view> <!-- 弹框 --> <view class="dialog" :class="{ 'dialog-show': localShow }"> <view class="dialog-content"> <view class="dialog-header"> <text class="dialog-title">提示</text> <text class="close-icon" @click="hideDialog">×</text> </view> <view > <button @click="nextStep">下一步</button> <button @click="nextStep">下一步</button> </view> </view> </view> </view> </template> <script> export default { props: { showDialog: { type: Boolean, default: false, }, showModel: { type: Boolean, default: false, }, }, watch: { showModel(newVal) { // 监听父组件数据变化 this.localShow = newVal; }, }, data() { return { localShow: this.showDialog, // 本地副本 // 返回假数据 data: { }, }; }, created() { console.log("onload", this.showDialog); }, onload() { console.log("onload", this.showDialog); }, methods: { // 隐藏弹框 hideDialog() { this.localShow = false; this.$emit("update:show-model", false); // 通知父组件更新 }, }, }; </script> <style lang="scss" scoped> .page-container { padding: 20rpx; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; color: #0d0d0d; background: #f3f5f8; } .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 998; } .dialog { position: fixed; bottom: -100%; left: 0; width: 100%; height: calc(100% * 2 / 3); transition: bottom 0.3s ease; z-index: 999; display: flex; justify-content: center; align-items: flex-end; // bottom: 0; } .dialog-show { bottom: 0; } .dialog-content { background-color: #fff; width: 100%; height: 100%; border-top-left-radius: 10rpx; border-top-right-radius: 10rpx; padding: 30rpx; box-sizing: border-box; } .dialog-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20rpx; border-bottom: 1rpx solid #ccc; } .dialog-title { font-size: 32rpx; font-weight: normal; text-align: center; flex: 1; } .close-icon { font-size: 36rpx; cursor: pointer; } .radio-group { margin-top: 60rpx; } .radio-item { display: flex; align-items: center; margin-bottom: 10rpx; font-size: 28rpx; } .radio-item radio { transform: scale(0.6); } .audit-status { display: flex; justify-content: space-between; align-items: center; margin-top: 25rpx; padding: 15rpx; padding-top: 30rpx; background-color: rgba(245, 246, 249, 1); border-radius: 15rpx; } .status-label { font-size: 28rpx; } .status-value { display: flex; font-size: 28rpx; } .audit-text { color: #d01212; } .audit-date { color: #666; margin-top: 10rpx; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; color: #0d0d0d; } .dialog-footer { padding-top: 20rpx; text-align: center; margin-top: 25rpx !important; } /deep/.next-button { width: 80%; padding: 10rpx; background-color: rgba(12, 195, 199, 1) !important; border: none !important; color: #fff !important; border-radius: 15rpx; font-size: 30rpx; } .titleName { margin-top: 40rpx; } .radioName { margin-top: 40rpx; } </style> 把按钮放在一排
07-14
<think>我们需要将两个按钮放在同一排(即同一行)显示。在Vue和微信小程序的开发中,我们可以使用Flex布局来实现这一效果。 修改思路: 1. 将两个按钮包裹在一个容器中,比如一个`<view>`,并给这个容器设置`display: flex;`,这样容器内的子元素(按钮)就会默认排在一行。 2. 我们可以设置按钮之间的间距,比如使用`justify-content: space-between;`让两个按钮分别位于容器的两端,或者使用`justify-content: space-around;`让按钮周围有相等的空间,也可以使用`gap`属性设置按钮之间的间隔。 3. 考虑到样式,我们可能需要调整按钮的宽度,比如设置为49%或者使用`flex:1`让它们平分宽度。 修改步骤: 在模板中,将两个按钮用一个view包裹,并给这个view添加一个类,比如`button-container`。 在样式中,为这个类设置flex布局,并设置合适的间距。 具体修改如下: 模板部分: 将原来的: <view > <button @click="nextStep">下一步</button> <button @click="nextStep">下一步</button> </view> 修改为: <view class="button-container"> <button class="dialog-button" @click="nextStep">上一步</button> <button class="dialog-button" @click="nextStep">下一步</button> </view> 注意:这里我假设两个按钮的点击事件都是`nextStep`,但实际上可能不同,比如第一个按钮可能是“上一步”或“取消”,第二个是“下一步”或“确定”。请根据实际需求调整事件和文本。 样式部分(在style标签内添加): 由于原代码中已经使用了scoped,我们直接在同一个style块中添加: ```css .button-container { display: flex; justify-content: space-between; /* 两端对齐,按钮之间会有间隔 */ margin-top: 20rpx; /* 根据需要调整上边距 */ padding: 0 10rpx; /* 如果需要内边距可以设置 */ } .dialog-button { flex: 1; /* 让两个按钮平分宽度 */ margin: 0 10rpx; /* 设置左右外边距,增加一点间距 */ } /* 如果需要固定高度,可以设置按钮的高度 */ .dialog-button { height: 80rpx; line-height: 80rpx; font-size: 30rpx; } ``` 但是注意:原代码中已经有一些样式,特别是按钮的样式(例如:next-button)。我们这里使用了新的类名`dialog-button`,以避免和原有的样式冲突。如果原有样式已经定义了按钮样式,我们可以通过调整类名来合并样式。 另外,原代码中有一个`/deep/.next-button`的样式,这可能是之前给按钮设置的。如果希望沿用这个样式,可以将按钮的类名改为`next-button`,同时保留`button-container`布局。 修改后的按钮部分: <view class="button-container"> <button class="next-button" @click="nextStep">上一步</button> <button class="next-button" @click="nextStep">下一步</button> </view> 然后调整`.button-container`中的布局,并去掉原来按钮的宽度设置(因为之前是80%,现在希望两个并排,所以宽度由flex决定)。我们可以修改`.next-button`的宽度为自动(或者不设置宽度),因为它的父容器是flex布局,我们设置`flex:1`可以让它们等宽。 修改样式: 将原来的`.next-button`的宽度去掉,改为由flex控制。 在`.next-button`的样式中,去掉`width:80%`,然后添加`flex:1`(注意:这个flex是设置在按钮自身上,因为按钮是flex容器的直接子元素)。 同时,在`.button-container`中,我们设置`display:flex`和`justify-content: space-between`,并设置两个按钮之间的间隔。 具体调整如下: 在style中修改或添加: ```css .button-container { display: flex; justify-content: space-between; margin-top: 40rpx; /* 调整与上方内容的间距 */ width: 100%; padding: 0 10rpx; box-sizing: border-box; } /deep/.next-button { /* 去掉宽度设置,改为flex控制 */ /* width: 80%; */ flex: 1; /* 每个按钮占据相同空间 */ margin: 0 10rpx; /* 左右间隔 */ padding: 10rpx; background-color: rgba(12, 195, 199, 1) !important; border: none !important; color: #fff !important; border-radius: 15rpx; font-size: 30rpx; } ``` 注意:由于我们之前已经给按钮设置了`next-button`类,所以这里通过`/deep/.next-button`来覆盖样式。 但是,如果两个按钮需要不同的样式(比如一个主按钮一个次按钮),我们可以分别给它们添加不同的类,然后分别设置样式。 例如,将第一个按钮设置为次要按钮(灰色背景),第二个按钮保持绿色: 模板: <view class="button-container"> <button class="btn-cancel" @click="hideDialog">取消</button> <button class="btn-confirm" @click="nextStep">确定</button> </view> 样式: .btn-cancel { flex: 1; margin: 0 10rpx; background-color: #ccc !important; /* 其他样式 */ } .btn-confirm { flex: 1; margin: 0 10rpx; background-color: rgba(12, 195, 199, 1) !important; /* 其他样式 */ } 根据需求选择合适的方式。 由于原代码中两个按钮都是同一个事件,这里我假设第一个按钮是取消(隐藏弹窗),第二个按钮是下一步。所以修改事件: <view class="button-container"> <button class="next-button" @click="hideDialog">取消</button> <button class="next-button" @click="nextStep">下一步</button> </view> 这样,两个按钮就会并排显示,并且样式一致。 最后,注意弹窗的高度可能不足以显示内容,如果按钮在底部,可以考虑将按钮容器定位在底部,或者调整弹窗内容的高度。这里我们使用flex布局,可以将弹窗内容区域设置为一个列方向的flex容器,并将按钮容器放在底部。 我们可以将整个`.dialog-content`设置为flex列布局,并将内容区域(按钮以上的部分)设置为flex:1,按钮容器放在下面。 修改`.dialog-content`的样式: ```css .dialog-content { /* 已有的样式 */ display: flex; flex-direction: column; height: 100%; } ``` 然后,将按钮容器(`.button-container`)放在最后,并设置`margin-top: auto;`,这样它就会自动被推到最下面。 或者,我们可以将内容区域分为两部分,上面部分用`<view>`包裹,并设置`flex:1`,下面部分就是按钮容器。 例如: ```html <view class="dialog-content"> <view class="dialog-header">...</view> <!-- 其他内容 --> <view class="content-main" style="flex:1;"> <!-- 这里放主要内容,可以滚动 --> </view> <view class="button-container"> ... 按钮 ... </view> </view> ``` 根据实际内容结构进行调整。 由于原代码中在按钮之前只有标题和关闭按钮,以及一个空的audit-status(可能被注释了?),所以我们可以将按钮容器直接放在最后,并设置`margin-top: auto;`来推到下面。 在`.button-container`的样式中添加`margin-top: auto;`,这样它就会自动占据剩余空间的下方。 修改后的按钮容器样式: ```css .button-container { display: flex; justify-content: space-between; margin-top: auto; /* 自动上边距,将按钮推到容器底部 */ width: 100%; padding: 0 10rpx; box-sizing: border-box; padding-bottom: 30rpx; /* 底部留一些空间 */ } ``` 这样,无论内容多少,按钮都会在弹窗的底部。 总结修改步骤: 1. 将两个按钮用`<view class="button-container">`包裹。 2. 调整按钮的点击事件和文本(第一个按钮为取消,第二个为下一步)。 3. 在样式中添加`.button-container`的样式,并调整按钮的样式(使用flex布局,并设置自动上边距使其位于底部)。 下面是修改后的完整代码(仅修改部分):</think>要将两个按钮放在同一排,需要使用 Flex 布局来实现。以下是修改后的代码: ```html <template> <!-- 其他代码不变 --> <view class="dialog-content"> <view class="dialog-header"> <text class="dialog-title">提示</text> <text class="close-icon" @click="hideDialog">×</text> </view> <!-- 修改按钮容器为 Flex 布局 --> <view class="button-group"> <button class="dialog-button" @click="prevStep">上一步</button> <button class="dialog-button" @click="nextStep">下一步</button> </view> </view> <!-- 其他代码不变 --> </template> <style lang="scss" scoped> /* 添加按钮组样式 */ .button-group { display: flex; /* 使用 Flex 布局 */ justify-content: space-between; /* 按钮之间平均分配空间 */ margin-top: 40rpx; /* 顶部间距 */ gap: 20rpx; /* 按钮之间的间隙 */ } /* 按钮样式 */ .dialog-button { flex: 1; /* 每个按钮平分可用空间 */ height: 80rpx; line-height: 80rpx; background-color: rgba(12, 195, 199, 1); color: white; border-radius: 15rpx; font-size: 30rpx; border: none; } /* 其他样式保持不变 */ </style> ``` ### 修改说明: 1. **HTML 结构修改**: - 将按钮包裹在 `view class="button-group"` 容器中 - 添加了 `prevStep` 方法(需在 methods 中实现) 2. **CSS 关键属性**: - `display: flex`:启用 Flex 布局 - `justify-content: space-between`:按钮平均分布在容器中 - `gap: 20rpx`:设置按钮之间的间距 - `flex: 1`:让每个按钮平分可用空间 3. **按钮样式**: - 统一了按钮样式(高度、背景色、圆角等) - 移除了原代码中的内联样式和 `/deep/` 选择器 ### 完整组件代码: ```html <template> <view class="page-container"> <view class="mask" v-if="localShow" @click="hideDialog"></view> <view class="dialog" :class="{ 'dialog-show': localShow }"> <view class="dialog-content"> <view class="dialog-header"> <text class="dialog-title">提示</text> <text class="close-icon" @click="hideDialog">×</text> </view> <!-- 按钮组 - 使用 Flex 布局 --> <view class="button-group"> <button class="dialog-button" @click="prevStep">上一步</button> <button class="dialog-button" @click="nextStep">下一步</button> </view> </view> </view> </view> </template> <script> export default { props: { showDialog: Boolean, showModel: Boolean }, watch: { showModel(newVal) { this.localShow = newVal; } }, data() { return { localShow: this.showDialog, data: {} }; }, methods: { hideDialog() { this.localShow = false; this.$emit("update:show-model", false); }, prevStep() { // 上一步逻辑 }, nextStep() { // 下一步逻辑 } } }; </script> <style lang="scss" scoped> .page-container { padding: 20rpx; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; color: #0d0d0d; background: #f3f5f8; } .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 998; } .dialog { position: fixed; bottom: -100%; left: 0; width: 100%; height: calc(100% * 2 / 3); transition: bottom 0.3s ease; z-index: 999; display: flex; justify-content: center; align-items: flex-end; } .dialog-show { bottom: 0; } .dialog-content { background-color: #fff; width: 100%; height: 100%; border-top-left-radius: 10rpx; border-top-right-radius: 10rpx; padding: 30rpx; box-sizing: border-box; } .dialog-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20rpx; border-bottom: 1rpx solid #ccc; } .dialog-title { font-size: 32rpx; text-align: center; flex: 1; } .close-icon { font-size: 36rpx; cursor: pointer; } /* 按钮组样式 */ .button-group { display: flex; justify-content: space-between; margin-top: 40rpx; gap: 20rpx; } .dialog-button { flex: 1; height: 80rpx; line-height: 80rpx; background-color: rgba(12, 195, 199, 1); color: white; border-radius: 15rpx; font-size: 30rpx; border: none; } /* 其他原有样式保持不变... */ </style> ``` ### 效果说明: 1. 两个按钮会并排显示在同一行 2. 按钮宽度自动平分可用空间 3. 按钮之间有 20rpx 的间距 4. 按钮样式统一(绿色背景、白色文字、圆角)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

UnknownBody

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值