Update index.html

index.html

@@ -8,7 +8,7 @@
     <!-- 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) -->
+    <!-- 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>
@@ -16,7 +16,7 @@
     <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">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet">
     
     <script>
         tailwind.config = {
@@ -47,19 +47,19 @@
     
     <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; }
+        pre code { font-family: 'Source Code Pro', monospace; border-radius: 0.75rem; font-size: 0.875rem; padding: 1.5rem 1.25rem 1.25rem 1.25rem; }
+        .prose h2 { margin-top: 3.5rem; 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: 2.5rem; 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 { 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; z-index: 20; }
         .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; }
+        .code-wrapper { position: relative; margin-top: 1.5rem; margin-bottom: 2rem; border-radius: 0.75rem; background: #282c34; }
+        .file-label { position: absolute; top: -14px; left: 16px; background: #FFD21E; color: #111827; padding: 0.15rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; z-index: 10; font-family: 'Source Code Pro', monospace; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
         
         /* Custom Scrollbar for Sidebar */
         #sidebar::-webkit-scrollbar { width: 6px; }
@@ -107,9 +107,9 @@
             <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">
+                <li><a href="#repo" class="flex items-center gap-2 py-2 px-3 bg-hfYellow/20 text-yellow-900 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
+                    8. Repositorystruktur
                 </a></li>
             </ul>
         </div>
@@ -125,42 +125,43 @@
                     <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>
+                <p class="text-gray-700 text-lg leading-relaxed m-0">Ein Deep-Dive in die Orchestrierung von Multi-Agenten-Systemen (MAS) für <strong>"The Infinite Cookbook"</strong>. Wir zerlegen komplexe Aufgaben (Recherche, Strukturierung, Bildgenerierung, Layout) in spezialisierte Haystack 2.0 Pipelines und verbinden sie über Hugging Face 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>
+                <p>Die Evolution der KI verlangt nach neuen Architekturen. Der Übergang von Haystack 1.x zu 2.0 markiert einen Paradigmenwechsel: Frühere Versionen waren auf lineare Ketten ausgelegt, Haystack 2.0 führt <strong>Komponenten und Pipelines als dynamische Rechengraphen</strong> ein.</p>
+                <p>Diese Graphen unterstützen Kontrollflüsse, Schleifen und präzises Routing. Ein Agent in diesem Ökosystem ist weit mehr als ein Chatbot; er ist ein System, das ein LLM als Steuerungsorgan nutzt, um Aufgaben zu planen und an spezialisierte Sub-Pipelines (andere Agenten) zu delegieren. Typprüfung an den Ein- und Ausgabesockets sichert dabei die Stabilität vor der Laufzeit.</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>
+                <p>Hugging Face ist der zentrale Marktplatz für Open-Source-Intelligenz. Im Juli 2025 stellte die Inference API auf <code>chat_completion</code>-Endpunkte um. Haystack bindet diese Modelle über die <code>HuggingFaceAPIChatGenerator</code>-Komponente ein. Durch dynamische Suffixe wie <code>:fastest</code> oder Provider-Wahl können wir Lasten optimieren:</p>
                 
                 <div class="overflow-x-auto">
                     <table>
                         <thead>
                             <tr>
-                                <th>Infrastruktur</th>
+                                <th>Infrastruktur-Option</th>
                                 <th>Charakteristika</th>
-                                <th>Modell-Beispiel im MAS</th>
+                                <th>Anwendungsfall 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>
+                                <td><strong>Serverless Inference API</strong></td>
+                                <td>Kostenlos/Rate-limited, schnell</td>
+                                <td>Prototyping und einfache Zusammenfassungen (z.B. Qwen 72B).</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>
+                                <td>Dedizierte Instanzen, /h Abrechnung</td>
+                                <td>Produktion, garantierte Latenz, Bildgenerierung (SDXL / FLUX).</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>
+                                <td><strong>Text Generation Inference (TGI)</strong></td>
+                                <td>Optimiertes Serving, JSON-Guiding</td>
+                                <td>Komplexe Datenextraktion mit strikter Schema-Einhaltung.</td>
                             </tr>
                         </tbody>
                     </table>
@@ -169,65 +170,48 @@
 
             <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">
+                <p>Die erste Phase ist die <em>Deep Research Phase</em>. Dieser Agent durchsucht das Web iterativ nach authentischen Rezepten, regionalen Varianten und historischen Hintergründen. Er nutzt Tools, um Links zu besuchen, HTML zu bereinigen und die Ergebnisse nach Relevanz (Context Optimization) zu ranken, bevor sie ans LLM gehen.</p>
+                
+                <div class="code-wrapper">
+                    <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
-# ... imports
-research_pipe = Pipeline()
-research_pipe.add_component("search", SerperDevWebSearch(api_key="KEY"))
-research_pipe.add_component("ranker", TransformersSimilarityRanker())
-# ... verbindungen</code></pre>
-                </div>
-            </section>
+from haystack.components.fetchers import LinkContentFetcher
+from haystack.components.converters import HTMLToDocument
+from haystack.components.rankers import TransformersSimilarityRanker
 
-            <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>
+def build_research_pipeline() -> Pipeline:
+    pipe = Pipeline()
 
-            <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>
+    # Komponenten initialisieren
+    pipe.add_component("search", SerperDevWebSearch(api_key="DEIN_API_KEY"))
+    pipe.add_component("fetcher", LinkContentFetcher())
+    pipe.add_component("html_converter", HTMLToDocument())
+    
+    # Der Ranker sortiert Dokumente nach Relevanz zur Suchanfrage aus
+    pipe.add_component("ranker", TransformersSimilarityRanker(model="cross-encoder/ms-marco-MiniLM-L-6-v2"))
 
-            <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>
+    # Den gerichteten Graphen aufbauen
+    pipe.connect("search.links", "fetcher.urls")
+    pipe.connect("fetcher.streams", "html_converter.sources")
+    pipe.connect("html_converter.documents", "ranker.documents")
 
-            <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>
+    return pipe</code></pre>
+                </div>
             </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>
+            <section id="agent2">
+                <h2><span>📋</span> 4. Agent 2: Struktur & Pydantic</h2>
+                <p>Der Zusammenfassungs-Agent wandelt die unstrukturierten Forschungsnotizen in ein präzises, maschinenlesbares Rezept um. Das ist kritisch, da Inkonsistenzen das HTML-Layout gefährden. Haystack 2.0 erzwingt strukturierte Ausgaben über <strong>Pydantic-Modelle</strong> (besonders mächtig in Kombination mit Hugging Face TGI-Instanzen).</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="code-wrapper">
                     <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
+from typing import List, Dict, Literal
 
+# Strikte Typisierung eliminiert Halluzinationen in der Struktur
 class Ingredient(BaseModel):
     name: str
     amount: float
@@ -238,68 +222,151 @@ class RecipeStructure(BaseModel):
     servings: int
     ingredients: List[Ingredient]
     instructions: List[str]
-    difficulty: Literal["Einfach", "Mittel", "Schwer"]</code></pre>
+    nutrients: Dict[str, float]
+    difficulty: Literal["Einfach", "Mittel", "Schwer"]
+
+# Nutzungshinweis für die Pipeline:
+# generator = HuggingFaceAPIChatGenerator(
+#     api_type="text_generation_inference",
+#     generation_kwargs={"response_format": RecipeStructure.schema_json()}
+# )</code></pre>
                 </div>
+            </section>
 
-                <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>
+            <section id="agent3">
+                <h2><span>🎨</span> 5. Agent 3: Visionär (Bildgenerierung)</h2>
+                <p>Ein Kochbuch braucht Ästhetik. Da Sprachmodelle keinen Text in Bilder konvertieren, implementieren wir eine <strong>benutzerdefinierte Haystack-Komponente</strong>. Diese nimmt den Rezepttitel auf, optimiert den Prompt ("Professionelle Food-Fotografie, Makro...") und steuert via <code>diffusers</code> ein Modell wie Stable Diffusion XL oder FLUX an.</p>
+                
+                <div class="code-wrapper">
+                    <div class="file-label">components/image_generator.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
+                    <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
+        # Initialisierung z.B. Pipeline Laden inkl. FP16 Optimierung
+
+    # Definition des Output-Sockets für die Validierung vor der Laufzeit
+    @component.output_types(image=ImageContent)
+    def run(self, prompt: str):
+        # image = self.pipe(prompt).images[0]
+        # base64_str = convert_to_base64(image)
+        
+        # Rückgabe als Haystack 2.0 Multimodal Objekt
+        return {"image": ImageContent.from_base64(base64_str)}</code></pre>
+                </div>
+            </section>
 
-def build_research_pipeline() -> Pipeline:
-    """Baut den Graphen für die Web-Recherche."""
-    pipe = Pipeline()
+            <section id="agent4">
+                <h2><span>💻</span> 6. Agent 4: Meta-Aggregator (HTML)</h2>
+                <p>Der letzte Agent orchestriert die Präsentation. Er empfängt das strukturierte Rezept (als Dictionary/JSON) und das generierte Bild (als Base64) und verpackt beides über <strong>Jinja2-Templating</strong>.</p>
+                
+                <div class="code-wrapper">
+                    <div class="file-label">templates/recipe_card.html</div>
+                    <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                    <pre><code class="language-xml">&lt;!-- Das Template wird vom HTML-Agenten mit Daten befüllt --&gt;
+&lt;div class="recipe-card"&gt;
+    &lt;h1&gt;{{ recipe_title }}&lt;/h1&gt;
     
-    # Komponenten hinzufügen
-    pipe.add_component("search", SerperDevWebSearch())
-    pipe.add_component("fetcher", LinkContentFetcher())
-    pipe.add_component("html_converter", HTMLToDocument())
+    &lt;!-- Base64 Einbettung erspart externe Bild-Hostings --&gt;
+    &lt;img src="data:image/png;base64,{{ image_base64 }}" alt="{{ recipe_title }}"&gt;
     
-    # Kanten (Edges) verbinden
-    pipe.connect("search.links", "fetcher.urls")
-    pipe.connect("fetcher.streams", "html_converter.sources")
+    &lt;div class="meta"&gt;
+        &lt;span&gt;Schwierigkeit: {{ difficulty }}&lt;/span&gt;
+    &lt;/div&gt;
     
-    return pipe</code></pre>
+    &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>
 
-                <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">
+            <section id="orchestration">
+                <h2><span>🚦</span> 7. Orchestrierung & Fehlerbehandlung</h2>
+                <p>Um diese Agenten zu vereinen, nutzen wir den <strong>"Agent-as-a-Tool"</strong>-Ansatz. Ein Koordinator-Agent kapselt die Pipelines in Werkzeugen. So kann das Haupt-LLM dynamisch entscheiden, wann es recherchiert und wann es Bilder generiert.</p>
+                
+                <p>Für Robustheit sorgt der <code>ConditionalRouter</code>. Liefert ein Tool einen Fehler (z.B. keine Suchergebnisse), leitet der Router den Datenfluss um, sodass das LLM seinen Such-Prompt anpassen kann, anstatt abzustürzen.</p>
+
+                <div class="code-wrapper">
                     <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 haystack.components.routers import ConditionalRouter
 from agents.researcher import build_research_pipeline
-# from agents.structurer import build_structuring_pipeline
 
-# 1. Pipelines instanziieren
+# Pipeline laden
 research_pipe = build_research_pipeline()
-# structurer_pipe = build_structuring_pipeline()
 
-# 2. In Tools kapseln
+# Pipeline als aufrufbares Werkzeug für das LLM verpacken
 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"]
-    },
+    description="Durchsucht das Web nach authentischen Rezepten.",
+    parameters={"query": {"type": "string"}},
     function=research_pipe.run
 )
 
