204 lines
No EOL
8.6 KiB
HTML
204 lines
No EOL
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Data Platform - Multi-Agent Service</title>
|
|
<link rel="stylesheet" href="./styles.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="navbar">
|
|
<div class="navbar-container">
|
|
<h1 class="navbar-logo">Data Platform</h1>
|
|
<div class="navbar-user">
|
|
<span>Demo User</span>
|
|
<button class="icon-button">
|
|
<i class="fas fa-cog"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="app-container">
|
|
<!-- Seitenleiste -->
|
|
<aside class="sidebar">
|
|
<div class="workspace-section">
|
|
<h2>Workspaces</h2>
|
|
<ul class="workspace-list" id="workspace-list">
|
|
<!-- Workspace-Liste wird vom JavaScript gefüllt -->
|
|
</ul>
|
|
</div>
|
|
|
|
<ul class="sidebar-nav">
|
|
<li class="sidebar-item active">
|
|
<a href="#workflow">
|
|
<i class="fas fa-play-circle"></i>
|
|
<span>Workflow-Ausführung</span>
|
|
</a>
|
|
</li>
|
|
<li class="sidebar-item">
|
|
<a href="#data">
|
|
<i class="fas fa-database"></i>
|
|
<span>Meine Daten</span>
|
|
</a>
|
|
</li>
|
|
<li class="sidebar-item">
|
|
<a href="#prompts">
|
|
<i class="fas fa-comment-alt"></i>
|
|
<span>Meine Prompts</span>
|
|
</a>
|
|
</li>
|
|
<li class="sidebar-item">
|
|
<a href="#agents">
|
|
<i class="fas fa-wrench"></i>
|
|
<span>Meine Agents</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
|
|
<!-- Hauptinhalt -->
|
|
<main class="main-content">
|
|
<div class="workflow-container">
|
|
|
|
<!-- Meine Prompts Ansicht -->
|
|
<div id="prompts-view" style="display:none;">
|
|
<h2>Meine Prompts</h2>
|
|
<div class="card">
|
|
<h3>Gespeicherte Prompts</h3>
|
|
<div id="prompts-list">
|
|
<!-- Wird dynamisch gefüllt -->
|
|
</div>
|
|
<button class="add-btn" id="add-prompt-btn">
|
|
<i class="fas fa-plus"></i> Neuen Prompt erstellen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Meine Agents Ansicht -->
|
|
<div id="agents-view" style="display:none;">
|
|
<h2>Meine Agents</h2>
|
|
<div class="card">
|
|
<h3>Verfügbare Agents</h3>
|
|
<div id="agents-list-container">
|
|
<!-- Wird dynamisch gefüllt -->
|
|
</div>
|
|
<button class="add-btn" id="add-agent-btn">
|
|
<i class="fas fa-plus"></i> Neuen Agent hinzufügen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Linke Seite - Workflow-Konfiguration -->
|
|
<div class="config-panel">
|
|
<h2>Workflow-Konfiguration</h2>
|
|
|
|
<!-- 1. Dateien auswählen -->
|
|
<div class="card">
|
|
<h3>1. Dateien auswählen</h3>
|
|
|
|
<div class="files-container">
|
|
<div class="file-selection">
|
|
<div class="section-header">
|
|
<span>Verfügbare Dateien</span>
|
|
<button class="upload-btn" id="upload-btn">
|
|
<i class="fas fa-upload"></i> Hochladen
|
|
</button>
|
|
<input type="file" id="file-input" multiple hidden>
|
|
</div>
|
|
<ul class="file-list" id="available-files">
|
|
<!-- Wird dynamisch gefüllt -->
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="selected-files">
|
|
<h4>Ausgewählte Dateien</h4>
|
|
<div class="selected-files-container" id="selected-files-container">
|
|
<div class="empty-state" id="empty-files-state">
|
|
<i class="fas fa-upload"></i>
|
|
<span>Keine Dateien ausgewählt</span>
|
|
</div>
|
|
<ul class="selected-file-list" id="selected-files">
|
|
<!-- Wird dynamisch gefüllt -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. Prompt eingeben -->
|
|
<div class="card">
|
|
<h3>2. Prompt eingeben</h3>
|
|
<textarea
|
|
id="prompt-input"
|
|
placeholder="Beschreiben Sie die Aufgabe für die Agenten..."
|
|
></textarea>
|
|
</div>
|
|
|
|
<!-- 3. Agenten auswählen -->
|
|
<div class="card">
|
|
<h3>3. Agenten auswählen</h3>
|
|
<ul class="agent-list" id="agent-list">
|
|
<!-- Wird dynamisch gefüllt -->
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Aktionsbuttons -->
|
|
<div class="action-buttons">
|
|
<button class="reset-btn" id="reset-btn">Zurücksetzen</button>
|
|
<button class="start-btn" id="start-workflow-btn">Workflow starten</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rechte Seite - Ausführung und Ergebnisse -->
|
|
<div class="results-panel">
|
|
<h2>Ausführung & Ergebnisse</h2>
|
|
|
|
<!-- Ausführungsprotokoll -->
|
|
<div class="card">
|
|
<h3>Ausführungsprotokoll</h3>
|
|
<div class="log-container" id="execution-log">
|
|
<div class="log-empty-state">Workflow noch nicht gestartet. Protokoll wird hier angezeigt.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ergebnisse -->
|
|
<div class="card">
|
|
<h3>Ergebnisse</h3>
|
|
<div class="results-container" id="results-container">
|
|
<div class="results-empty-state" id="empty-results-state">
|
|
<div>Keine Ergebnisse verfügbar</div>
|
|
<div class="sub-text">Führen Sie einen Workflow aus, um Ergebnisse zu sehen</div>
|
|
</div>
|
|
<div class="results-list" id="results-list">
|
|
<!-- Wird dynamisch gefüllt -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Meine Daten Ansicht -->
|
|
<div id="data-view" style="display:none;">
|
|
<h2>Meine Daten</h2>
|
|
<div class="card">
|
|
<h3>Verfügbare Dateien</h3>
|
|
<div class="files-container">
|
|
<ul class="file-list" id="my-files-list">
|
|
<!-- Wird dynamisch gefüllt -->
|
|
</ul>
|
|
<button class="upload-btn" id="upload-files-btn">
|
|
<i class="fas fa-upload"></i> Neue Dateien hochladen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |