135 lines
4.6 KiB
Vue
135 lines
4.6 KiB
Vue
<template lang="pug">
|
|
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
|
|
</template>
|
|
|
|
<script setup>
|
|
import IconEdit from 'assets/icon/edit-2.svg'
|
|
import IconGrid from 'assets/icon/grid.svg'
|
|
import IconStack from 'assets/icon/stack.svg'
|
|
import ImageDemo from 'assets/image/demo.png'
|
|
|
|
const views = ref({
|
|
cardMode: true
|
|
})
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 38px;
|
|
height: 24px;
|
|
}
|
|
|
|
.switch input {display:none;}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: white;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: #2196F3;
|
|
}
|
|
|
|
input:focus + .slider {
|
|
box-shadow: 0 0 1px #2196F3;
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
-webkit-transform: translateX(14px);
|
|
-ms-transform: translateX(14px);
|
|
transform: translateX(14px);
|
|
}
|
|
|
|
/* Rounded sliders */
|
|
.slider.round {
|
|
border-radius: 17px;
|
|
}
|
|
|
|
.slider.round:before {
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|