Spaces:

sky-meilin
/

anycoder-63e7151c

Running

App Files Files Community

anycoder-63e7151c / index.html

sky-meilin

Upload folder using huggingface_hub

e42e79a verified about 1 month ago

raw

history blame contribute delete

28 kB

	<!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>