Upload 14 files

plugins/analytics.js

@@ -0,0 +1,53 @@
+/**
+ * Example Plugin: Analytics
+ * 
+ * Dieses Plugin tracked User-Behavior und sammelt Stats
+ */
+
+const analytics = {
+  sessionStart: null,
+  messagesCount: 0,
+  totalTokens: 0,
+  totalTime: 0,
+  averageResponseTime: 0,
+  messageHistory: [],
+}
+
+export function onPluginInit(context) {
+  analytics.sessionStart = new Date()
+  context.log('📊 Analytics Plugin started')
+  context.log(`Session ID: ${analytics.sessionStart.getTime()}`)
+}
+
+export function onMessageSent(context, { message, systemPrompt }) {
+  analytics.messagesCount++
+  analytics.messageHistory.push({
+    type: 'user',
+    content: message,
+    timestamp: new Date(),
+  })
+  
+  context.log(`Message #${analytics.messagesCount}`)
+}
+
+export function onResponseReceived(context, { content, stats }) {
+  analytics.totalTokens += stats.tokens
+  analytics.totalTime += stats.time
+  analytics.averageResponseTime = analytics.totalTime / analytics.messagesCount
+  
+  analytics.messageHistory.push({
+    type: 'assistant',
+    content: content.substring(0, 100),
+    timestamp: new Date(),
+    tokens: stats.tokens,
+    responseTime: stats.time,
+  })
+  
+  context.log(`📈 Stats:`)
+  context.log(`   Messages: ${analytics.messagesCount}`)
+  context.log(`   Total Tokens: ${analytics.totalTokens}`)
+  context.log(`   Avg Time: ${analytics.averageResponseTime.toFixed(2)}s`)
+  
+  // Mache diese Daten global verfügbar
+  window.analytics = analytics
+}

plugins/example-logger.js

@@ -0,0 +1,64 @@
+/**
+ * Example Plugin: Logger
+ * 
+ * Dieses Plugin zeigt, wie man ein einfaches Plugin schreibt
+ * das Messages und Responses logt.
+ * 
+ * Um Plugins zu schreiben:
+ * 1. Neue JS-Datei im /plugins Ordner erstellen
+ * 2. Export der Hook-Funktionen (onPluginInit, onMessageSent, etc.)
+ * 3. Plugin wird automatisch geladen!
+ */
+
+// Wird aufgerufen, wenn das Plugin initialisiert wird
+export function onPluginInit(context) {
+  context.log('Example Logger Plugin initialized! 📝')
+  
+  // Du kannst hier verschiedene Dinge machen:
+  // - State speichern
+  // - Event Listener registrieren
+  // - Daten fetchen
+  
+  // Beispiel: Speichere Session-Start
+  window.pluginState = window.pluginState || {}
+  window.pluginState.sessionStart = new Date()
+  window.pluginState.messageCount = 0
+  
+  context.log(`Session started at: ${window.pluginState.sessionStart}`)
+}
+
+// Wird aufgerufen, wenn der Benutzer eine Nachricht sendet
+export function onMessageSent(context, detail) {
+  const { message, systemPrompt } = detail
+  
+  window.pluginState.messageCount++
+  
+  context.log(`📤 Message #${window.pluginState.messageCount}: "${message.substring(0, 50)}..."`)
+  
+  // Beispiele für weitere Dinge, die man hier machen könnte:
+  // - Analytics tracken
+  // - Nachricht validieren
+  // - Benutzerdaten speichern
+  // - API calls machen
+}
+
+// Wird aufgerufen, wenn eine Antwort vom Model einkommt
+export function onResponseReceived(context, detail) {
+  const { content, stats } = detail
+  
+  context.log(`📥 Response received:`)
+  context.log(`   - Length: ${content.length} characters`)
+  context.log(`   - Tokens: ${stats.tokens}`)
+  context.log(`   - Time: ${stats.time}s`)
+  
+  // Beispiele für weitere Dinge:
+  // - Response analysieren
+  // - Sentiment analysieren
+  // - Qualität prüfen
+  // - In Datenbank speichern
+}
+
+// Optional: Weitere Hook-Funktionen die du definieren kannst:
+// export function onError(context, error) { }
+// export function onModelLoaded(context, model) { }
+// export function onSettingsChanged(context, settings) { }

