+ env
This commit is contained in:
@@ -65,13 +65,41 @@ const imageCount = ref(1)
|
||||
const sendToTelegram = ref(false)
|
||||
const telegramId = ref('')
|
||||
const useProfileImage = ref(true)
|
||||
const useEnvironment = ref(false)
|
||||
const isSubmittingGen = ref(false)
|
||||
|
||||
// Character & Assets
|
||||
const characters = ref([])
|
||||
const selectedCharacter = ref(null)
|
||||
const environments = ref([])
|
||||
const selectedEnvironment = ref(null)
|
||||
const selectedAssets = ref([])
|
||||
let _savedCharacterId = null
|
||||
let _savedEnvironmentId = null
|
||||
|
||||
const loadEnvironments = async (charId) => {
|
||||
if (!charId) {
|
||||
environments.value = []
|
||||
selectedEnvironment.value = null
|
||||
return
|
||||
}
|
||||
try {
|
||||
const response = await dataService.getEnvironments(charId)
|
||||
environments.value = Array.isArray(response) ? response : (response.environments || [])
|
||||
|
||||
if (_savedEnvironmentId) {
|
||||
selectedEnvironment.value = environments.value.find(e => (e.id === _savedEnvironmentId || e._id === _savedEnvironmentId)) || null
|
||||
_savedEnvironmentId = null
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load environments', e)
|
||||
environments.value = []
|
||||
}
|
||||
}
|
||||
|
||||
watch(selectedCharacter, (newChar) => {
|
||||
loadEnvironments(newChar?.id || newChar?._id)
|
||||
})
|
||||
|
||||
const qualityOptions = ref([
|
||||
{ key: 'ONEK', value: '1K' },
|
||||
@@ -100,7 +128,9 @@ const restoreSettings = () => {
|
||||
sendToTelegram.value = s.sendToTelegram || false
|
||||
telegramId.value = s.telegramId || localStorage.getItem('telegram_id') || ''
|
||||
if (s.useProfileImage !== undefined) useProfileImage.value = s.useProfileImage
|
||||
if (s.useEnvironment !== undefined) useEnvironment.value = s.useEnvironment
|
||||
_savedCharacterId = s.selectedCharacterId || null
|
||||
_savedEnvironmentId = s.selectedEnvironmentId || null
|
||||
if (s.selectedAssetIds && s.selectedAssetIds.length > 0) {
|
||||
selectedAssets.value = s.selectedAssetIds.map(id => ({
|
||||
id,
|
||||
@@ -123,14 +153,16 @@ const saveSettings = () => {
|
||||
sendToTelegram: sendToTelegram.value,
|
||||
telegramId: telegramId.value,
|
||||
useProfileImage: useProfileImage.value,
|
||||
useEnvironment: useEnvironment.value,
|
||||
selectedCharacterId: selectedCharacter.value?.id || null,
|
||||
selectedEnvironmentId: selectedEnvironment.value?.id || null,
|
||||
selectedAssetIds: selectedAssets.value.map(a => a.id),
|
||||
}
|
||||
localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings))
|
||||
if (telegramId.value) localStorage.setItem('telegram_id', telegramId.value)
|
||||
}
|
||||
|
||||
watch([prompt, quality, aspectRatio, imageCount, selectedModel, sendToTelegram, telegramId, useProfileImage, selectedCharacter, selectedAssets], saveSettings, { deep: true })
|
||||
watch([prompt, quality, aspectRatio, imageCount, selectedModel, sendToTelegram, telegramId, useProfileImage, useEnvironment, selectedCharacter, selectedEnvironment, selectedAssets], saveSettings, { deep: true })
|
||||
|
||||
onMounted(async () => {
|
||||
restoreSettings()
|
||||
@@ -144,7 +176,7 @@ const loadCharacters = async () => {
|
||||
try {
|
||||
characters.value = await dataService.getCharacters()
|
||||
if (_savedCharacterId && characters.value.length > 0) {
|
||||
const found = characters.value.find(c => c.id === _savedCharacterId)
|
||||
const found = characters.value.find(c => (c.id === _savedCharacterId || c._id === _savedCharacterId))
|
||||
if (found) selectedCharacter.value = found
|
||||
_savedCharacterId = null
|
||||
}
|
||||
@@ -411,8 +443,7 @@ const handleAssetPickerUpload = async (event) => {
|
||||
<!-- Character & Assets Row -->
|
||||
<div class="flex flex-col md:flex-row gap-2">
|
||||
<div class="flex-1 flex flex-col gap-1">
|
||||
<label
|
||||
class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Character</label>
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Character</label>
|
||||
<Dropdown v-model="selectedCharacter" :options="characters" optionLabel="name"
|
||||
placeholder="Select Character" filter showClear
|
||||
class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl" :pt="{
|
||||
@@ -441,41 +472,91 @@ const handleAssetPickerUpload = async (event) => {
|
||||
</template>
|
||||
</Dropdown>
|
||||
|
||||
<div v-if="selectedCharacter"
|
||||
class="flex items-center gap-2 mt-2 px-1 animate-in fade-in slide-in-from-top-1">
|
||||
<Checkbox v-model="useProfileImage" :binary="true" inputId="idea-use-profile-img"
|
||||
class="!border-white/20" :pt="{
|
||||
box: ({ props, state }) => ({
|
||||
class: ['!bg-slate-800 !border-white/20', { '!bg-violet-600 !border-violet-600': props.modelValue }]
|
||||
})
|
||||
}" />
|
||||
<label for="idea-use-profile-img"
|
||||
class="text-xs text-slate-300 cursor-pointer select-none">Use
|
||||
Character
|
||||
Photo</label>
|
||||
</div>
|
||||
<div v-if="selectedCharacter"
|
||||
class="flex flex-wrap items-center gap-x-4 gap-y-2 mt-2 px-1 animate-in fade-in slide-in-from-top-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="useProfileImage" :binary="true" inputId="idea-use-profile-img"
|
||||
class="!border-white/20" :pt="{
|
||||
box: ({ props, state }) => ({
|
||||
class: ['!bg-slate-800 !border-white/20', { '!bg-violet-600 !border-violet-600': props.modelValue }]
|
||||
})
|
||||
}" />
|
||||
<label for="idea-use-profile-img"
|
||||
class="text-xs text-slate-300 cursor-pointer select-none">Use Photo</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="useEnvironment" :binary="true" inputId="idea-use-env"
|
||||
class="!border-white/20" :pt="{
|
||||
box: ({ props, state }) => ({
|
||||
class: ['!bg-slate-800 !border-white/20', { '!bg-violet-600 !border-violet-600': props.modelValue }]
|
||||
})
|
||||
}" />
|
||||
<label for="idea-use-env"
|
||||
class="text-xs text-slate-300 cursor-pointer select-none">Use Environment</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col gap-1">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Assets</label>
|
||||
<div @click="openAssetPicker"
|
||||
class="w-full bg-slate-800 border border-white/10 rounded-lg p-2 min-h-[38px] cursor-pointer hover:bg-slate-700/50 transition-colors flex flex-wrap gap-1.5">
|
||||
<span v-if="selectedAssets.length === 0" class="text-slate-400 text-sm py-0.5">Select
|
||||
Assets</span>
|
||||
<div v-for="asset in selectedAssets" :key="asset.id"
|
||||
class="px-2 py-1 bg-violet-600/30 border border-violet-500/30 text-violet-200 text-xs rounded-md flex items-center gap-2 animate-in fade-in zoom-in duration-200"
|
||||
@click.stop>
|
||||
<img v-if="asset.url" :src="API_URL + asset.url + '?thumbnail=true'"
|
||||
class="w-4 h-4 rounded object-cover" />
|
||||
<span class="truncate max-w-[100px]">{{ asset.name || 'Asset ' + (asset.id ?
|
||||
asset.id.substring(0, 4) : '') }}</span>
|
||||
<i class="pi pi-times cursor-pointer hover:text-white"
|
||||
@click.stop="removeAsset(asset)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Environment Row (Below) -->
|
||||
<div v-if="selectedCharacter && useEnvironment" class="flex flex-col gap-1 animate-in fade-in slide-in-from-top-1 mt-2"> <div class="flex justify-between items-center">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Environment</label>
|
||||
<Button v-if="selectedEnvironment" icon="pi pi-times" @click="selectedEnvironment = null" text size="small"
|
||||
class="!p-0 !h-4 !w-4 !text-[8px] text-slate-500 hover:text-white" />
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col gap-1">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Assets</label>
|
||||
<div @click="openAssetPicker"
|
||||
class="w-full bg-slate-800 border border-white/10 rounded-lg p-2 min-h-[38px] cursor-pointer hover:bg-slate-700/50 transition-colors flex flex-wrap gap-1.5">
|
||||
<span v-if="selectedAssets.length === 0" class="text-slate-400 text-sm py-0.5">Select
|
||||
Assets</span>
|
||||
<div v-for="asset in selectedAssets" :key="asset.id"
|
||||
class="px-2 py-1 bg-violet-600/30 border border-violet-500/30 text-violet-200 text-xs rounded-md flex items-center gap-2 animate-in fade-in zoom-in duration-200"
|
||||
@click.stop>
|
||||
<img v-if="asset.url" :src="API_URL + asset.url + '?thumbnail=true'"
|
||||
class="w-4 h-4 rounded object-cover" />
|
||||
<span class="truncate max-w-[100px]">{{ asset.name || 'Asset ' + (asset.id ?
|
||||
asset.id.substring(0, 4) : '') }}</span>
|
||||
<i class="pi pi-times cursor-pointer hover:text-white"
|
||||
@click.stop="removeAsset(asset)"></i>
|
||||
|
||||
<div v-if="environments.length > 0" class="flex gap-2 overflow-x-auto pb-1 custom-scrollbar no-scrollbar">
|
||||
<div v-for="env in environments" :key="env.id || env._id"
|
||||
@click="selectedEnvironment = env"
|
||||
class="flex-shrink-0 flex items-center gap-2 px-2 py-1.5 rounded-lg border-2 transition-all cursor-pointer group bg-slate-800/40"
|
||||
:class="[
|
||||
(selectedEnvironment?.id === (env.id || env._id) || selectedEnvironment?._id === (env.id || env._id))
|
||||
? 'border-violet-500 bg-violet-500/10 shadow-[0_0_15px_rgba(124,58,237,0.1)]'
|
||||
: 'border-white/5 hover:border-white/20'
|
||||
]"
|
||||
>
|
||||
<div class="w-6 h-6 rounded overflow-hidden flex-shrink-0 bg-slate-900 flex items-center justify-center border border-white/5">
|
||||
<img v-if="env.asset_ids?.length > 0"
|
||||
:src="API_URL + '/assets/' + env.asset_ids[0] + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<i v-else class="pi pi-map-marker text-[10px]"
|
||||
:class="(selectedEnvironment?.id === (env.id || env._id) || selectedEnvironment?._id === (env.id || env._id)) ? 'text-violet-400' : 'text-slate-500'"
|
||||
></i>
|
||||
</div>
|
||||
<span class="text-[10px] whitespace-nowrap pr-1"
|
||||
:class="(selectedEnvironment?.id === (env.id || env._id) || selectedEnvironment?._id === (env.id || env._id)) ? 'text-violet-300 font-bold' : 'text-slate-400 group-hover:text-slate-200'"
|
||||
>
|
||||
{{ env.name }}
|
||||
</span>
|
||||
<i v-if="(selectedEnvironment?.id === (env.id || env._id) || selectedEnvironment?._id === (env.id || env._id))"
|
||||
class="pi pi-check text-violet-400 text-[8px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="py-2 px-3 bg-slate-800/50 border border-white/5 rounded-xl text-center">
|
||||
<p class="text-[9px] text-slate-600 uppercase m-0">No environments</p>
|
||||
</div>
|
||||
</div> </div>
|
||||
|
||||
<!-- RIGHT COLUMN: Settings & Button -->
|
||||
<div class="w-full lg:w-72 flex flex-col gap-2">
|
||||
|
||||
Reference in New Issue
Block a user