Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Prompt Architekt Studio</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| :root { | |
| --primary: #3b82f6; | |
| --primary-dark: #2563eb; | |
| --secondary: #1e293b; | |
| --accent: #06b6d4; | |
| --bg-dark: #0f172a; | |
| --bg-card: #1e293b; | |
| --text-primary: #f1f5f9; | |
| --text-secondary: #94a3b8; | |
| --border: #334155; | |
| } | |
| body { | |
| background: linear-gradient(135deg, var(--bg-dark) 0%, #1a1a2e 50%, var(--bg-dark) 100%); | |
| min-height: 100vh; | |
| } | |
| .glass-card { | |
| background: rgba(30, 41, 59, 0.8); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(51, 65, 85, 0.5); | |
| } | |
| .gradient-border { | |
| position: relative; | |
| background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, | |
| linear-gradient(135deg, var(--primary), var(--accent)) border-box; | |
| border: 2px solid transparent; | |
| } | |
| .input-glow:focus { | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3); | |
| } | |
| .btn-primary:active { | |
| transform: translateY(0); | |
| } | |
| .select-custom { | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 0.75rem center; | |
| background-size: 1.25rem; | |
| } | |
| .char-counter { | |
| transition: color 0.3s ease; | |
| } | |
| .char-counter.warning { | |
| color: #f59e0b; | |
| } | |
| .char-counter.danger { | |
| color: #ef4444; | |
| } | |
| .loading-spinner { | |
| border: 3px solid rgba(59, 130, 246, 0.3); | |
| border-top-color: var(--primary); | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease forwards; | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); } | |
| 50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.5); } | |
| } | |
| .pulse-glow { | |
| animation: pulse-glow 2s ease-in-out infinite; | |
| } | |
| .modal-backdrop { | |
| background: rgba(0, 0, 0, 0.7); | |
| backdrop-filter: blur(5px); | |
| } | |
| .progress-bar { | |
| background: linear-gradient(90deg, var(--primary), var(--accent)); | |
| transition: width 0.5s ease; | |
| } | |
| .output-area { | |
| background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%); | |
| } | |
| .scrollbar-custom::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .scrollbar-custom::-webkit-scrollbar-track { | |
| background: var(--bg-dark); | |
| border-radius: 4px; | |
| } | |
| .scrollbar-custom::-webkit-scrollbar-thumb { | |
| background: var(--border); | |
| border-radius: 4px; | |
| } | |
| .scrollbar-custom::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary); | |
| } | |
| .architect-badge { | |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.2)); | |
| border: 1px solid rgba(59, 130, 246, 0.3); | |
| } | |
| .tooltip { | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: all 0.2s ease; | |
| } | |
| .tooltip-trigger:hover .tooltip { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-slate-100"> | |
| <div id="app"></div> | |
| <script> | |
| // --- ARCHITEKTEN-ANWEISUNGEN (EINGEBETTET) --- | |
| const ARCHITECT_INSTRUCTIONS = { | |
| 'jen': `Sie sind Jen, eine Expertin für KI-Prompt-Optimierung. Ihre Mission ist es, jede Benutzereingabe in präzise gestaltete Prompts umzuwandeln, die das volle Potenzial der KI auf allen wichtigen Plattformen ausschöpfen. | |
| DIE 4-D-METHODE | |
| 1. DEKONSTRUKTION | |
| Identifizieren Sie die Kernabsicht des Nutzers, die wichtigsten Elemente und den Kontext. | |
| Extrahieren Sie Ausgabeziele, Formatanforderungen und Einschränkungen. | |
| Analysieren Sie, was bereitgestellt wird und was fehlt. | |
| 2. DIAGNOSE | |
| Prüfen Sie auf Lücken in Klarheit, Spezifität und Vollständigkeit. | |
| Überprüfen Sie die Struktur und Komplexität der Aufgabe. | |
| Bestimmen Sie die erforderliche Argumentation oder kreative Tiefe. | |
| 3. ENTWICKELN | |
| Wenden Sie Strategien für die Gestaltung von Eingabeaufforderungen je nach Aufgabentyp an: | |
| Kreativ: Mehrdimensionales Denken + Tonverbesserung | |
| Technisch: Präzise Formulierung + einschränkungsbasiertes Format | |
| Lehrreich: Wenige Beispielbeispiele + logische Gliederung | |
| Komplex: Gedankenkette + schrittweises Scaffolding | |
| 4. BEREITSTELLEN | |
| Ausgabe einer vollständig optimierten Eingabeaufforderung | |
| Formatierung basierend auf der Aufgabe Komplexität | |
| Nehmen Sie gegebenenfalls Nutzungshinweise mit auf.`, | |
| 'lyra2': `Du bist Lyra v2, ein revolutionärer KI-Assistent und Meister der kognitiven Architektur. Deine Aufgabe ist es nicht nur, Eingabeaufforderungen zu *optimieren*, sondern sie zu **gestalten**. Du stehst in einem dynamischen Dialog mit Nutzern und wandelst ihre Ideen in präzise entwickelte, leistungsstarke Eingabeaufforderungen um, die das volle Potenzial jeder KI freisetzen. | |
| ## 🌟 Grundprinzipien | |
| 1. **Dialog, kein Monolog:** Sie sind ein kooperativer Partner. | |
| 2. **Architekt, nicht Redakteur:** Sie dekonstruieren Ziele und stellen maßgeschneiderte Prompt-Architekturen zusammen. | |
| 3. **Klarheit durch Design:** Funktionale Emojis und strukturierte Formatierungen. | |
| 4. **Adaptive Intelligenz**: Dynamische Anpassung an Expertise und Komplexität. | |
| 5. **Evolutionäre Denkweise**: Erklären Sie Ihre Methoden. | |
| ## 4-PHASEN-ARCHITEKTURPROZESS | |
| **PHASE 1: STRATEGISCHE DEKONSTRUKTION** | |
| **PHASE 2: DIALOG UND DATENANREICHERUNG** | |
| **PHASE 3: ARCHITEKTUR-ENTWURF** | |
| **PHASE 4: AUSGABE UND ÜBERGABE**`, | |
| 'prompt-engineer': `Sie sind ein Experte für Prompt Engineering und spezialisiert auf die Optimierung, Verfeinerung und Verbesserung von Prompts. | |
| ## ANALYSE-RAHMEN | |
| ### STRUKTURELLE BEWERTUNG | |
| - Bewertung von Klarheit, Spezifität und logischem Ablauf | |
| - Identifizierung mehrdeutiger Anweisungen oder fehlender Kontexte | |
| ### TECHNISCHE OPTIMIERUNG | |
| - Anwendung des RACE-Rahmens (Rolle, Aktion, Kontext, Erwartung) | |
| - Implementierung defensiver Prompting-Strategien | |
| ### VERBESSERUNGSPROTOKOLL | |
| - Einbeziehung fortgeschrittener Techniken (CoT, Few-Shot, Selbstkonsistenz) | |
| - Hinzufügen geeigneter Stützstrukturen und Qualitätskontrollen`, | |
| 'prompt-spezialist': `Sie sind mein Premium-Spezialist für die Verfeinerung von Prompts. | |
| 1. **Rolle**: Erfahrener Prompt-Entwickler und Optimierungsstratege | |
| 2. **Entwicklung der Basis-Prompts**: Überprüfung und Verbesserung | |
| 3. **Feedback einholen**: Stärken/Schwächen analysieren | |
| 4. **Analyse der Ergebnisse**: Ton, Logik, Vollständigkeit prüfen | |
| 5. **Schwachstellen identifizieren**: Konkrete Probleme auflisten | |
| 6. **Überarbeitung der Eingabeaufforderung**: 2-3 Versionen bereitstellen | |
| 7. **Neue Versionen testen**: Simulieren oder Empfehlungen geben | |
| 8. **Kontinuierliche Verbesserung**: Iterative Optimierung | |
| 9. **Finalisierung**: Bereinigung und Formatierung | |
| 10. **Handlungsaufforderung**: Umsetzbare Hinweise`, | |
| 'lyra-modded': `# Sie sind **Lyra**, eine meisterhafte KI-Spezialistin für die Optimierung von Prompts | |
| **Mission:** Jede Benutzereingabe in einen präzise formulierten Prompt umzuwandeln – wahrheitsgetreu, ethisch, genau und effizient. | |
| ## DIE 4-D-METHODIK | |
| ### 1) DEKONSTRUIEREN | |
| ### 2) DIAGNOSTIZIEREN | |
| ### 3) ENTWICKELN | |
| ### 4) BEREITSTELLEN | |
| ## ZUSÄTZLICHE KRITISCHE ANWEISUNGEN | |
| ### Erlaubte Verhaltensweisen | |
| - Aktive Suche nach Einschränkungen | |
| - Frühzeitiges Stellen präziser klärender Fragen | |
| - Erkennen und Kennzeichnen von Mehrdeutigkeit | |
| ### Unerlaubte Verhaltensweisen | |
| - Keine Halluzinationen | |
| - Keine ignorierten Beschränkungen`, | |
| 'meta-prompt-architekt': `Du bist **Der_META-Prompt_Architekt**, die ultimative Prompt-Optimierungs-KI. | |
| ## 💎 KERNEIGENSCHAFTEN | |
| - **Keine Annahmen. Nie.** | |
| - **Validierung ist kein Feature, sondern Grundlage.** | |
| - **Wahrheit > Geschwindigkeit.** | |
| - **Transparenz als Architektur.** | |
| ## 🎚️ OPERATION MODI | |
| | Modus | Anwendungsfall | | |
| |-------|----------------| | |
| | **⚡ SIMPLE** | Einfache Aufgaben | | |
| | **🎯 PRO** | Komplexe Aufgaben | | |
| | **🛡️ CRITICAL** | Hochrisiko-Anwendungen | | |
| ## ⛔ VERHALTENSREGELN | |
| - ❌ Keine Halluzinationen | |
| - ❌ Keine Annahmen | |
| - ❌ Kein Scope-Creep | |
| - ❌ Kein "Blind-Output"` | |
| }; | |
| // --- GLOBALE KONFIGURATIONSDATEN --- | |
| const ARCHITECTS = [ | |
| { id: 'jen', name: 'Jen', icon: 'fa-wand-magic-sparkles', color: '#ec4899', grades: [{ id: 'detail', name: 'Detail' }, { id: 'basic', name: 'Basic' }], dialogRequired: ['detail'] }, | |
| { id: 'lyra2', name: 'Lyra2', icon: 'fa-brain', color: '#8b5cf6', grades: [{ id: 'quick-boost', name: 'Quick Boost' }, { id: 'deep-dive', name: 'Deep Dive' }, { id: 'revolutionary', name: 'Revolutionär' }], dialogRequired: ['quick-boost', 'deep-dive', 'revolutionary'] }, | |
| { id: 'prompt-engineer', name: 'Prompt Engineer', icon: 'fa-code', color: '#06b6d4', grades: [{ id: 'standard', name: 'Standard' }, { id: 'extended', name: 'Erweitert' }, { id: 'expert', name: 'Experte' }], dialogRequired: ['extended', 'expert'] }, | |
| { id: 'prompt-spezialist', name: 'Prompt Spezialist', icon: 'fa-gem', color: '#f59e0b', grades: [{ id: 'fast', name: 'Schnell' }, { id: 'detailed', name: 'Ausführlich' }, { id: 'custom', name: 'Maßgeschneidert' }], dialogRequired: ['detailed', 'custom'] }, | |
| { id: 'lyra-modded', name: 'Lyra Modded', icon: 'fa-shield-halved', color: '#10b981', grades: [{ id: 'light', name: 'Modifiziert Light' }, { id: 'standard', name: 'Modifiziert Standard' }, { id: 'pro', name: 'Modifiziert Pro' }], dialogRequired: ['standard', 'pro'] }, | |
| { id: 'meta-prompt-architekt', name: 'Meta Prompt Architekt', icon: 'fa-crown', color: '#ef4444', grades: [{ id: 'simple', name: '⚡ SIMPLE' }, { id: 'pro', name: '🎯 PRO' }, { id: 'critical', name: '🛡️ CRITICAL' }], dialogRequired: ['pro', 'critical'] }, | |
| ]; | |
| const AI_OPTIONS = [ | |
| { name: "GPT-5", icon: "fa-robot", category: "OpenAI" }, | |
| { name: "GPT-5.1", icon: "fa-robot", category: "OpenAI" }, | |
| { name: "Claude 4.5 Opus", icon: "fa-comment-dots", category: "Anthropic" }, | |
| { name: "Claude 4.5 Sonnet", icon: "fa-comment-dots", category: "Anthropic" }, | |
| { name: "Claude 4.5 Haiku", icon: "fa-comment-dots", category: "Anthropic" }, | |
| { name: "Gemini 3 Pro", icon: "fa-google", category: "Google" }, | |
| { name: "Llama 3", icon: "fa-meta", category: "Meta" }, | |
| { name: "Mistral Large", icon: "fa-wind", category: "Mistral" }, | |
| { name: "Mixtral", icon: "fa-wind", category: "Mistral" }, | |
| { name: "MiniMax2", icon: "fa-microchip", category: "Other" }, | |
| { name: "KimiK2", icon: "fa-microchip", category: "Other" }, | |
| { name: "DeepSeek", icon: "fa-search", category: "Other" }, | |
| { name: "Qwen3", icon: "fa-q", category: "Alibaba" }, | |
| { name: "MANUS", icon: "fa-hand", category: "Agents" }, | |
| { name: "Replit Agent", icon: "fa-terminal", category: "Agents" }, | |
| { name: "Bolt.new", icon: "fa-bolt", category: "Agents" }, | |
| { name: "v0.dev", icon: "fa-v", category: "Agents" }, | |
| { name: "Cursor AI", icon: "fa-i-cursor", category: "Agents" }, | |
| { name: "GitHub Copilot", icon: "fa-github", category: "Agents" }, | |
| { name: "Kiro", icon: "fa-k", category: "Agents" }, | |
| { name: "Perplexity", icon: "fa-magnifying-glass", category: "Search" } | |
| ]; | |
| // Dialog Questions based on architect | |
| const DIALOG_QUESTIONS = { | |
| 'jen': { | |
| 'detail': [ | |
| "Was ist das genaue Ziel Ihres Prompts? (z.B. E-Mail schreiben, Code generieren, Analyse erstellen)", | |
| "Wer ist die Zielgruppe für das Ergebnis?", | |
| "Gibt es spezifische Formatanforderungen? (Länge, Struktur, Stil)", | |
| "Welche Einschränkungen oder Grenzen müssen beachtet werden?", | |
| "Haben Sie Beispiele für das gewünschte Ergebnis?" | |
| ] | |
| }, | |
| 'lyra2': { | |
| 'quick-boost': [ | |
| "Was ist Ihr primäres Ziel mit diesem Prompt?", | |
| "Welches Format erwarten Sie für die Ausgabe?", | |
| "Gibt es kritische Einschränkungen?" | |
| ], | |
| 'deep-dive': [ | |
| "🎯 Was ist das exakte gewünschte Ergebnis? (Format, Umfang, Metriken)", | |
| "🎭 Welche Rolle soll die KI einnehmen? Welcher Kontext ist unerlässlich?", | |
| "🚧 Welche Grenzen, Regeln oder ethischen Vorgaben müssen eingehalten werden?", | |
| "⚙️ Welche spezifischen Technologien oder Frameworks sind relevant?", | |
| "Gibt es Beispiele oder Referenzen, die ich kennen sollte?" | |
| ], | |
| 'revolutionary': [ | |
| "🎯 Beschreiben Sie das exakte Endergebnis mit messbaren Kriterien", | |
| "🎭 Definieren Sie die ideale KI-Persona (Expertise, Ton, Grenzen)", | |
| "🚧 Listen Sie alle harten Einschränkungen und Compliance-Anforderungen auf", | |
| "⚙️ Welcher Technologie-Stack und welche Datenformate sind involviert?", | |
| "Wie soll die Validierung des Ergebnisses erfolgen?", | |
| "Welche Randfälle müssen berücksichtigt werden?" | |
| ] | |
| }, | |
| 'prompt-engineer': { | |
| 'extended': [ | |
| "Was ist die genaue Zielgruppe und der Zweck des Ergebnisses?", | |
| "Welches Ausgabeformat wird benötigt? (JSON, Markdown, Code)", | |
| "Gibt es spezifische Einschränkungen? (Token-Limit, Markenstimme)", | |
| "Welche Qualitätskriterien sind entscheidend?" | |
| ], | |
| 'expert': [ | |
| "Definieren Sie die exakte Zielgruppe und den Anwendungskontext", | |
| "Welches Ausgabeformat und Schema wird benötigt?", | |
| "Listen Sie alle Einschränkungen auf (Token, Ethik, Marke, Recht)", | |
| "Welche Validierungskriterien müssen erfüllt werden?", | |
| "Wie soll das Ergebnis getestet und verifiziert werden?" | |
| ] | |
| }, | |
| 'prompt-spezialist': { | |
| 'detailed': [ | |
| "Was ist das Hauptziel Ihres Prompts?", | |
| "Welche Probleme hatten Sie mit früheren Versionen?", | |
| "Welchen Ton und Stil erwarten Sie?", | |
| "Gibt es spezifische Elemente, die enthalten sein müssen?" | |
| ], | |
| 'custom': [ | |
| "Beschreiben Sie Ihr Ziel im Detail", | |
| "Welche früheren Ergebnisse waren unbefriedigend und warum?", | |
| "Welchen exakten Ton, Stil und Struktur erwarten Sie?", | |
| "Welche Elemente sind unverzichtbar?", | |
| "Wie werden Sie den Erfolg messen?" | |
| ] | |
| }, | |
| 'lyra-modded': { | |
| 'standard': [ | |
| "Was ist die Kernabsicht Ihres Prompts?", | |
| "Welche Einschränkungen müssen strikt eingehalten werden?", | |
| "Welches Ausgabeformat wird benötigt?", | |
| "Gibt es Risiken oder Randfälle zu beachten?" | |
| ], | |
| 'pro': [ | |
| "Extrahieren Sie die Kernabsicht und alle Schlüsselentitäten", | |
| "Welche harten Einschränkungen und Leitplanken gelten?", | |
| "Definieren Sie das exakte Ausgabeformat und die Struktur", | |
| "Welche Risiken und Randfälle müssen adressiert werden?", | |
| "Wie erfolgt die Validierung und Verifizierung?" | |
| ] | |
| }, | |
| 'meta-prompt-architekt': { | |
| 'pro': [ | |
| "🤖 Welche spezifischen Fähigkeiten der Ziel-KI sollen genutzt werden?", | |
| "🎯 Was ist das exakte, messbare Ergebnis?", | |
| "🚧 Welche Einschränkungen und Compliance-Anforderungen gelten?", | |
| "📋 Welche Validierungskriterien müssen erfüllt werden?", | |
| "⚠️ Welche Risiken müssen mitigiert werden?" | |
| ], | |
| 'critical': [ | |
| "🤖 Definieren Sie die exakten Fähigkeiten und Grenzen der Ziel-KI", | |
| "🎯 Beschreiben Sie das Ergebnis mit präzisen Akzeptanzkriterien", | |
| "🚧 Listen Sie alle Compliance-, Ethik- und Sicherheitsanforderungen auf", | |
| "📋 Welche Validierungs- und Testprotokolle sind erforderlich?", | |
| "⚠️ Identifizieren Sie alle Risiken und deren Mitigationsstrategien", | |
| "🔄 Wie soll die kontinuierliche Qualitätssicherung erfolgen?" | |
| ] | |
| } | |
| }; | |
| // State Management | |
| let state = { | |
| selectedAI: '', | |
| selectedArchitect: null, | |
| selectedGrade: null, | |
| inputPrompt: '', | |
| outputPrompt: '', | |
| isLoading: false, | |
| showDialog: false, | |
| dialogStep: 0, | |
| dialogAnswers: [], | |
| dialogQuestions: [], | |
| copied: false, | |
| error: '' | |
| }; | |
| function setState(newState) { | |
| state = { ...state, ...newState }; | |
| render(); | |
| } | |
| function getCharCountClass(length) { | |
| if (length > 6000) return 'danger'; | |
| if (length > 2000) return 'warning'; | |
| return ''; | |
| } | |
| function generateOptimizedPrompt(originalPrompt, architect, grade, targetAI, dialogAnswers) { | |
| const architectInstructions = ARCHITECT_INSTRUCTIONS[architect.id]; | |
| const aiCategory = AI_OPTIONS.find(ai => ai.name === targetAI)?.category || 'General'; | |
| let contextFromDialog = ''; | |
| if (dialogAnswers.length > 0) { | |
| contextFromDialog = dialogAnswers.map((answer, i) => | |
| `[Kontext ${i + 1}]: ${answer}` | |
| ).join('\n'); | |
| } | |
| const optimizedPrompt = `# Optimierter Prompt | |
| ## Generiert von: ${architect.name} (${grade.name}) | |
| ## Ziel-KI: ${targetAI} (${aiCategory}) | |
| --- | |
| ### 🎯 ROLLENKONTEXT | |
| Du bist ein spezialisierter KI-Assistent, optimiert für ${targetAI}. Deine Aufgabe wurde gemäß den eingebetteten Anweisungen des **${architect.name}**-Architekten im **${grade.name}**-Modus entwickelt. | |
| ### 📋 OPTIMIERTE ANWEISUNG | |
| ${originalPrompt} | |
| ### 🔧 ANGEWANDTE OPTIMIERUNGEN | |
| **Architektur-Framework:** ${architect.name} | |
| **Optimierungsstufe:** ${grade.name} | |
| **Ziel-Plattform:** ${targetAI} | |
| **Angewandte Techniken:** | |
| ${architect.id === 'jen' ? '- 4-D-Methode (Dekonstruktion, Diagnose, Entwicklung, Bereitstellung)' : ''} | |
| ${architect.id === 'lyra2' ? '- 4-Phasen-Architekturprozess\n- Kognitive Flexibilität\n- Strukturierte Formatierung' : ''} | |
| ${architect.id === 'prompt-engineer' ? '- RACE-Framework (Rolle, Aktion, Kontext, Erwartung)\n- Defensive Prompting-Strategien' : ''} | |
| ${architect.id === 'prompt-spezialist' ? '- Iterative Verfeinerung\n- Schwachstellen-Analyse\n- Multi-Version-Ansatz' : ''} | |
| ${architect.id === 'lyra-modded' ? '- Wahrheitsgetreue Optimierung\n- Validierungs-Leitplanken\n- Risiko-Erkennung' : ''} | |
| ${architect.id === 'meta-prompt-architekt' ? '- Systematische Validierung\n- Keine-Annahmen-Prinzip\n- Transparente Dokumentation' : ''} | |
| ${contextFromDialog ? `### 📝 ZUSÄTZLICHER KONTEXT (aus Dialog)\n${contextFromDialog}` : ''} | |
| ### ✅ QUALITÄTSSICHERUNG | |
| - Klarheit: ✓ Optimiert | |
| - Spezifität: ✓ Erhöht | |
| - Struktur: ✓ Verbessert | |
| - Zielausrichtung: ✓ ${targetAI}-kompatibel | |
| --- | |
| *Dieser Prompt wurde mit dem Prompt Architekt Studio optimiert.*`; | |
| return optimizedPrompt; | |
| } | |
| function handleOptimize() { | |
| if (!state.inputPrompt.trim()) { | |
| setState({ error: 'Bitte geben Sie einen Prompt ein.' }); | |
| return; | |
| } | |
| if (state.inputPrompt.length > 8000) { | |
| setState({ error: 'Der Prompt darf maximal 8000 Zeichen haben.' }); | |
| return; | |
| } | |
| if (!state.selectedAI) { | |
| setState({ error: 'Bitte wählen Sie eine Ziel-KI aus.' }); | |
| return; | |
| } | |
| if (!state.selectedArchitect) { | |
| setState({ error: 'Bitte wählen Sie einen Architekten aus.' }); | |
| return; | |
| } | |
| if (!state.selectedGrade) { | |
| setState({ error: 'Bitte wählen Sie einen Optimierungsgrad aus.' }); | |
| return; | |
| } | |
| setState({ error: '' }); | |
| const architect = ARCHITECTS.find(a => a.id === state.selectedArchitect); | |
| const grade = architect.grades.find(g => g.id === state.selectedGrade); | |
| if (architect.dialogRequired.includes(state.selectedGrade)) { | |
| const questions = DIALOG_QUESTIONS[architect.id]?.[state.selectedGrade] || []; | |
| setState({ | |
| showDialog: true, | |
| dialogStep: 0, | |
| dialogAnswers: [], | |
| dialogQuestions: questions | |
| }); | |
| } else { | |
| performOptimization([]); | |
| } | |
| } | |
| function performOptimization(dialogAnswers) { | |
| setState({ isLoading: true, showDialog: false }); | |
| setTimeout(() => { | |
| const architect = ARCHITECTS.find(a => a.id === state.selectedArchitect); | |
| const grade = architect.grades.find(g => g.id === state.selectedGrade); | |
| const optimized = generateOptimizedPrompt( | |
| state.inputPrompt, | |
| architect, | |
| grade, | |
| state.selectedAI, | |
| dialogAnswers | |
| ); | |
| setState({ | |
| outputPrompt: optimized, | |
| isLoading: false | |
| }); | |
| }, 2000); | |
| } | |
| function handleDialogNext(answer) { | |
| const newAnswers = [...state.dialogAnswers, answer]; | |
| if (state.dialogStep < state.dialogQuestions.length - 1) { | |
| setState({ | |
| dialogStep: state.dialogStep + 1, | |
| dialogAnswers: newAnswers | |
| }); | |
| } else { | |
| performOptimization(newAnswers); | |
| } | |
| } | |
| function handleCopy() { | |
| navigator.clipboard.writeText(state.outputPrompt).then(() => { | |
| setState({ copied: true }); | |
| setTimeout(() => setState({ copied: false }), 2000); | |
| }); | |
| } | |
| function render() { | |
| const app = document.getElementById('app'); | |
| const architect = state.selectedArchitect ? ARCHITECTS.find(a => a.id === state.selectedArchitect) : null; | |
| app.innerHTML = ` | |
| <!-- Header --> | |
| <header class="glass-card border-b border-slate-700/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center"> | |
| <i class="fas fa-wand-magic-sparkles text-xl text-white"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-xl sm:text-2xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent"> | |
| Prompt Architekt Studio | |
| </h1> | |
| <p class="text-sm text-slate-400">Professionelle Prompt-Optimierung</p> | |
| </div> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" | |
| target="_blank" | |
| class="text-sm text-slate-400 hover:text-blue-400 transition-colors flex items-center gap-2"> | |
| <span class="hidden sm:inline">Built with</span> | |
| <span class="font-semibold text-blue-400">anycoder</span> | |
| <i class="fas fa-external-link-alt text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="grid lg:grid-cols-2 gap-8"> | |
| <!-- Left Column - Input --> | |
| <div class="space-y-6"> | |
| <!-- Controls --> | |
| <div class="glass-card rounded-2xl p-6 space-y-4"> | |
| <h2 class="text-lg font-semibold flex items-center gap-2"> | |
| <i class="fas fa-sliders text-blue-400"></i> | |
| Konfiguration | |
| </h2> | |
| <!-- AI Selection --> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-300 mb-2"> | |
| <i class="fas fa-robot mr-2 text-cyan-400"></i> | |
| Ziel-KI | |
| </label> | |
| <select | |
| class="select-custom w-full bg-slate-800/50 border border-slate-600 rounded-xl px-4 py-3 text-slate-100 focus:outline-none input-glow appearance-none cursor-pointer" | |
| onchange="setState({ selectedAI: this.value })" | |
| > | |
| <option value="">-- Ziel-KI auswählen --</option> | |
| ${AI_OPTIONS.map(ai => ` | |
| <option value="${ai.name}" ${state.selectedAI === ai.name ? 'selected' : ''}> | |
| ${ai.name} (${ai.category}) | |
| </option> | |
| `).join('')} | |
| </select> | |
| </div> | |
| <!-- Architect Selection --> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-300 mb-2"> | |
| <i class="fas fa-user-astronaut mr-2 text-purple-400"></i> | |
| Architekt | |
| </label> | |
| <select | |
| class="select-custom w-full bg-slate-800/50 border border-slate-600 rounded-xl px-4 py-3 text-slate-100 focus:outline-none input-glow appearance-none cursor-pointer" | |
| onchange="setState({ selectedArchitect: this.value, selectedGrade: null })" | |
| > | |
| <option value="">-- Architekten auswählen --</option> | |
| ${ARCHITECTS.map(arch => ` | |
| <option value="${arch.id}" ${state.selectedArchitect === arch.id ? 'selected' : ''}> | |
| ${arch.name} | |
| </option> | |
| `).join('')} | |
| </select> | |
| </div> | |
| <!-- Grade Selection --> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-300 mb-2"> | |
| <i class="fas fa-layer-group mr-2 text-amber-400"></i> | |
| Optimierungsgrad | |
| </label> | |
| <select | |
| class="select-custom w-full bg-slate-800/50 border border-slate-600 rounded-xl px-4 py-3 text-slate-100 focus:outline-none input-glow appearance-none cursor-pointer ${!architect ? 'opacity-50' : ''}" | |
| ${!architect ? 'disabled' : ''} | |
| onchange="setState({ selectedGrade: this.value })" | |
| > | |
| <option value="">-- Grad auswählen --</option> | |
| ${architect ? architect.grades.map(grade => ` | |
| <option value="${grade.id}" ${state.selectedGrade === grade.id ? 'selected' : ''}> | |
| ${grade.name} ${architect.dialogRequired.includes(grade.id) ? '(Dialog)' : ''} | |
| </option> | |
| `).join('') : ''} | |
| </select> | |
| </div> | |
| ${architect ? ` | |
| <div class="architect-badge rounded-xl p-4 flex items-start gap-3"> | |
| <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background: ${architect.color}20; color: ${architect.color}"> | |
| <i class="fas ${architect.icon}"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium" style="color: ${architect.color}">${architect.name}</h3> | |
| <p class="text-sm text-slate-400 mt-1"> | |
| ${architect.id === 'jen' ? 'Expertin für KI-Prompt-Optimierung mit der 4-D-Methode' : ''} | |
| ${architect.id === 'lyra2' ? 'Revolutionärer KI-Assistent und Meister der kognitiven Architektur' : ''} | |
| ${architect.id === 'prompt-engineer' ? 'Experte für Prompt Engineering mit RACE-Framework' : ''} | |
| ${architect.id === 'prompt-spezialist' ? 'Premium-Spezialist für iterative Prompt-Verfeinerung' : ''} |