Merge main into staging

site/_extensions/nrichers/preview/preview.css

@@ -1,8 +1,6 @@
 .preview {
   position: relative;
   display: inline-block;
-  width: 400px;
-  height: 225px;
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   background: #DE257E;

site/_extensions/nrichers/preview/preview.lua

@@ -15,20 +15,27 @@ end
 -- Main function to apply preview
 function Div(el)
   if el.classes:includes("preview") then
-    -- Get the `source` attribute, defaulting to "index.qmd" if missing
+    -- Get the `source`, `target`, `width`, `height`, and `offset` attributes, with defaults if not specified
     local source = el.attributes.source or "index.qmd"
-    source = source:gsub("%.qmd$", ".html")
+    local target = el.attributes.target or source
+    local width = el.attributes.width or "400"
+    local height = el.attributes.height or "225"
+    local offset = el.attributes.offset or "0"  -- Offset in pixels to crop from the top
 
-    -- Get the `target` attribute, defaulting to `source` if missing
-    local target = el.attributes.target or el.attributes.source or "index.qmd"
-    target = target:gsub("%.qmd$", ".html")
+    -- Convert .qmd to .html for non-external sources
+    if not source:match("^https?://") then
+      source = source:gsub("%.qmd$", ".html")
+    end
+    if not target:match("^https?://") then
+      target = target:gsub("%.qmd$", ".html")
+    end
 
-    -- Generate the HTML content for the preview div
+    -- Generate HTML with clip-path to crop the top content by the specified offset
     local iframeHtml = string.format(
-      '<div class="preview">\n' ..
-      '  <iframe src="%s" width="400" height="225"></iframe>\n' ..
+      '<div class="preview" style="width:%spx; height:%spx; overflow:hidden;">\n' ..
+      '  <iframe src="%s" style="width:100%%; height:calc(100%% + %spx); position:relative; top:-%spx; border:none; border-radius:5px;"></iframe>\n' ..
       '  <a href="%s" target="_blank"></a>\n' ..
-      '</div>', source, target
+      '</div>', width, height, source, offset, offset, target
     )
 
     -- Return the raw HTML to be inserted

site/_quarto.yml

@@ -96,6 +96,8 @@ website:
           - text: "Automated testing & documentation"
             file: about/overview-model-documentation.qmd
           - about/overview-model-risk-management.qmd
+        - text: "LLM features"
+          file: about/overview-llm-features.qmd
         - file: about/deployment/deployment-options.qmd
           text: "Deployment options"
           contents:

site/about/contributing/style-guide/conventions.qmd

@@ -1,6 +1,7 @@
 ---
 title: "Conventions"
 date: last-modified
+lightbox: true
 filters:
   - tachyons
   - preview
@@ -217,14 +218,14 @@ Using a markdown button also enables you to link to to the `.qmd` path instead o
   ```
   | Inline links in training | Footnotes in user guides | 
   |------|-----|
-  | ![](training_inline-links.png){fig-alt="A screenshot showing an example of inline links in training materials" class="screenshot"} | ![](user-guide_footenotes.png){fig-alt="A screenshot showing an example of margin footnotes in a user guide" class="screenshot"} |
+  | ![](training_inline-links.png){fig-alt="A screenshot showing an example of inline links in training materials" .screenshot} | ![](user-guide_footenotes.png){fig-alt="A screenshot showing an example of margin footnotes in a user guide" .screenshot} |
   : **Inline vs footnotes links** examples {.hover}
 
 Footnotes will automatically appear in the correct location in the margin, regardless of their origin or format.
 
 | Correct | Incorrect | 
 |------|-----|
-| ![](margin-footnotes_correct.png){fig-alt="A screenshot showing a correct example of footnote links automatically placed in the margin" class="screenshot"} | ![](inline-links_incorrect.png){fig-alt="A screenshot showing an incorrect example of supplementary links in inline instructional text" class="screenshot"} |
+| ![](margin-footnotes_correct.png){fig-alt="A screenshot showing a correct example of footnote links automatically placed in the margin" .screenshot} | ![](inline-links_incorrect.png){fig-alt="A screenshot showing an incorrect example of supplementary links in inline instructional text" .screenshot} |
 : **Margin footnotes** examples {.hover}
 
 ### Emphasis
@@ -305,11 +306,16 @@ aliases:
 
 - Screen captures of the UI or other elements to assist users with their tasks should have the `.screenshot` class applied to them, which will add a border distinguishing the image from the rest of the text.
 - When necessary, interactive elements within a larger complex screenshot should be highlighted for ease of comprehension.
+- For screenshots with lots of detail, append the `.lightbox` class to them to allow users to enlarge them. You can also enable `.lightbox` at the page level for all images by adding the following to the YAML header:
+
+```yaml
+lightbox: true
+```
 
 | Correct | Incorrect | 
 |------|-----|
-|   ![Verification email sent by ValidMind](/guide/configuration/verify-email.png){width=70% fig-alt="Screenshot of the verification email sent by ValidMind" class="screenshot"}  |  ![](screenshot-incorrect.png){width=90%} | 
-|  `![Verification email sent by ValidMind](/guide/configuration/verify-email.png){width=80% fig-alt="Screenshot of the verification email sent by ValidMind" class="screenshot"}` |  `![](/guide/configuration/verify-email.png){width=80%}`  |
+|   ![Verification email sent by ValidMind](/guide/configuration/verify-email.png){width=70% fig-alt="Screenshot of the verification email sent by ValidMind" .screenshot .lightbox}  |  ![](screenshot-incorrect.png){width=90%} | 
+|  `![Verification email sent by ValidMind](/guide/configuration/verify-email.png){width=80% fig-alt="Screenshot of the verification email sent by ValidMind" .screenshot .lightbox}` |  `![](/guide/configuration/verify-email.png){width=80%}`  |
 : **Screenshot** examples {.hover}
 
 #### Videos
@@ -462,7 +468,7 @@ Optional
 ```
 :::
 
-![Example of a course registration page](course-registration-page.png){fig-alt="A screenshot showing an example of a course registration page" class="screenshot" width=80%} 
+![Example of a course registration page](course-registration-page.png){fig-alt="A screenshot showing an example of a course registration page" .screenshot width=80%} 
 
 #### Course slides
 
@@ -499,7 +505,7 @@ Try it **live** on the next page. {{< fa hand-point-right >}}
 :::
 
 ::: {.w-50-ns}
-![Example of a training overlay](training-overlay.png){fig-alt="A screenshot showing an example of a training overlay" class="screenshot"} 
+![Example of a training overlay](training-overlay.png){fig-alt="A screenshot showing an example of a training overlay" .screenshot} 
 
 :::
 

site/about/deployment/deployment-options.qmd

@@ -1,6 +1,7 @@
 ---
 title: "Deployment options"
 date: last-modified
+lightbox: true
 listing:
   - id: validmind-deployment-options
     type: grid

site/about/deployment/multi-tenant-cloud.qmd

@@ -11,15 +11,15 @@ listing:
   contents:
     - path: https://validmind.com/contact/
       image: /assets/img/hero-platform.png
-      title: "Request a Demo"
+      title: "Request a demo"
       description: "Find out which ValidMind deployment is right for you by getting in touch."
+      author: validmind.com
 ---
 
 A _multi-tenant cloud deployment_ for {{< var vm.product >}} allows multiple customers to share the same infrastructure while ensuring strict data isolation to protect each tenant's information.
 
 ## What it is
 
-
 ![{{< var vm.product >}} multi-tenant cloud](multi-tenant-cloud.png){width="70%" fig-alt="An image showing one ValidMind multi-tenant cloud deployment"}
 
 Multi-tenant deployments maximize efficiency by sharing infrastructure among customers while maintaining separate data environments. This approach reduces costs, simplifies management, and scales easily. Centralized updates ensure all tenants benefit from the latest features simultaneously.

site/about/deployment/virtual-private-validmind.qmd

@@ -11,15 +11,18 @@ listing:
   contents:
     - path: https://validmind.com/contact/
       image: /assets/img/hero-platform.png
-      title: "Request a Demo"
+      title: "Request a demo"
       description: "Find out which ValidMind deployment is right for you by getting in touch."
+      author: validmind.com
 ---
 
 Virtual Private {{< var vm.product >}} (VPV) is a _single-tenant architecture_ where a single organization has exclusive access to its infrastructure, providing greater control, customization, and security. 
 
 ## What it is
 
-![Virtual Private {{< var vm.product >}} (VPV)](virtual-private-validmind.png){width="70%" fig-alt="An image showing a {{< var validmind.vpv >}} (single-tenant) cloud deployment"}
+<!-- Using the variable in the alt text messes up the display -->
+
+![Virtual Private {{< var vm.product >}} (VPV)](virtual-private-validmind.png){width="70%" fig-alt="An image showing a Virtual Private ValidMind (single-tenant) cloud deployment"}
 
 Virtual Private {{< var vm.product >}} allows organizations to operate in a fully isolated environment, enhancing security and reducing shared infrastructure risks.
 

site/about/overview-llm-features.qmd

@@ -0,0 +1,135 @@
+---
+title: "Large language model features"
+date: last-modified
+filters:
+  - tachyons
+  - preview
+---
+
+{{< var vm.product >}} offers several specialized features that use large language models (LLMs) to streamline model risk management and ensure regulatory compliance. Here's how we approach these features and what you need to know. 
+
+
+::: {.attn}
+## {{< fa list-check >}} Our philosophy
+
+:::: {.flex .flex-wrap .justify-around}
+
+::: {.w-25-ns .pt3 .pr4}
+![Document checker](overview-llm-features-check-document.png){fig-alt="A screenshot showing the LLM feature for checking documents that can be accessed with the Check Document button" .screenshot}
+:::
+
+::: {.w-75-ns}
+At {{< var vm.product >}}, our approach to AI features, particularly in testing and risk management, reflects a philosophy of _drinking our own champagne_ or using our own products. This means that while we create risk management tools for our users, we also rigorously apply these tools and practices within our own product development.
+
+Our testing methodologies and philosophy around testing are readily available, and we openly share information about our approach. Specific test results are also available on request, allowing us to demonstrate the same standards of robustness and compliance that we promote for our users.
+:::
+
+::::
+
+:::
+
+## Our features
+
+{{< var vm.product >}} enhances model documentation, testing, and compliance workflows, providing your team with tools for effective model governance.
+
+
+::: {.column-margin .pl3 .pt6}
+![Document checker in progress](overview-llm-features-check-document-in-progress.gif){fig-alt="A screenshot showing the LLM feature for checking documents that can be accessed with the Check Document button" .screenshot .lightbox}
+:::
+
+:::: {.flex .flex-wrap .justify-around}
+
+::: {.w-50-ns .pr2}
+### Test interpretation
+
+Interprets results from tests run within {{< var vm.product >}}. This feature generates a description of the tests, highlights key insights from the outcomes, and provides a summary with actionable takeaways.
+
+::: {.feature}
+Why it matters
+: Test interpretation makes it easier for developers and validators to understand the implications of each test.
+:::
+
+### Risk assessment
+
+Using data from test results, generates a tailored risk assessment for each section of model documentation. This feature aids in identifying potential risks based on the model’s performance and results.
+
+::: {.feature}
+Why it matters
+: Risk assessment provides a foundation for better-informed decision-making.
+
+:::
+
+:::
+
+::: {.w-50-ns .pl2 .pr2}
+### Qualitative checks
+
+Leverages metadata from the model inventory, test outcomes, and additional data provided to create qualitative sections within model documentation. 
+<br>
+<br>
+
+::: {.feature}
+Why it matters
+: Qualitative checks ensure that essential contextual information is accurately documented and aligned with the model's purpose and scope.
+:::
+
+### Document checker
+
+Reviews model development documentation to ensure it aligns with relevant regulatory requirements. 
+<br>
+<br>
+<br>
+
+::: {.feature}
+Why it matters
+: Document checks help teams maintain compliance with specific regulations by flagging areas that may need revision.
+:::
+
+<!-- NR Nov 2024 Uncomment when available -->
+<!-- ### Section checker
+
+Assesses each part of the model documentation for adherence to internal guidelines and policies. This tool supports consistent documentation standards across the organization, promoting uniformity in compliance practices. -->
+:::
+
+::::
+
+
+## What's next
+
+<!-- :::{#llm-whats-next}
+::: -->
+
+:::: {.flex .flex-wrap .justify-around}
+
+::: {.w-50-ns}
+### A commitment to transparency
+
+Understanding our policies shouldn’t feel like deciphering code, so we’ve made our legal texts as clear and accessible as possible. 
+These documents detail our practices in data handling, privacy, [AI usage policy](https://validmind.com/about/legal/ai-usage-policy/), and regulatory compliance.
+:::
+
+::: {.w-50-ns}
+### Try it yourself
+
+Discover how {{< var vm.product >}}’s LLM-powered platform, purpose-built for model risk management teams, enables streamlined and confident testing, documentation, validation, and governance of generative AI models and processes.
+:::
+
+::: {.w-50-ns}
+
+::: {.preview source="https://validmind.com/about/legal" height="240" width="430" offset="90"}
+:::
+
+:::
+
+::: {.w-50-ns}
+
+::: {.preview source="https://validmind.com/contact/" height="240" width="430" offset="90"}
+:::
+
+:::
+
+::::
+
+<!-- FOOTNOTES -->
+
+<!-- [^1]: [Run tests and test suites](//developer/model-testing/testing-overview.qmd) -->

site/about/overview-model-documentation.qmd

@@ -1,6 +1,7 @@
 ---
 title: "Automated model testing & documentation"
 date: last-modified
+lightbox: true
 filters:
   - tachyons
 aliases:

site/about/overview-model-risk-management.qmd

@@ -36,7 +36,7 @@ The {{< var validmind.platform >}} provides a comprehensive suite of tools, guid
 
 <!-- Using the variable in alt text messes up the image display  -->
 
-![The two main components of ValidMind. The developer framework that integrates with your existing developer environment, and the ValidMind AI risk platform.](overview-platform-ui.png){width=80% fig-alt="An image showing the two main components of ValidMind. The developer framework that integrates with your existing developer environment, and the ValidMind AI risk platform."}
+![The two main components of ValidMind. The developer framework that integrates with your existing developer environment, and the ValidMind AI risk platform.](overview-platform-ui.png){width=80% fig-alt="An image showing the two main components of ValidMind. The developer framework that integrates with your existing developer environment, and the ValidMind AI risk platform." .lightbox}
 
 The {{< var vm.platform >}} employs a multi-tenant architecture, hosting the cloud-based user interface, APIs, databases, and internal services. The design ensures efficient resource utilization and offers a highly scalable solution for organizations of varying sizes.
 

site/developer/model-documentation/work-with-test-results.qmd

@@ -1,5 +1,6 @@
 ---
 title: "Work with test results"
+lightbox: true
 date: last-modified
 ---
 
@@ -30,7 +31,7 @@ Once generated via the {{< var validmind.developer >}}, view and add the test re
    - Select the tests to insert into the model documentation from the list of available tests.
    - Search by name using **{{<fa magnifying-glass >}} Search** on the top-left to locate specific test results.
 
-    ![Test-driven blocks that have been selected for insertion](test-driven-block-menu.png){width=85% fig-alt="A screenshot showing several test-driven blocks that have been selected for insertion" class="screenshot"}
+    ![Test-driven blocks that have been selected for insertion](test-driven-block-menu.png){width=85% fig-alt="A screenshot showing several test-driven blocks that have been selected for insertion" .screenshot}
 
    To preview what is included in a test, click on it. By default, the actively selected test is reviewed.
 
@@ -60,7 +61,7 @@ After you have added a test result to your document, you can view the following
     - On the test result timeline, click on the **{{< fa chevron-down >}}** associated with a test run to expand for details.
     - When you are done, you can either click **Cancel** or **{{< fa x >}}** to close the metadata menu.
 
-    ![Detail expansion of test runs on the test result timeline](test-run-details.gif){width=85% fig-alt="A gif showcasing detail expansion of test runs on the test result timeline" class="screenshot"}
+    ![Detail expansion of test runs on the test result timeline](test-run-details.gif){width=85% fig-alt="A gif showcasing detail expansion of test runs on the test result timeline" .screenshot}
 
 #### Filter historical test results
 

site/get-started/developer/try-in-your-own-environment.qmd

@@ -1,5 +1,6 @@
 ---
 title: "Try it in your own developer environment"
+lightbox: true
 date: last-modified
 aliases:
   - ../../guide/quickstart-try-developer-framework-in-your-own-developer-environment.html

site/get-started/developer/try-with-colab.qmd

@@ -1,5 +1,6 @@
 ---
 title: "Try it with Google Colaboratory"
+lightbox: true
 date: last-modified
 aliases:
   - ../../guide/quickstart-try-developer-framework-with-colab.html
@@ -30,7 +31,7 @@ Google Colaboratory (Colab) is a free Jupyter Notebook environment that runs in
 
 1. Open the QuickStart notebook in Google Colaboratory: [![Open in Colab](https://colab.research.google.com/assets/colab-badge.svg){fig-alt="Open in Colab"}](https://colab.research.google.com/drive/1NLtjCFUZV2I_ttGUkiAL9uwGZK_SGUlw?usp=share_link)
 
-   ![QuickStart notebook opened in Google Colab](google-colab.png){width=90% fig-alt="A screenshot showing the QuickStart notebook opened in Google Colab" class="screenshot"}
+   ![QuickStart notebook opened in Google Colab](google-colab.png){width=90% fig-alt="A screenshot showing the QuickStart notebook opened in Google Colab" .screenshot}
 
    The notebook will guide you through installing the {{< var validmind.developer >}}, initializing the Python environment, and finally initializing the ValidMind Client Library by connecting to the {{< var validmind.platform >}}.
 

site/get-started/developer/try-with-jupyterhub.qmd

@@ -1,6 +1,7 @@
 ---
 title: "Try it with JupyterHub (recommended)"
 date: last-modified
+lightbox: true
 aliases:
   - ../../guide/quickstart-try-developer-framework-with-jupyterhub.html
 ---
@@ -25,7 +26,7 @@ Signing up is FREE — {{< var link.register >}}
 
    This link takes you to ValidMind's JupyterHub instance where you can log in with the Auth0 credentials for your ValidMind account to access the **QuickStart for model documentation** notebook:
 
-   ![QuickStart notebook opened in JupyterHub](jupyterhub-dashboard.png){width=90% fig-alt="A screenshot showing the QuickStart notebook opened in JupyterHub" class="screenshot"}
+   ![QuickStart notebook opened in JupyterHub](jupyterhub-dashboard.png){width=90% fig-alt="A screenshot showing the QuickStart notebook opened in JupyterHub" .screenshot}
 
     The notebook will guide you through installing the {{< var validmind.developer >}}, initializing the Python environment, and finally initializing the ValidMind Client Library by connecting to the {{< var validmind.platform >}}.
 

site/get-started/get-started.qmd

@@ -1,5 +1,6 @@
 ---
 title: "Get started"
+lightbox: true
 date: last-modified
 aliases:
   - ../guide/get-started.html