From fabccbaf7d059857bf9f8cd2c2de4cb9d301f7de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A1=9C=E8=8F=AF?= <huan0016@gmail.com>
Date: Tue, 7 Feb 2023 00:43:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E5=89=A9=E4=BD=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.vue                        |   7 +-
 components/SliderUndefined.vue |  41 ++++++++
 package.json                   |  12 ++-
 pages/index.vue                | 178 ++++++++++++++++++++++++++++-----
 4 files changed, 210 insertions(+), 28 deletions(-)
 create mode 100644 components/SliderUndefined.vue

diff --git a/app.vue b/app.vue
index ac4a7f3..87f5410 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 div.min-h-screen.flex.flex-nowrap(style="background-color: #15191e")
-  header.fixed.w-full.flex.justify-center.items-center.px-4.py-2.text-white(style="background-color: #06070de3")
+  header.fixed.w-full.flex.justify-center.items-center.px-4.py-2.text-white(class="h-[60px]" style="background-color: #06070de3")
     span.w-64.font-bold.text-2xl Logo
     input.rounded-lg.h-9.px-4.bg-dark-900.border.border-gray-700.text-gray-500(value="Search" type="text" class="focus:outline-none")
     nav.flex.gap-4.text-white(class="container mx-auto px-4 py-2")
@@ -16,4 +16,9 @@ html, body {
   font-size: 14px;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
 }
+.scrollbar-hide::-webkit-scrollbar { width: 0 !important }
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  overflow: -moz-scrollbars-none;
+}
 </style>
diff --git a/components/SliderUndefined.vue b/components/SliderUndefined.vue
new file mode 100644
index 0000000..953b502
--- /dev/null
+++ b/components/SliderUndefined.vue
@@ -0,0 +1,41 @@
+<template lang="pug">
+.flex.items-center.gap-x-4.slider-container
+  div(tabindex="-1" style="position: relative; touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none; outline: 0px; padding-top: 8px; padding-bottom: 8px;" class="chakra-slider css-1t1xvy7")
+    div(style="position:absolute;top:50%;transform:translateY(-50%);width:100%" class="chakra-slider__track css-8v2r68")
+      div(class="css-11z5obk")
+      div(aria-valuenow="50" class="chakra-slider__filled-track css-19vmo6h" style="position: absolute; top: 50%; transform: translateY(-50%); width: 28.5714%; left: 0%;")
+    div.absolute.select-none.touch-none(
+      role="slider" tabindex="0" aria-valuemin="10" aria-valuemax="150" aria-valuenow="25" aria-orientation="horizontal"
+      style="left: calc(28.5714% - 8px);"
+      class="chakra-slider__thumb css-12qisgv"
+    )
+    input(type="hidden" value="50")
+</template>
+
+<style>
+.css-1t1xvy7 {
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    width: 100%;
+    --slider-thumb-size: var(--chakra-sizes-3-5);
+    --slider-track-size: var(--chakra-sizes-1);
+}
+.css-8v2r68 {
+    height: var(--slider-track-size);
+    overflow: hidden;
+    border-radius: var(--chakra-radii-sm);
+    background: var(--chakra-colors-gray-200);
+    background-color: var(--toned-out-gray);
+}
+.css-19vmo6h {
+    width: inherit;
+    height: inherit;
+    background: var(--chakra-colors-blue-500);
+    background-color: var(--accent-blue);
+}
+.css-11z5obk {
+    position: relative;
+    right: var(--chakra-space-10);
+}
+</style>
\ No newline at end of file
diff --git a/package.json b/package.json
index a116eab..2383322 100644
--- a/package.json
+++ b/package.json
@@ -11,5 +11,15 @@
     "nuxt": "3.0.0",
     "nuxt-windicss": "^2.6.0",
     "pug": "^3.0.2"
-  }
+  },
+  "name": "drawing",
+  "description": "Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "gitea@git.satori.love:gameui/drawing.git"
+  },
+  "author": "satori.love",
+  "license": "MIT"
 }
diff --git a/pages/index.vue b/pages/index.vue
index a13e6cf..69be64d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
-div.text-white.w-full.flex.bg-dark-900
+div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white bg-[#05020E] h-[calc(100vh-62px)] border-t border-white/10 2xl:border-t-0 mx-auto 2xl:border-x")
   // 左侧信息
-  div.w-md.border-r-1.border-gray-500.border-opacity-10.pt-24.px-8.flex.flex-col.gap-4
+  aside(class="flex flex-col divide-y divide-white/10 pt-6 space-y-6 lg:overflow-y-auto scrollbar-hide")
     div
       p.font-bold 迅速に開発できる
       p.text-gray-400 あなたのアイデアを素早く実現するためのフレームワークです。
@@ -17,6 +17,24 @@ div.text-white.w-full.flex.bg-dark-900
       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(class="absolute w-screen lg:w-[400px] bottom-2 flex flex-col" style="max-height: 80vh; left: 418.797px; top: min(747px - min(1326.22px, 80vh), 582.656px);")
+        div(class="overflow-auto scrollbar-hide transition-[transform,opacity] duration-[50ms] z-50 pai-border rounded-lg bg-gray-900 shadow-2xl opacity-100")
+          div(class="space-y-2 items-center absolute overflow-hidden w-[calc(100%-2px)] px-4 pb-2 pt-4 lg:pt-2 z-50 bg-inherit rounded-t-lg border-b border-low border-white border-opacity-10")
+            div(class="flex justify-between")
+              h3(class="text-white font-bold") Filter
+              button(class="text-gray-600 pb-1 lg:hidden")
+                <svg viewBox="0 0 24 24" focusable="false" class="chakra-icon css-onkibi"><path fill="currentColor" d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"></path></svg>
+            div(class="relative")
+              input(type="text" placeholder="Search" class="input pai-border bg-gray-900 rounded-md mb-2 outline-none w-full p-2 pl-8" value="")
+              span(class="absolute left-2 top-2.5 text-gray-500")
+                <svg fill="none" height="20" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="20"><path d="M11 17.25a6.25 6.25 0 110-12.5 6.25 6.25 0 010 12.5z"></path><path d="M16 16l4.5 4.5"></path></svg>
+          div(class="h-32 lg:h-28")
+          div(class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-3 gap-2 p-2 pt-0")
+            template(v-for="item in 18" :key="item")
+              button.h-24(class="transition-[transform,opacity] origin-center filter-button relative aspect-[6/5] duration-200 border-2 rounded-lg overflow-hidden  active:border-blue-300/50 border-transparent hover:border-high" aria-label="Select filter style: Colorpop" style="transition-delay: 10ms;")
+                span( style="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: absolute; inset: 0px;")
+                  img( alt="Colorpop" src="https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png" decoding="async" data-nimg="fill" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: cover;" sizes="100vw" srcset="https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 640w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 750w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 828w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 1080w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 1200w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 1920w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 2048w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 3840w")
+                div( class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 flex flex-col justify-end text-gray-100 text-left text-sm p-1") Colorpop
     div
       p.font-bold 通过图像生成图像
       p.text-gray-400 上传或绘制图像以用作灵感
@@ -27,7 +45,7 @@ div.text-white.w-full.flex.bg-dark-900
     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
+  main(class="xl:col-span-3 lg:col-span-2 lg:overflow-y-auto lg:overflow-x-hidden border-x border-white/10 relative scrollbar-hide")
     div.flex.gap-2.pb-8
       button.rounded-full.w-14.h-14.flex.justify-center.items-center(
         :class="{ 'bg-gray-800': views.cardMode }"
@@ -46,29 +64,130 @@ div.text-white.w-full.flex.bg-dark-900
           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 ---------------------------
+  aside(class="lg:overflow-y-auto relative z-20 transition-all scrollbar-hide")
+    div(class="px-6 divide-y divide-white/10")
+      <fieldset class="create-fieldset py-8">
+        <label for="model-type">Model</label>
+        <p>Different AI models can produce different or better results so feel free to experiment.</p>
+        <div class="select">
+          <select name="model-type" id="model-type">
+            <option value="stable-diffusion" data-version="1.5" selected="">Stable Diffusion 1.5</option>
+            <option value="stable-diffusion-2" data-version="2.0">Stable Diffusion 2.1</option>
+            <option value="dalle-2" data-version="2.0">DALL·E 2</option>
+          </select>
+          <svg data-testid="geist-icon" fill="none" height="16" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
+        </div>
+      </fieldset>
+      div(class="flex flex-col gap-y-8 py-8")
+        fieldset(class="create-fieldset")
+          label 图像尺寸
+          p 完成图像的宽度×高度.
+          div(class="flex flex-row flex-wrap gap-x-2 gap-y-2")
+            div(class="flex flex-row flex-wrap")
+              input.hidden(type="radio" class="radio-input" id="image-dim-1" checked="")
+              label.border.border-2.border-gray-500.rounded-md.px-4.py-1(for="image-dim-1" class="!text-[11px]" style="width:98px") 512 × 512
+            div(class="flex flex-row flex-wrap")
+              input.hidden(type="radio" class="radio-input" id="image-dim-2")
+              label.border.border-2.border-gray-500.rounded-md.px-4.py-1(for="image-dim-2" class="!text-[11px]" style="width:98px") 1024 × 1024
+            div(class="flex flex-row flex-wrap")
+              input.hidden(type="radio" class="radio-input" id="image-dim-3")
+              label.border.border-2.border-gray-500.rounded-md.px-4.py-1(for="image-dim-3" class="!text-[11px]" style="width:98px") 640 × 384
+            div(class="flex flex-row flex-wrap")
+              input.hidden(type="radio" class="radio-input" id="image-dim-4")
+              label.border.border-2.border-gray-500.rounded-md.px-4.py-1(for="image-dim-4" class="!text-[11px]" style="width:98px") 384 × 640
+            div(class="flex flex-row flex-wrap")
+              input.hidden(type="radio" class="radio-input" id="image-dim-5")
+              label.border.border-2.border-gray-500.rounded-md.px-4.py-1(for="image-dim-5" class="!text-[11px]" style="width:98px") 768 × 512
+            div(class="flex flex-row flex-wrap")
+              input.hidden(type="radio" class="radio-input" id="image-dim-6")
+              label.border.border-2.border-gray-500.rounded-md.px-4.py-1(for="image-dim-6" class="!text-[11px]" style="width:98px") 512 × 768
+          div(class="text-sm grey-100 mt-1")
+            p Buy a <a target="_blank" style="color:rgb(118 173 255)" href="/pricing">paid plan</a> for any width or height up to 1536px
+        fieldset(class="create-fieldset")
+          label Prompt Guidance
+          p Higher guidance will make your image closer to your prompt.
+          SliderUndefined
+          //div(id="slider-undefined" class="flex items-center gap-x-4 slider-container")
+          //  div(tabindex="-1" style="position: relative; touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none; outline: 0px; padding-top: 8px; padding-bottom: 8px;" class="chakra-slider css-1t1xvy7")
+          //    div(id="slider-track-:R5mnqmqulm:" style="position:absolute;top:50%;transform:translateY(-50%);width:100%" class="chakra-slider__track css-8v2r68")
+          //      div(class="css-11z5obk")
+          //      div(aria-valuenow="6" class="chakra-slider__filled-track css-19vmo6h" style="position: absolute; top: 50%; transform: translateY(-50%); width: 20%; left: 0%;")
+          //    div(role="slider" tabindex="0" id="slider-thumb-:R5mnqmqulm:" aria-valuemin="0" aria-valuemax="30" aria-valuenow="6" aria-orientation="horizontal" style="position: absolute; user-select: none; touch-action: none; left: calc(20% - 8px);" class="chakra-slider__thumb css-12qisgv")
+          //    input(type="hidden" value="6")
+          //  input(type="text" class="w-12 rounded-full bg-gray-900 text-xs text-center py-1 text-gray-200" value="6")
+        fieldset(class="create-fieldset")
+          label Quality &amp; Details
+          p More steps will result in a high quality image but will take longer.
+          div(id="slider-undefined" class="flex items-center gap-x-4 slider-container")
+            div(tabindex="-1" style="position: relative; touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none; outline: 0px; padding-top: 8px; padding-bottom: 8px;" class="chakra-slider css-1t1xvy7")
+              div(id="slider-track-:R9onqmqulm:" style="position:absolute;top:50%;transform:translateY(-50%);width:100%" class="chakra-slider__track css-8v2r68")
+                div(class="css-11z5obk")
+                div(aria-valuenow="50" class="chakra-slider__filled-track css-19vmo6h" style="position: absolute; top: 50%; transform: translateY(-50%); width: 28.5714%; left: 0%;")
+              div(role="slider" tabindex="0" id="slider-thumb-:R9onqmqulm:" aria-valuemin="10" aria-valuemax="150" aria-valuenow="25" aria-orientation="horizontal" style="position: absolute; user-select: none; touch-action: none; left: calc(28.5714% - 8px);" class="chakra-slider__thumb css-12qisgv")
+              input(type="hidden" value="50")
+            input(type="text" class="w-12 rounded-full bg-gray-900 text-xs text-center py-1 text-gray-200" value="50")
+      div(class="flex flex-col gap-y-4 py-8")
+        <fieldset class="create-fieldset">
+          <label for="seed-input">Seed</label>
+          <p>Different numbers result in new variations of your image.</p>
+          <input id="seed-input" class="text-input" type="number" value="" disabled="">
+          <div class="flex items-center gap-x-2">
+            <label class="chakra-checkbox css-192puf7" data-checked="">
+              <input class="chakra-checkbox__input" type="checkbox" id="randomize-seed" style="border:0px;clip:rect(0px, 0px, 0px, 0px);height:1px;width:1px;margin:-1px;padding:0px;overflow:hidden;white-space:nowrap;position:absolute" checked="" value="">
+              <span class="chakra-checkbox__control css-19ag05x" aria-hidden="true" data-checked="">
+                <div style="display: flex; align-items: center; justify-content: center; height: 100%; transform: none;">
+                  <svg viewBox="0 0 12 10" class="css-1x1o9fj" opacity="1" stroke-dashoffset="0" style="fill: none; stroke-width: 2; stroke: currentcolor; stroke-dasharray: 16;"><polyline points="1.5 6 4.5 9 10.5 1"></polyline></svg>
+                </div>
+              </span>
+            </label>
+            <label for="randomize-seed" class="text-sm text-gray-300 mt-1">Randomize each number to get new variations</label>
+          </div>
+        </fieldset>
+      <div class="flex flex-col gap-y-4" style="border-color:transparent">
+        <fieldset class="create-fieldset">
+          <button aria-label="Toggle advanced options" id="advanced-options-toggle"><div class="flex flex-row justify-center"><p class="advanced-options-toggle">Hide <!-- -->Advanced Options</p></div></button>
+          <div class="advanced-options-container transition-all overflow-hidden opacity-100 max-h-[99rem] pb-8">
+            <label>Sampler</label>
+            <p>The diffusion sampling method.</p>
+            <div class="select">
+              <select name="advanced-options" id="advanced-options">
+                <option value="1" selected="">pndm (plms)</option>
+                <option value="0">ddim</option>
+                <option value="2">k_euler</option>
+                <option value="3">k_euler_ancestral</option>
+                <option value="4">k_heun</option>
+                <option value="5">k_dpm_2</option>
+                <option value="6">k_dpm_2_ancestral</option>
+                <option value="7">k_lms</option>
+              </select>
+              <svg data-testid="geist-icon" fill="none" height="16" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+      <fieldset class="create-fieldset py-8">
+        <label>Number of Images</label>
+        <p>Select the number of images you would like to generate.</p>
+        <div class="flex gap-x-2">
+          <input type="radio" class="radio-input" id="num-images-1" checked="">
+          <label for="num-images-1">1</label><input type="radio" class="radio-input" id="num-images-2">
+          <label for="num-images-2">2</label><input type="radio" class="radio-input" id="num-images-3">
+          <label for="num-images-3">3</label><input type="radio" class="radio-input" id="num-images-4">
+          <label for="num-images-4">4</label>
+        </div>
+      </fieldset>
+      div(class="flex flex-col gap-y-4 py-8")
+        fieldset(class="create-fieldset")
+          <label>Private Session</label>
+          <p>Images will only be visible to you until you're ready to share them. <span> Buy a <a target="_blank" href="/pricing" style="color: rgb(118, 173, 255);">paid plan</a> to persist this setting across sessions.</span></p>
+          <div class="flex gap-x-3 w-44 items-center">
+            <label class="chakra-switch [&amp;>span]:bg-[#39324E] [&amp;>span[data-checked]]:bg-[#76ADFF] [&amp;>span]:p-1 css-ghot30" data-checked="">
+              <input class="chakra-switch__input" type="checkbox" value="" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;">
+              <span aria-hidden="true" class="chakra-switch__track css-j1l0qk" data-checked="">
+                <span class="chakra-switch__thumb css-7roig" data-checked=""></span>
+              </span>
+            </label>
+          </div>
 </template>
 
 <script setup>
@@ -104,6 +223,13 @@ const imageCreate = ref({
 </script>
 
 <style>
+.pai-border {
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(255, 255, 255, 0.08);
+    border-image: initial;
+}
+
 .switch {
   position: relative;
   display: inline-block;