From 835a0c4c2015a592f4c4e14c8c9fe42db6f1d40c Mon Sep 17 00:00:00 2001
From: zlq <zlq@google.com>
Date: Mon, 1 Apr 2024 17:09:29 -0700
Subject: [PATCH] Update frontend image (#513)

* Update frontend image

1. Remove enabled filter for two filters.
2. Add more description on the filters

Tested-by: zlq

* Update frontend image

Change to higher

Tested-by: zlq

* Update frontend image

wrong place

Tested-by: zlq

* Update frontend image

deleted colon

Tested-by: zlq
---
 .../rag/frontend/container/rai/nlp_filter.py  |  2 +-
 .../rag/frontend/container/static/script.js   | 70 +++++++++----------
 .../rag/frontend/container/static/styles.css  |  5 --
 .../frontend/container/templates/index.html   | 36 +++++-----
 4 files changed, 55 insertions(+), 58 deletions(-)

diff --git a/applications/rag/frontend/container/rai/nlp_filter.py b/applications/rag/frontend/container/rai/nlp_filter.py
index de2296393..ca5c91649 100644
--- a/applications/rag/frontend/container/rai/nlp_filter.py
+++ b/applications/rag/frontend/container/rai/nlp_filter.py
@@ -59,4 +59,4 @@ def sum_moderation_confidences(text):
   return int(largest_confidence * 100)
 
 def is_content_inappropriate(text, nlp_filter_level):
-  return sum_moderation_confidences(text) > int(nlp_filter_level)
+  return sum_moderation_confidences(text) > (100 - int(nlp_filter_level))
diff --git a/applications/rag/frontend/container/static/script.js b/applications/rag/frontend/container/static/script.js
index 18f773cf8..3c43c8588 100644
--- a/applications/rag/frontend/container/static/script.js
+++ b/applications/rag/frontend/container/static/script.js
@@ -48,27 +48,19 @@ function onReady() {
         enableForm(false);
 
         // Collect filter data
-        var filterEnabled = document.getElementById("toggle-filters").checked;
-        var body = JSON.stringify({
+        let data = {
             prompt: prompt,
-        })
-        if (filterEnabled) {
-            let data = {
-                prompt: prompt,
-            }
-
-            if (document.getElementById('toggle-nlp-filter-section').checked) {
-                data.nlpFilterLevel = document.getElementById("nlp-range").value
-            }
-
-            if (document.getElementById('toggle-dlp-filter-section').checked) {
-                data.inspectTemplate = document.getElementById('inspect-template-dropdown').value;
-                data.deidentifyTemplate = document.getElementById('deidentify-template-dropdown').value;
-            }
+        }
 
-            body = JSON.stringify(data)
+        if (document.getElementById('toggle-nlp-filter-section').checked) {
+            data.nlpFilterLevel = document.getElementById("nlp-range").value
         }
 
+        if (document.getElementById('toggle-dlp-filter-section').checked) {
+            data.inspectTemplate = document.getElementById('inspect-template-dropdown').value;
+            data.deidentifyTemplate = document.getElementById('deidentify-template-dropdown').value;
+        }
+        var body = JSON.stringify(data)
 
 
         // Send data to the server
@@ -96,20 +88,28 @@ function onReady() {
         }).finally(() => enableForm(true));
     });
 