plugins/storage.js

@@ -0,0 +1,81 @@
+/**
+ * Example Plugin: Custom Logging
+ * 
+ * Dieses Plugin speichert alle Messages in localStorage
+ * und kann sie später abrufen
+ */
+
+const STORAGE_KEY = 'chatbot_history'
+const MAX_HISTORY = 100
+
+function getHistory() {
+  try {
+    const data = localStorage.getItem(STORAGE_KEY)
+    return data ? JSON.parse(data) : []
+  } catch (e) {
+    console.error('Failed to read history:', e)
+    return []
+  }
+}
+
+function saveHistory(history) {
+  try {
+    const limited = history.slice(-MAX_HISTORY)
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(limited))
+  } catch (e) {
+    console.error('Failed to save history:', e)
+  }
+}
+
+export function onPluginInit(context) {
+  const history = getHistory()
+  context.log(`💾 Local Storage Plugin initialized with ${history.length} messages`)
+  
+  // API für Plugins bereitstellen
+  window.HistoryAPI = {
+    getHistory: getHistory,
+    clearHistory: () => {
+      localStorage.removeItem(STORAGE_KEY)
+      context.log('✓ History cleared')
+    },
+    exportAsJSON: () => {
+      const data = {
+        exported: new Date(),
+        messages: getHistory(),
+      }
+      const json = JSON.stringify(data, null, 2)
+      const blob = new Blob([json], { type: 'application/json' })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `chatbot-history-${Date.now()}.json`
+      a.click()
+      context.log('✓ History exported')
+    }
+  }
+}
+
+export function onMessageSent(context, { message, systemPrompt }) {
+  const history = getHistory()
+  history.push({
+    type: 'user',
+    content: message,
+    timestamp: new Date(),
+    systemPrompt,
+  })
+  saveHistory(history)
+  context.log(`💾 Saved to local storage (${history.length} messages)`)
+}
+
+export function onResponseReceived(context, { content, stats }) {
+  const history = getHistory()
+  history.push({
+    type: 'assistant',
+    content,
+    timestamp: new Date(),
+    tokens: stats.tokens,
+    time: stats.time,
+  })
+  saveHistory(history)
+  context.log(`💾 Response saved (${history.length} total messages)`)
+}

public/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zephyr-7B Chatbot</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        
+        #root {
+            width: 100%;
+            max-width: 1000px;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>

scripts/create-plugin.js

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+
+/**
+ * Setup Script - Initialisiert ein neues Plugin
+ * Nutzung: node scripts/create-plugin.js my-awesome-plugin
+ */
+
+const fs = require('fs')
+const path = require('path')
+
+const pluginName = process.argv[2]
+
+if (!pluginName) {
+  console.error('❌ Fehler: Plugin-Name erforderlich')
+  console.log('Nutzung: node scripts/create-plugin.js my-plugin-name')
+  process.exit(1)
+}
+
+const pluginDir = path.join(__dirname, '..', 'plugins')
+const pluginFile = path.join(pluginDir, `${pluginName}.js`)
+
+if (fs.existsSync(pluginFile)) {
+  console.error(`❌ Plugin ${pluginName} existiert bereits!`)
+  process.exit(1)
+}
+
+const template = `/**
+ * Plugin: ${pluginName}
+ * 
+ * Automatisch generiert am: ${new Date().toISOString()}
+ * 
+ * Hooks:
+ * - onPluginInit(context): Beim Plugin-Start
+ * - onMessageSent(context, data): Wenn Benutzer Nachricht sendet
+ * - onResponseReceived(context, data): Wenn Response kommt
+ */
+
+export function onPluginInit(context) {
+  context.log('🎉 ${pluginName} plugin initialized!')
+  
+  // TODO: Plugin-Setup hier
+}
+
+export function onMessageSent(context, { message, systemPrompt }) {
+  context.log(\`📤 Message: \${message.substring(0, 50)}...\`)
+  
+  // TODO: Message-Handler
+}
+
+export function onResponseReceived(context, { content, stats }) {
+  context.log(\`📥 Response: \${content.substring(0, 50)}...\`)
+  context.log(\`⏱️ Time: \${stats.time}s\`)
+  
+  // TODO: Response-Handler
+}
+`
+
+fs.writeFileSync(pluginFile, template)
+
+console.log(`✅ Plugin erstellt: ${pluginFile}`)
+console.log(`\n🚀 Das Plugin wird automatisch geladen wenn die App startet!`)
+console.log(`\n📝 Template-Datei: ${pluginFile}`)
+console.log(`\n💡 Tipp: Öffne die Datei und füge deine Logik hinzu!`)

