add `init.py` for initial draft structure

app.py

@@ -1,254 +1,111 @@
+# /// script
+# dependencies = [
+#     "marimo",
+#     "anywidget==0.9.13",
+#     "traitlets==5.14.3",
+# ]
+# ///
+"""
+This is the starting point for your notebook.
+"""
+
 import marimo
 
-__generated_with = "0.9.2"
+__generated_with = "0.9.10"
 app = marimo.App()
 
 
-@app.cell
-def __():
-    import marimo as mo
-
-    mo.md("# Welcome to marimo! 🌊🍃")
-    return (mo,)
-
-
-@app.cell
-def __(mo):
-    slider = mo.ui.slider(1, 22)
-    return (slider,)
-
-
-@app.cell
-def __(mo, slider):
-    mo.md(
-        f"""
-        marimo is a **reactive** Python notebook.
-
-        This means that unlike traditional notebooks, marimo notebooks **run
-        automatically** when you modify them or
-        interact with UI elements, like this slider: {slider}.
-
-        {"##" + "🍃" * slider.value}
-        """
-    )
-    return
-
-
 @app.cell(hide_code=True)
-def __(mo):
-    mo.accordion(
-        {
-            "Tip: disabling automatic execution": mo.md(
-                rf"""
-            marimo lets you disable automatic execution: just go into the
-            notebook settings and set
-
-            "Runtime > On Cell Change" to "lazy".
-
-            When the runtime is lazy, after running a cell, marimo marks its
-            descendants as stale instead of automatically running them. The
-            lazy runtime puts you in control over when cells are run, while
-            still giving guarantees about the notebook state.
-            """
-            )
-        }
-    )
+def __(header_widget):
+    header_widget
     return
 
 
 @app.cell(hide_code=True)
 def __(mo):
     mo.md(
+        r"""
+        First of all, create a header for your notebook.
+
+        We've designed a `HeaderWidget` for you to display important information.
+
+        To use `HeaderWidget`, you need to create an instance of it. You can pass a dictionary containing key-value pairs that represent the information you want to display in the header.  
+
+        For example:
+
+        ```python
+        header_widget = HeaderWidget(
+            result={
+                "Title": "Comprehensive E-Commerce Customer Behavior Analysis",
+                "Author": '<a href="https://github.com/Haleshot/marimo-tutorials">Dr. Jane Smith, PhD</a>',
+                "Version": "1.2.3",
+                "Description": "This advanced notebook presents a multi-faceted analysis of <b>customer behavior patterns</b> across various e-commerce platforms. The primary goal is to derive actionable insights that can significantly enhance customer engagement, optimize conversion rates, and ultimately drive business growth in the competitive e-commerce landscape.",
+                "Keywords": "E-Commerce Analytics, Customer Behavior Modeling, Predictive Analytics, Machine Learning, Natural Language Processing, Data Visualization, Time Series Analysis",
+                "Data Sources": "1. Customer transaction logs (5 years, 10M+ records)<br>2. Website clickstream data (real-time, 1B+ events)<br>3. CRM records (customer demographics, purchase history)<br>4. Social media interactions (Twitter, Facebook, Instagram)<br>5. Customer support tickets and chat logs<br>6. Product catalog and inventory data",
+                "Last Updated": "November 3, 2024",
+            }
+        )
+        ```
         """
-        Tip: This is a tutorial notebook. You can create your own notebooks
-        by entering `marimo edit` at the command line.
-        """
-    ).callout()
+    )
     return
 
 
 @app.cell(hide_code=True)
 def __(mo):
     mo.md(
+        r"""
+        **Some tips from our experience with marimo**
+
+        1. If a notebook contains any io operation, e.g., reading an external .csv file, you'd better use a `marimo.ui.form` for users to config the path of this .csv file.
+        2. You can create more ui components and appealing contents with pure html, [anywidget](https://github.com/manzt/anywidget) and more. But when you are doing this, remember to check its appearance under both light and dark themes, and different widths.
+        3. Albeit you can create local variables in a cell with a prefix "_", we recommend you do this as little as possible because the `Explore variables` panel will neglect  these variables, making debug these variables hard.
+        4. If you want your notebook to run properly in our cloud, please check whether the dependencies are supported by wasm. Some popular libraries like `polars` and `openai`, for example, are not supported.
+        5. Attach as few assets as possible, we want to keep our repo lightweight.
+        6. Functional thinking are preferred in marimo since instances are immutable.
         """
-        ## 1. Reactive execution
-
-        A marimo notebook is made up of small blocks of Python code called
-        cells.
-
-        marimo reads your cells and models the dependencies among them: whenever
-        a cell that defines a global variable  is run, marimo
-        **automatically runs** all cells that reference that variable.
-
-        Reactivity keeps your program state and outputs in sync with your code,
-        making for a dynamic programming environment that prevents bugs before they
-        happen.
-        """
-    )
+    ).callout(kind="info")
     return
 
 
 @app.cell(hide_code=True)
