Hugging Face's logo

Spaces:
AI4U2
/
test
Running

App Files Community
test / index.html
AI4U2's picture
AI4U2
Add 2 files
c2645a2 verified
Raw History Blame Contribute Delete
18.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Artistic Render Studio</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #1e1b4b 0%, #701a75 100%);
}
.nsfw-badge {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.image-placeholder {
background: linear-gradient(45deg, #2e1065 25%, #4c1d95 50%, #2e1065 75%);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.blur-overlay {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
</style>
</head>
<body class="gradient-bg min-h-screen text-white">
<div class="container mx-auto px-4 py-8">
<!-- Age Verification Modal -->
<div id="ageModal" class="fixed inset-0 flex items-center justify-center z-50 blur-overlay">
<div class="bg-gray-900 rounded-xl p-8 max-w-md w-full mx-4 border border-pink-500">
<div class="text-center mb-6">
<i class="fas fa-exclamation-triangle text-4xl text-pink-500 mb-4"></i>
<h2 class="text-2xl font-bold mb-2">Age Verification</h2>
<p class="text-gray-300">This content is restricted to adults only. You must be 18+ to continue.</p>
</div>
<div class="flex flex-col space-y-4">
<button id="confirmAge" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-4 rounded-lg transition">
I'm 18 or older - Enter
</button>
<button onclick="window.location.href='https://www.google.com'" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-4 rounded-lg transition">
I'm under 18 - Exit
</button>
</div>
</div>
</div>
<!-- Main App (hidden until age verification) -->
<div id="mainApp" class="hidden">
<!-- Header -->
<header class="flex justify-between items-center mb-8">
<div class="flex items-center">
<i class="fas fa-paint-brush text-3xl text-pink-400 mr-3"></i>
<h1 class="text-2xl font-bold">Artistic Render Studio</h1>
</div>
<div class="flex items-center space-x-4">
<span class="nsfw-badge bg-pink-600 text-xs font-bold px-3 py-1 rounded-full flex items-center">
<i class="fas fa-exclamation-circle mr-1"></i> NSFW
</span>
<button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-user-circle mr-2"></i> Account
</button>
</div>
</header>
<!-- Main Content -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Generation Controls -->
<div class="lg:col-span-1 bg-gray-900 bg-opacity-50 rounded-xl p-6 border border-gray-700">
<h2 class="text-xl font-bold mb-6 flex items-center">
<i class="fas fa-sliders-h mr-2 text-pink-400"></i> Generation Settings
</h2>
<div class="space-y-6">
<!-- Model Selection -->
<div>
<label class="block text-sm font-medium mb-2">Model Style</label>
<select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-pink-500 focus:border-transparent">
<option>Realistic</option>
<option>Anime</option>
<option>Cartoon</option>
<option>Fantasy</option>
<option selected>Custom Blend</option>
</select>
</div>
<!-- Prompt Input -->
<div>
<label class="block text-sm font-medium mb-2">Prompt</label>
<textarea
class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 h-32 focus:ring-2 focus:ring-pink-500 focus:border-transparent"
placeholder="Describe the image you want to generate..."></textarea>
</div>
<!-- Negative Prompt -->
<div>
<label class="block text-sm font-medium mb-2">Negative Prompt</label>
<textarea
class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 h-24 focus:ring-2 focus:ring-pink-500 focus:border-transparent"
placeholder="What to exclude from the image..."></textarea>
</div>
<!-- Advanced Options -->
<div class="border-t border-gray-700 pt-4">
<div class="flex justify-between items-center mb-4">
<h3 class="font-medium">Advanced Options</h3>
<button id="toggleAdvanced" class="text-pink-400 hover:text-pink-300">
<i class="fas fa-chevron-down"></i>
</button>
</div>
<div id="advancedOptions" class="hidden space-y-4">
<!-- Sampler -->
<div>
<label class="block text-sm font-medium mb-2">Sampler</label>
<select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2">
<option>Euler a</option>
<option selected>DPM++ 2M Karras</option>
<option>DDIM</option>
<option>LMS</option>
</select>
</div>
<!-- Steps -->
<div>
<label class="block text-sm font-medium mb-2">Steps <span id="stepsValue" class="text-pink-400">28</span></label>
<input type="range" min="10" max="50" value="28" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" id="stepsSlider">
</div>
<!-- CFG Scale -->
<div>
<label class="block text-sm font-medium mb-2">CFG Scale <span id="cfgValue" class="text-pink-400">7</span></label>
<input type="range" min="1" max="20" value="7" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" id="cfgSlider">
</div>
<!-- Seed -->
<div>
<label class="block text-sm font-medium mb-2">Seed</label>
<div class="flex">
<input type="number" class="flex-grow bg-gray-800 border border-gray-700 rounded-l-lg px-4 py-2" value="-1">
<button class="bg-pink-600 hover:bg-pink-700 px-3 rounded-r-lg">
<i class="fas fa-dice"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Generate Button -->
<button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-4 rounded-lg transition flex items-center justify-center">
<i class="fas fa-magic mr-2"></i> Generate Image
</button>
</div>
</div>
<!-- Image Display -->
<div class="lg:col-span-2 space-y-6">
<!-- Generated Image -->
<div class="bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-700">
<div class="image-placeholder aspect-square w-full flex items-center justify-center relative">
<div class="text-center p-8">
<i class="fas fa-image text-5xl text-gray-500 mb-4"></i>
<p class="text-gray-400">Your generated image will appear here</p>
</div>
<div class="absolute bottom-0 left-0 right-0 bg-gray-900 bg-opacity-70 p-3 flex justify-between items-center">
<span class="text-sm text-gray-300">Resolution: 512×768</span>
<div class="flex space-x-2">
<button class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg">
<i class="fas fa-download"></i>
</button>
<button class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg">
<i class="fas fa-share-alt"></i>
</button>
<button class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg">
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Recent Creations -->
<div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border border-gray-700">
<h2 class="text-xl font-bold mb-6 flex items-center">
<i class="fas fa-history mr-2 text-pink-400"></i> Recent Creations
</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
<!-- Thumbnail 1 -->
<div class="aspect-square bg-gray-800 rounded-lg overflow-hidden relative group">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
<div class="absolute bottom-0 left-0 p-2 w-full">
<p class="text-xs truncate">Fantasy elf portrait</p>
</div>
<button class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
<i class="fas fa-expand text-2xl bg-black bg-opacity-50 p-2 rounded-full"></i>
</button>
</div>
<!-- Thumbnail 2 -->
<div class="aspect-square bg-gray-800 rounded-lg overflow-hidden relative group">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
<div class="absolute bottom-0 left-0 p-2 w-full">
<p class="text-xs truncate">Cyberpunk character</p>
</div>
<button class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
<i class="fas fa-expand text-2xl bg-black bg-opacity-50 p-2 rounded-full"></i>
</button>
</div>
<!-- Thumbnail 3 -->
<div class="aspect-square bg-gray-800 rounded-lg overflow-hidden relative group">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
<div class="absolute bottom-0 left-0 p-2 w-full">
<p class="text-xs truncate">Pin-up style</p>
</div>
<button class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
<i class="fas fa-expand text-2xl bg-black bg-opacity-50 p-2 rounded-full"></i>
</button>
</div>
<!-- Thumbnail 4 -->
<div class="aspect-square bg-gray-800 rounded-lg overflow-hidden relative group">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
<div class="absolute bottom-0 left-0 p-2 w-full">
<p class="text-xs truncate">BDSM concept</p>
</div>
<button class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
<i class="fas fa-expand text-2xl bg-black bg-opacity-50 p-2 rounded-full"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mt-12 pt-6 border-t border-gray-800 text-center text-gray-400 text-sm">
<p>Artistic Render Studio - For artistic and creative purposes only</p>
<p class="mt-2">By using this service, you confirm you are 18+ and agree to our <a href="#" class="text-pink-400 hover:underline">Terms</a> and <a href="#" class="text-pink-400 hover:underline">Privacy Policy</a></p>
</footer>
</div>
</div>
<script>
// Age verification
document.getElementById('confirmAge').addEventListener('click', function() {
document.getElementById('ageModal').classList.add('hidden');
document.getElementById('mainApp').classList.remove('hidden');
// Store verification in localStorage
localStorage.setItem('ageVerified', 'true');
});
// Check if already verified
if(localStorage.getItem('ageVerified') === 'true') {
document.getElementById('ageModal').classList.add('hidden');
document.getElementById('mainApp').classList.remove('hidden');
}
// Toggle advanced options
document.getElementById('toggleAdvanced').addEventListener('click', function() {
const options = document.getElementById('advancedOptions');
const icon = this.querySelector('i');
if(options.classList.contains('hidden')) {
options.classList.remove('hidden');
icon.classList.remove('fa-chevron-down');
icon.classList.add('fa-chevron-up');
} else {
options.classList.add('hidden');
icon.classList.remove('fa-chevron-up');
icon.classList.add('fa-chevron-down');
}
});
// Update slider values
document.getElementById('stepsSlider').addEventListener('input', function() {
document.getElementById('stepsValue').textContent = this.value;
});
document.getElementById('cfgSlider').addEventListener('input', function() {
document.getElementById('cfgValue').textContent = this.value;
});
// Simulate generation (just for demo)
document.querySelector('button:contains("Generate Image")').addEventListener('click', function() {
const placeholder = document.querySelector('.image-placeholder');
const icon = document.createElement('i');
icon.className = 'fas fa-spinner fa-spin text-4xl text-pink-400';
placeholder.innerHTML = '';
placeholder.appendChild(icon);
// Simulate generation delay
setTimeout(() => {
placeholder.innerHTML = `
<div class="absolute inset-0 flex items-center justify-center">
<p class="text-center p-8">
<i class="fas fa-check-circle text-4xl text-green-400 mb-4"></i>
<p class="text-gray-300">Image generated successfully!</p>
</p>
</div>
`;
}, 3000);
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AI4U2/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>