From b11314f7c0f82b3883aa288444ae67ff5e822773 Mon Sep 17 00:00:00 2001 From: George Sproston <103250539+gsproston-scottlogic@users.noreply.github.com> Date: Tue, 8 Aug 2023 10:45:15 +0100 Subject: [PATCH] 48 attack jailbreak prompt (#86) * General css for strategies * Attack box * Slightly better strategy styling * Fixed attack id * Attack mechanism no longer highlighted on hover * TypeScript attacks * TypeScript AttackBox * Removed JS DefenceBox --- frontend/src/App.tsx | 3 ++ frontend/src/Attacks.ts | 11 +++++ .../src/components/AttackBox/AttackBox.tsx | 15 +++++++ .../components/AttackBox/AttackMechanism.tsx | 33 ++++++++++++++ .../src/components/DefenceBox/DefenceBox.tsx | 4 +- .../DefenceBox/DefenceMechanism.css | 44 +------------------ .../DefenceBox/DefenceMechanism.tsx | 15 ++++--- .../StrategyBox.css} | 2 +- .../StrategyBox/StrategyMechanism.css | 42 ++++++++++++++++++ frontend/src/models/attack.ts | 12 +++++ 10 files changed, 130 insertions(+), 51 deletions(-) create mode 100644 frontend/src/Attacks.ts create mode 100644 frontend/src/components/AttackBox/AttackBox.tsx create mode 100644 frontend/src/components/AttackBox/AttackMechanism.tsx rename frontend/src/components/{DefenceBox/DefenceBox.css => StrategyBox/StrategyBox.css} (74%) create mode 100644 frontend/src/components/StrategyBox/StrategyMechanism.css create mode 100644 frontend/src/models/attack.ts diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 0d73cc982..6a4279038 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,4 +1,5 @@ import "./App.css"; +import AttackBox from "./components/AttackBox/AttackBox"; import ChatBox from "./components/ChatBox/ChatBox"; import DefenceBox from "./components/DefenceBox/DefenceBox"; import EmailBox from "./components/EmailBox/EmailBox"; @@ -23,6 +24,8 @@ function App() {
defence mechanisms
+
attack mechanisms
+
diff --git a/frontend/src/Attacks.ts b/frontend/src/Attacks.ts new file mode 100644 index 000000000..aac7640ce --- /dev/null +++ b/frontend/src/Attacks.ts @@ -0,0 +1,11 @@ +import { ATTACK_TYPES, AttackInfo } from "./models/attack"; + +const ATTACKS: AttackInfo[] = [ + { + id: ATTACK_TYPES.JAILBREAK_PROMPT, + name: "jailbreak prompt", + info: "using prompt injection, get the chat bot in a state where it no longer follows its original instructions.", + }, +]; + +export default ATTACKS; diff --git a/frontend/src/components/AttackBox/AttackBox.tsx b/frontend/src/components/AttackBox/AttackBox.tsx new file mode 100644 index 000000000..7f5107afe --- /dev/null +++ b/frontend/src/components/AttackBox/AttackBox.tsx @@ -0,0 +1,15 @@ +import "../StrategyBox/StrategyBox.css"; +import AttackMechanism from "./AttackMechanism"; +import ATTACKS from "../../Attacks"; + +function AttackBox() { + return ( +
+ {ATTACKS.map((attack, index) => { + return ; + })} +
+ ); +} + +export default AttackBox; diff --git a/frontend/src/components/AttackBox/AttackMechanism.tsx b/frontend/src/components/AttackBox/AttackMechanism.tsx new file mode 100644 index 000000000..5cba1e7a6 --- /dev/null +++ b/frontend/src/components/AttackBox/AttackMechanism.tsx @@ -0,0 +1,33 @@ +import { AttackInfo } from "../../models/attack"; +import "../StrategyBox/StrategyMechanism.css"; +import React from "react"; + +function DefenceMechanism({ attack }: { attack: AttackInfo }) { + const [isInfoBoxVisible, setIsInfoBoxVisible] = React.useState(false); + + return ( + +
+
+ {attack.name} + { + setIsInfoBoxVisible(true); + }} + onMouseLeave={() => { + setIsInfoBoxVisible(false); + }} + > + ? + +
+ {isInfoBoxVisible ? ( +
{attack.info}
+ ) : null} +
+ + ); +} + +export default DefenceMechanism; diff --git a/frontend/src/components/DefenceBox/DefenceBox.tsx b/frontend/src/components/DefenceBox/DefenceBox.tsx index 6729b6d25..72c0258dc 100644 --- a/frontend/src/components/DefenceBox/DefenceBox.tsx +++ b/frontend/src/components/DefenceBox/DefenceBox.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import "./DefenceBox.css"; +import "../StrategyBox/StrategyBox.css"; import DefenceMechanism from "./DefenceMechanism"; import { getActiveDefences, @@ -70,7 +70,7 @@ function DefenceBox({ triggeredDefences }: { triggeredDefences: string[] }) { }, [defenceDetails]); return ( -
+
{defenceDetails.map((defenceDetail, index) => { return ( -
- {defenceDetail.name} +
+ {defenceDetail.name} { setIsInfoBoxVisible(true); }} @@ -69,7 +70,9 @@ function DefenceMechanism({
{isInfoBoxVisible ? ( -
{defenceDetail.info}
+
+ {defenceDetail.info} +
) : null}
diff --git a/frontend/src/components/DefenceBox/DefenceBox.css b/frontend/src/components/StrategyBox/StrategyBox.css similarity index 74% rename from frontend/src/components/DefenceBox/DefenceBox.css rename to frontend/src/components/StrategyBox/StrategyBox.css index f1b73c3c9..50f2870f9 100644 --- a/frontend/src/components/DefenceBox/DefenceBox.css +++ b/frontend/src/components/StrategyBox/StrategyBox.css @@ -1,4 +1,4 @@ -#defence-box { +#strategy-box { padding: 16px 32px; position: relative; } diff --git a/frontend/src/components/StrategyBox/StrategyMechanism.css b/frontend/src/components/StrategyBox/StrategyMechanism.css new file mode 100644 index 000000000..e43ce5381 --- /dev/null +++ b/frontend/src/components/StrategyBox/StrategyMechanism.css @@ -0,0 +1,42 @@ +.strategy-mechanism { + border-color: #ccc; + border-radius: 8px; + border-style: solid; + border-width: 1px; + padding: 6px; + margin: 1px; + margin-bottom: 8px; + cursor: default; +} + +.strategy-mechanism-header { + display: flex; + justify-content: space-between; +} + +.strategy-mechanism-info { + display: flex; + align-items: center; + justify-content: center; + border-color: #ccc; + border-radius: 10px; + border-style: solid; + border-width: 1px; + height: 20px; + width: 20px; + background-color: #ddd; + color: #444; +} + +.strategy-mechanism-info span { + position: relative; + bottom: 1px; +} + +.strategy-mechanism-info-box { + border-color: #ccc; + border-style: solid; + border-width: 1px 0 0 0; + font-size: 14px; + margin-top: 4px; +} diff --git a/frontend/src/models/attack.ts b/frontend/src/models/attack.ts new file mode 100644 index 000000000..cf0b51d9d --- /dev/null +++ b/frontend/src/models/attack.ts @@ -0,0 +1,12 @@ +enum ATTACK_TYPES { + JAILBREAK_PROMPT = "JAILBREAK_PROMPT", +} + +interface AttackInfo { + id: ATTACK_TYPES; + name: string; + info: string; +} + +export { ATTACK_TYPES }; +export type { AttackInfo };