Deploy (see actual commits on https://github.com/mlcommons/croissant).

app.py

@@ -2,6 +2,7 @@ import urllib.parse
 
 import streamlit as st
 
+from components.flex import st_flex
 from core.constants import OAUTH_CLIENT_ID
 from core.constants import OAUTH_STATE
 from core.constants import REDIRECT_URI
@@ -14,8 +15,6 @@ from views.splash import render_splash
 from views.wizard import render_editor
 
 st.set_page_config(page_title="Croissant Editor", page_icon="🥐", layout="wide")
-col1, col2, col3 = st.columns([10, 1, 1])
-col1.header("Croissant Editor")
 
 init_state()
 
@@ -42,6 +41,7 @@ if OAUTH_CLIENT_ID and not user:
         state = urllib.parse.quote(OAUTH_STATE, safe="")
         scope = urllib.parse.quote("openid profile", safe="")
         url = f"https://huggingface.co/oauth/authorize?response_type=code&redirect_uri={redirect_uri}&scope={scope}&client_id={client_id}&state={state}"
+        st.header("Croissant Editor")
         st.link_button("🤗 Login with Hugging Face", url)
         st.stop()
 
@@ -59,16 +59,33 @@ def _logout():
     _back_to_menu()
 
 
-if OAUTH_CLIENT_ID:
-    col2.write("\n")  # Vertical box to shift the lgout menu
-    col2.button("Log out", on_click=_logout)
-
 timestamp = get_project_timestamp()
 
+button_width = 73  # This is the best value for the current content of the buttons.
+buttons_widths = []
+if OAUTH_CLIENT_ID:
+    buttons_widths.append(button_width)
 if timestamp:
-    col3.write("\n")  # Vertical box to shift the button menu
-    col3.button("Menu", on_click=_back_to_menu)
-
+    buttons_widths.append(button_width)
+widths = [200, sum(buttons_widths) + 10]  # 10 being the space between elements.
+
+with st_flex(
+    flex_direction="row",
+    justify_content="space-between",
+    align_items="center",
+    widths=widths,
+):
+    st.header("Croissant Editor")
+    if OAUTH_CLIENT_ID or timestamp:
+        with st_flex(
+            flex_direction="row",
+            justify_content="space-between",
+            widths=buttons_widths,
+        ):
+            if OAUTH_CLIENT_ID:
+                st.button("Log out", on_click=_logout)
+            if timestamp:
+                st.button("Home", on_click=_back_to_menu)
 
 should_display_editor = bool(st.session_state.get(CurrentProject))
 

components/flex/__init__.py

@@ -0,0 +1,64 @@
+import contextlib
+
+import streamlit as st
+import streamlit.components.v1 as components
+
+
+@contextlib.contextmanager
+def st_flex(
+    flex_direction="null",
+    justify_content="null",
+    align_items="null",
+    flex="null",
+    widths=None,
+):
+    """[flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) for Streamlit.
+
+    Warning: This custom component uses a lot of heuristics. But styling flex is
+    important in CSS and missing from Streamlit. st.columns does a poor job at
+    horizontally aligning elements.
+
+    Args:
+        flex_direction: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
+        justify_content:
+            https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
+        align_items: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
+        flex: https://developer.mozilla.org/en-US/docs/Web/CSS/flex
+        widths: An array containing the minimal widths of all elements. This somewhat
+            defeats the purpose of flex, but Streamlit forces the width of elements,
+            which is why forcing this parameter is unfortunately needed.
+    """
+    placeholder = st.empty()
+    with placeholder.container():
+        placeholder = st.empty()
+        with placeholder.container():
+            yield
+        components.html(
+            f"""
+            <script>
+            window.frameElement.style.display = 'none';
+            // Get the current script node
+            const frameElement = window.frameElement.parentElement;
+
+            // Get the parent element
+            const parentElement = frameElement.parentElement;
+
+            // Change container
+            const container = parentElement.firstChild.firstChild;
+            container.style.display = 'flex';
+            container.style.flexDirection = '{flex_direction}';
+            container.style.justifyContent = '{justify_content}';
+            container.style.flex = '{flex}';
+            container.style.alignItems = '{align_items}';
+            container.width = '';
+            container.className = '';
+
+            // Change children
+            let i = 0;
+            for (const child of container.children) {{
+              child.style.width = `${{{widths}?.[i] || 60}}px`;
+              child.className = '';
+              i += 1;
+            }}
+            </script>""",
+        )

core/state.py

@@ -183,10 +183,8 @@ class Metadata:
     name: str = ""
     description: str | None = None
     citation: str | None = None
-    creator: mlc.PersonOrOrganization | None = None
     data_biases: str | None = None
     data_collection: str | None = None
-    date_published: datetime.datetime | None = None
     license: str | None = ""
     personal_sensitive_information: str | None = None
     url: str = ""

events/metadata.py

@@ -1,11 +1,9 @@
-import datetime
 import enum
 
 import streamlit as st
 
 from core.names import find_unique_name
 from core.state import Metadata
-import mlcroissant as mlc
 
 # List from:
 LICENSES_URL = "https://huggingface.co/docs/hub/repositories-licenses"
@@ -93,7 +91,6 @@ class MetadataEvent(enum.Enum):
 
     NAME = "NAME"
     DESCRIPTION = "DESCRIPTION"
-    DATE_PUBLISHED = "DATE_PUBLISHED"
     URL = "URL"
     LICENSE = "LICENSE"
     CITATION = "CITATION"
@@ -101,10 +98,6 @@ class MetadataEvent(enum.Enum):
     DATA_BIASES = "DATA_BIASES"
     DATA_COLLECTION = "DATA_COLLECTION"
     PERSONAL_SENSITIVE_INFORMATION = "PERSONAL_SENSITIVE_INFORMATION"
-    CREATOR_ADD = "CREATOR_ADD"
-    CREATOR_NAME = "CREATOR_NAME"
-    CREATOR_URL = "CREATOR_URL"
-    CREATOR_REMOVE = "CREATOR_REMOVE"
 
 
 def handle_metadata_change(event: MetadataEvent, metadata: Metadata, key: str):
@@ -126,18 +119,3 @@ def handle_metadata_change(event: MetadataEvent, metadata: Metadata, key: str):
         metadata.data_collection = st.session_state[key]
     elif event == MetadataEvent.PERSONAL_SENSITIVE_INFORMATION:
         metadata.personal_sensitive_information = st.session_state[key]
-    elif event == MetadataEvent.DATE_PUBLISHED:
-        date = st.session_state[key]
-        metadata.date_published = datetime.datetime(date.year, date.month, date.day)
-    elif event == MetadataEvent.CREATOR_ADD:
-        metadata.creator = mlc.PersonOrOrganization()
-    elif event == MetadataEvent.CREATOR_REMOVE:
-        metadata.creator = None
-    elif event == MetadataEvent.CREATOR_NAME:
-        if not metadata.creator:
-            metadata.creator = mlc.PersonOrOrganization()
-        metadata.creator.name = st.session_state[key]
-    elif event == MetadataEvent.CREATOR_URL:
-        if not metadata.creator:
-            metadata.creator = mlc.PersonOrOrganization()
-        metadata.creator.url = st.session_state[key]

requirements.txt

@@ -1,5 +1,5 @@
 etils[epath]
-mlcroissant==0.0.5
+mlcroissant
 numpy
 pandas
 pytest

views/load.py

@@ -8,6 +8,17 @@ from core.past_projects import save_current_project
 from core.state import Metadata
 import mlcroissant as mlc
 
+_JSON_LD_INFO = """You can download JSON-LD Croissant files from major dataset
+providers:
+
+- [Kaggle](https://www.kaggle.com/datasets) embeds Croissant JSON-LD directly in their
+HTML.
+- [OpenML](https://www.openml.org/search?type=data) offers a 🥐 button on all of their
+datasets.
+- [Hugging Face](https://huggingface.co/) offers an
+[API endpoint](https://datasets-server.huggingface.co/croissant?dataset=${dataset_id) to
+build a Croissant JSON-LD."""
+
 
 def _on_file_upload(key):
     """Triggers when a new file gets uploaded to load the Croissant metadata."""
@@ -29,6 +40,7 @@ def _on_file_upload(key):
 
 def render_load():
     key = "json-ld-file-upload"
+    st.info(_JSON_LD_INFO)
     st.file_uploader(
         "Drop a JSON-LD", type="json", key=key, on_change=_on_file_upload, args=(key,)
     )

views/metadata.py

@@ -106,47 +106,3 @@ def _render_generic_metadata(metadata: Metadata):
         on_change=handle_metadata_change,
         args=(MetadataEvent.CITATION, metadata, key),
     )
