WIP

changedetectionio/blueprint/watchlist/templates/watch-overview.html

@@ -29,21 +29,8 @@
                 <i data-feather="tag" style="width: 14px; height: 14px; stroke: white; margin-right: 4px;"></i>
                {{ render_field(form.tags, value=active_tag.title if active_tag_uuid else '', placeholder="Watch group / tag", class="transparent-field") }}
             </div>
-            <div id="openai-prompt">
-                <span>
-                    <img alt="OpenAI your watches!" style="height: 1em;display:inline-block;" src="{{ url_for('static_content', group='images', filename='open-ai-logo.png') }}">
-                    <label>AI Prompt</label>
-                </span>
-                <span>
-                    {{ render_simple_field(form.LLM_prompt) }}
-                </span>
-                <span>
-                    {{ render_simple_field(form.LLM_send_type) }}
-                </span>
-                <span>
-                    {{ render_simple_field(form.LLM_backend) }}
-                </span>
-            </div>
+
+            {%- include 'edit/llm_prompt.html' -%}
 
             <div id="quick-watch-processor-type">
                 {{ render_simple_field(form.processor) }}

changedetectionio/forms.py

@@ -61,7 +61,11 @@ LLM_example_texts = ['Tell me simply "Price, In stock"',
                      'Look at this restaurant menu and only give me list of meals you think are good for type 2 diabetics, if nothing is found just say "nothing"',
                      ]
 
-LLM_send_type_choices = [('text', 'Text'), ('Screenshot', 'Image / Screenshot'), ('above_fold_text', 'Text above the fold'), ('HTML', 'HTML Source')]
+LLM_send_type_choices = [('text', 'Plain text after filters'),
+                         ('above_fold_text', 'Text above the fold'),
+                         ('Screenshot', 'Screenshot / Selection'),
+                         ('HTML', 'HTML Source')
+                         ]
 
 class StringListField(StringField):
     widget = widgets.TextArea()

changedetectionio/static/styles/scss/parts/_edit.scss

@@ -1,3 +1,5 @@
+@use "_llm-prompt";
+
 ul#conditions_match_logic {
     list-style: none;
   input, label, li {

changedetectionio/static/styles/scss/parts/_llm-prompt.scss

@@ -0,0 +1,53 @@
+#form-quick-watch-add #openai-prompt {
+   color: var(--color-white);
+}
+
+
+#llm-prompt-all {
+  .label {
+    display: block !important;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0px;
+
+    li {
+      display: flex;
+      align-items: center;
+      gap: 0.5em;
+      padding-bottom: 0.3em;
+
+      > * {
+        margin: 0px;
+        padding: 0px;
+      }
+
+      label {
+        font-weight: normal;
+      }
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  #llm-prompt-all {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    column-gap: 1.5rem;
+    align-items: start;
+
+    font-size: 0.9rem;
+    padding: 0.3rem;
+
+    #llm-prompt {
+      /* ensure the textarea stretches horizontally */
+      width: 100%;
+
+      textarea {
+        width: 100%;
+        box-sizing: border-box;
+      }
+    }
+  }
+}

changedetectionio/static/styles/scss/styles.scss

@@ -458,7 +458,7 @@ label {
     }
   }
 
-  #watch-group-tag, #openai-prompt {
+  #watch-group-tag {
     font-size: 0.9rem;
     padding: 0.3rem;
     display: flex;

changedetectionio/templates/edit.html

@@ -1,6 +1,6 @@
 {% extends 'base.html' %}
 {% block content %}
-{% from '_helpers.html' import render_field, render_checkbox_field, render_button, render_time_schedule_form, playwright_warning, only_playwright_type_watches_warning, render_conditions_fieldlist_of_formfields_as_table %}
+{% from '_helpers.html' import render_field,  render_simple_field, render_checkbox_field, render_button, render_time_schedule_form, playwright_warning, only_playwright_type_watches_warning, render_conditions_fieldlist_of_formfields_as_table %}
 {% from '_common_fields.html' import render_common_settings_form %}
 <script src="{{url_for('static_content', group='js', filename='tabs.js')}}" defer></script>
 <script src="{{url_for('static_content', group='js', filename='vis.js')}}" defer></script>

changedetectionio/templates/edit/include_subtract.html

@@ -1,16 +1,7 @@
-                   <div class="pure-control-group" id="ai-filter-options">
-                        <div class="pure-control-group inline-radio">
-                            {{ render_field(form.LLM_prompt) }}
+                        <div class="pure-control-group">
+                        {%- include 'edit/llm_prompt.html' -%}
                         </div>
-                        <div class="pure-control-group inline-radio">
-                            {{ render_field(form.LLM_send_type) }}
-                        </div>
-                        <div class="pure-control-group inline-radio">
-                            {{ render_field(form.LLM_backend) }}
-                        </div>
-                    </div>
-
-                    <div class="pure-control-group">
+                        <div class="pure-control-group">
                         {% set field = render_field(form.include_filters,
                             rows=5,
                             placeholder=has_tag_filters_extra+"#example

changedetectionio/templates/edit/llm_prompt.html

@@ -0,0 +1,15 @@
+                   <div class="pure-control-group" id="ai-filter-options">
+                        <div id="openai-prompt">
+                            <div id="llm-prompt-all">
+                                <div id="llm-prompt">
+                                    {{ render_simple_field(form.LLM_prompt, rows=5) }}
+                                </div>
+                                <div id="llm-send-type">
+                                    {{ render_simple_field(form.LLM_send_type) }}
+                                </div>
+                                <div id="llm-backend">
+                                    {{ render_simple_field(form.LLM_backend) }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>