1456 lines
60 KiB
HTML
1456 lines
60 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Report Provider LLM per adiuvAI — Aprile 2026</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Outfit:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
|
|
|
<style>
|
|
:root {
|
|
--bg: #0a0b10;
|
|
--bg-2: #0e1017;
|
|
--surface: #13151e;
|
|
--surface-2: #1a1d2a;
|
|
--surface-3: #222639;
|
|
--ink: #e8eaf0;
|
|
--ink-2: #9ca0b4;
|
|
--ink-3: #5d6180;
|
|
--accent-1: #6366f1;
|
|
--accent-2: #8b5cf6;
|
|
--accent-3: #a78bfa;
|
|
--grad-1: linear-gradient(135deg, #6366f1, #8b5cf6, #c084fc);
|
|
--grad-2: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
|
|
--grad-subtle: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08));
|
|
--green: #34d399;
|
|
--green-bg: rgba(52,211,153,0.1);
|
|
--green-border: rgba(52,211,153,0.25);
|
|
--red: #f87171;
|
|
--red-bg: rgba(248,113,113,0.1);
|
|
--red-border: rgba(248,113,113,0.25);
|
|
--warn: #fbbf24;
|
|
--warn-bg: rgba(251,191,36,0.1);
|
|
--warn-border: rgba(251,191,36,0.25);
|
|
--blue: #60a5fa;
|
|
--border: rgba(255,255,255,0.06);
|
|
--border-2: rgba(255,255,255,0.1);
|
|
--radius: 14px;
|
|
--radius-sm: 8px;
|
|
--shadow: 0 4px 32px rgba(0,0,0,0.4);
|
|
--shadow-glow: 0 0 60px rgba(99,102,241,0.15);
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'Outfit', sans-serif;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ── NOISE OVERLAY ──────────────────────────── */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
opacity: 0.03;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ── LAYOUT ──────────────────────────────────── */
|
|
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
|
|
section { padding: 80px 0; }
|
|
|
|
/* ── TYPOGRAPHY ──────────────────────────────── */
|
|
h1, h2, h3 { font-family: 'Instrument Serif', serif; font-weight: 400; }
|
|
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.1; letter-spacing: -0.02em; }
|
|
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 12px; }
|
|
h3 { font-size: 1.25rem; line-height: 1.3; }
|
|
.mono { font-family: 'IBM Plex Mono', monospace; }
|
|
.label {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--accent-3);
|
|
}
|
|
.subtitle { color: var(--ink-2); font-size: 1.05rem; font-weight: 300; max-width: 600px; }
|
|
|
|
/* ── GRADIENT TEXT ───────────────────────────── */
|
|
.grad-text {
|
|
background: var(--grad-1);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* ── ANIMATIONS ──────────────────────────────── */
|
|
@keyframes fadeUp {
|
|
from { opacity: 0; transform: translateY(28px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
@keyframes pulse-glow {
|
|
0%, 100% { opacity: 0.4; }
|
|
50% { opacity: 0.8; }
|
|
}
|
|
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(28px);
|
|
transition: opacity 0.7s ease, transform 0.7s ease;
|
|
}
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ── HEADER ──────────────────────────────────── */
|
|
header {
|
|
position: relative;
|
|
padding: 100px 0 60px;
|
|
overflow: hidden;
|
|
}
|
|
header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -200px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 800px;
|
|
height: 800px;
|
|
background: radial-gradient(ellipse, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.06) 40%, transparent 70%);
|
|
pointer-events: none;
|
|
animation: pulse-glow 6s ease-in-out infinite;
|
|
}
|
|
.header-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 16px;
|
|
border-radius: 100px;
|
|
background: rgba(99,102,241,0.1);
|
|
border: 1px solid rgba(99,102,241,0.2);
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
color: var(--accent-3);
|
|
margin-bottom: 28px;
|
|
animation: fadeUp 0.6s ease both;
|
|
}
|
|
.header-badge .dot {
|
|
width: 6px; height: 6px; border-radius: 50%;
|
|
background: var(--green);
|
|
box-shadow: 0 0 8px var(--green);
|
|
}
|
|
header h1 { animation: fadeUp 0.6s ease 0.1s both; }
|
|
header .subtitle { animation: fadeUp 0.6s ease 0.2s both; margin-top: 16px; }
|
|
.header-note {
|
|
margin-top: 24px;
|
|
padding: 12px 20px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border-2);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.85rem;
|
|
color: var(--ink-2);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
animation: fadeUp 0.6s ease 0.3s both;
|
|
}
|
|
.header-note .icon { font-size: 1.1rem; }
|
|
|
|
/* ── DIVIDER ─────────────────────────────────── */
|
|
.divider {
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--border-2), transparent);
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── SECTION HEADERS ─────────────────────────── */
|
|
.section-head { margin-bottom: 40px; }
|
|
.section-head .label { margin-bottom: 10px; }
|
|
|
|
/* ── FEATURE CARDS ───────────────────────────── */
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.feature-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 28px;
|
|
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.feature-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
background: var(--grad-1);
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
.feature-card:hover {
|
|
border-color: rgba(99,102,241,0.3);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-glow);
|
|
}
|
|
.feature-card:hover::before { opacity: 1; }
|
|
.feature-icon {
|
|
width: 44px; height: 44px;
|
|
border-radius: 12px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 1.3rem;
|
|
margin-bottom: 16px;
|
|
background: var(--grad-subtle);
|
|
border: 1px solid rgba(99,102,241,0.15);
|
|
}
|
|
.feature-card h3 { margin-bottom: 8px; color: var(--ink); }
|
|
.feature-card p { font-size: 0.88rem; color: var(--ink-2); line-height: 1.6; margin-bottom: 14px; }
|
|
.feature-reqs {
|
|
display: flex; flex-wrap: wrap; gap: 6px;
|
|
}
|
|
.req-tag {
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
padding: 3px 10px;
|
|
border-radius: 100px;
|
|
background: rgba(99,102,241,0.08);
|
|
color: var(--accent-3);
|
|
border: 1px solid rgba(99,102,241,0.12);
|
|
}
|
|
|
|
/* ── TABLES ──────────────────────────────────── */
|
|
.table-wrap {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
.table-wrap + .table-wrap { margin-top: 28px; }
|
|
.table-header {
|
|
padding: 20px 28px;
|
|
background: var(--surface-2);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
.table-header h3 { font-size: 1.1rem; }
|
|
.table-header .desc {
|
|
font-size: 0.82rem;
|
|
color: var(--ink-3);
|
|
font-weight: 400;
|
|
font-family: 'Outfit', sans-serif;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.88rem;
|
|
}
|
|
thead { background: var(--surface-2); }
|
|
th {
|
|
padding: 12px 20px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-3);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
td {
|
|
padding: 14px 20px;
|
|
border-bottom: 1px solid var(--border);
|
|
color: var(--ink-2);
|
|
vertical-align: top;
|
|
}
|
|
tr:last-child td { border-bottom: none; }
|
|
tr:hover td { background: rgba(99,102,241,0.03); }
|
|
td:first-child { font-weight: 500; color: var(--ink); }
|
|
.price { font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; font-weight: 500; color: var(--accent-3); }
|
|
.model-name { font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; color: var(--blue); }
|
|
|
|
/* ── STATUS BADGES ───────────────────────────── */
|
|
.status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 12px;
|
|
border-radius: 100px;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
.status-ok { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
|
|
.status-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); }
|
|
.status-no { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
|
|
.status-partial { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); font-size: 0.68rem; }
|
|
.check { color: var(--green); }
|
|
.cross { color: var(--red); }
|
|
.warn-icon { color: var(--warn); }
|
|
|
|
/* ── COST CHART ──────────────────────────────── */
|
|
.cost-bars { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
|
|
.cost-row {
|
|
display: grid;
|
|
grid-template-columns: 140px 1fr 90px;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
.cost-row .provider-name { font-weight: 500; font-size: 0.9rem; }
|
|
.cost-bar-track {
|
|
height: 32px;
|
|
background: var(--surface-2);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.cost-bar-fill {
|
|
height: 100%;
|
|
border-radius: 8px;
|
|
background: var(--grad-1);
|
|
transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
|
|
position: relative;
|
|
min-width: 2px;
|
|
}
|
|
.cost-bar-fill.green { background: linear-gradient(135deg, #34d399, #059669); }
|
|
.cost-bar-fill.blue { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
|
|
.cost-bar-fill.purple { background: var(--grad-1); }
|
|
.cost-bar-fill.amber { background: linear-gradient(135deg, #fbbf24, #d97706); }
|
|
.cost-bar-fill.pink { background: linear-gradient(135deg, #f472b6, #ec4899); }
|
|
.cost-bar-fill.teal { background: linear-gradient(135deg, #2dd4bf, #14b8a6); }
|
|
.cost-amount {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-weight: 500;
|
|
font-size: 0.95rem;
|
|
text-align: right;
|
|
}
|
|
.cost-amount.best { color: var(--green); }
|
|
|
|
/* ── STRATEGY CARDS ──────────────────────────── */
|
|
.strategies-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
.strategy-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 32px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
.strategy-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--shadow-glow);
|
|
}
|
|
.strategy-card.recommended {
|
|
border-color: rgba(99,102,241,0.4);
|
|
background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(139,92,246,0.04));
|
|
}
|
|
.strategy-card.recommended::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 3px;
|
|
background: var(--grad-1);
|
|
}
|
|
.strategy-badge {
|
|
display: inline-flex;
|
|
padding: 4px 14px;
|
|
border-radius: 100px;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 16px;
|
|
}
|
|
.strategy-badge.gold { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
|
|
.strategy-badge.silver { background: rgba(96,165,250,0.12); color: #60a5fa; border: 1px solid rgba(96,165,250,0.25); }
|
|
.strategy-badge.bronze { background: rgba(52,211,153,0.12); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
|
|
.strategy-card h3 { margin-bottom: 16px; font-size: 1.2rem; }
|
|
.strategy-list {
|
|
list-style: none;
|
|
margin: 16px 0;
|
|
}
|
|
.strategy-list li {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 0.85rem;
|
|
color: var(--ink-2);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 12px;
|
|
}
|
|
.strategy-list li:last-child { border-bottom: none; }
|
|
.strategy-list .fn { color: var(--ink); font-weight: 500; }
|
|
.strategy-list .mdl { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--blue); }
|
|
.strategy-cost {
|
|
margin-top: 20px;
|
|
padding: 16px 20px;
|
|
background: var(--surface-2);
|
|
border-radius: var(--radius-sm);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.strategy-cost .cost-label { font-size: 0.82rem; color: var(--ink-3); }
|
|
.strategy-cost .cost-value {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 1.3rem;
|
|
font-weight: 500;
|
|
}
|
|
.strategy-cost .cost-value.highlight { color: var(--green); }
|
|
.strategy-pros {
|
|
margin-top: 16px;
|
|
font-size: 0.82rem;
|
|
color: var(--ink-3);
|
|
line-height: 1.6;
|
|
}
|
|
.strategy-pros strong { color: var(--ink-2); }
|
|
|
|
/* ── WHY SECTION ─────────────────────────────── */
|
|
.why-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.why-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 24px;
|
|
}
|
|
.why-card h4 {
|
|
font-family: 'Instrument Serif', serif;
|
|
font-weight: 400;
|
|
font-size: 1rem;
|
|
margin-bottom: 10px;
|
|
color: var(--ink);
|
|
}
|
|
.why-card p {
|
|
font-size: 0.85rem;
|
|
color: var(--ink-2);
|
|
line-height: 1.65;
|
|
}
|
|
.why-card .highlight-model {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
color: var(--accent-3);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
/* ── NAV / TOC ───────────────────────────────── */
|
|
.toc {
|
|
position: fixed;
|
|
right: 20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 100;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.toc a {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--ink-3);
|
|
opacity: 0.3;
|
|
transition: opacity 0.3s, transform 0.3s, background 0.3s;
|
|
display: block;
|
|
}
|
|
.toc a:hover, .toc a.active {
|
|
opacity: 1;
|
|
background: var(--accent-1);
|
|
transform: scale(1.4);
|
|
}
|
|
|
|
/* ── FOOTER ──────────────────────────────────── */
|
|
footer {
|
|
padding: 60px 0 40px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
footer .note {
|
|
font-size: 0.82rem;
|
|
color: var(--ink-3);
|
|
margin-bottom: 24px;
|
|
line-height: 1.7;
|
|
}
|
|
.sources-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
.sources-grid a {
|
|
font-size: 0.78rem;
|
|
color: var(--ink-3);
|
|
text-decoration: none;
|
|
padding: 8px 14px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
transition: color 0.2s, border-color 0.2s;
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.sources-grid a:hover { color: var(--accent-3); border-color: rgba(99,102,241,0.3); }
|
|
|
|
/* ── RESPONSIVE ──────────────────────────────── */
|
|
@media (max-width: 768px) {
|
|
.wrap { padding: 0 18px; }
|
|
section { padding: 50px 0; }
|
|
header { padding: 70px 0 40px; }
|
|
.features-grid { grid-template-columns: 1fr; }
|
|
.strategies-grid { grid-template-columns: 1fr; }
|
|
.why-grid { grid-template-columns: 1fr; }
|
|
.cost-row { grid-template-columns: 100px 1fr 70px; }
|
|
.cost-row .provider-name { font-size: 0.8rem; }
|
|
.table-wrap { border-radius: 0; border-left: none; border-right: none; }
|
|
table { font-size: 0.8rem; }
|
|
th, td { padding: 10px 12px; }
|
|
.toc { display: none; }
|
|
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
|
}
|
|
|
|
/* ── SCROLLBAR ────────────────────────────────── */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: var(--bg); }
|
|
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
|
|
|
|
/* ── COMPARISON TABS ─────────────────────────── */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 4px;
|
|
padding: 4px;
|
|
background: var(--surface);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border);
|
|
margin-bottom: 20px;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.tab-btn {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--ink-3);
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 0.82rem;
|
|
font-weight: 500;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: color 0.2s, background 0.2s;
|
|
}
|
|
.tab-btn:hover { color: var(--ink); }
|
|
.tab-btn.active {
|
|
background: var(--surface-3);
|
|
color: var(--ink);
|
|
}
|
|
.tab-panel { display: none; }
|
|
.tab-panel.active { display: block; }
|
|
|
|
/* ── MISC ─────────────────────────────────────── */
|
|
.na-cell { color: var(--ink-3); font-style: italic; font-size: 0.82rem; }
|
|
.flag { font-size: 1.1rem; margin-right: 2px; }
|
|
.mt-4 { margin-top: 16px; }
|
|
.mb-2 { margin-bottom: 8px; }
|
|
.text-center { text-align: center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- TOC dots -->
|
|
<nav class="toc" aria-label="Navigazione sezioni">
|
|
<a href="#header" title="Introduzione"></a>
|
|
<a href="#features" title="Funzionalita"></a>
|
|
<a href="#privacy" title="Privacy"></a>
|
|
<a href="#comparison" title="Confronto"></a>
|
|
<a href="#costs" title="Costi"></a>
|
|
<a href="#strategy" title="Strategia"></a>
|
|
<a href="#why" title="Motivazioni"></a>
|
|
</nav>
|
|
|
|
<!-- ═══════ HEADER ═══════ -->
|
|
<header id="header">
|
|
<div class="wrap">
|
|
<div class="header-badge"><span class="dot"></span> Analisi aggiornata — Aprile 2026</div>
|
|
<h1>Report Provider LLM<br><span class="grad-text">per adiuvAI</span></h1>
|
|
<p class="subtitle">Analisi comparativa dei provider per funzionalità agentica. Selezione ottimizzata per costo, qualità e privacy dei dati.</p>
|
|
<div class="header-note">
|
|
<span class="icon">🔒</span>
|
|
Solo provider con policy di non-utilizzo dati utente per training dei modelli
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- ═══════ FEATURES ═══════ -->
|
|
<section id="features">
|
|
<div class="wrap">
|
|
<div class="section-head reveal">
|
|
<p class="label">Architettura</p>
|
|
<h2>Funzionalità Agentiche</h2>
|
|
<p class="subtitle">Cinque componenti AI distinti, ognuno con requisiti specifici di modello.</p>
|
|
</div>
|
|
<div class="features-grid">
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">💬</div>
|
|
<h3>Home Chat</h3>
|
|
<p>Assistente AI interattivo con tool calling, streaming e history multi-turn. Interfaccia principale dell'app.</p>
|
|
<div class="feature-reqs">
|
|
<span class="req-tag">Function Calling</span>
|
|
<span class="req-tag">Contesto Lungo</span>
|
|
<span class="req-tag">Streaming</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">💠</div>
|
|
<h3>Floating Chat</h3>
|
|
<p>Chat contestuale single-turn con navigazione automatica. Segue l'utente attraverso l'app con risposte rapide.</p>
|
|
<div class="feature-reqs">
|
|
<span class="req-tag">Function Calling</span>
|
|
<span class="req-tag">Intent Classification</span>
|
|
<span class="req-tag">Risposta Rapida</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">☀</div>
|
|
<h3>Daily Brief</h3>
|
|
<p>Sommario automatico giornaliero con 7 slot temporali. Genera brief contestuali senza interazione utente.</p>
|
|
<div class="feature-reqs">
|
|
<span class="req-tag">Output Deterministico</span>
|
|
<span class="req-tag">Velocità</span>
|
|
<span class="req-tag">No Tool Calling</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">⚙</div>
|
|
<h3>Batch Agents</h3>
|
|
<p>Agenti schedulati per raccolta dati da filesystem locale e cloud (Gmail, Teams, Outlook). Cron-based.</p>
|
|
<div class="feature-reqs">
|
|
<span class="req-tag">Output Strutturato</span>
|
|
<span class="req-tag">Tool Calling Robusto</span>
|
|
<span class="req-tag">Esecuzione Lunga</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">🔍</div>
|
|
<h3>Embeddings</h3>
|
|
<p>Indicizzazione vettoriale delle note per ricerca semantica. LanceDB locale con vettori 1536-dim.</p>
|
|
<div class="feature-reqs">
|
|
<span class="req-tag">1536 Dimensioni</span>
|
|
<span class="req-tag">Basso Costo</span>
|
|
<span class="req-tag">Alta Qualità</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- ═══════ PRIVACY ═══════ -->
|
|
<section id="privacy">
|
|
<div class="wrap">
|
|
<div class="section-head reveal">
|
|
<p class="label">Conformità</p>
|
|
<h2>Status Privacy dei Provider</h2>
|
|
<p class="subtitle">Valutazione delle policy di non-utilizzo dati per training. Solo i provider qualificati vengono considerati.</p>
|
|
</div>
|
|
|
|
<div class="table-wrap reveal">
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Provider</th>
|
|
<th>Sede</th>
|
|
<th>No Training su Dati API</th>
|
|
<th>Policy</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="flag">🇺🇸</span> OpenAI</td>
|
|
<td>USA</td>
|
|
<td><span class="check">✓</span> Default opt-out via API</td>
|
|
<td>Dati non usati per training. ZDR disponibile per Enterprise</td>
|
|
<td><span class="status status-ok">Qualificato</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="flag">🇺🇸</span> Anthropic</td>
|
|
<td>USA</td>
|
|
<td><span class="check">✓</span> Mai, senza opt-in esplicito</td>
|
|
<td>Non usa prompt/risposte per training a meno di opt-in esplicito</td>
|
|
<td><span class="status status-ok">Qualificato</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="flag">🇺🇸</span> Google</td>
|
|
<td>USA</td>
|
|
<td><span class="check">✓</span> Solo tier a pagamento</td>
|
|
<td>Vertex AI: garantito contrattualmente. Free tier: usato per training</td>
|
|
<td><span class="status status-partial">Qualificato (solo paid)</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="flag">🇫🇷</span> Mistral</td>
|
|
<td>Francia (EU)</td>
|
|
<td><span class="check">✓</span> API La Plateforme</td>
|
|
<td>Dati API non usati per training. ZDR disponibile. GDPR compliant</td>
|
|
<td><span class="status status-ok">Qualificato</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="flag">🇨🇳</span> DeepSeek</td>
|
|
<td>Cina</td>
|
|
<td><span class="warn-icon">⚠</span> Opt-out limitato</td>
|
|
<td>Possibile opt-out via header, nessuna versione enterprise. Dati in Cina</td>
|
|
<td><span class="status status-warn">Rischio</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="flag">🇺🇸</span> Groq</td>
|
|
<td>USA</td>
|
|
<td><span class="check">✓</span> Via DPA separato</td>
|
|
<td>Dati API gestiti sotto Services Agreement + DPA</td>
|
|
<td><span class="status status-ok">Qualificato</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="flag">🇺🇸</span> Cerebras</td>
|
|
<td>USA</td>
|
|
<td><span class="check">✓</span> Nessuna conservazione</td>
|
|
<td>Dati, modelli e output mai conservati, loggati o riutilizzati</td>
|
|
<td><span class="status status-ok">Qualificato</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="flag">🇨🇳</span> Zhipu (GLM)</td>
|
|
<td>Cina</td>
|
|
<td><span class="warn-icon">⚠</span> Non verificabile</td>
|
|
<td>Policy dichiarata ma compliance non verificabile per utenti internazionali</td>
|
|
<td><span class="status status-warn">Rischio</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- ═══════ COMPARISON MATRIX ═══════ -->
|
|
<section id="comparison">
|
|
<div class="wrap">
|
|
<div class="section-head reveal">
|
|
<p class="label">Confronto Modelli</p>
|
|
<h2>Miglior Modello per Funzionalità</h2>
|
|
<p class="subtitle">Per ogni feature, il modello ottimale di ciascun provider qualificato. Prezzi in USD per milione di token.</p>
|
|
</div>
|
|
|
|
<div class="tabs reveal">
|
|
<button class="tab-btn active" data-tab="home">Home Chat</button>
|
|
<button class="tab-btn" data-tab="floating">Floating Chat</button>
|
|
<button class="tab-btn" data-tab="brief">Daily Brief</button>
|
|
<button class="tab-btn" data-tab="batch">Batch Agents</button>
|
|
<button class="tab-btn" data-tab="embed">Embeddings</button>
|
|
</div>
|
|
|
|
<!-- HOME CHAT -->
|
|
<div class="tab-panel active" id="tab-home">
|
|
<div class="table-wrap reveal">
|
|
<div class="table-header">
|
|
<div>
|
|
<h3>💬 Home Chat</h3>
|
|
<span class="desc">Function Calling + Streaming + Contesto Lungo</span>
|
|
</div>
|
|
</div>
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<tr><th>Provider</th><th>Modello</th><th>Input $/MTok</th><th>Output $/MTok</th><th>Motivazione</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>OpenAI</td>
|
|
<td><span class="model-name">GPT-4.1</span></td>
|
|
<td><span class="price">$2.00</span></td>
|
|
<td><span class="price">$8.00</span></td>
|
|
<td>Eccellente function calling, 1M context, buon rapporto qualità/prezzo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Anthropic</td>
|
|
<td><span class="model-name">Claude Sonnet 4.6</span></td>
|
|
<td><span class="price">$3.00</span></td>
|
|
<td><span class="price">$15.00</span></td>
|
|
<td>Top tool use, 1M context, caching 90% sconto. Costoso in output</td>
|
|
</tr>
|
|
<tr style="background: rgba(52,211,153,0.04);">
|
|
<td><strong>Google</strong></td>
|
|
<td><span class="model-name">Gemini 2.5 Flash</span></td>
|
|
<td><span class="price" style="color:var(--green)">$0.30</span></td>
|
|
<td><span class="price" style="color:var(--green)">$2.50</span></td>
|
|
<td><strong>Rapporto qualità/prezzo eccezionale</strong>, function calling nativo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Mistral</td>
|
|
<td><span class="model-name">Mistral Medium 3</span></td>
|
|
<td><span class="price">$1.00</span></td>
|
|
<td><span class="price">$3.00</span></td>
|
|
<td>Buon compromesso, EU hosting, 40% meno di GPT su output</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Groq</td>
|
|
<td><span class="model-name">Llama 3.3 70B</span></td>
|
|
<td><span class="price">$0.59</span></td>
|
|
<td><span class="price">$0.79</span></td>
|
|
<td>Ultra-veloce (394 TPS), economico, buon tool use</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cerebras</td>
|
|
<td class="na-cell">—</td>
|
|
<td class="na-cell">—</td>
|
|
<td class="na-cell">—</td>
|
|
<td class="na-cell">Catalogo limitato, non adatto per chat complesso</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FLOATING CHAT -->
|
|
<div class="tab-panel" id="tab-floating">
|
|
<div class="table-wrap reveal">
|
|
<div class="table-header">
|
|
<div>
|
|
<h3>💠 Floating Chat</h3>
|
|
<span class="desc">Function Calling + Intent Classification + Velocità</span>
|
|
</div>
|
|
</div>
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<tr><th>Provider</th><th>Modello</th><th>Input $/MTok</th><th>Output $/MTok</th><th>Motivazione</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>OpenAI</td>
|
|
<td><span class="model-name">GPT-4.1 Mini</span></td>
|
|
<td><span class="price">$0.40</span></td>
|
|
<td><span class="price">$1.60</span></td>
|
|
<td>Veloce, economico, buon function calling</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Anthropic</td>
|
|
<td><span class="model-name">Claude Haiku 4.5</span></td>
|
|
<td><span class="price">$1.00</span></td>
|
|
<td><span class="price">$5.00</span></td>
|
|
<td>Veloce, classificazione intent affidabile</td>
|
|
</tr>
|
|
<tr style="background: rgba(52,211,153,0.04);">
|
|
<td><strong>Google</strong></td>
|
|
<td><span class="model-name">Gemini 2.5 Flash-Lite</span></td>
|
|
<td><span class="price" style="color:var(--green)">$0.10</span></td>
|
|
<td><span class="price" style="color:var(--green)">$0.40</span></td>
|
|
<td><strong>Estremamente economico</strong>, veloce, sufficiente per single-turn</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Mistral</td>
|
|
<td><span class="model-name">Mistral Small 3.1</span></td>
|
|
<td><span class="price">$0.20</span></td>
|
|
<td><span class="price">$0.60</span></td>
|
|
<td>Veloce ed economico, EU compliance</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Groq</td>
|
|
<td><span class="model-name">Llama 4 Scout</span></td>
|
|
<td><span class="price">$0.11</span></td>
|
|
<td><span class="price">$0.34</span></td>
|
|
<td>Velocissimo (594 TPS), economico</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cerebras</td>
|
|
<td class="na-cell">—</td>
|
|
<td class="na-cell">—</td>
|
|
<td class="na-cell">—</td>
|
|
<td class="na-cell">Non adatto</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DAILY BRIEF -->
|
|
<div class="tab-panel" id="tab-brief">
|
|
<div class="table-wrap reveal">
|
|
<div class="table-header">
|
|
<div>
|
|
<h3>☀ Daily Brief</h3>
|
|
<span class="desc">Output Deterministico + Velocità</span>
|
|
</div>
|
|
</div>
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<tr><th>Provider</th><th>Modello</th><th>Input $/MTok</th><th>Output $/MTok</th><th>Motivazione</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>OpenAI</td>
|
|
<td><span class="model-name">GPT-4.1 Nano</span></td>
|
|
<td><span class="price">$0.10</span></td>
|
|
<td><span class="price">$0.40</span></td>
|
|
<td>Più economico OpenAI, perfetto per task deterministico</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Anthropic</td>
|
|
<td><span class="model-name">Claude Haiku 4.5</span></td>
|
|
<td><span class="price">$1.00</span></td>
|
|
<td><span class="price">$5.00</span></td>
|
|
<td>Affidabile ma costoso per questo use case</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Google</td>
|
|
<td><span class="model-name">Gemini 2.5 Flash-Lite</span></td>
|
|
<td><span class="price">$0.10</span></td>
|
|
<td><span class="price">$0.40</span></td>
|
|
<td>Stessa fascia di GPT-4.1 Nano, ottimo rapporto</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Mistral</td>
|
|
<td><span class="model-name">Mistral Small 3.1</span></td>
|
|
<td><span class="price">$0.20</span></td>
|
|
<td><span class="price">$0.60</span></td>
|
|
<td>Economico, EU hosting</td>
|
|
</tr>
|
|
<tr style="background: rgba(52,211,153,0.04);">
|
|
<td><strong>Groq</strong></td>
|
|
<td><span class="model-name">Llama 3.1 8B</span></td>
|
|
<td><span class="price" style="color:var(--green)">$0.05</span></td>
|
|
<td><span class="price" style="color:var(--green)">$0.08</span></td>
|
|
<td><strong>Il più economico in assoluto</strong>, 840 TPS</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cerebras</td>
|
|
<td class="na-cell">—</td>
|
|
<td class="na-cell">—</td>
|
|
<td class="na-cell">—</td>
|
|
<td class="na-cell">—</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BATCH AGENTS -->
|
|
<div class="tab-panel" id="tab-batch">
|
|
<div class="table-wrap reveal">
|
|
<div class="table-header">
|
|
<div>
|
|
<h3>⚙ Batch Agents</h3>
|
|
<span class="desc">Tool Calling Robusto + Output Strutturato</span>
|
|
</div>
|
|
</div>
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<tr><th>Provider</th><th>Modello</th><th>Input $/MTok</th><th>Output $/MTok</th><th>Motivazione</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="background: rgba(52,211,153,0.04);">
|
|
<td><strong>OpenAI</strong></td>
|
|
<td><span class="model-name">GPT-4.1 (Batch)</span></td>
|
|
<td><span class="price" style="color:var(--green)">$1.00</span></td>
|
|
<td><span class="price" style="color:var(--green)">$4.00</span></td>
|
|
<td><strong>50% sconto batch</strong>, eccellente output strutturato</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Anthropic</td>
|
|
<td><span class="model-name">Claude Sonnet 4.6 (Batch)</span></td>
|
|
<td><span class="price">$1.50</span></td>
|
|
<td><span class="price">$7.50</span></td>
|
|
<td>50% batch, tool use superiore, 300K output</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Google</td>
|
|
<td><span class="model-name">Gemini 2.5 Pro (Batch)</span></td>
|
|
<td><span class="price">$0.625</span></td>
|
|
<td><span class="price">$5.00</span></td>
|
|
<td>50% batch, alta qualità reasoning</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Mistral</td>
|
|
<td><span class="model-name">Mistral Large 3</span></td>
|
|
<td><span class="price">$2.00</span></td>
|
|
<td><span class="price">$6.00</span></td>
|
|
<td>Robusto, EU data residency</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Groq</td>
|
|
<td><span class="model-name">Qwen3 32B (Batch)</span></td>
|
|
<td><span class="price">$0.145</span></td>
|
|
<td><span class="price">$0.295</span></td>
|
|
<td>50% batch, molto economico</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cerebras</td>
|
|
<td class="na-cell">—</td>
|
|
<td class="na-cell">—</td>
|
|
<td class="na-cell">—</td>
|
|
<td class="na-cell">—</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EMBEDDINGS -->
|
|
<div class="tab-panel" id="tab-embed">
|
|
<div class="table-wrap reveal">
|
|
<div class="table-header">
|
|
<div>
|
|
<h3>🔍 Embeddings</h3>
|
|
<span class="desc">Indicizzazione Vettoriale per Ricerca Semantica</span>
|
|
</div>
|
|
</div>
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<tr><th>Provider</th><th>Modello</th><th>Costo/MTok</th><th>Dimensioni</th><th>Motivazione</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="background: rgba(52,211,153,0.04);">
|
|
<td><strong>OpenAI</strong></td>
|
|
<td><span class="model-name">text-embedding-3-small</span></td>
|
|
<td><span class="price" style="color:var(--green)">$0.02</span></td>
|
|
<td>1536</td>
|
|
<td><strong>Standard de facto</strong>, già in uso nell'app</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Google</td>
|
|
<td><span class="model-name">Gemini Embedding</span></td>
|
|
<td><span class="price">$0.15</span></td>
|
|
<td>Variabile</td>
|
|
<td>Buona qualità ma 7.5x più costoso</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Voyage AI</td>
|
|
<td><span class="model-name">voyage-3.5-lite</span></td>
|
|
<td><span class="price">$0.02</span></td>
|
|
<td>1024</td>
|
|
<td>Top qualità al prezzo più basso</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- ═══════ COST ESTIMATION ═══════ -->
|
|
<section id="costs">
|
|
<div class="wrap">
|
|
<div class="section-head reveal">
|
|
<p class="label">Simulazione</p>
|
|
<h2>Stima Costi Mensili per Utente</h2>
|
|
<p class="subtitle">Basata su un utilizzo tipico: 500 home, 300 floating, 210 brief, 100 batch, 1000 embeddings al mese.</p>
|
|
</div>
|
|
|
|
<div class="table-wrap reveal">
|
|
<div class="table-header">
|
|
<div>
|
|
<h3>Calcolo Dettagliato</h3>
|
|
<span class="desc">Token medi: Home 2K/1K • Floating 500/300 • Brief 1.5K/500 • Batch 3K/2K • Embed 500</span>
|
|
</div>
|
|
</div>
|
|
<div class="cost-bars" id="costChart">
|
|
<!-- filled by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-wrap reveal mt-4">
|
|
<div class="table-header">
|
|
<div>
|
|
<h3>Dettaglio per Feature — Strategia Multi-Provider Consigliata</h3>
|
|
</div>
|
|
</div>
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<tr><th>Feature</th><th>Provider</th><th>Modello</th><th>Messaggi/mese</th><th>Tok Input</th><th>Tok Output</th><th>Costo/mese</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Home Chat</td>
|
|
<td>Google</td>
|
|
<td><span class="model-name">Gemini 2.5 Flash</span></td>
|
|
<td>500</td>
|
|
<td>1M</td>
|
|
<td>500K</td>
|
|
<td><span class="price">$0.30 + $1.25 = $1.55</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Floating Chat</td>
|
|
<td>Google</td>
|
|
<td><span class="model-name">Gemini 2.5 Flash-Lite</span></td>
|
|
<td>300</td>
|
|
<td>150K</td>
|
|
<td>90K</td>
|
|
<td><span class="price">$0.015 + $0.036 = $0.05</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Daily Brief</td>
|
|
<td>OpenAI</td>
|
|
<td><span class="model-name">GPT-4.1 Nano</span></td>
|
|
<td>210</td>
|
|
<td>315K</td>
|
|
<td>105K</td>
|
|
<td><span class="price">$0.032 + $0.042 = $0.07</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Batch Agents</td>
|
|
<td>OpenAI</td>
|
|
<td><span class="model-name">GPT-4.1 (Batch)</span></td>
|
|
<td>100</td>
|
|
<td>300K</td>
|
|
<td>200K</td>
|
|
<td><span class="price">$0.30 + $0.80 = $1.10</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Embeddings</td>
|
|
<td>OpenAI</td>
|
|
<td><span class="model-name">text-embedding-3-small</span></td>
|
|
<td>1000</td>
|
|
<td>500K</td>
|
|
<td>—</td>
|
|
<td><span class="price">$0.01</span></td>
|
|
</tr>
|
|
<tr style="background: var(--surface-2);">
|
|
<td colspan="6" style="text-align:right; font-weight:600; color:var(--ink);">Totale Mensile per Utente</td>
|
|
<td><span class="price" style="color:var(--green); font-size:1rem;">~$2.78</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- ═══════ STRATEGIES ═══════ -->
|
|
<section id="strategy">
|
|
<div class="wrap">
|
|
<div class="section-head reveal">
|
|
<p class="label">Raccomandazione</p>
|
|
<h2>Strategie di Implementazione</h2>
|
|
<p class="subtitle">Tre approcci per bilanciare costo, qualità e complessità operativa.</p>
|
|
</div>
|
|
|
|
<div class="strategies-grid">
|
|
|
|
<!-- RECOMMENDED -->
|
|
<div class="strategy-card recommended reveal">
|
|
<span class="strategy-badge gold">🏆 Consigliata</span>
|
|
<h3>Multi-Provider Ottimizzato</h3>
|
|
<p style="font-size:0.85rem; color:var(--ink-2); margin-bottom:8px;">Provider diversi per ogni feature, massimizzando il rapporto qualità/costo.</p>
|
|
<ul class="strategy-list">
|
|
<li><span class="fn">Home Chat</span> <span class="mdl">Gemini 2.5 Flash</span></li>
|
|
<li><span class="fn">Floating Chat</span> <span class="mdl">Gemini 2.5 Flash-Lite</span></li>
|
|
<li><span class="fn">Daily Brief</span> <span class="mdl">GPT-4.1 Nano</span></li>
|
|
<li><span class="fn">Batch Agents</span> <span class="mdl">GPT-4.1 Batch</span></li>
|
|
<li><span class="fn">Embeddings</span> <span class="mdl">text-embedding-3-small</span></li>
|
|
</ul>
|
|
<div class="strategy-cost">
|
|
<span class="cost-label">Costo stimato/utente/mese</span>
|
|
<span class="cost-value highlight">~$2.78</span>
|
|
</div>
|
|
<p class="strategy-pros"><strong>Pro:</strong> Costo ottimale, qualità massima per feature. <strong>Contro:</strong> 2 API key da gestire (Google + OpenAI).</p>
|
|
</div>
|
|
|
|
<!-- BUDGET -->
|
|
<div class="strategy-card reveal">
|
|
<span class="strategy-badge silver">💰 Budget</span>
|
|
<h3>Provider Singolo — Groq</h3>
|
|
<p style="font-size:0.85rem; color:var(--ink-2); margin-bottom:8px;">Tutto su Groq per risparmio massimo. Velocità di inferenza imbattibile.</p>
|
|
<ul class="strategy-list">
|
|
<li><span class="fn">Home Chat</span> <span class="mdl">Llama 3.3 70B</span></li>
|
|
<li><span class="fn">Floating Chat</span> <span class="mdl">Llama 4 Scout</span></li>
|
|
<li><span class="fn">Daily Brief</span> <span class="mdl">Llama 3.1 8B</span></li>
|
|
<li><span class="fn">Batch Agents</span> <span class="mdl">Qwen3 32B Batch</span></li>
|
|
<li><span class="fn">Embeddings</span> <span class="mdl">OpenAI (esterno)</span></li>
|
|
</ul>
|
|
<div class="strategy-cost">
|
|
<span class="cost-label">Costo stimato/utente/mese</span>
|
|
<span class="cost-value" style="color:var(--blue);">~$1.05</span>
|
|
</div>
|
|
<p class="strategy-pros"><strong>Pro:</strong> Ultra economico, velocità record (394–840 TPS). <strong>Contro:</strong> Qualità tool calling inferiore ai proprietari. Serve OpenAI per embeddings.</p>
|
|
</div>
|
|
|
|
<!-- ENTERPRISE -->
|
|
<div class="strategy-card reveal">
|
|
<span class="strategy-badge bronze">🛡 Enterprise</span>
|
|
<h3>Provider Singolo — OpenAI</h3>
|
|
<p style="font-size:0.85rem; color:var(--ink-2); margin-bottom:8px;">Tutto OpenAI per massima affidabilità e semplicità operativa.</p>
|
|
<ul class="strategy-list">
|
|
<li><span class="fn">Home Chat</span> <span class="mdl">GPT-4.1</span></li>
|
|
<li><span class="fn">Floating Chat</span> <span class="mdl">GPT-4.1 Mini</span></li>
|
|
<li><span class="fn">Daily Brief</span> <span class="mdl">GPT-4.1 Nano</span></li>
|
|
<li><span class="fn">Batch Agents</span> <span class="mdl">GPT-4.1 Batch</span></li>
|
|
<li><span class="fn">Embeddings</span> <span class="mdl">text-embedding-3-small</span></li>
|
|
</ul>
|
|
<div class="strategy-cost">
|
|
<span class="cost-label">Costo stimato/utente/mese</span>
|
|
<span class="cost-value" style="color:var(--warn);">~$6.20</span>
|
|
</div>
|
|
<p class="strategy-pros"><strong>Pro:</strong> Ecosistema unificato, ZDR, affidabilità massima, 1 sola API key. <strong>Contro:</strong> Costo 2–6x superiore alle alternative.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- ═══════ WHY SECTION ═══════ -->
|
|
<section id="why">
|
|
<div class="wrap">
|
|
<div class="section-head reveal">
|
|
<p class="label">Motivazioni</p>
|
|
<h2>Perché queste scelte</h2>
|
|
<p class="subtitle">Analisi dettagliata delle motivazioni dietro la strategia multi-provider consigliata.</p>
|
|
</div>
|
|
|
|
<div class="why-grid">
|
|
|
|
<div class="why-card reveal">
|
|
<h4>💬 Gemini 2.5 Flash per Home Chat</h4>
|
|
<p>Google ha tagliato i prezzi aggressivamente nel 2026. Flash offre function calling nativo, 1M di contesto, e costa <strong>6–7x meno</strong> di Claude Sonnet per l'output. La qualità è sufficiente per chat interattivo con tool use. Con il batch discount del 50%, diventa ancora più competitivo per carichi elevati.</p>
|
|
</div>
|
|
|
|
<div class="why-card reveal">
|
|
<h4>💠 Gemini 2.5 Flash-Lite per Floating</h4>
|
|
<p>Per interazioni single-turn con classificazione intent, un modello leggero è più che sufficiente. A <span class="highlight-model">$0.10/$0.40</span> per MTok è <strong>10x più economico</strong> di Claude Haiku e 4x meno di GPT-4.1 Mini. La latenza bassissima lo rende ideale per il floating panel.</p>
|
|
</div>
|
|
|
|
<div class="why-card reveal">
|
|
<h4>☀ GPT-4.1 Nano per Daily Brief</h4>
|
|
<p>Il brief è un task deterministico con prompt fisso e output breve (3–5 frasi). Nano è il modello più economico di OpenAI a <span class="highlight-model">$0.10/$0.40</span> e produce output consistente di alta qualità. Non serve function calling, quindi un modello leggero basta.</p>
|
|
</div>
|
|
|
|
<div class="why-card reveal">
|
|
<h4>⚙ GPT-4.1 Batch per Agenti</h4>
|
|
<p>Gli agenti batch non richiedono risposta in tempo reale. Lo <strong>sconto batch 50%</strong> di OpenAI rende GPT-4.1 imbattibile a <span class="highlight-model">$1.00/$4.00</span>. Il suo output strutturato e tool calling sono tra i migliori del mercato, cruciali per operazioni CRUD affidabili.</p>
|
|
</div>
|
|
|
|
<div class="why-card reveal">
|
|
<h4>🚫 DeepSeek e GLM Esclusi</h4>
|
|
<p>Nonostante i costi bassissimi (DeepSeek V3 a $0.28/$0.42), entrambi i provider cinesi presentano <strong>rischi di privacy non accettabili</strong> per un'app che gestisce dati personali e aziendali. DeepSeek non offre versione enterprise e i dati risiedono in Cina. GLM ha policy non verificabili per utenti internazionali.</p>
|
|
</div>
|
|
|
|
<div class="why-card reveal">
|
|
<h4>⚡ Groq come Alternativa Budget</h4>
|
|
<p>Se il costo è la priorità assoluta, Groq con Llama 3.3 70B è l'opzione più economica con qualità accettabile. La velocità di inferenza (<strong>394–840 TPS</strong>) è imbattibile. Il limite è nella qualità del tool calling rispetto ai modelli proprietari.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- ═══════ FOOTER ═══════ -->
|
|
<footer>
|
|
<div class="wrap">
|
|
<p class="note">
|
|
Prezzi aggiornati ad Aprile 2026. I prezzi possono variare rapidamente — verificare sempre le pagine ufficiali dei provider prima di prendere decisioni.<br>
|
|
Questo report considera esclusivamente l'uso via API con policy di non-utilizzo dati per training dei modelli.
|
|
</p>
|
|
<p class="label mb-2">Fonti</p>
|
|
<div class="sources-grid">
|
|
<a href="https://openai.com/api/pricing/" target="_blank">OpenAI API Pricing</a>
|
|
<a href="https://platform.claude.com/docs/en/docs/about-claude/models" target="_blank">Anthropic Claude Models</a>
|
|
<a href="https://ai.google.dev/pricing" target="_blank">Google Gemini API Pricing</a>
|
|
<a href="https://mistral.ai/pricing" target="_blank">Mistral AI Pricing</a>
|
|
<a href="https://groq.com/pricing" target="_blank">Groq On-Demand Pricing</a>
|
|
<a href="https://www.cerebras.ai/policies" target="_blank">Cerebras Privacy Policy</a>
|
|
<a href="https://api-docs.deepseek.com/quick_start/pricing/" target="_blank">DeepSeek API Pricing</a>
|
|
<a href="https://docs.z.ai/guides/overview/pricing" target="_blank">Zhipu GLM Pricing</a>
|
|
<a href="https://developers.openai.com/api/docs/guides/your-data" target="_blank">OpenAI Data Controls</a>
|
|
<a href="https://openai.com/enterprise-privacy/" target="_blank">OpenAI Enterprise Privacy</a>
|
|
<a href="https://legal.mistral.ai/terms/privacy-policy" target="_blank">Mistral Privacy Policy</a>
|
|
<a href="https://support.google.com/gemini/answer/13594961" target="_blank">Gemini Privacy Hub</a>
|
|
<a href="https://pricepertoken.com/" target="_blank">Price Per Token — LLM Pricing 2026</a>
|
|
<a href="https://costgoat.com/compare/llm-api" target="_blank">CostGoat LLM Comparison</a>
|
|
<a href="https://llm-stats.com/leaderboards/best-ai-for-tool-calling" target="_blank">Best AI for Tool Calling 2026</a>
|
|
<a href="https://aicostboard.com/blog/posts/llm-api-pricing-comparison-2026" target="_blank">AI Cost Board Pricing Comparison</a>
|
|
</div>
|
|
<p style="margin-top:40px; font-size:0.75rem; color:var(--ink-3); text-align:center;">
|
|
Report generato per adiuvAI • Aprile 2026
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// ── Reveal on scroll ─────────────────────────────
|
|
const reveals = document.querySelectorAll('.reveal');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((e, i) => {
|
|
if (e.isIntersecting) {
|
|
setTimeout(() => e.target.classList.add('visible'), i * 60);
|
|
observer.unobserve(e.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.08 });
|
|
reveals.forEach(el => observer.observe(el));
|
|
|
|
// ── Tabs ──────────────────────────────────────────
|
|
document.querySelectorAll('.tab-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
|
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
|
|
});
|
|
});
|
|
|
|
// ── TOC active state ──────────────────────────────
|
|
const sections = document.querySelectorAll('section, header');
|
|
const tocLinks = document.querySelectorAll('.toc a');
|
|
const tocObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(e => {
|
|
if (e.isIntersecting) {
|
|
tocLinks.forEach(l => l.classList.remove('active'));
|
|
const link = document.querySelector(`.toc a[href="#${e.target.id}"]`);
|
|
if (link) link.classList.add('active');
|
|
}
|
|
});
|
|
}, { threshold: 0.3 });
|
|
sections.forEach(s => { if (s.id) tocObserver.observe(s); });
|
|
|
|
// ── Cost Chart ────────────────────────────────────
|
|
// Usage: 500 home (2K in + 1K out), 300 floating (500 in + 300 out),
|
|
// 210 brief (1.5K in + 500 out), 100 batch (3K in + 2K out), 1000 embeds (500 in)
|
|
const usage = {
|
|
home: { msgs: 500, inTok: 2000, outTok: 1000 },
|
|
float: { msgs: 300, inTok: 500, outTok: 300 },
|
|
brief: { msgs: 210, inTok: 1500, outTok: 500 },
|
|
batch: { msgs: 100, inTok: 3000, outTok: 2000 },
|
|
embed: { msgs: 1000, inTok: 500 }
|
|
};
|
|
|
|
function calcCost(feature, inPrice, outPrice) {
|
|
const u = usage[feature];
|
|
const inCost = (u.msgs * u.inTok / 1e6) * inPrice;
|
|
const outCost = u.outTok ? (u.msgs * u.outTok / 1e6) * outPrice : 0;
|
|
return inCost + outCost;
|
|
}
|
|
|
|
const strategies = [
|
|
{
|
|
name: 'Multi-Provider',
|
|
color: 'green',
|
|
cost: calcCost('home', 0.30, 2.50) + calcCost('float', 0.10, 0.40) + calcCost('brief', 0.10, 0.40) + calcCost('batch', 1.00, 4.00) + (1000 * 500 / 1e6) * 0.02
|
|
},
|
|
{
|
|
name: 'Groq Budget',
|
|
color: 'blue',
|
|
cost: calcCost('home', 0.59, 0.79) + calcCost('float', 0.11, 0.34) + calcCost('brief', 0.05, 0.08) + calcCost('batch', 0.145, 0.295) + (1000 * 500 / 1e6) * 0.02
|
|
},
|
|
{
|
|
name: 'OpenAI Enterprise',
|
|
color: 'amber',
|
|
cost: calcCost('home', 2.00, 8.00) + calcCost('float', 0.40, 1.60) + calcCost('brief', 0.10, 0.40) + calcCost('batch', 1.00, 4.00) + (1000 * 500 / 1e6) * 0.02
|
|
},
|
|
{
|
|
name: 'Anthropic Full',
|
|
color: 'purple',
|
|
cost: calcCost('home', 3.00, 15.00) + calcCost('float', 1.00, 5.00) + calcCost('brief', 1.00, 5.00) + calcCost('batch', 1.50, 7.50) + (1000 * 500 / 1e6) * 0.02
|
|
},
|
|
{
|
|
name: 'Mistral EU',
|
|
color: 'teal',
|
|
cost: calcCost('home', 1.00, 3.00) + calcCost('float', 0.20, 0.60) + calcCost('brief', 0.20, 0.60) + calcCost('batch', 2.00, 6.00) + (1000 * 500 / 1e6) * 0.02
|
|
},
|
|
{
|
|
name: 'Google Full',
|
|
color: 'pink',
|
|
cost: calcCost('home', 0.30, 2.50) + calcCost('float', 0.10, 0.40) + calcCost('brief', 0.10, 0.40) + calcCost('batch', 0.625, 5.00) + (1000 * 500 / 1e6) * 0.15
|
|
}
|
|
];
|
|
|
|
const maxCost = Math.max(...strategies.map(s => s.cost));
|
|
const minCost = Math.min(...strategies.map(s => s.cost));
|
|
const chart = document.getElementById('costChart');
|
|
|
|
strategies.sort((a, b) => a.cost - b.cost);
|
|
|
|
strategies.forEach((s, i) => {
|
|
const pct = (s.cost / maxCost) * 100;
|
|
const isBest = s.cost === minCost;
|
|
const row = document.createElement('div');
|
|
row.className = 'cost-row';
|
|
row.innerHTML = `
|
|
<span class="provider-name">${s.name}</span>
|
|
<div class="cost-bar-track">
|
|
<div class="cost-bar-fill ${s.color}" style="width: 0%;" data-width="${pct}"></div>
|
|
</div>
|
|
<span class="cost-amount ${isBest ? 'best' : ''}">$${s.cost.toFixed(2)}</span>
|
|
`;
|
|
chart.appendChild(row);
|
|
});
|
|
|
|
// Animate bars
|
|
setTimeout(() => {
|
|
document.querySelectorAll('.cost-bar-fill').forEach(bar => {
|
|
bar.style.width = bar.dataset.width + '%';
|
|
});
|
|
}, 600);
|
|
</script>
|
|
|
|
</body>
|
|
</html> |