-def __(changed, mo):
-    (
+def __(mo):
+    # Custom Constants
+    custom_form = (
         mo.md(
-            f"""
-            **✨ Nice!** The value of `changed` is now {changed}.
+            r"""
+            **Customize your constants here:**
 
-            When you updated the value of the variable `changed`, marimo
-            **reacted** by running this cell automatically, because this cell
-            references the global variable `changed`.
+            {image}
 
-            Reactivity ensures that your notebook state is always
-            consistent, which is crucial for doing good science; it's also what
-            enables marimo notebooks to double as tools and  apps.
             """
         )
-        if changed
-        else mo.md(
-            """
-            **🌊 See it in action.** In the next cell, change the value of the
-            variable  `changed` to `True`, then click the run button.
-            """
+        .batch(
+            image=mo.ui.text(
+                value="../assets/<>/<>",
+                label="Path of your data: ",
+                full_width=True,
+            ),  ## add more rows below
         )
+        .form(bordered=True, label="Custom Constants")
     )
-    return
-
-
-@app.cell
-def __():
-    changed = False
-    return (changed,)
-
-
-@app.cell(hide_code=True)
-def __(mo):
-    mo.accordion(
-        {
-            "Tip: execution order": (
-                """
-                The order of cells on the page has no bearing on
-                the order in which cells are executed: marimo knows that a cell
-                reading a variable must run after the cell that  defines it. This
-                frees you to organize your code in the way that makes the most
-                sense for you.
-                """
-            )
-        }
-    )
-    return
-
-
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        **Global names must be unique.** To enable reactivity, marimo imposes a
-        constraint on how names appear in cells: no two cells may define the same
-        variable.
-        """
-    )
-    return
-
-
-@app.cell(hide_code=True)
-def __(mo):
-    mo.accordion(
-        {
-            "Tip: encapsulation": (
-                """
-                By encapsulating logic in functions, classes, or Python modules,
-                you can minimize the number of global variables in your notebook.
-                """
-            )
-        }
-    )
-    return
-
-
-@app.cell(hide_code=True)
-def __(mo):
-    mo.accordion(
-        {
-            "Tip: private variables": (
-                """
-                Variables prefixed with an underscore are "private" to a cell, so
-                they can be defined by multiple cells.
-                """
-            )
-        }
-    )
-    return
-
-
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        ## 2. UI elements
-
-        Cells can output interactive UI elements. Interacting with a UI
-        element **automatically triggers notebook execution**: when
-        you interact with a UI element, its value is sent back to Python, and
-        every cell that references that element is re-run.
-
-        marimo provides a library of UI elements to choose from under
-        `marimo.ui`.
-        """
-    )
-    return
-
-
-@app.cell
-def __(mo):
-    mo.md("""**🌊 Some UI elements.** Try interacting with the below elements.""")
-    return
-
-
-@app.cell
-def __(mo):
-    icon = mo.ui.dropdown(["🍃", "🌊", "✨"], value="🍃")
-    return (icon,)
-
-
-@app.cell
-def __(icon, mo):
-    repetitions = mo.ui.slider(1, 16, label=f"number of {icon.value}: ")
-    return (repetitions,)
-
-
-@app.cell
-def __(icon, repetitions):
-    icon, repetitions
-    return
-
-
-@app.cell
-def __(icon, mo, repetitions):
-    mo.md("# " + icon.value * repetitions.value)
-    return
+    custom_form
+    return (custom_form,)
 
 
 @app.cell(hide_code=True)
 def __(mo):
     mo.md(
-        """
-        ## 3. marimo is just Python
-
-        marimo cells parse Python (and only Python), and marimo notebooks are
-        stored as pure Python files — outputs are _not_ included. There's no
-        magical syntax.
+        r"""
+        You can access the value of the form above with:
 
-        The Python files generated by marimo are:
+        ```python
+        custom_form.value['image']
+        ```
 
-        - easily versioned with git, yielding minimal diffs
-        - legible for both humans and machines
-        - formattable using your tool of choice,
-        - usable as Python  scripts, with UI  elements taking their default
-        values, and
-        - importable by other modules (more on that in the future).
+        after the submission.
         """
-    )
+    ).callout(kind="info")
     return
 
 
