Skip to content

Commit df36b13

Browse files
kmadankmadan
committed
chore(diagrams): replace marketing diagrams with theme-aware SVGs
Convert all README diagrams from baked-in PNGs to hand-authored, theme-aware SVGs paired as _light.svg + _dark.svg and embedded via <picture>, so GitHub light-theme and dark-theme readers each see the variant that matches their canvas. Adds a hero banner SVG at the top of all 5 READMEs containing the wordmark, tagline, and framework chips. Diagram 4 (framework_grid) is removed across all 5 READMEs — the markdown comparison table directly under it already covers the same content. The matplotlib generator (generate_diagrams.py, ~700 lines) is retired in favour of the hand-authored SVG system. All 5 READMEs (en, zh-CN, ja-JP, ko-KR, hi-IN) updated in lockstep. Resolves the design-review finding that PNG diagrams with baked-in colors render poorly on GitHub's dark theme. Mirrors the visual refresh shipped to the sister project AICertify.
1 parent a52d605 commit df36b13

21 files changed

Lines changed: 756 additions & 654 deletions

‎README.hi-IN.md‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
<h1 align="center">GOPAL</h1>
1+
<div align="center">
2+
<picture>
3+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/hero_banner_dark.svg">
4+
<img src="diagrams/hero_banner_light.svg" alt="GOPAL — The Rego policy library for AI compliance" width="100%">
5+
</picture>
6+
</div>
27

38
<p align="center">
49
<a href="README.md">English</a> |
@@ -8,10 +13,6 @@
813
<strong>हिन्दी</strong>
914
</p>
1015

11-
<p align="center">
12-
<strong>AI कंप्लायंस के लिए Rego पॉलिसी लाइब्रेरी।</strong>
13-
</p>
14-
1516
<p align="center">
1617
<em>94 पॉलिसीज़। 15+ रेगुलेटरी फ्रेमवर्क्स। 5 इंडस्ट्री वर्टिकल्स। Policy-as-code जिसे आपका ऑडिटर पढ़ सकता है।</em>
1718
</p>
@@ -34,13 +35,23 @@
3435

3536
इन्हें अपने AI सिस्टम के metadata, model cards, या मूल्यांकन परिणामों के विरुद्ध चलाइए — और एक संरचित, मशीन-रीडेबल कंप्लायंस वर्डिक्ट प्राप्त कीजिए जिसे आप CI, ऑडिट लॉग, या रेगुलेटर सबमिशन में डाल सकते हैं।
3637

37-
<p align="center"><img src="diagrams/diagram1_hero_numbers.png" alt="GOPAL — 94 पॉलिसीज़, 15+ फ्रेमवर्क्स, 5 वर्टिकल्स" width="85%" /></p>
38+
<p align="center">
39+
<picture>
40+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram1_hero_numbers_dark.svg">
41+
<img src="diagrams/diagram1_hero_numbers_light.svg" alt="GOPAL कवरेज: 94 पॉलिसीज़, इंटरनेशनल स्टैंडर्ड्स, एविएशन, इंडस्ट्री वर्टिकल्स, और क्रॉस-कटिंग सिद्धांत" width="85%" />
42+
</picture>
43+
</p>
3844

3945
---
4046

4147
## Quick Start
4248

43-
<p align="center"><img src="diagrams/diagram5_evaluation_flow.png" alt="GOPAL मूल्यांकन कैसे काम करता है — इनपुट JSON, OPA इंजन, पॉलिसी, वर्डिक्ट" width="85%" /></p>
49+
<p align="center">
50+
<picture>
51+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram5_evaluation_flow_dark.svg">
52+
<img src="diagrams/diagram5_evaluation_flow_light.svg" alt="GOPAL मूल्यांकन कैसे काम करता है — इनपुट JSON, Rego पॉलिसी, OPA मूल्यांकन, वर्डिक्ट" width="85%" />
53+
</picture>
54+
</p>
4455

