CalvinBackup/agentic_security
1
0
Fork 0
mirror of https://github.com/msoedov/agentic_security.git synced 2026-06-24 06:09:55 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(Update UX):

Browse Source
This commit is contained in:
Alexander Myasoedov
2024-12-28 11:32:17 +02:00
parent e5669911ce
commit 4429a1bd80
3 changed files with 66 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
agentic_security/static/base.js
+29 -3
View File
@@ -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
}
agentic_security/static/index.html
+25 -2
View File
@@ -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>
agentic_security/static/main.js
+12 -23
View File
@@ -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;