Add tooltips for pipeline-related buttons in UI and for all form fields

learn2rag/ui/templates/compose/pipelines/continuous.yml

@@ -1,5 +1,6 @@
 name: continuous
 label: Start
+description: "Start the pipeline with continuous data import"
 ports:
   # TODO: labels in the interface currently assume a specific port order
   - ui

learn2rag/ui/templates/compose/pipelines/import.yml

@@ -1,5 +1,6 @@
 name: import
 label: Start one-time import
+description: "Start the pipeline with one time data import"
 ports:
   # TODO: UI port is not used; labels in the interface currently assume a specific port order
   - ui

learn2rag/ui/templates/compose/pipelines/pipeline.yml

@@ -1,5 +1,6 @@
 name: pipeline
 label: Start only the chat
+description: "Start the chat only with no import "
 ports:
   # TODO: labels in the interface currently assume a specific port order
   - ui

learn2rag/ui/templates/firststeps_pipelines.html

@@ -14,11 +14,11 @@ <h4 class="alert-heading">You do not have any pipelines configured</h4>
         {% endfor %}
         <input type="hidden" name="import_schedule_interval_hours" value="12"/>
         <input type="hidden" name="now" value="yes"/>
-        <button type="submit" class="btn btn-primary">🪄 Yes, automatically configure a pipeline</button>
+        <button type="submit" class="btn btn-primary" title="Start the automated pipeline optimization process">🪄 Yes, automatically configure a pipeline</button>
       </form>
     </div>
     <div class="btn-group me-2" role="group">
-      <a href="{{ url_for('pipelines_list') }}" class="btn btn-link">More options</a>
+      <a href="{{ url_for('pipelines_list') }}" class="btn btn-link" title="View and manage all available pipelines">More options</a>
     </div>
   </div>
 </div>

learn2rag/ui/templates/firststeps_sources.html

@@ -8,7 +8,7 @@ <h4 class="alert-heading">You do not have any data sources selected</h4>
         <input type="hidden" name="type" value="local"/>
         <input type="hidden" name="label" value="~/Documents/RAG"/>
         <input type="hidden" name="path" value="~/Documents/RAG"/>
-        <button type="submit" class="btn btn-primary">🪄 Yes, add my <code>~/Documents/RAG</code> folder</button>
+        <button type="submit" class="btn btn-primary" title="Include documents from the ~/Documents/RAG folder">🪄 Yes, add my <code>~/Documents/RAG</code> folder</button>
       </form>
     </div>
     <div class="btn-group me-2" role="group">

learn2rag/ui/templates/models_add.html

@@ -1,7 +1,7 @@
 <div class="accordion" id="accordionCreate">
   <div class="accordion-item">
     <h2 class="accordion-header">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreateConnect" aria-expanded="false" aria-controls="collapseCreateConnect">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreateConnect" aria-expanded="false" aria-controls="collapseCreateConnect" title="Expand to connect a third-party language model via API">
         {{pgettext('heading', 'Connect an external language model')}}
       </button>
     </h2>
@@ -14,7 +14,7 @@ <h2 class="accordion-header">
           </div>
           <div class="mb-3">
             <label for="api" class="form-label">{{pgettext('form_label', 'API type')}}</label>
-            <select required="required" class="form-select" name="api">
+            <select required="required" class="form-select" name="api" title="Select the API provider for the language model">
               {% for llm_client in llm.llms.values() %}
               {% if llm_client.LABEL %}
               <option
@@ -36,21 +36,21 @@ <h2 class="accordion-header">
           </div>
           <div class="mb-3">
             <label for="token" class="form-label">{{pgettext('form_label', 'Access token')}}</label>
-            <input class="form-control" name="token">
+            <input class="form-control" name="token" title="Enter access token">
           </div>
           <div class="mb-3">
             <label for="model" class="form-label">{{pgettext('form_label', 'Language model')}}</label>
             <input required="required" class="form-control" name="model" title="{{pgettext('tooltip', 'For example: %(model)s', model=firststeps_model.get('config', {}).get('model'))}}">
           </div>
-          <button type="submit" class="btn btn-primary">{{pgettext('button', 'Save')}}</button>
+          <button type="submit" class="btn btn-primary" title="Save these">{{pgettext('button', 'Save')}}</button>
         </form>
       </div>
     </div>
   </div>
   {% if suggested_models %}
   <div class="accordion-item">
     <h2 class="accordion-header">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreateSuggested" aria-expanded="false" aria-controls="collapseCreateSuggested">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreateSuggested" aria-expanded="false" aria-controls="collapseCreateSuggested" title="Expand to browse and download a local language model">
         {{pgettext('heading', 'Download a language model')}}
       </button>
     </h2>
@@ -82,7 +82,7 @@ <h5 class="card-title">{{ suggested_model.label }}</h5>
               <input type="hidden" name="url" value="{{ suggested_model.config.url }}"/>
               <input type="hidden" name="model" value="{{ suggested_model.config.model }}"/>
               <input type="hidden" name="token" value="{{ suggested_model.config.token }}"/>
-              <button type="submit" class="btn btn-primary">{{ pgettext('button', 'Use this suggested language model') }}</button>
+              <button type="submit" class="btn btn-primary" title="Select and configure this suggested language model">{{ pgettext('button', 'Use this suggested language model') }}</button>
             </form>
           </div>
         </div>
@@ -101,7 +101,7 @@ <h5 class="card-title">{{gettext('Another model')}}</h5>
               </div>
               <input type="hidden" name="api" value="{{ llm.OllamaClient.ID }}"/>
               <input type="hidden" name="ollama" value="pull"/>
-              <button type="submit" class="btn btn-primary">Save</button>
+              <button type="submit" class="btn btn-primary" title="Save this language model">Save</button>
             </form>
             {% else %}
             <div class="alert alert-warning" role="alert">
@@ -117,7 +117,7 @@ <h5 class="card-title">{{gettext('Another model')}}</h5>
   {% if ollama_models %}
   <div class="accordion-item">
     <h2 class="accordion-header">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreateOllamaSelect" aria-expanded="false" aria-controls="collapseCreateOllamaSelect">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreateOllamaSelect" aria-expanded="false" aria-controls="collapseCreateOllamaSelect" title="Expand to select a previously downloaded model">
         {{pgettext('heading', 'Use previously downloaded model')}}
       </button>
     </h2>
@@ -130,15 +130,15 @@ <h2 class="accordion-header">
           </div>
           <div class="mb-3">
             <label for="ollama_list" class="form-label">{{pgettext('form_label', 'Language model')}}</label>
-            <select class="form-select" name="model">
+            <select class="form-select" name="model" title="Select an available Ollama language model">
               {% for ollama_model in ollama_models %}
               <option value="{{ ollama_model.model }}">{{ ollama_model.model }}</option>
               {% endfor %}
             </select>
           </div>
           <input type="hidden" name="api" value="{{ llm.OllamaClient.ID }}"/>
           <input type="hidden" name="ollama" value="use"/>
-          <button type="submit" class="btn btn-primary">{{pgettext('button', 'Save')}}</button>
+          <button type="submit" class="btn btn-primary" title="save Ollama Language model">{{pgettext('button', 'Save')}}</button>
         </form>
       </div>
     </div>

learn2rag/ui/templates/models_page.html

@@ -6,7 +6,7 @@ <h1>{% block title %}{{pgettext('title', 'Language models')}}{% endblock %}</h1>
 
 {% block content %}
 <p class="d-inline-flex gap-1">
-  <button accesskey="n" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreate" aria-expanded="false" aria-controls="collapseCreate">
+  <button accesskey="n" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreate" aria-expanded="false" aria-controls="collapseCreate" title="Expand to add and configure a new language model">
     {{pgettext('button', 'Add a new language model')}}
   </button>
 </p>

learn2rag/ui/templates/pipelines_add.html

@@ -5,11 +5,11 @@
   </div>
   <div class="mb-3">
     <label for="url" class="form-label">{{pgettext('form_label', 'Storage directory path')}}</label>
-    <input required="required" class="form-control" name="storage_path" value="{{default_storage_prefix}}{{current_timestamp}}" data-default-prefix="{{default_storage_prefix}}"/>
+    <input required="required" class="form-control" name="storage_path" value="{{default_storage_prefix}}{{current_timestamp}}" data-default-prefix="{{default_storage_prefix}}" title="Enter the directory path for data storage"/>
   </div>
   <div class="mb-3">
     <label for="language_model" class="form-label">{{pgettext('form_label', 'Language model')}}</label>
-    <select class="form-select" name="language_model">
+    <select class="form-select" name="language_model" title="Select the language model to use for this configuration">
       {% for name, language_model in models.items() %}
       <option value="{{ name }}">{{ language_model.label }} ({{ language_model.model }})</option>
       {% endfor %}
@@ -31,7 +31,7 @@
     {% endfor %}
   </div>
   <div class="mb-3">
-    <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target=".advanced-configuration">
+    <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target=".advanced-configuration" title="Expand to view advanced configuration options">
       {{gettext('Advanced configuration')}}
     </button>
   </div>
@@ -40,32 +40,32 @@
       <label for="import_schedule_interval_hours" class="form-label">{{pgettext('form_label', 'Automatically import data with interval (hours)')}}</label>
       <input class="form-control" name="import_schedule_interval_hours"
              type="number" min="0" step="any"
-             value="12"
+             value="12" title="Set the interval in hours between scheduled data imports"
              />
     </div>
     <div class="mb-3">
       <label for="ports" class="form-label">{{pgettext('form_label', 'Chat proxy URL')}}</label>