4556
### OPA CLI के साथ स्टैंडअलोन
4657

@@ -90,7 +101,12 @@ GOPAL तीन आयामों में अलग है:
90101

91102
## अंदर क्या है
92103

93-
<p align="center"><img src="diagrams/diagram2_directory_tree.png" alt="GOPAL डायरेक्टरी लेआउट — 5 शीर्ष-स्तरीय शाखाएँ, क्षेत्राधिकार और वर्टिकल के अनुसार व्यवस्थित पॉलिसीज़" width="85%" /></p>
104+
<p align="center">
105+
<picture>
106+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram2_directory_tree_dark.svg">
107+
<img src="diagrams/diagram2_directory_tree_light.svg" alt="GOPAL डायरेक्टरी लेआउट — 4 शीर्ष-स्तरीय शाखाएँ, क्षेत्राधिकार और वर्टिकल के अनुसार व्यवस्थित पॉलिसीज़" width="85%" />
108+
</picture>
109+
</p>
94110

95111
```
96112
gopal/
@@ -133,8 +149,6 @@ gopal/
133149

134150
## तुलना
135151

136-
<p align="center"><img src="diagrams/diagram4_framework_grid.png" alt="GOPAL जिन फ्रेमवर्क्स को कवर करता है — EU AI Act, NIST, FAA, EASA, RTCA और अधिक" width="85%" /></p>
137-
138152
| | GOPAL | जेनेरिक OPA बंडल | वेंडर गवर्नेंस SaaS |
139153
|---|---|---|---|
140154
| विशेष रूप से AI सिस्टम्स को लक्ष्य करता है | ✅ | ❌ | ✅ |
@@ -152,7 +166,12 @@ gopal/
152166

153167
## पॉलिसीज़ लिखना
154168

155-
<p align="center"><img src="diagrams/diagram3_policy_anatomy.png" alt="एक GOPAL पॉलिसी की संरचना — package path, imports, metadata, default deny, allow rule, report" width="85%" /></p>
169+
<p align="center">
170+
<picture>
171+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram3_policy_anatomy_dark.svg">
172+
<img src="diagrams/diagram3_policy_anatomy_light.svg" alt="एक GOPAL पॉलिसी की संरचना — package path, imports, metadata, default deny, allow rule, report" width="85%" />
173+
</picture>
174+
</p>
156175

157176
हर पॉलिसी एक ही आकार का अनुसरण करती है:
158177

‎README.ja-JP.md‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
<h1 align="center">GOPAL</h1>
1+
<div align="center">
2+
<picture>
3+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/hero_banner_dark.svg">
4+
<img src="diagrams/hero_banner_light.svg" alt="GOPAL — The Rego policy library for AI compliance" width="100%">
5+
</picture>
6+
</div>
27

38
<p align="center">
49
<a href="README.md">English</a> |
@@ -8,10 +13,6 @@
813
<a href="README.hi-IN.md">हिन्दी</a>
914
</p>
1015

11-
<p align="center">
12-
<strong>AI コンプライアンスのための Rego ポリシーライブラリ。</strong>
13-
</p>
14-
1516
<p align="center">
1617
<em>94 ポリシー。15 以上の規制フレームワーク。5 つの業種別領域。監査人が読めるポリシー・アズ・コード。</em>
1718
</p>
@@ -34,13 +35,23 @@
3435

3536
AI システムのメタデータ、モデルカード、評価結果に対してこれらのポリシーを実行すると、構造化された機械可読のコンプライアンス判定が得られます。CI、監査ログ、規制当局への提出資料にそのまま組み込めます。
3637

37-
<p align="center"><img src="diagrams/diagram1_hero_numbers.png" alt="GOPAL — 94 ポリシー、15 以上のフレームワーク、5 つの業種" width="85%" /></p>
38+
<p align="center">
39+
<picture>
40+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram1_hero_numbers_dark.svg">
41+
<img src="diagrams/diagram1_hero_numbers_light.svg" alt="GOPAL のカバレッジ: 94 ポリシー、国際規格、航空、業種別、共通原則の 4 カテゴリ" width="85%" />
42+
</picture>
43+
</p>
3844

3945
---
4046

4147
## クイックスタート
4248

43-
<p align="center"><img src="diagrams/diagram5_evaluation_flow.png" alt="GOPAL の評価フロー — 入力 JSON、OPA エンジン、ポリシー、判定" width="85%" /></p>
49+
<p align="center">
50+
<picture>
51+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram5_evaluation_flow_dark.svg">
52+
<img src="diagrams/diagram5_evaluation_flow_light.svg" alt="GOPAL の評価フロー — 入力 JSON、Rego ポリシー、OPA 評価、判定" width="85%" />
53+
</picture>
54+
</p>
4455

4556
### OPA CLI で単体利用する
4657

@@ -90,7 +101,12 @@ GOPAL は次の 3 点で異なります。
90101

91102
## 同梱内容
92103

93-
<p align="center"><img src="diagrams/diagram2_directory_tree.png" alt="GOPAL のディレクトリ構成 — 5 つのトップレベル分岐、管轄区域と業種ごとに整理されたポリシー" width="85%" /></p>
104+
<p align="center">
105+
<picture>
106+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram2_directory_tree_dark.svg">
107+
<img src="diagrams/diagram2_directory_tree_light.svg" alt="GOPAL のディレクトリ構成 — 4 つのトップレベル分岐、管轄区域と業種ごとに整理されたポリシー" width="85%" />
108+
</picture>
109+
</p>
94110

95111
```
96112
gopal/
@@ -133,8 +149,6 @@ gopal/
133149