@@ -256,215 +113,208 @@ def __(mo):
 def __(mo):
     mo.md(
         """
-        ## 4. Running notebooks as apps
-
-        marimo notebooks can double as apps. Click the app window icon in the
-        bottom-right to see this notebook in "app view."
+        <h1 id="refs">References</h1>
 
-        Serve a notebook as an app with `marimo run` at the command-line.
-        Of course, you can use marimo just to level-up your
-        notebooking, without ever making apps.
+        - [Reference 1](https://example.com)
+        - [Reference 2](https://example.com)
         """
     )
     return
 
 
 @app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        ## 5. The `marimo` command-line tool
-
-        **Creating and editing notebooks.** Use
-
-        ```
-        marimo edit
-        ```
-
-        in a terminal to start the marimo notebook server. From here
-        you can create a new notebook or edit existing ones.
-
-
-        **Running as apps.** Use
-
-        ```
-        marimo run notebook.py
-        ```
-
-        to start a webserver that serves your notebook as an app in read-only mode,
-        with code cells hidden.
-
-        **Convert a Jupyter notebook.** Convert a Jupyter notebook to a marimo
-        notebook using `marimo convert`:
-
-        ```
-        marimo convert your_notebook.ipynb > your_app.py
-        ```
-
-        **Tutorials.** marimo comes packaged with tutorials:
+def __():
+    import anywidget
+    import traitlets
+
+    class HeaderWidget(anywidget.AnyWidget):
+        _esm = """
+        function escapeHTML(str) {
+            return str.replace(/[&<>'"]/g, 
+                tag => ({
+                    '&': '&amp;',
+                    '<': '&lt;',
+                    '>': '&gt;',
+                    "'": '&#39;',
+                    '"': '&quot;'
+                }[tag] || tag)
+            );
+        }
 
-        - `dataflow`: more on marimo's automatic execution
-        - `ui`: how to use UI elements
-        - `markdown`: how to write markdown, with interpolated values and
-           LaTeX
-        - `plots`: how plotting works in marimo
-        - `sql`: how to use SQL
-        - `layout`: layout elements in marimo
-        - `fileformat`: how marimo's file format works
-        - `markdown-format`: for using `.md` files in marimo
-        - `for-jupyter-users`: if you are coming from Jupyter
+        function stripHTML(html) {
+            const tmp = document.createElement("DIV");
+            tmp.innerHTML = html;
+            return tmp.textContent || tmp.innerText || "";
+        }
 
-        Start a tutorial with `marimo tutorial`; for example,
+        function renderValue(value) {
+            if (typeof value !== 'string') {
+                return escapeHTML(String(value));
+            }
+
+            const isHTML = /<[a-z][\s\S]*>/i.test(value);
+            const strippedValue = isHTML ? stripHTML(value) : value;
+
+            if (strippedValue.length > 100) {
+                if (isHTML) {
+                    return `
+                        <div class="preview">${value.substring(0, 100)}...</div>
+                        <div class="full-text" style="display: none;">${value}</div>
+                        <button class="toggle-button">Show More</button>
+                    `;
+                } else {
+                    return `
+                        <div class="preview">${escapeHTML(value.substring(0, 100))}...</div>
+                        <div class="full-text" style="display: none;">${escapeHTML(value)}</div>
+                        <button class="toggle-button">Show More</button>
+                    `;
+                }
+            }
+
+            return isHTML ? value : escapeHTML(value);
+        }
 
-        ```
-        marimo tutorial dataflow
-        ```
+        function render({ model, el }) {
+            const result = model.get("result");
+            const container = document.createElement("div");
+            container.className = "header-container";
+
+            container.innerHTML = `
+                <img class="banner" src="https://raw.githubusercontent.com/Haleshot/marimo-tutorials/main/community-tutorials-banner.png" alt="Marimo Banner">
+                <div class="form-container">
+                    ${Object.entries(result).map(([key, value]) => `
+                        <div class="form-row">
+                            <label>${escapeHTML(key)}</label>
+                            <div class="value-container">
+                                ${renderValue(value)}
+                            </div>
+                        </div>
+                    `).join('')}
+                </div>
+            `;
+
+            el.appendChild(container);
+
+            container.querySelectorAll('.toggle-button').forEach(button => {
+                button.addEventListener('click', () => {
+                    const row = button.closest('.form-row');
+                    const preview = row.querySelector('.preview');
+                    const fullText = row.querySelector('.full-text');
+
+                    if (fullText.style.display === "none") {
+                        fullText.style.display = "block";
+                        preview.style.display = "none";
+                        button.textContent = "Show Less";
+                    } else {
+                        fullText.style.display = "none";
+                        preview.style.display = "block";
+                        button.textContent = "Show More";
+                    }
+                });
+            });
+        }
 
-        In addition to tutorials, we have examples in our
-        [our GitHub repo](https://www.github.com/marimo-team/marimo/tree/main/examples).
+        export default { render };
         """
