aidn/Haystack-MAS
1
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"><!-- Das Template wird vom HTML-Agenten mit Daten befüllt -->273<div class="recipe-card">274 <h1>{{ recipe_title }}</h1>275 276 <!-- Base64 Einbettung erspart externe Bild-Hostings -->277 <img src="data:image/png;base64,{{ image_base64 }}" alt="{{ recipe_title }}">278 279 <div class="meta">280 <span>Schwierigkeit: {{ difficulty }}</span>281 </div>282 283 <h3>Zutaten</h3>284 <ul>285 {% for ingredient in ingredients %}286 <li>{{ ingredient.amount }} {{ ingredient.unit }} {{ ingredient.name}}</li>287 {% endfor %}288 </ul>289 290 <h3>Zubereitung</h3>291 <ol>292 {% for step in instructions %}293 <li>{{ step }}</li>294 {% endfor %}295 </ol>296</div></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>