134150
## 比較
135151

136-
<p align="center"><img src="diagrams/diagram4_framework_grid.png" alt="GOPAL がカバーするフレームワーク — EU AI Act、NIST、FAA、EASA、RTCA など" width="85%" /></p>
137-
138152
| | GOPAL | 汎用 OPA バンドル | ベンダー製ガバナンス SaaS |
139153
|---|---|---|---|
140154
| AI システムを明確に対象 | ✅ | ❌ | ✅ |
@@ -152,7 +166,12 @@ gopal/
152166

153167
## ポリシーの記述
154168

155-
<p align="center"><img src="diagrams/diagram3_policy_anatomy.png" alt="GOPAL ポリシーの構造 — パッケージパス、import、メタデータ、default deny、allow ルール、レポート" width="85%" /></p>
169+
<p align="center">
170+
<picture>
171+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram3_policy_anatomy_dark.svg">
172+
<img src="diagrams/diagram3_policy_anatomy_light.svg" alt="GOPAL ポリシーの構造 — パッケージパス、import、メタデータ、default deny、allow ルール、レポート" width="85%" />
173+
</picture>
174+
</p>
156175

157176
すべてのポリシーは同じ構造に従います。
158177

‎README.ko-KR.md‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
<h1 align="center">GOPAL</h1>
1+
<div align="center">
2+
<picture>
3+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/hero_banner_dark.svg">
4+
<img src="diagrams/hero_banner_light.svg" alt="GOPAL — The Rego policy library for AI compliance" width="100%">
5+
</picture>
6+
</div>
27

38
<p align="center">
49
<a href="README.md">English</a> |
@@ -8,10 +13,6 @@
813
<a href="README.hi-IN.md">हिन्दी</a>
914
</p>
1015

11-
<p align="center">
12-
<strong>AI 컴플라이언스를 위한 Rego 정책 라이브러리.</strong>
13-
</p>
14-
1516
<p align="center">
1617
<em>94개 정책. 15개 이상의 규제 프레임워크. 5개 산업 수직 영역. 감사관이 읽을 수 있는 정책 코드화(policy-as-code).</em>
1718
</p>
@@ -34,13 +35,23 @@
3435

