109 lines
3.6 KiB
HTML
109 lines
3.6 KiB
HTML
<form
|
|
x-data="settingsManager()"
|
|
@submit.prevent="saveSettings"
|
|
class="p-0.5 w-full flex flex-col gap-4 pt-16 mx-auto px-4 md:px-6 max-w-6xl"
|
|
>
|
|
<div>
|
|
<label
|
|
for="apiEndpoint"
|
|
class="block text-sm font-semibold text-primary-700"
|
|
>API Endpoint URL</label
|
|
>
|
|
<div class="ml-1">
|
|
<input
|
|
type="url"
|
|
id="apiEndpoint"
|
|
name="apiEndpoint"
|
|
x-model="settings.api_endpoint"
|
|
class="mt-1 p-1 block w-full rounded-md border-primary-400 shadow focus:border-secondary-500 focus:ring-secondary-500 sm:text-sm text-primary-900"
|
|
placeholder="https://api.example.com/v1"
|
|
required
|
|
/>
|
|
<p class="mt-2 text-xs text-primary-500">URL of your API endpoint</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="text-sm font-medium font-semibold text-primary-700"
|
|
>Selectors</span
|
|
>
|
|
<div class="flex flex-col md:flex-row pl-1 gap-4 justify-between">
|
|
<div class="w-full">
|
|
<label
|
|
for="generateModelSelector"
|
|
class="text-sm font-medium text-primary-700"
|
|
>Image</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="generateModelSelector"
|
|
name="generateModelSelector"
|
|
x-model="settings.image_generation_selector"
|
|
class="mt-1 p-1 block w-full rounded-md border-primary-400 shadow focus:border-secondary-500 focus:ring-secondary-500 sm:text-sm text-primary-900"
|
|
placeholder=".meta.type: image-generate"
|
|
/>
|
|
<p class="mt-2 text-xs text-primary-500">Image generation selector</p>
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<label
|
|
for="editModelSelector"
|
|
class="text-sm font-medium text-primary-700"
|
|
>Image Edit</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="editModelSelector"
|
|
name="editModelSelector"
|
|
x-model="settings.image_edit_selector"
|
|
class="mt-1 p-1 block w-full rounded-md border-primary-400 shadow focus:border-secondary-500 focus:ring-secondary-500 sm:text-sm text-primary-900"
|
|
placeholder=".meta.type: image-edit"
|
|
/>
|
|
<p class="mt-2 text-xs text-primary-500">
|
|
Image edit generation selector
|
|
</p>
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<label
|
|
for="textModelSelector"
|
|
class="text-sm font-medium text-primary-700"
|
|
>Chat</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="textGenerationSelector"
|
|
name="textGenerationSelector"
|
|
x-model="settings.text_generation_selector"
|
|
class="mt-1 p-1 block w-full rounded-md border-primary-400 shadow focus:border-secondary-500 focus:ring-secondary-500 sm:text-sm text-primary-900"
|
|
placeholder=".meta.type: text-generate"
|
|
/>
|
|
<p class="mt-2 text-xs text-primary-500">Text generation selector</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
x-show="error"
|
|
class="bg-tertiary-50 border border-tertiary-200 rounded-md p-4"
|
|
>
|
|
<p class="text-tertiary-700" x-text="error"></p>
|
|
</div>
|
|
|
|
<div
|
|
x-show="saved"
|
|
class="bg-secondary-50 border border-secondary-200 rounded-md p-4"
|
|
>
|
|
<p class="text-secondary-700">Settings saved successfully!</p>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button
|
|
type="submit"
|
|
x-bind:disabled="loading"
|
|
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-primary-50 bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 cursor-pointer transition-colors"
|
|
>
|
|
Save Settings
|
|
</button>
|
|
</div>
|
|
</form>
|