You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+13-23Lines changed: 13 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,7 +32,7 @@ cd your-repo-name
32
32
# If you’re cloning this repository for the first time, or if you haven't initialized the submodule yet
33
33
git submodule update --init --recursive
34
34
35
-
# To update the submodule
35
+
# To update the submodule from the remote.
36
36
git submodule update --remote --merge
37
37
```
38
38
@@ -53,24 +53,22 @@ yarn install
53
53
npm run dev
54
54
55
55
# Or, if using yarn
56
-
yarn start
56
+
yarn dev
57
57
```
58
58
59
59
This command will compile and serve the application. By default, it should be accessible at http://localhost:5173 in your web browser.
60
60
61
61
# How it works.
62
62
63
-
This implementation extends the [React JSON Schema Form (RJSF) library](https://github.com/rjsf-team/react-jsonschema-form) to create a step-by-step wizard interface. Instead of displaying all form fields at once, it presents them one at a time, with validation and navigation controls.
63
+
The actual form schema's are specified in [AI act questions repository.](https://github.com/NGO-Algorithm-Audit/AI-Act-Questions) And this repository is used as a git sub module in this repository.
64
+
65
+
This rendering implementation extends the [React JSON Schema Form (RJSF) library](https://github.com/rjsf-team/react-jsonschema-form) to create a step-by-step wizard interface. Instead of displaying all form fields at once, it presents them one at a time, with validation and navigation controls.
64
66
65
67
The original specification is still applicable so please read the [RSJF documentation](https://rjsf-team.github.io/react-jsonschema-form/docs/) for information about how the forms work.
66
68
67
69
Changes we made to the original specification:
68
70
69
-
### 1. Multi form support
70
-
71
-
To show multiple forms on the starting page, we always place our form specifications inside an array. [See our forms](./src/assets/forms.json)
72
-
73
-
### 2. Output
71
+
### 1. Output
74
72
75
73
The templates should return an outcome after the questions, to show this result we trigger the results component when the question key is `output`. For example:
76
74
@@ -86,27 +84,19 @@ This allows us to have multiple different outcomes in one template that each are
86
84
87
85
In case a form ends without an `output` question we automatically trigger an error component.
88
86
89
-
### 3. uiSchema integration
87
+
### 2. Intermediate output
90
88
91
-
To simplify importing the json templates into our front-end we specificy our [uiSchema](https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema) inside the original [object properties](https://rjsf-team.github.io/react-jsonschema-form/docs/json-schema/objects)
92
-
93
-
Example:
89
+
To show intermediate outputs or simple text messages to the user we trigger a classname on such elements, to prevent the content from rendering as an input. This is done by adding the following uiSchema definition:
94
90
95
91
```json
96
-
{
97
-
"title": "Hello World",
98
-
"type": "object",
99
-
"required": ["question1"],
100
-
"properties": {...},
101
-
"dependencies": {...},
102
-
"uiSchema": {
103
-
"question1": {
104
-
"ui:autofocus": true
105
-
}
106
-
}
92
+
"outputIntermediate": {
93
+
"ui:widget": "textarea",
94
+
"ui:classNames": "intermediate-output"
107
95
}
108
96
```
109
97
98
+
In this example we trigger this for the input element `outputIntermediate` but this mechanism can be used for any question.
99
+
110
100
# Styling overrides
111
101
112
102
With these css variables defined in the root where the frontend is injected the default theming can be overriden.
0 commit comments