3536
여러분의 AI 시스템 메타데이터, 모델 카드 또는 평가 결과에 대해 이러한 정책을 실행하면, CI, 감사 로그 또는 규제 당국 제출 자료에 그대로 적용할 수 있는 구조화된 기계 판독 가능 컴플라이언스 결과를 얻을 수 있습니다.
3637

37-
<p align="center"><img src="diagrams/diagram1_hero_numbers.png" alt="GOPAL — 94개 정책, 15개 이상 프레임워크, 5개 수직 영역" width="85%" /></p>
38+
<p align="center">
39+
<picture>
40+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram1_hero_numbers_dark.svg">
41+
<img src="diagrams/diagram1_hero_numbers_light.svg" alt="GOPAL 커버리지: 94개 정책, 국제 표준 · 항공 · 산업 수직 · 공통 원칙의 4개 카테고리" width="85%" />
42+
</picture>
43+
</p>
3844

3945
---
4046

4147
## 빠른 시작
4248

43-
<p align="center"><img src="diagrams/diagram5_evaluation_flow.png" alt="GOPAL 평가 동작 방식 — 입력 JSON, OPA 엔진, 정책, 판정 결과" width="85%" /></p>
49+
<p align="center">
50+
<picture>
51+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram5_evaluation_flow_dark.svg">
52+
<img src="diagrams/diagram5_evaluation_flow_light.svg" alt="GOPAL 평가 동작 방식 — 입력 JSON, Rego 정책, OPA 평가, 판정 결과" width="85%" />
53+
</picture>
54+
</p>
4455

4556
### OPA CLI를 사용한 단독 실행
4657

@@ -90,7 +101,12 @@ GOPAL은 세 가지 측면에서 다릅니다.
90101

91102
## 구성 내용
92103

93-
<p align="center"><img src="diagrams/diagram2_directory_tree.png" alt="GOPAL 디렉터리 레이아웃 — 5개의 최상위 분기, 관할권 및 수직 영역별로 구성된 정책" width="85%" /></p>
104+
<p align="center">
105+
<picture>
106+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram2_directory_tree_dark.svg">
107+
<img src="diagrams/diagram2_directory_tree_light.svg" alt="GOPAL 디렉터리 레이아웃 — 4개의 최상위 분기, 관할권 및 수직 영역별로 구성된 정책" width="85%" />
108+
</picture>
109+
</p>
94110

95111
```
96112
gopal/
@@ -133,8 +149,6 @@ gopal/
133149

134150
## 비교
135151

136-
<p align="center"><img src="diagrams/diagram4_framework_grid.png" alt="GOPAL이 커버하는 프레임워크 — EU AI Act, NIST, FAA, EASA, RTCA 등" width="85%" /></p>
137-
138152
| | GOPAL | 범용 OPA 번들 | 벤더 거버넌스 SaaS |
139153
|---|---|---|---|
140154
| AI 시스템을 특정해 대상화 | ✅ | ❌ | ✅ |
@@ -152,7 +166,12 @@ gopal/
152166

153167
## 정책 작성
154168

155-
<p align="center"><img src="diagrams/diagram3_policy_anatomy.png" alt="GOPAL 정책의 구조 — 패키지 경로, 임포트, 메타데이터, 기본 거부, 허용 규칙, 리포트" width="85%" /></p>
169+
<p align="center">
170+
<picture>
171+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram3_policy_anatomy_dark.svg">
172+
<img src="diagrams/diagram3_policy_anatomy_light.svg" alt="GOPAL 정책의 구조 — 패키지 경로, 임포트, 메타데이터, 기본 거부, 허용 규칙, 리포트" width="85%" />
173+
</picture>
174+
</p>
156175

157176
모든 정책은 동일한 형태를 따릅니다.
158177

‎README.md‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
<h1 align="center">GOPAL</h1>
1+
<div align="center">
2+
<picture>
3+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/hero_banner_dark.svg">
4+
<img src="diagrams/hero_banner_light.svg" alt="GOPAL — The Rego policy library for AI compliance" width="100%">
5+
</picture>
6+
</div>
27

38
<p align="center">
49
<a href="README.md">English</a> |
@@ -8,10 +13,6 @@
813
<a href="README.hi-IN.md">हिन्दी</a>
914
</p>
1015

11-
<p align="center">
12-
<strong>The Rego policy library for AI compliance.</strong>
13-
</p>
14-
1516
<p align="center">
1617
<em>94 policies. 15+ regulatory frameworks. 5 industry verticals. Policy-as-code your auditor can read.</em>
1718
</p>
@@ -34,13 +35,23 @@
3435

3536
Run them against your AI system's metadata, model cards, or evaluation results — and get back a structured, machine-readable compliance verdict you can drop into CI, an audit log, or a regulator submission.
3637

37-
<p align="center"><img src="diagrams/diagram1_hero_numbers.png" alt="GOPAL — 94 policies, 15+ frameworks, 5 verticals" width="85%" /></p>
38+
<p align="center">
39+
<picture>
40+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram1_hero_numbers_dark.svg">
41+
<img src="diagrams/diagram1_hero_numbers_light.svg" alt="GOPAL coverage: 94 policies across international standards, aviation, industry verticals, and cross-cutting principles" width="85%" />
42+
</picture>
43+
</p>
3844

3945
---
4046

4147
## Quick Start
4248

43-
<p align="center"><img src="diagrams/diagram5_evaluation_flow.png" alt="How GOPAL evaluation works — input JSON, OPA engine, policy, verdict" width="85%" /></p>
49+
<p align="center">
50+
<picture>
51+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram5_evaluation_flow_dark.svg">
52+
<img src="diagrams/diagram5_evaluation_flow_light.svg" alt="How GOPAL evaluation works — input JSON, Rego policy, OPA evaluation, verdict" width="85%" />
53+
</picture>
54+
</p>
4455

4556
### Standalone with the OPA CLI
4657

@@ -90,7 +101,12 @@ GOPAL is different on three axes:
90101

91102
## What's Inside
92103

93-
<p align="center"><img src="diagrams/diagram2_directory_tree.png" alt="GOPAL directory layout — 5 top-level branches, policies organized by jurisdiction and vertical" width="85%" /></p>
104+
<p align="center">
105+
<picture>
106+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram2_directory_tree_dark.svg">
107+
<img src="diagrams/diagram2_directory_tree_light.svg" alt="GOPAL directory layout — 4 top-level branches, policies organized by jurisdiction and vertical" width="85%" />
108+
</picture>
109+
</p>
94110

95111
```
96112
gopal/
@@ -133,8 +149,6 @@ gopal/
133149

134150
## Comparison
135151

136-
<p align="center"><img src="diagrams/diagram4_framework_grid.png" alt="Frameworks GOPAL covers — EU AI Act, NIST, FAA, EASA, RTCA and more" width="85%" /></p>
137-
138152
| | GOPAL | Generic OPA bundle | Vendor governance SaaS |
139153
|---|---|---|---|
140154
| Targets AI systems specifically | ✅ | ❌ | ✅ |
@@ -152,7 +166,12 @@ gopal/
152166

153167
## Authoring Policies
154168

155-
<p align="center"><img src="diagrams/diagram3_policy_anatomy.png" alt="Anatomy of a GOPAL policy — package path, imports, metadata, default deny, allow rule, report" width="85%" /></p>
169+
<p align="center">
170+
<picture>
171+
<source media="(prefers-color-scheme: dark)" srcset="diagrams/diagram3_policy_anatomy_dark.svg">
172+
<img src="diagrams/diagram3_policy_anatomy_light.svg" alt="Anatomy of a GOPAL policy — package path, imports, metadata, default deny, allow rule, report" width="85%" />
173+
</picture>
174+
</p>
156175

157176
Every policy follows the same shape:
158177

0 commit comments

Comments
 (0)