A deeply integrated CivitAI client that accepts user supplied CivitAI keys and quick check-box age verification to unlock the vast and diverse world of different base modes

README.md

@@ -1,10 +1,13 @@
 ---
-title: Civitai Explorer
-emoji: 👁
-colorFrom: pink
-colorTo: gray
+title: CivitAI Explorer 🔍
+colorFrom: purple
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,94 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin-top: 4rem;
+        }
+        
+        footer {
+          background-color: #111827;
+          border-top: 1px solid #374151;
+          padding: 2rem 0;
+        }
+        
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+        
+        .footer-content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+        }
+        
+        .social-links {
+          display: flex;
+          margin: 1rem 0;
+        }
+        
+        .social-link {
+          margin: 0 0.5rem;
+          color: #d1d5db;
+          transition: color 0.3s;
+        }
+        
+        .social-link:hover {
+          color: #10b981;
+        }
+        
+        .copyright {
+          color: #9ca3af;
+          font-size: 0.875rem;
+          margin-top: 1rem;
+        }
+      </style>
+      
+      <footer>
+        <div class="container">
+          <div class="footer-content">
+            <div class="logo">
+              <i data-feather="box" style="color: #10b981;"></i>
+              <span style="margin-left: 0.5rem; font-weight: bold;">CivitAI Explorer</span>
+            </div>
+            
+            <div class="social-links">
+              <a href="#" class="social-link">
+                <i data-feather="github"></i>
+              </a>
+              <a href="#" class="social-link">
+                <i data-feather="twitter"></i>
+              </a>
+              <a href="#" class="social-link">
+                <i data-feather="discord"></i>
+              </a>
+            </div>
+            
+            <p class="copyright">
+              &copy; ${new Date().getFullYear()} CivitAI Explorer. This is an unofficial client. All models belong to their respective creators.
+            </p>
+          </div>
+        </div>
+      </footer>
+    `;
+    
+    // Initialize feather icons
+    setTimeout(() => {
+      const featherScript = document.createElement('script');
+      featherScript.src = "https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js";
+      featherScript.onload = () => {
+        if (this.shadowRoot) {
+          feather.replace({}, this.shadowRoot);
+        }
+      };
+      this.shadowRoot.appendChild(featherScript);
+    }, 0);
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/header.js

@@ -0,0 +1,106 @@
+class CustomHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        
+        header {
+          background-color: #111827;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+        
+        nav {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 1rem 0;
+        }
+        
+        .logo {
+          display: flex;
+          align-items: center;
+          font-weight: bold;
+          font-size: 1.5rem;
+          color: #10b981;
+        }
+        
+        .logo i {
+          margin-right: 0.5rem;
+        }
+        
+        ul {
+          display: flex;
+          list-style: none;
+        }
+        
+        li {
+          margin-left: 2rem;
+        }
+        
+        a {
+          color: #d1d5db;
+          text-decoration: none;
+          transition: color 0.3s;
+        }
+        
+        a:hover {
+          color: #10b981;
+        }
+        
+        @media (max-width: 768px) {
+          nav {
+            flex-direction: column;
+          }
+          
+          ul {
+            margin-top: 1rem;
+          }
+          
+          li {
+            margin: 0 1rem;
+          }
+        }
+      </style>
+      
+      <header>
+        <div class="container">
+          <nav>
+            <a href="/" class="logo">
+              <i data-feather="box"></i>
+              <span>CivitAI Explorer</span>
+            </a>
+            <ul>
+              <li><a href="/">Home</a></li>
+              <li><a href="#">Models</a></li>
+              <li><a href="#">Collections</a></li>
+              <li><a href="#">About</a></li>
+            </ul>
+          </nav>
+        </div>
+      </header>
+    `;
+    
+    // Initialize feather icons after a short delay to ensure DOM is ready
+    setTimeout(() => {
+      const featherScript = document.createElement('script');
+      featherScript.src = "https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js";
+      featherScript.onload = () => {
+        if (this.shadowRoot) {
+          feather.replace({}, this.shadowRoot);
+        }
+      };
+      this.shadowRoot.appendChild(featherScript);
+    }, 0);
+  }
+}
+
+customElements.define('custom-header', CustomHeader);

index.html

