Merge branch 'main' into structural-edits

Author: jfparie

.github/workflows/deploy.yaml

@@ -12,6 +12,8 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v2
+        with:
+          submodules: recursive # Fetches and initializes submodules
 
       - name: Set up AWS credentials
         uses: aws-actions/configure-aws-credentials@v1

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src/schemas"]
+	path = src/schemas
+	url = https://github.com/NGO-Algorithm-Audit/AI-Act-Questions.git

NOTICE.txt

@@ -0,0 +1,2 @@
+This product includes software developed at
+Stichting Algorithm Audit (https://algorithmaudit.eu/).

README.md

@@ -1,14 +1,13 @@
-# AI documentation templates
+# AI Act Implementation Tool
 
-Open-source templates for model documentation. Based on AI Act requirements and soft law frameworks, such as the Research framework Algorithms of the Netherlands Executive Audit Agency, the Algorithm framework of the Dutch Ministry of the Interior and the Dutch Fundamental Rights Impact Assessment (IAMA).
-
-The templates are available in JSON format and can be easily customized to fit the specific needs of an organization.
+Opinionated implementation of [AI act questions](https://github.com/NGO-Algorithm-Audit/AI-Act-Questions) created by the Algorithm Audit team.
 
 # How to run
 
-Follow these steps to set up and run the application on your local machine.
+This project includes a Git submodule that references the JSON Schemas repository (LINK), allowing us to keep schema definitions separate while using them within this project. Follow these steps to setup everything correctly.
 
 ## Prerequisites
+
 Ensure the following are installed on your system:
 
 Node.js (version 14 or later)
@@ -20,14 +19,24 @@ node -v
 npm -v
 ```
 
-First, clone the repository to your local machine. Open your terminal and run:
+##### 1. Clone the repository to your local machine. Open your terminal and run:
 
 ```bash
 git clone https://github.com/your-username/your-repo-name.git
 cd your-repo-name
 ```
 
-Once inside the project directory, install the necessary packages by running:
+##### 2. JSON Schemas Submodule
+
+```bash
+# If you’re cloning this repository for the first time, or if you haven't initialized the submodule yet
+git submodule update --init --recursive
+
+# To update the submodule from the remote.
+git submodule update --remote --merge
+```
+
+##### 3. Once inside the project directory, install the necessary packages by running:
 
 ```bash
 # If you use npm
@@ -37,31 +46,29 @@ npm install
 yarn install
 ```
 
-After the dependencies are installed, start the development server with:
+##### 4. After the dependencies are installed, start the development server with:
 
 ```bash
 # If using npm
-npm start
+npm run dev
 
 # Or, if using yarn
-yarn start
+yarn dev
 ```
 
 This command will compile and serve the application. By default, it should be accessible at http://localhost:5173 in your web browser.
 
 # How it works.
 
-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.
+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.
+
+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.
 
 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.
 
 Changes we made to the original specification:
 
-### 1. Multi form support
-
-To show multiple forms on the starting page, we always place our form specifications inside an array. [See our forms](./src/assets/forms.json)
-
-### 2. Output
+### 1. Output
 
 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:
 
@@ -77,27 +84,19 @@ This allows us to have multiple different outcomes in one template that each are
 
 In case a form ends without an `output` question we automatically trigger an error component.
 
-### 3. uiSchema integration
-
-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)
+### 2. Intermediate output
 
-Example:
+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:
 
 ```json
-{
-    "title": "Hello World",
-    "type": "object",
-    "required": ["question1"],
-    "properties": {...},
-    "dependencies": {...},
-    "uiSchema": {
-        "question1": {
-            "ui:autofocus": true
-        }
-    }
+"outputIntermediate": {
+    "ui:widget": "textarea",
+    "ui:classNames": "intermediate-output"
 }
 ```
 
+In this example we trigger this for the input element `outputIntermediate` but this mechanism can be used for any question.
+
 # Styling overrides
 
 With these css variables defined in the root where the frontend is injected the default theming can be overriden.

index.html

@@ -6,7 +6,7 @@
     <title>AI Documentatie</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="AIActImplementationTool"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>