-    )
-    return
 
-
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        ## 6. The marimo editor
-
-        Here are some tips to help you get started with the marimo editor.
+        _css = """
+        .header-container {
+            font-family: 'Helvetica Neue', Arial, sans-serif;
+            max-width: 100%;
+            margin: 0 auto;
+            overflow: hidden;
+        }
+        .banner {
+            width: 100%;
+            height: 200px;
+            object-fit: cover;
+            border-radius: 10px 10px 0 0;
+            display: block;
+        }
+        .form-container {
+            padding: 30px;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            font-weight: 300;
+            box-shadow: 0 -10px 20px rgba(0,0,0,0.1);
+        }
+        .form-row {
+            display: flex;
+            flex-direction: column;
+        }
+        label {
+            font-size: 0.8em;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-bottom: 5px;
+            font-weight: 500;
+        }
+        .value-container {
+            font-size: 1em;
+            line-height: 1.5;
+        }
+        .value-container a {
+                color: #0066cc;
+                text-decoration: none;
+                transition: color 0.2s ease;
+        }
+        .value-container a:hover {
+            color: #003366;
+        }
+        .preview, .full-text {
+            margin-bottom: 10px;
+        }
+        .toggle-button {
+            border: none;
+            border-radius: 20px;
+            padding: 8px 16px;
+            font-size: 0.9em;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .toggle-button:hover {
+            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+        }
+        @media (max-width: 600px) {
+            .form-container {
+                grid-template-columns: 1fr;
+            }
+        }
         """
-    )
-    return
 
+        result = traitlets.Dict({}).tag(sync=True)
 
-@app.cell
-def __(mo, tips):
-    mo.accordion(tips)
-    return
-
-
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md("""## Finally, a fun fact""")
-    return
+    return HeaderWidget, anywidget, traitlets
 
 
 @app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        The name "marimo" is a reference to a type of algae that, under
