there is a square but there is no clouds in it. Do you understand the words that are coming out of my mouth?

index.html

@@ -33,7 +33,7 @@
             <!-- 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">
+<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 -->
@@ -41,10 +41,11 @@
         </div>
     </main>
     <script src="components/background-clouds.js"></script>
+    <script src="components/cloud.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
-</html>
+</html>

script.js

@@ -1,6 +1,6 @@
 
 document.addEventListener('DOMContentLoaded', async function() {
-// Initialize cloud data
+    // Initialize cloud data
     const cloudData = [
         { text: "Happiness", percentage: 0 },
         { text: "Adventure", percentage: 0 },
@@ -32,6 +32,7 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     // Create initial clouds
     createClouds();
+
     // Add event listeners
     analyzeBtn.addEventListener('click', () => {
         analyzeBtn.disabled = true;
@@ -50,58 +51,50 @@ document.addEventListener('DOMContentLoaded', async function() {
             analyzeBtn.click();
         }
     });
-function createClouds() {
-    cloudContainer.innerHTML = '';
-    
-    const containerWidth = cloudContainer.offsetWidth;
-    const containerHeight = cloudContainer.offsetHeight;
-    
-    // Create a circular layout for initial clouds
-    const centerX = containerWidth / 2;
-    const centerY = containerHeight / 2;
-    const radius = Math.min(containerWidth, containerHeight) * 0.35;
-    
-    cloudData.forEach((cloud, i) => {
-        const angle = (i / cloudData.length) * Math.PI * 2;
-        const x = centerX + Math.cos(angle) * radius;
-        const y = centerY + Math.sin(angle) * radius;
+
+    function createClouds() {
+        cloudContainer.innerHTML = '';
         
-        // Create cloud with base size
-        createCloud(cloud, x, y, 40);
-    });
-}
-function createCloud(data, x, y, baseSize) {
-    const cloud = document.createElement('custom-cloud');
-    cloud.setAttribute('text', data.text);
-    cloud.setAttribute('percentage', data.percentage);
-    
-    // Position the cloud
-    cloud.style.position = 'absolute';
-    cloud.style.left = `${x}px`;
-    cloud.style.top = `${y}px`;
-    cloud.style.transform = 'translate(-50%, -50%)';
-    
-    // Scale based on percentage (even if 0%)
-    const scale = 0.7 + (data.percentage / 150);
-    cloud.style.transform += ` scale(${scale})`;
-    
-    // Add animation
-    cloud.style.animation = `float 3s ease-in-out infinite`;
-    cloud.style.animationDelay = `${Math.random() * 0.5}s`;
-    
-    // Make sure clouds are visible even at 0%
-    cloud.style.opacity = '0.9';
-    
-    cloudContainer.appendChild(cloud);
-    return cloud;
-}
-async function analyzeText() {
+        const containerWidth = cloudContainer.offsetWidth;
+        const containerHeight = cloudContainer.offsetHeight;
+        
+        // Create a circular layout for initial clouds
+        const centerX = containerWidth / 2;
+        const centerY = containerHeight / 2;
+        const radius = Math.min(containerWidth, containerHeight) * 0.35;
+        
+        cloudData.forEach((cloud, i) => {
+            const angle = (i / cloudData.length) * Math.PI * 2;
+            const x = centerX + Math.cos(angle) * radius;
+            const y = centerY + Math.sin(angle) * radius;
+            
+            // Create cloud with base size
+            createCloud(cloud, x, y, 40);
+        });
+    }
+
+    function createCloud(data, x, y, baseSize) {
+        const cloud = document.createElement('custom-cloud');
+        cloud.setAttribute('text', data.text);
+        cloud.setAttribute('percentage', data.percentage);
+        
+        // Position the cloud
+        cloud.style.position = 'absolute';
+        cloud.style.left = `${x}px`;
+        cloud.style.top = `${y}px`;
+        
+        cloudContainer.appendChild(cloud);
+        return cloud;
+    }
+
+    async function analyzeText() {
         const inputText = textInput.value.trim();
         if (!inputText) {
             alert('Please enter some text to analyze');
             return;
         }
-try {
+
+        try {
             // Generate embeddings for input text and cloud texts
             const inputEmbedding = await model.embed([inputText]);
             const cloudTexts = cloudData.map(c => c.text);
@@ -125,47 +118,43 @@ try {
             // Update UI with results
             updateClouds();
             showResults(inputText, similarities);
-            } catch (err) {
-                console.error('Error analyzing text:', err);
-                resultsSection.classList.add('hidden');
-                alert('An error occurred while analyzing your text. Please try again.');
-                throw err; // Re-throw to ensure button state is reset
-            }
-}
-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 in a circular layout
-    const centerX = containerWidth / 2;
-    const centerY = containerHeight / 2;
-    const radius = Math.min(containerWidth, containerHeight) * 0.35;
-    
-    sortedClouds.forEach((cloud, i) => {
-        // Calculate angle for positioning
-        const angle = (i / sortedClouds.length) * Math.PI * 2;
+        } catch (err) {
+            console.error('Error analyzing text:', err);
+            resultsSection.classList.add('hidden');
+            alert('An error occurred while analyzing your text. Please try again.');
+            throw err; // Re-throw to ensure button state is reset
+        }
+    }
+
+    function updateClouds() {
+        cloudContainer.innerHTML = '';
         
-        // Calculate position
-        const x = centerX + Math.cos(angle) * radius;
-        const y = centerY + Math.sin(angle) * radius;
+        const containerWidth = cloudContainer.offsetWidth;
+        const containerHeight = cloudContainer.offsetHeight;
         
-        // Create cloud with size based on percentage
-        const baseSize = 40 + (cloud.percentage * 0.8);
-        createCloud(cloud, x, y, baseSize);
+        // Sort clouds by percentage (highest first)
+        const sortedClouds = [...cloudData].sort((a, b) => b.percentage - a.percentage);
         
-        // Make sure clouds are visible even at 0%
-        if (cloud.percentage === 0) {
-            const cloudElement = cloudContainer.lastChild;
-            cloudElement.style.opacity = '0.6';
-        }
-    });
-}
-function showResults(inputText, similarities) {
+        // Position clouds in a circular layout
+        const centerX = containerWidth / 2;
+        const centerY = containerHeight / 2;
+        const radius = Math.min(containerWidth, containerHeight) * 0.35;
+        
+        sortedClouds.forEach((cloud, i) => {
+            // Calculate angle for positioning
+            const angle = (i / sortedClouds.length) * Math.PI * 2;
+            
+            // Calculate position
+            const x = centerX + Math.cos(angle) * radius;
+            const y = centerY + Math.sin(angle) * radius;
+            
+            // Create cloud with size based on percentage
+            const baseSize = 40 + (cloud.percentage * 0.8);
+            createCloud(cloud, x, y, baseSize);
+        });
+    }
+
+    function showResults(inputText, similarities) {
         resultsSection.classList.remove('hidden');
         similarityResults.innerHTML = '';
         
@@ -232,4 +221,4 @@ function showResults(inputText, similarities) {
             createClouds();
         }
     });
-});
+});

style.css

@@ -61,24 +61,24 @@ body {
     overflow: hidden;
 }
 custom-cloud {
-    display: inline-block;
+    display: block;
     position: absolute;
     transition: all 0.5s ease;
     animation: float 3s ease-in-out infinite;
     will-change: transform;
     cursor: pointer;
+    transform: translate(-50%, -50%);
 }
 
 custom-cloud:hover {
-    transform: scale(1.1) !important;
+    transform: translate(-50%, -50%) scale(1.1) !important;
     z-index: 100;
 }
 .cloud-text {
     position: relative;
     z-index: 2;
-    text-align: center;
+text-align: center;
 }
-
 .cloud-percentage {
     font-size: 0.6em;
     display: block;
@@ -96,4 +96,4 @@ custom-cloud:hover {
 
 #analyze-btn:hover {
     transform: translateY(-50%) scale(1.1);
-}
+}