-# Tool-Liste für den Haupt-Agenten exportieren
-cookbook_tools = [research_tool] # + structurer_tool, image_tool, html_tool</code></pre>
+# Fehlerbehandlung: Ein Router, der den Pfad basierend auf Tool-Erfolg wählt
+routes = [
+    {
+        "condition": "{{ 'error' in tool_result.text | lower }}",
+        "output": "{{ tool_result }}",
+        "output_name": "error_route",
+        "output_type": str
+    },
+    {
+        "condition": "{{ 'error' not in tool_result.text | lower }}",
+        "output": "{{ tool_result }}",
+        "output_name": "success_route",
+        "output_type": str
+    }
+]
+router = ConditionalRouter(routes)</code></pre>
                 </div>
+            </section>
 
-                <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>
+            <!-- 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. Repository-Struktur: Der Master-Plan
+                </h2>
+                <p>Alle Code-Schnipsel aus Kapitel 3 bis 7 fügen sich nun zusammen. Ein komplexes MAS sollte <strong>niemals ein Monolith</strong> sein (alles in einem Skript). Eine monolithische Architektur würde das Testen einzelner Pipelines fast unmöglich machen und zu Spaghetti-Code beim Routing führen.</p>
+                
+                <p>Dank der modularen Architektur von Haystack 2.0 spiegelt sich die fachliche Trennung direkt im Repository wider:</p>
+                
+                <div class="bg-gray-50 border border-gray-200 rounded-lg p-5 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>
+│   └── <span class="text-blue-600">recipe.py</span> <span class="text-gray-400 italic"># (Kapitel 4) Pydantic Modelle</span><br>
+├── <span class="font-bold text-gray-900">components/</span><br>
+│   └── <span class="text-blue-600">image_generator.py</span> <span class="text-gray-400 italic"># (Kapitel 5) Custom @component</span><br>
+├── <span class="font-bold text-gray-900">templates/</span><br>
+│   └── <span class="text-blue-600">recipe_card.html</span> <span class="text-gray-400 italic"># (Kapitel 6) Jinja2 Template</span><br>
+├── <span class="font-bold text-gray-900">agents/</span><br>
+│   ├── <span class="text-blue-600">researcher.py</span> <span class="text-gray-400 italic"># (Kapitel 3) Web-Search Pipeline</span><br>
+│   └── <span class="text-gray-500">structurer.py ...</span><br>
+├── <span class="font-bold text-gray-900">tools/</span><br>
+│   └── <span class="text-blue-600">agent_tools.py</span> <span class="text-gray-400 italic"># (Kapitel 7) Pipeline -> Tool Wrapper</span><br>
+└── <span class="text-blue-600 font-bold">main.py</span> <span class="text-gray-400 italic"># Orchestrierungs-Loop (siehe unten)</span>
+                </div>
+
+                <h3>Das Herzstück: <code>main.py</code></h3>
+                <p>Weil wir alle Komplexität in die Unterordner ausgelagert haben, ist die <code>main.py</code> unglaublich elegant. Sie initialisiert das Haupt-LLM, 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>
@@ -309,11 +376,11 @@ from haystack.components.generators.chat import HuggingFaceAPIChatGenerator
 from haystack.components.tools import ToolInvoker
 from haystack.dataclasses import ChatMessage
 
