Skip to content

Commit 8d6ba5c

Browse files
nrichersvalidbeck
andauthored
Document LLM features (#510)
* Enable preview extension to preview external urls * More content * Enable width and height parameters for previews * Add style guide info for updated preview extension * More content * Remove URL previews, simplify before experiments * Approximate Beck's default listing example * I'm almost as good as Beck, but only almost * Add ValidChecker images * Add lightbox extension to Quarto * Remove lightbox extension as now part of Quarto * First draft complete * CSS experiments * Adjustments to listing author * Removed unused footnote * Update site/about/overview-llm-features.qmd Co-authored-by: Beck <164545837+validbeck@users.noreply.github.com> * Update site/about/overview-llm-features.qmd Co-authored-by: Beck <164545837+validbeck@users.noreply.github.com> * Tweaks to .feature * Add offset option to preview extension * Try a cleaner look for What's Next * Re-add direct AI usage policy link * A whisker of whitespace and tweak .feature * Revert size of checkmarks to what Beck had * Work around Quarto quirks * Fix mispelled filenames and add a bit of whitespace * Add missing caption and remove padding as an experiment * Remove commented our JSON and use lightbox only on animated GIF * Made the features look uniform * Remove padding from image, adjust image padding in source * Fix casing on caption --------- Co-authored-by: Beck <164545837+validbeck@users.noreply.github.com>
1 parent 62b681e commit 8d6ba5c

10 files changed

+183
-15
lines changed

site/_extensions/nrichers/preview/preview.css

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
.preview {
22
position: relative;
33
display: inline-block;
4-
width: 400px;
5-
height: 225px;
64
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
75
border-radius: 5px;
86
background: #DE257E;

site/_extensions/nrichers/preview/preview.lua

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,27 @@ end
1515
-- Main function to apply preview
1616
function Div(el)
1717
if el.classes:includes("preview") then
18-
-- Get the `source` attribute, defaulting to "index.qmd" if missing
18+
-- Get the `source`, `target`, `width`, `height`, and `offset` attributes, with defaults if not specified
1919
local source = el.attributes.source or "index.qmd"
20-
source = source:gsub("%.qmd$", ".html")
20+
local target = el.attributes.target or source
21+
local width = el.attributes.width or "400"
22+
local height = el.attributes.height or "225"
23+
local offset = el.attributes.offset or "0" -- Offset in pixels to crop from the top
2124

22-
-- Get the `target` attribute, defaulting to `source` if missing
23-
local target = el.attributes.target or el.attributes.source or "index.qmd"
24-
target = target:gsub("%.qmd$", ".html")
25+
-- Convert .qmd to .html for non-external sources
26+
if not source:match("^https?://") then
27+
source = source:gsub("%.qmd$", ".html")
28+
end
29+
if not target:match("^https?://") then
30+
target = target:gsub("%.qmd$", ".html")
31+
end
2532

26-
-- Generate the HTML content for the preview div
33+
-- Generate HTML with clip-path to crop the top content by the specified offset
2734
local iframeHtml = string.format(
28-
'<div class="preview">\n' ..
29-
' <iframe src="%s" width="400" height="225"></iframe>\n' ..
35+
'<div class="preview" style="width:%spx; height:%spx; overflow:hidden;">\n' ..
36+
' <iframe src="%s" style="width:100%%; height:calc(100%% + %spx); position:relative; top:-%spx; border:none; border-radius:5px;"></iframe>\n' ..
3037
' <a href="%s" target="_blank"></a>\n' ..
31-
'</div>', source, target
38+
'</div>', width, height, source, offset, offset, target
3239
)
3340

3441
-- Return the raw HTML to be inserted

site/_quarto.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,8 @@ website:
9696
- text: "Automated testing & documentation"
9797
file: about/overview-model-documentation.qmd
9898
- about/overview-model-risk-management.qmd
99+
- text: "LLM features"
100+
file: about/overview-llm-features.qmd
99101
- file: about/deployment/deployment-options.qmd
100102
text: "Deployment options"
101103
contents:

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ listing:
1111
contents:
1212
- path: https://validmind.com/contact/
1313
image: /assets/img/hero-platform.png
14-
title: "Request a Demo"
14+
title: "Request a demo"
1515
description: "Find out which ValidMind deployment is right for you by getting in touch."
16+
author: validmind.com
1617
---
1718

1819
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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ listing:
1111
contents:
1212
- path: https://validmind.com/contact/
1313
image: /assets/img/hero-platform.png
14-
title: "Request a Demo"
14+
title: "Request a demo"
1515
description: "Find out which ValidMind deployment is right for you by getting in touch."
16+
author: validmind.com
1617
---
1718

1819
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.
Loading
Loading
Loading

site/about/overview-llm-features.qmd

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
---
2+
title: "Large language model features"
3+
date: last-modified
4+
filters:
5+
- tachyons
6+
- preview
7+
---
8+
9+
{{< 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.
10+
11+
12+
::: {.attn}
13+
## {{< fa list-check >}} Our philosophy
14+
15+
:::: {.flex .flex-wrap .justify-around}
16+
17+
::: {.w-20-ns .pt3 .pr4}
18+
![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"}
19+
:::
20+
21+
::: {.w-80-ns}
22+
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.
23+
24+
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.
25+
:::
26+
27+
::::
28+
29+
:::
30+
31+
## Our features
32+
33+
{{< var vm.product >}} enhances model documentation, testing, and compliance workflows, providing your team with tools for effective model governance.
34+
35+
36+
::: {.column-margin .pl3 .pt6}
37+
![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}
38+
:::
39+
40+
:::: {.flex .flex-wrap .justify-around}
41+
42+
::: {.w-50-ns .pr2}
43+
### Test interpretation
44+
45+
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.
46+
47+
::: {.feature}
48+
Why it matters
49+
: Test interpretation makes it easier for developers and validators to understand the implications of each test.
50+
:::
51+
52+
### Risk assessment
53+
54+
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.
55+
56+
::: {.feature}
57+
Why it matters
58+
: Risk assessment provides a foundation for better-informed decision-making.
59+
60+
:::
61+
62+
:::
63+
64+
::: {.w-50-ns .pl2 .pr2}
65+
### Qualitative checks
66+
67+
Leverages metadata from the model inventory, test outcomes, and additional data provided to create qualitative sections within model documentation.
68+
<br>
69+
<br>
70+
71+
::: {.feature}
72+
Why it matters
73+
: Qualitative checks ensure that essential contextual information is accurately documented and aligned with the model's purpose and scope.
74+
:::
75+
76+
### Document checker
77+
78+
Reviews model development documentation to ensure it aligns with relevant regulatory requirements.
79+
<br>
80+
<br>
81+
<br>
82+
83+
::: {.feature}
84+
Why it matters
85+
: Document checks help teams maintain compliance with specific regulations by flagging areas that may need revision.
86+
:::
87+
88+
<!-- NR Nov 2024 Uncomment when available -->
89+
<!-- ### Section checker
90+
91+
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. -->
92+
:::
93+
94+
::::
95+
96+
97+
## What's next
98+
99+
<!-- :::{#llm-whats-next}
100+
::: -->
101+
102+
:::: {.flex .flex-wrap .justify-around}
103+
104+
::: {.w-50-ns}
105+
### A commitment to transparency
106+
107+
Understanding our policies shouldn’t feel like deciphering code, so we’ve made our legal texts as clear and accessible as possible.
108+
These documents detail our practices in data handling, privacy, [AI usage policy](https://validmind.com/about/legal/ai-usage-policy/), and regulatory compliance.
109+
:::
110+
111+
::: {.w-50-ns}
112+
### Try it yourself
113+
114+
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.
115+
:::
116+
117+
::: {.w-50-ns}
118+
119+
::: {.preview source="https://validmind.com/about/legal" height="240" width="430" offset="90"}
120+
:::
121+
122+
:::
123+
124+
::: {.w-50-ns}
125+
126+
::: {.preview source="https://validmind.com/contact/" height="240" width="430" offset="90"}
127+
:::
128+
129+
:::
130+
131+
::::
132+
133+
<!-- FOOTNOTES -->
134+
135+
<!-- [^1]: [Run tests and test suites](//developer/model-testing/testing-overview.qmd) -->

site/styles.css

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -495,6 +495,11 @@ figcaption {
495495
line-height: 2.5em;
496496
}
497497

498+
.listing-author {
499+
margin-top: -25px;
500+
color: #083E44;
501+
}
502+
498503
.quarto-listing-default .no-anchor.listing-title a {
499504
font-size: 18px;
500505
color: #DE257E;
@@ -508,11 +513,30 @@ figcaption {
508513
border: 1px solid #DE257E;
509514
}
510515

511-
.quarto-listing-default .listing-author {
512-
color: #083E44;
516+
.quarto-listing-default .listing-author {
517+
margin-top: 0px;
513518
font-weight: bold;
514519
}
515520

521+
.feature {
522+
color: #3E6C69;
523+
padding: 15px;
524+
padding-bottom: 0px;
525+
background-image: url('/validmind.png');
526+
background-size: 5%;
527+
background-position: right 5px top 10px;
528+
background-repeat: no-repeat;
529+
border-top: 2px solid #DE257E;
530+
text-align: justify;
531+
/* width: 75%; */
532+
/* font-size: smaller; */
533+
}
534+
535+
.feature strong, .feature b, .feature dt {
536+
color: #3E6C69;
537+
font-weight: bolder;
538+
}
539+
516540
/* section#footnotes {
517541
display: none !important;
518542
}

0 commit comments

Comments
 (0)