Team Ai
Apppublic

aidn/Haystack-MAS

sourceHugging Faceupdated 7mo agoView on Hugging Face
1likes
index.html591 linesDownload Raw Back to root
1<!DOCTYPE html>2<html lang="de" class="scroll-smooth">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>Konzept eines MAS mit Haystack 2.0</title>7    8    <!-- Tailwind CSS -->9    <script src="https://cdn.tailwindcss.com"></script>10    11    <!-- Highlight.js for Code Formatting -->12    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">13    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>14    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>15    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>16    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script>17    18    <!-- Google Fonts (Inter & Source Code Pro for HF feel) -->19    <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">20    21    <script>22        tailwind.config = {23            theme: {24                extend: {25                    fontFamily: {26                        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],27                        mono: ['Source Code Pro', 'ui-monospace', 'SFMono-Regular', 'monospace'],28                    },29                    colors: {30                        hfYellow: {31                            DEFAULT: '#FFD21E',32                            hover: '#F5C518',33                            light: '#FFF5CC'34                        },35                        hfGray: {36                            50: '#F9FAFB',37                            100: '#F3F4F6',38                            200: '#E5E7EB',39                            800: '#1F2937',40                            900: '#111827'41                        }42                    }43                }44            }45        }46    </script>47    48    <style>49        body { font-family: 'Inter', sans-serif; background-color: #ffffff; color: #111827; }50        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; }51        .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; }52        .prose h3 { margin-top: 2.5rem; margin-bottom: 1rem; font-weight: 600; font-size: 1.25rem; color: #374151; }53        .prose p { margin-bottom: 1.25rem; line-height: 1.8; color: #4B5563; }54        .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); }55        .prose th, .prose td { border: 1px solid #E5E7EB; padding: 1rem; text-align: left; font-size: 0.95rem; }56        .prose th { background-color: #F9FAFB; font-weight: 600; color: #111827; }57        58        /* Tooltip / Copy Button */59        .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; }60        .copy-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }61        .code-wrapper { position: relative; margin-top: 1.5rem; margin-bottom: 2rem; border-radius: 0.75rem; background: #282c34; }62        .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); }63        64        /* Custom Scrollbar for Sidebar */65        #sidebar::-webkit-scrollbar { width: 6px; }66        #sidebar::-webkit-scrollbar-track { background: transparent; }67        #sidebar::-webkit-scrollbar-thumb { background-color: #E5E7EB; border-radius: 20px; }68    </style>69</head>70<body class="flex flex-col md:flex-row min-h-screen selection:bg-hfYellow selection:text-black">71 72    <!-- Mobile Header -->73    <div class="md:hidden bg-white border-b border-gray-200 p-4 flex justify-between items-center sticky top-0 z-50">74        <div class="flex items-center gap-2">75            <span class="text-2xl">🤗</span>76            <h1 class="font-bold text-lg text-gray-900">MAS Konzept</h1>77        </div>78        <button id="mobile-menu-btn" class="text-gray-600 focus:outline-none hover:bg-gray-100 p-2 rounded-lg">79            <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>80        </button>81    </div>82 83    <!-- Sidebar Navigation -->84    <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">85        <div class="p-6 hidden md:flex flex-col gap-2">86            <div class="flex items-center gap-3">87                <span class="text-3xl">🤗</span>88                <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>89            </div>90        </div>91        92        <div class="px-4 pb-4">93            <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 ml-3 mt-4">Architektur</div>94            <ul class="space-y-1 text-sm font-medium">95                <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>96                <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>97            </ul>98 99            <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 ml-3 mt-6">Die Agenten (Pipelines)</div>100            <ul class="space-y-1 text-sm font-medium">101                <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>102                <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>103                <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>104                <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>105            </ul>106 107            <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 ml-3 mt-6">Orchestrierung & Code</div>108            <ul class="space-y-1 text-sm font-medium">109                <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>110                <li><a href="#repo" class="block py-2 px-3 text-gray-600 rounded-lg hover:bg-gray-200 hover:text-gray-900 transition">8. Repositorystruktur</a></li>111                <li><a href="#outlook" class="flex items-center gap-2 mt-2 py-2 px-3 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition">112                    <svg class="w-4 h-4 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>113                    9. Fazit: Die KI-Küchenbrigade114                </a></li>115            </ul>116        </div>117    </nav>118 119    <!-- Main Content -->120    <main class="flex-1 w-full max-w-4xl mx-auto p-6 md:p-10 lg:p-14">121        <div class="prose max-w-none">122            123            <!-- Hero -->124            <div class="bg-hfYellow/10 border border-hfYellow rounded-2xl p-8 mb-12 shadow-sm">125                <div class="flex items-center gap-3 mb-4">126                    <span class="text-4xl">🥘</span>127                    <h1 class="text-3xl font-bold text-gray-900 m-0">Architektur eines Kulinarischen MAS</h1>128                </div>129                <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>130            </div>131 132            <section id="intro">133                <h2><span>🏗️</span> 1. Das Konzept: Haystack 2.0</h2>134                <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>135                <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>136            </section>137 138            <section id="hf-infra">139                <h2><span>🤗</span> 2. Hugging Face Inference Provider</h2>140                <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>141                142                <div class="overflow-x-auto">143                    <table>144                        <thead>145                            <tr>146                                <th>Infrastruktur-Option</th>147                                <th>Charakteristika</th>148                                <th>Anwendungsfall im MAS</th>149                            </tr>150                        </thead>151                        <tbody>152                            <tr>153                                <td><strong>Serverless Inference API</strong></td>154                                <td>Kostenlos/Rate-limited, schnell</td>155                                <td>Prototyping und einfache Zusammenfassungen (z.B. Qwen 72B).</td>156                            </tr>157                            <tr>158                                <td><strong>Inference Endpoints</strong></td>159                                <td>Dedizierte Instanzen, /h Abrechnung</td>160                                <td>Produktion, garantierte Latenz, Bildgenerierung (SDXL / FLUX).</td>161                            </tr>162                            <tr>163                                <td><strong>Text Generation Inference (TGI)</strong></td>164                                <td>Optimiertes Serving, JSON-Guiding</td>165                                <td>Komplexe Datenextraktion mit strikter Schema-Einhaltung.</td>166                            </tr>167                        </tbody>168                    </table>169                </div>170            </section>171 172            <section id="agent1">173                <h2><span>🔍</span> 3. Agent 1: Forschung & Suche</h2>174                <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>175                176                <div class="code-wrapper">177                    <div class="file-label">agents/researcher.py</div>178                    <button class="copy-btn" onclick="copyCode(this)">Copy</button>179                    <pre><code class="language-python">from haystack import Pipeline180from haystack.components.websearch import SerperDevWebSearch181from haystack.components.fetchers import LinkContentFetcher182from haystack.components.converters import HTMLToDocument183from haystack.components.rankers import TransformersSimilarityRanker184 185def build_research_pipeline() -> Pipeline:186    pipe = Pipeline()187 188    # Komponenten initialisieren189    pipe.add_component("search", SerperDevWebSearch(api_key="DEIN_API_KEY"))190    pipe.add_component("fetcher", LinkContentFetcher())191    pipe.add_component("html_converter", HTMLToDocument())192    193    # Der Ranker sortiert Dokumente nach Relevanz zur Suchanfrage aus194    pipe.add_component("ranker", TransformersSimilarityRanker(model="cross-encoder/ms-marco-MiniLM-L-6-v2"))195 196    # Den gerichteten Graphen aufbauen197    pipe.connect("search.links", "fetcher.urls")198    pipe.connect("fetcher.streams", "html_converter.sources")199    pipe.connect("html_converter.documents", "ranker.documents")200 201    return pipe</code></pre>202                </div>203            </section>204 205            <section id="agent2">206                <h2><span>📋</span> 4. Agent 2: Struktur & Pydantic</h2>207                <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>208                209                <div class="code-wrapper">210                    <div class="file-label">schemas/recipe.py</div>211                    <button class="copy-btn" onclick="copyCode(this)">Copy</button>212                    <pre><code class="language-python">from pydantic import BaseModel213from typing import List, Dict, Literal214 215# Strikte Typisierung eliminiert Halluzinationen in der Struktur216class Ingredient(BaseModel):217    name: str218    amount: float219    unit: str220 221class RecipeStructure(BaseModel):222    recipe_title: str223    servings: int224    ingredients: List[Ingredient]225    instructions: List[str]226    nutrients: Dict[str, float]227    difficulty: Literal["Einfach", "Mittel", "Schwer"]228 229# Nutzungshinweis für die Pipeline:230# generator = HuggingFaceAPIChatGenerator(231#     api_type="text_generation_inference",232#     generation_kwargs={"response_format": RecipeStructure.schema_json()}233# )</code></pre>234                </div>235            </section>236 237            <section id="agent3">238                <h2><span>🎨</span> 5. Agent 3: Visionär (Bildgenerierung)</h2>239                <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>240                241                <div class="code-wrapper">242                    <div class="file-label">components/image_generator.py</div>243                    <button class="copy-btn" onclick="copyCode(this)">Copy</button>244                    <pre><code class="language-python">from haystack import component245from haystack.dataclasses import ImageContent246# import diffusers ...247 248@component249class StableDiffusionGenerator:250    def __init__(self, model_id="stabilityai/stable-diffusion-xl-base-1.0"):251        self.model_id = model_id252        # Initialisierung z.B. Pipeline Laden inkl. FP16 Optimierung253 254    # Definition des Output-Sockets für die Validierung vor der Laufzeit255    @component.output_types(image=ImageContent)256    def run(self, prompt: str):257        # image = self.pipe(prompt).images[0]258        # base64_str = convert_to_base64(image)259        260        # Rückgabe als Haystack 2.0 Multimodal Objekt261        return {"image": ImageContent.from_base64(base64_str)}</code></pre>262                </div>263            </section>264 265            <section id="agent4">266                <h2><span>💻</span> 6. Agent 4: Meta-Aggregator (HTML)</h2>267                <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>268                269                <div class="code-wrapper">270                    <div class="file-label">templates/recipe_card.html</div>271                    <button class="copy-btn" onclick="copyCode(this)">Copy</button>272                    <pre><code class="language-xml">&lt;!-- Das Template wird vom HTML-Agenten mit Daten befüllt --&gt;273&lt;div class="recipe-card"&gt;274    &lt;h1&gt;{{ recipe_title }}&lt;/h1&gt;275    276    &lt;!-- Base64 Einbettung erspart externe Bild-Hostings --&gt;277    &lt;img src="data:image/png;base64,{{ image_base64 }}" alt="{{ recipe_title }}"&gt;278    279    &lt;div class="meta"&gt;280        &lt;span&gt;Schwierigkeit: {{ difficulty }}&lt;/span&gt;281    &lt;/div&gt;282    283    &lt;h3&gt;Zutaten&lt;/h3&gt;284    &lt;ul&gt;285        {% for ingredient in ingredients %}286            &lt;li&gt;{{ ingredient.amount }} {{ ingredient.unit }} {{ ingredient.name}}&lt;/li&gt;287        {% endfor %}288    &lt;/ul&gt;289    290    &lt;h3&gt;Zubereitung&lt;/h3&gt;291    &lt;ol&gt;292        {% for step in instructions %}293            &lt;li&gt;{{ step }}&lt;/li&gt;294        {% endfor %}295    &lt;/ol&gt;296&lt;/div&gt;</code></pre>297                </div>298            </section>299 300            <section id="orchestration">301                <h2><span>🚦</span> 7. Orchestrierung & Fehlerbehandlung</h2>302                <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>303                304                <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>305 306                <div class="code-wrapper">307                    <div class="file-label">tools/agent_tools.py</div>308                    <button class="copy-btn" onclick="copyCode(this)">Copy</button>309                    <pre><code class="language-python">from haystack.tools import Tool310from haystack.components.routers import ConditionalRouter311from agents.researcher import build_research_pipeline312 313# Pipeline laden314research_pipe = build_research_pipeline()315 316# Pipeline als aufrufbares Werkzeug für das LLM verpacken317research_tool = Tool(318    name="research_tool",319    description="Durchsucht das Web nach authentischen Rezepten.",320    parameters={"query": {"type": "string"}},321    function=research_pipe.run322)323 324# Fehlerbehandlung: Ein Router, der den Pfad basierend auf Tool-Erfolg wählt325routes = [326    {327        "condition": "{{ 'error' in tool_result.text | lower }}",328        "output": "{{ tool_result }}",329        "output_name": "error_route",330        "output_type": str331    },332    {333        "condition": "{{ 'error' not in tool_result.text | lower }}",334        "output": "{{ tool_result }}",335        "output_name": "success_route",336        "output_type": str337    }338]339router = ConditionalRouter(routes)</code></pre>340                </div>341            </section>342 343            <!-- KAPITEL 8: REPOSITORY UND CODE -->344            <section id="repo">345                <h2><span>📁</span> 8. Repository-Struktur: Der Master-Plan</h2>346                <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>347                348                <p>Dank der modularen Architektur von Haystack 2.0 spiegelt sich die fachliche Trennung direkt im Repository wider:</p>349                350                <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">351infinite-cookbook/<br>352├── <span class="font-bold text-gray-900">schemas/</span><br>353│   └── <span class="text-blue-600">recipe.py</span> <span class="text-gray-400 italic"># (Kapitel 4) Pydantic Modelle</span><br>354├── <span class="font-bold text-gray-900">components/</span><br>355│   └── <span class="text-blue-600">image_generator.py</span> <span class="text-gray-400 italic"># (Kapitel 5) Custom @component</span><br>356├── <span class="font-bold text-gray-900">templates/</span><br>357│   └── <span class="text-blue-600">recipe_card.html</span> <span class="text-gray-400 italic"># (Kapitel 6) Jinja2 Template</span><br>358├── <span class="font-bold text-gray-900">agents/</span><br>359│   ├── <span class="text-blue-600">researcher.py</span> <span class="text-gray-400 italic"># (Kapitel 3) Web-Search Pipeline</span><br>360│   └── <span class="text-gray-500">structurer.py ...</span><br>361├── <span class="font-bold text-gray-900">tools/</span><br>362│   └── <span class="text-blue-600">agent_tools.py</span> <span class="text-gray-400 italic"># (Kapitel 7) Pipeline -> Tool Wrapper</span><br>363└── <span class="text-blue-600 font-bold">main.py</span> <span class="text-gray-400 italic"># Orchestrierungs-Loop (siehe unten)</span>364                </div>365 366                <h3>Das Herzstück: <code>main.py</code></h3>367                <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>368                369                <div class="code-wrapper mt-4">370                    <div class="file-label">main.py</div>371                    <button class="copy-btn" onclick="copyCode(this)">Copy</button>372                    <pre><code class="language-python">import os373from haystack import Pipeline374from haystack.components.generators.chat import HuggingFaceAPIChatGenerator375from haystack.components.tools import ToolInvoker376from haystack.dataclasses import ChatMessage377 378# Der saubere Import aus unserer Architektur (Kapitel 7)379from tools.agent_tools import cookbook_tools380 381def main():382    # 1. Der Koordinator: Ein starkes Modell (z.B. Qwen), das Tool-Calling beherrscht383    llm = HuggingFaceAPIChatGenerator(384        api_type="serverless_inference_api",385        model="Qwen/Qwen2.5-72B-Instruct",386        tools=cookbook_tools387    )388    389    # 2. Der Invoker: Führt die vom LLM gewählten Tools aus390    invoker = ToolInvoker(tools=cookbook_tools)391 392    # 3. Der Orchestrierungs-Graph aufbauen393    coordinator = Pipeline()394    coordinator.add_component("llm", llm)395    coordinator.add_component("invoker", invoker)396    397    # Zyklische Verbindung für iteratives Arbeiten398    coordinator.connect("llm.replies", "invoker.messages")399    coordinator.connect("invoker.tool_messages", "llm.messages")400 401    # 4. System Start402    user_prompt = "Erstelle ein Rezept für ein thailändisches grünes Curry samt HTML und Bild."403    messages = [ChatMessage.from_user(user_prompt)]404    405    print(f"🤖 Koordinator startet Aufgabe: {user_prompt}")406    407    # Run Loop408    result = coordinator.run({"llm": {"messages": messages}})409    410    print("Fertiges Ergebnis:", result["llm"]["replies"][0].text)411 412if __name__ == "__main__":413    main()</code></pre>414                </div>415                416                <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">417                    <span class="text-2xl mt-1">💡</span>418                    <div>419                        <strong class="text-gray-900 block mb-1">Die Architektur-Philosophie:</strong> 420                        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!421                    </div>422                </div>423            </section>424 425            <!-- NEUES GRAND FINALE (KERNPRINZIP MAS & KÜCHENMETAPHER) -->426            <section id="outlook" class="mt-20 pt-8 border-t border-gray-200">427                <div class="bg-gray-900 text-white rounded-3xl p-8 md:p-12 shadow-2xl relative overflow-hidden">428                    <!-- Dekoration -->429                    <div class="absolute -top-24 -right-24 w-64 h-64 bg-hfYellow rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div>430                    <div class="absolute -bottom-24 -left-24 w-64 h-64 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div>431                    432                    <div class="relative z-10">433                        <div class="flex items-center gap-3 mb-6">434                            <span class="text-3xl">👨‍🍳</span>435                            <h2 class="text-3xl font-bold m-0 border-none !text-white">Fazit: Die KI-Küchenbrigade</h2>436                        </div>437                        438                        <p class="text-gray-300 text-lg leading-relaxed max-w-2xl mb-6">439                            Man sagt oft: <em>»Viele Köche verderben den Brei.«</em> In der Welt der Künstlichen Intelligenz gilt jedoch genau das Gegenteil – vorausgesetzt, man hat die richtige Architektur.440                        </p>441 442                        <p class="text-gray-300 text-lg leading-relaxed max-w-2xl mb-8">443                            Das "Infinite Cookbook" illustriert das <strong>Grundprinzip eines Multi-Agenten-Systems (MAS)</strong> perfekt. Anstatt ein einziges, riesiges "Gott-Modell" mit einem gigantischen Prompt zu überlasten (und zu hoffen, dass es gleichzeitig fehlerfrei recherchiert, programmiert, layoutet und malt), etablieren wir eine hochspezialisierte, arbeitsteilige Küchenbrigade:444                        </p>445                        446                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-10">447                            <div class="bg-white/5 border border-white/10 rounded-xl p-5 hover:bg-white/10 transition">448                                <h3 class="!text-white text-base font-semibold mt-0 mb-2 flex items-center gap-2">449                                    <span>👔</span> Der Küchenchef (Koordinator)450                                </h3>451                                <p class="text-gray-400 text-sm m-0">452                                    Er kocht nicht selbst. Er nimmt die Bestellung des Gastes entgegen, plant die Schritte und delegiert die Aufgaben an sein Team (Tool Calling).453                                </p>454                            </div>455                            <div class="bg-white/5 border border-white/10 rounded-xl p-5 hover:bg-white/10 transition">456                                <h3 class="!text-white text-base font-semibold mt-0 mb-2 flex items-center gap-2">457                                    <span>🛒</span> Der Einkäufer (Forschung)458                                </h3>459                                <p class="text-gray-400 text-sm m-0">460                                    Er weiß, auf welchen Märkten (Web) es die besten und authentischsten Zutaten (Daten) gibt. Er sortiert den Müll aus und bringt nur das Beste in die Küche.461                                </p>462                            </div>463                            <div class="bg-white/5 border border-white/10 rounded-xl p-5 hover:bg-white/10 transition">464                                <h3 class="!text-white text-base font-semibold mt-0 mb-2 flex items-center gap-2">465                                    <span>🔪</span> Der Postenchef (Struktur)466                                </h3>467                                <p class="text-gray-400 text-sm m-0">468                                    Er ist besessen von Präzision. Er nimmt die losen Zutaten und formatiert sie exakt nach der strikten Pydantic-Rezeptvorlage. Keine Halluzinationen, nur Fakten.469                                </p>470                            </div>471                            <div class="bg-white/5 border border-white/10 rounded-xl p-5 hover:bg-white/10 transition">472                                <h3 class="!text-white text-base font-semibold mt-0 mb-2 flex items-center gap-2">473                                    <span>📸</span> Der Food-Stylist (Visionär)474                                </h3>475                                <p class="text-gray-400 text-sm m-0">476                                    Er interessiert sich nicht für Grammatik oder HTML. Er malt mit Diffusionsmodellen atemberaubende Bilder, die das Gericht perfekt in Szene setzen.477                                </p>478                            </div>479                        </div>480 481                        <p class="text-gray-300 text-lg leading-relaxed max-w-2xl mb-8 font-medium border-l-4 border-hfYellow pl-4">482                            Die wahre Stärke eines MAS ist die <strong>Isolation von Komplexität</strong>. Wenn das HTML bricht, reparieren wir den Meta-Agenten. Wenn wir ein besseres Open-Source-Modell für JSON finden, tauschen wir den Postenchef aus, ohne dass der Rest der Küche stehenbleibt. <span class="text-hfYellow">Haystack 2.0 liefert uns dafür die Küche – und die Infrastruktur von Hugging Face das Personal.</span>483                        </p>484 485                        <div class="flex flex-wrap items-center gap-4">486                            <a href="https://haystack.deepset.ai/" target="_blank" class="px-6 py-3 bg-hfYellow text-gray-900 font-bold rounded-lg hover:bg-hfYellow-hover transition-colors flex items-center gap-2 no-underline">487                                Erforsche Haystack 2.0488                                <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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>489                            </a>490                            <a href="https://huggingface.co/models" target="_blank" class="px-6 py-3 bg-gray-800 text-white border border-gray-700 font-semibold rounded-lg hover:bg-gray-700 transition-colors flex items-center gap-2 no-underline">491                                🤗 HF Modelle entdecken492                            </a>493                        </div>494                    </div>495                </div>496            </section>497            498            <!-- ÜBERARBEITETER FOOTER -->499            <footer class="mt-16 py-8 border-t border-gray-200 flex flex-col md:flex-row items-center justify-between gap-6">500                <div class="flex items-center gap-3">501                    <span class="text-2xl opacity-80">🤗</span>502                    <p class="text-sm text-gray-500 m-0 leading-tight">503                        <strong>The Infinite Cookbook Konzept</strong><br>504                        Ein Architektur-Beispiel für Multi-Agenten-Systeme.505                    </p>506                </div>507                508                <div class="flex items-center gap-6 text-sm font-medium text-gray-500">509                    <a href="#" class="hover:text-gray-900 transition-colors no-underline">Source PDF</a>510                    <a href="https://github.com/deepset-ai/haystack" target="_blank" class="hover:text-gray-900 transition-colors no-underline">Haystack GitHub</a>511                    <a href="https://huggingface.co/docs/inference-providers/index" target="_blank" class="hover:text-gray-900 transition-colors no-underline">Inference Docs</a>512                </div>513            </footer>514        </div>515    </main>516 517    <script>518        // Syntax Highlighting initialisieren519        document.addEventListener('DOMContentLoaded', (event) => {520            hljs.highlightAll();521        });522 523        // Mobile Menu Toggle524        const btn = document.getElementById('mobile-menu-btn');525        const sidebar = document.getElementById('sidebar');526 527        btn.addEventListener('click', () => {528            sidebar.classList.toggle('hidden');529        });530 531        // Smooth scroll adjustment for fixed header532        document.querySelectorAll('a[href^="#"]').forEach(anchor => {533            anchor.addEventListener('click', function (e) {534                e.preventDefault();535                if(window.innerWidth < 768) {536                    sidebar.classList.add('hidden');537                }538                539                // Active State Styling Update540                document.querySelectorAll('#sidebar a').forEach(a => {541                    a.classList.remove('bg-hfYellow/20', 'text-yellow-800', 'font-semibold', 'bg-gray-900', 'text-white', 'hover:bg-gray-800');542                    if (a.getAttribute('href') === '#outlook') {543                         a.classList.add('bg-gray-900', 'text-white', 'hover:bg-gray-800');544                    } else {545                         a.classList.add('text-gray-600');546                    }547                });548                549                if(this.getAttribute('href') !== '#outlook' && this.getAttribute('href') !== '#repo') {550                   this.classList.remove('text-gray-600');551                   this.classList.add('bg-hfYellow/20', 'text-yellow-800', 'font-semibold');552                } else if (this.getAttribute('href') === '#repo') {553                   this.classList.remove('text-gray-600');554                   this.classList.add('bg-hfYellow/20', 'text-yellow-900', 'font-semibold');555                }556 557                document.querySelector(this.getAttribute('href')).scrollIntoView({558                    behavior: 'smooth'559                });560            });561        });562 563        // Copy to clipboard function564        function copyCode(button) {565            const codeBlock = button.nextElementSibling.querySelector('code');566            const textToCopy = codeBlock.innerText;567            568            const textArea = document.createElement("textarea");569            textArea.value = textToCopy;570            document.body.appendChild(textArea);571            textArea.select();572            573            try {574                document.execCommand('copy');575                const originalText = button.innerText;576                button.innerText = 'Copied!';577                button.classList.add('bg-green-600', 'text-white', 'border-green-600');578                579                setTimeout(() => {580                    button.innerText = originalText;581                    button.classList.remove('bg-green-600', 'text-white', 'border-green-600');582                }, 2000);583            } catch (err) {584                console.error('Kopieren fehlgeschlagen', err);585            }586            587            document.body.removeChild(textArea);588        }589    </script>590</body>591</html>