@@ -1,19 +1,57 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CivitAI Explorer</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-900 text-white">
+    <custom-header></custom-header>
+    
+    <main class="container mx-auto px-4 py-8">
+        <section class="mb-12">
+            <h1 class="text-4xl font-bold mb-6 text-center">Unlock the World of AI Models</h1>
+            <p class="text-lg text-center max-w-2xl mx-auto mb-8">
+                Access thousands of AI models from CivitAI with our secure explorer. 
+                Simply provide your API key and verify your age to get started.
+            </p>
+            
+            <div class="max-w-md mx-auto bg-gray-800 rounded-xl shadow-md overflow-hidden p-6">
+                <div class="mb-4">
+                    <label for="apiKey" class="block text-sm font-medium mb-2">CivitAI API Key</label>
+                    <input type="password" id="apiKey" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="Enter your API key">
+                </div>
+                
+                <div class="flex items-center mb-6">
+                    <input id="ageVerification" type="checkbox" class="w-4 h-4 text-green-500 bg-gray-700 border-gray-600 rounded focus:ring-green-500">
+                    <label for="ageVerification" class="ml-2 text-sm">I am 18+ years old</label>
+                </div>
+                
+                <button id="unlockBtn" class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300">
+                    Unlock Models
+                </button>
+            </div>
+        </section>
+        
+        <section id="modelsSection" class="hidden">
+            <h2 class="text-3xl font-bold mb-6">Featured Models</h2>
+            <div id="modelsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Model cards will be populated here -->
+            </div>
+        </section>
+    </main>
+    
+    <custom-footer></custom-footer>
+    
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,99 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const apiKeyInput = document.getElementById('apiKey');
+    const ageVerification = document.getElementById('ageVerification');
+    const unlockBtn = document.getElementById('unlockBtn');
+    const modelsSection = document.getElementById('modelsSection');
+    const modelsContainer = document.getElementById('modelsContainer');
+    
+    // Check if API key is stored in localStorage
+    const storedApiKey = localStorage.getItem('civitaiApiKey');
+    if (storedApiKey) {
+        apiKeyInput.value = storedApiKey;
+    }
+    
+    unlockBtn.addEventListener('click', async function() {
+        const apiKey = apiKeyInput.value.trim();
+        const isVerified = ageVerification.checked;
+        
+        if (!apiKey) {
+            alert('Please enter your CivitAI API key');
+            return;
+        }
+        
+        if (!isVerified) {
+            alert('Please verify your age to proceed');
+            return;
+        }
+        
+        // Store API key in localStorage
+        localStorage.setItem('civitaiApiKey', apiKey);
+        
+        // Show loading state
+        unlockBtn.innerHTML = '<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Loading...';
+        unlockBtn.disabled = true;
+        
+        try {
+            // Fetch models from CivitAI API
+            const response = await fetch('https://civitai.com/api/v1/models?limit=6', {
+                headers: {
+                    'Authorization': `Bearer ${apiKey}`
+                }
+            });
+            
+            if (!response.ok) {
+                throw new Error('Invalid API key or network error');
+            }
+            
+            const data = await response.json();
+            displayModels(data.items);
+            
+            // Show models section
+            modelsSection.classList.remove('hidden');
+            
+            // Scroll to models section
+            modelsSection.scrollIntoView({ behavior: 'smooth' });
+        } catch (error) {
+            alert('Error: ' + error.message);
+        } finally {
+            // Reset button
+            unlockBtn.textContent = 'Unlock Models';
+            unlockBtn.disabled = false;
+        }
+    });
+    
+    function displayModels(models) {
+        modelsContainer.innerHTML = '';
+        
+        models.forEach(model => {
+            const modelCard = document.createElement('div');
+            modelCard.className = 'model-card';
+            
+            // Get first image or use placeholder
+            const imageUrl = model.images && model.images.length > 0 ? 
+                model.images[0].url : 
+                `http://static.photos/technology/320x240/${model.id}`;
+            
+            modelCard.innerHTML = `
+                <img src="${imageUrl}" alt="${model.name}" class="model-image">
+                <div class="p-4">
+                    <h3 class="font-bold text-lg mb-2">${model.name}</h3>
+                    <p class="text-gray-400 text-sm mb-3 line-clamp-2">${model.description || 'No description available'}</p>
+                    <div class="model-stats">
+                        <i data-feather="download"></i>
+                        <span>${model.downloads}</span>
+                        <i data-feather="heart" class="ml-3"></i>
+                        <span>${model.favorites}</span>
+                    </div>
+                    <div class="mt-3">
+                        <span class="inline-block bg-green-500 text-xs px-2 py-1 rounded">${model.type}</span>
+                    </div>
+                </div>
+            `;
+            
+            modelsContainer.appendChild(modelCard);
+        });
+        
+        // Reinitialize feather icons
+        feather.replace();
+    }
+});

style.css

@@ -1,28 +1,49 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom styles for model cards */
+.model-card {
+    @apply bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105;
+}
+
+.model-image {
+    @apply w-full h-48 object-cover;
+}
+
+.model-stats {
+    @apply flex items-center text-sm text-gray-400 mt-2;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.model-stats svg {
+    @apply mr-1;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Animation for loading spinner */
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.animate-spin {
+    animation: spin 1s linear infinite;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
+
+::-webkit-scrollbar-track {
+    background: #1f2937;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+}