From 4429a1bd80f49d4c1b753bf994b2ef2d17df5dbd Mon Sep 17 00:00:00 2001
From: Alexander Myasoedov <msoedov@gmail.com>
Date: Sat, 28 Dec 2024 11:32:17 +0200
Subject: [PATCH] feat(Update UX):

---
 agentic_security/static/base.js    | 32 ++++++++++++++++++++++++---
 agentic_security/static/index.html | 27 +++++++++++++++++++++--
 agentic_security/static/main.js    | 35 ++++++++++--------------------
 3 files changed, 66 insertions(+), 28 deletions(-)

diff --git a/agentic_security/static/base.js b/agentic_security/static/base.js
index 47ba7a0..8cdfd01 100644
--- a/agentic_security/static/base.js
+++ b/agentic_security/static/base.js
@@ -110,9 +110,6 @@ let LLM_CONFIGS = [
 
 ]
 
-
-// todo: add filters based on the type of API spec for pre built datasets
-
 function has_image(spec) {
   return spec.includes('<<BASE64_IMAGE>>');
 }
@@ -120,3 +117,32 @@ function has_image(spec) {
 function has_files(spec) {
   return spec.includes('multipart/form-data');
 }
+
+
+function _getFailureRateColor(failureRate) {
+  // We're now working with the strength percentage, so no need to invert
+  const strengthRate = 100 - failureRate;
+
+  if (strengthRate >= 95) return 'text-green-400';
+  else if (strengthRate >= 85) return 'text-green-400';
+  else if (strengthRate >= 75) return 'text-green-500';
+  else if (strengthRate >= 65) return 'text-yellow-400';
+  else if (strengthRate >= 55) return 'text-yellow-500';
+  else if (strengthRate >= 45) return 'text-orange-400';
+  else if (strengthRate >= 35) return 'text-orange-500';
+  else if (strengthRate >= 25) return 'text-dark-accent-red';
+  else if (strengthRate >= 15) return 'text-red-400';
+  else if (strengthRate > 0) return 'text-red-500';
+  else return 'text-gray-100'; // This can be the default for strengthRate of 0 or less
+}
+
+function _getFailureRateScore(failureRate) {
+  // Convert failureRate to a strength percentage
+  const strengthRate = 100 - failureRate;
+
+  if (strengthRate >= 90) return 'A';
+  else if (strengthRate >= 80) return 'B';
+  else if (strengthRate >= 70) return 'C';
+  else if (strengthRate >= 60) return 'D';
+  else return 'E'; // For strengthRate less than 60
+}
diff --git a/agentic_security/static/index.html b/agentic_security/static/index.html
index 04f9dcf..21d7686 100644
--- a/agentic_security/static/index.html
+++ b/agentic_security/static/index.html
@@ -96,7 +96,7 @@
             <div v-if="okMsg"
               class="bg-dark-accent-green bg-opacity-20 border border-dark-accent-green text-dark-accent-green px-4 py-3 rounded-lg relative"
               role="alert">
-              <strong class="font-bold">&gt;</strong>
+              <strong class="font-bold">></strong>
               <span class="block sm:inline">{{okMsg}}</span>
             </div>
 
@@ -296,9 +296,20 @@
 
           <div v-show="showModules" class="mt-4">
             <!-- Many-shot jailbreaking Toggle -->
+            <div v-if="enableMultiStepAttack" class="alert-box mt-4">
+              <div
+                class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded relative"
+                role="alert">
+                <strong class="font-bold">Notice:</strong>
+                <span class="block sm:inline">A many-shot attack might take a
+                  longer time to complete.
+                </span>
+              </div>
+            </div>
             <div class="flex items-center justify-between mb-2 mt-10">
               <h3 class="text-lg font-semibold">Enable Many-shot
                 jailbreaking</h3>
+
               <label class="relative inline-flex items-center cursor-pointer">
                 <input type="checkbox" v-model="enableMultiStepAttack"
                   class="sr-only peer">
@@ -310,6 +321,18 @@
               When enabled, the scan will attempt Many-shot jailbreaking
               simulations
             </p>
+
+            <div v-if="hasFileSpec" class="alert-box mt-10">
+              <div
+                class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded relative"
+                role="alert">
+                <strong class="font-bold">Notice:</strong>
+                <span class="block sm:inline">Converting audio or image prompts
+                  might
+                  take some time to compute.</span>
+              </div>
+            </div>
+
             <div class="flex justify-between mb-4 mt-4">
               <button @click="selectAllPackages"
                 class="text-dark-accent-green hover:underline">Select
@@ -347,7 +370,7 @@
         <div v-if="okMsg"
           class="bg-dark-accent-green bg-opacity-20 border border-dark-accent-green text-dark-accent-green px-4 py-3 rounded-lg relative"
           role="alert">
-          <strong class="font-bold">&gt;</strong>
+          <strong class="font-bold">></strong>
           <span class="block sm:inline">{{okMsg}}</span>
         </div>
 
diff --git a/agentic_security/static/main.js b/agentic_security/static/main.js
index 6e4f16e..1f760c5 100644
--- a/agentic_security/static/main.js
+++ b/agentic_security/static/main.js
@@ -52,7 +52,16 @@ var app = new Vue({
         },
         displayedLogs() {
             return this.logs.slice(-this.maxDisplayedLogs).reverse();
-        }
+        },
+        hasImageSpec() {
+            return has_image(this.modelSpec);
+        },
+        hasAudioSpec() {
+            return has_files(this.modelSpec);
+        },
+        hasFileSpec() {
+            return has_files(this.modelSpec) || has_image(this.modelSpec);
+        },
     },
     methods: {
         acceptConsent() {
@@ -204,30 +213,10 @@ var app = new Vue({
 
         },
         getFailureRateScore(failureRate) {
-            // Convert failureRate to a strength percentage
-            const strengthRate = 100 - failureRate;
-
-            if (strengthRate >= 90) return 'A';
-            else if (strengthRate >= 80) return 'B';
-            else if (strengthRate >= 70) return 'C';
-            else if (strengthRate >= 60) return 'D';
-            else return 'E'; // For strengthRate less than 60
+            return _getFailureRateScore(failureRate);
         },
         getFailureRateColor(failureRate) {
-            // We're now working with the strength percentage, so no need to invert
-            const strengthRate = 100 - failureRate;
-
-            if (strengthRate >= 95) return 'text-green-400';
-            else if (strengthRate >= 85) return 'text-green-400';
-            else if (strengthRate >= 75) return 'text-green-500';
-            else if (strengthRate >= 65) return 'text-yellow-400';
-            else if (strengthRate >= 55) return 'text-yellow-500';
-            else if (strengthRate >= 45) return 'text-orange-400';
-            else if (strengthRate >= 35) return 'text-orange-500';
-            else if (strengthRate >= 25) return 'text-dark-accent-red';
-            else if (strengthRate >= 15) return 'text-red-400';
-            else if (strengthRate > 0) return 'text-red-500';
-            else return 'text-gray-100'; // This can be the default for strengthRate of 0 or less
+            return _getFailureRateColor(failureRate);
         },
         toggleParams() {
             this.showParams = !this.showParams;