feat: Implement favorites and recents modals for embeddings (#34)

* feat: add support favorite and recent embeddings * chore: add suspense boundary
Haidra-Org · Jul 5, 2024 · d6e8de1 · d6e8de1
1 parent 73cd8c1
commit d6e8de1
Show file tree

Hide file tree

Showing 7 changed files with 10,926 additions and 28 deletions.
diff --git a/app/_components/AdvancedOptions/AddEmbedding.tsx b/app/_components/AdvancedOptions/AddEmbedding.tsx
@@ -5,7 +5,7 @@ import Button from '../Button'
 import Section from '../Section'
 import NiceModal from '@ebay/nice-modal-react'
 import LoraSearch from './LoRAs/LoraSearch'
-import { useCallback } from 'react'
+import { Suspense, useCallback } from 'react'
 import { SavedEmbedding, SavedLora } from '@/app/_data-models/Civitai'
 import { useInput } from '@/app/_providers/PromptInputProvider'
 import EmbeddingSettingsCard from './LoRAs/EmbeddingSettingsCard'
@@ -50,10 +50,12 @@ export default function AddEmbedding() {
  onClick={() => {
  NiceModal.show('modal', {
  children: (
- <LoraSearch
- onUseLoraClick={handleUseLoraClick}
- civitAiType="TextualInversion"
- />
+ <Suspense>
+ <LoraSearch
+ onUseLoraClick={handleUseLoraClick}
+ civitAiType="TextualInversion"
+ />
+ </Suspense>
  ),
  modalStyle: {
  maxWidth: '1600px',
@@ -68,7 +70,20 @@ export default function AddEmbedding() {
  <Button
  onClick={() => {
  NiceModal.show('modal', {
- children: <div>Favorite TIs - hello!</div>
+ children: (
+ <Suspense>
+ <LoraSearch
+ onUseLoraClick={handleUseLoraClick}
+ civitAiType="TextualInversion"
+ searchType="favorite"
+ />
+ </Suspense>
+ ),
+ modalStyle: {
+ maxWidth: '1600px',
+ minHeight: `calc(100vh - 32px)`,
+ width: 'calc(100% - 32px)'
+ }
  })
  }}
  >
@@ -77,7 +92,20 @@ export default function AddEmbedding() {
  <Button
  onClick={() => {
  NiceModal.show('modal', {
- children: <div>Recently used TIs- hello!</div>
+ children: (
+ <Suspense>
+ <LoraSearch
+ onUseLoraClick={handleUseLoraClick}
+ civitAiType="TextualInversion"
+ searchType="recent"
+ />
+ </Suspense>
+ ),
+ modalStyle: {
+ maxWidth: '1600px',
+ minHeight: `calc(100vh - 32px)`,
+ width: 'calc(100% - 32px)'
+ }
  })
  }}
  >

diff --git a/app/_components/AdvancedOptions/LoRAs/AddLora.tsx b/app/_components/AdvancedOptions/LoRAs/AddLora.tsx
@@ -7,7 +7,7 @@ import NiceModal from '@ebay/nice-modal-react'
 import LoraSearch from './LoraSearch'
 import { useInput } from '@/app/_providers/PromptInputProvider'
 import LoraSettingsCard from './LoraSettingsCard'
-import { useCallback } from 'react'
+import { Suspense, useCallback } from 'react'
 import { SavedEmbedding, SavedLora } from '@/app/_data-models/Civitai'
 
 const MAX_LORAS = 5
@@ -55,7 +55,11 @@ export default function AddLora() {
  disabled={input.loras.length >= MAX_LORAS}
  onClick={() => {
  NiceModal.show('modal', {
- children: <LoraSearch onUseLoraClick={handleUseLoraClick} />,
+ children: (
+ <Suspense>
+ <LoraSearch onUseLoraClick={handleUseLoraClick} />,
+ </Suspense>
+ ),
  modalStyle: {
  maxWidth: '1600px',
  minHeight: `calc(100vh - 32px)`,
@@ -70,10 +74,12 @@ export default function AddLora() {
  onClick={() => {
  NiceModal.show('modal', {
  children: (
- <LoraSearch
- onUseLoraClick={handleUseLoraClick}
- searchType="favorite"
- />
+ <Suspense>
+ <LoraSearch
+ onUseLoraClick={handleUseLoraClick}
+ searchType="favorite"
+ />
+ </Suspense>
  ),
  modalStyle: {
  maxWidth: '1600px',
@@ -89,10 +95,12 @@ export default function AddLora() {
  onClick={() => {
  NiceModal.show('modal', {
  children: (
- <LoraSearch
- onUseLoraClick={handleUseLoraClick}
- searchType="recent"
- />
+ <Suspense>
+ <LoraSearch
+ onUseLoraClick={handleUseLoraClick}
+ searchType="recent"
+ />
+ </Suspense>
  ),
  modalStyle: {
  maxWidth: '1600px',

diff --git a/app/_components/AdvancedOptions/LoRAs/EmbeddingSettingsCard.tsx b/app/_components/AdvancedOptions/LoRAs/EmbeddingSettingsCard.tsx
@@ -164,7 +164,7 @@ export default function EmbeddingSettingsCard({ ti }: { ti: SavedEmbedding }) {
  options={[
  { value: 'prompt', label: 'Prompt' },
  { value: 'negprompt', label: 'Negative Prompt' },
- { value: 'manual', label: 'None' }
+ { value: 'none', label: 'None' }
  ]}
  value={{
  value: ti.inject_ti as string,

diff --git a/app/_components/AdvancedOptions/LoRAs/LoraDetails.tsx b/app/_components/AdvancedOptions/LoRAs/LoraDetails.tsx
@@ -69,7 +69,7 @@ export default function LoraDetails({
  model: {
  ...details
  },
- type: 'lora',
+ type: civitAiType === 'LORA' ? 'lora' : 'ti',
  model_id: model_id as string
  })
  }