-# Unsere sauberen, modularen Imports!
+# Der saubere Import aus unserer Architektur (Kapitel 7)
 from tools.agent_tools import cookbook_tools
 
 def main():
-    # 1. Der Koordinator: Ein starkes Modell, das Tool-Calling beherrscht
+    # 1. Der Koordinator: Ein starkes Modell (z.B. Qwen), das Tool-Calling beherrscht
     llm = HuggingFaceAPIChatGenerator(
         api_type="serverless_inference_api",
         model="Qwen/Qwen2.5-72B-Instruct",
@@ -323,12 +390,12 @@ def main():
     # 2. Der Invoker: Führt die vom LLM gewählten Tools aus
     invoker = ToolInvoker(tools=cookbook_tools)
 
-    # 3. Der Routing-Graph
+    # 3. Der Orchestrierungs-Graph aufbauen
     coordinator = Pipeline()
     coordinator.add_component("llm", llm)
     coordinator.add_component("invoker", invoker)
     
-    # Zyklische Verbindung für iteratives Arbeiten
+    # Zyklische Verbindung für iteratives Arbeiten (Das LLM evaluiert Tool-Outputs)
     coordinator.connect("llm.replies", "invoker.messages")
     coordinator.connect("invoker.tool_messages", "llm.messages")
 
@@ -338,11 +405,11 @@ def main():
     
     print(f"🤖 Koordinator startet Aufgabe: {user_prompt}")
     
-    # Run Loop (Vereinfachte Ausführung)
+    # Run Loop
+    # Im echten MAS läuft dies in Verbindung mit dem Router in einer Schleife, 
+    # bis das LLM entscheidet: "Ich bin fertig, hier ist das finale HTML."
     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__":
@@ -353,7 +420,7 @@ if __name__ == "__main__":
                     <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!
+                        Diese Aufteilung erlaubt es dir, das Modell in <code>main.py</code> auszutauschen, die Such-Logik in <code>researcher.py</code> komplett neu zu schreiben oder an der HTML-Karte zu basteln, ohne dass die anderen Teile des Multi-Agenten-Systems zerbrechen. Das ist die Stärke von Haystack 2.0!
                     </div>
                 </div>
 
@@ -379,7 +446,7 @@ if __name__ == "__main__":
             sidebar.classList.toggle('hidden');
         });
 
-        // Smooth scroll adjustment for fixed header (mobile)
+        // Smooth scroll adjustment for fixed header
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function (e) {
                 e.preventDefault();
@@ -392,8 +459,11 @@ if __name__ == "__main__":
                     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');
+                
+                if(this.getAttribute('href') !== '#repo') {
+                   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'