src/App.css

@@ -0,0 +1,191 @@
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: var(--gray-50);
+}
+
+.app-header {
+  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+  color: white;
+  padding: 30px 20px;
+  text-align: center;
+  box-shadow: var(--shadow-md);
+}
+
+.app-header h1 {
+  font-size: 32px;
+  margin-bottom: 5px;
+  font-weight: 700;
+}
+
+.tagline {
+  font-size: 14px;
+  opacity: 0.9;
+}
+
+.app-content {
+  display: flex;
+  flex: 1;
+  gap: 20px;
+  padding: 20px;
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.sidebar {
+  width: 300px;
+  background: white;
+  border-radius: var(--border-radius);
+  padding: 20px;
+  box-shadow: var(--shadow-md);
+  overflow-y: auto;
+  height: fit-content;
+  max-height: calc(100vh - 200px);
+}
+
+.sidebar-section {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.sidebar-section h3 {
+  color: var(--gray-900);
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.sidebar-section label {
+  font-size: 13px;
+  color: var(--gray-600);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.sidebar-section textarea {
+  width: 100%;
+  min-height: 100px;
+  padding: 10px;
+  border: 1px solid var(--gray-300);
+  border-radius: var(--border-radius);
+  font-size: 13px;
+  font-family: 'Monaco', 'Menlo', monospace;
+  resize: vertical;
+}
+
+.sidebar-section input[type="range"] {
+  width: 100%;
+  margin-top: 5px;
+  accent-color: var(--primary);
+}
+
+.stats-box {
+  background: var(--gray-50);
+  padding: 15px;
+  border-radius: var(--border-radius);
+  border-left: 4px solid var(--success);
+  margin-top: 10px;
+}
+
+.stats-box h4 {
+  font-size: 13px;
+  color: var(--gray-900);
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.stat-item {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--gray-600);
+  margin: 5px 0;
+}
+
+.stat-item strong {
+  color: var(--gray-900);
+  font-weight: 600;
+}
+
+.plugins-box {
+  background: var(--gray-50);
+  padding: 15px;
+  border-radius: var(--border-radius);
+  border-left: 4px solid var(--warning);
+  margin-top: 10px;
+}
+
+.plugins-box h4 {
+  font-size: 13px;
+  color: var(--gray-900);
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.plugins-box ul {
+  list-style: none;
+  font-size: 12px;
+  color: var(--gray-600);
+}
+
+.plugins-box li {
+  padding: 5px 0;
+  padding-left: 10px;
+  position: relative;
+}
+
+.plugins-box li::before {
+  content: '●';
+  position: absolute;
+  left: 0;
+  color: var(--warning);
+}
+
+.chat-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+
+@media (max-width: 1024px) {
+  .app-content {
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .sidebar {
+    width: 100%;
+    max-height: none;
+  }
+
+  .chat-container {
+    min-height: 400px;
+  }
+}
+
+@media (max-width: 768px) {
+  .app-header {
+    padding: 20px 15px;
+  }
+
+  .app-header h1 {
+    font-size: 24px;
+  }
+
+  .app-content {
+    padding: 10px;
+  }
+
+  .sidebar {
+    padding: 15px;
+  }
+}

src/App.jsx

@@ -0,0 +1,169 @@
+import { useState, useEffect } from 'react'
+import './App.css'
+import ChatBox from './components/ChatBox'
+import PluginLoader from './components/PluginLoader'
+import { sendMessage, getStats } from './utils/api'
+
+function App() {
+  const [messages, setMessages] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [systemPrompt, setSystemPrompt] = useState('Du bist ein hilfsbereiter KI-Assistent.')
+  const [temperature, setTemperature] = useState(0.7)
+  const [topP, setTopP] = useState(0.9)
+  const [stats, setStats] = useState(null)
+  const [plugins, setPlugins] = useState([])
+
+  useEffect(() => {
+    // Auf Plugin-Änderungen hören
+    window.addEventListener('pluginsLoaded', (e) => {
+      setPlugins(e.detail)
+      console.log('Plugins loaded:', e.detail)
+    })
+
+    return () => {
+      window.removeEventListener('pluginsLoaded', () => {})
+    }
+  }, [])
+
+  const handleSendMessage = async (message) => {
+    // Nachricht zum Chat hinzufügen
+    const userMessage = {
+      id: Date.now(),
+      role: 'user',
+      content: message,
+      timestamp: new Date(),
+    }
+    
+    setMessages(prev => [...prev, userMessage])
+    setLoading(true)
+
+    try {
+      // Plugins benachrichtigen
+      window.dispatchEvent(new CustomEvent('messageSent', {
+        detail: { message, systemPrompt }
+      }))
+
+      const response = await sendMessage(message, systemPrompt, temperature, topP)
+      
+      const assistantMessage = {
+        id: Date.now() + 1,
+        role: 'assistant',
+        content: response.response,
+        timestamp: new Date(),
+        stats: {
+          tokens: response.tokens,
+          time: response.time_seconds,
+        }
+      }
+      
+      setMessages(prev => [...prev, assistantMessage])
+      setStats(response)
+
+      // Plugins über Antwort benachrichtigen
+      window.dispatchEvent(new CustomEvent('responseReceived', {
+        detail: assistantMessage
+      }))
+
+    } catch (error) {
+      console.error('Error:', error)
+      const errorMessage = {
+        id: Date.now() + 1,
+        role: 'assistant',
+        content: `❌ Fehler: ${error.message}`,
+        timestamp: new Date(),
+        isError: true,
+      }
+      setMessages(prev => [...prev, errorMessage])
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="app-container">
+      <PluginLoader onPluginsLoad={setPlugins} />
+      
+      <header className="app-header">
+        <h1>🤖 Zephyr-7B Chatbot</h1>
+        <p className="tagline">Powered by Hugging Face</p>
+      </header>
+
+      <div className="app-content">
+        <aside className="sidebar">
+          <div className="sidebar-section">
+            <h3>⚙️ Einstellungen</h3>
+            
+            <label>System Prompt</label>
+            <textarea
+              value={systemPrompt}
+              onChange={(e) => setSystemPrompt(e.target.value)}
+              placeholder="Definiere die Rolle des Assistenten..."
+              disabled={loading}
+            />
+            
+            <label>
+              Temperatur: {temperature.toFixed(2)}
+              <input
+                type="range"
+                min="0"
+                max="2"
+                step="0.1"
+                value={temperature}
+                onChange={(e) => setTemperature(parseFloat(e.target.value))}
+                disabled={loading}
+              />
+            </label>
+
+            <label>
+              Top P: {topP.toFixed(2)}
+              <input
+                type="range"
+                min="0"
+                max="1"
+                step="0.05"
+                value={topP}
+                onChange={(e) => setTopP(parseFloat(e.target.value))}
+                disabled={loading}
+              />
+            </label>
+
+            {stats && (
+              <div className="stats-box">
+                <h4>📊 Letzte Antwort</h4>
+                <div className="stat-item">
+                  <span>Tokens:</span>
+                  <strong>{stats.tokens}</strong>
+                </div>
+                <div className="stat-item">
+                  <span>Zeit:</span>
+                  <strong>{stats.time_seconds}s</strong>
+                </div>
+              </div>
+            )}
+
+            {plugins.length > 0 && (
+              <div className="plugins-box">
+                <h4>🔌 Plugins ({plugins.length})</h4>
+                <ul>
+                  {plugins.map(plugin => (
+                    <li key={plugin}>{plugin}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        </aside>
+
+        <main className="chat-container">
+          <ChatBox
+            messages={messages}
+            onSendMessage={handleSendMessage}
+            loading={loading}
+          />
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export default App

src/components/ChatBox.css

@@ -0,0 +1,251 @@
+.chatbox {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 0;
+}
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--gray-600);
+}
+
+.empty-icon {
+  font-size: 64px;
+  opacity: 0.6;
+}
+
+.empty-state h2 {
+  color: var(--gray-900);
+  font-size: 24px;
+}
+
+.empty-state p {
+  color: var(--gray-500);
+  font-size: 14px;
+}
+
+.suggestions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 20px;
+  width: 100%;
+  max-width: 300px;
+}
+
+.suggestion-btn {
+  background: var(--gray-100);
+  color: var(--gray-900);
+  border: 1px solid var(--gray-300);
+  padding: 10px 15px;
+  border-radius: 20px;
+  font-size: 13px;
+  text-align: left;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.suggestion-btn:hover {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+}
+
+.message {
+  display: flex;
+  gap: 10px;
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.message.user {
+  justify-content: flex-end;
+}
+
+.message.assistant {
+  justify-content: flex-start;
+}
+
+.message.error {
+  opacity: 0.8;
+}
+
+.message-avatar {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.message-content {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  max-width: 70%;
+}
+
+.message.user .message-content {
+  align-items: flex-end;
+}
+
+.message-text {
+  padding: 12px 15px;
+  border-radius: 15px;
+  word-wrap: break-word;
+  line-height: 1.5;
+  font-size: 14px;
+}
+
+.message.user .message-text {
+  background: var(--primary);
+  color: white;
+  border-bottom-right-radius: 4px;
+}
+
+.message.assistant .message-text {
+  background: var(--gray-100);
+  color: var(--gray-900);
+  border-bottom-left-radius: 4px;
+}
+
+.message.error .message-text {
+  background: var(--error);
+  color: white;
+}
+
+.message-stats {
+  font-size: 11px;
+  color: var(--gray-500);
+  padding: 0 15px;
+  text-align: right;
+}
+
+.message.user .message-stats {
+  text-align: right;
+}
+
+.message.assistant .message-stats {
+  text-align: left;
+}
+
+/* Typing indicator */
+.typing-indicator {
+  display: flex;
+  gap: 4px;
+  padding: 12px 15px;
+}
+
+.typing-indicator span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--gray-400);
+  animation: typing 1.4s infinite;
+}
+
+.typing-indicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-indicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing {
+  0%, 60%, 100% {
+    opacity: 0.5;
+    transform: translateY(0);
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(-8px);
+  }
+}
+
+.input-area {
+  display: flex;
+  gap: 10px;
+  padding: 15px 20px;
+  border-top: 1px solid var(--gray-200);
+  background: var(--gray-50);
+}
+
+.input-area textarea {
+  flex: 1;
+  padding: 10px 12px;
+  border: 1px solid var(--gray-300);
+  border-radius: 8px;
+  font-size: 14px;
+  font-family: inherit;
+  resize: none;
+  max-height: 100px;
+}
+
+.input-area textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.send-btn {
+  background: var(--primary);
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  align-self: flex-end;
+  white-space: nowrap;
+}
+
+.send-btn:hover:not(:disabled) {
+  background: var(--secondary);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+.send-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (max-width: 768px) {
+  .message-content {
+    max-width: 85%;
+  }
+
+  .input-area {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .send-btn {
+    align-self: stretch;
+  }
+}

src/components/ChatBox.jsx

@@ -0,0 +1,122 @@
+import { useState, useRef, useEffect } from 'react'
+import './ChatBox.css'
+
+export default function ChatBox({ messages, onSendMessage, loading }) {
+  const [inputValue, setInputValue] = useState('')
+  const messagesEndRef = useRef(null)
+  const inputRef = useRef(null)
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages])
+
+  const handleSend = () => {
+    if (inputValue.trim() && !loading) {
+      onSendMessage(inputValue)
+      setInputValue('')
+      setTimeout(() => inputRef.current?.focus(), 0)
+    }
+  }
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey && !loading) {
+      e.preventDefault()
+      handleSend()
+    }
+  }
+
+  return (
+    <div className="chatbox">
+      <div className="messages">
+        {messages.length === 0 ? (
+          <div className="empty-state">
+            <div className="empty-icon">🤖</div>
+            <h2>Willkommen!</h2>
+            <p>Starte eine Unterhaltung mit dem Zephyr-7B Modell</p>
+            <div className="suggestions">
+              <button 
+                className="suggestion-btn"
+                onClick={() => {
+                  setInputValue('Was ist Machine Learning?')
+                  inputRef.current?.focus()
+                }}
+              >
+                Was ist Machine Learning?
+              </button>
+              <button 
+                className="suggestion-btn"
+                onClick={() => {
+                  setInputValue('Erkläre Quantencomputing')
+                  inputRef.current?.focus()
+                }}
+              >
+                Erkläre Quantencomputing
+              </button>
+              <button 
+                className="suggestion-btn"
+                onClick={() => {
+                  setInputValue('Schreibe einen Witz')
+                  inputRef.current?.focus()
+                }}
+              >
+                Schreibe einen Witz
+              </button>
+            </div>
+          </div>
+        ) : (
+          messages.map((msg) => (
+            <div key={msg.id} className={`message ${msg.role} ${msg.isError ? 'error' : ''}`}>
+              <div className="message-avatar">
+                {msg.role === 'user' ? '👤' : '🤖'}
+              </div>
+              <div className="message-content">
+                <div className="message-text">{msg.content}</div>
+                {msg.stats && (
+                  <div className="message-stats">
+                    ⏱️ {msg.stats.time}s • 📊 {msg.stats.tokens} tokens
+                  </div>
+                )}
+              </div>
+            </div>
+          ))
+        )}
+        {loading && (
+          <div className="message assistant loading">
+            <div className="message-avatar">🤖</div>
+            <div className="message-content">
+              <div className="typing-indicator">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+            </div>
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="input-area">
+        <textarea
+          ref={inputRef}
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyPress={handleKeyPress}
+          placeholder="Schreibe deine Frage hier... (Shift+Enter für Zeilenumbruch)"
+          disabled={loading}
+          rows="3"
+        />
+        <button
+          className="send-btn"
+          onClick={handleSend}
+          disabled={loading || !inputValue.trim()}
+        >
+          {loading ? '⏳ Denke...' : '➤ Senden'}
+        </button>
+      </div>
+    </div>
+  )
+}

src/components/PluginLoader.jsx

@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * PluginLoader Component
+ * Lädt automatisch alle JS-Plugins aus dem /plugins Ordner
+ * 
+ * Jedes Plugin kann folgende Hooks nutzen:
+ * - onPluginInit(pluginContext)
+ * - onMessageSent(event)
+ * - onResponseReceived(event)
+ */
+export default function PluginLoader({ onPluginsLoad }) {
+  const [loadedCount, setLoadedCount] = useState(0)
+
+  useEffect(() => {
+    loadPlugins()
+  }, [])
+
+  const loadPlugins = async () => {
+    try {
+      // Import alle JS-Dateien aus dem plugins Ordner
+      // Für Vite: Nutze import.meta.glob
+      const pluginModules = import.meta.glob('/plugins/*.js', { eager: false })
+      
+      const loadedPlugins = []
+      
+      for (const [path, importFn] of Object.entries(pluginModules)) {
+        try {
+          const pluginName = path.split('/').pop().replace('.js', '')
+          
+          console.log(`🔌 Loading plugin: ${pluginName}`)
+          
+          // Plugin laden
+          const module = await importFn()
+          
+          // Plugin-Kontext bereitstellen
+          const pluginContext = {
+            name: pluginName,
+            log: (msg) => console.log(`[${pluginName}]`, msg),
+            warn: (msg) => console.warn(`[${pluginName}]`, msg),
+            error: (msg) => console.error(`[${pluginName}]`, msg),
+          }
+          
+          // onPluginInit Hook aufrufen (wenn vorhanden)
+          if (module.onPluginInit) {
+            module.onPluginInit(pluginContext)
+          }
+          
+          // Message-Hooks registrieren
+          if (module.onMessageSent) {
+            window.addEventListener('messageSent', (e) => {
+              module.onMessageSent(pluginContext, e.detail)
+            })
+          }
+          
+          if (module.onResponseReceived) {
+            window.addEventListener('responseReceived', (e) => {
+              module.onResponseReceived(pluginContext, e.detail)
+            })
+          }
+          
+          loadedPlugins.push(pluginName)
+          console.log(`✓ Plugin ${pluginName} initialized`)
+          
+        } catch (err) {
+          console.error(`✗ Failed to load plugin from ${path}:`, err)
+        }
+      }
+      
+      setLoadedCount(loadedPlugins.length)
+      onPluginsLoad?.(loadedPlugins)
+      
+      // Event für geladene Plugins
+      window.dispatchEvent(new CustomEvent('pluginsLoaded', {
+        detail: loadedPlugins
+      }))
+      
+      console.log(`✓ Loaded ${loadedPlugins.length} plugin(s)`)
+      
+    } catch (err) {
+      console.error('Error loading plugins:', err)
+    }
+  }
+
+  return null // Dieser Component rendert nichts
+}

src/index.css

@@ -0,0 +1,89 @@
+:root {
+  --primary: #667eea;
+  --secondary: #764ba2;
+  --success: #48bb78;
+  --error: #f56565;
+  --warning: #ed8936;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --border-radius: 8px;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+  min-height: 100vh;
+  color: var(--gray-900);
+  line-height: 1.6;
+}
+
+html, body, #root {
+  height: 100%;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  padding: 10px 16px;
+  border-radius: var(--border-radius);
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+
+button:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+input, textarea {
+  border: 1px solid var(--gray-300);
+  padding: 10px 12px;
+  border-radius: var(--border-radius);
+  font-size: 14px;
+  font-family: inherit;
+  transition: border-color 0.2s ease;
+}
+
+input:focus, textarea:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--gray-100);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--gray-300);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-400);
+}

src/main.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+// Plugin System laden
+import { initializePlugins } from './utils/pluginManager.js'
+
+// Plugins vor der App laden
+initializePlugins()
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

src/utils/api.js

@@ -0,0 +1,118 @@
+/**
+ * API Client für Kommunikation mit dem Backend
+ * 
+ * Der Backend läuft auf Gradio (port 7860)
+ * Bei HF Spaces ist kein Proxy nötig, da Gradio client kommuniziert
+ */
+
+// Versuche, den Client von Gradio zu laden
+let client = null
+
+async function initializeGradioClient() {
+  try {
+    // Bei HF Spaces: Gradio lädt seinen Client automatisch global
+    if (window.gradio_client) {
+      return window.gradio_client
+    }
+    
+    // Als Fallback könnten wir den Client manuell laden
+    // aber normalerweise ist das nicht nötig
+    console.warn('Gradio client not available')
+    return null
+  } catch (err) {
+    console.error('Error initializing Gradio client:', err)
+    return null
+  }
+}
+
+export async function sendMessage(prompt, systemPrompt, temperature, topP) {
+  try {
+    // Methode 1: Über Gradio API (empfohlen für HF Spaces)
+    const response = await fetch('/api/call/generate_response', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        data: [prompt, systemPrompt, temperature, topP]
+      })
+    })
+
+    if (!response.ok) {
+      // Fallback: Direkter HTTP Request
+      return await fallbackRequest(prompt, systemPrompt, temperature, topP)
+    }
+
+    const result = await response.json()
+    
+    // Parse Gradio response
+    if (result.data && result.data[0]) {
+      const data = result.data[0]
+      return {
+        response: typeof data === 'string' ? data : data.response || 'No response',
+        tokens: data.tokens || 0,
+        time_seconds: data.time_seconds || 0,
+      }
+    }
+
+    return result
+
+  } catch (err) {
+    console.error('Error sending message:', err)
+    throw err
+  }
+}
+
+async function fallbackRequest(prompt, systemPrompt, temperature, topP) {
+  // Fallback für lokale Entwicklung oder andere Szenarien
+  const response = await fetch('http://localhost:7860/api/predict', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      data: [prompt, systemPrompt, temperature, topP]
+    })
+  })
+
+  if (!response.ok) {
+    throw new Error(`API request failed: ${response.statusText}`)
+  }
+
+  const result = await response.json()
+  return result
+}
+
+export async function getStats() {
+  try {
+    const response = await fetch('/api/stats')
+    if (!response.ok) {
+      throw new Error('Failed to fetch stats')
+    }
+    return await response.json()
+  } catch (err) {
+    console.error('Error fetching stats:', err)
+    return null
+  }
+}
+
+export async function loadModel(modelName) {
+  try {
+    const response = await fetch('/api/load-model', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ model: modelName })
+    })
+    
+    if (!response.ok) {
+      throw new Error('Failed to load model')
+    }
+    
+    return await response.json()
+  } catch (err) {
+    console.error('Error loading model:', err)
+    throw err
+  }
+}

