Complete draft of embedding active essay

ToonTalk · Jan 29, 2024 · 250adee · 250adee
1 parent b897070
commit 250adee
Show file tree

Hide file tree

Showing 5 changed files with 1,298 additions and 45 deletions.
diff --git a/apps/embeddings/3D/index.html b/apps/embeddings/3D/index.html
@@ -35,7 +35,7 @@
 }
 
   /* Style adjustments for the button to make it align to the right of the word input */
-  .word-input-group {
+.word-input-group {
       display: flex;
       justify-content: flex-start; /* Align items to the start */
       align-items: center;
@@ -76,20 +76,21 @@
   }
 
 /* Adjust the dropdown width as needed */
-  #embeddingsList {
+#embeddingsList {
     min-width: 140px; /* Match the width of the other buttons */
     width: auto; /* Set a fixed width or auto */
     flex-grow: 0; /* Prevent the dropdown from growing */
   }
 
-
 .container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    max-width: 800px; /* Limit the maximum width */
+    margin: auto; /* Center the container */
 }
-
+    
 .input-group,
 .word-input-group,
 .button-group {
@@ -100,7 +101,7 @@
 }
 
   /* Button styles */
-  .button {
+.button {
     padding: 10px 20px; /* Adjust padding for the button */
     background-color: #4CAF50;
     color: white;
@@ -155,12 +156,13 @@
 
 /* Modal Content */
 .modal-content {
-  background-color: #fefefe;
-  margin: 15% auto; /* 15% from the top and centered */
-  padding: 20px;
-  border: 1px solid #888;
-  width: 80%; /* Could be more or less, depending on screen size */
-  border-radius: 5px;
+    background-color: #fefefe;
+    margin: 15% auto; /* 15% from the top and centered */
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%; /* Could be more or less, depending on screen size */
+    max-width: 600px; /* Set a maximum width for the modal */
+    border-radius: 5px;
 }
 
 /* The Close Button */
@@ -178,6 +180,12 @@
   cursor: pointer;
 }
 
+/* Additional style for the canvas */
+#visualization canvas {
+    max-width: 100%; /* Ensure canvas does not exceed the container width */
+    height: 600px;
+}
+
 </style>
 
 </head>
@@ -215,19 +223,24 @@
 
 <!-- The Modal -->
 <div id="infoModal" class="modal">
-  <!-- Modal content -->
-  <div class="modal-content">
-    <span class="close">&times;</span>
-    <h2>How to Use the App</h2>
-    <p>This app allows you to visualize word embeddings in a 3D space. You can add words with associated values for different dimensions such as gender, age, and royalty. You can also save these embeddings and load them later.</p>
-    <h3>Instructions:</h3>
-    <ul>
-      <li>Enter a word and its corresponding values for the dimensions.</li>
-      <li>Click 'Add Word' to see the word in the 3D space.</li>
-      <li>Use 'Save Embeddings' to save your current set of words.</li>
-      <li>Select a set from the list and use 'Load Selected Embeddings' to view previously saved words.</li>
-    </ul>
-  </div>
+    <!-- Modal content -->
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <h2>How to Use the App</h2>
+        <p>
+            This app allows you to visualize word embeddings in a 3D space. 
+            Add words with associated values for different dimensions like gender, age, and royalty, 
+            and explore how they are positioned relative to each other.
+        </p>
+        <h3>Instructions:</h3>
+        <ul>
+            <li>Enter a word and specify values for each dimension. Values should be between 0 and 9.</li>
+            <li>For example, in the gender dimension, you might use 0 for male, 5 for unspecified, and 9 for female.</li>
+            <li>Click 'Add Word' to see the word in the 3D space.</li>
+            <li>To move the camera, click and drag your mouse around the scene. Use the scroll wheel to zoom in and out.</li>
+            <li>Save your embeddings for later viewing or load previously saved ones.</li>
+        </ul>
+    </div>
 </div>
 
 <!-- Visualization container -->
@@ -252,8 +265,8 @@ <h3>Instructions:</h3>
     ];
 
     // Validate input
-    if (word === '' || values.some(isNaN)) {
-        alert('Please enter a word and specify values for all dimensions.');
+    if (word === '' || values.some(isNaN) || values.some(value => value < 0 || value > 9)) {
+        alert('Please enter a word and specify values between 0 and 9 for all dimensions.');
         return;
     }