Skip to content

Commit fe76426

Browse files
arbrownarbrown
committed
feat: Add some more about links
1 parent 04fa4bf commit fe76426

File tree

1 file changed

+134
-97
lines changed

1 file changed

+134
-97
lines changed

‎pinball-frontend-2025/svelte/src/routes/about/+page.svelte

+134-97
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,144 @@
11
<header>
2-
<div class="cloud-logo"></div>
3-
<div class="how-it-works">
4-
<a href="/" class="text-3d box-3d" alt="Go back home">Back to Home</a>
5-
</div>
2+
<div class="cloud-logo"></div>
3+
<div class="how-it-works">
4+
<a href="/" class="text-3d box-3d" alt="Go back home">Back to Home</a>
5+
</div>
66
</header>
77

88
<main>
9-
<h1 class="text-3d">How It Works</h1>
10-
11-
<div class="diagram-container">
12-
<img
13-
src="/img/diagram.png"
14-
alt="Architecture Diagram"
15-
/>
16-
</div>
17-
18-
<h2>Key Points:</h2>
19-
<ol>
20-
<li>A player hits a prompt on the pinball machine and sends it to the Cloud Run service</li>
21-
<li>The custom API checks the prompt with Model Armor to make sure it doesn't contain any of the banned categories</li>
22-
<li>If the prompt is ok, it is forwarded on to Gemini and Vertex AI</li>
23-
<li>The results of the Model Armor (and Gemini / Vertex AI) are stored in Firestore for further analysis and live display</li>
24-
<li>Submit your own prompts to see them on the pinball machine! (Some prompts will pass this step, but get rejected by Model Armor on the pinball machine! Try prompt injection, PII, or scammy prompts!)</li>
25-
</ol>
9+
<h1 class="text-3d">How It Works</h1>
10+
11+
<div class="diagram-container">
12+
<img src="/img/diagram.png" alt="Architecture Diagram" />
13+
</div>
14+
15+
<h2>Key Points:</h2>
16+
<ol>
17+
<li>A player hits a prompt on the pinball machine and sends it to the Cloud Run service</li>
18+
<li>
19+
The custom API checks the prompt with Model Armor to make sure it doesn't contain any of the
20+
banned categories
21+
</li>
22+
<li>If the prompt is ok, it is forwarded on to Gemini and Vertex AI</li>
23+
<li>
24+
The results of the Model Armor (and Gemini / Vertex AI) are stored in Firestore for further
25+
analysis and live display
26+
</li>
27+
<li>
28+
Submit your own prompts to see them on the pinball machine! (Some prompts will pass this step,
29+
but get rejected by Model Armor on the pinball machine! Try prompt injection, PII, or scammy
30+
prompts!)
31+
</li>
32+
</ol>
33+
<h2>More Information</h2>
34+
<ul>
35+
<li>
36+
<a href="https://cloud.google.com/security-command-center/docs/model-armor-overview"
37+
>Model Armor Overview</a
38+
>
39+
</li>
40+
<li>
41+
<a href="https://cloud.google.com/security-command-center/docs/manage-model-armor-templates"
42+
>Model Armor Templates</a
43+
>
44+
</li>
45+
</ul>
2646
</main>
2747

2848
<svelte:head>
29-
<style>
30-
body {
31-
background-image: url('/img/bg-color.svg');
32-
}
33-
</style>
34-
<title>About This Application</title>
49+
<style>
50+
body {
51+
background-image: url('/img/bg-color.svg');
52+
}
53+
</style>
54+
<title>About This Application</title>
3555
</svelte:head>
3656

3757
<style>
38-
header {
39-
display: flex;
40-
justify-content: space-between;
41-
align-items: center;
42-
padding: 20px;
43-
margin: 0 20px;
44-
}
45-
46-
main {
47-
width: 70%;
48-
margin: 0 auto;
49-
padding-bottom: 40px;
50-
}
51-
52-
.how-it-works a {
53-
display: block;
54-
background-color: var(--google-blue);
55-
color: var(--white);
56-
font-size: 18px;
57-
font-weight: 700;
58-
border-radius: 50vh;
59-
padding: 16px 32px;
60-
text-decoration: none;
61-
}
62-
63-
64-
.cloud-logo {
65-
width: 50px;
66-
height: 40px;
67-
background-image: url('/img/cloud-logo.svg');
68-
background-size: contain;
69-
background-position: center center;
70-
background-repeat: no-repeat;
71-
}
72-
73-
74-
h1 {
75-
margin-bottom: 30px;
76-
}
77-
78-
h2 {
79-
margin-top: 40px;
80-
margin-bottom: 15px;
81-
font-size: 1.5em;
82-
color: #999;
83-
}
84-
85-
.diagram-container {
86-
text-align: center;
87-
margin: 30px 0;
88-
}
89-
90-
.diagram-container img {
91-
max-width: 100%;
92-
height: auto;
93-
border: 1px solid #ccc;
94-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
95-
background-color: rgba(222,222,222,0.9);
96-
}
97-
98-
ol {
99-
padding-left: 40px;
100-
line-height: 1.6;
101-
}
102-
103-
li {
104-
margin-bottom: 10px;
105-
font-size: 1.1em;
106-
}
107-
</style>
58+
header {
59+
display: flex;
60+
justify-content: space-between;
61+
align-items: center;
62+
padding: 20px;
63+
margin: 0 20px;
64+
}
65+
66+
main {
67+
width: 70%;
68+
margin: 0 auto;
69+
padding-bottom: 40px;
70+
}
71+
72+
.how-it-works a {
73+
display: block;
74+
background-color: var(--google-blue);
75+
color: var(--white);
76+
font-size: 18px;
77+
font-weight: 700;
78+
border-radius: 50vh;
79+
padding: 16px 32px;
80+
text-decoration: none;
81+
}
82+
83+
.cloud-logo {
84+
width: 50px;
85+
height: 40px;
86+
background-image: url('/img/cloud-logo.svg');
87+
background-size: contain;
88+
background-position: center center;
89+
background-repeat: no-repeat;
90+
}
91+
92+
h1 {
93+
margin-bottom: 30px;
94+
}
95+
96+
h2 {
97+
margin-top: 40px;
98+
margin-bottom: 15px;
99+
font-size: 1.5em;
100+
color: #999;
101+
}
102+
103+
.diagram-container {
104+
text-align: center;
105+
margin: 30px 0;
106+
}
107+
108+
.diagram-container img {
109+
max-width: 100%;
110+
height: auto;
111+
border: 1px solid #ccc;
112+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
113+
background-color: rgba(222, 222, 222, 0.9);
114+
}
115+
116+
ol {
117+
padding-left: 40px;
118+
line-height: 1.6;
119+
}
120+
121+
li {
122+
margin-bottom: 10px;
123+
font-size: 1.1em;
124+
}
125+
126+
ul {
127+
padding-left: 40px;
128+
line-height: 1.6;
129+
list-style-type: disc;
130+
margin-top: 10px;
131+
}
132+
133+
ul li a {
134+
color: var(--google-blue, #1a73e8);
135+
text-decoration: underline;
136+
transition: color 0.2s ease;
137+
}
138+
139+
ul li a:hover,
140+
ul li a:focus {
141+
color: #0b54b2;
142+
text-decoration: underline;
143+
}
144+
</style>

0 commit comments

Comments
 (0)