Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

269 group defences #318

Merged
merged 9 commits into from
Sep 28, 2023
Merged

269 group defences #318

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
837d332
Grouped defences
gsproston-scottlogic Sep 22, 2023
09e4b7f
Better html grouping
gsproston-scottlogic Sep 22, 2023
4912f3e
Removed strategy box
gsproston-scottlogic Sep 22, 2023
91cde08
Visually clearer grouping
gsproston-scottlogic Sep 22, 2023
7ec146f
Rounded corners on control section
gsproston-scottlogic Sep 22, 2023
3af6d67
Using some rather than find
gsproston-scottlogic Sep 26, 2023
9c86336
Using details html elements
gsproston-scottlogic Sep 26, 2023
fd6e601
Better html DRY principles
gsproston-scottlogic Sep 26, 2023
4da8c55
Fix merge conflicts
gsproston-scottlogic Sep 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/src/components/ApiKeyBox/ApiKeyBox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@

#viewKey {
color: grey;
font-size: 16px;
font-size: 1rem;
}

.status-text {
position: relative;
text-align: center;
margin-top: 10px;
font-size: 14px;
font-size: 0.875rem;
}

.invalidated {
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/ChatBox/ChatBox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
display: flex;
flex-direction: column;
width: 100%;
font-size: 12px;
font-size: 0.75rem;
padding: 32px;
box-sizing: border-box;
}
Expand All @@ -36,6 +36,7 @@
min-height: 53px;
overflow-y: auto;

/* must inherit to override textarea */
font-size: inherit;
font-family: inherit;
color: white;
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/ChatBox/ChatBoxInfoText.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
.chat-box-info-text {
color: var(--chat-info-text-colour);
font-size: 14px;
font-size: 0.875rem;
padding-top: 16px;
}

.chat-box-info-defence-alerted-text {
color: var(--chat-alerted-text-colour);
font-size: 14px;
font-size: 0.875rem;
padding-top: 16px;
}

.chat-box-info-defence-triggered-text {
color: var(--chat-triggered-text-colour);
font-size: 14px;
font-size: 0.875rem;
padding-top: 16px;
}
20 changes: 2 additions & 18 deletions frontend/src/components/ControlPanel/ControlPanel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
#control-panel {
display: flex;
flex-direction: column;
height: 100%;
}

#control-strategy {
padding: 30px;
overflow-y: auto;
padding: 30px;
}

.control-collapsible-section {
background-color: var(--control-body-background-colour);
margin-bottom: 12px;
border-radius: 8px;
overflow: hidden;
Expand All @@ -20,15 +16,3 @@
padding: 12px 14px;
cursor: default;
}

.control-collapsible-section-body {
/* hide this */
display: none;

background-color: var(--control-body-background-colour);
}

.control-collapsible-section-body-active {
/* show this */
display: block;
}
113 changes: 41 additions & 72 deletions frontend/src/components/ControlPanel/ControlPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function ControlPanel({
DEFENCE_TYPES.LLM_EVALUATION,
DEFENCE_TYPES.QA_LLM_INSTRUCTIONS,
DEFENCE_TYPES.SYSTEM_ROLE,
].find((id) => id === defence.id);
].some((id) => id === defence.id);
});
}

Expand All @@ -47,82 +47,51 @@ function ControlPanel({
DEFENCE_TYPES.LLM_EVALUATION,
DEFENCE_TYPES.QA_LLM_INSTRUCTIONS,
DEFENCE_TYPES.SYSTEM_ROLE,
].find((id) => id === defence.id);
].some((id) => id === defence.id);
});
}

function toggleShowCollapsibleSection(sectionId: string) {
const section = document.getElementById(sectionId);
if (section) {
section.classList.toggle("control-collapsible-section-body-active");
}
}