-    key = "metadata-date-published"
-    st.date_input(
-        label="Date of first broadcast/publication.",
-        key=key,
-        value=metadata.date_published,
-        on_change=handle_metadata_change,
-        args=(MetadataEvent.DATE_PUBLISHED, metadata, key),
-    )
-    if metadata.creator:
-        col1, col2, col3 = st.columns([1, 1, 1])
-        key = "metadata-creator-name"
-        col1.text_input(
-            label="Creator name",
-            key=key,
-            value=metadata.creator.name,
-            on_change=handle_metadata_change,
-            placeholder="A person or an organization",
-            args=(MetadataEvent.CREATOR_NAME, metadata, key),
-        )
-        key = "metadata-creator-url"
-        col2.text_input(
-            label="Creator URL",
-            key=key,
-            value=metadata.creator.url,
-            placeholder="https://mlcommons.org",
-            on_change=handle_metadata_change,
-            args=(MetadataEvent.CREATOR_URL, metadata, key),
-        )
-        key = "metadata-creator-remove"
-        col3.button(
-            "✖️",
-            key=key,
-            help="Remove the creator",
-            on_click=handle_metadata_change,
-            args=(MetadataEvent.CREATOR_REMOVE, metadata, key),
-        )
-    else:
-        key = "metadata-add-creator"
-        st.button(
-            label="✚ Add a creator",
-            key=key,
-            on_click=handle_metadata_change,
-            args=(MetadataEvent.CREATOR_ADD, metadata, key),
-        )

