Document LLM features

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/deployment/multi-tenant-cloud.qmd

@@ -11,8 +11,9 @@ 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.

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

@@ -11,8 +11,9 @@ 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. 

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-20-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" class="screenshot"}
+:::
+
+::: {.w-80-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" class="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/styles.css

@@ -475,6 +475,11 @@ figcaption {
   line-height: 2.5em;
 }
 
+.listing-author {
+  margin-top: -25px;
+  color: #083E44; 
+}
+
 .quarto-listing-default .no-anchor.listing-title a {
   font-size: 18px; 
   color: #DE257E;    
@@ -488,11 +493,30 @@ figcaption {
   border: 1px solid #DE257E;
 }
 
-.quarto-listing-default .listing-author {
-  color: #083E44; 
+.quarto-listing-default .listing-author { 
+  margin-top: 0px;
   font-weight: bold;
 }
 
+.feature {
+  color: #3E6C69; 
+  padding: 15px;
+  padding-bottom: 0px;
+  background-image: url('/validmind.png');
+  background-size: 5%;
+  background-position: right 5px top 10px; 
+  background-repeat: no-repeat;
+  border-top: 2px solid #DE257E;
+  text-align: justify;
+  /* width: 75%; */
+  /* font-size: smaller; */
+}
+
+.feature strong, .feature b, .feature dt {
+  color: #3E6C69; 
+  font-weight: bolder;
+}
+
 /* section#footnotes {
   display: none !important;
 }