Update index.html

index.html

@@ -107,9 +107,10 @@
             <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-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
+                <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>
+                <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">
+                    <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>
+                    9. Fazit: Die KI-Küchenbrigade
                 </a></li>
             </ul>
         </div>
@@ -341,9 +342,7 @@ router = ConditionalRouter(routes)</code></pre>
 
             <!-- 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>
+                <h2><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>
@@ -395,7 +394,7 @@ def main():
     coordinator.add_component("llm", llm)
     coordinator.add_component("invoker", invoker)
     
-    # Zyklische Verbindung für iteratives Arbeiten (Das LLM evaluiert Tool-Outputs)
+    # Zyklische Verbindung für iteratives Arbeiten
     coordinator.connect("llm.replies", "invoker.messages")
     coordinator.connect("invoker.tool_messages", "llm.messages")
 
@@ -406,8 +405,6 @@ def main():
     print(f"🤖 Koordinator startet Aufgabe: {user_prompt}")
     
     # 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}})
     
     print("Fertiges Ergebnis:", result["llm"]["replies"][0].text)
@@ -417,17 +414,102 @@ if __name__ == "__main__":
                 </div>
                 
                 <div class="mt-8 p-5 bg-blue-50/50 rounded-xl text-sm text-gray-700 border border-blue-100 flex items-start gap-4 shadow-sm">
-                    <span class="text-2xl">💡</span>
+                    <span class="text-2xl mt-1">💡</span>
                     <div>
                         <strong class="text-gray-900 block mb-1">Die Architektur-Philosophie:</strong> 
                         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>
+            </section>
 
+            <!-- NEUES GRAND FINALE (KERNPRINZIP MAS & KÜCHENMETAPHER) -->
+            <section id="outlook" class="mt-20 pt-8 border-t border-gray-200">
+                <div class="bg-gray-900 text-white rounded-3xl p-8 md:p-12 shadow-2xl relative overflow-hidden">
+                    <!-- Dekoration -->
+                    <div class="absolute -top-24 -right-24 w-64 h-64 bg-hfYellow rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div>
+                    <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>
+                    
+                    <div class="relative z-10">
+                        <div class="flex items-center gap-3 mb-6">
+                            <span class="text-3xl">👨‍🍳</span>
+                            <h2 class="text-3xl font-bold m-0 border-none !text-white">Fazit: Die KI-Küchenbrigade</h2>
+                        </div>
+                        
+                        <p class="text-gray-300 text-lg leading-relaxed max-w-2xl mb-6">
+                            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.
+                        </p>
+
+                        <p class="text-gray-300 text-lg leading-relaxed max-w-2xl mb-8">
+                            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:
+                        </p>
+                        
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-10">
+                            <div class="bg-white/5 border border-white/10 rounded-xl p-5 hover:bg-white/10 transition">
+                                <h3 class="!text-white text-base font-semibold mt-0 mb-2 flex items-center gap-2">
+                                    <span>👔</span> Der Küchenchef (Koordinator)
+                                </h3>
+                                <p class="text-gray-400 text-sm m-0">
+                                    Er kocht nicht selbst. Er nimmt die Bestellung des Gastes entgegen, plant die Schritte und delegiert die Aufgaben an sein Team (Tool Calling).
+                                </p>
+                            </div>
+                            <div class="bg-white/5 border border-white/10 rounded-xl p-5 hover:bg-white/10 transition">
+                                <h3 class="!text-white text-base font-semibold mt-0 mb-2 flex items-center gap-2">
+                                    <span>🛒</span> Der Einkäufer (Forschung)
+                                </h3>
+                                <p class="text-gray-400 text-sm m-0">
+                                    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.
+                                </p>
+                            </div>
+                            <div class="bg-white/5 border border-white/10 rounded-xl p-5 hover:bg-white/10 transition">
+                                <h3 class="!text-white text-base font-semibold mt-0 mb-2 flex items-center gap-2">
+                                    <span>🔪</span> Der Postenchef (Struktur)
+                                </h3>
+                                <p class="text-gray-400 text-sm m-0">
+                                    Er ist besessen von Präzision. Er nimmt die losen Zutaten und formatiert sie exakt nach der strikten Pydantic-Rezeptvorlage. Keine Halluzinationen, nur Fakten.
+                                </p>
+                            </div>
+                            <div class="bg-white/5 border border-white/10 rounded-xl p-5 hover:bg-white/10 transition">
+                                <h3 class="!text-white text-base font-semibold mt-0 mb-2 flex items-center gap-2">
+                                    <span>📸</span> Der Food-Stylist (Visionär)
+                                </h3>
+                                <p class="text-gray-400 text-sm m-0">
+                                    Er interessiert sich nicht für Grammatik oder HTML. Er malt mit Diffusionsmodellen atemberaubende Bilder, die das Gericht perfekt in Szene setzen.
+                                </p>
+                            </div>
+                        </div>
+
+                        <p class="text-gray-300 text-lg leading-relaxed max-w-2xl mb-8 font-medium border-l-4 border-hfYellow pl-4">
+                            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>
+                        </p>
+
+                        <div class="flex flex-wrap items-center gap-4">
+                            <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">
+                                Erforsche Haystack 2.0
+                                <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>
+                            </a>
+                            <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">
+                                🤗 HF Modelle entdecken
+                            </a>
+                        </div>
+                    </div>
+                </div>
             </section>
             
