464 lines
32 KiB
HTML
464 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>PowerON Gateway – Übersicht</title>
|
||
<!-- Single source of truth for favicon -->
|
||
<link rel="icon" type="image/png" href="https://poweron.swiss/poweron-favicon.png">
|
||
<style>
|
||
/* ===== Inlined from wiki/templates/poweron-styles.css for standalone rendering ===== */
|
||
/* PowerON - KI für Unternehmen | CSS Stylesheet */
|
||
/* latin-ext */
|
||
@font-face {
|
||
font-family: 'DM Sans';
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2rp2ywxg089UriCZaSExd86J3t9jz86Mvy4qCRAL19DksVat-JDV36TGc5pg.woff2) format('woff2');
|
||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||
}
|
||
/* latin */
|
||
@font-face {
|
||
font-family: 'DM Sans';
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2rp2ywxg089UriCZaSExd86J3t9jz86Mvy4qCRAL19DksVat-JDV30TGc.woff2) format('woff2');
|
||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||
}
|
||
/* latin-ext */
|
||
@font-face {
|
||
font-family: 'DM Sans';
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2');
|
||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||
}
|
||
/* latin */
|
||
@font-face {
|
||
font-family: 'DM Sans';
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2) format('woff2');
|
||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||
}
|
||
/* latin-ext */
|
||
@font-face {
|
||
font-family: 'DM Sans';
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2');
|
||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||
}
|
||
/* latin */
|
||
@font-face {
|
||
font-family: 'DM Sans';
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2) format('woff2');
|
||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||
}
|
||
/* latin-ext */
|
||
@font-face {
|
||
font-family: 'DM Sans';
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
font-display: swap;
|
||
src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2');
|
||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||
}
|
||
/* latin */
|
||
@font-face {
|
||
font-family: 'DM Sans';
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
font-display: swap;
|
||
src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2) format('woff2');
|
||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||
}
|
||
/* Base minimal subset from poweron-styles for standalone */
|
||
body { background-color: #ffffff; font-family: DM Sans, sans-serif; color: #111827; }
|
||
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 2rem; }
|
||
h1, h2, h3, h4 { font-weight: 700; }
|
||
a { color: inherit; text-decoration: none; }
|
||
</style>
|
||
<style>
|
||
body { background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%); color: #1f2937; padding: 24px; }
|
||
:root { --po-red:#B91C1C; --po-red-600:#991B1B; --po-navy:#0F172A; --po-muted:#6B7280; --po-border:#e5e7eb; }
|
||
.container { max-width: 1280px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 32px; box-shadow: 0 12px 32px rgba(17,24,39,0.08); }
|
||
h1 { margin: 0 0 8px 0; color: var(--po-navy); font-size: 28px; }
|
||
h2 { margin: 28px 0 12px 0; color: var(--po-navy); font-size: 22px; border-left: 4px solid var(--po-red); padding-left: 10px; }
|
||
h3 { margin: 18px 0 8px 0; color: var(--po-navy); font-size: 18px; }
|
||
p { line-height: 1.6; }
|
||
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
|
||
.card { background: #ffffff; border: 2px solid #cbd5e1; border-radius: 16px; padding: 18px; box-shadow: 0 14px 34px rgba(15,23,42,0.10); }
|
||
.diagram { background: #ffffff; border: 2px solid #cbd5e1; border-radius: 16px; padding: 20px; overflow: hidden; box-shadow: 0 16px 36px rgba(15,23,42,0.10); }
|
||
.legend { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; font-size: 13px; }
|
||
.row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
|
||
.box { background: #ffffff; border: 2px solid #cbd5e1; border-radius: 14px; padding: 12px 14px; min-width: 200px; flex: 1; box-shadow: 0 4px 12px rgba(15,23,42,0.06); }
|
||
.box.header { background: #f8fafc; border-color: #94a3b8; box-shadow: 0 8px 18px rgba(15,23,42,0.10); }
|
||
.diagram h3 { position: relative; padding-bottom: 6px; margin-bottom: 8px; }
|
||
.diagram h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--po-red); border-radius: 2px; }
|
||
.arrow { display:none; }
|
||
.box.has-next { position: relative; }
|
||
.box.has-next::after { content: attr(data-arrow); position: absolute; right: -14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--po-red); }
|
||
.box.has-next[data-arrow=""]::after { content: "→"; }
|
||
.tag { display: inline-block; background: #fff1f2; color: var(--po-red); border: 1px solid #fecaca; border-radius: 999px; padding: 2px 10px; font-size: 12px; margin: 2px 6px 0 0; font-weight: 600; }
|
||
.note { background: #fff7ed; border: 1px solid #fdba74; color: #7c2d12; border-radius: 10px; padding: 12px; font-size: 13px; box-shadow: inset 0 0 0 1px rgba(251,191,36,0.15); }
|
||
code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: #b91c1c; font-size: 13px; }
|
||
ul { margin: 8px 0 8px 22px; }
|
||
.muted { color: #6b7280; }
|
||
.pill { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; border-radius: 999px; padding: 2px 8px; font-size: 12px; }
|
||
/* Tabs */
|
||
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px 0; }
|
||
.tab-link { text-decoration: none; background: #ffffff; color: var(--po-navy); border: 1px solid var(--po-border); padding: 10px 14px; border-radius: 999px; font-size: 14px; transition: all .2s ease; box-shadow: 0 4px 10px rgba(15,23,42,0.04); }
|
||
.tab-link:hover { border-color: #fecaca; background: #fff1f2; color: var(--po-red); }
|
||
.tab-link.active { background: var(--po-red); color: #fff; border-color: var(--po-red); box-shadow: 0 8px 18px rgba(185,28,28,0.25); }
|
||
.tab-content { display: none; }
|
||
.tab-content.active { display: block; }
|
||
/* Brand header */
|
||
.brand-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--po-border); border-radius: 12px; background: linear-gradient(90deg, #ffffff, #f8fafc); box-shadow: 0 6px 18px rgba(17,24,39,0.05); margin-bottom: 16px; }
|
||
.brand-header img { height: 28px; }
|
||
.brand-header .title { font-size: 18px; font-weight: 700; color: var(--po-navy); }
|
||
.cta { display:inline-block; background: var(--po-red); color:#fff; border:1px solid var(--po-red); padding:10px 14px; border-radius:10px; font-weight:700; box-shadow: 0 8px 18px rgba(185,28,28,0.25); text-decoration:none; }
|
||
.cta:hover { background: var(--po-red-600); border-color: var(--po-red-600); }
|
||
/* Callout */
|
||
.callout { border: 2px solid #cbd5e1; border-radius: 14px; padding: 16px; box-shadow: 0 10px 28px rgba(15,23,42,0.08); background: #ffffff; }
|
||
.callout.primary { border-color: var(--po-red); background: #fff1f2; }
|
||
.callout .tag { background:#fee2e2; border-color:#fecaca; color:var(--po-red); }
|
||
</style>
|
||
<meta name="description" content="Schematische Architektur-Übersichten für Gateway-Integration, Neutralizer-LLM, Backend-gesteuertes UI und Dokument-Renderer.">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="brand-header">
|
||
<img src="https://poweron.swiss/poweron-logo-updated.png" alt="PowerON">
|
||
<div class="title">Neutralisiert. Vernetzt. Automatisiert.</div>
|
||
</div>
|
||
<h1>PowerON Gateway – Übersicht</h1>
|
||
<div class="tabs">
|
||
<a class="tab-link" href="#tab-overview">Kurzübersicht</a>
|
||
<a class="tab-link" href="#tab-neutralizer">Thema: LLM‑Neutralizer</a>
|
||
<a class="tab-link" href="#tab-ui">Thema: Backend‑UI</a>
|
||
<a class="tab-link" href="#tab-renderers">Thema: Dokument‑Renderer</a>
|
||
<a class="tab-link" href="#tab-collab">Zuständigkeiten & Zusammenarbeit</a>
|
||
<a class="tab-link" href="#tab-next">Nächste Schritte</a>
|
||
</div>
|
||
|
||
<div id="tab-overview" class="tab-content">
|
||
<h2>Kurzübersicht: Was unsere App macht</h2>
|
||
<div class="callout primary" style="margin-bottom:14px;">
|
||
<p><strong>Kontext:</strong> PowerON stellt eine sichere, unternehmensfähige KI‑Arbeitsumgebung bereit, in der Daten zuerst datenschutzkonform aufbereitet und dann mit modernen Workflows verarbeitet werden. Die Plattform verbindet bestehende Systeme wie Microsoft 365 oder Google Workspace ohne lokale Installation.</p>
|
||
<p><strong>Zweck & Ziel:</strong> Teams sollen schnell vom Experimentieren im Playground zu wiederholbaren, automatisierten Abläufen gelangen – mit klaren Schnittstellen, einheitlichen Datenformaten und hoher Sicherheit. So wird aus einzelnen Use‑Cases ein skalierbarer, betriebssicherer KI‑Stack.</p>
|
||
</div>
|
||
<div class="card">
|
||
<p>Im Kern:</p>
|
||
<ul>
|
||
<li>Playground als sichere KI-Workstation (Neutralizer, OAuth-Connectors, Voice-First optional).</li>
|
||
<li>Unlimitierte Verarbeitung mit intelligentem Chunking; Workflows dynamisch testen (Playground) und später automatisieren.</li>
|
||
<li>Integration von MSFT/Google-Diensten; Standardisierte JSON-Ausgabe inkl. eingebetteter Medien.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="grid" style="margin-top: 16px;">
|
||
<div class="diagram">
|
||
<h3>🔒 Playground als sichere KI‑Workstation</h3>
|
||
<div class="row" style="margin-top:10px;">
|
||
<div class="box header has-next" data-arrow="→"><strong>User</strong><br><span class="muted">Browser / Voice</span></div>
|
||
<div class="box has-next" data-arrow="→"><strong>Playground</strong><br><span class="tag">Neutralizer</span> <span class="tag">OAuth</span> <span class="tag">Voice</span></div>
|
||
<div class="box header"><strong>Gateway</strong><br><span class="muted">KI‑Modelle, Workflows</span></div>
|
||
</div>
|
||
<div class="legend" style="margin-top:10px;">
|
||
<ul>
|
||
<li><span class="tag">Neutralizer</span> ersetzt sensible Daten vor KI‑Verarbeitung.</li>
|
||
<li><span class="tag">OAuth</span> verbindet sicher MSFT/Google‑Konten ohne lokale Installation.</li>
|
||
<li><span class="tag">Voice</span> optional: Spracheingabe/-ausgabe für schnellere Interaktion.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="diagram">
|
||
<h3>♾️ Unlimitierte Verarbeitung & dynamische Workflows</h3>
|
||
<div class="row" style="margin-top:10px;">
|
||
<div class="box header has-next" data-arrow="→"><strong>Große Dateien</strong><br><span class="muted">PDF, DOCX, XLSX, …</span></div>
|
||
<div class="box has-next" data-arrow="→"><strong>Intelligentes Chunking</strong><br><span class="muted">Aufteilen + Parallelisieren</span></div>
|
||
<div class="box header"><strong>Workflow</strong><br><span class="muted">Playground testen → Automatisieren</span></div>
|
||
</div>
|
||
<div class="legend" style="margin-top:10px;">
|
||
<ul>
|
||
<li>Chunks erlauben <strong>unlimitierte Datenmengen</strong> und viele Dateien ohne Token‑Limits.</li>
|
||
<li>Workflows werden im Playground <strong>interaktiv modelliert</strong> und danach <strong>per Event</strong> automatisiert.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="diagram">
|
||
<h3>🔌 MSFT/Google‑Integration & standardisierte JSON‑Ausgabe</h3>
|
||
<div class="row" style="margin-top:10px;">
|
||
<div class="box header has-next" data-arrow="↔"><strong>MSFT</strong><br><span class="muted">SharePoint, Outlook, OneDrive</span></div>
|
||
<div class="box header has-next" data-arrow="→"><strong>Google</strong><br><span class="muted">Drive, Gmail, Cloud</span></div>
|
||
<div class="box has-next" data-arrow="→"><strong>Gateway</strong><br><span class="tag">JSON</span> <span class="tag">media[]</span> <span class="tag">parts[]</span></div>
|
||
<div class="box header"><strong>Renderer</strong><br><span class="muted">DOCX/XLSX/PPTX/HTML</span></div>
|
||
</div>
|
||
<div class="legend" style="margin-top:10px;">
|
||
<ul>
|
||
<li>Einheitliches <strong>JSON‑Format</strong> mit eingebetteten Medien (Bilder/Video) für alle Pipelines.</li>
|
||
<li>Nahtloses Lesen/Schreiben aus MSFT/Google‑Diensten über OAuth‑Connectors.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="tab-neutralizer" class="tab-content">
|
||
<h2>Thema: LLM-Neutralizer (internes LLM als Datenschutz-Engine)</h2>
|
||
<div class="callout primary" style="margin-bottom:12px;">
|
||
<p><strong>Kontext:</strong> In vielen Unternehmen verhindert Datenschutz die produktive Nutzung von KI. Der Neutralizer setzt vor der Verarbeitung personenbezogene und sensible Informationen kontrolliert auf Platzhalter und dokumentiert die Ersetzungen optional.</p>
|
||
<p><strong>Zweck & Ziel:</strong> Sicherer KI‑Einsatz mit unternehmenseigenen Daten – ohne Risiko für Personenbezug und Compliance. Der Neutralizer bildet die Brücke zwischen Rohdaten und Modellaufrufen und schafft damit die Grundlage, KI in regulierten Umfeldern zuverlässig zu betreiben.</p>
|
||
</div>
|
||
<div class="card" style="margin:12px 0;">
|
||
<h3 style="margin-top:0;">🔧 Partner‑Bedarf (Kernthema)</h3>
|
||
<p>Benötigt wird ein <strong>internes LLM</strong> als Neutralizer, angebunden über eine private API in der Schweiz. Prinzip: Klartext rein, neutralisierter Text raus – ohne Persistenz und ohne Nutzung der Inhalte fürs Modell‑Training.</p>
|
||
<p>So bleiben Daten im eigenen Perimeter, während die Workflows mit neutralisierten Inhalten weiterarbeiten können.</p>
|
||
</div>
|
||
<div class="diagram">
|
||
<div class="row">
|
||
<div class="box header"><strong>Kunde (Intranet)</strong><br><span class="tag">Schweizer Umgebung</span> <span class="tag">Geschützt</span></div>
|
||
<div class="arrow">➡</div>
|
||
<div class="box"><strong>PowerON Gateway</strong><br><span class="tag">/api/neutralization/process</span><br><span class="muted">Konvertiert Eingaben in Text (JSON/CSV/Plain)</span></div>
|
||
<div class="arrow">➡</div>
|
||
<div class="box"><strong>LLM Neutralizer API (Partner)</strong><br><span class="tag">POST /api/neutralizer/anonymize</span><br><span class="muted">Erwartet: text payload</span></div>
|
||
<div class="arrow">➡</div>
|
||
<div class="box"><strong>PowerON Gateway</strong><br><span class="muted">Ergebnis validieren, Masken anwenden</span></div>
|
||
<div class="arrow">➡</div>
|
||
<div class="box header"><strong>Weiterverarbeitung</strong><br><span class="tag">Workflow</span> <span class="tag">AI</span></div>
|
||
</div>
|
||
<div class="legend" style="margin-top: 12px;">
|
||
<strong>Partner-Bedarf:</strong>
|
||
<ul>
|
||
<li>Bereitstellung eines internen API-Endpunkts: <code>POST /api/neutralizer/anonymize</code></li>
|
||
<li>Input: <code>{ text: string, language?: "de|en|fr|it", policyId?: string }</code></li>
|
||
<li>Output: <code>{ text: string, entities?: [{type:"person", value:"{{person}}", offset:123}] }</code></li>
|
||
<li>SLAs/Timeouts, Auth (Token/Mutual TLS), Logging-Minimierung (DSGVO)</li>
|
||
</ul>
|
||
<div class="note">Wir liefern alle Daten als Text (strukturiert: JSON/CSV, unstrukturiert: Plain Text). Das LLM ersetzt Namen und sensible Muster gemäß Policy.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="tab-ui" class="tab-content">
|
||
<h2>Thema: Backend-gesteuertes UI (Renderer für View/Edit)</h2>
|
||
<div class="callout primary" style="margin-bottom:12px;">
|
||
<p><strong>Kontext:</strong> Formulare, Tabellen und Ansichten werden vollständig aus Pydantic‑Datenmodellen abgeleitet. Labels, Datentypen, Pflichtfelder und Rendering‑Regeln liegen im Backend und steuern das Frontend ohne Hardcoding.</p>
|
||
<p><strong>Zweck & Ziel:</strong> Änderungen an Datenstrukturen sollen sofort in der UI sichtbar werden – konsistent, mehrsprachig und validiert. So entsteht ein wartungsarmes, generisches Frontend, das schnell an neue Use‑Cases adaptierbar ist.</p>
|
||
</div>
|
||
<div class="diagram">
|
||
<div class="row">
|
||
<div class="box header"><strong>Gateway Backend</strong><br><span class="tag">/api/ui/schema</span><br><span class="muted">liefert UI-Schema</span></div>
|
||
<div class="arrow">⬇</div>
|
||
<div class="box"><strong>UI Runtime</strong><br><span class="tag">Renderer</span> <span class="tag">Form</span> <span class="tag">Table</span></div>
|
||
<div class="arrow">⬇</div>
|
||
<div class="box header"><strong>Benutzer</strong><br><span class="muted">paginiert, sortierbar, inline edit</span></div>
|
||
</div>
|
||
<div class="card" style="margin-top: 12px;">
|
||
<h3>Stand heute</h3>
|
||
<ul>
|
||
<li>Ein <strong>bestehendes Frontend</strong> ist verfügbar und kann gezeigt werden.</li>
|
||
<li>Die <strong>Steuerung erfolgt vollständig modellgetrieben</strong> über Pydantic-Datenmodelle (Labels/Sprachtexte, Datentypen, Rendering-Anweisungen, Listenelemente, Readonly/Required, Optionen).</li>
|
||
<li>Modelle tragen UI-Metadaten (z. B. <code>frontend_type</code>, <code>frontend_readonly</code>, <code>frontend_required</code>) und mehrsprachige Labels (z. B. via <code>register_model_labels</code>).</li>
|
||
</ul>
|
||
</div>
|
||
<div class="grid" style="margin-top: 12px;">
|
||
<div class="card">
|
||
<h3>Schema (Beispiel)</h3>
|
||
<pre style="white-space: pre-wrap; font-size: 12px; background: #0b1021; color: #e5e7eb; padding: 10px; border-radius: 8px;">{
|
||
"components": [
|
||
{ "type": "table", "id": "docList", "columns": [
|
||
{"key": "name", "label": "Name"},
|
||
{"key": "size", "label": "Grösse"},
|
||
{"key": "mime", "label": "MIME"}
|
||
], "dataUrl": "/api/docs?pg={page}&ps={size}", "pageSize": 25, "editable": false },
|
||
{ "type": "form", "id": "metaForm", "fields": [
|
||
{"key": "title", "label": "Titel", "component": "text"},
|
||
{"key": "tags", "label": "Tags", "component": "chips"}
|
||
], "submitUrl": "/api/docs/meta" }
|
||
]
|
||
}</pre>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Partner-Bedarf</h3>
|
||
<ul>
|
||
<li>Generischer Table/Form-Renderer mit Pagination, Sortieren, Filtern, Inline-Validierung (Erweiterungen auf bestehender Runtime).</li>
|
||
<li>Reine Schema-Steuerung vom Backend (kein Hardcoding im Frontend).</li>
|
||
<li>Komponenten: Table, Form, Tabs, Detail-Drawer, JSON-Viewer.</li>
|
||
<li><strong>Generelle Hilfe für "schlaue UI-Komponenten"</strong> (Auto-Layout, responsive Tabellen mit Virtualisierung, kontextsensitive Toolbars, A11y, Undo/Redo, Offline-Fähigkeit, i18n).</li>
|
||
<li>Design-System/Themeing und A11y.</li>
|
||
</ul>
|
||
<span class="pill">Backend-driven UI</span> <span class="pill">Schema v1</span> <span class="pill">No hard state coupling</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="tab-renderers" class="tab-content">
|
||
<h2>Thema: Dokument-Renderers (Word/Excel/PowerPoint/HTML)</h2>
|
||
<div class="callout primary" style="margin-bottom:12px;">
|
||
<p><strong>Kontext:</strong> Ergebnisse werden in ein standardisiertes JSON mit Text‑Parts und eingebetteten Medien überführt. Darauf aufbauend generieren Renderer marken‑konforme Ausgaben für DOCX, XLSX, PPTX oder HTML.</p>
|
||
<p><strong>Zweck & Ziel:</strong> Fachinhalte sollen nahtlos in hochwertige Dokumente überführt werden – mit Vorlagen, Diagrammen und Layout‑Regeln. Dadurch lassen sich Reports, Angebote oder Präsentationen reproduzierbar und automatisiert erzeugen.</p>
|
||
</div>
|
||
<div class="diagram">
|
||
<div class="row">
|
||
<div class="box header"><strong>Standardisiertes JSON</strong><br><span class="tag">content.parts[]</span> <span class="tag">media[] (img/video)</span></div>
|
||
<div class="arrow">➡</div>
|
||
<div class="box"><strong>Template Engine</strong><br><span class="muted">Mapping/Layouts</span></div>
|
||
<div class="arrow">➡</div>
|
||
<div class="box"><strong>Renderer</strong><br><span class="tag">docx</span> <span class="tag">xlsx</span> <span class="tag">pptx</span> <span class="tag">html</span></div>
|
||
<div class="arrow">➡</div>
|
||
<div class="box header"><strong>Output</strong><br><span class="muted">Datei + Vorschau + Metadaten</span></div>
|
||
</div>
|
||
<div class="grid" style="margin-top: 12px;">
|
||
<div class="card">
|
||
<h3>JSON (vereinheitlicht)</h3>
|
||
<pre style="white-space: pre-wrap; font-size: 12px; background: #0b1021; color: #e5e7eb; padding: 10px; border-radius: 8px;">{
|
||
"title": "Quartalsbericht Q2",
|
||
"parts": [
|
||
{"type":"heading","level":1,"text":"Executive Summary"},
|
||
{"type":"paragraph","text":"…"},
|
||
{"type":"table","columns":["Monat","Umsatz"],"rows":[["Apr",123000],["Mai",136500],["Jun",141200]]},
|
||
{"type":"image","ref":"media:logo"}
|
||
],
|
||
"media": [{"id":"logo","mime":"image/png","data":"base64…"}]
|
||
}</pre>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Partner-Bedarf</h3>
|
||
<ul>
|
||
<li>High-Quality-Renderer für <strong>DOCX/XLSX/PPTX/HTML</strong> mit Corporate-Design (Vorlagen, Master, Styles).</li>
|
||
<li>Leistungsfähige Tabellen (Pivot/Layout), Diagramme, Bilder/Videos, Seitenumbrüche.</li>
|
||
<li>API-Schnittstelle im Gateway: <code>POST /api/render/{format}</code> mit JSON-Input.</li>
|
||
<li>Optional: Streaming-Generierung, Vorschau-Bild, Fehlerreporting pro Part.</li>
|
||
</ul>
|
||
<span class="pill">Template mapping</span> <span class="pill">Branding</span> <span class="pill">Previews</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="tab-collab" class="tab-content">
|
||
<h2>Zuständigkeiten & Zusammenarbeit (High-Level)</h2>
|
||
<div class="callout primary" style="margin-bottom:12px;">
|
||
<p><strong>Kontext:</strong> PowerON liefert die Plattform, Workflows und Konnektoren; der Partner bringt LLM‑Neutralizer‑Kompetenz, UI‑Komponenten und Dokument‑Renderer ein. Beide Seiten arbeiten über klar definierte API‑Verträge zusammen.</p>
|
||
<p><strong>Zweck & Ziel:</strong> Schnelle, risikoarme Implementierung mit geteilten Verantwortlichkeiten: funktionsfähige MVP‑Kette, nachvollziehbare Qualität und ein Weg zur Skalierung in den Regelbetrieb.</p>
|
||
</div>
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h3>PowerON liefert</h3>
|
||
<ul>
|
||
<li>Gateway-APIs, Workflow-Engine, Neutralizer-Adapter, Standard-JSON-Ausgabe.</li>
|
||
<li>Connectors (MSFT/Google), Sicherheit (Auth, Mandanten, Audit).</li>
|
||
<li>Backend-UI-Schema, Beispiel-Workflows und Tests.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Partner liefert</h3>
|
||
<ul>
|
||
<li>LLM Neutralizer API (intern, CH) inkl. Policies & Tuning.</li>
|
||
<li>Frontend-Renderer (Table/Form) gemäss Backend-Schema.</li>
|
||
<li>Dokument-Renderer für DOCX/XLSX/PPTX/HTML inkl. Corporate-Design.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Offene Punkte</h3>
|
||
<ul>
|
||
<li>SLAs, Throughput/Batching, Timeouts für LLM-Endpunkt.</li>
|
||
<li>Schema-Versionierung und Komponenten-Lifecycle.</li>
|
||
<li>Branding-Vorlagen, Performance-Budgets der Renderer.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="tab-next" class="tab-content">
|
||
<h2>Nächste Schritte</h2>
|
||
<div class="callout primary" style="margin-bottom:12px;">
|
||
<p><strong>Kontext:</strong> Nach der thematischen Einordnung werden die nächsten Schritte strukturiert vorbereitet – von der technischen Klärung über einen belastbaren PoC bis hin zum Integrationsplan.</p>
|
||
<p><strong>Zweck & Ziel:</strong> Innerhalb weniger Wochen eine überprüfbare Lösung zeigen, Erkenntnisse in einen MVP‑Backlog überführen und mit definierten Meilensteinen produktionsreif werden.</p>
|
||
</div>
|
||
<div class="card" style="margin-bottom:14px;">
|
||
<ol>
|
||
<li>Technisches Alignment-Meeting (60–90min) zu Endpunkten, Auth, Datenformaten.</li>
|
||
<li>Proof-of-Concept: a) Neutralizer-Call, b) UI-Renderer (Table/Form), c) DOCX-Renderer.</li>
|
||
<li>Integrationsplan (MVP Umfang, Milestones, Qualitätskriterien).</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<div class="diagram">
|
||
<h3>🧭 Schritt 1: Alignment</h3>
|
||
<div class="row" style="margin-top:10px;">
|
||
<div class="box header has-next" data-arrow="→"><strong>Kickoff</strong><br><span class="muted">Ziele & Scope</span></div>
|
||
<div class="box has-next" data-arrow="→"><strong>API & Auth</strong><br><span class="muted">Endpoint, OAuth/mTLS</span></div>
|
||
<div class="box header"><strong>Datenformat</strong><br><span class="muted">Text/JSON/CSV</span></div>
|
||
</div>
|
||
<div class="legend" style="margin-top:10px;">
|
||
<ul>
|
||
<li>Abgleich zu Neutralizer‑Contract, Logging/SLAs, Datenschutz.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="diagram">
|
||
<h3>🧪 Schritt 2: Proof‑of‑Concept</h3>
|
||
<div class="row" style="margin-top:10px;">
|
||
<div class="box header has-next" data-arrow="→"><strong>Neutralizer</strong><br><span class="muted">POST /anonymize</span></div>
|
||
<div class="box has-next" data-arrow="→"><strong>UI‑Renderer</strong><br><span class="muted">Table/Form Schema</span></div>
|
||
<div class="box header"><strong>DOCX‑Renderer</strong><br><span class="muted">Template ↔ JSON</span></div>
|
||
</div>
|
||
<div class="legend" style="margin-top:10px;">
|
||
<ul>
|
||
<li>Nachweis: Qualität, Latenz, Fehlerfälle, Beispiel‑Daten.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="diagram">
|
||
<h3>🛠️ Schritt 3: Integrationsplan</h3>
|
||
<div class="row" style="margin-top:10px;">
|
||
<div class="box header has-next" data-arrow="→"><strong>MVP</strong><br><span class="muted">Umfang & Backlog</span></div>
|
||
<div class="box has-next" data-arrow="→"><strong>Milestones</strong><br><span class="muted">Sprints & Deliverables</span></div>
|
||
<div class="box header"><strong>Qualität</strong><br><span class="muted">KPIs, Tests, Betrieb</span></div>
|
||
</div>
|
||
<div class="legend" style="margin-top:10px;">
|
||
<ul>
|
||
<li>Abnahme‑Kriterien, Supportwege, Go‑Live‑Checkliste.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script>
|
||
(function() {
|
||
function activate(hash) {
|
||
var links = document.querySelectorAll('.tab-link');
|
||
var tabs = document.querySelectorAll('.tab-content');
|
||
links.forEach(l => l.classList.remove('active'));
|
||
tabs.forEach(t => t.classList.remove('active'));
|
||
var target = document.querySelector(hash || '#tab-overview') || document.querySelector('#tab-overview');
|
||
if (target) { target.classList.add('active'); }
|
||
var link = Array.from(links).find(a => a.getAttribute('href') === (hash || '#tab-overview'));
|
||
if (link) { link.classList.add('active'); }
|
||
}
|
||
window.addEventListener('hashchange', function() { activate(location.hash); });
|
||
document.addEventListener('DOMContentLoaded', function() { activate(location.hash); });
|
||
})();
|
||
</script>
|
||
</html>
|
||
|
||
|