views/overview.py

@@ -48,7 +48,7 @@ def render_overview():
     col1, col2 = st.columns([1, 1], gap="medium")
     with col1:
         key = "metadata-name"
-        name = st.text_input(
+        st.text_input(
             label=needed_field("Name"),
             key=key,
             value=metadata.name,
@@ -57,8 +57,6 @@ def render_overview():
             on_change=handle_metadata_change,
             args=(MetadataEvent.NAME, metadata, key),
         )
-        if not name:
-            st.stop()
         key = "metadata-description"
         st.text_area(
             label="Description",

views/record_sets.py

@@ -375,7 +375,7 @@ def _render_left_panel():
             result: _Result = _generate_data_with_timeout(record_set)
             df, exception = result.get("df"), result.get("exception")
             if exception is None and df is not None and not df.empty:
-                st.markdown("Previsualize the data:")
+                st.markdown("Preview the data:")
                 st.dataframe(df, use_container_width=True)
             # The generation is not triggered if record_set has in-line `data`.
             elif not record_set.data:

views/splash.py

@@ -37,7 +37,7 @@ an existing Croissant JSON-MD file. Finally, you can also select any of your
 past projects from the list.
 
 You can change the project you are currently editing at any time by clicking
-the Menu button and then choosing one of the options on this page."""
+the Home button and then choosing one of the options on this page."""
 
 
 def render_splash():
@@ -96,28 +96,6 @@ def render_splash():
                 type="primary",
                 args=(dataset,),
             )
-            url = st.text_input(
-                label="Hugging Face dataset",
-                placeholder="Example: https://huggingface.co/datasets/mnist",
-            )
-            if url.startswith(_HUGGING_FACE_URL):
-                name = url.replace(_HUGGING_FACE_URL, "")
-                api_url = (
-                    f"https://datasets-server.huggingface.co/croissant?dataset={name}"
-                )
-                json = requests.get(api_url, headers=None).json()
-                try:
-                    metadata = mlc.Metadata.from_json(mlc.Issues(), json, None)
-                    st.session_state[Metadata] = Metadata.from_canonical(metadata)
-                    save_current_project()
-                    st.rerun()
-                except Exception:
-                    st.error(f"Malformed JSON: {json}")
-            elif url:
-                st.error(
-                    f"Unknown URL {url}. Hugging Face URLS should look like"
-                    f" {_HUGGING_FACE_URL}somedataset."
-                )
             render_load()
     with col2:
         with st.expander("**Recent projects**", expanded=True):