-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (141 loc) · 7.55 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vanna Enterprise Demos</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-fade-in {
animation: fadeIn 0.5s ease-in;
}
.mono-font {
font-family: 'Roboto Mono', monospace;
}
</style>
</head>
<body class="bg-gray-100 min-h-screen">
<!-- Main container with width control -->
<div class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-4xl font-bold text-center mb-10 text-gray-800 mono-font">Best practices: POC to Production</h2>
<!-- New Categories Card -->
<div class="bg-white rounded-lg shadow-lg p-8 mb-20 animate-fade-in">
<div class="space-y-6 text-gray-700 text-lg leading-relaxed mono-font">
<p class="mb-6">When your POC gains users, there's a lot to consider.</p>
<div>
<span class="font-bold">Accuracy:</span>
Clarification, reference context, task breakdown, introspection, tool use, evaluations, human in the loop, error flagging, prompt-completion pairs
</div>
<div>
<span class="font-bold">Security:</span>
Rate limiting, role based access control, row level security, async i-o guardrailing
</div>
<div>
<span class="font-bold">Latency:</span>
Model optimization, token optimization, streaming, batching, caching
</div>
<div>
<span class="font-bold">Cost:</span>
Managing billing limits, API key management, staging projects, cost optimization, data management, model performance monitoring, model retraining, model deployment, customization, support
</div>
</div>
</div>
<h2 class="text-4xl font-bold text-center mb-10 text-gray-800 mono-font">Sample demos</h2>
<div class="bg-white rounded-lg shadow-lg p-8 mb-20 animate-fade-in">
<h2 class="text-2xl font-bold mb-6 text-gray-800 text-center mono-font">Guardrailing for content control</h2>
<div class="aspect-w-16 aspect-h-9">
<img src="animation7.svg" alt="Animation demonstrating content control" class="w-full h-full object-cover rounded"/>
</div>
<p class="mt-6 text-gray-700 text-lg leading-relaxed text-center mono-font">
Why this matters: Without content control, you aren't protected against malicious queries
</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-8 mb-20 animate-fade-in">
<h2 class="text-2xl font-bold mb-6 text-gray-800 text-center mono-font">Error Reporting</h2>
<div class="aspect-w-16 aspect-h-9">
<img src="animation.svg" alt="Animation demonstrating error reporting" class="w-full h-full object-cover rounded"/>
</div>
<p class="mt-6 text-gray-700 text-lg leading-relaxed text-center mono-font">
Why this matters: Without user error flags, errors remain visible to an increasing audience
</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-8 mb-20 animate-fade-in">
<h2 class="text-2xl font-bold mb-6 text-gray-800 text-center mono-font">Model Training</h2>
<div class="aspect-w-16 aspect-h-9">
<img src="animation1.svg" alt="Animation showing training feature" class="w-full h-full object-cover rounded"/>
</div>
<p class="mt-6 text-gray-700 text-lg leading-relaxed text-center mono-font">
Why this matters: Without ongoing training, the LLM rewrites SQL from scratch— costlier and less accurate
</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-8 mb-20 animate-fade-in">
<h2 class="text-2xl font-bold mb-6 text-gray-800 text-center mono-font">Reference Context</h2>
<div class="aspect-w-16 aspect-h-9">
<img src="animation2.svg" alt="Animation showing reference context" class="w-full h-full object-cover rounded"/>
</div>
<p class="mt-6 text-gray-700 text-lg leading-relaxed text-center mono-font">
Why this matters: Without your private database context, LLMs miss nuances and make more errors
</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-8 mb-20 animate-fade-in">
<h2 class="text-2xl font-bold mb-6 text-gray-800 text-center mono-font">Problem Solving</h2>
<div class="aspect-w-16 aspect-h-9">
<img src="animation3.svg" alt="Animation showing problem solving" class="w-full h-full object-cover rounded"/>
</div>
<p class="mt-6 text-gray-700 text-lg leading-relaxed text-center mono-font">
Why this matters: Without database context or problem-solving prompts, LLMs struggle with imprecise user queries, leading to more errors
</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-8 mb-20 animate-fade-in">
<h2 class="text-2xl font-bold mb-6 text-gray-800 text-center mono-font">Clarifying questions</h2>
<div class="aspect-w-16 aspect-h-9">
<img src="animation4.svg" alt="Animation showing clarification" class="w-full h-full object-cover rounded"/>
</div>
<p class="mt-6 text-gray-700 text-lg leading-relaxed text-center mono-font">
Why this matters: Without clarification, LLMs may misinterpret questions, leading users to see avoidable errors
</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-8 mb-20 animate-fade-in">
<h2 class="text-2xl font-bold mb-6 text-gray-800 text-center mono-font">Role based access control</h2>
<div class="aspect-w-16 aspect-h-9">
<img src="animation5.svg" alt="Animation showing RBAC" class="w-full h-full object-cover rounded"/>
</div>
<p class="mt-6 text-gray-700 text-lg leading-relaxed text-center mono-font">
Why this matters: Without RBAC, sensitive data is exposed
</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-8 mb-20 animate-fade-in">
<h2 class="text-2xl font-bold mb-6 text-gray-800 text-center mono-font">Row level access control</h2>
<div class="aspect-w-16 aspect-h-9">
<img src="animation6.svg" alt="Animation showing RLAC" class="w-full h-full object-cover rounded"/>
</div>
<p class="mt-6 text-gray-700 text-lg leading-relaxed text-center mono-font">
Why this matters: Without RLAC, sensitive data is exposed
</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-8 mb-20 animate-fade-in">
<h2 class="text-2xl font-bold mb-6 text-gray-800 text-center mono-font">Model optimization</h2>
<div class="aspect-w-16 aspect-h-9">
<img src="animation8.svg" alt="Animation showing model optimization" class="w-full h-full object-cover rounded"/>
</div>
<p class="mt-6 text-gray-700 text-lg leading-relaxed text-center mono-font">
Why this matters: Without model optimization, responses are more expensive and take longer
</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-8 mb-20 animate-fade-in">
<h2 class="text-2xl font-bold mb-6 text-gray-800 text-center mono-font">Agent orchestration</h2>
<div class="aspect-w-16 aspect-h-9">
<img src="animation9.svg" alt="Animation showing agent orchestration" class="w-full h-full object-cover rounded"/>
</div>
<p class="mt-6 text-gray-700 text-lg leading-relaxed text-center mono-font">
Why it matters: Without agent orchestration, users get incomplete information
</p>
</div>
</div>
</body>
</html>