| <!DOCTYPE html> |
| <html lang="de"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>HF Spaces — Demo Hub</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> |
| <style> |
| *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } |
| |
| :root { |
| --bg: #fbfbfd; |
| --surface: #ffffff; |
| --text: #1d1d1f; |
| --text-secondary: #6e6e73; |
| --text-tertiary: #86868b; |
| --border: #e8e8ed; |
| --border-hover: #d2d2d7; |
| --accent-agents: #0071e3; |
| --accent-agents-bg: #e8f2fe; |
| --accent-tools: #30d158; |
| --accent-tools-bg: #e5f8eb; |
| --accent-fun: #ff6482; |
| --accent-fun-bg: #ffeaee; |
| --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04); |
| --card-shadow-hover: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08); |
| --radius: 16px; |
| --radius-sm: 12px; |
| } |
| |
| html { scroll-behavior: smooth; } |
| |
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif; |
| background: var(--bg); |
| color: var(--text); |
| line-height: 1.5; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
| |
| |
| nav { |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| background: rgba(251, 251, 253, 0.72); |
| backdrop-filter: saturate(180%) blur(20px); |
| -webkit-backdrop-filter: saturate(180%) blur(20px); |
| border-bottom: 0.5px solid var(--border); |
| } |
| |
| .nav-inner { |
| max-width: 1080px; |
| margin: 0 auto; |
| padding: 0 2rem; |
| height: 52px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
| |
| .nav-brand { |
| font-weight: 700; |
| font-size: 1.05rem; |
| color: var(--text); |
| letter-spacing: -0.02em; |
| } |
| |
| .nav-links { |
| display: flex; |
| gap: 2rem; |
| list-style: none; |
| } |
| |
| .nav-links a { |
| text-decoration: none; |
| color: var(--text-secondary); |
| font-size: 0.82rem; |
| font-weight: 500; |
| transition: color 0.2s; |
| } |
| |
| .nav-links a:hover { color: var(--text); } |
| |
| |
| .hero { |
| max-width: 1080px; |
| margin: 0 auto; |
| padding: 6rem 2rem 4rem; |
| text-align: center; |
| } |
| |
| .hero-eyebrow { |
| font-size: 0.82rem; |
| font-weight: 600; |
| color: var(--accent-agents); |
| letter-spacing: 0.02em; |
| margin-bottom: 0.75rem; |
| } |
| |
| .hero h1 { |
| font-size: clamp(2.4rem, 5vw, 3.5rem); |
| font-weight: 800; |
| letter-spacing: -0.035em; |
| line-height: 1.1; |
| color: var(--text); |
| margin-bottom: 1rem; |
| } |
| |
| .hero p { |
| font-size: 1.15rem; |
| color: var(--text-secondary); |
| max-width: 560px; |
| margin: 0 auto; |
| font-weight: 400; |
| line-height: 1.6; |
| } |
| |
| |
| .section { |
| max-width: 1080px; |
| margin: 0 auto; |
| padding: 3rem 2rem 4rem; |
| } |
| |
| .section-header { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| margin-bottom: 2rem; |
| } |
| |
| .section-icon { |
| width: 36px; |
| height: 36px; |
| border-radius: 10px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.1rem; |
| } |
| |
| .section-icon.agents { background: var(--accent-agents-bg); } |
| .section-icon.tools { background: var(--accent-tools-bg); } |
| .section-icon.fun { background: var(--accent-fun-bg); } |
| |
| .section-title { |
| font-size: 1.5rem; |
| font-weight: 700; |
| letter-spacing: -0.025em; |
| } |
| |
| .section-subtitle { |
| font-size: 0.88rem; |
| color: var(--text-tertiary); |
| font-weight: 400; |
| margin-left: auto; |
| } |
| |
| |
| .card-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); |
| gap: 1.25rem; |
| } |
| |
| |
| .card { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 1.75rem; |
| text-decoration: none; |
| color: inherit; |
| display: flex; |
| flex-direction: column; |
| gap: 0.75rem; |
| transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .card:hover { |
| box-shadow: var(--card-shadow-hover); |
| border-color: var(--border-hover); |
| transform: translateY(-2px); |
| } |
| |
| .card-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.35rem; |
| font-size: 0.7rem; |
| font-weight: 600; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| padding: 0.3rem 0.65rem; |
| border-radius: 6px; |
| width: fit-content; |
| } |
| |
| .card-badge.static { |
| background: #f0f0f5; |
| color: var(--text-tertiary); |
| } |
| |
| .card-badge.gradio { |
| background: #fff5e6; |
| color: #e68a00; |
| } |
| |
| .card-title { |
| font-size: 1.2rem; |
| font-weight: 700; |
| letter-spacing: -0.02em; |
| line-height: 1.3; |
| } |
| |
| .card-desc { |
| font-size: 0.88rem; |
| color: var(--text-secondary); |
| line-height: 1.6; |
| flex: 1; |
| } |
| |
| .card-tags { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.4rem; |
| margin-top: 0.25rem; |
| } |
| |
| .tag { |
| font-size: 0.72rem; |
| font-weight: 500; |
| padding: 0.2rem 0.55rem; |
| border-radius: 6px; |
| background: #f5f5f7; |
| color: var(--text-tertiary); |
| } |
| |
| .card-footer { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-top: 0.5rem; |
| padding-top: 0.75rem; |
| border-top: 1px solid var(--border); |
| } |
| |
| .card-model { |
| font-size: 0.75rem; |
| color: var(--text-tertiary); |
| font-weight: 500; |
| } |
| |
| .card-arrow { |
| width: 28px; |
| height: 28px; |
| border-radius: 50%; |
| background: #f5f5f7; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: background 0.2s, transform 0.2s; |
| } |
| |
| .card:hover .card-arrow { |
| background: var(--text); |
| transform: translateX(2px); |
| } |
| |
| .card:hover .card-arrow svg { |
| stroke: white; |
| } |
| |
| .card-arrow svg { |
| width: 14px; |
| height: 14px; |
| stroke: var(--text-secondary); |
| stroke-width: 2; |
| fill: none; |
| } |
| |
| |
| .divider { |
| max-width: 1080px; |
| margin: 0 auto; |
| padding: 0 2rem; |
| } |
| |
| .divider hr { |
| border: none; |
| border-top: 1px solid var(--border); |
| } |
| |
| |
| footer { |
| max-width: 1080px; |
| margin: 0 auto; |
| padding: 2.5rem 2rem 3rem; |
| text-align: center; |
| } |
| |
| footer p { |
| font-size: 0.78rem; |
| color: var(--text-tertiary); |
| } |
| |
| footer a { |
| color: var(--accent-agents); |
| text-decoration: none; |
| } |
| |
| footer a:hover { |
| text-decoration: underline; |
| } |
| |
| |
| @media (max-width: 640px) { |
| .nav-links { display: none; } |
| .hero { padding: 4rem 1.5rem 3rem; } |
| .section { padding: 2rem 1.5rem 3rem; } |
| .card-grid { grid-template-columns: 1fr; } |
| .section-subtitle { display: none; } |
| } |
| |
| |
| .card { |
| opacity: 0; |
| transform: translateY(16px); |
| animation: fade-up 0.5s ease forwards; |
| } |
| |
| .card:nth-child(1) { animation-delay: 0.05s; } |
| .card:nth-child(2) { animation-delay: 0.1s; } |
| .card:nth-child(3) { animation-delay: 0.15s; } |
| |
| @keyframes fade-up { |
| to { opacity: 1; transform: translateY(0); } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <nav> |
| <div class="nav-inner"> |
| <div class="nav-brand">HF Spaces</div> |
| <ul class="nav-links"> |
| <li><a href="#agents">Agentic AI</a></li> |
| <li><a href="#tools">Tools & Productivity</a></li> |
| <li><a href="#fun">Fun & Creative</a></li> |
| </ul> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero"> |
| <div class="hero-eyebrow">Hugging Face Spaces</div> |
| <h1>Demo Hub</h1> |
| <p>Eine kuratierte Sammlung interaktiver GenAI-Demos — von Multi-Agent-Systemen über Productivity-Tools bis hin zu kreativen Experimenten.</p> |
| </section> |
|
|
| <div class="divider"><hr></div> |
|
|
| |
| <section class="section" id="agents"> |
| <div class="section-header"> |
| <div class="section-icon agents">🤖</div> |
| <h2 class="section-title">Agentic AI & Multi-Agent Systems</h2> |
| <span class="section-subtitle">3 Demos</span> |
| </div> |
| <div class="card-grid"> |
|
|
| |
| <a class="card" href="https://aidn-haystack-mas.static.hf.space" target="_blank" rel="noopener"> |
| <span class="card-badge static">Static Space</span> |
| <h3 class="card-title">Haystack MAS</h3> |
| <p class="card-desc">Konzeptdemonstration eines Multi-Agent-Systems mit Haystack 2.0 — inklusive Architektur-Walkthrough und Code-Beispielen.</p> |
| <div class="card-tags"> |
| <span class="tag">Haystack 2.0</span> |
| <span class="tag">Multi-Agent</span> |
| <span class="tag">RAG</span> |
| </div> |
| <div class="card-footer"> |
| <span class="card-model">Haystack · Konzept</span> |
| <div class="card-arrow"><svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div> |
| </div> |
| </a> |
|
|
| |
| <a class="card" href="https://aidn-supplychain-showcase.static.hf.space" target="_blank" rel="noopener"> |
| <span class="card-badge static">Static Space</span> |
| <h3 class="card-title">Supply Chain Showcase</h3> |
| <p class="card-desc">Agentic Supply Chain Showcase — interaktive Visualisierung einer KI-gestützten Lieferketten-Optimierung mit Multi-Agent-Architektur.</p> |
| <div class="card-tags"> |
| <span class="tag">Supply Chain</span> |
| <span class="tag">Databricks</span> |
| <span class="tag">Agents</span> |
| </div> |
| <div class="card-footer"> |
| <span class="card-model">valantic · Databricks</span> |
| <div class="card-arrow"><svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div> |
| </div> |
| </a> |
|
|
| |
| <a class="card" href="https://aidn-smartsupplycockpit.static.hf.space" target="_blank" rel="noopener"> |
| <span class="card-badge static">Static Space</span> |
| <h3 class="card-title">Procurement Showcase</h3> |
| <p class="card-desc">Agentic APS & Procurement Showcase — intelligentes Beschaffungscockpit mit KI-Agenten für Bedarfsplanung und Einkaufsoptimierung.</p> |
| <div class="card-tags"> |
| <span class="tag">Procurement</span> |
| <span class="tag">APS</span> |
| <span class="tag">Databricks</span> |
| </div> |
| <div class="card-footer"> |
| <span class="card-model">valantic · Databricks</span> |
| <div class="card-arrow"><svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div> |
| </div> |
| </a> |
|
|
| </div> |
| </section> |
|
|
| <div class="divider"><hr></div> |
|
|
| |
| <section class="section" id="tools"> |
| <div class="section-header"> |
| <div class="section-icon tools">⚡</div> |
| <h2 class="section-title">Tools & Productivity</h2> |
| <span class="section-subtitle">3 Demos</span> |
| </div> |
| <div class="card-grid"> |
|
|
| |
| <a class="card" href="https://aidn-promptplenum42.hf.space" target="_blank" rel="noopener"> |
| <span class="card-badge gradio">Gradio App</span> |
| <h3 class="card-title">PromptPlenum42</h3> |
| <p class="card-desc">Multi-Experten Prompt-Refinement — drei KI-Perspektiven debattieren und verfeinern iterativ dein Ergebnis für Code, Text oder Strategie.</p> |
| <div class="card-tags"> |
| <span class="tag">Multi-Expert</span> |
| <span class="tag">Prompt Engineering</span> |
| <span class="tag">Llama 4</span> |
| </div> |
| <div class="card-footer"> |
| <span class="card-model">Llama 4 Maverick</span> |
| <div class="card-arrow"><svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div> |
| </div> |
| </a> |
|
|
| |
| <a class="card" href="https://aidn-linkedintranslator.hf.space" target="_blank" rel="noopener"> |
| <span class="card-badge gradio">Gradio App</span> |
| <h3 class="card-title">LinkedIn Translator</h3> |
| <p class="card-desc">Verwandelt banale Eingaben in absurd überzogene LinkedIn-Posts — oder dampft aufgeblasene Posts auf ihren Kern ein. Mit Leaderboard.</p> |
| <div class="card-tags"> |
| <span class="tag">LinkedIn</span> |
| <span class="tag">Satire</span> |
| <span class="tag">Llama 4</span> |
| </div> |
| <div class="card-footer"> |
| <span class="card-model">Llama 4 Maverick</span> |
| <div class="card-arrow"><svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div> |
| </div> |
| </a> |
|
|
| |
| <a class="card" href="https://aidn-llmops-spotlight.static.hf.space" target="_blank" rel="noopener"> |
| <span class="card-badge static">Static Space</span> |
| <h3 class="card-title">LLMOps Spotlight</h3> |
| <p class="card-desc">Hands-on MLflow Demonstrations — vom einfachen Logging über Kosten-Tracking bis hin zu fortgeschrittenen LLMOps-Patterns.</p> |
| <div class="card-tags"> |
| <span class="tag">MLflow</span> |
| <span class="tag">LLMOps</span> |
| <span class="tag">Observability</span> |
| </div> |
| <div class="card-footer"> |
| <span class="card-model">valantic · MLflow</span> |
| <div class="card-arrow"><svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div> |
| </div> |
| </a> |
|
|
| </div> |
| </section> |
|
|
| <div class="divider"><hr></div> |
|
|
| |
| <section class="section" id="fun"> |
| <div class="section-header"> |
| <div class="section-icon fun">🎨</div> |
| <h2 class="section-title">Fun & Creative</h2> |
| <span class="section-subtitle">2 Demos</span> |
| </div> |
| <div class="card-grid"> |
|
|
| |
| <a class="card" href="https://aidn-caveman.static.hf.space" target="_blank" rel="noopener"> |
| <span class="card-badge static">Static Space</span> |
| <h3 class="card-title">Caveman</h3> |
| <p class="card-desc">Semantische Kompression mit Stil — Gemma 4 antwortet ausschließlich im Höhlenmensch-Deutsch. Maximale Info-Dichte, minimale Grammatik.</p> |
| <div class="card-tags"> |
| <span class="tag">Gemma 4</span> |
| <span class="tag">Compression</span> |
| <span class="tag">Fun</span> |
| </div> |
| <div class="card-footer"> |
| <span class="card-model">Gemma 4 31B</span> |
| <div class="card-arrow"><svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div> |
| </div> |
| </a> |
|
|
| |
| <a class="card" href="https://aidn-gen-z-bre.hf.space" target="_blank" rel="noopener"> |
| <span class="card-badge gradio">Gradio App</span> |
| <h3 class="card-title">Gen-Z Bre</h3> |
| <p class="card-desc">Llama 4 im extremen Gen Z Modus — lowkey delusional, no cap hilfreich. Antworten mit maximalem Rizz und passenden Emojis. ✨</p> |
| <div class="card-tags"> |
| <span class="tag">Llama 4</span> |
| <span class="tag">Gen Z</span> |
| <span class="tag">Chatbot</span> |
| </div> |
| <div class="card-footer"> |
| <span class="card-model">Llama 4 Maverick</span> |
| <div class="card-arrow"><svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div> |
| </div> |
| </a> |
|
|
| </div> |
| </section> |
|
|
| |
| <footer> |
| <p>Hosted on <a href="https://huggingface.co/spaces" target="_blank" rel="noopener">Hugging Face Spaces</a></p> |
| </footer> |
|
|
| </body> |
| </html> |
|
|
