We should have an sky atmoshpehere it should not be a static website. We also need to have a backgorund that represent sky. And I think you should make the clouds looks better.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Fluffy Mindscapes
-emoji: 🏃
-colorFrom: purple
-colorTo: gray
+title: Fluffy Mindscapes ☁️✨
+colorFrom: gray
+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/background-clouds.js

@@ -0,0 +1,79 @@
+class BackgroundClouds extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    pointer-events: none;
+                    z-index: 0;
+                    overflow: hidden;
+                }
+                
+                .bg-cloud {
+                    position: absolute;
+                    background: white;
+                    border-radius: 50%;
+                    opacity: 0.4;
+                    filter: blur(5px);
+                    animation: float 20s linear infinite;
+                }
+                
+                .bg-cloud::before, .bg-cloud::after {
+                    content: '';
+                    position: absolute;
+                    background: white;
+                    border-radius: 50%;
+                }
+                
+                @keyframes float {
+                    0% { transform: translateX(0) translateY(0); }
+                    25% { transform: translateX(5%) translateY(-3%); }
+                    50% { transform: translateX(10%) translateY(0); }
+                    75% { transform: translateX(5%) translateY(3%); }
+                    100% { transform: translateX(0) translateY(0); }
+                }
+            </style>
+            <div id="clouds-container"></div>
+        `;
+        
+        this.createClouds();
+    }
+
+    createClouds() {
+        const container = this.shadowRoot.getElementById('clouds-container');
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        
+        for (let i = 0; i < 20; i++) {
+            const cloud = document.createElement('div');
+            const size = Math.random() * 150 + 50;
+            const opacity = Math.random() * 0.5 + 0.1;
+            const left = Math.random() * width;
+            const top = Math.random() * height;
+            const duration = Math.random() * 30 + 30;
+            
+            cloud.className = 'bg-cloud';
+            cloud.style.width = `${size}px`;
+            cloud.style.height = `${size * 0.6}px`;
+            cloud.style.left = `${left}px`;
+            cloud.style.top = `${top}px`;
+            cloud.style.opacity = opacity;
+            cloud.style.animationDuration = `${duration}s`;
+            cloud.style.animationDelay = `${Math.random() * 20}s`;
+            
+            container.appendChild(cloud);
+        }
+    }
+}
+
+customElements.define('background-clouds', BackgroundClouds);

components/cloud.js

@@ -0,0 +1,86 @@
+class CloudElement extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        const text = this.getAttribute('text') || '';
+        const percentage = this.getAttribute('percentage') || '0';
+        
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: inline-block;
+                    position: relative;
+                }
+                
+                .cloud {
+                    background: white;
+                    border-radius: 50%;
+                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-weight: bold;
+                    color: #333;
+                    cursor: pointer;
+                    transition: all 0.5s ease;
+                    position: relative;
+                }
+                
+                .cloud-text {
+                    position: relative;
+                    z-index: 2;
+                    text-align: center;
+                }
+                
+                .cloud-percentage {
+                    font-size: 0.6em;
+                    display: block;
+                    margin-top: 4px;
+                    color: #666;
+                }
+                
+                .cloud-circle {
+                    position: absolute;
+                    background: white;
+                    border-radius: 50%;
+                }
+            </style>
+            <div class="cloud">
+                <div class="cloud-text">
+                    ${text}
+                    <span class="cloud-percentage">${percentage}%</span>
+                </div>
+            </div>
+        `;
+        
+        // Set cloud size based on percentage
+        const cloud = this.shadowRoot.querySelector('.cloud');
+        const baseSize = 60;
+        const size = baseSize * (0.5 + (parseInt(percentage) / 200));
+        cloud.style.width = `${size}px`;
+        cloud.style.height = `${size}px`;
+        
+        // Add cloud shape circles
+        const smallCircle1 = document.createElement('div');
+        smallCircle1.className = 'cloud-circle';
+        smallCircle1.style.width = `${size * 0.6}px`;
+        smallCircle1.style.height = `${size * 0.6}px`;
+        smallCircle1.style.top = `${-size * 0.2}px`;
+        smallCircle1.style.left = `${-size * 0.2}px`;
+        
+        const smallCircle2 = document.createElement('div');
+        smallCircle2.className = 'cloud-circle';
+        smallCircle2.style.width = `${size * 0.5}px`;
+        smallCircle2.style.height = `${size * 0.5}px`;
+        smallCircle2.style.bottom = `${-size * 0.1}px`;
+        smallCircle2.style.right = `${-size * 0.15}px`;
+        
+        cloud.appendChild(smallCircle1);
+        cloud.appendChild(smallCircle2);
+    }
+}
+
+customElements.define('custom-cloud', CloudElement);

