drawing/pages/index.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.px-4.py-1(:class="{'border-light-blue-500':views.active, 'text-light-blue-500':views.active}") 512 x 512
        button.border.border-2.border-gray-500.rounded-md.px-4.py-1(:class="{'border-light-blue-500':!views.active}") 1024 x 1024
        button.border.border-2.border-gray-500.rounded-md.px-4.py-1(:class="{'border-light-blue-500':!views.active}") 640 x 384
        button.border.border-2.border-gray-500.rounded-md.px-4.py-1(:class="{'border-light-blue-500':!views.active}") 384 x 640
        button.border.border-2.border-gray-500.rounded-md.px-4.py-1(:class="{'border-light-blue-500':!views.active}") 768 x 512
        button.border.border-2.border-gray-500.rounded-md.px-4.py-1(:class="{'border-light-blue-500':!views.active}") 512 x 768
      p Buy a paid plan for any width or height up to 1536px
    div
      p.font-bold Prompt Guidnce
      p.text-gray-400 Higher guidance will make your image closer to your prompt.
      div ---------------------------
    div
      p.font-bold 质量与细节
      p.text-gray-400 Higher guidance will make your image closer to your prompt.
      div ---------------------------
</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,
  active: true,
})

const imageCreate = ref({
  // 输入:
  // 输入关键词
  // 排除关键词
  // 预训练风格
  // 图片生成图片
  // 图像强度

  // 输出:
  // model
  // 图片尺寸
  // 图像指导
  // 质量与细节
  // 随机数种子
  // 采样器
  // 图片数量
  // 私有会话
})

</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>