misc fixes (#138)

* chore: add new artist tags * feat: show unavailable models in model info panel * feat: add swap dimensions button, closes #137 * chore: add more artist tags * refactor: cleanup toast notification code * refactor: fix server update modal and refactor pending page virtual list * stash work * feat: enable community showcase * chore: update changelog * chore: misc fixes
daveschumaker · Aug 5, 2023 · fd3e00e · fd3e00e
1 parent 1cb32e4
commit fd3e00e
Show file tree

Hide file tree

Showing 31 changed files with 583 additions and 368 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,14 @@
+# 2023.08.04
+
+- Fix: Issue with multi-denoise still being active, even if you are no longer using img2img mode. Thanks to Sidorok for reporting on Discord.
+- UI: Add a quick swap dimension button near the image settings drop down. Thanks to Anonymous Derpling for the suggestion.
+- UI: You can now remove unavailable / re-named models from your favorites list using the model info popup on the create page.
+- UI: Fix "server updated" modal being displayed behind some content (this will take affect after the next update).
+- Feature: Brand new, swanky ["Community Showcase"](https://tinybots.net/artbot/showcase), featuring neat images that have been publicly shared by ArtBot users.
+
 # 2023.08.03
 
-- Fix: When using multiple values (e.g., multi-guidance), the same value would be passed multiple times. Thans to OxOnWater for reporting this on the contact form.
+- Fix: When using multiple values (e.g., multi-guidance), the same value would be passed multiple times. Thanks to OxOnWater for reporting this on the contact form.
 - UI feature: Added a new adjustable step count button to some number fields (number of images and steps). Thanks to Anonymous Derpling for the suggestion.
 - Fix: Unable to load details for some LoRAs. Thanks to Memetic for reporting this on Discord.
 - Fix: Issue with sending incorrect parameter when trying to inpaint. Thanks to jskaall for reporting this on Discord.

diff --git a/_constants/index.ts b/_constants/index.ts
@@ -5,6 +5,7 @@ export const ANON_API_KEY = '0000000000'
 export const HORDE_PROD = 'https://aihorde.net'
 export const HORDE_DEV = 'https://dev.aihorde.net'
 export const RATING_API = 'https://ratings.aihorde.net'
+export const FOOTER_HEIGHT_PX = 62
 export const CREATE_NEW_JOB_INTERVAL = 1500 // ms between new job requests
 export const RATE_IMAGE_CUTOFF_SEC = 900
 export const MAX_CONCURRENT_JOBS_ANON = AppSettings.get('maxConcurrency') || 5

diff --git a/app/(default-route-group)/showcase/page.tsx b/app/(default-route-group)/showcase/page.tsx
@@ -0,0 +1,37 @@
+import { baseHost, basePath } from 'BASE_PATH'
+import ShowcasePage from 'app/_pages/ShowcasePage'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Community Showcase - ArtBot for Stable Diffusion',
+  openGraph: {
+    title: 'ArtBot - Community Showcase',
+    images: [`${baseHost}${basePath}/robot_showcase.jpg`],
+    description:
+      'Get inspiration and discover what other ArtBot fans have created and publicly shared with the ArtBot Showcase.'
+  },
+  twitter: {
+    images: `${baseHost}${basePath}/robot_showcase.jpg`
+  }
+}
+
+async function getPageData() {
+  try {
+    const resp = await fetch(
+      `${process.env.NEXT_SHORTLINK_SERVICE}/api/v1/images/public/list/0`,
+      {
+        method: 'GET'
+      }
+    )
+    const imageList = (await resp.json()) || []
+    return imageList
+  } catch (err) {
+    console.log(`getPageData error?`, err)
+    return []
+  }
+}
+
+export default async function Page() {
+  const imageList = await getPageData()
+  return <ShowcasePage images={imageList} />
+}
diff --git a/app/_components/ContentWrapper/contentWrapper.module.css b/app/_components/ContentWrapper/contentWrapper.module.css
@@ -2,11 +2,13 @@
   margin-top: var(--headerNav-height);
   margin-bottom: 68px;
   padding: 8px 16px;
+  position: relative;
 }
 
 @media (min-width: 640px) {
   .ContentWrapper {
     margin-bottom: 0;
+    min-height: calc(100vh - 128px);
   }
 }
 