src/utils/pluginManager.js

@@ -0,0 +1,53 @@
+/**
+ * Plugin Manager
+ * Verwaltet das automatische Laden und Initialisieren von Plugins
+ */
+
+const plugins = new Map()
+
+export function registerPlugin(name, plugin) {
+  plugins.set(name, plugin)
+  console.log(`✓ Plugin registered: ${name}`)
+}
+
+export function getPlugin(name) {
+  return plugins.get(name)
+}
+
+export function getAllPlugins() {
+  return Array.from(plugins.values())
+}
+
+export async function initializePlugins() {
+  console.log('🔌 Initializing plugin system...')
+  
+  // Globale Plugin API bereitstellen
+  window.PluginAPI = {
+    register: registerPlugin,
+    get: getPlugin,
+    getAll: getAllPlugins,
+    
+    // Event Emitter für Plugins
+    on: (event, callback) => {
+      window.addEventListener(event, callback)
+    },
+    
+    off: (event, callback) => {
+      window.removeEventListener(event, callback)
+    },
+    
+    emit: (event, data) => {
+      window.dispatchEvent(new CustomEvent(event, { detail: data }))
+    },
+  }
+  
+  console.log('✓ Plugin API ready')
+}
+
+// Plugin Hook System
+export const PluginHooks = {
+  PLUGIN_INIT: 'onPluginInit',
+  MESSAGE_SENT: 'onMessageSent',
+  RESPONSE_RECEIVED: 'onResponseReceived',
+  ERROR: 'onError',
+}