Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <script src="/static/tailwind.js"></script> | |
| <script src="/static/flowbite.js" charset="utf-8"></script> | |
| <link rel="stylesheet" href="/static/style.css" data-precedence="high" /> | |
| <title>PicxAI</title> | |
| <meta name="theme-color" content="#27272a" media="(prefers-color-scheme: light)" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> | |
| <link rel="icon" href="/static/logo.png" sizes="any" type="image/png"> | |
| <meta property="og:site_name" content="PicxAI" /> | |
| <meta property="og:image" content="/static/logo.svg" /> | |
| <meta property="og:image:type" content="image/png" /> | |
| <meta property="og:image:alt" content="PicxAI" /> | |
| <meta property="og:title" content="PicxAI" /> | |
| <meta property="og:url" content="https://PicxAI.art" /> | |
| <meta property="og:description" content="The Stable Diffusion search engine" /> | |
| <meta name="description" content="The Stable Diffusion search engine" /> | |
| <meta property="twitter:card" content="summary_large_image" /> | |
| <meta property="twitter:url" content="https://PicxAI.art" /> | |
| <meta property="twitter:title" content="PicxAI" /> | |
| <meta property="twitter:description" content="The Stable Diffusion search engine" /> | |
| <meta property="twitter:image" content="/static/logo.svg" /> | |
| </head> | |
| <body> | |
| <div class="fixed bottom-0 sm:top-0 z-50 flex flex-row items-center justify-between bg-slate-900 backdrop-blur bg-opacity-80 border-t border-t-slate-700 sm:border-t-0 sm:border-b border-opacity-50 sm:border-b-slate-700 text-sm select-none" style="height:56px;width:100vw"> | |
| <div class="hidden sm:flex items-center cursor-pointer px-4 pl-6 left-0 h-full w-32 "> | |
| <svg width="320" height="157.30338319782783" viewBox="0 0 204.042 100.315"> | |
| <defs id="SvgjsDefs4055"> | |
| <linearGradient> | |
| <stop stop-color="#ffffff" offset="0"/> | |
| <stop stop-color="#ffffff" offset="1"/> | |
| </linearGradient> | |
| <linearGradient id="SvgjsLinearGradient4063"> | |
| <stop stop-color="#ffffff" offset="0"/> | |
| <stop stop-color="#ffffff" offset="1"/> | |
| </linearGradient> | |
| </defs> | |
| <g featurekey="nameFeature-0" transform="matrix(3.211992, 0, 0, 3.211992, 2.876412, -37.487316)" fill="url(#SvgjsLinearGradient4063)"> | |
| <path d="M8.32 28.8 c0.13332 0.98668 0.27344 2.0268 0.42012 3.1202 s0.27336 2.1466 0.38004 3.16 s0.17336 1.9333 0.20004 2.76 s0 1.46 -0.08 1.9 s-0.24 0.62668 -0.48 0.56 s-0.58668 -0.48668 -1.04 -1.26 c0 -1.84 -0.08668 -3.58 -0.26 -5.22 s-0.39332 -3.2867 -0.66 -4.94 c-0.61332 0 -1.2133 -0.1 -1.8 -0.3 s-1.12 -0.42668 -1.6 -0.68 s-0.86 -0.52 -1.14 -0.8 s-0.42 -0.51332 -0.42 -0.7 c0.18668 0.05332 0.48 0.12 0.88 0.2 s0.82 0.15332 1.26 0.22 s0.88 0.12 1.32 0.16 s0.79332 0.06 1.06 0.06 c-0.16 -1.2 -0.31332 -2.28 -0.46 -3.24 s-0.29336 -1.8933 -0.44004 -2.8 s-0.29336 -1.8334 -0.44004 -2.78 s-0.28668 -2.0067 -0.42 -3.18 c-0.82668 -0.34668 -1.66 -0.66668 -2.5 -0.96 s-1.6467 -0.62664 -2.42 -0.99996 c-0.05332 -0.16 -0.09332 -0.27332 -0.12 -0.34 s-0.033359 -0.12668 -0.020039 -0.18 s0.05332 -0.11332 0.12 -0.18 s0.18 -0.16668 0.34 -0.3 c0.21332 -0.05332 0.71332 0.033359 1.5 0.26004 s1.72 0.54668 2.8 0.96 s2.24 0.90664 3.48 1.48 s2.44 1.16 3.6 1.76 s2.2 1.2 3.12 1.8 s1.5933 1.1533 2.02 1.66 c0.4 0.32 0.67332 0.69332 0.82 1.12 s0.18668 0.86668 0.12 1.32 s-0.23336 0.90664 -0.50004 1.36 s-0.6 0.88 -1 1.28 c-0.4 0.37332 -0.87332 0.76664 -1.42 1.18 s-1.14 0.8 -1.78 1.16 s-1.3333 0.66668 -2.08 0.92 s-1.5334 0.40664 -2.36 0.45996 z M7.8 26.96 c1.2533 0 2.3668 -0.13336 3.3401 -0.40004 s1.7933 -0.64 2.46 -1.12 s1.1534 -1.04 1.46 -1.68 s0.40668 -1.3067 0.3 -2 c-0.05332 -0.53332 -0.41332 -1.0733 -1.08 -1.62 s-1.4734 -1.08 -2.42 -1.6 s-1.9467 -1.0267 -3 -1.52 s-1.9933 -0.96664 -2.82 -1.42 c0.05332 0.56 0.12664 1.1667 0.21996 1.82 s0.20664 1.4133 0.33996 2.28 s0.3 1.8867 0.5 3.06 s0.43332 2.5733 0.7 4.2 z M19.759999999999998 22.4 c0.26668 -0.05332 0.42664 0.10672 0.47996 0.48004 s0 0.65332 -0.16 0.84 c-0.29332 0.24 -0.48 0.44668 -0.56 0.62 s-0.26668 0.28664 -0.56 0.33996 c-0.16 -0.02668 -0.3 -0.033359 -0.42 -0.020039 s-0.22 -0.20668 -0.3 -0.66 c0.10668 -0.29332 0.27336 -0.58664 0.50004 -0.87996 s0.56668 -0.53332 1.02 -0.72 z M19.88 27.6 c0.13332 1.28 0.22676 2.6867 0.28008 4.22 s0.14664 3.14 0.27996 4.82 c0.10668 0.85332 0.21336 1.52 0.32004 2 s0.18668 0.93332 0.24 1.36 c-0.42668 0.08 -0.76 0.07332 -1 -0.02 s-0.46668 -0.20664 -0.68 -0.33996 c-0.05332 -0.42668 -0.11332 -1.1334 -0.18 -2.12 s-0.13336 -2.06 -0.20004 -3.22 s-0.13336 -2.2867 -0.20004 -3.38 s-0.12668 -1.96 -0.18 -2.6 c0.10668 -0.05332 0.19336 -0.13332 0.26004 -0.24 s0.14 -0.2 0.22 -0.28 s0.18668 -0.14668 0.32 -0.2 s0.30664 -0.05332 0.51996 0 z M29.2 28.28 c0.02668 0.16 -0.099924 0.31992 -0.37992 0.47992 s-0.63332 0.39332 -1.06 0.7 s-0.89336 0.71336 -1.4 1.22 s-0.96 1.1734 -1.36 2 c-0.42668 0.90668 -0.73336 1.6934 -0.92004 2.36 s-0.14668 1.4534 0.12 2.36 c0.08 0.18668 0.19332 0.35336 0.34 0.50004 s0.36668 0.23336 0.66 0.26004 c0.58668 -0.10668 1.1067 -0.25336 1.56 -0.44004 s0.88 -0.41336 1.28 -0.68004 s0.78668 -0.55336 1.16 -0.86004 s0.76 -0.62 1.16 -0.94 c0.58668 -0.56 1.0734 -1.0467 1.46 -1.46 s0.7 -0.76 0.94 -1.04 s0.44668 -0.48668 0.62 -0.62 s0.35332 -0.17332 0.54 -0.12 c-0.10668 0.24 -0.40668 0.74668 -0.9 1.52 s-1.1333 1.5933 -1.92 2.46 s-1.7 1.68 -2.74 2.44 s-2.16 1.2333 -3.36 1.42 c-0.48 -0.02668 -0.87332 -0.08 -1.18 -0.16 s-0.59336 -0.4 -0.86004 -0.96 c-0.32 -0.66668 -0.44 -1.4734 -0.36 -2.42 s0.28 -1.8867 0.6 -2.82 s0.72 -1.8 1.2 -2.6 s0.94668 -1.3867 1.4 -1.76 c0.64 -0.45332 1.2333 -0.73332 1.78 -0.84 s1.0867 -0.10668 1.62 0 z M32.199999999999996 25.759999999999998 c0.34668 0.45332 0.67324 0.89316 0.97992 1.3198 s0.61336 0.86668 0.92004 1.32 s0.63336 0.95332 0.98004 1.5 s0.74668 1.18 1.2 1.9 c0.29332 -0.77332 0.54664 -1.4933 0.75996 -2.16 s0.37332 -1.4267 0.48 -2.28 c0.05332 -0.21332 0.20664 -0.26664 0.45996 -0.15996 s0.46 0.2 0.62 0.28 c0.08 0.18668 0.09332 0.45336 0.04 0.80004 s-0.14 0.70668 -0.26 1.08 s-0.24668 0.72664 -0.38 1.06 s-0.22664 0.59332 -0.27996 0.78 c-0.05332 0.13332 -0.11332 0.28664 -0.18 0.45996 s-0.12668 0.35332 -0.18 0.54 l-0.24 0.64 c0.61332 1.4933 1.2 2.7933 1.76 3.9 s0.93332 1.94 1.12 2.5 c0 0.18668 -0.15332 0.22 -0.46 0.1 s-0.58 -0.28668 -0.82 -0.5 c-0.32 -0.66668 -0.66668 -1.3067 -1.04 -1.92 s-0.76 -1.3066 -1.16 -2.08 c-0.13332 0.37332 -0.3 0.80664 -0.5 1.3 s-0.40668 1 -0.62 1.52 s-0.42664 1.0333 -0.63996 1.54 s-0.4 0.97336 -0.56 1.4 c-0.21332 0.26668 -0.39332 0.43336 -0.54 0.50004 s-0.40668 0.033359 -0.78 -0.09996 c0.48 -1.1733 0.86 -2.1133 1.14 -2.82 s0.51332 -1.3067 0.7 -1.8 s0.34668 -0.96664 0.48 -1.42 s0.29332 -1.0266 0.48 -1.72 c-0.29332 -0.4 -0.62 -0.9 -0.98 -1.5 l-1.08 -1.8 l-1.04 -1.7 l-0.86 -1.16 c-0.18668 -0.26668 -0.24668 -0.57336 -0.18 -0.92004 s0.28668 -0.48 0.66 -0.4 z M45.08 32.4 c-0.37332 0 -0.79356 0.019609 -1.2602 0.059608 s-0.91336 0.06 -1.34 0.06 s-0.80668 -0.03332 -1.14 -0.1 s-0.54 -0.20668 -0.62 -0.42 c-0.16 -0.13332 -0.16 -0.28664 0 -0.45996 s0.30668 -0.32664 0.44 -0.45996 c0.50668 -0.05332 0.94668 -0.09332 1.32 -0.12 s0.72 -0.06 1.04 -0.1 s0.62668 -0.08 0.92 -0.12 s0.6 -0.08668 0.92 -0.14 c0.4 -1.4933 0.77332 -2.92 1.12 -4.28 s0.68 -2.7067 1 -4.04 s0.63332 -2.68 0.94 -4.04 s0.63336 -2.7867 0.98004 -4.28 c0.24 -0.34668 0.44 -0.52668 0.6 -0.54 s0.42668 -0.0067688 0.8 0.020039 c0.16 0.85332 0.28 1.5733 0.36 2.16 s0.15332 1.18 0.22 1.78 s0.14668 1.2667 0.24 2 s0.22 1.66 0.38 2.78 c0.10668 1.1467 0.25336 2.2734 0.44004 3.38 s0.34668 2.2467 0.48 3.42 c0.69332 -0.10668 1.36 -0.22 2 -0.34 s1.2067 -0.22668 1.7 -0.32 s0.89332 -0.16664 1.2 -0.21996 s0.46 -0.06664 0.46 -0.039961 c0.08 0.24 -0.04668 0.47332 -0.38 0.7 s-0.76664 0.45336 -1.3 0.68004 s-1.1066 0.44 -1.72 0.64 s-1.16 0.38 -1.64 0.54 c0.05332 0.50668 0.14664 1.14 0.27996 1.9 s0.27332 1.5667 0.42 2.42 s0.3 1.7133 0.46 2.58 s0.3 1.6534 0.42 2.36 s0.20668 1.2934 0.26 1.76 s0.05332 0.72668 0 0.78 c-0.45332 0.05332 -0.78 0.0067688 -0.98 -0.14004 s-0.44668 -0.27336 -0.74 -0.38004 c-0.21332 -1.76 -0.48 -3.5533 -0.8 -5.38 s-0.57332 -3.6467 -0.76 -5.46 c-0.61332 0.13332 -1.3933 0.31332 -2.34 0.54 s-1.9267 0.42 -2.94 0.58 c-0.16 0.58668 -0.30668 1.24 -0.44 1.96 s-0.26664 1.4067 -0.39996 2.06 s-0.24664 1.24 -0.33996 1.76 s-0.18 0.86 -0.26 1.02 c-0.13332 0.13332 -0.36664 0.22 -0.69996 0.26 s-0.60664 -0.04668 -0.81996 -0.26 c0 -0.16 0.06 -0.52668 0.18 -1.1 s0.26 -1.2066 0.42 -1.9 s0.32668 -1.3666 0.5 -2.02 s0.31332 -1.1666 0.42 -1.54 z M46.9996 30.4396 c0.4 -0.08 0.84004 -0.16641 1.32 -0.25973 s0.92668 -0.19332 1.34 -0.3 s0.77332 -0.19336 1.08 -0.26004 s0.48668 -0.11336 0.54 -0.14004 c-0.05332 -0.58668 -0.1 -1.0734 -0.14 -1.46 s-0.08 -0.79336 -0.12 -1.22 s-0.08668 -0.92668 -0.14 -1.5 s-0.13332 -1.3533 -0.24 -2.34 c-0.21332 -1.68 -0.36664 -2.9333 -0.45996 -3.76 s-0.18 -1.0934 -0.26 -0.80004 c-0.37332 1.44 -0.7 2.6867 -0.98 3.74 s-0.53332 2.0266 -0.76 2.92 s-0.43336 1.7666 -0.62004 2.62 s-0.37336 1.7733 -0.56004 2.76 z M60.56 22.4 c0.26668 -0.05332 0.42664 0.10672 0.47996 0.48004 s0 0.65332 -0.16 0.84 c-0.29332 0.24 -0.48 0.44668 -0.56 0.62 s-0.26668 0.28664 -0.56 0.33996 c-0.16 -0.02668 -0.3 -0.033359 -0.42 -0.020039 s-0.22 -0.20668 -0.3 -0.66 c0.10668 -0.29332 0.27336 -0.58664 0.50004 -0.87996 s0.56668 -0.53332 1.02 -0.72 z M60.68 27.6 c0.13332 1.28 0.22676 2.6867 0.28008 4.22 s0.14664 3.14 0.27996 4.82 c0.10668 0.85332 0.21336 1.52 0.32004 2 s0.18668 0.93332 0.24 1.36 c-0.42668 0.08 -0.76 0.07332 -1 -0.02 s-0.46668 -0.20664 -0.68 -0.33996 c-0.05332 -0.42668 -0.11332 -1.1334 -0.18 -2.12 s-0.13336 -2.06 -0.20004 -3.22 s-0.13336 -2.2867 -0.20004 -3.38 s-0.12668 -1.96 -0.18 -2.6 c0.10668 -0.05332 0.19336 -0.13332 0.26004 -0.24 s0.14 -0.2 0.22 -0.28 s0.18668 -0.14668 0.32 -0.2 s0.30664 -0.05332 0.51996 0 z"/> | |
| </g> | |
| </svg> | |
| </div> | |
| <div class="flex relative items-center h-full -mt-1 w-full sm:w-auto"> | |
| <div style="height:32px;top:15px;display:absolute" class="absolute bg-slate-700 rounded"></div> | |
| <div onclick="javascript:window.location.href = '/'" class="flex flex-row items-center cursor-pointer h-full py-1.5 pb-0 px-2 justify-center transition-all flex-1" style="width:80px;z-index:2;opacity:0.5"> | |
| <div class="relative sm:flex justify-center hidden w-full"> | |
| <div class="absolute w-full" style="border-bottom:2.5px"></div> | |
| Home | |
| </div> | |
| <div class="relative flex items-center justify-center text-xl sm:hidden w-full"> | |
| <div class="absolute w-full" style="border-bottom:2.5px"></div> | |
| <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> | |
| <polyline points="9 22 9 12 15 12 15 22"></polyline> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="flex flex-row items-center cursor-pointer h-full py-1.5 pb-0 px-2 justify-center transition-all flex-1" style="width:80px;z-index:2;opacity:1"> | |
| <div class="relative sm:flex justify-center hidden w-full"> | |
| <div class="absolute w-full" style="border-bottom:2.5px solid #6366f1;bottom:-17px"></div> | |
| Generate | |
| </div> | |
| <div class="relative flex items-center justify-center text-xl sm:hidden w-full"> | |
| <div class="absolute w-full" style="border-bottom:2.5px solid #6366f1;bottom:-17px"></div> | |
| <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="12" cy="12" r="10"></circle> | |
| <line x1="14.31" y1="8" x2="20.05" y2="17.94"></line> | |
| <line x1="9.69" y1="8" x2="21.17" y2="8"></line> | |
| <line x1="7.38" y1="12" x2="13.12" y2="2.06"></line> | |
| <line x1="9.69" y1="16" x2="3.95" y2="6.06"></line> | |
| <line x1="14.31" y1="16" x2="2.83" y2="16"></line> | |
| <line x1="16.62" y1="12" x2="10.88" y2="21.94"></line> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="flex flex-row items-center cursor-pointer h-full py-1.5 pb-0 px-2 justify-center transition-all flex-1" style="width:80px;z-index:2;opacity:0.5"> | |
| <div class="relative sm:flex justify-center hidden w-full"> | |
| <div class="absolute w-full" style="border-bottom:2.5px solid transparent;bottom:-17px"></div> | |
| History | |
| </div> | |
| <div class="relative flex items-center justify-center text-xl sm:hidden w-full"> | |
| <div class="absolute w-full" style="border-bottom:2.5px solid transparent;bottom:-17px"></div> | |
| <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M13.507 12.324a7 7 0 0 0 .065-8.56A7 7 0 0 0 2 4.393V2H1v3.5l.5.5H5V5H2.811a6.008 6.008 0 1 1-.135 5.77l-.887.462a7 7 0 0 0 11.718 1.092zm-3.361-.97l.708-.707L8 7.792V4H7v4l.146.354 3 3z"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="flex flex-row items-center cursor-pointer h-full py-1.5 pb-0 px-2 justify-center transition-all flex-1" style="width:80px;z-index:2;opacity:0.5"> | |
| <div class="relative sm:flex justify-center hidden w-full"> | |
| <div class="absolute w-full" style="border-bottom:2.5px solid transparent;bottom:-17px"></div> | |
| Likes | |
| </div> | |
| <div class="relative flex items-center justify-center text-xl sm:hidden w-full"> | |
| <div class="absolute w-full" style="border-bottom:2.5px solid transparent;bottom:-17px"></div> | |
| <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <div></div> | |
| </div> | |
| <div class="mb-0 sm:mb-0 sm:mt-16 overflow-hidden"> | |
| <div class="h-fit w-screen"> | |
| <div class="flex w-full justify-center"> | |
| <div class="mt-0 flex w-full max-w-[1300px] flex-col items-center px-2 pr-6 sm:mt-4 md:px-10 md:py-4 lg:px-16"> | |
| <div class="flex w-full flex-col-reverse md:flex-row"> | |
| <div class="flex-1"> | |
| <div class="mt-6 flex justify-between px-2 pb-1 text-xs opacity-40 sm:mt-0"> | |
| <p class="">Describe your image</p> | |
| <p class="translate-y-1 opacity-0 transition-all">Making variations ⤵</p> | |
| </div> | |
| <div class="relative"> | |
| <textarea id="prompt" autocomplete="off" class="w-full overflow-y-hidden rounded-xl border border-slate-700 bg-slate-700 bg-opacity-60 py-2.5 pl-4 pr-12 text-sm leading-relaxed shadow placeholder:opacity-50 focus:outline-none focus:ring-1 focus:ring-indigo-700" placeholder="A steampunk teddy bear vending machine" style="height: 90.6px !important;"></textarea> | |
| <div class="absolute top-2 right-2"><img class="h-8 w-8 cursor-pointer rounded-md object-cover transition-all ease-in-out hidden" src="https://lexica-serve-encoded-images2.sharif.workers.dev/sm2/251cac80-ea5f-415f-a843-4c3fa0d68d43" alt="Source image" /></div> | |
| </div> | |
| <p class="mt-2 pl-2 pb-1 text-xs opacity-40">Negative prompt</p> | |
| <textarea id="negetivePrompt" autocomplete="off" class="w-full overflow-y-hidden rounded-xl border border-slate-700 bg-slate-700 bg-opacity-60 px-4 py-2.5 text-sm leading-relaxed shadow placeholder:opacity-50 focus:outline-none focus:ring-1 focus:ring-indigo-700" placeholder="Describe things to exclude" style="height: 90.6px !important;"></textarea> | |
| <div class="flex w-full items-center justify-center md:justify-end"> | |
| <div class="transition-all" id="generate-button"> | |
| <button onclick="genrate(this)" class="text-md mt-2 cursor-pointer rounded-full bg-gradient-to-t from-indigo-900 via-indigo-900 to-indigo-800 px-8 py-2 text-sm shadow drop-shadow transition-all hover:brightness-110 active:scale-95">Generate</button> | |
| </div> | |
| </div> | |
| <div id="loader" class="hidden w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mt-4"> | |
| <div id="loaderBar" class="bg-blue-600 h-2.5 rounded-full transition-all duration-700" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4 ml-0 w-full sm:max-w-[300px] md:mt-0 md:ml-8"> | |
| <div class="rounded-lg border border-slate-700 px-5 py-4 pb-6 h-fit shadow-md transition-all duration-300"> | |
| <div class="mt-1"> | |
| <div class="mb-3 flex select-none items-center justify-start text-xs opacity-50"> | |
| <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="mr-2 text-sm" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg> | |
| <p>Dimensions</p> | |
| </div> | |
| <span dir="ltr" data-orientation="horizontal" aria-disabled="false" aria-label="Dimensions" class="relative flex h-5 w-full cursor-pointer touch-none select-none items-center" style="--radix-slider-thumb-transform:translateX(-50%);"> | |
| <input onchange="dimensionChanger(this)" onmousemove="dimensionChanger(this)" onmouseleave="javascript:document.getElementById('demoDim').classList.add('hidden')" type="range" value="5" min="1" max="9" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer "> | |
| </span> | |
| <div id="demoDim" class="z-10 hidden absolute flex pointer-events-none items-center justify-center bg-slate-900 border border-opacity-50 border-slate-700 rounded-md shadow-lg drop-shadow-md mt-10 w-[200px] h-[200px] mx-auto transition-all duration-300 origin-center"> | |
| <div class="absolute h-3 w-3 border-t-2 border-l-2 top-0 opacity-20 left-0 m-2"></div> | |
| <div class="absolute h-3 w-3 border-t-2 border-r-2 top-0 opacity-20 right-0 m-2"></div> | |
| <div class="absolute h-3 w-3 border-b-2 border-l-2 opacity-20 bottom-0 left-0 m-2"></div> | |
| <div class="absolute h-3 w-3 border-b-2 border-r-2 opacity-20 bottom-0 right-0 m-2"></div> | |
| <div class="flex flex-col items-center justify-center relative"> | |
| <p id="demoTextDim" class="text-sm proportional-nums slashed-zero text-white">640 × 640</p> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex w-full select-none justify-between text-base"> | |
| <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="opacity-40" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path> | |
| <path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13zm13 1a.5.5 0 0 1 .5.5v6l-3.775-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12v.54A.505.505 0 0 1 1 12.5v-9a.5.5 0 0 1 .5-.5h13z"></path> | |
| </svg> | |
| <div id="rangeTextDim" class="flex items-center text-xs text-slate-200 transition-all" style="opacity: 1;">640 × 640</div> | |
| <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="opacity-40" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M8.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path> | |
| <path d="M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v8l-2.083-2.083a.5.5 0 0 0-.76.063L8 11 5.835 9.7a.5.5 0 0 0-.611.076L3 12V2z"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex flex-col" style="position: relative;"> | |
| <button onclick="jabascript:document.getElementById('advanceMenu').classList.toggle('scale-y-0');document.getElementById('advanceMenu').classList.toggle('h-0')" class="flex cursor-pointer select-none items-center justify-start pt-2 text-xs opacity-50 transition-all hover:opacity-100"> | |
| <div class="flex items-center justify-center" style="transform: none;"> | |
| <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"></path></svg> | |
| </div> | |
| <p class="ml-2">Advanced settings</p> | |
| </button> | |
| <div id="advanceMenu" class="h-fit scale-y-0 h-0 transition-all duration-300 origin-top"> | |
| <div class="mt-1 mb-4 w-full flex-1"> | |
| <div class="flex items-center justify-between text-sm"> | |
| <p class="flex select-none items-center justify-center text-xs opacity-40"> | |
| <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="mr-2 text-sm" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> | |
| <line x1="4" y1="21" x2="4" y2="14"></line> | |
| <line x1="4" y1="10" x2="4" y2="3"></line> | |
| <line x1="12" y1="21" x2="12" y2="12"></line> | |
| <line x1="12" y1="8" x2="12" y2="3"></line> | |
| <line x1="20" y1="21" x2="20" y2="16"></line> | |
| <line x1="20" y1="12" x2="20" y2="3"></line> | |
| <line x1="1" y1="14" x2="7" y2="14"></line> | |
| <line x1="9" y1="8" x2="15" y2="8"></line> | |
| <line x1="17" y1="16" x2="23" y2="16"></line></svg | |
| >Guidance scale | |
| </p> | |
| <h1 id="guidanceScale" class="-mr-1 flex w-20 cursor-text select-none justify-end rounded py-2 pr-0.5">7 </h1> | |
| </div> | |
| <span dir="ltr" data-orientation="horizontal" aria-disabled="false" aria-label="Guidance scale" class="relative flex h-5 w-full cursor-pointer touch-none select-none items-center" style="--radix-slider-thumb-transform:translateX(-50%);"> | |
| <input id="guidanceScaleRange" onmousemove="javascript:document.getElementById('guidanceScale').innerText = document.getElementById('guidanceScaleRange').value" type="range" value="7" min="2" max="13" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer "> | |
| </span> | |
| <div class="mt-1 flex w-full select-none justify-between text-xs opacity-40"> | |
| <p>Less contrast</p> | |
| <p>More contrast</p> | |
| </div> | |
| </div> | |
| <div class="mt-1 flex w-full select-none flex-col items-start text-sm"> | |
| <div class="group mt-3 flex space-x-2"> | |
| <input id="fixHighRes" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-transparent border-gray-300 rounded focus:ring-0"> | |
| <p class="text-xs text-white opacity-70 group-hover:opacity-90">Fix double heads (slow, crops in)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 w-full max-w-[800px] items-center px-4 pl-5 md:px-5" style="min-height: 1px; position: relative;"></div> | |
| <div class="flex w-full flex-1 flex-col items-center justify-center" style="position: relative;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="gridData" class="grid grid-cols-2 sm:grid-cols-4 w-[80%] mx-[10%] mb-20"> | |
| </div> | |
| <script> | |
| let imageData = `<div class="w-full"> | |
| <div class="group relative m-0.5 block select-none overflow-hidden rounded-lg z-10" style="transition: opacity 500ms ease 0s;"> | |
| <div class="line-clamp pointer-events-none absolute inset-0 z-10 block px-2 px-2 pb-2 text-sm text-slate-100 opacity-0 transition-opacity group-hover:opacity-100" style="background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.1) 100%);"> | |
| <div class="flex h-full flex-shrink items-end shadow-md"> | |
| <div class="flex flex-col"> | |
| <p class="text-sm leading-snug leading-snug text-white opacity-100" style="overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">$$prompt1$$</p> | |
| <p class="opacity-60 leading-snug text-sm" style="overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">$$prompt2$$</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute top-2 left-0 z-20 mb-1 flex w-full justify-between px-2 text-xs text-slate-100 opacity-0 transition-opacity group-hover:opacity-100"> | |
| <button class="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-slate-900 bg-opacity-50 text-lg transition-opacity hover:bg-opacity-100"> | |
| <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="11" cy="11" r="8"></circle> | |
| <line x1="21" y1="21" x2="16.65" y2="16.65"></line> | |
| </svg> | |
| </button> | |
| <div class="flex flex-col space-y-2"> | |
| <button onclick="heartAnimation(this)" class="text-md flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-slate-900 bg-opacity-70 transition-all hover:bg-opacity-100 active:scale-90"> | |
| <div class="scale-x-[200%] scale-y-[70%] py-3"> | |
| <img class="heart" src="/static/heartAnim/1.png" alt=""> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| <img alt="" class="w-full h-fit rounded-lg" src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/%%imgId%%" /> | |
| </div> | |
| </div>` | |
| let demoImageSize = [200,200] | |
| let imageDimension = [640,640] | |
| window.loaderBarwidth = 0 | |
| if(localStorage.getItem("dataPrompt") != null) | |
| { | |
| document.getElementById("prompt").value = localStorage.getItem("dataPrompt") | |
| document.getElementById("negetivePrompt").value = localStorage.getItem("dataNegative") | |
| localStorage.removeItem("dataPrompt"); | |
| localStorage.removeItem("dataNegative"); | |
| } | |
| function dimensionChanger(element) | |
| { | |
| data = [[768,512],[704,512],[640,512],[576,512],[640,640],[512,576],[512,640],[512,704],[512,768]] | |
| index = element.value - 1 | |
| document.getElementById("demoDim").classList.remove("hidden") | |
| document.getElementById("demoTextDim").innerText = data[index][0] + " x " + data[index][1] | |
| document.getElementById("rangeTextDim").innerText = data[index][0] + " x " + data[index][1] | |
| document.getElementById("demoDim").classList.remove("h-["+demoImageSize[0]+"px]") | |
| document.getElementById("demoDim").classList.remove("w-["+demoImageSize[1]+"px]") | |
| height = data[index][0] * 200 / 640 | |
| width = data[index][1] * 200 / 640 | |
| imageDimension = [data[index][0],data[index][1]] | |
| demoImageSize = [width,height] | |
| document.getElementById("demoDim").classList.add("h-["+demoImageSize[0]+"px]") | |
| document.getElementById("demoDim").classList.add("w-["+demoImageSize[1]+"px]") | |
| } | |
| function genrate(element) | |
| { | |
| prompt = document.getElementById("prompt").value | |
| negativePrompt = document.getElementById("negetivePrompt").value | |
| guidanceScale = document.getElementById("guidanceScaleRange").value | |
| enableHiresFix = document.getElementById("fixHighRes").checked | |
| if(prompt != "") | |
| { | |
| document.getElementById('loader').classList.toggle('hidden') | |
| document.getElementById('loaderBar').style.width = '0%' | |
| loaderBarinterval = setInterval(function () { | |
| document.getElementById('loaderBar').style.width = (window.loaderBarwidth + (100 - window.loaderBarwidth)/2).toString()+"%" | |
| window.loaderBarwidth += (100 - window.loaderBarwidth)/2 | |
| if(window.loaderBarwidth>95) | |
| { | |
| document.getElementById('loaderBar').style.width = "50%" | |
| window.loaderBarwidth = 50 | |
| } | |
| }, 2000); | |
| element.disabled = true | |
| element.innerHTML = "Genrating ..." | |
| let formData = new FormData(); | |
| formData.append('prompt',prompt) | |
| formData.append('negativePrompt',negativePrompt) | |
| formData.append('guidanceScale',guidanceScale) | |
| formData.append('width',imageDimension[0]) | |
| formData.append('height',imageDimension[1]) | |
| formData.append('enableHiresFix',enableHiresFix) | |
| let fetchRes = fetch( | |
| "/diffuser",{ | |
| method: "POST", | |
| body: formData | |
| }) | |
| fetchRes.then(res =>res.json()) | |
| .then(d => { | |
| temphtml = "" | |
| if(d.hasOwnProperty("error")) | |
| { | |
| element.disabled = false | |
| element.innerHTML = "Genrate" | |
| alert(d["error"]) | |
| clearInterval(loaderBarinterval); | |
| document.getElementById('loader').classList.toggle('hidden') | |
| document.getElementById('loaderBar').style.width = '0%' | |
| window.loaderBarwidth = 0 | |
| } | |
| else if(JSON.parse(d).hasOwnProperty("isBannedTerms")) | |
| { | |
| element.disabled = false | |
| element.innerHTML = "Genrate" | |
| alert(JSON.parse(d)["bannedTerms"]+" is a Banned Term") | |
| clearInterval(loaderBarinterval); | |
| document.getElementById('loader').classList.toggle('hidden') | |
| document.getElementById('loaderBar').style.width = '0%' | |
| window.loaderBarwidth = 0 | |
| } | |
| else | |
| { | |
| data = JSON.parse(d) | |
| for(let i in data['images']) | |
| { | |
| temphtml += imageData.replace("%%imgId%%",data['images'][i]['id']).replace("$$prompt1$$",data['prompt']['prompt'].split(",")[0]).replace("$$prompt2$$",data['prompt']['prompt'].split(",")[1]) | |
| } | |
| temphtml += document.getElementById('gridData').innerHTML | |
| document.getElementById('gridData').innerHTML = temphtml | |
| element.disabled = false | |
| element.innerHTML = "Genrate" | |
| clearInterval(loaderBarinterval); | |
| document.getElementById('loader').classList.toggle('hidden') | |
| document.getElementById('loaderBar').style.width = '0%' | |
| window.loaderBarwidth = 0 | |
| } | |
| }) | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |