initial commit

frontend/public/pages/settings.html

@@ -0,0 +1,108 @@
+<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>