diff --git a/app/_components/Footer/component.module.css b/app/_components/Footer/component.module.css
@@ -1,7 +1,6 @@
 .Footer {
   display: none;
   margin-top: auto;
-  margin-bottom: 16px;
   padding-top: 16px;
   text-align: center;
   width: 100%;
@@ -17,7 +16,6 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    margin-bottom: 12px;
     padding-bottom: 12px;
     padding-top: 16px;
   }

diff --git a/app/_modules/AdvancedOptionsPanel/ImageOrientationOptions/index.tsx b/app/_modules/AdvancedOptionsPanel/ImageOrientationOptions/index.tsx
@@ -189,6 +189,18 @@ const ImageOrientationOptions = ({ input, setInput }: GetSetPromptInput) => {
           {input.width} w x {input.height} h
         </FlexRow>
         <FlexRow gap={4} style={{ justifyContent: 'flex-end' }}>
+          <Button
+            title="Swap dimensions"
+            onClick={() => {
+              setInput({
+                height: input.width,
+                orientationType: 'custom',
+                width: input.height
+              })
+            }}
+          >
+            <IconSwitch2 stroke={1.5} />
+          </Button>
           <Button onClick={() => setShowCustomDimensions(true)}>
             <IconRuler stroke={1.5} />
           </Button>

diff --git a/app/_modules/MenuOptions/index.tsx b/app/_modules/MenuOptions/index.tsx
@@ -13,7 +13,8 @@ import {
   IconRobot,
   IconSettings,
   IconStars,
-  IconZoomQuestion
+  IconZoomQuestion,
+  IconLayoutDashboard
 } from '@tabler/icons-react'
 import styles from './menu.module.css'
 import { CSSProperties } from 'react'
@@ -76,6 +77,15 @@ const MenuOptions = ({
           Live Paint
         </div>
       </div>
+      <div
+        className={styles.MenuOption}
+        onClick={() => {
+          navigateToLink('/showcase')
+        }}
+      >
+        <IconLayoutDashboard stroke={1.5} />
+        Showcase
+      </div>
       <div
         className={styles.MenuOption}
         onClick={() => {

diff --git a/app/_modules/ModelDetailsList/index.tsx b/app/_modules/ModelDetailsList/index.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import React, { useEffect } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { toast } from 'react-toastify'
 
 import { trackEvent } from 'api/telemetry'
 import Panel from 'app/_components/Panel'
@@ -19,6 +18,7 @@ import AppSettings from 'models/AppSettings'
 import { useStore } from 'statery'
 import ExternalLinkIcon from 'components/icons/ExternalLinkIcon'
 import { baseHost, basePath } from 'BASE_PATH'
+import { showSuccessToast } from 'utils/notificationUtils'
 
 const StyledLinkIcon = styled(LinkIcon)`
   cursor: pointer;
@@ -176,17 +176,7 @@ const ModelDetailsList = ({ availableModels, modelDetails }: any) => {
                     navigator?.clipboard
                       ?.writeText(`${baseHost}${basePath}/info/models#${name}`)
                       .then(() => {
-                        toast.success('Model URL copied!', {
-                          pauseOnFocusLoss: false,
-                          position: 'top-center',
-                          autoClose: 2500,
-                          hideProgressBar: false,
-                          closeOnClick: true,
-                          pauseOnHover: false,
-                          draggable: false,
-                          progress: undefined,
-                          theme: 'light'
-                        })
+                        showSuccessToast({ message: 'Model URL copied!' })
                       })
                   }}
                 >

diff --git a/app/_modules/ModelsInfoModal/index.tsx b/app/_modules/ModelsInfoModal/index.tsx
@@ -114,6 +114,17 @@ const ModelsInfoModal = ({ input }: { input: DefaultPromptInput }) => {
     }
   })
 
+  // Add favorite models that might not be available anymore.
+  if (filterMode === 'favorites') {
+    for (const key in favModels) {
+      if (filtered.indexOf(key) === -1) {
+        filtered.push(key)
+      }
+    }
+
+    filtered.sort()
+  }
+
   const filteredNames = filtered.filter((name) => {
     if (!inputFilter) return true
     return name.toLowerCase().indexOf(inputFilter.toLowerCase()) >= 0
@@ -273,7 +284,7 @@ const ModelsInfoModal = ({ input }: { input: DefaultPromptInput }) => {
             {!activeModel && (
               <div>Select a model to display detailed information.</div>
             )}
-            {activeModel && !activeModelDetails && (
+            {activeModel && !activeModelDetails && !activeModelStats.count && (
               <>
                 <FlexRow style={{ justifyContent: 'space-between' }}>
                   <div className={styles.ModelInfoName}>{activeModel}</div>
@@ -301,16 +312,55 @@ const ModelsInfoModal = ({ input }: { input: DefaultPromptInput }) => {
                     </div>
                   </FlexRow>
                 </FlexRow>
-                <div className={styles.ModelInfoStats}>
-                  Workers: {activeModelStats.count}
-                  {' / '}
-                  Requests: {activeModelStats.jobs}
-                </div>
-                <div className={styles.ModelInfoDescription}>
-                  No information is available for this model.
+                <div
+                  className={styles.ModelInfoDescription}
+                  style={{ paddingTop: '12px' }}
+                >
+                  No details exist for this model. It may not be available on
+                  the AI Horde.
                 </div>
               </>
             )}
+            {activeModel &&
+              !activeModelDetails &&
+              activeModelStats.count > 0 && (
+                <>
+                  <FlexRow style={{ justifyContent: 'space-between' }}>
+                    <div className={styles.ModelInfoName}>{activeModel}</div>
+                    <FlexRow
+                      gap={8}
+                      style={{
+                        cursor: 'pointer',
+                        justifyContent: 'flex-end',
+                        width: 'unset'
+                      }}
+                    >
+                      <div onClick={() => handleHide(activeModel)}>
+                        {hiddenModels[activeModel] ? (
+                          <IconEyeOff size={28} style={{ color: 'red' }} />
+                        ) : (
+                          <IconEyeOff size={28} stroke={1.5} />
+                        )}
+                      </div>
+                      <div onClick={() => handleFav(activeModel)}>
+                        {favModels[activeModel] ? (
+                          <IconHeartFilled size={28} style={{ color: 'red' }} />
+                        ) : (
+                          <IconHeart size={28} stroke={1.5} />
+                        )}
+                      </div>
+                    </FlexRow>
+                  </FlexRow>
+                  <div className={styles.ModelInfoStats}>
+                    Workers: {activeModelStats.count}
+                    {' / '}
+                    Requests: {activeModelStats.jobs}
+                  </div>
+                  <div className={styles.ModelInfoDescription}>
+                    No information is available for this model.
+                  </div>
+                </>
+              )}
             {activeModel && activeModelDetails && (
               <>
                 <FlexRow style={{ justifyContent: 'space-between' }}>

diff --git a/app/_pages/ControlNetPage/index.tsx b/app/_pages/ControlNetPage/index.tsx
@@ -26,7 +26,6 @@ import { useRouter, useSearchParams } from 'next/navigation'
 import Head from 'next/head'
 import { useEffectOnce } from 'hooks/useEffectOnce'
 import AppSettings from 'models/AppSettings'
-import { toast } from 'react-toastify'
 import { getInputCache } from 'store/inputCache'
 import { kudosCostV2 } from 'utils/kudosCost'
 import ControlNetOptions from 'app/_modules/AdvancedOptionsPanel/ControlNetOptions'
@@ -46,6 +45,7 @@ import Guidance from 'app/_modules/AdvancedOptionsPanel/Guidance'
 import Denoise from 'app/_modules/AdvancedOptionsPanel/Denoise'
 import ClipSkip from 'app/_modules/AdvancedOptionsPanel/ClipSkip'
 import { baseHost, basePath } from 'BASE_PATH'
+import { showSuccessToast } from 'utils/notificationUtils'
 
 // Kind of a hacky way to persist output of image over the course of a session.
 let cachedImageDetails = {}
@@ -182,20 +182,9 @@ const ControlNetPage = () => {
     if (!AppSettings.get('stayOnCreate')) {
       router.push('/pending')
     } else {
-      toast.success(
-        `${totalImagesRequested > 1 ? 'Images' : 'Image'} requested!`,
-        {
-          pauseOnFocusLoss: false,
-          position: 'top-center',
-          autoClose: 2500,
-          hideProgressBar: false,
-          closeOnClick: true,
-          pauseOnHover: false,
-          draggable: false,
-          progress: undefined,
-          theme: 'light'
-        }
-      )
+      showSuccessToast({
+        message: `${totalImagesRequested > 1 ? 'Images' : 'Image'} requested!`
+      })
 
       setErrors({ SOURCE_IMAGE_EMPTY: false })
       setErrors({ PROMPT_EMPTY: false })

diff --git a/app/_pages/CreatePage/PromptInput/StyleTagsDropdown/tags.ts b/app/_pages/CreatePage/PromptInput/StyleTagsDropdown/tags.ts
@@ -157,6 +157,7 @@ const tags = [
       'by Alex Grey',
       'by Alexander Jansson',
       'by Alphonse Mucha',
+      'by Andre Kohn',
       'by Andy Warhol',
       'by Artgerm',
       'by Asaf Hanuka',
@@ -180,6 +181,7 @@ const tags = [
       'by Frida Kahlo',
       'by Gediminas Pranckevicius',
       `by Georgia O'Keeffe`,
+      'by Greg Hildebrandt',
       'by Greg Rutkowski',
       'by Gustave Doré',
       'by Gustave Klimt',
@@ -199,14 +201,18 @@ const tags = [
       'by Katsushika Hokusai',
       'by Kim Tschang Yeul',
       'by Ko Young Hoon',
+      'by Leng Jun',
       'by Leonardo da Vinci',
       'by Lisa Frank',
+      'by Luis Royo',
       'by M.C. Escher',
+      'by Magali Villeneuve',
       'by Mahmoud Saïd',
       'by Makoto Shinkai',
       'by Marc Simonetti',
       'by Mark Brooks',
       'by Michelangelo',
+      'by Naoto Hattori',
       'by Pablo Picasso',
       'by Paul Klee',
       'by Peter Mohrbacher',

diff --git a/app/_pages/CreatePage/createPage.controller.ts b/app/_pages/CreatePage/createPage.controller.ts
@@ -4,7 +4,6 @@ import CreateImageRequest from 'models/CreateImageRequest'
 import DefaultPromptInput from 'models/DefaultPromptInput'
 import PromptInputSettings from 'models/PromptInputSettings'
 import { Dispatch } from 'react'
-import { toast } from 'react-toastify'
 import {
   clearCanvasStore,
   getCanvasStore,
@@ -14,6 +13,7 @@ import { clearInputCache, setInputCache } from 'store/inputCache'
 import { SetInput } from 'types'
 import { logDataForDebugging } from 'utils/debugTools'
 import { createImageJob } from 'utils/imageCache'
+import { showSuccessToast } from 'utils/notificationUtils'
 import {
   SourceProcessing,
   clearSavedInputCache,
@@ -146,17 +146,7 @@ export const handleCreateClick = async ({
       setInput({ ...inpaintCache })
     }
 
-    toast.success('Image requested!', {
-      pauseOnFocusLoss: false,
-      position: 'top-center',
-      autoClose: 2500,
-      hideProgressBar: false,
-      closeOnClick: true,
-      pauseOnHover: false,
-      draggable: false,
-      progress: undefined,
-      theme: 'light'
-    })
+    showSuccessToast({ message: 'Image requested!' })
     setPending(false)
   }
 }