-      <input class="form-control" name="chat_proxy_url" type="url">
+      <input class="form-control" name="chat_proxy_url" type="url" title="Enter the URL for the chat proxy server">
     </div>
     <label for="ports" class="form-label">{{pgettext('form_label', 'Ports')}}</label>
     <small class="text-body-secondary">{{gettext('Optional')}}</small>
     <div>
     </div>
     {# TODO: labels in the interface currently assume a specific port order in all corresponding .yml files #}
     <div class="form-floating mb-3">
-      <input class="form-control" name="ports" type="number" min="1" max="65535">
+      <input class="form-control" name="ports" type="number" min="1" max="65535" title="Enter the network port number for the user interface">
       <label for="ports" class="form-label">{{pgettext('form_label', 'User interface')}}</label>
     </div>
     <div class="form-floating mb-3">
-      <input class="form-control" name="ports" type="number" min="1" max="65535">
+      <input class="form-control" name="ports" type="number" min="1" max="65535" title="Enter the network port number for the internal RAG service">
       <label for="ports">{{pgettext('form_label', 'Internal RAG service')}}</label>
     </div>
     <div class="form-floating mb-3">
-      <input class="form-control" name="ports" type="number" min="1" max="65535">
+      <input class="form-control" name="ports" type="number" min="1" max="65535" title="Enter the network port number for the internal vector store">
       <label for="ports">{{pgettext('form_label', 'Internal vector store')}}</label>
     </div>
     <div class="form-floating mb-3">
-      <input class="form-control" name="ports" type="number" min="1" max="65535">
+      <input class="form-control" name="ports" type="number" min="1" max="65535" title="Enter the network port number for an additional internal service">
       <label for="ports">{{pgettext('form_label', 'Additional internal port')}}</label>
     </div>
   </div>
@@ -77,7 +77,7 @@
       </label>
     </div>
   </div>
-  <button type="submit" class="btn btn-primary">{{pgettext('button', 'Save')}}</button>
+  <button type="submit" class="btn btn-primary" title="Save your changes">{{pgettext('button', 'Save')}}</button>
 </form>
 
 <script>

learn2rag/ui/templates/pipelines_list.html

@@ -1,6 +1,6 @@
 {% macro pipeline_start(name, project, cls) %}
 <form method="POST" action="{{ url_for('pipeline_action', name=name) }}">
-  <button class="{{ cls }}" type="submit" name="action" value="start:{{ project.name }}">{{project.label}}</button>
+  <button class="{{ cls }}" type="submit" name="action" value="start:{{ project.name }}" title="{{project.description}}">{{project.label}}</button>
 </form>
 {% endmacro %}
 
@@ -109,15 +109,15 @@
                   <li>
                     <form method="POST" action="{{ url_for('pipeline_action', name=name) }}" hx-boost="true" hx-confirm="{{gettext('Are you sure you want to remove all data stored for this pipeline: %(label)s?', label=pipeline.label)}}">
                       <input type="hidden" name="action" value="clean"/>
-                      <button type="submit" class="dropdown-item text-bg-danger">
+                      <button type="submit" class="dropdown-item text-bg-danger" title="Delete the stored data">
                         {{pgettext('button', 'Remove the stored data')}}
                       </button>
                     </form>
                   </li>
                   <li>
                     <form method="POST" action="{{ url_for('pipeline_action', name=name) }}" hx-boost="true" hx-confirm="{{gettext('Are you sure you want to remove this pipeline configuration and all its stored data: %(label)s?', label=pipeline.label)}}">
                       <input type="hidden" name="action" value="delete"/>
-                      <button type="submit" class="dropdown-item text-bg-danger">
+                      <button type="submit" class="dropdown-item text-bg-danger" title="Delete the stored data and the pipeline">
                         {{pgettext('button', 'Remove the stored data and the pipeline')}}
                       </button>
                     </form>

learn2rag/ui/templates/pipelines_page.html

@@ -6,7 +6,7 @@ <h1>{% block title %}{{pgettext('title', 'Pipelines')}}{% endblock %}</h1>
 
 {% block content %}
 <p class="d-inline-flex gap-1">
-  <button accesskey="n" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreate" aria-expanded="false" aria-controls="collapseCreate">
+  <button accesskey="n" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreate" aria-expanded="false" aria-controls="collapseCreate" title="Expand to add and configure a new pipeline">
     {{pgettext('button', 'Add a new pipeline')}}
   </button>
 </p>

learn2rag/ui/templates/sources_add.html

@@ -1,7 +1,7 @@
 <div class="accordion" id="accordionCreate">
   <div class="accordion-item">
     <h2 class="accordion-header">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreateLocal" aria-expanded="false" aria-controls="collapseCreateLocal">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreateLocal" aria-expanded="false" aria-controls="collapseCreateLocal" title="Expand to add a local file or directory">
         {{pgettext('heading', 'Local file or directory')}}
       </button>
     </h2>
@@ -13,7 +13,7 @@ <h2 class="accordion-header">
   </div>
   <div class="accordion-item">
     <h2 class="accordion-header">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreateWeb" aria-expanded="false" aria-controls="collapseCreateWeb">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreateWeb" aria-expanded="false" aria-controls="collapseCreateWeb" title="Expand to add a web page" >
         {{pgettext('heading', 'Web page')}}
       </button>
     </h2>
@@ -25,7 +25,7 @@ <h2 class="accordion-header">
   </div>
   <div class="accordion-item">
     <h2 class="accordion-header">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreateSharepoint" aria-expanded="false" aria-controls="collapseCreateSharepoint">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreateSharepoint" aria-expanded="false" aria-controls="collapseCreateSharepoint" title="Expand to add a SharePoint site">
         {{pgettext('heading', 'Sharepoint')}}
       </button>
     </h2>
@@ -37,7 +37,7 @@ <h2 class="accordion-header">
   </div>
   <div class="accordion-item">
     <h2 class="accordion-header">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreateDrupal" aria-expanded="false" aria-controls="collapseCreateDrupal">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCreateDrupal" aria-expanded="false" aria-controls="collapseCreateDrupal" title="Expand to add a Drupal site">
         {{pgettext('heading', 'Drupal')}}
       </button>
     </h2>