release dataset viewer

huggingface · Jul 18, 2024 · d563ecb · d563ecb
1 parent d26fbe2
commit d563ecb
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 5 deletions.
diff --git a/src/autotrain/__init__.py b/src/autotrain/__init__.py
@@ -41,7 +41,7 @@
 warnings.filterwarnings("ignore", category=UserWarning, module="huggingface_hub")
 
 logger = Logger().get_logger()
-__version__ = "0.8.3"
+__version__ = "0.8.4"
 
 
 def is_colab():

diff --git a/src/autotrain/app/templates/index.html b/src/autotrain/app/templates/index.html
@@ -399,10 +399,19 @@
                     </div>
                     <div class="items-stretch justify-center h-48 rounded">
                         <div id="hub-data-tab-content" class="w-full px-4">
-                            <label for="hub_dataset" class="text-sm font-medium text-gray-700">Hub dataset path
-                            </label>
-                            <input type="text" name="hub_dataset" id="hub_dataset"
-                                class="mt-1 block w-full border border-gray-300 px-3 py-2.5 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+                            <label for="hub_dataset" class="text-sm font-medium text-gray-700">Hub dataset path</label>
+                            <div class="mt-1 flex items-center">
+                                <input type="text" name="hub_dataset" id="hub_dataset"
+                                    class="block w-full border border-gray-300 px-3 py-2.5 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+                                <button type="button" id="dataset-viewer"
+                                    class="ml-2 p-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500"
+                                        viewBox="0 0 24 24" fill="currentColor">
+                                        <path
+                                            d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zm0 13c-3.04 0-5.5-2.46-5.5-5.5S8.96 6.5 12 6.5s5.5 2.46 5.5 5.5-2.46 5.5-5.5 5.5zm0-9c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5 3.5-1.57 3.5-3.5-1.57-3.5-3.5-3.5z" />
+                                    </svg>
+                                </button>
+                            </div>
                             <div class="columns-2 mb-2 mt-2">
                                 <label for="train_split" class="text-sm font-medium text-gray-700">Train split
                                 </label>
@@ -607,6 +616,30 @@ <h3 class="mb-5 text-sm font-normal text-gray-800"></h3>
             </div>
         </div>
     </div>
+    <div id="dataset-viewer-modal" tabindex="-1"
+        class="hidden fixed inset-0 z-50 flex items-center justify-center w-full h-full bg-black bg-opacity-50">
+        <div class="relative w-full max-w-5xl p-4">
+            <div class="relative bg-white rounded-lg shadow-2xl">
+                <button type="button"
+                    class="absolute top-3 right-3 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center"
+                    data-modal-hide="dataset-viewer-modal">
+                    <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                        viewBox="0 0 14 14">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+                    </svg>
+                    <span class="sr-only">Close</span>
+                </button>
+                <div class="p-6 md:p-8 text-center">
+                    <h3 class="mb-5 text-lg font-medium text-gray-900">Dataset Viewer</h3>
+                    <div id="datasetViewerContent"
+                        class="text-xs font-normal text-left overflow-y-auto max-h-[calc(100vh-400px)] border-t border-gray-200 pt-4">
+                        <!-- dataset will be appended here -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
     <script>
         var autotrain_local_value = {{ enable_local }};
     </script>
@@ -649,6 +682,33 @@ <h3 class="mb-5 text-sm font-normal text-gray-800"></h3>
             }
         });
     </script>
+    <script>
+        // Get modal elements
+        var modal = document.getElementById("dataset-viewer-modal");
+        var closeButton = document.querySelector("[data-modal-hide='dataset-viewer-modal']");
+        var viewButton = document.getElementById("dataset-viewer");
+        var input = document.getElementById("hub_dataset");
+        var viewerContent = document.getElementById("datasetViewerContent");
+
+        // When the button is clicked
+        viewButton.onclick = function () {
+            var datasetPath = input.value;
+            viewerContent.innerHTML = '<iframe src="https://huggingface.co/datasets/' + datasetPath + '/embed/viewer" frameborder="0" width="100%" height="560px"></iframe>';
+            modal.classList.remove("hidden");
+        }
+
+        // When the close button is clicked
+        closeButton.onclick = function () {
+            modal.classList.add("hidden");
+        }
+
+        // When clicking outside the modal
+        window.onclick = function (event) {
+            if (event.target == modal) {
+                modal.classList.add("hidden");
+            }
+        }
+    </script>
 </body>
 
 </html>