-            <footer class="mt-16 pt-8 border-t border-gray-200 text-sm text-gray-400 text-center">
-                <p>Ein konzeptioneller Guide für Multi-Agenten-Systeme.<br>Technologie-Stack: Haystack 2.0 & Hugging Face.</p>
+            <!-- ÜBERARBEITETER FOOTER -->
+            <footer class="mt-16 py-8 border-t border-gray-200 flex flex-col md:flex-row items-center justify-between gap-6">
+                <div class="flex items-center gap-3">
+                    <span class="text-2xl opacity-80">🤗</span>
+                    <p class="text-sm text-gray-500 m-0 leading-tight">
+                        <strong>The Infinite Cookbook Konzept</strong><br>
+                        Ein Architektur-Beispiel für Multi-Agenten-Systeme.
+                    </p>
+                </div>
+                
+                <div class="flex items-center gap-6 text-sm font-medium text-gray-500">
+                    <a href="#" class="hover:text-gray-900 transition-colors no-underline">Source PDF</a>
+                    <a href="https://github.com/deepset-ai/haystack" target="_blank" class="hover:text-gray-900 transition-colors no-underline">Haystack GitHub</a>
+                    <a href="https://huggingface.co/docs/inference-providers/index" target="_blank" class="hover:text-gray-900 transition-colors no-underline">Inference Docs</a>
+                </div>
             </footer>
         </div>
     </main>
@@ -456,13 +538,20 @@ if __name__ == "__main__":
                 
                 // Active State Styling Update
                 document.querySelectorAll('#sidebar a').forEach(a => {
-                    a.classList.remove('bg-hfYellow/20', 'text-yellow-800', 'font-semibold');
-                    a.classList.add('text-gray-600');
+                    a.classList.remove('bg-hfYellow/20', 'text-yellow-800', 'font-semibold', 'bg-gray-900', 'text-white', 'hover:bg-gray-800');
+                    if (a.getAttribute('href') === '#outlook') {
+                         a.classList.add('bg-gray-900', 'text-white', 'hover:bg-gray-800');
+                    } else {
+                         a.classList.add('text-gray-600');
+                    }
                 });
                 
-                if(this.getAttribute('href') !== '#repo') {
+                if(this.getAttribute('href') !== '#outlook' && this.getAttribute('href') !== '#repo') {
                    this.classList.remove('text-gray-600');
                    this.classList.add('bg-hfYellow/20', 'text-yellow-800', 'font-semibold');
+                } else if (this.getAttribute('href') === '#repo') {
+                   this.classList.remove('text-gray-600');
+                   this.classList.add('bg-hfYellow/20', 'text-yellow-900', 'font-semibold');
                 }
 
                 document.querySelector(this.getAttribute('href')).scrollIntoView({