Skip to content

Commit 4d11553

Browse files
tjbcktjbck
committed
refac
1 parent b3255a3 commit 4d11553

1 file changed

Lines changed: 68 additions & 99 deletions

File tree

‎src/lib/components/admin/Settings/Images.svelte‎

Lines changed: 68 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
2727
const dispatch = createEventDispatcher();
2828
29-
const i18n = getContext('i18n');
29+
const i18n: any = getContext('i18n');
3030
3131
let loading = false;
3232
@@ -616,16 +616,11 @@
616616
</div>
617617

618618
{#if config.COMFYUI_WORKFLOW}
619-
<div class="mb-2.5">
620-
<div class="flex w-full justify-between items-center">
621-
<div class="text-xs pr-2 shrink-0">
622-
<div class="">
623-
{$i18n.t('ComfyUI Workflow Nodes')}
624-
</div>
625-
</div>
626-
</div>
627-
628-
<div class="mt-1 text-xs flex flex-col gap-1.5">
619+
<AdminSettingField
620+
label={$i18n.t('ComfyUI Workflow Nodes')}
621+
description={$i18n.t('Map workflow node inputs used for image generation.')}
622+
>
623+
<div class="flex flex-col gap-1.5 text-xs">
629624
{#each REQUIRED_WORKFLOW_NODES as node}
630625
<div class="flex w-full flex-col">
631626
<div class="shrink-0">
@@ -638,7 +633,7 @@
638633
<div class="">
639634
<Tooltip content={$i18n.t('Input Key (e.g. text, unet_name, steps)')}>
640635
<input
641-
class="py-1 w-24 text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
636+
class="{inputClass} w-24"
642637
placeholder={$i18n.t('Key')}
643638
bind:value={node.key}
644639
required
@@ -654,7 +649,7 @@
654649
placement="top-start"
655650
>
656651
<input
657-
class="w-full py-1 text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
652+
class={inputClass}
658653
placeholder={$i18n.t('Node Ids')}
659654
bind:value={node.node_ids}
660655
/>
@@ -668,7 +663,7 @@
668663
<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
669664
{$i18n.t('*Prompt node ID(s) are required for image generation')}
670665
</div>
671-
</div>
666+
</AdminSettingField>
672667
{/if}
673668
{:else if config?.IMAGE_GENERATION_ENGINE === 'gemini'}
674669
<AdminSettingField
@@ -749,11 +744,11 @@
749744
</AdminSettingField>
750745

751746
<AdminSettingField label={$i18n.t('Image Size')}>
752-
<input
747+
<input
753748
class={inputClass}
754749
placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
755750
bind:value={config.IMAGE_EDIT_SIZE}
756-
/>
751+
/>
757752
</AdminSettingField>
758753
</div>
759754
{/if}
@@ -796,35 +791,35 @@
796791
placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
797792
bind:value={config.IMAGES_EDIT_COMFYUI_BASE_URL}
798793
/>
799-
<button
794+
<button
800795
class="shrink-0 text-gray-400 transition-colors hover:text-gray-900 dark:text-gray-600 dark:hover:text-white"
801-
type="button"
802-
aria-label="verify connection"
803-
on:click={async () => {
804-
await updateConfigHandler();
805-
const res = await verifyConfigUrl(localStorage.token).catch((error) => {
806-
toast.error(`${error}`);
807-
return null;
808-
});
809-
810-
if (res) {
811-
toast.success($i18n.t('Server connection verified'));
812-
}
813-
}}
796+
type="button"
797+
aria-label="verify connection"
798+
on:click={async () => {
799+
await updateConfigHandler();
800+
const res = await verifyConfigUrl(localStorage.token).catch((error) => {
801+
toast.error(`${error}`);
802+
return null;
803+
});
804+
805+
if (res) {
806+
toast.success($i18n.t('Server connection verified'));
807+
}
808+
}}
809+
>
810+
<svg
811+
xmlns="http://www.w3.org/2000/svg"
812+
viewBox="0 0 20 20"
813+
fill="currentColor"
814+
class="w-4 h-4"
814815
>
815-
<svg
816-
xmlns="http://www.w3.org/2000/svg"
817-
viewBox="0 0 20 20"
818-
fill="currentColor"
819-
class="w-4 h-4"
820-
>
821-
<path
822-
fill-rule="evenodd"
823-
d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
824-
clip-rule="evenodd"
825-
/>
826-
</svg>
827-
</button>
816+
<path
817+
fill-rule="evenodd"
818+
d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
819+
clip-rule="evenodd"
820+
/>
821+
</svg>
822+
</button>
828823
</div>
829824
</AdminSettingField>
830825

@@ -855,12 +850,14 @@
855850
e.target.value = null;
856851
};
857852

858-
reader.readAsText(file);
859-
}}
860-
/>
853+
reader.readAsText(file);
854+
}}
855+
/>
861856
<AdminSettingRow
862857
label={$i18n.t('ComfyUI Workflow')}
863-
description={$i18n.t('Upload a workflow.json file exported as API format from ComfyUI.')}
858+
description={$i18n.t(
859+
'Upload a workflow.json file exported as API format from ComfyUI.'
860+
)}
864861
>
865862
<div class="flex items-center justify-end gap-2">
866863
{#if config.IMAGES_EDIT_COMFYUI_WORKFLOW}
@@ -906,16 +903,11 @@
906903
</div>
907904

908905
{#if config.IMAGES_EDIT_COMFYUI_WORKFLOW}
909-
<div class="mb-2.5">
910-
<div class="flex w-full justify-between items-center">
911-
<div class="text-xs pr-2 shrink-0">
912-
<div class="">
913-
{$i18n.t('ComfyUI Workflow Nodes')}
914-
</div>
915-
</div>
916-
</div>
917-
918-
<div class="mt-1 text-xs flex flex-col gap-1.5">
906+
<AdminSettingField
907+
label={$i18n.t('ComfyUI Workflow Nodes')}
908+
description={$i18n.t('Map workflow node inputs used for image edits.')}
909+
>
910+
<div class="flex flex-col gap-1.5 text-xs">
919911
{#each REQUIRED_EDIT_WORKFLOW_NODES as node}
920912
<div class="flex w-full flex-col">
921913
<div class="shrink-0">
@@ -928,7 +920,7 @@
928920
<div class="">
929921
<Tooltip content={$i18n.t('Input Key (e.g. text, unet_name, steps)')}>
930922
<input
931-
class="py-1 w-24 text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
923+
class="{inputClass} w-24"
932924
placeholder={$i18n.t('Key')}
933925
bind:value={node.key}
934926
required
@@ -944,7 +936,7 @@
944936
placement="top-start"
945937
>
946938
<input
947-
class="w-full py-1 text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300"
939+
class={inputClass}
948940
placeholder={$i18n.t('Node Ids')}
949941
bind:value={node.node_ids}
950942
/>
@@ -958,49 +950,26 @@
958950
<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
959951
{$i18n.t('*Prompt node ID(s) are required for image generation')}
960952
</div>
961-
</div>
953+
</AdminSettingField>
962954
{/if}
963955
{:else if config?.IMAGE_EDIT_ENGINE === 'gemini'}
964-
<div class="mb-2.5">
965-
<div class="flex w-full justify-between items-center">
966-
<div class="text-xs pr-2 shrink-0">
967-
<div class="">
968-
{$i18n.t('Gemini Base URL')}
969-
</div>
970-
</div>
971-
972-
<div class="flex w-full">
973-
<div class="flex-1">
974-
<input
975-
class="w-full text-xs border border-gray-100/50 !bg-gray-50/40 outline-hidden dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 text-right"
976-
placeholder={$i18n.t('API Base URL')}
977-
bind:value={config.IMAGES_EDIT_GEMINI_API_BASE_URL}
978-
/>
979-
</div>
980-
</div>
981-
</div>
982-
</div>
983-
984-
<div class="mb-2.5">
985-
<div class="flex w-full justify-between items-center">
986-
<div class="text-xs pr-2 shrink-0">
987-
<div class="">
988-
{$i18n.t('Gemini API Key')}
989-
</div>
990-
</div>
956+
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
957+
<AdminSettingField label={$i18n.t('Base URL')}>
958+
<input
959+
class={inputClass}
960+
placeholder={$i18n.t('API Base URL')}
961+
bind:value={config.IMAGES_EDIT_GEMINI_API_BASE_URL}
962+
/>
963+
</AdminSettingField>
991964

992-
<div class="flex w-full">
993-
<div class="flex-1">
994-
<SensitiveInput
995-
variant="settings"
996-
inputClassName="text-right w-full"
997-
placeholder={$i18n.t('API Key')}
998-
bind:value={config.IMAGES_EDIT_GEMINI_API_KEY}
999-
required={true}
1000-
/>
1001-
</div>
1002-
</div>
1003-
</div>
965+
<AdminSettingField label={$i18n.t('API Key')}>
966+
<SensitiveInput
967+
variant="settings"
968+
placeholder={$i18n.t('API Key')}
969+
bind:value={config.IMAGES_EDIT_GEMINI_API_KEY}
970+
required={true}
971+
/>
972+
</AdminSettingField>
1004973
</div>
1005974
{/if}
1006975
</AdminSettingSection>

0 commit comments

Comments
 (0)