Spaces:

aidn
/

Haystack-MAS

Running

App Files Files Community

aidn commited on 23 days ago

Commit

256d64b

verified ·

1 Parent(s): 526c809

Update index.html

Browse files

Files changed (1) hide show

index.html +268 -214

index.html CHANGED Viewed

@@ -3,31 +3,42 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Tutorial: Multi-Agenten-Systeme mit Haystack 2.0</title>
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Highlight.js for Code Formatting -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>
-    <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
     <script>
         tailwind.config = {
             theme: {
                 extend: {
                     fontFamily: {
-                        sans: ['Inter', 'sans-serif'],
-                        mono: ['Fira Code', 'monospace'],
                     },
                     colors: {
-                        primary: '#2563eb', // Blue-600
-                        sidebar: '#0f172a', // Slate-900
                     }
                 }
             }
@@ -35,95 +46,121 @@
     </script>
     <style>
-        body { font-family: 'Inter', sans-serif; }
-        pre code { font-family: 'Fira Code', monospace; border-radius: 0.5rem; }
-        .prose h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-weight: 700; font-size: 1.5rem; color: #1e293b; border-bottom: 2px solid #e2e8f0; padding-bottom: 0.5rem; }
-        .prose h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-weight: 600; font-size: 1.25rem; color: #334155; }
-        .prose p { margin-bottom: 1.25rem; line-height: 1.75; color: #475569; }
-        .prose table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
-        .prose th, .prose td { border: 1px solid #cbd5e1; padding: 0.75rem; text-align: left; }
-        .prose th { background-color: #f1f5f9; font-weight: 600; color: #1e293b; }
-        .copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(255,255,255,0.1); color: #fff; border: none; padding: 0.25rem 0.5rem; border-radius: 0.25rem; cursor: pointer; font-size: 0.75rem; transition: background 0.2s; }
-        .copy-btn:hover { background: rgba(255,255,255,0.2); }
-        .code-wrapper { position: relative; margin-bottom: 1.5rem; }
     </style>
 </head>
-<body class="bg-slate-50 text-slate-800 flex flex-col md:flex-row min-h-screen">
     <!-- Mobile Header -->
-    <div class="md:hidden bg-sidebar text-white p-4 flex justify-between items-center sticky top-0 z-50">
-        <h1 class="font-bold text-lg">Haystack 2.0 Tutorial</h1>
-        <button id="mobile-menu-btn" class="text-white focus:outline-none">
             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
         </button>
     </div>
     <!-- Sidebar Navigation -->
-    <nav id="sidebar" class="hidden md:flex flex-col w-full md:w-64 bg-sidebar text-slate-300 h-screen sticky top-0 overflow-y-auto shrink-0 transition-all duration-300 z-40">
-        <div class="p-6 hidden md:block">
-            <h1 class="text-2xl font-bold text-white tracking-tight">The Infinite Cookbook</h1>
-            <p class="text-xs text-slate-400 mt-2">MAS mit Haystack & Hugging Face</p>
         </div>
-        <ul class="flex-1 px-4 pb-6 space-y-2 text-sm">
-            <li><a href="#intro" class="block py-2 px-3 rounded hover:bg-slate-800 hover:text-white transition">1. Einleitung & Architektur</a></li>
-            <li><a href="#hf-infra" class="block py-2 px-3 rounded hover:bg-slate-800 hover:text-white transition">2. Hugging Face Infrastruktur</a></li>
-            <li><a href="#agent1" class="block py-2 px-3 rounded hover:bg-slate-800 hover:text-white transition">3. Agent 1: Forschung & Suche</a></li>
-            <li><a href="#agent2" class="block py-2 px-3 rounded hover:bg-slate-800 hover:text-white transition">4. Agent 2: Struktur & Pydantic</a></li>
-            <li><a href="#agent3" class="block py-2 px-3 rounded hover:bg-slate-800 hover:text-white transition">5. Agent 3: Visionär (Bildgen.)</a></li>
-            <li><a href="#agent4" class="block py-2 px-3 rounded hover:bg-slate-800 hover:text-white transition">6. Agent 4: Meta-Aggregator (HTML)</a></li>
-            <li><a href="#orchestration" class="block py-2 px-3 rounded hover:bg-slate-800 hover:text-white transition">7. Orchestrierung & Fehlerbehandlung</a></li>
-        </ul>
     </nav>
     <!-- Main Content -->
-    <main class="flex-1 w-full max-w-4xl mx-auto p-6 md:p-10 lg:p-12">
         <div class="prose max-w-none">
             <!-- Hero -->
-            <div class="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-r-lg mb-10">
-                <h1 class="text-3xl font-bold text-blue-900 mb-2">Tutorial: Bau eines Autonomen Kulinarischen Systems</h1>
-                <p class="text-blue-800 m-0">In diesem Tutorial setzen wir die Architektur aus dem Bericht <strong>"Architekturen autonomer kulinarischer Wissenssysteme"</strong> in Code um. Wir bauen "The Infinite Cookbook" mit Haystack 2.0 und der Hugging Face Inference-Infrastruktur.</p>
             </div>
             <section id="intro">
-                <h2>1. Die technologische Basis: Haystack 2.0</h2>
-                <p>Der Übergang von Haystack 1.x zu 2.0 markiert einen Paradigmenwechsel. Frühere Versionen waren lineare Ketten; Haystack 2.0 nutzt <strong>Komponenten und Pipelines als dynamische Rechengraphen</strong>. Dies unterstützt Kontrollflüsse, Schleifen und präzise Datenflusssteuerung – die Grundlage für echte Agenten.</p>
-                <p>Anstatt ein einzelnes, überfordertes LLM zu nutzen, orchestrieren wir eine Koalition spezialisierter Einheiten. Typprüfung an den Ein- und Ausgabesockets sichert die Stabilität.</p>
             </section>
             <section id="hf-infra">
-                <h2>2. Hugging Face Inference Provider</h2>
-                <p>Die Integration von Open-Source-Modellen erfolgt primär über die <code>HuggingFaceAPIChatGenerator</code>-Komponente. Seit Juli 2025 sind <code>chat_completion</code>-Endpunkte der Standard. Hier ist eine Übersicht der Infrastruktur-Optionen:</p>
                 <div class="overflow-x-auto">
                     <table>
                         <thead>
                             <tr>
-                                <th>Infrastruktur-Option</th>
                                 <th>Charakteristika</th>
-                                <th>Anwendungsfall im MAS</th>
                             </tr>
                         </thead>
                         <tbody>
                             <tr>
-                                <td><strong>Serverless Inference API</strong></td>
-                                <td>Kostenlos/Rate-limited, schnell für Experimente</td>
-                                <td>Prototyping und einfache Zusammenfassungen.</td>
                             </tr>
                             <tr>
                                 <td><strong>Inference Endpoints</strong></td>
-                                <td>Dedizierte Instanzen, stundenbasierte Abrechnung</td>
-                                <td>Produktion, hohe Last, garantierte Latenz für Bildgenerierung.</td>
-                            </tr>
-                            <tr>
-                                <td><strong>Text Generation Inference (TGI)</strong></td>
-                                <td>Optimiertes Serving, unterstützt JSON-Guiding</td>
-                                <td>Komplexe Datenextraktion mit strikter Schema-Einhaltung.</td>
                             </tr>
                             <tr>
-                                <td><strong>Lokale Transformer</strong></td>
-                                <td>Volle Kontrolle, erfordert eigene GPU-Ressourcen</td>
-                                <td>Datenschutz-kritische Anwendungen oder Offline-Betrieb.</td>
                             </tr>
                         </tbody>
                     </table>
@@ -131,47 +168,66 @@
             </section>
             <section id="agent1">
-                <h2>3. Agent 1: Der kulinarische Forschungs-Spezialist</h2>
-                <p>Dieser Agent durchsucht das Web iterativ nach authentischen Rezepten. Er nutzt Suchmaschinen, extrahiert HTML, bereinigt es und rankt die Ergebnisse nach Relevanz (Context Optimization).</p>
-                <div class="code-wrapper">
-                    <button class="copy-btn" onclick="copyCode(this)">Kopieren</button>
                     <pre><code class="language-python">from haystack import Pipeline
 from haystack.components.websearch import SerperDevWebSearch
-from haystack.components.fetchers import LinkContentFetcher
-from haystack.components.converters import HTMLToDocument
-from haystack.components.rankers import TransformersSimilarityRanker
-# Pipeline-Definition für den Forschungs-Agenten
 research_pipe = Pipeline()
-# Komponenten hinzufügen
-research_pipe.add_component("search", SerperDevWebSearch(api_key="DEIN_API_KEY"))
-research_pipe.add_component("fetcher", LinkContentFetcher())
-research_pipe.add_component("html_converter", HTMLToDocument())
-research_pipe.add_component("ranker", TransformersSimilarityRanker(model="cross-encoder/ms-marco-MiniLM-L-6-v2"))
-# Graph verbinden
-research_pipe.connect("search.links", "fetcher.urls")
-research_pipe.connect("fetcher.streams", "html_converter.sources")
-research_pipe.connect("html_converter.documents", "ranker.documents")
-# Ausführungssimulation (Im echten System orchestriert durch den Koordinator)
-# result = research_pipe.run({"search": {"query": "authentische neapolitanische Pizza"}, "ranker": {"query": "authentische neapolitanische Pizza"}})
-</code></pre>
-                </div>
             </section>
-            <section id="agent2">
-                <h2>4. Agent 2: Der Struktur-Architekt für Rezeptdaten</h2>
-                <p>Die unstrukturierten Forschungsnotizen müssen in ein maschinenlesbares Format überführt werden. Haystack 2.0 unterstützt die Generierung strukturierter Ausgaben nativ über <strong>Pydantic-Modelle</strong>.</p>
-                <div class="code-wrapper">
-                    <button class="copy-btn" onclick="copyCode(this)">Kopieren</button>
                     <pre><code class="language-python">from pydantic import BaseModel
-from typing import List, Dict, Literal
-# Definition des Pydantic-Schemas laut Spezifikation
 class Ingredient(BaseModel):
     name: str
     amount: float
@@ -182,139 +238,129 @@ class RecipeStructure(BaseModel):
     servings: int
     ingredients: List[Ingredient]
     instructions: List[str]
-    nutrients: Dict[str, float]
-    difficulty: Literal["Einfach", "Mittel", "Schwer"]
-# Nutzung im HuggingFace Chat Generator (mit TGI & JSON Guiding)
-# generator = HuggingFaceAPIChatGenerator(
-#     api_type="text_generation_inference",
-#     generation_kwargs={"response_format": RecipeStructure.schema_json()}
-# )
-</code></pre>
                 </div>
-                <p>Durch die Erzwingung dieses Schemas werden Halluzinationen in der Struktur eliminiert. Der Agent wird zudem angewiesen, <em>keine eigenen Fakten zu erfinden</em>, sondern sich streng an den Kontext von Agent 1 zu halten.</p>
-            </section>
-            <section id="agent3">
-                <h2>5. Agent 3: Der Visionär - Bildgenerierung</h2>
-                <p>Ein Kochbuch braucht Bilder. Da Standard-Generatoren textbasiert sind, implementieren wir eine <strong>benutzerdefinierte Komponente</strong> mit dem <code>@component</code>-Dekorator, die z.B. Stable Diffusion XL (SDXL) über die Hugging Face <code>diffusers</code> Bibliothek anspricht.</p>
-                <div class="code-wrapper">
-                    <button class="copy-btn" onclick="copyCode(this)">Kopieren</button>
-                    <pre><code class="language-python">from haystack import component
-from haystack.dataclasses import ImageContent
-# import diffusers ...
-@component
-class StableDiffusionGenerator:
-    def __init__(self, model_id="stabilityai/stable-diffusion-xl-base-1.0"):
-        self.model_id = model_id
-        # self.pipe = DiffusionPipeline.from_pretrained(model_id, torch_dtype=torch.float16)
-        # Optimierungen wie CPU-Offloading hier initialisieren
-    @component.output_types(image=ImageContent)
-    def run(self, prompt: str):
-        # Optimierter Prompt z.B.: "Dampfende Lasagne in einer rustikalen Keramikform..."
-        # image = self.pipe(prompt).images[0]
-        # Bild in Base64 umwandeln für Multimodalen Fluss
-        # base64_str = image_to_base64(image)
-        # Rückgabe als Haystack 2.0 ImageContent Objekt
-        return {"image": ImageContent.from_base64(base64_str)}
-</code></pre>
                 </div>
-            </section>
-            <section id="agent4">
-                <h2>6. Agent 4: Der Meta-Aggregator und HTML-Designer</h2>
-                <p>Der letzte Agent empfängt das strukturierte Rezept (JSON) und das Bild (Base64) und verpackt es mithilfe von <strong>Jinja2-Templating</strong> in ansprechendes HTML. Dies erfordert keine externen Abhängigkeiten mehr.</p>
-                <div class="code-wrapper">
-                    <button class="copy-btn" onclick="copyCode(this)">Kopieren</button>
-                    <pre><code class="language-xml">&lt;!-- Jinja2 Template für den HTML-Agenten --&gt;
-&lt;div class="recipe-card"&gt;
-    &lt;h1&gt;{{ recipe_title }}&lt;/h1&gt;
-    &lt;!-- Das Bild wird direkt als Base64 eingebettet --&gt;
-    &lt;img src="data:image/png;base64,{{ image_base64 }}" alt="{{ recipe_title }}"&gt;
-    &lt;div class="meta"&gt;
-        &lt;span&gt;Zeit: {{ prep_time + cook_time }} min&lt;/span&gt;
-        &lt;span&gt;Schwierigkeit: {{ difficulty }}&lt;/span&gt;
-    &lt;/div&gt;
-    &lt;h3&gt;Zutaten&lt;/h3&gt;
-    &lt;ul&gt;
-        {% for ingredient in ingredients %}
-            &lt;li&gt;{{ ingredient.amount }} {{ ingredient.unit }} {{ ingredient.name}}&lt;/li&gt;
-        {% endfor %}
-    &lt;/ul&gt;
-    &lt;h3&gt;Zubereitung&lt;/h3&gt;
-    &lt;ol&gt;
-        {% for step in instructions %}
-            &lt;li&gt;{{ step }}&lt;/li&gt;
-        {% endfor %}
-    &lt;/ol&gt;
-&lt;/div&gt;</code></pre>
-                </div>
-            </section>
-            <section id="orchestration">
-                <h2>7. Orchestrierung und das Zusammenspiel der Agenten</h2>
-                <p>Die Koordination erfolgt über den <strong>"Agent-as-a-Tool"</strong>-Ansatz. Ein Haupt-Agent (Coordinator) übersetzt die Nutzeranfrage (z.B. <em>"Erstelle ein Rezept für ein thailändisches grünes Curry..."</em>) in Tool-Aufrufe.</p>
-                <ol class="list-decimal pl-6 mb-6 space-y-2 text-slate-600">
-                    <li><strong>Recherche-Delegation:</strong> Aufruf von <code>research_tool</code>.</li>
-                    <li><strong>Strukturierungs-Delegation:</strong> Aufruf von <code>recipe_summary_tool</code> (liefert Pydantic-Objekt).</li>
-                    <li><strong>Visualisierungs-Delegation:</strong> Aufruf von <code>image_generation_tool</code>.</li>
-                    <li><strong>Meta-Verpackung:</strong> Aufruf von <code>html_packaging_tool</code>.</li>
-                </ol>
-                <h3>Fehlerbehandlung mit Routern</h3>
-                <p>Falls ein Sub-Agent scheitert (z.B. keine Quellen gefunden), greift Haystacks Kontrollfluss-Logik ein:</p>
-                <div class="overflow-x-auto">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>Mechanismus</th>
-                                <th>Komponente (Haystack)</th>
-                                <th>Nutzen im kulinarischen MAS</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td><strong>Tool Invocation</strong></td>
-                                <td><code>ToolInvoker</code></td>
-                                <td>Führt die geplanten Aktionen (Suche, Bildgen) aus.</td>
-                            </tr>
-                            <tr>
-                                <td><strong>State Management</strong></td>
-                                <td>Agent State</td>
-                                <td>Speichert das Rezeptobjekt über Agenten-Grenzen hinweg.</td>
-                            </tr>
-                            <tr>
-                                <td><strong>Exit Conditions</strong></td>
-                                <td><code>exit_conditions</code></td>
-                                <td>Beendet den Loop, sobald der finale HTML-Code vorliegt.</td>
-                            </tr>
-                            <tr>
-                                <td><strong>Fehlerkorrektur</strong></td>
-                                <td><code>ConditionalRouter</code></td>
-                                <td>Leitet bei Tool-Fehlern den Fluss zurück zur Modifikation (z.B. neuer Such-Prompt).</td>
-                            </tr>
-                        </tbody>
-                    </table>
                 </div>
-                <div class="mt-8 p-4 bg-slate-100 rounded-lg text-sm text-slate-600 border border-slate-200">
-                    <strong>Fazit:</strong> Durch die Zerlegung in spezialisierte Pipelines und die Nutzung von Hugging Face Modellen (Qwen, Llama-3, Mistral, FLUX) über Haystack 2.0 entsteht ein robustes, schema-treues System, das den neuen Standard für KI-gestützte Content-Generierung definiert.
-                </div>
             </section>
-            <footer class="mt-16 pt-8 border-t border-slate-200 text-sm text-slate-500 text-center">
-                <p>Basierend auf dem Bericht: "Architekturen autonomer kulinarischer Wissenssysteme". Generiert für das "The Infinite Cookbook" Projekt.</p>
             </footer>
         </div>
     </main>
@@ -338,8 +384,17 @@ class StableDiffusionGenerator:
             anchor.addEventListener('click', function (e) {
                 e.preventDefault();
                 if(window.innerWidth < 768) {
-                    sidebar.classList.add('hidden'); // Close menu on click on mobile
                 }
                 document.querySelector(this.getAttribute('href')).scrollIntoView({
                     behavior: 'smooth'
                 });
@@ -351,7 +406,6 @@ class StableDiffusionGenerator:
             const codeBlock = button.nextElementSibling.querySelector('code');
             const textToCopy = codeBlock.innerText;
-            // Clipboard API fallback
             const textArea = document.createElement("textarea");
             textArea.value = textToCopy;
             document.body.appendChild(textArea);
@@ -360,12 +414,12 @@ class StableDiffusionGenerator:
             try {
                 document.execCommand('copy');
                 const originalText = button.innerText;
-                button.innerText = 'Kopiert!';
-                button.classList.add('bg-green-600');
                 setTimeout(() => {
                     button.innerText = originalText;
-                    button.classList.remove('bg-green-600');
                 }, 2000);
             } catch (err) {
                 console.error('Kopieren fehlgeschlagen', err);

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Konzept eines MAS mit Haystack 2.0</title>
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Highlight.js for Code Formatting (Atom One Dark is close to HF's dark code blocks) -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script>
+    <!-- Google Fonts (Inter & Source Code Pro for HF feel) -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
     <script>
         tailwind.config = {
             theme: {
                 extend: {
                     fontFamily: {
+                        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+                        mono: ['Source Code Pro', 'ui-monospace', 'SFMono-Regular', 'monospace'],
                     },
                     colors: {
+                        hfYellow: {
+                            DEFAULT: '#FFD21E',
+                            hover: '#F5C518',
+                            light: '#FFF5CC'
+                        },
+                        hfGray: {
+                            50: '#F9FAFB',
+                            100: '#F3F4F6',
+                            200: '#E5E7EB',
+                            800: '#1F2937',
+                            900: '#111827'
+                        }
                     }
                 }
             }
     </script>
     <style>
+        body { font-family: 'Inter', sans-serif; background-color: #ffffff; color: #111827; }
+        pre code { font-family: 'Source Code Pro', monospace; border-radius: 0.75rem; font-size: 0.875rem; padding: 1.25rem; }
+        .prose h2 { margin-top: 3rem; margin-bottom: 1.25rem; font-weight: 700; font-size: 1.75rem; color: #111827; border-bottom: 1px solid #E5E7EB; padding-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
+        .prose h3 { margin-top: 2rem; margin-bottom: 1rem; font-weight: 600; font-size: 1.25rem; color: #374151; }
+        .prose p { margin-bottom: 1.25rem; line-height: 1.8; color: #4B5563; }
+        .prose table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+        .prose th, .prose td { border: 1px solid #E5E7EB; padding: 1rem; text-align: left; font-size: 0.95rem; }
+        .prose th { background-color: #F9FAFB; font-weight: 600; color: #111827; }
+        /* Tooltip / Copy Button */
+        .copy-btn { position: absolute; top: 0.75rem; right: 0.75rem; background: rgba(255,255,255,0.1); color: #D1D5DB; border: 1px solid rgba(255,255,255,0.2); padding: 0.25rem 0.75rem; border-radius: 0.375rem; cursor: pointer; font-size: 0.75rem; transition: all 0.2s; }
+        .copy-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
+        .code-wrapper { position: relative; margin-bottom: 2rem; border-radius: 0.75rem; background: #282c34; }
+        .file-label { position: absolute; top: -12px; left: 16px; background: #FFD21E; color: #111827; padding: 0.1rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; z-index: 10; font-family: 'Source Code Pro', monospace; border: 2px solid #fff; }
+        /* Custom Scrollbar for Sidebar */
+        #sidebar::-webkit-scrollbar { width: 6px; }
+        #sidebar::-webkit-scrollbar-track { background: transparent; }
+        #sidebar::-webkit-scrollbar-thumb { background-color: #E5E7EB; border-radius: 20px; }
     </style>
 </head>
+<body class="flex flex-col md:flex-row min-h-screen selection:bg-hfYellow selection:text-black">
     <!-- Mobile Header -->
+    <div class="md:hidden bg-white border-b border-gray-200 p-4 flex justify-between items-center sticky top-0 z-50">
+        <div class="flex items-center gap-2">
+            <span class="text-2xl">🤗</span>
+            <h1 class="font-bold text-lg text-gray-900">MAS Konzept</h1>
+        </div>
+        <button id="mobile-menu-btn" class="text-gray-600 focus:outline-none hover:bg-gray-100 p-2 rounded-lg">
             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
         </button>
     </div>
     <!-- Sidebar Navigation -->
+    <nav id="sidebar" class="hidden md:flex flex-col w-full md:w-72 bg-gray-50 border-r border-gray-200 h-screen sticky top-0 overflow-y-auto shrink-0 transition-all duration-300 z-40">
+        <div class="p-6 hidden md:flex flex-col gap-2">
+            <div class="flex items-center gap-3">
+                <span class="text-3xl">🤗</span>
+                <h1 class="text-xl font-bold text-gray-900 tracking-tight leading-tight">Konzept eines MAS<br><span class="text-sm font-normal text-gray-500">mit Haystack 2.0</span></h1>
+            </div>
+        </div>
+        <div class="px-4 pb-4">
+            <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 ml-3 mt-4">Architektur</div>
+            <ul class="space-y-1 text-sm font-medium">
+                <li><a href="#intro" class="block py-2 px-3 text-gray-600 rounded-lg hover:bg-gray-200 hover:text-gray-900 transition">1. Das Konzept & Framework</a></li>
+                <li><a href="#hf-infra" class="block py-2 px-3 text-gray-600 rounded-lg hover:bg-gray-200 hover:text-gray-900 transition">2. Hugging Face Inference</a></li>
+            </ul>
+            <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 ml-3 mt-6">Die Agenten (Pipelines)</div>
+            <ul class="space-y-1 text-sm font-medium">
+                <li><a href="#agent1" class="block py-2 px-3 text-gray-600 rounded-lg hover:bg-gray-200 hover:text-gray-900 transition">3. Agent 1: Forschung & Suche</a></li>
+                <li><a href="#agent2" class="block py-2 px-3 text-gray-600 rounded-lg hover:bg-gray-200 hover:text-gray-900 transition">4. Agent 2: Struktur & Pydantic</a></li>
+                <li><a href="#agent3" class="block py-2 px-3 text-gray-600 rounded-lg hover:bg-gray-200 hover:text-gray-900 transition">5. Agent 3: Visionär (Bildgen.)</a></li>
+                <li><a href="#agent4" class="block py-2 px-3 text-gray-600 rounded-lg hover:bg-gray-200 hover:text-gray-900 transition">6. Agent 4: Meta-Aggregator</a></li>
+            </ul>
+            <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 ml-3 mt-6">Orchestrierung & Code</div>
+            <ul class="space-y-1 text-sm font-medium">
+                <li><a href="#orchestration" class="block py-2 px-3 text-gray-600 rounded-lg hover:bg-gray-200 hover:text-gray-900 transition">7. Routing & Tool-Calling</a></li>
+                <li><a href="#repo" class="flex items-center gap-2 py-2 px-3 bg-hfYellow/20 text-yellow-800 rounded-lg hover:bg-hfYellow/30 transition">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
+                    8. Repositorystruktur & main.py
+                </a></li>
+            </ul>
         </div>
     </nav>
     <!-- Main Content -->
+    <main class="flex-1 w-full max-w-4xl mx-auto p-6 md:p-10 lg:p-14">
         <div class="prose max-w-none">
             <!-- Hero -->
+            <div class="bg-hfYellow/10 border border-hfYellow rounded-2xl p-8 mb-12 shadow-sm">
+                <div class="flex items-center gap-3 mb-4">
+                    <span class="text-4xl">🥘</span>
+                    <h1 class="text-3xl font-bold text-gray-900 m-0">Architektur eines Kulinarischen MAS</h1>
+                </div>
+                <p class="text-gray-700 text-lg leading-relaxed m-0">Ein Konzept zur Orchestrierung von Multi-Agenten-Systemen (MAS) für <strong>"The Infinite Cookbook"</strong>. Wir zerlegen komplexe Aufgaben in spezialisierte Haystack 2.0 Pipelines und verbinden sie über die Hugging Face Infrastruktur (Open-Source LLMs) zu einem autonomen System.</p>
             </div>
             <section id="intro">
+                <h2><span>🏗️</span> 1. Das Konzept: Haystack 2.0</h2>
+                <p>Der Paradigmenwechsel: Ein einzelnes LLM scheitert oft an komplexen, mehrstufigen Aufgaben. Unser Konzept setzt auf <strong>Komponenten und Pipelines als dynamische Rechengraphen</strong>. Ein Agent in diesem Ökosystem ist eine autonome Einheit (z.B. ein spezialisiertes LLM + Tools), die Aufgaben plant, Werkzeuge auswählt und Strategien anpasst.</p>
             </section>
             <section id="hf-infra">
+                <h2><span>🤗</span> 2. Hugging Face Inference Provider</h2>
+                <p>Anstatt auf proprietäre Blackbox-Modelle zu setzen, nutzt dieses Konzept den Hugging Face Hub. Die <code>HuggingFaceAPIChatGenerator</code>-Komponente von Haystack ermöglicht nahtloses Wechseln zwischen Providern:</p>
                 <div class="overflow-x-auto">
                     <table>
                         <thead>
                             <tr>
+                                <th>Infrastruktur</th>
                                 <th>Charakteristika</th>
+                                <th>Modell-Beispiel im MAS</th>
                             </tr>
                         </thead>
                         <tbody>
                             <tr>
+                                <td><strong>Serverless API</strong></td>
+                                <td>Kostenlos, für Prototyping</td>
+                                <td class="font-mono text-sm">Qwen/Qwen2.5-72B-Instruct</td>
                             </tr>
                             <tr>
                                 <td><strong>Inference Endpoints</strong></td>
+                                <td>Dediziert, garantierte Latenz</td>
+                                <td class="font-mono text-sm">black-forest-labs/FLUX.1-schnell</td>
                             </tr>
                             <tr>
+                                <td><strong>TGI (Text Generation)</strong></td>
+                                <td>Unterstützt JSON-Guiding</td>
+                                <td class="font-mono text-sm">mistralai/Mistral-7B-Instruct</td>
                             </tr>
                         </tbody>
                     </table>
             </section>
             <section id="agent1">
+                <h2><span>🔍</span> 3. Agent 1: Forschung & Suche</h2>
+                <p>Dieser Sub-Agent kapselt die Recherche. Er nutzt Web-Suchen, lädt HTML-Inhalte herunter, bereinigt sie und rankt sie. Das Ergebnis ist eine fokussierte Wissensbasis.</p>
+                <div class="code-wrapper mt-4">
+                    <button class="copy-btn" onclick="copyCode(this)">Copy</button>
                     <pre><code class="language-python">from haystack import Pipeline
 from haystack.components.websearch import SerperDevWebSearch
+# ... imports
 research_pipe = Pipeline()
+research_pipe.add_component("search", SerperDevWebSearch(api_key="KEY"))
+research_pipe.add_component("ranker", TransformersSimilarityRanker())
+# ... verbindungen</code></pre>
+                </div>
+            </section>
+            <section id="agent2">
+                <h2><span>📋</span> 4. Agent 2: Struktur & Pydantic</h2>
+                <p>Um die unstrukturierten Forschungsnotizen maschinenlesbar zu machen, zwingen wir das LLM mittels <strong>Pydantic</strong> in ein striktes JSON-Schema. Das eliminiert Halluzinationen in der Datenstruktur.</p>
+            </section>
+            <section id="agent3">
+                <h2><span>🎨</span> 5. Agent 3: Visionär (Bildgen.)</h2>
+                <p>Da Sprachmodelle keine Bilder malen können, bauen wir eine eigene Custom Component in Haystack (<code>@component</code>), die via <code>diffusers</code> Bibliothek ein Stable Diffusion oder FLUX Modell ansteuert und als Base64-String zurückgibt.</p>
+            </section>
+            <section id="agent4">
+                <h2><span>💻</span> 6. Agent 4: Meta-Aggregator (HTML)</h2>
+                <p>Dieser Agent nutzt Jinja2-Templates, um die JSON-Daten (aus Agent 2) und den Base64-Bild-String (aus Agent 3) in eine fertige HTML-Rezeptkarte zu gießen.</p>
+            </section>
+            <section id="orchestration">
+                <h2><span>🚦</span> 7. Orchestrierung: Agent-as-a-Tool</h2>
+                <p>Die Magie passiert im Koordinator-Agenten. Anstatt alle Pipelines händisch zu verketten, packen wir jede Pipeline in ein Haystack <code>Tool</code>-Objekt. Ein übergeordnetes LLM entscheidet dann dynamisch, welches Tool aufgerufen werden muss.</p>
             </section>
+            <!-- KAPITEL 8: REPOSITORY UND CODE -->
+            <section id="repo">
+                <h2 class="bg-hfYellow/20 -mx-6 px-6 py-4 rounded-xl text-yellow-900 border-l-4 border-hfYellow">
+                    <span>📁</span> 8. Die Code-Struktur (Vom Konzept zur Realität)
+                </h2>
+                <p>Ein Monolith (alles in einem Skript) führt bei MAS unweigerlich ins Chaos. Eine saubere Repository-Struktur spiegelt die Modularität des Konzepts wider. Hier siehst du, wie die konkreten Dateien in einem echten Projekt aussehen.</p>
+                <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-8 font-mono text-sm text-gray-700 leading-relaxed shadow-sm">
+infinite-cookbook/<br>
+├── <span class="font-bold text-gray-900">schemas/</span><br>
+│   └── <a href="#file-schema" class="text-blue-600 hover:underline">recipe.py</a> <span class="text-gray-400 italic"># Pydantic Modelle</span><br>
+├── <span class="font-bold text-gray-900">agents/</span><br>
+│   └── <a href="#file-researcher" class="text-blue-600 hover:underline">researcher.py</a> <span class="text-gray-400 italic"># Pipeline Definitionen</span><br>
+├── <span class="font-bold text-gray-900">tools/</span><br>
+│   └── <a href="#file-tools" class="text-blue-600 hover:underline">agent_tools.py</a> <span class="text-gray-400 italic"># Wrapper: Pipeline -> Tool</span><br>
+└── <a href="#file-main" class="text-blue-600 hover:underline font-bold">main.py</a> <span class="text-gray-400 italic"># Orchestrierungs-Loop</span>
+                </div>
+                <h3 id="file-schema" class="flex items-center gap-2 mt-10"><svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg> 1. Datenschemata</h3>
+                <p>Wir definieren zentral, wie unser Endprodukt auszusehen hat.</p>
+                <div class="code-wrapper mt-4">
+                    <div class="file-label">schemas/recipe.py</div>
+                    <button class="copy-btn" onclick="copyCode(this)">Copy</button>
                     <pre><code class="language-python">from pydantic import BaseModel
+from typing import List, Literal
 class Ingredient(BaseModel):
     name: str
     amount: float
     servings: int
     ingredients: List[Ingredient]
     instructions: List[str]
+    difficulty: Literal["Einfach", "Mittel", "Schwer"]</code></pre>
                 </div>
+                <h3 id="file-researcher" class="flex items-center gap-2 mt-10"><svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg> 2. Pipeline Module</h3>
+                <p>Anstatt Pipelines global zu instanziieren, verpacken wir sie in Funktionen (Factory-Pattern). So bleiben sie testbar.</p>
+                <div class="code-wrapper mt-4">
+                    <div class="file-label">agents/researcher.py</div>
+                    <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                    <pre><code class="language-python">from haystack import Pipeline
+from haystack.components.websearch import SerperDevWebSearch
+from haystack.components.fetchers import LinkContentFetcher
+from haystack.components.converters import HTMLToDocument
+def build_research_pipeline() -> Pipeline:
+    """Baut den Graphen für die Web-Recherche."""
+    pipe = Pipeline()
+    # Komponenten hinzufügen
+    pipe.add_component("search", SerperDevWebSearch())
+    pipe.add_component("fetcher", LinkContentFetcher())
+    pipe.add_component("html_converter", HTMLToDocument())
+    # Kanten (Edges) verbinden
+    pipe.connect("search.links", "fetcher.urls")
+    pipe.connect("fetcher.streams", "html_converter.sources")
+    return pipe</code></pre>
                 </div>
+                <h3 id="file-tools" class="flex items-center gap-2 mt-10"><svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg> 3. Die Werkzeugkiste (Tool-Wrapper)</h3>
+                <p>Hier importieren wir die Pipelines und machen sie für das Koordinator-LLM "lesbar", indem wir sie mit Beschreibungen und Schemata versehen.</p>
+                <div class="code-wrapper mt-4">
+                    <div class="file-label">tools/agent_tools.py</div>
+                    <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                    <pre><code class="language-python">from haystack.tools import Tool
+from agents.researcher import build_research_pipeline
+# from agents.structurer import build_structuring_pipeline
+# 1. Pipelines instanziieren
+research_pipe = build_research_pipeline()
+# structurer_pipe = build_structuring_pipeline()
+# 2. In Tools kapseln
+research_tool = Tool(
+    name="research_tool",
+    description="Nutze dieses Tool ZUERST. Durchsucht das Web nach authentischen Rezept-Infos.",
+    parameters={
+        "type": "object",
+        "properties": {
+            "query": {"type": "string", "description": "Der Suchbegriff, z.B. 'original Pad Thai'"}
+        },
+        "required": ["query"]
+    },
+    function=research_pipe.run
+)
+# Tool-Liste für den Haupt-Agenten exportieren
+cookbook_tools = [research_tool] # + structurer_tool, image_tool, html_tool</code></pre>
+                </div>
+                <h3 id="file-main" class="flex items-center gap-2 mt-10"><svg class="w-5 h-5 text-hfYellow" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg> 4. Das Herzstück: main.py</h3>
+                <p>Die <code>main.py</code> ist nun unglaublich aufgeräumt. Sie initialisiert lediglich das Haupt-LLM (über Hugging Face), importiert die fertige Werkzeugkiste und startet die Interaktions-Schleife.</p>
+                <div class="code-wrapper mt-4">
+                    <div class="file-label">main.py</div>
+                    <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                    <pre><code class="language-python">import os
+from haystack import Pipeline
+from haystack.components.generators.chat import HuggingFaceAPIChatGenerator
+from haystack.components.tools import ToolInvoker
+from haystack.dataclasses import ChatMessage
+# Unsere sauberen, modularen Imports!
+from tools.agent_tools import cookbook_tools
+def main():
+    # 1. Der Koordinator: Ein starkes Modell, das Tool-Calling beherrscht
+    llm = HuggingFaceAPIChatGenerator(
+        api_type="serverless_inference_api",
+        model="Qwen/Qwen2.5-72B-Instruct",
+        tools=cookbook_tools
+    )
+    # 2. Der Invoker: Führt die vom LLM gewählten Tools aus
+    invoker = ToolInvoker(tools=cookbook_tools)
+    # 3. Der Routing-Graph
+    coordinator = Pipeline()
+    coordinator.add_component("llm", llm)
+    coordinator.add_component("invoker", invoker)
+    # Zyklische Verbindung für iteratives Arbeiten
+    coordinator.connect("llm.replies", "invoker.messages")
+    coordinator.connect("invoker.tool_messages", "llm.messages")
+    # 4. System Start
+    user_prompt = "Erstelle ein Rezept für ein thailändisches grünes Curry samt HTML und Bild."
+    messages = [ChatMessage.from_user(user_prompt)]
+    print(f"🤖 Koordinator startet Aufgabe: {user_prompt}")
+    # Run Loop (Vereinfachte Ausführung)
+    result = coordinator.run({"llm": {"messages": messages}})
+    # Im echten MAS läuft dies in einer Schleife (ConditionalRouter),
+    # bis das LLM entscheidet: "Ich bin fertig und nutze kein Tool mehr."
+    print("Fertiges Ergebnis:", result["llm"]["replies"][0].text)
+if __name__ == "__main__":
+    main()</code></pre>
+                </div>
+                <div class="mt-8 p-5 bg-blue-50/50 rounded-xl text-sm text-gray-700 border border-blue-100 flex items-start gap-4 shadow-sm">
+                    <span class="text-2xl">💡</span>
+                    <div>
+                        <strong class="text-gray-900 block mb-1">Die Architektur-Philosophie:</strong>
+                        Diese Aufteilung erlaubt es dir, die <code>researcher.py</code> komplett umzuschreiben oder das Modell in <code>main.py</code> auszutauschen, ohne dass du Angst haben musst, den Code des Bild-Generators kaputtzumachen. Das ist die wahre Stärke von Haystack 2.0 in Kombination mit einem modularen Setup!
+                    </div>
                 </div>
             </section>
+            <footer class="mt-16 pt-8 border-t border-gray-200 text-sm text-gray-400 text-center">
+                <p>Ein konzeptioneller Guide für Multi-Agenten-Systeme.<br>Technologie-Stack: Haystack 2.0 & Hugging Face.</p>
             </footer>
         </div>
     </main>
             anchor.addEventListener('click', function (e) {
                 e.preventDefault();
                 if(window.innerWidth < 768) {
+                    sidebar.classList.add('hidden');
                 }
+                // Active State Styling Update
+                document.querySelectorAll('#sidebar a').forEach(a => {
+                    a.classList.remove('bg-hfYellow/20', 'text-yellow-800', 'font-semibold');
+                    a.classList.add('text-gray-600');
+                });
+                this.classList.remove('text-gray-600');
+                this.classList.add('bg-hfYellow/20', 'text-yellow-800', 'font-semibold');
                 document.querySelector(this.getAttribute('href')).scrollIntoView({
                     behavior: 'smooth'
                 });
             const codeBlock = button.nextElementSibling.querySelector('code');
             const textToCopy = codeBlock.innerText;
             const textArea = document.createElement("textarea");
             textArea.value = textToCopy;
             document.body.appendChild(textArea);
             try {
                 document.execCommand('copy');
                 const originalText = button.innerText;
+                button.innerText = 'Copied!';
+                button.classList.add('bg-green-600', 'text-white', 'border-green-600');
                 setTimeout(() => {
                     button.innerText = originalText;
+                    button.classList.remove('bg-green-600', 'text-white', 'border-green-600');
                 }, 2000);
             } catch (err) {
                 console.error('Kopieren fehlgeschlagen', err);