-        the right conditions, clumps together to form a small sphere
-        called a "marimo moss ball". Made of just strands of algae, these
-        beloved assemblages are greater than the sum of their parts.
-        """
+def __(HeaderWidget):
+    header_widget = HeaderWidget(
+        result={
+            "Title": "Comprehensive E-Commerce Customer Behavior Analysis",
+            "Author": '<a href="https://github.com/Haleshot/marimo-tutorials">Dr. Jane Smith, PhD</a>',
+            "Affiliation": '<a href="https://www.datascience.university.edu">University of Data Science</a>',
+            "Version": "1.2.3",
+            "Description": "This advanced notebook presents a multi-faceted analysis of <b>customer behavior patterns</b> across various e-commerce platforms. The primary goal is to derive actionable insights that can significantly enhance customer engagement, optimize conversion rates, and ultimately drive business growth in the competitive e-commerce landscape.",
+            "Keywords": "E-Commerce Analytics, Customer Behavior Modeling, Predictive Analytics, Machine Learning, Natural Language Processing, Data Visualization, Time Series Analysis",
+            "Data Sources": "1. Customer transaction logs (5 years, 10M+ records)<br>2. Website clickstream data (real-time, 1B+ events)<br>3. CRM records (customer demographics, purchase history)<br>4. Social media interactions (Twitter, Facebook, Instagram)<br>5. Customer support tickets and chat logs<br>6. Product catalog and inventory data",
+            "Prerequisites": "Intermediate to advanced knowledge in statistics, machine learning, and Python programming. Familiarity with e-commerce concepts and business metrics is beneficial.",
+            "Acknowledgements": "This work was supported by a grant from the National Science Foundation (NSF-1234567). Special thanks to the E-Commerce Research Consortium for providing anonymized datasets.",
+            "License": '<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>',
+            "Last Updated": "November 3, 2024",
+        }
     )
-    return
+    return (header_widget,)
 
 
 @app.cell(hide_code=True)
 def __():
-    tips = {
-        "Saving": (
-            """
-            **Saving**
-
-            - _Name_ your app using the box at the top of the screen, or
-              with `Ctrl/Cmd+s`. You can also create a named app at the
-              command line, e.g., `marimo edit app_name.py`.
-
-            - _Save_ by clicking the save icon on the bottom right, or by
-              inputting `Ctrl/Cmd+s`. By default marimo is configured
-              to autosave.
-            """
-        ),
-        "Running": (
-            """
-            1. _Run a cell_ by clicking the play ( ▷ ) button on the top
-            right of a cell, or by inputting `Ctrl/Cmd+Enter`.
-
-            2. _Run a stale cell_  by clicking the yellow run button on the
-            right of the cell, or by inputting `Ctrl/Cmd+Enter`. A cell is
-            stale when its code has been modified but not run.
-
-            3. _Run all stale cells_ by clicking the play ( ▷ ) button on
-            the bottom right of the screen, or input `Ctrl/Cmd+Shift+r`.
-            """
-        ),
-        "Console Output": (
-            """
-            Console output (e.g., `print()` statements) is shown below a
-            cell.
-            """
-        ),
-        "Creating, Moving, and Deleting Cells": (
-            """
-            1. _Create_ a new cell above or below a given one by clicking
-                the plus button to the left of the cell, which appears on
-                mouse hover.
-
-            2. _Move_ a cell up or down by dragging on the handle to the 
-                right of the cell, which appears on mouse hover.
-
-            3. _Delete_ a cell by clicking the trash bin icon. Bring it
-                back by clicking the undo button on the bottom right of the
-                screen, or with `Ctrl/Cmd+Shift+z`.
-            """
-        ),
-        "Disabling Automatic Execution": (
-            """
-            Via the notebook settings (gear icon) or footer panel, you
-            can disable automatic execution. This is helpful when
-            working with expensive notebooks or notebooks that have
-            side-effects like database transactions.
-            """
-        ),
-        "Disabling Cells": (
-            """
-            You can disable a cell via the cell context menu.
-            marimo will never run a disabled cell or any cells that depend on it.
-            This can help prevent accidental execution of expensive computations
-            when editing a notebook.
-            """
-        ),
-        "Code Folding": (
-            """
-            You can collapse or fold the code in a cell by clicking the arrow
-            icons in the line number column to the left, or by using keyboard
-            shortcuts.
+    import marimo as mo
 
-            Use the command palette (`Ctrl/Cmd+k`) or a keyboard shortcut to
-            quickly fold or unfold all cells.
-            """
-        ),
-        "Code Formatting": (
-            """
-            If you have [ruff](https://github.com/astral-sh/ruff) installed,
-            you can format a cell with the keyboard shortcut `Ctrl/Cmd+b`.
-            """
-        ),
-        "Command Palette": (
-            """
-            Use `Ctrl/Cmd+k` to open the command palette.
-            """
-        ),
-        "Keyboard Shortcuts": (
-            """
-            Open the notebook menu (top-right) or input `Ctrl/Cmd+Shift+h` to
-            view a list of all keyboard shortcuts.
-            """
-        ),
-        "Configuration": (
-            """
-           Configure the editor by clicking the gears icon near the top-right
-           of the screen.
-           """
-        ),
-    }
-    return (tips,)
+    return (mo,)
 
 
 if __name__ == "__main__":
-    app.run()
+    app.run()