marwinm/website
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update OpenAI API key and enhance app functionality: Replace the OpenAI API key in the .env file for improved access. Refactor app.py to include error handling for missing API keys and implement dark mode functionality with session management. Update README.md to reflect the use of Tailwind CSS via CDN and document the Content Security Policy (CSP) adjustments. Enhance mindmap data loading with a new API endpoint for refreshing data, ensuring better user experience during database connection issues. Update styles and templates for improved UI consistency and responsiveness.

Browse Source
This commit is contained in:
Till Tomczak
2025-04-27 16:56:16 +02:00
parent 2d8cdc052f
commit 4a3092a4d2
42 changed files with 2458 additions and 878 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
templates/index.html
View File

@@ -253,85 +253,99 @@
</div>
<!-- Chat Interface Preview -->
<div class="max-w-3xl mx-auto embedded-chat">
<!-- Chat Header -->
<div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-3">
<i class="fa-solid fa-robot text-sm"></i>
<div class="max-w-3xl mx-auto">
<div class="embedded-chat" id="demo-chat">
<!-- Chat Header -->
<div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-3">
<i class="fa-solid fa-robot text-sm"></i>
</div>
<span class="font-medium text-gray-800 dark:text-gray-200">Systades Assistent (4o-mini)</span>
</div>
<span class="font-medium text-gray-800 dark:text-gray-200">Systades Assistent</span>
</div>
<div>
<button class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
<i class="fa-solid fa-expand"></i>
</button>
</div>
</div>
<!-- Chat Messages -->
<div id="embedded-chat-messages" class="border-b border-gray-200 dark:border-gray-700">
<!-- Assistant Message -->
<div class="mb-4 flex">
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-2 flex-shrink-0">
<i class="fa-solid fa-robot text-sm"></i>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 max-w-[80%]">
<p class="text-gray-700 dark:text-gray-300">
Hallo! Ich bin dein Systades-Assistent. Wie kann ich dir heute helfen? Du kannst mir Fragen zu deinen Gedanken stellen,
Verbindungen zwischen Konzepten finden oder Informationen zusammenfassen lassen.
</p>
<div>
<button id="open-real-assistant" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
<i class="fa-solid fa-expand"></i>
</button>
</div>
</div>
<!-- User Message -->
<div class="mb-4 flex justify-end">
<div class="bg-purple-100 dark:bg-purple-900/30 rounded-lg p-3 max-w-[80%]">
<p class="text-gray-800 dark:text-gray-200">
Kann ich mit deiner Hilfe eine Mindmap zum Thema Künstliche Intelligenz erstellen?
</p>
<!-- Chat Messages -->
<div id="embedded-chat-messages" class="border-b border-gray-200 dark:border-gray-700">
<!-- Assistant Message -->
<div class="mb-4 flex">
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-2 flex-shrink-0">
<i class="fa-solid fa-robot text-sm"></i>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 max-w-[80%]">
<div class="text-gray-700 dark:text-gray-300 markdown-content">
<p>Hallo! Ich bin dein Systades-Assistent. Wie kann ich dir heute helfen?</p>
<p>Du kannst mir Fragen zu:</p>
<ul>
<li><strong>Gedanken</strong> in der Datenbank</li>
<li><strong>Kategorien</strong> und Wissensgebieten</li>
<li><strong>Mindmaps</strong> und Visualisierungsmöglichkeiten</li>
</ul>
<p>stellen.</p>
</div>
</div>
</div>
<div class="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-gray-700 dark:text-gray-300 ml-2 flex-shrink-0">
<i class="fa-solid fa-user text-sm"></i>
<!-- User Message -->
<div class="mb-4 flex justify-end">
<div class="bg-purple-100 dark:bg-purple-900/30 rounded-lg p-3 max-w-[80%]">
<p class="text-gray-800 dark:text-gray-200">
Kann ich mit deiner Hilfe eine Mindmap zum Thema Künstliche Intelligenz erstellen?
</p>
</div>
<div class="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-gray-700 dark:text-gray-300 ml-2 flex-shrink-0">
<i class="fa-solid fa-user text-sm"></i>
</div>
</div>
</div>
<!-- Assistant Typing -->
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-2 flex-shrink-0">
<i class="fa-solid fa-robot text-sm"></i>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3">
<div class="typing-dots">
<span></span>
<span></span>
<span></span>
<!-- Assistant Response -->
<div class="mb-4 flex" id="demo-ai-response">
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-2 flex-shrink-0">
<i class="fa-solid fa-robot text-sm"></i>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 max-w-[80%]">
<div class="text-gray-700 dark:text-gray-300 markdown-content">
<p>Ja, natürlich! Ich kann dir dabei helfen, eine Mindmap zum Thema <strong>Künstliche Intelligenz</strong> zu erstellen.</p>
<p>Du kannst wie folgt vorgehen:</p>
<ol>
<li>Gehe zur <strong>Mindmap</strong>-Ansicht</li>
<li>Suche nach dem Knoten "Künstliche Intelligenz" unter der Kategorie "Technologie"</li>
<li>Füge diesen Knoten zu deiner persönlichen Mindmap hinzu</li>
<li>Ergänze verwandte Themen wie <em>Machine Learning, Neural Networks oder Data Science</em></li>
</ol>
<p>Soll ich dir noch mehr spezifische Informationen zu KI-Teilgebieten geben?</p>
</div>
</div>
</div>
</div>
</div>
<!-- Chat Input -->
<div class="p-4">
<div class="flex">
<input type="text" placeholder="Stelle eine Frage..." class="mystical-input flex-grow" disabled>
<button class="ml-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white p-2 rounded-lg disabled:opacity-50" disabled>
<i class="fa-solid fa-paper-plane"></i>
</button>
</div>
<!-- Quick Queries -->
<div class="mt-3 flex flex-wrap gap-2">
<span class="text-xs text-gray-500 dark:text-gray-400 mr-1">Beispiele:</span>
<button class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300" disabled>Verbindungen finden</button>
<button class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300" disabled>Zusammenfassen</button>
<button class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300" disabled>Mindmap erstellen</button>
<!-- Chat Input -->
<div class="p-4">
<div class="flex">
<input type="text" placeholder="Stelle eine Frage..." class="mystical-input flex-grow" disabled>
<button class="ml-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white p-2 rounded-lg disabled:opacity-50" disabled>
<i class="fa-solid fa-paper-plane"></i>
</button>
</div>
<!-- Quick Queries -->
<div class="mt-3 flex flex-wrap gap-2">
<span class="text-xs text-gray-500 dark:text-gray-400 mr-1">Beispiele:</span>
<button data-question="Was sind die wichtigsten Grundlagen der Künstlichen Intelligenz?" class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer transition-colors">KI-Grundlagen</button>
<button data-question="Wie kann ich eine Mindmap zum Thema Neuronale Netzwerke erstellen?" class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer transition-colors">Mindmap erstellen</button>
<button data-question="Zeige mir alle verfügbaren Kategorien in der Datenbank" class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer transition-colors">Datenbank durchsuchen</button>
</div>
</div>
</div>
</div>
<!-- Try it Button -->
<div class="text-center mt-10">
<button onclick="window.MindMap && window.MindMap.assistant && window.MindMap.assistant.toggleAssistant(true)"
<button onclick="window.MindMap && window.MindMap.assistant && window.MindMap.assistant.sendQuestion('Hallo! Ich möchte mehr über die Funktionen der Wissensdatenbank erfahren. Was kann ich hier alles machen?')"
class="mystical-button mystical-button-primary inline-flex items-center">
<i class="fa-solid fa-robot mr-2"></i>
KI-Assistenten ausprobieren
@@ -432,33 +446,75 @@
{% block extra_js %}
<script>
// Simulate assistant typing and response
setTimeout(() => {
const chatMessages = document.getElementById('embedded-chat-messages');
const typingIndicator = chatMessages.querySelector('.flex:last-child');
if (typingIndicator) {
// Create assistant response
const response = document.createElement('div');
response.className = 'mb-4 flex';
response.innerHTML = `
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-2 flex-shrink-0">
<i class="fa-solid fa-robot text-sm"></i>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 max-w-[80%]">
<p class="text-gray-700 dark:text-gray-300">
Natürlich! Ich kann dir dabei helfen, eine Mindmap zum Thema KI zu erstellen. Beginnen wir mit zentralen Konzepten wie Machine Learning, Neural Networks und Natural Language Processing. Möchtest du einen bestimmten Aspekt der KI genauer betrachten?
</p>
</div>
`;
// Remove typing indicator and add response
typingIndicator.remove();
chatMessages.appendChild(response);
// Scroll to bottom
chatMessages.scrollTop = chatMessages.scrollHeight;
document.addEventListener('DOMContentLoaded', function() {
// Expand-Button mit dem echten Assistenten verknüpfen
const openRealAssistantBtn = document.getElementById('open-real-assistant');
if (openRealAssistantBtn) {
openRealAssistantBtn.addEventListener('click', function() {
if (window.MindMap && window.MindMap.assistant) {
window.MindMap.assistant.toggleAssistant(true);
}
});
}
}, 3000);
// Auch die Beispiel-Buttons im Demo-Chat klickbar machen
const quickQueryButtons = document.querySelectorAll('.quick-query-btn');
quickQueryButtons.forEach(button => {
button.addEventListener('click', function() {
if (window.MindMap && window.MindMap.assistant) {
const question = button.getAttribute('data-question');
if (question) {
window.MindMap.assistant.sendQuestion(question);
} else {
// Fallback auf den Button-Text, falls kein data-question Attribut gesetzt ist
const queryText = button.textContent.trim();
window.MindMap.assistant.sendQuestion(queryText);
}
}
});
});
// Styling für die markdown-content hinzufügen
const style = document.createElement('style');
style.textContent = `
.markdown-content h1, .markdown-content h2, .markdown-content h3,
.markdown-content h4, .markdown-content h5, .markdown-content h6 {
font-weight: bold;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.markdown-content h1 { font-size: 1.4rem; }
.markdown-content h2 { font-size: 1.3rem; }
.markdown-content h3 { font-size: 1.2rem; }
.markdown-content h4 { font-size: 1.1rem; }
.markdown-content ul, .markdown-content ol {
padding-left: 1.5rem;
margin: 0.5rem 0;
}
.markdown-content ul { list-style-type: disc; }
.markdown-content ol { list-style-type: decimal; }
.markdown-content p { margin: 0.5rem 0; }
.markdown-content code {
font-family: monospace;
background-color: rgba(0, 0, 0, 0.1);
padding: 1px 4px;
border-radius: 3px;
}
.markdown-content pre {
background-color: rgba(0, 0, 0, 0.1);
padding: 0.5rem;
border-radius: 4px;
overflow-x: auto;
margin: 0.5rem 0;
}
.dark .markdown-content code {
background-color: rgba(255, 255, 255, 0.1);
}
.dark .markdown-content pre {
background-color: rgba(255, 255, 255, 0.1);
}
`;
document.head.appendChild(style);
});
</script>
{% endblock %}