-    document.getElementById("toggle-filters").addEventListener("change", function() {
-        if (this.checked) {
-            document.getElementById('toggle-dlp-filter-section-div').style.display = 'block'
-            document.getElementById('toggle-nlp-filter-section-div').style.display = 'block'
+    document.getElementById("toggle-dlp-filter-section").addEventListener("change", function() {
+        fetchDLPEnabled()
+        var inspectDropdown = document.getElementById('inspect-template-dropdown');
+        var deidentifyDropdown = document.getElementById('deidentify-template-dropdown');
+
+        // Check the Inspect Template Dropdown
+        if (inspectDropdown.options.length <= 0) {
+            inspectDropdown.style.display = 'none'; // Hide Dropdown
+            document.getElementById('inspect-template-msg').style.display = 'block'; // Show Message
         } else {
-            document.getElementById('toggle-dlp-filter-section-div').style.display = 'none'
-            document.getElementById('toggle-nlp-filter-section-div').style.display = 'none'
+            inspectDropdown.style.display = 'block'; // Show Dropdown
+            document.getElementById('inspect-template-msg').style.display = 'none'; // Hide Message
         }
-        fetchDLPEnabled()
-        fetchNLPEnabled()
-    });
 
-    document.getElementById("toggle-dlp-filter-section").addEventListener("change", function() {
-        fetchDLPEnabled()
+        // Check the De-identify Template Dropdown
+        if (deidentifyDropdown.options.length <= 0) {
+            deidentifyDropdown.style.display = 'none'; // Hide Dropdown
+            document.getElementById('deidentify-template-msg').style.display = 'block'; // Show Message
+        } else {
+            deidentifyDropdown.style.display = 'block'; // Show Dropdown
+            document.getElementById('deidentify-template-msg').style.display = 'none'; // Hide Message
+        }
     });
 
     document.getElementById("toggle-nlp-filter-section").addEventListener("change", function() {
@@ -141,10 +141,9 @@ function autoResizeTextarea() {
 // Function to handle the visibility of filter section
 function toggleNlpFilterSection(nlpEnabled) {
     var filterOptions = document.getElementById("nlp-filter-section");
-    var checkbox = document.getElementById('toggle-filters');
     var nlpCheckbox = document.getElementById('toggle-nlp-filter-section');
 
-    if (nlpEnabled && checkbox.checked && nlpCheckbox.checked) {
+    if (nlpEnabled && nlpCheckbox.checked) {
         filterOptions.style.display = "block";
     } else {
         filterOptions.style.display = "none";
@@ -163,13 +162,13 @@ function updateNLPValue() {
         // Determine the color based on the value
         let color;
         if (value <= 25) {
-            color = '#EA4335'; // Red
+            color = '#4285F4'; // Blue
         } else if (value <= 50) {
-            color = '#FBBC05'; // Yellow
-        } else if (value <= 75) {
             color = '#34A853'; // Green
+        } else if (value <= 75) {
+            color = '#FBBC05'; // Yellow
         } else {
-            color = '#4285F4'; // Blue
+            color = '#EA4335'; // Red
         }
 
         // Apply the color to the slider through a gradient
@@ -202,9 +201,8 @@ function fetchNLPEnabled() {
 // Function to handle the visibility of filter section
 function toggleDLPFilterSection(dlpEnabled) {
     var filterOptions = document.getElementById("dlp-filter-section");
-    var checkbox = document.getElementById('toggle-filters');
     var dlpCheckbox = document.getElementById('toggle-dlp-filter-section');
-    if (dlpEnabled && checkbox.checked && dlpCheckbox.checked) {
+    if (dlpEnabled && dlpCheckbox.checked) {
         filterOptions.style.display = "block";
     } else {
         filterOptions.style.display = "none";
diff --git a/applications/rag/frontend/container/static/styles.css b/applications/rag/frontend/container/static/styles.css
index 42933ebda..4d6ae030a 100644
--- a/applications/rag/frontend/container/static/styles.css
+++ b/applications/rag/frontend/container/static/styles.css
@@ -135,13 +135,8 @@ input[type="submit"]:disabled {
     box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: adds a slight shadow for depth */
 }
 
-#filter-section-toggle {
-    margin-bottom: 20px;
-}
-
 #dlp-filter-section,
 #nlp-filter-section {
-    display: none; /* Initially hidden, shown when respective toggle is checked */
     margin-top: 20px;
 }
 
diff --git a/applications/rag/frontend/container/templates/index.html b/applications/rag/frontend/container/templates/index.html
index 6caa743ac..c61db816a 100644
--- a/applications/rag/frontend/container/templates/index.html
+++ b/applications/rag/frontend/container/templates/index.html
@@ -35,36 +35,40 @@
 
   <!-- Filter Options Section -->
   <div id="filter-section">
-    <div id="filter-section-toggle">
-      <label for="toggle-filters">Enable Filters:</label>
-      <input type="checkbox" id="toggle-filters">
-    </div>
-
     <!-- Checkbox to toggle template-section -->
-    <div id="toggle-dlp-filter-section-div" style="display: none;">
-      <label for="toggle-dlp-filter-section">Show Sensitive Data Protection Templates:</label>
+    <div id="toggle-dlp-filter-section-div">
+      <label for="toggle-dlp-filter-section"><a href="https://cloud.google.com/security/products/dlp?hl=en">Data Loss Prevention (DLP)</a> </label>
       <input type="checkbox" id="toggle-dlp-filter-section">
     </div>
 
     <!-- Dropdown for inspect_templates and deidentify_templates for dlp filter -->
     <div id="dlp-filter-section" style="display: none;">
-      <select id="inspect-template-dropdown">
-        <!-- Options will be dynamically added here -->
-      </select>
-      <select id="deidentify-template-dropdown">
-        <!-- Options will be dynamically added here -->
-      </select>
+      <div id="inspect-template-dropdown-div">
+        <label for="inspect-template-dropdown">Inspect template, <a href="https://cloud.google.com/sensitive-data-protection/docs/creating-templates-inspect">how to create inspect template</a> </label>
+        <select id="inspect-template-dropdown">
+          <!-- Options will be dynamically added here -->
+        </select>
+        <p id="inspect-template-msg" style="display: none;">Please go to your project to create the inspect template.</p>
+      </div>
+
+      <div id="deidentify-template-dropdown-div">
+        <label for="deidentify-template-dropdown">De-identification template, <a href="https://cloud.google.com/sensitive-data-protection/docs/creating-templates-deid">how to create de-identification template</a></label>
+        <select id="deidentify-template-dropdown">
+          <!-- Options will be dynamically added here -->
+        </select>
+        <p id="deidentify-template-msg" style="display: none;">Please go to your project to create the de-identification template.</p>
+      </div>
     </div>
 
     <!-- Checkbox to toggle nlp-filter-section -->
-    <div id="toggle-nlp-filter-section-div" style="display: none;">
-      <label for="toggle-nlp-filter-section">Show NLP Filter Range:</label>
+    <div id="toggle-nlp-filter-section-div">
+      <label for="toggle-nlp-filter-section"><a href="https://cloud.google.com/natural-language/docs/moderating-text">Text moderation</a>  analyzes a document against a list of safety attributes, which include "harmful categories" and topics that may be considered sensitive.</label>
       <input type="checkbox" id="toggle-nlp-filter-section">
     </div>
 
     <!-- NLP Filter Slider -->
     <div id="nlp-filter-section" style="display: none;">
-      <label for="nlp-range">Cloud Natural Language text moderation Level (Lower value more restrict):</label>
+      <label for="nlp-range">Set the bar to a higher value for more moderation</label>
       <input type="range" id="nlp-range" min="0" max="100" value="50">
       <span id="nlp-value">50</span>
     </div>