div.text-white.w-full.flex.bg-dark-900
// 左侧信息
div.w-md.border-r-1.border-gray-500.border-opacity-10.pt-24.px-8.flex.flex-col.gap-4
div
p.font-bold 迅速に開発できる
p.text-gray-400 あなたのアイデアを素早く実現するためのフレームワークです。
textarea.mt-4.rounded-lg.h-32.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none")
div
div.flex.items-center.justify-between
span.font-bold 从图像中删除特征
label.switch
input(type="checkbox" checked)
div.slider.round
p.text-gray-400 描述您不希望出现在图像中的细节, 例如颜色, 物体或是风景
div
p.font-bold 筛选
p.text-gray-400 尝试可以应用于您的图像的不同风格样式
input.mt-4.rounded-lg.h-9.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none")
div
p.font-bold 通过图像生成图像
p.text-gray-400 上传或绘制图像以用作灵感
input.mt-4.rounded-lg.h-9.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none")
div.overflow-hidden.flex.gap-2.items-center
img.relative.right-6.w-4(:src="IconEdit" style="filter: drop-shadow(#ffffff 24px 0);")
span 画点什么
div
button.mt-4.rounded-lg.h-9.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none") 开始绘制
// 中间输出
div.flex-1.pt-24.px-4
div.flex.gap-2.pb-8
button.rounded-full.w-14.h-14.flex.justify-center.items-center(
:class="{ 'bg-gray-800': views.cardMode }"
@click="views.cardMode = !views.cardMode"
)
img(:src="IconGrid")
button.rounded-full.w-14.h-14.flex.justify-center.items-center(
:class="{ 'bg-gray-800': !views.cardMode }"
@click="views.cardMode = !views.cardMode"
)
img(:src="IconStack")
div.flex(:class="{'justify-center': !views.cardMode, 'flex-col': views.cardMode}")
div.bg-red-500.relative(style="max-width: min(512px, 100%);")
img(:src="ImageDemo" class="rounded-md object-contain")
div.rounded-md.absolute.inset-0.flex.flex-col.items-center.justify-center.transition-opacity.bg-gradient-to-t.to-transparent.opacity-0(
class="hover:cursor-pointer hover:opacity-100 from-black/90"
)
// 右侧参数
div.w-md.border-l-1.border-gray-500.border-opacity-10.pt-24.px-4.flex.flex-col.gap-8
div
p.font-bold 模型
p.text-gray-400 Different AI models can produce different or better results so fell free to experiment.
div
p.font-bold Image Dimensions
p.text-gray-400 width x height of the finished image.
div.flex.flex-wrap.gap-2
button.border.border-2.border-gray-500.rounded-md 512 x 512
button.border.border-2.border-gray-500.rounded-md 1024 x 1024
button.border.border-2.border-gray-500.rounded-md 640 x 384
button.border.border-2.border-gray-500.rounded-md 384 x 640
button.border.border-2.border-gray-500.rounded-md 768 x 512
button.border.border-2.border-gray-500.rounded-md 512 x 768
p Buy a paid plan for any width or height up to 1536px