Spaces:

sky-meilin
/

anycoder-63e7151c

Running

App Files Files Community

sky-meilin commited on Dec 12, 2025

Commit

e42e79a

verified ·

1 Parent(s): 3c3f51f

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +795 -19

index.html CHANGED Viewed

@@ -1,19 +1,795 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Control Center</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #4a6bff;
+            --secondary-color: #2a3f8f;
+            --accent-color: #ff6b6b;
+            --text-color: #333;
+            --light-bg: #f8f9fa;
+            --dark-bg: #1e1e1e;
+            --border-radius: 12px;
+            --transition: all 0.3s ease;
+            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            --glow: 0 0 15px rgba(74, 107, 255, 0.4);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+            padding: 20px;
+            color: var(--text-color);
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 30px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        }
+        .logo {
+            font-size: 1.8rem;
+            font-weight: 700;
+            color: var(--primary-color);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .logo i {
+            font-size: 2rem;
+        }
+        .header-right {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+        .anycoder-link {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 500;
+            transition: var(--transition);
+        }
+        .anycoder-link:hover {
+            color: var(--accent-color);
+        }
+        .user-profile {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            background: white;
+            padding: 8px 15px;
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+        }
+        .user-avatar {
+            width: 35px;
+            height: 35px;
+            border-radius: 50%;
+            background: var(--primary-color);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+        }
+        .main-grid {
+            display: grid;
+            grid-template-columns: 1fr 2fr;
+            gap: 30px;
+            margin-bottom: 30px;
+        }
+        .control-panel {
+            background: white;
+            border-radius: var(--border-radius);
+            padding: 25px;
+            box-shadow: var(--shadow);
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .control-panel h2 {
+            color: var(--primary-color);
+            margin-bottom: 15px;
+            font-size: 1.5rem;
+        }
+        .mode-selector {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        .mode-btn {
+            flex: 1;
+            padding: 12px;
+            border: none;
+            border-radius: var(--border-radius);
+            background: var(--light-bg);
+            color: var(--text-color);
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+        }
+        .mode-btn i {
+            font-size: 1.5rem;
+        }
+        .mode-btn.active {
+            background: var(--primary-color);
+            color: white;
+            box-shadow: var(--glow);
+        }
+        .mode-btn:not(.active):hover {
+            background: rgba(74, 107, 255, 0.1);
+        }
+        .control-section {
+            display: none;
+            flex-direction: column;
+            gap: 15px;
+        }
+        .control-section.active {
+            display: flex;
+        }
+        .input-group {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .input-group label {
+            font-weight: 500;
+            color: var(--secondary-color);
+        }
+        .input-group input,
+        .input-group textarea,
+        .input-group select {
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: var(--border-radius);
+            font-size: 1rem;
+            transition: var(--transition);
+        }
+        .input-group input:focus,
+        .input-group textarea:focus,
+        .input-group select:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: var(--glow);
+        }
+        .slider-container {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .slider {
+            -webkit-appearance: none;
+            appearance: none;
+            height: 6px;
+            border-radius: 3px;
+            background: var(--light-bg);
+            outline: none;
+        }
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: var(--primary-color);
+            cursor: pointer;
+        }
+        .slider::-moz-range-thumb {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: var(--primary-color);
+            cursor: pointer;
+            border: none;
+        }
+        .slider-value {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.9rem;
+            color: var(--secondary-color);
+        }
+        .output-preview {
+            flex: 1;
+            background: white;
+            border-radius: var(--border-radius);
+            padding: 25px;
+            box-shadow: var(--shadow);
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .preview-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+        .preview-title {
+            font-size: 1.5rem;
+            color: var(--primary-color);
+            font-weight: 600;
+        }
+        .preview-actions {
+            display: flex;
+            gap: 10px;
+        }
+        .action-btn {
+            background: var(--light-bg);
+            border: none;
+            border-radius: 50%;
+            width: 35px;
+            height: 35px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: var(--transition);
+            color: var(--text-color);
+        }
+        .action-btn:hover {
+            background: var(--primary-color);
+            color: white;
+        }
+        .preview-content {
+            flex: 1;
+            border: 1px dashed #ddd;
+            border-radius: var(--border-radius);
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 300px;
+            background: var(--light-bg);
+        }
+        .preview-content.empty {
+            color: var(--secondary-color);
+            text-align: center;
+        }
+        .preview-content.empty i {
+            font-size: 3rem;
+            margin-bottom: 15px;
+            opacity: 0.5;
+        }
+        .generate-btn {
+            background: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 15px 30px;
+            border-radius: var(--border-radius);
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
+            box-shadow: var(--shadow);
+            margin-top: auto;
+        }
+        .generate-btn:hover {
+            background: #3a5bef;
+            transform: translateY(-2px);
+            box-shadow: var(--glow);
+        }
+        .history-panel {
+            background: white;
+            border-radius: var(--border-radius);
+            padding: 25px;
+            box-shadow: var(--shadow);
+        }
+        .history-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        .history-title {
+            font-size: 1.5rem;
+            color: var(--primary-color);
+            font-weight: 600;
+        }
+        .clear-history {
+            background: none;
+            border: none;
+            color: var(--secondary-color);
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        .clear-history:hover {
+            color: var(--accent-color);
+        }
+        .history-items {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        .history-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px;
+            border-radius: var(--border-radius);
+            background: var(--light-bg);
+            transition: var(--transition);
+            cursor: pointer;
+        }
+        .history-item:hover {
+            background: rgba(74, 107, 255, 0.1);
+        }
+        .history-item i {
+            color: var(--primary-color);
+            margin-right: 10px;
+        }
+        .history-item .time {
+            color: var(--secondary-color);
+            font-size: 0.9rem;
+        }
+        .history-item .type {
+            padding: 4px 10px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 600;
+        }
+        .history-item .type.text {
+            background: rgba(74, 107, 255, 0.2);
+            color: var(--primary-color);
+        }
+        .history-item .type.image {
+            background: rgba(255, 107, 107, 0.2);
+            color: var(--accent-color);
+        }
+        .history-item .type.video {
+            background: rgba(107, 255, 107, 0.2);
+            color: #2ecc71;
+        }
+        @media (max-width: 900px) {
+            .main-grid {
+                grid-template-columns: 1fr;
+            }
+            .control-panel {
+                order: 1;
+            }
+            .output-preview {
+                order: 2;
+            }
+            .history-panel {
+                order: 3;
+            }
+        }
+        @media (max-width: 600px) {
+            .mode-selector {
+                flex-direction: column;
+            }
+            .mode-btn {
+                flex-direction: row;
+                justify-content: flex-start;
+                gap: 15px;
+            }
+            .header-right {
+                flex-direction: column;
+                align-items: flex-end;
+                gap: 10px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <div class="logo">
+                <i class="fas fa-robot"></i>
+                <span>AI Control Center</span>
+            </div>
+            <div class="header-right">
+                <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
+                <div class="user-profile">
+                    <div class="user-avatar">U</div>
+                    <span>User</span>
+                </div>
+            </div>
+        </header>
+        <div class="main-grid">
+            <div class="control-panel">
+                <h2>Steuerungszentrale</h2>
+                <div class="mode-selector">
+                    <button class="mode-btn active" data-mode="text">
+                        <i class="fas fa-font"></i>
+                        <span>Text</span>
+                    </button>
+                    <button class="mode-btn" data-mode="image">
+                        <i class="fas fa-image"></i>
+                        <span>Bild</span>
+                    </button>
+                    <button class="mode-btn" data-mode="video">
+                        <i class="fas fa-video"></i>
+                        <span>Video</span>
+                    </button>
+                </div>
+                <!-- Text Controls -->
+                <div class="control-section active" id="text-controls">
+                    <div class="input-group">
+                        <label for="text-prompt">Eingabeaufforderung</label>
+                        <textarea id="text-prompt" rows="4" placeholder="Beschreiben Sie den Text, den Sie generieren möchten..."></textarea>
+                    </div>
+                    <div class="input-group">
+                        <label for="text-style">Stil</label>
+                        <select id="text-style">
+                            <option value="standard">Standard</option>
+                            <option value="creative">Kreativ</option>
+                            <option value="professional">Professionell</option>
+                            <option value="casual">Lässig</option>
+                        </select>
+                    </div>
+                    <div class="slider-container">
+                        <label for="text-length">Länge (Wörter)</label>
+                        <input type="range" id="text-length" class="slider" min="50" max="1000" value="300">
+                        <div class="slider-value">
+                            <span>50</span>
+                            <span id="text-length-value">300</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Image Controls -->
+                <div class="control-section" id="image-controls">
+                    <div class="input-group">
+                        <label for="image-prompt">Bildbeschreibung</label>
+                        <textarea id="image-prompt" rows="4" placeholder="Beschreiben Sie das Bild, das Sie generieren möchten..."></textarea>
+                    </div>
+                    <div class="input-group">
+                        <label for="image-style">Stil</label>
+                        <select id="image-style">
+                            <option value="realistic">Realistisch</option>
+                            <option value="cartoon">Cartoon</option>
+                            <option value="watercolor">Aquarell</option>
+                            <option value="cyberpunk">Cyberpunk</option>
+                            <option value="fantasy">Fantasy</option>
+                        </select>
+                    </div>
+                    <div class="slider-container">
+                        <label for="image-resolution">Auflösung</label>
+                        <input type="range" id="image-resolution" class="slider" min="256" max="2048" value="1024" step="256">
+                        <div class="slider-value">
+                            <span>256px</span>
+                            <span id="image-resolution-value">1024px</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Video Controls -->
+                <div class="control-section" id="video-controls">
+                    <div class="input-group">
+                        <label for="video-prompt">Videobeschreibung</label>
+                        <textarea id="video-prompt" rows="4" placeholder="Beschreiben Sie das Video, das Sie generieren möchten..."></textarea>
+                    </div>
+                    <div class="input-group">
+                        <label for="video-style">Stil</label>
+                        <select id="video-style">
+                            <option value="cinematic">Kinematisch</option>
+                            <option value="animation">Animation</option>
+                            <option value="documentary">Dokumentation</option>
+                            <option value="vlog">Vlog</option>
+                        </select>
+                    </div>
+                    <div class="slider-container">
+                        <label for="video-duration">Dauer (Sekunden)</label>
+                        <input type="range" id="video-duration" class="slider" min="5" max="60" value="15">
+                        <div class="slider-value">
+                            <span>5s</span>
+                            <span id="video-duration-value">15s</span>
+                        </div>
+                    </div>
+                </div>
+                <button class="generate-btn" id="generate-btn">
+                    <i class="fas fa-magic"></i> Generieren
+                </button>
+            </div>
+            <div class="output-preview">
+                <div class="preview-header">
+                    <h2 class="preview-title">Vorschau</h2>
+                    <div class="preview-actions">
+                        <button class="action-btn" title="Herunterladen">
+                            <i class="fas fa-download"></i>
+                        </button>
+                        <button class="action-btn" title="Teilen">
+                            <i class="fas fa-share-alt"></i>
+                        </button>
+                        <button class="action-btn" title="Vollbild">
+                            <i class="fas fa-expand"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="preview-content empty" id="preview-content">
+                    <i class="fas fa-robot"></i>
+                    <p>Wählen Sie einen Modus und generieren Sie Inhalte</p>
+                </div>
+            </div>
+        </div>
+        <div class="history-panel">
+            <div class="history-header">
+                <h2 class="history-title">Verlauf</h2>
+                <button class="clear-history">
+                    <i class="fas fa-trash"></i> Verlauf löschen
+                </button>
+            </div>
+            <div class="history-items" id="history-items">
+                <!-- History items will be added dynamically -->
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Mode switching
+            const modeBtns = document.querySelectorAll('.mode-btn');
+            const controlSections = document.querySelectorAll('.control-section');
+            modeBtns.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    // Remove active class from all buttons
+                    modeBtns.forEach(b => b.classList.remove('active'));
+                    // Add active class to clicked button
+                    btn.classList.add('active');
+                    // Hide all control sections
+                    controlSections.forEach(section => section.classList.remove('active'));
+                    // Show the selected control section
+                    const mode = btn.dataset.mode;
+                    document.getElementById(`${mode}-controls`).classList.add('active');
+                    // Update preview title
+                    const previewTitle = document.querySelector('.preview-title');
+                    const modes = {
+                        text: 'Textvorschau',
+                        image: 'Bildvorschau',
+                        video: 'Videovorschau'
+                    };
+                    previewTitle.textContent = modes[mode];
+                });
+            });
+            // Slider value updates
+            const sliders = document.querySelectorAll('.slider');
+            sliders.forEach(slider => {
+                const valueDisplay = document.getElementById(`${slider.id}-value`);
+                slider.addEventListener('input', () => {
+                    valueDisplay.textContent = slider.value;
+                    // Add unit if needed
+                    if (slider.id === 'text-length') {
+                        valueDisplay.textContent += ' Wörter';
+                    } else if (slider.id === 'image-resolution') {
+                        valueDisplay.textContent += 'px';
+                    } else if (slider.id === 'video-duration') {
+                        valueDisplay.textContent += 's';
+                    }
+                });
+            });
+            // Generate button click handler
+            const generateBtn = document.getElementById('generate-btn');
+            const previewContent = document.getElementById('preview-content');
+            const historyItems = document.getElementById('history-items');
+            generateBtn.addEventListener('click', () => {
+                const activeMode = document.querySelector('.mode-btn.active').dataset.mode;
+                const prompt = document.getElementById(`${activeMode}-prompt`).value;
+                if (!prompt) {
+                    alert('Bitte geben Sie eine Beschreibung ein');
+                    return;
+                }
+                // Simulate generation
+                previewContent.classList.remove('empty');
+                previewContent.innerHTML = `
+                    <div class="generating">
+                        <i class="fas fa-spinner fa-spin fa-3x" style="color: var(--primary-color);"></i>
+                        <p style="margin-top: 15px;">Inhalt wird generiert...</p>
+                    </div>
+                `;
+                // Simulate completion after 2 seconds
+                setTimeout(() => {
+                    const now = new Date();
+                    const timeString = now.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+                    // Create preview content based on mode
+                    let previewHTML = '';
+                    let historyType = '';
+                    switch(activeMode) {
+                        case 'text':
+                            previewHTML = `
+                                <h3>Generierter Text</h3>
+                                <div style="background: white; padding: 20px; border-radius: var(--border-radius); width: 100%; max-height: 250px; overflow-y: auto;">
+                                    <p style="line-height: 1.6; color: var(--text-color);">
+                                        ${generateSampleText(prompt)}
+                                    </p>
+                                </div>
+                            `;
+                            historyType = 'text';
+                            break;
+                        case 'image':
+                            previewHTML = `
+                                <h3>Generiertes Bild</h3>
+                                <div style="background: white; padding: 20px; border-radius: var(--border-radius); width: 100%; display: flex; justify-content: center;">
+                                    <div style="width: 300px; height: 200px; background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
+                                        ${prompt.substring(0, 30)}...
+                                    </div>
+                                </div>
+                            `;
+                            historyType = 'image';
+                            break;
+                        case 'video':
+                            previewHTML = `
+                                <h3>Generiertes Video</h3>
+                                <div style="background: white; padding: 20px; border-radius: var(--border-radius); width: 100%; display: flex; justify-content: center;">
+                                    <div style="width: 300px; height: 200px; background: #333; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; position: relative;">
+                                        <i class="fas fa-play-circle" style="font-size: 3rem; opacity: 0.8;"></i>
+                                        <span style="position: absolute; bottom: 10px;">${prompt.substring(0, 20)}...</span>
+                                    </div>
+                                </div>
+                            `;
+                            historyType = 'video';
+                            break;
+                    }
+                    previewContent.innerHTML = previewHTML;
+                    // Add to history
+                    const historyItem = document.createElement('div');
+                    historyItem.className = 'history-item';
+                    historyItem.innerHTML = `
+                        <div style="display: flex; align-items: center;">
+                            <i class="fas ${getIconForMode(activeMode)}"></i>
+                            <span>${prompt.substring(0, 30)}${prompt.length > 30 ? '...' : ''}</span>
+                        </div>
+                        <div style="display: flex; align-items: center; gap: 10px;">
+                            <span class="time">${timeString}</span>
+                            <span class="type ${activeMode}">${activeMode}</span>
+                        </div>
+                    `;
+                    // Add click event to load history item
+                    historyItem.addEventListener('click', () => {
+                        // Load the history item into preview
+                        previewContent.innerHTML = previewHTML;
+                    });
+                    historyItems.prepend(historyItem);
+                }, 2000);
+            });
+            // Clear history
+            document.querySelector('.clear-history').addEventListener('click', () => {
+                if (confirm('Möchten Sie den Verlauf wirklich löschen?')) {
+                    historyItems.innerHTML = '';
+                }
+            });
+            // Helper functions
+            function generateSampleText(prompt) {
+                const styles = {
+                    standard: 'Dies ist ein standardmäßiger, klar strukturierter Text, der die Eingabeaufforderung genau befolgt. Der Inhalt ist präzise formuliert und eignet sich für formelle oder informative Zwecke.',
+                    creative: 'In einer Welt, in der die Fantasie keine Grenzen kennt, entfaltet sich diese kreative Interpretation Ihrer Eingabeaufforderung. Mit lebendigen Beschreibungen und unerwarteten Wendungen wird Ihre Idee zu einem einzigartigen Kunstwerk der Worte.',
+                    professional: 'Gemäß den höchsten Standards professioneller Kommunikation präsentieren wir Ihnen diesen Text. Mit präziser Terminologie und strukturierter Argumentation eignet sich dieser Inhalt ideal für geschäftliche oder akademische Zwecke.',
+                    casual: 'Hey! Hier ist eine lockere, freundliche Version deiner Idee. Ich hab einfach mal drauflos geschrieben, so wie man es beim Kaffee mit Freunden machen würde. Hoffentlich gefällt's dir!'
+                };
+                const selectedStyle = document.getElementById('text-style').value;
+                return `${prompt}\n\n${styles[selectedStyle]}`;
+            }
+            function getIconForMode(mode) {
+                const icons = {
+                    text: 'fa-font',
+                    image: 'fa-image',
+                    video: 'fa-video'
+                };
+                return icons[mode];
+            }
+        });
+    </script>
+</body>
+</html>