index.html

@@ -1,19 +1,50 @@
-<!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" class="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cloudy Connections</title>
+    <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>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/universal-sentence-encoder"></script>
+</head>
+<body>
+    <div class="cloud-bg" id="background-clouds"></div>
+<main class="container mx-auto px-4 py-8">
+        <header class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-gray-800 mb-2">Cloudy Connections</h1>
+            <p class="text-lg text-gray-600">See how your text relates to our fluffy cloud concepts</p>
+        </header>
+
+        <div class="max-w-2xl mx-auto mb-12">
+            <div class="relative">
+                <input type="text" id="text-input" placeholder="Type something here..." 
+                    class="w-full px-6 py-4 rounded-full border-2 border-gray-200 focus:outline-none focus:border-blue-400 text-lg shadow-sm">
+                <button id="analyze-btn" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white p-2 rounded-full hover:bg-blue-600 transition">
+                    <i data-feather="search"></i>
+                </button>
+            </div>
+        </div>
+
+        <div id="cloud-container" class="relative h-96 mb-12">
+            <!-- Clouds will be dynamically inserted here -->
+        </div>
+
+        <div id="results" class="hidden bg-white rounded-xl p-6 shadow-md max-w-2xl mx-auto">
+            <h2 class="text-xl font-semibold mb-4">Analysis Results</h2>
+            <div id="similarity-results" class="space-y-3">
+                <!-- Results will be shown here -->
+            </div>
+        </div>
+    </main>
+
+    <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,263 @@
+
+document.addEventListener('DOMContentLoaded', async function() {
+    // Create background clouds
+    createBackgroundClouds();
+
+// Initialize cloud data
+    const cloudData = [
+        { text: "Happiness", percentage: 0 },
+        { text: "Adventure", percentage: 0 },
+        { text: "Creativity", percentage: 0 },
+        { text: "Friendship", percentage: 0 },
+        { text: "Success", percentage: 0 },
+        { text: "Love", percentage: 0 },
+        { text: "Freedom", percentage: 0 },
+        { text: "Peace", percentage: 0 },
+        { text: "Growth", percentage: 0 },
+        { text: "Discovery", percentage: 0 }
+    ];
+
+    const cloudContainer = document.getElementById('cloud-container');
+    const textInput = document.getElementById('text-input');
+    const analyzeBtn = document.getElementById('analyze-btn');
+    const resultsSection = document.getElementById('results');
+    const similarityResults = document.getElementById('similarity-results');
+
+    // Load the Universal Sentence Encoder
+    let model;
+    try {
+        model = await use.load();
+        console.log('Model loaded successfully');
+    } catch (err) {
+        console.error('Failed to load model:', err);
+        return;
+    }
+
+    // Create initial clouds
+    createClouds();
+
+    analyzeBtn.addEventListener('click', analyzeText);
+    textInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+            analyzeText();
+        }
+    });
+
+    function createClouds() {
+        cloudContainer.innerHTML = '';
+        
+        // Calculate positions for two rows of clouds
+        const containerWidth = cloudContainer.offsetWidth;
+        const containerHeight = cloudContainer.offsetHeight;
+        
+        // First row (top)
+        for (let i = 0; i < 5; i++) {
+            const x = (i + 0.5) * (containerWidth / 5.5);
+            const y = containerHeight * 0.3;
+            createCloud(cloudData[i], x, y, 60);
+        }
+        
+        // Second row (bottom)
+        for (let i = 5; i < 10; i++) {
+            const x = (i - 4.5) * (containerWidth / 5.5);
+            const y = containerHeight * 0.7;
+            createCloud(cloudData[i], x, y, 60);
+        }
+    }
+function createBackgroundClouds() {
+    const bgContainer = document.getElementById('background-clouds');
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    
+    for (let i = 0; i < 15; i++) {
+        const cloud = document.createElement('div');
+        const size = Math.random() * 120 + 80;
+        const opacity = Math.random() * 0.7 + 0.3;
+        
+        cloud.className = 'bg-cloud';
+        cloud.style.width = `${size}px`;
+        cloud.style.height = `${size * 0.6}px`;
+        cloud.style.left = `${Math.random() * width}px`;
+        cloud.style.top = `${Math.random() * height}px`;
+        cloud.style.opacity = opacity;
+        cloud.style.animation = `float ${Math.random() * 10 + 10}s linear infinite`;
+        cloud.style.animationDelay = `${Math.random() * 10}s`;
+        
+        bgContainer.appendChild(cloud);
+    }
+}
+
+function createCloud(data, x, y, baseSize) {
+const cloud = document.createElement('div');
+        cloud.className = 'cloud';
+        
+        // Calculate size based on percentage (default to small)
+        const size = baseSize * (0.7 + (data.percentage / 150));
+        const blurAmount = Math.min(10, data.percentage / 10);
+        cloud.style.width = `${size}px`;
+        cloud.style.height = `${size * 0.8}px`;
+        cloud.style.left = `${x - size/2}px`;
+        cloud.style.top = `${y - size/2}px`;
+        cloud.style.filter = `drop-shadow(0 0 ${blurAmount}px rgba(255, 255, 255, 0.8)) blur(${blurAmount/3}px)`;
+// Create cloud shape with multiple circles
+        cloud.innerHTML = `
+            <div class="cloud-text">
+                ${data.text}
+                <span class="cloud-percentage">${data.percentage}%</span>
+            </div>
+        `;
+        
+        // Add additional circles for cloud shape
+        // Create multiple circles for more realistic cloud shape
+        for (let i = 0; i < 5; i++) {
+            const circle = document.createElement('div');
+            const circleSize = size * (0.3 + Math.random() * 0.4);
+            circle.className = 'cloud-circle';
+            circle.style.width = `${circleSize}px`;
+            circle.style.height = `${circleSize}px`;
+            
+            // Position circles randomly around main cloud
+            const angle = Math.random() * Math.PI * 2;
+            const distance = size * 0.3;
+            circle.style.left = `${Math.cos(angle) * distance}px`;
+            circle.style.top = `${Math.sin(angle) * distance}px`;
+            
+            cloud.appendChild(circle);
+        }
+cloud.appendChild(smallCircle1);
+        cloud.appendChild(smallCircle2);
+        
+        cloudContainer.appendChild(cloud);
+        return cloud;
+    }
+
+    async function analyzeText() {
+        const inputText = textInput.value.trim();
+        if (!inputText) return;
+        
+        try {
+            // Generate embeddings for input text and cloud texts
+            const inputEmbedding = await model.embed([inputText]);
+            const cloudTexts = cloudData.map(c => c.text);
+            const cloudEmbeddings = await model.embed(cloudTexts);
+            
+            // Calculate cosine similarity between input and each cloud text
+            const inputArray = await inputEmbedding.array();
+            const cloudArrays = await cloudEmbeddings.array();
+            
+            const similarities = [];
+            for (let i = 0; i < cloudData.length; i++) {
+                const similarity = cosineSimilarity(inputArray[0], cloudArrays[i]);
+                const percentage = Math.round(similarity * 100);
+                cloudData[i].percentage = percentage;
+                similarities.push({ text: cloudData[i].text, percentage });
+            }
+            
+            // Sort by percentage descending
+            similarities.sort((a, b) => b.percentage - a.percentage);
+            
+            // Update UI with results
+            updateClouds();
+            showResults(inputText, similarities);
+            
+        } catch (err) {
+            console.error('Error analyzing text:', err);
+            alert('An error occurred while analyzing your text. Please try again.');
+        }
+    }
+
+    function updateClouds() {
+        cloudContainer.innerHTML = '';
+        
+        const containerWidth = cloudContainer.offsetWidth;
+        const containerHeight = cloudContainer.offsetHeight;
+        
+        // Sort clouds by percentage (highest first)
+        const sortedClouds = [...cloudData].sort((a, b) => b.percentage - a.percentage);
+        
+        // Position clouds with highest percentages more centered and larger
+        for (let i = 0; i < sortedClouds.length; i++) {
+            const cloud = sortedClouds[i];
+            
+            // Calculate position - higher percentage clouds are more centered
+            const x = containerWidth * (0.3 + 0.4 * (i / (sortedClouds.length - 1)));
+            
+            // Alternate between top and bottom rows
+            const y = i % 2 === 0 
+                ? containerHeight * (0.3 + 0.1 * (1 - cloud.percentage/100))
+                : containerHeight * (0.7 - 0.1 * (1 - cloud.percentage/100));
+            
+            // Base size scales with percentage
+            const baseSize = 40 + (cloud.percentage * 0.8);
+            createCloud(cloud, x, y, baseSize);
+        }
+    }
+
+    function showResults(inputText, similarities) {
+        resultsSection.classList.remove('hidden');
+        similarityResults.innerHTML = '';
+        
+        const heading = document.createElement('h3');
+        heading.className = 'font-medium text-lg mb-2';
+        heading.textContent = `How "${inputText}" relates to our concepts:`;
+        similarityResults.appendChild(heading);
+        
+        similarities.forEach(item => {
+            const resultItem = document.createElement('div');
+            resultItem.className = 'flex items-center justify-between';
+            
+            const textSpan = document.createElement('span');
+            textSpan.className = 'text-gray-700';
+            textSpan.textContent = item.text;
+            
+            const percentageBar = document.createElement('div');
+            percentageBar.className = 'flex items-center w-1/2';
+            
+            const barContainer = document.createElement('div');
+            barContainer.className = 'flex-1 bg-gray-200 rounded-full h-4 mx-2';
+            
+            const bar = document.createElement('div');
+            bar.className = 'bg-blue-500 h-4 rounded-full';
+            bar.style.width = `${item.percentage}%`;
+            
+            const percentageText = document.createElement('span');
+            percentageText.className = 'text-gray-600 w-12 text-right';
+            percentageText.textContent = `${item.percentage}%`;
+            
+            barContainer.appendChild(bar);
+            percentageBar.appendChild(barContainer);
+            percentageBar.appendChild(percentageText);
+            
+            resultItem.appendChild(textSpan);
+            resultItem.appendChild(percentageBar);
+            similarityResults.appendChild(resultItem);
+        });
+    }
+
+    // Helper function to calculate cosine similarity
+    function cosineSimilarity(vecA, vecB) {
+        let dotProduct = 0;
+        let normA = 0;
+        let normB = 0;
+        
+        for (let i = 0; i < vecA.length; i++) {
+            dotProduct += vecA[i] * vecB[i];
+            normA += vecA[i] * vecA[i];
+            normB += vecB[i] * vecB[i];
+        }
+        
+        normA = Math.sqrt(normA);
+        normB = Math.sqrt(normB);
+        
+        return dotProduct / (normA * normB);
+    }
+
+    // Handle window resize
+    window.addEventListener('resize', () => {
+        if (cloudData.some(c => c.percentage > 0)) {
+            updateClouds();
+        } else {
+            createClouds();
+        }
+    });
+});

style.css

@@ -1,28 +1,56 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.cloud {
+    position: absolute;
+    background: white;
+    border-radius: 50%;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    color: #333;
+    cursor: pointer;
+    transition: all 0.5s ease;
+    animation: float 3s ease-in-out infinite;
+    will-change: transform;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.cloud::before, .cloud::after {
+    content: '';
+    position: absolute;
+    background: white;
+    border-radius: 50%;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.cloud-text {
+    position: relative;
+    z-index: 2;
+    text-align: center;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.cloud-percentage {
+    font-size: 0.6em;
+    display: block;
+    margin-top: 4px;
+    color: #666;
 }
+
+#text-input:focus {
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
+}
+
+#analyze-btn {
+    transition: all 0.2s ease;
+}
+
+#analyze-btn:hover {
+    transform: translateY(-50%) scale(1.1);
+}