Spaces:

aidn
/

Haystack-MAS

Running

App Files Files Community

aidn commited on 23 days ago

Commit

526c809

verified ·

1 Parent(s): fff9250

Update index.html

Browse files

Files changed (1) hide show

index.html +378 -19

index.html CHANGED Viewed

@@ -1,19 +1,378 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

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