feat: completed image ingestion with system settings

styling

html-router/templates/admin/base.html

@@ -6,7 +6,7 @@
 <main class="container flex-grow flex flex-col mx-auto mt-4 space-y-6">
   <h1 class="text-2xl font-bold mb-2">Admin Dashboard</h1>
 
-  <div class="stats stats-vertical lg:stats-horizontal shadow">
+  <div class="stats stats-vertical md:stats-horizontal shadow">
     <div class="stat">
       <div class="stat-title font-bold">Page loads</div>
       <div class="stat-value text-secondary">{{analytics.page_loads}}</div>
@@ -27,7 +27,7 @@
   </div>
 
   <!-- Settings in Fieldset -->
-  <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+  <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
     {% block system_prompt_section %}
     <div id="system_prompt_section">
       <fieldset class="fieldset p-4 shadow rounded-box">
@@ -41,6 +41,10 @@
             hx-swap="innerHTML">
             Edit Ingestion Prompt
           </button>
+          <button type="button" class="btn btn-primary btn-sm" hx-get="/edit-image-prompt" hx-target="#modal"
+            hx-swap="innerHTML">
+            Edit Image Prompt
+          </button>
         </div>
       </fieldset>
     </div>
@@ -85,6 +89,24 @@
           </p>
         </div>
 
+        <!-- Image Processing Model -->
+        <div class="form-control mb-4">
+          <label class="label">
+            <span class="label-text">Image Processing Model</span>
+          </label>
+          <select name="image_processing_model" class="select select-bordered w-full">
+            {% for model in available_models.data %}
+            <option value="{{model.id}}" {% if settings.image_processing_model==model.id %} selected {% endif %}>
+              {{model.id}}
+            </option>
+            {% endfor %}
+          </select>
+          <p class="text-xs text-gray-500 mt-1">
+            Current used:
+            <span class="font-mono">{{settings.image_processing_model}}</span>
+          </p>
+        </div>
+
         <!-- Embedding Model -->
         <div class="form-control mb-4">
           <label class="label">

html-router/templates/admin/edit_image_prompt_modal.html

@@ -0,0 +1,38 @@
+{% extends "modal_base.html" %}
+
+{% block form_attributes %}
+hx-patch="/update-image-prompt"
+hx-target="#system_prompt_section"
+hx-swap="outerHTML"
+{% endblock %}
+
+{% block modal_content %}
+<h3 class="text-lg font-bold mb-4">Edit Image Processing Prompt</h3>
+
+<div class="form-control">
+  <textarea name="image_processing_prompt" class="textarea textarea-bordered h-96 w-full font-mono text-sm">{{
+    settings.image_processing_prompt }}</textarea>
+  <p class="text-xs text-gray-500 mt-1">System prompt used for processing images</p>
+</div>
+{% endblock %}
+
+{% block primary_actions %}
+<button type="button" class="btn btn-outline mr-2" id="reset_prompt_button">
+  Reset to Default
+</button>
+
+<textarea id="default_prompt_content" style="display:none;">{{ default_image_prompt }}</textarea>
+<script>
+  document.getElementById('reset_prompt_button').addEventListener('click', function () {
+    const defaultContent = document.getElementById('default_prompt_content').value;
+    document.querySelector('textarea[name=image_processing_prompt]').value = defaultContent;
+  });
+</script>
+
+<button type="submit" class="btn btn-primary">
+  <span class="htmx-indicator hidden">
+    <span class="loading loading-spinner loading-xs mr-2"></span>
+  </span>
+  Save Changes
+</button>
+{% endblock %}