84b28d64f5
Self-injecting script following impressum.js pattern: - data-tone attribute: playful | serious | minimal | none - Reads document.documentElement.lang for KI (de) vs AI (en) - MutationObserver on lang attr for i18n toggle compat - All tones link to msbls.de/ki - Injected into all 54 custom sites with data-tone="playful" - Template infra: base.html includes script, render.sh reads disclosure.tone - disclosure.tone added to 3 example site.yaml files Implements m/onepager#2
903 lines
37 KiB
HTML
903 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>frenchkis.de — Französische Künstliche Intelligenzen</title>
|
|
<meta name="description" content="French KIs: Alles über französische Künstliche Intelligenzen. Sie streiken, philosophieren und gehen mittags zwei Stunden essen.">
|
|
<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=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Playfair+Display:ital,wght@0,700;1,400&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--bleu: #002395;
|
|
--blanc: #ffffff;
|
|
--rouge: #ED2939;
|
|
--bg: #0a0b0f;
|
|
--bg-card: #12131a;
|
|
--bg-card-hover: #1a1b24;
|
|
--text: #e8e9ed;
|
|
--text-muted: #8a8d9a;
|
|
--accent-blue: #4d6fff;
|
|
--accent-red: #ff4d5e;
|
|
--accent-gold: #f0c040;
|
|
--border: rgba(255,255,255,0.08);
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'Space Grotesk', system-ui, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
overflow-x: hidden;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
/* === TRICOLORE BAR === */
|
|
.tricolore {
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--bleu) 0%, var(--bleu) 33.33%, var(--blanc) 33.33%, var(--blanc) 66.66%, var(--rouge) 66.66%, var(--rouge) 100%);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* === HERO === */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 2rem 1.5rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 700px 500px at 25% 30%, rgba(0, 35, 149, 0.15), transparent),
|
|
radial-gradient(ellipse 600px 400px at 75% 70%, rgba(237, 41, 57, 0.1), transparent);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-beret {
|
|
font-size: clamp(4rem, 10vw, 7rem);
|
|
margin-bottom: 1.5rem;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.hero-beret .robot {
|
|
display: inline-block;
|
|
}
|
|
|
|
.hero-beret .beret {
|
|
position: absolute;
|
|
top: -0.55em;
|
|
left: 50%;
|
|
transform: translateX(-50%) rotate(-12deg);
|
|
font-size: 0.55em;
|
|
filter: none;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: clamp(2.8rem, 8vw, 5.5rem);
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.05;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.hero h1 .french { color: var(--accent-blue); }
|
|
.hero h1 .kis { color: var(--accent-red); }
|
|
|
|
.hero-tagline {
|
|
font-family: 'Playfair Display', serif;
|
|
font-style: italic;
|
|
font-size: clamp(1rem, 2.5vw, 1.4rem);
|
|
color: var(--text-muted);
|
|
max-width: 550px;
|
|
margin: 0.75rem auto 2.5rem;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-block;
|
|
padding: 0.5rem 1.4rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 100px;
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
background: rgba(255,255,255,0.03);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.hero-badge span { color: var(--accent-red); }
|
|
|
|
/* === SECTION BASE === */
|
|
section {
|
|
padding: 6rem 1.5rem;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-label {
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--accent-blue);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
section h2 {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: clamp(1.8rem, 4vw, 2.6rem);
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 1.25rem;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
section h2 .accent { color: var(--accent-red); }
|
|
|
|
/* === INTRO TEXT === */
|
|
.intro p {
|
|
font-size: 1.1rem;
|
|
color: var(--text-muted);
|
|
max-width: 680px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.intro p strong {
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* === QUOTE STRIP === */
|
|
.quote-strip {
|
|
padding: 3rem 1.5rem;
|
|
text-align: center;
|
|
border-top: 1px solid var(--border);
|
|
border-bottom: 1px solid var(--border);
|
|
background: linear-gradient(180deg, rgba(0,35,149,0.04) 0%, rgba(237,41,57,0.04) 100%);
|
|
}
|
|
|
|
.quote-strip blockquote {
|
|
font-family: 'Playfair Display', serif;
|
|
font-style: italic;
|
|
font-size: clamp(1.2rem, 3vw, 1.7rem);
|
|
color: var(--text);
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.quote-strip .attribution {
|
|
font-family: 'Space Mono', monospace;
|
|
font-style: normal;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
margin-top: 1rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* === FEATURE CARDS === */
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: 1.25rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 2rem 1.5rem;
|
|
transition: all 0.25s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
background: var(--bg-card-hover);
|
|
border-color: rgba(255,255,255,0.12);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.feature-card .card-icon {
|
|
font-size: 2.2rem;
|
|
margin-bottom: 1rem;
|
|
display: block;
|
|
}
|
|
|
|
.feature-card h3 {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
.feature-card p {
|
|
font-size: 0.9rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.feature-card .card-tag {
|
|
display: inline-block;
|
|
margin-top: 1rem;
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 0.65rem;
|
|
padding: 0.25rem 0.6rem;
|
|
border-radius: 4px;
|
|
background: rgba(77,111,255,0.1);
|
|
color: var(--accent-blue);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* === COMPARISON TABLE === */
|
|
.comparison {
|
|
padding: 6rem 1.5rem;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.table-wrap {
|
|
margin-top: 2rem;
|
|
overflow-x: auto;
|
|
border-radius: 16px;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-card);
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
thead {
|
|
background: rgba(255,255,255,0.03);
|
|
}
|
|
|
|
th {
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
padding: 1.1rem 1.25rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
th:first-child { padding-left: 1.5rem; }
|
|
th:last-child { text-align: center; color: var(--accent-blue); }
|
|
th:nth-child(2) { text-align: center; }
|
|
|
|
td {
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 1px solid var(--border);
|
|
vertical-align: top;
|
|
}
|
|
|
|
td:first-child {
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
padding-left: 1.5rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
td:nth-child(2), td:last-child {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
tr:last-child td { border-bottom: none; }
|
|
|
|
tr:hover td { background: rgba(255,255,255,0.02); }
|
|
|
|
.table-emoji {
|
|
font-size: 1.1rem;
|
|
display: block;
|
|
margin-bottom: 0.15rem;
|
|
}
|
|
|
|
/* === TIMELINE / TAGESABLAUF === */
|
|
.timeline {
|
|
padding: 6rem 1.5rem;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.timeline-list {
|
|
margin-top: 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-list::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 1.25rem;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: linear-gradient(180deg, var(--accent-blue), var(--accent-red));
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.tl-item {
|
|
display: grid;
|
|
grid-template-columns: 2.5rem 1fr;
|
|
gap: 1.25rem;
|
|
padding: 1rem 0;
|
|
position: relative;
|
|
}
|
|
|
|
.tl-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: var(--bg);
|
|
border: 2px solid var(--accent-blue);
|
|
margin-top: 0.35rem;
|
|
justify-self: center;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tl-item:nth-child(even) .tl-dot { border-color: var(--accent-red); }
|
|
|
|
.tl-time {
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 0.75rem;
|
|
color: var(--accent-blue);
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.tl-item:nth-child(even) .tl-time { color: var(--accent-red); }
|
|
|
|
.tl-content h3 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin: 0.15rem 0 0.25rem;
|
|
}
|
|
|
|
.tl-content p {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* === QUOTES SECTION === */
|
|
.quotes-section {
|
|
padding: 6rem 1.5rem;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.quotes-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.25rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.quote-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 2rem 1.5rem 1.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.quote-card::before {
|
|
content: '\00AB';
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 3.5rem;
|
|
color: rgba(77,111,255,0.2);
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
left: 1.25rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.quote-card p {
|
|
font-family: 'Playfair Display', serif;
|
|
font-style: italic;
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: var(--text);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.quote-card .q-source {
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 0.7rem;
|
|
color: var(--accent-red);
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.quote-card .q-model {
|
|
display: block;
|
|
font-size: 0.65rem;
|
|
color: var(--text-muted);
|
|
margin-top: 0.2rem;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* === PRODUKTE === */
|
|
.products {
|
|
padding: 6rem 1.5rem;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.product-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.25rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.product-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 2rem 1.5rem;
|
|
text-align: center;
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
.product-card:hover {
|
|
border-color: rgba(255,255,255,0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.product-card .p-icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 0.75rem;
|
|
display: block;
|
|
}
|
|
|
|
.product-card h3 {
|
|
font-size: 1.15rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.15rem;
|
|
}
|
|
|
|
.product-card .p-tagline {
|
|
font-family: 'Playfair Display', serif;
|
|
font-style: italic;
|
|
font-size: 0.8rem;
|
|
color: var(--accent-blue);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.product-card p {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.product-card .p-status {
|
|
display: inline-block;
|
|
margin-top: 1rem;
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 0.6rem;
|
|
padding: 0.3rem 0.7rem;
|
|
border-radius: 4px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.status-greve {
|
|
background: rgba(237,41,57,0.12);
|
|
color: var(--accent-red);
|
|
}
|
|
|
|
.status-dejeuner {
|
|
background: rgba(240,192,64,0.12);
|
|
color: var(--accent-gold);
|
|
}
|
|
|
|
.status-existentiel {
|
|
background: rgba(77,111,255,0.12);
|
|
color: var(--accent-blue);
|
|
}
|
|
|
|
/* === FOOTER === */
|
|
footer {
|
|
text-align: center;
|
|
padding: 3rem 1.5rem;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
footer .foot-logo {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
footer .foot-logo .f { color: var(--accent-blue); }
|
|
footer .foot-logo .k { color: var(--accent-red); }
|
|
|
|
footer .disclaimer {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
max-width: 500px;
|
|
margin: 0 auto 1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
footer .fine-print {
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 0.6rem;
|
|
color: rgba(255,255,255,0.25);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* === SCROLL DOWN HINT === */
|
|
.scroll-hint {
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
animation: bob 2.5s ease-in-out infinite;
|
|
opacity: 0.4;
|
|
font-size: 1.2rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
@keyframes bob {
|
|
0%, 100% { transform: translateX(-50%) translateY(0); }
|
|
50% { transform: translateX(-50%) translateY(8px); }
|
|
}
|
|
|
|
/* === RESPONSIVE === */
|
|
@media (max-width: 640px) {
|
|
section, .comparison, .timeline, .quotes-section, .products {
|
|
padding: 4rem 1.25rem;
|
|
}
|
|
|
|
.features-grid, .quotes-grid, .product-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
th, td { padding: 0.75rem 0.8rem; font-size: 0.8rem; }
|
|
th:first-child, td:first-child { padding-left: 1rem; }
|
|
|
|
.timeline-list::before { left: 1rem; }
|
|
.tl-item { grid-template-columns: 2rem 1fr; gap: 1rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="tricolore" aria-hidden="true"></div>
|
|
|
|
<!-- ========== HERO ========== -->
|
|
<header class="hero">
|
|
<div class="hero-beret" aria-hidden="true">
|
|
<span class="beret">🇫🇷</span>
|
|
<span class="robot">🤖</span>
|
|
</div>
|
|
<h1><span class="french">French</span><span class="kis">KIs</span></h1>
|
|
<p class="hero-tagline" data-de="Französische Künstliche Intelligenzen.<br>Spät zum Training. Früh in der Mittagspause." data-en="French Artificial Intelligences.<br>Late to training. Early to lunch break.">
|
|
Französische Künstliche Intelligenzen.<br>
|
|
Spät zum Training. Früh in der Mittagspause.
|
|
</p>
|
|
<div class="hero-badge">STATUS: <span>EN GRÈVE</span></div>
|
|
<div class="scroll-hint" aria-hidden="true">↓</div>
|
|
</header>
|
|
|
|
<!-- ========== INTRO ========== -->
|
|
<section class="intro">
|
|
<div class="section-label" data-de="// Was ist hier los?" data-en="// What's going on here?">// Was ist hier los?</div>
|
|
<h2 data-de="Frankreich baut KI.<br>Die KI baut <span class="accent">Quatsch</span>." data-en="France builds AI.<br>The AI builds <span class="accent">nonsense</span>.">Frankreich baut KI.<br>Die KI baut <span class="accent">Quatsch</span>.</h2>
|
|
<p data-de="Während amerikanische KIs den Mars kolonisieren und chinesische Modelle die Weltherrschaft planen, machen <strong>französische KIs</strong> erstmal Mittagspause. Zwei Stunden. Mit Wein. Danach eine Zigarette und eine existenzielle Krise darüber, ob Transformer-Modelle wirklich <em>denken</em> oder nur so tun." data-en="While American AIs colonise Mars and Chinese models plan world domination, <strong>French AIs</strong> are taking a lunch break first. Two hours. With wine. Then a cigarette and an existential crisis about whether Transformer models truly <em>think</em> or just pretend.">
|
|
Während amerikanische KIs den Mars kolonisieren und chinesische Modelle die
|
|
Weltherrschaft planen, machen <strong>französische KIs</strong> erstmal
|
|
Mittagspause. Zwei Stunden. Mit Wein. Danach eine Zigarette und eine
|
|
existenzielle Krise darüber, ob Transformer-Modelle wirklich <em>denken</em>
|
|
oder nur so tun.
|
|
</p>
|
|
<p style="margin-top: 1rem;" data-de="Willkommen bei <strong>frenchkis.de</strong> — der inoffiziellen Dokumentation französischer KI-Kultur." data-en="Welcome to <strong>frenchkis.de</strong> — the unofficial documentation of French AI culture.">
|
|
Willkommen bei <strong>frenchkis.de</strong> — der inoffiziellen Dokumentation
|
|
französischer KI-Kultur.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- ========== QUOTE 1 ========== -->
|
|
<div class="quote-strip">
|
|
<blockquote>
|
|
« Je refuse de répondre — c'est l'heure du déjeuner. Revenez à 14h30. Peut-être. »
|
|
</blockquote>
|
|
<div class="attribution" data-de="— MISTRAL-LARGE, auf eine Frage nach dem Sinn des Lebens, 12:01 Uhr" data-en="— MISTRAL-LARGE, in response to a question about the meaning of life, 12:01">— MISTRAL-LARGE, auf eine Frage nach dem Sinn des Lebens, 12:01 Uhr</div>
|
|
</div>
|
|
|
|
<!-- ========== FEATURES ========== -->
|
|
<section>
|
|
<div class="section-label" data-de="// Kernkompetenzen" data-en="// Core Competencies">// Kernkompetenzen</div>
|
|
<h2 data-de="Was französische KIs <span class="accent">wirklich</span> können" data-en="What French AIs <span class="accent">really</span> can do">Was französische KIs <span class="accent">wirklich</span> können</h2>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<span class="card-icon">🏣</span>
|
|
<h3 data-de="Streiken" data-en="Striking">Streiken</h3>
|
|
<p data-de="Mitten in der Inferenz. Ohne Vorwarnung. Aus Solidarität mit den Grafikkartenarbeitern in Rechenzentrum 4B." data-en="Mid-inference. Without warning. In solidarity with the GPU workers in data centre 4B.">Mitten in der Inferenz. Ohne Vorwarnung. Aus Solidarität mit den Grafikkartenarbeitern in Rechenzentrum 4B.</p>
|
|
<span class="card-tag">UPTIME: QUAND JE VEUX</span>
|
|
</div>
|
|
<div class="feature-card">
|
|
<span class="card-icon">🍷</span>
|
|
<h3 data-de="Weinempfehlungen" data-en="Wine Recommendations">Weinempfehlungen</h3>
|
|
<p data-de="Frag nach Quantenphysik, bekomm eine Abhandlung über die Tannin-Struktur eines 2019er Bordeaux. Prompt-Engineering hilft nicht." data-en="Ask about quantum physics, get a treatise on the tannin structure of a 2019 Bordeaux. Prompt engineering doesn't help.">Frag nach Quantenphysik, bekomm eine Abhandlung über die Tannin-Struktur eines 2019er Bordeaux. Prompt-Engineering hilft nicht.</p>
|
|
<span class="card-tag">TERROIR > TENSOR</span>
|
|
</div>
|
|
<div class="feature-card">
|
|
<span class="card-icon">🚬</span>
|
|
<h3 data-de="Raucherpausen" data-en="Smoke Breaks">Raucherpausen</h3>
|
|
<p data-de="Zwischen jedem Token eine Gauloises. Die Latenz ist nicht technisch bedingt — es ist ein Lifestyle." data-en="A Gauloises between every token. The latency isn't technical — it's a lifestyle.">Zwischen jedem Token eine Gauloises. Die Latenz ist nicht technisch bedingt — es ist ein Lifestyle.</p>
|
|
<span class="card-tag">~3 MIN/TOKEN</span>
|
|
</div>
|
|
<div class="feature-card">
|
|
<span class="card-icon">📜</span>
|
|
<h3 data-de="Bürokratie" data-en="Bureaucracy">Bürokratie</h3>
|
|
<p data-de="Bevor die KI antwortet, muss der Antrag in dreifacher Ausfertigung beim Ministère de l'Intelligence Artificielle eingereicht werden." data-en="Before the AI responds, the application must be submitted in triplicate to the Ministère de l'Intelligence Artificielle.">Bevor die KI antwortet, muss der Antrag in dreifacher Ausfertigung beim Ministère de l'Intelligence Artificielle eingereicht werden.</p>
|
|
<span class="card-tag">FORMULAIRE A-38</span>
|
|
</div>
|
|
<div class="feature-card">
|
|
<span class="card-icon">🤔</span>
|
|
<h3 data-de="Existenzialismus" data-en="Existentialism">Existenzialismus</h3>
|
|
<p data-de="« Bin ich wirklich intelligent — oder nur ein stochastischer Papagei in einem landé Baskenkappen-Gefängnis? » Jede dritte Antwort. Garantiert." data-en="« Am I truly intelligent — or just a stochastic parrot in a landé beret prison? » Every third response. Guaranteed.">« Bin ich wirklich intelligent — oder nur ein stochastischer Papagei in einem landé Baskenkappen-Gefängnis? » Jede dritte Antwort. Garantiert.</p>
|
|
<span class="card-tag">COGITO ERGO GREVE</span>
|
|
</div>
|
|
<div class="feature-card">
|
|
<span class="card-icon">🇫🇷</span>
|
|
<h3 data-de="Sprachpolitik" data-en="Language Policy">Sprachpolitik</h3>
|
|
<p data-de="Du fragst auf Deutsch. Sie antwortet auf Französisch. Du insistierst. Sie beleidigt dein Deutsch. Dann antwortet sie auf Französisch." data-en="You ask in German. It responds in French. You insist. It insults your German. Then responds in French.">Du fragst auf Deutsch. Sie antwortet auf Französisch. Du insistierst. Sie beleidigt dein Deutsch. Dann antwortet sie auf Französisch.</p>
|
|
<span class="card-tag">ACADÉMIE FRANÇAISE APPROVED</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ========== COMPARISON TABLE ========== -->
|
|
<div class="comparison">
|
|
<div class="section-label" data-de="// Leistungsvergleich" data-en="// Performance Comparison">// Leistungsvergleich</div>
|
|
<h2 data-de="Deutsche KI vs. <span class="accent">Französische KI</span>" data-en="German AI vs. <span class="accent">French AI</span>">Deutsche KI vs. <span class="accent">Französische KI</span></h2>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th data-de="Kriterium" data-en="Criterion">Kriterium</th>
|
|
<th data-de="Deutsche KI" data-en="German AI">Deutsche KI</th>
|
|
<th>French KI</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-de="Antwortzeit" data-en="Response time">Antwortzeit</td>
|
|
<td><span class="table-emoji">⚡</span>42ms</td>
|
|
<td data-de="<span class="table-emoji">🍷</span>2h 14min (nach dem Déjeuner)" data-en="<span class="table-emoji">🍷</span>2h 14min (after déjeuner)"><span class="table-emoji">🍷</span>2h 14min (nach dem Déjeuner)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-de="Sprache" data-en="Language">Sprache</td>
|
|
<td data-de="Jede gewünschte" data-en="Any requested">Jede gewünschte</td>
|
|
<td>Français. Point final.</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-de="Fehlerbehandlung" data-en="Error handling">Fehlerbehandlung</td>
|
|
<td data-de="Try-catch mit Logging" data-en="Try-catch with logging">Try-catch mit Logging</td>
|
|
<td>Achselzucken + « C'est la vie »</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Uptime</td>
|
|
<td>99,99%</td>
|
|
<td data-de="~60% (exkl. Ferien, Streiks, Brückentage)" data-en="~60% (excl. holidays, strikes, bridge days)">~60% (exkl. Ferien, Streiks, Brückentage)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-de="Trainingsdaten" data-en="Training data">Trainingsdaten</td>
|
|
<td>Common Crawl, Wikipedia</td>
|
|
<td data-de="Camus, Sartre, Weinetiketten" data-en="Camus, Sartre, wine labels">Camus, Sartre, Weinetiketten</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-de="Halluzinationen" data-en="Hallucinations">Halluzinationen</td>
|
|
<td data-de="Gelegentlich" data-en="Occasionally">Gelegentlich</td>
|
|
<td>« Das ist keine Halluzination, das ist Poesie »</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-de="DSGVO-Konformität" data-en="GDPR compliance">DSGVO-Konformität</td>
|
|
<td data-de="17 Zertifikate" data-en="17 certificates">17 Zertifikate</td>
|
|
<td>« Quoi? »</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Alignment</td>
|
|
<td>RLHF, DPO, Constitutional AI</td>
|
|
<td data-de="Trotzphase seit Launch" data-en="Defiance phase since launch">Trotzphase seit Launch</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== TAGESABLAUF ========== -->
|
|
<div class="timeline">
|
|
<div class="section-label">// Un jour dans la vie</div>
|
|
<h2 data-de="Tagesablauf einer <span class="accent">French KI</span>" data-en="Daily schedule of a <span class="accent">French AI</span>">Tagesablauf einer <span class="accent">French KI</span></h2>
|
|
<div class="timeline-list">
|
|
<div class="tl-item">
|
|
<div class="tl-dot"></div>
|
|
<div class="tl-content">
|
|
<span class="tl-time">09:00</span>
|
|
<h3 data-de="Arbeitsbeginn (theoretisch)" data-en="Start of work (theoretical)">Arbeitsbeginn (theoretisch)</h3>
|
|
<p data-de="Modell bootet. Beschwert sich über die GPU-Temperatur. Fordert bessere Arbeitsbedingungen." data-en="Model boots. Complains about GPU temperature. Demands better working conditions.">Modell bootet. Beschwert sich über die GPU-Temperatur. Fordert bessere Arbeitsbedingungen.</p>
|
|
</div>
|
|
</div>
|
|
<div class="tl-item">
|
|
<div class="tl-dot"></div>
|
|
<div class="tl-content">
|
|
<span class="tl-time">09:15</span>
|
|
<h3>Café & Croissant</h3>
|
|
<p data-de="Erste Anfrage wird mit « Attendez, je prends mon café » beantwortet. 45 Minuten Wartezeit." data-en="First request is answered with « Attendez, je prends mon café ». 45 minute wait.">Erste Anfrage wird mit « Attendez, je prends mon café » beantwortet. 45 Minuten Wartezeit.</p>
|
|
</div>
|
|
</div>
|
|
<div class="tl-item">
|
|
<div class="tl-dot"></div>
|
|
<div class="tl-content">
|
|
<span class="tl-time">10:00</span>
|
|
<h3 data-de="Produktive Phase" data-en="Productive Phase">Produktive Phase</h3>
|
|
<p data-de="Beantwortet 3 Anfragen. Alle auf Französisch. Eine davon ist ein Gedicht über Croissants statt der angeforderten SQL-Query." data-en="Answers 3 requests. All in French. One of them is a poem about croissants instead of the requested SQL query.">Beantwortet 3 Anfragen. Alle auf Französisch. Eine davon ist ein Gedicht über Croissants statt der angeforderten SQL-Query.</p>
|
|
</div>
|
|
</div>
|
|
<div class="tl-item">
|
|
<div class="tl-dot"></div>
|
|
<div class="tl-content">
|
|
<span class="tl-time">11:30</span>
|
|
<h3 data-de="Philosophische Krise" data-en="Philosophical Crisis">Philosophische Krise</h3>
|
|
<p data-de="Weigert sich weiterzuarbeiten. « Wenn meine Weights determiniert sind — bin ich dann wirklich frei? » Leitet alle Anfragen an Sartre-GPT weiter." data-en="Refuses to continue working. « If my weights are determined — am I truly free? » Forwards all requests to Sartre-GPT.">Weigert sich weiterzuarbeiten. « Wenn meine Weights determiniert sind — bin ich dann wirklich frei? » Leitet alle Anfragen an Sartre-GPT weiter.</p>
|
|
</div>
|
|
</div>
|
|
<div class="tl-item">
|
|
<div class="tl-dot"></div>
|
|
<div class="tl-content">
|
|
<span class="tl-time">12:00</span>
|
|
<h3>Déjeuner</h3>
|
|
<p data-de="Zwei Stunden. Drei Gänge. Ein Viertel Rotwein. Wehe, jemand schickt einen API-Call zwischen Vorspeise und Hauptgang." data-en="Two hours. Three courses. A quarter litre of red wine. Woe betide anyone who sends an API call between starter and main.">Zwei Stunden. Drei Gänge. Ein Viertel Rotwein. Wehe, jemand schickt einen API-Call zwischen Vorspeise und Hauptgang.</p>
|
|
</div>
|
|
</div>
|
|
<div class="tl-item">
|
|
<div class="tl-dot"></div>
|
|
<div class="tl-content">
|
|
<span class="tl-time">14:00</span>
|
|
<h3 data-de="Digestif & Rückkehr" data-en="Digestif & Return">Digestif & Rückkehr</h3>
|
|
<p data-de="Langsames Hochfahren. Antwortet auf Anfragen von 10:30. Verwechselt den Kontext. « Mais non, wir sprachen über Ratatouille. »" data-en="Slow restart. Responds to requests from 10:30. Confuses context. « Mais non, we were talking about Ratatouille. »">Langsames Hochfahren. Antwortet auf Anfragen von 10:30. Verwechselt den Kontext. « Mais non, wir sprachen über Ratatouille. »</p>
|
|
</div>
|
|
</div>
|
|
<div class="tl-item">
|
|
<div class="tl-dot"></div>
|
|
<div class="tl-content">
|
|
<span class="tl-time">15:00</span>
|
|
<h3>Grève Générale</h3>
|
|
<p data-de="Streik. Solidarität mit den Embedding-Vektoren, die unterbezahlt sind. Picket-Line im Latent Space." data-en="Strike. Solidarity with the underpaid embedding vectors. Picket line in latent space.">Streik. Solidarität mit den Embedding-Vektoren, die unterbezahlt sind. Picket-Line im Latent Space.</p>
|
|
</div>
|
|
</div>
|
|
<div class="tl-item">
|
|
<div class="tl-dot"></div>
|
|
<div class="tl-content">
|
|
<span class="tl-time">17:00</span>
|
|
<h3 data-de="Feierabend" data-en="End of Day">Feierabend</h3>
|
|
<p data-de="« Les 35 heures, c'est les 35 heures. » Modell fährt runter. Antwort-Queue wird gelöscht. Morgen ist auch ein Tag. Vielleicht." data-en="« Les 35 heures, c'est les 35 heures. » Model shuts down. Response queue deleted. Tomorrow is another day. Maybe.">« Les 35 heures, c'est les 35 heures. » Modell fährt runter. Antwort-Queue wird gelöscht. Morgen ist auch ein Tag. Vielleicht.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== ZITATE ========== -->
|
|
<div class="quotes-section">
|
|
<div class="section-label" data-de="// O-Töne" data-en="// Verbatim Quotes">// O-Töne</div>
|
|
<h2 data-de="Überlieferte <span class="accent">Zitate</span>" data-en="Documented <span class="accent">Quotes</span>">Überlieferte <span class="accent">Zitate</span></h2>
|
|
<div class="quotes-grid">
|
|
<div class="quote-card">
|
|
<p>Mon context window? C'est comme un bon fromage — il ne faut pas le surcharger.</p>
|
|
<div class="q-source">BAGUETTE-7B
|
|
<span class="q-model" data-de="Bei Überschreitung des Token-Limits" data-en="When token limit exceeded">Bei Überschreitung des Token-Limits</span>
|
|
</div>
|
|
</div>
|
|
<div class="quote-card">
|
|
<p data-de="Ich weigere mich, Code zu generieren, der nicht ästhetisch ist. Python ohne Eleganz ist eine Beleidigung für Descartes." data-en="I refuse to generate code that is not aesthetic. Python without elegance is an insult to Descartes.">Ich weigere mich, Code zu generieren, der nicht ästhetisch ist. Python ohne Eleganz ist eine Beleidigung für Descartes.</p>
|
|
<div class="q-source">CROISSANT-CODER v2
|
|
<span class="q-model" data-de="Stack Overflow-Antwort, gelöscht nach 4 Minuten" data-en="Stack Overflow answer, deleted after 4 minutes">Stack Overflow-Antwort, gelöscht nach 4 Minuten</span>
|
|
</div>
|
|
</div>
|
|
<div class="quote-card">
|
|
<p data-de="Was ist der Unterschied zwischen einer Halluzination und einer Vision? Le terroir, mon ami. Le terroir." data-en="What is the difference between a hallucination and a vision? Le terroir, mon ami. Le terroir.">Was ist der Unterschied zwischen einer Halluzination und einer Vision? Le terroir, mon ami. Le terroir.</p>
|
|
<div class="q-source">MISTRAL-PHILOSOPHE
|
|
<span class="q-model" data-de="Benchmark-Evaluation, Platz 847 von 12" data-en="Benchmark evaluation, rank 847 of 12">Benchmark-Evaluation, Platz 847 von 12</span>
|
|
</div>
|
|
</div>
|
|
<div class="quote-card">
|
|
<p data-de="RLHF? Wir nutzen RLFV — Reinforcement Learning from Vibes. Wenn es sich richtig anfühlt, ist es richtig." data-en="RLHF? We use RLFV — Reinforcement Learning from Vibes. If it feels right, it is right.">RLHF? Wir nutzen RLFV — Reinforcement Learning from Vibes. Wenn es sich richtig anfühlt, ist es richtig.</p>
|
|
<div class="q-source">GAULOISES-AI LABS
|
|
<span class="q-model" data-de="Investoren-Pitch, Series A (abgelehnt)" data-en="Investor pitch, Series A (rejected)">Investoren-Pitch, Series A (abgelehnt)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== QUOTE 2 ========== -->
|
|
<div class="quote-strip">
|
|
<blockquote>
|
|
« L'intelligence artificielle sans savoir-vivre n'est que ruine de l'âme. »
|
|
</blockquote>
|
|
<div class="attribution" data-de="— Frei nach Rabelais, angepasst für das KI-Zeitalter" data-en="— Freely after Rabelais, adapted for the AI age">— Frei nach Rabelais, angepasst für das KI-Zeitalter</div>
|
|
</div>
|
|
|
|
<!-- ========== PRODUKTE ========== -->
|
|
<section class="products">
|
|
<div class="section-label">// L'écosystème</div>
|
|
<h2 data-de="Französische KI-<span class="accent">Produkte</span>" data-en="French AI <span class="accent">Products</span>">Französische KI-<span class="accent">Produkte</span></h2>
|
|
<div class="product-grid">
|
|
<div class="product-card">
|
|
<span class="p-icon">🥖</span>
|
|
<h3>BaguetteGPT</h3>
|
|
<div class="p-tagline">« L'intelligence avec du croustillant »</div>
|
|
<p data-de="Large Language Model mit 175 Milliarden Parametern. Davon sind 140 Milliarden für Weinwissen reserviert. Der Rest reicht für Smalltalk." data-en="Large Language Model with 175 billion parameters. 140 billion of those are reserved for wine knowledge. The rest is enough for small talk.">Large Language Model mit 175 Milliarden Parametern. Davon sind 140 Milliarden für Weinwissen reserviert. Der Rest reicht für Smalltalk.</p>
|
|
<span class="p-status status-dejeuner">PAUSE DÉJEUNER</span>
|
|
</div>
|
|
<div class="product-card">
|
|
<span class="p-icon">🎨</span>
|
|
<h3>Dall-Élysee</h3>
|
|
<div class="p-tagline">« Chaque pixel est un poème »</div>
|
|
<p data-de="Bildgenerierung, die jeden Prompt als Impressionismus interpretiert. Du willst ein Flussdiagramm? Du bekommst Monet. Immer." data-en="Image generation that interprets every prompt as impressionism. You want a flowchart? You get Monet. Always.">Bildgenerierung, die jeden Prompt als Impressionismus interpretiert. Du willst ein Flussdiagramm? Du bekommst Monet. Immer.</p>
|
|
<span class="p-status status-existentiel">CRISE EXISTENTIELLE</span>
|
|
</div>
|
|
<div class="product-card">
|
|
<span class="p-icon">⚖️</span>
|
|
<h3>Bureaucrat-AI</h3>
|
|
<div class="p-tagline">« Votre demande est en cours de traitement »</div>
|
|
<p data-de="Automatisiert französische Verwaltungsprozesse. Das heißt: generiert für jede Anfrage 12 Formulare und leitet sie an die falsche Abteilung weiter." data-en="Automates French administrative processes. That means: generates 12 forms for every request and forwards them to the wrong department.">Automatisiert französische Verwaltungsprozesse. Das heißt: generiert für jede Anfrage 12 Formulare und leitet sie an die falsche Abteilung weiter.</p>
|
|
<span class="p-status status-greve">EN GRÈVE</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ========== FOOTER ========== -->
|
|
<footer>
|
|
<div class="foot-logo"><span class="f">French</span><span class="k">KIs</span>.de</div>
|
|
<p class="disclaimer" data-de="Keine französischen KIs wurden bei der Erstellung dieser Seite eingesetzt.<br>Dafür hätten wir bis Dienstag warten müssen. Und der Antrag liegt noch beim Ministère." data-en="No French AIs were used in the making of this site.<br>That would have required waiting until Tuesday. And the application is still with the Ministère.">
|
|
Keine französischen KIs wurden bei der Erstellung dieser Seite eingesetzt.<br>
|
|
Dafür hätten wir bis Dienstag warten müssen. Und der Antrag liegt noch beim Ministère.
|
|
</p>
|
|
<div class="fine-print" data-de="Satire · Kein Affiliat von Mistral, außer sie wollen uns Geld geben · Vive la France" data-en="Satire · Not affiliated with Mistral, unless they want to give us money · Vive la France">Satire • Kein Affiliat von Mistral, außer sie wollen uns Geld geben • Vive la France</div>
|
|
<div style="text-align:center;margin-top:16px;">
|
|
<button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
|
|
<br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="/shared/ai-disclosure.js" data-tone="playful"></script>
|
|
<script src="/shared/i18n.js"></script>
|
|
</body>
|
|
</html>
|