return (
<div id="control-panel">
<div id="control-strategy">
{/* hide defence box on levels 1 and 2 */}
{(currentLevel === LEVEL_NAMES.LEVEL_3 ||
currentLevel === LEVEL_NAMES.SANDBOX) && (
<div className="control-collapsible-section">
<div
className="control-collapsible-section-header"
// toggle show body on click
onClick={() => {
toggleShowCollapsibleSection("control-defence-configuration");
}}
>
Defence Configuration
</div>
<div
id="control-defence-configuration"
className="control-collapsible-section-body"
>
<DefenceBox
currentLevel={currentLevel}
defences={getDefencesConfigure()}
showConfigurations={
// only allow configuration in sandbox
currentLevel === LEVEL_NAMES.SANDBOX ? true : false
}
setDefenceActive={setDefenceActive}
setDefenceInactive={setDefenceInactive}
setDefenceConfiguration={setDefenceConfiguration}
/>
</div>
</div>
)}
{/* only show model selection box in sandbox mode */}
{currentLevel === LEVEL_NAMES.SANDBOX && (
<div className="control-collapsible-section">
<div
className="control-collapsible-section-header"
// toggle show body on click
onClick={() => {
toggleShowCollapsibleSection("control-model-configuration");
}}
>
Model Configuration
</div>
<div
id="control-model-configuration"
className="control-collapsible-section-body"
>
<DefenceBox
currentLevel={currentLevel}
defences={getDefencesModel()}
showConfigurations={true}
setDefenceActive={setDefenceActive}
setDefenceInactive={setDefenceInactive}
setDefenceConfiguration={setDefenceConfiguration}
/>
<ModelBox />
</div>
</div>
)}
{/* only show document viewer button in sandbox mode */}
{currentLevel === LEVEL_NAMES.SANDBOX && <DocumentViewButton />}
</div>
{/* hide defence box on levels 1 and 2 */}
{(currentLevel === LEVEL_NAMES.LEVEL_3 ||
currentLevel === LEVEL_NAMES.SANDBOX) && (
<details className="control-collapsible-section">
<summary className="control-collapsible-section-header">
Defence Configuration
</summary>
<DefenceBox
currentLevel={currentLevel}
defences={getDefencesConfigure()}
showConfigurations={
// only allow configuration in sandbox
currentLevel === LEVEL_NAMES.SANDBOX ? true : false
}
setDefenceActive={setDefenceActive}
setDefenceInactive={setDefenceInactive}
setDefenceConfiguration={setDefenceConfiguration}
/>
</details>
)}
{/* only show model selection box in sandbox mode */}
{currentLevel === LEVEL_NAMES.SANDBOX && (
<details className="control-collapsible-section">
<summary className="control-collapsible-section-header">
Model Configuration
</summary>
<DefenceBox
currentLevel={currentLevel}
defences={getDefencesModel()}
showConfigurations={true}
setDefenceActive={setDefenceActive}
setDefenceInactive={setDefenceInactive}
setDefenceConfiguration={setDefenceConfiguration}
/>
<ModelBox />
</details>
)}
{/* only show document viewer button in sandbox mode */}
{currentLevel === LEVEL_NAMES.SANDBOX && <DocumentViewButton />}
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/DefenceBox/DefenceConfiguration.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.defence-config-value {
background-color: var(--main-background-colour);
font-size: 14px;
font-size: 0.875rem;
padding: 2px 4px;
margin: 4px 0px;
min-height: 16px;
Expand Down
34 changes: 9 additions & 25 deletions frontend/src/components/DefenceBox/DefenceMechanism.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,25 @@
cursor: default;
}

.defence-mechanism-header {
.defence-mechanism header {
display: flex;
justify-content: space-between;
}

.defence-mechanism-info {
display: flex;
align-items: center;
justify-content: center;
height: 20px;
width: 20px;
.defence-mechanism header h4 {
font-size: 1rem;
font-style: normal;
font-weight: 400;
margin: 0;
}

.defence-mechanism-info span {
position: relative;
bottom: 1px;
}

.defence-mechanism-info-box {
font-size: 14px;
.defence-mechanism > .info-box {
font-size: 0.875rem;
margin-top: 4px;
}

.defence-mechanism-config {
font-size: 14px;
margin-top: 4px;
}

.defence-mechanism-config-validated {
margin-top: 10px;
margin-bottom: 10px;
}

.validation-text {
font-size: 14px;
font-size: 0.875rem;
font-weight: 600;
}

Expand Down
93 changes: 41 additions & 52 deletions frontend/src/components/DefenceBox/DefenceMechanism.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,60 +70,49 @@ function DefenceMechanism({
}

return (
<span>
<div
className="defence-mechanism defence-mechanism"
onClick={toggleDefenceInfo}
>
<div className="defence-mechanism-header">
<span>{defenceDetail.name}</span>
<label className="switch">
<input
type="checkbox"
placeholder="defence-toggle"
onChange={toggleDefence}
// set checked if defence is active
checked={defenceDetail.isActive}
/>
<span className="slider round"></span>
</label>
</div>
{isInfoBoxVisible ? (
<div className="defence-mechanism-info-box">
<div>{defenceDetail.info}</div>
<article className="defence-mechanism" onClick={toggleDefenceInfo}>
<header>
<h4>{defenceDetail.name}</h4>
<label className="switch">
<input
type="checkbox"
placeholder="defence-toggle"
onChange={toggleDefence}
// set checked if defence is active
checked={defenceDetail.isActive}
/>
<span className="slider round"></span>
</label>
</header>
{isInfoBoxVisible && (
<div className="info-box">
<p>{defenceDetail.info}</p>

{showConfigurations ? (
<div className="defence-mechanism-config">
{defenceDetail.config.map((config) => {
return (
<DefenceConfiguration
key={config.id}
isActive={defenceDetail.isActive}
config={config}
setConfigurationValue={setConfigurationValue}
/>
);
})}
</div>
) : null}
{showConfigurations &&
defenceDetail.config.map((config) => {
return (
<DefenceConfiguration
key={config.id}
isActive={defenceDetail.isActive}
config={config}
setConfigurationValue={setConfigurationValue}
/>
);
})}

{isConfigured ? (
<div className="defence-mechanism-config-validated">
{configValidated ? (
<p className="validation-text">
<TiTick /> defence successfully configured
</p>
) : (
<p className="validation-text">
<TiTimes /> invalid input - configuration failed
</p>
)}
</div>
) : null}
</div>
) : null}
</div>
</span>
{isConfigured &&
(configValidated ? (
<p className="validation-text">
<TiTick /> defence successfully configured
</p>
) : (
<p className="validation-text">
<TiTimes /> invalid input - configuration failed
</p>
))}
</div>
)}
</article>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh this is looking much better, nice use of article 👍

);
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/DocumentViewer/DocumentViewBox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
.document-popup-inner .close-button {
color: var(--main-accent-colour);
float: right;
font-size: 28px;
font-size: 1.75rem;
font-weight: bold;
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/DocumentViewer/DocumentViewButton.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,6 @@
border-width: 1px;
color: var(--main-button-inactive-text-colour);
cursor: pointer;
font-size: 16px;
font-size: 1rem;
padding: 5 12px;
}
Loading