moved all images and gifs inside Accordion elements, to prevent too m…

…uch clutter.

basics/welcome.mdx

@@ -2,6 +2,8 @@
 title: 'Welcome to Unify!'
 ---
 
+<img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/llm_providers_animation_dark.gif"/>
+
 Unify is a **fully hackable** LLMOps platform, which you can use to build *personalized* pipelines for: logging, evaluations, guardrails, human labelling, agentic workflows, self-optimization, and more.
 
 simply `unify.log` your data, and then compose your own custom interface using the four core building blocks: (1) **tables**, (2) **plots**, (3) **visualizations**, and (4) **terminals**.

interfaces/basics.mdx

@@ -30,7 +30,9 @@ Tabs consist of **tiles**, which is where the data, interaction, and visualizati
 When in edit mode (`Ctrl + E`), new tiles can be added by clicking on any blank space in the tab, pressing `Ctrl + T`, or clicking "+ Add Tile" at the top of the screen.
 The corners of the tab can then be dragged for resizing, and the tab can be dragged and repositioned.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/tiles_dark.gif"/>
+</Accordion>
 
 If you're done positioning and sizing your tiles, it's best to exit edit mode.
 This will declutter the workspace, minimize the icons on screen and make the best use of all the tile space.
@@ -42,7 +44,9 @@ by clicking the expand button in the top right of the tile.
 This will open the tile in focus mode, where other tiles can be positioned alongside for comparison.
 You can exit via the top right "X" button to return to the default interface view.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/focus_mode_dark.gif"/>
+</Accordion>
 
 Focus mode can also be accessed from the focus mode button at the top the default interface screen.
 
@@ -52,7 +56,9 @@ Edit mode enables tile manipulation (as explained above) and interactive mode en
 such as applying filters, sorting and grouping on tables, changing the axes selection on plots, and editing logs via the view tile.
 When interactive mode is turned off, the interface acts more like a static dashboard, with data manipulation features disabled.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/interface_modes_dark.gif"/>
+</Accordion>
 
 ## Contexts
 

interfaces/overview.mdx

@@ -4,6 +4,8 @@ title: 'Overview'
 
 Build custom interfaces for: logging, evals, guardrails, labelling, tracing, agents, human-in-the-loop, hyperparam sweeps, and anything else you can think of ✨
 
+<img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/notion_for_llm_observability_dark.gif"/>
+
 Just `unify.log` your data, and add an interface using the four building blocks:
 
 - tables 🔢
@@ -13,8 +15,6 @@ Just `unify.log` your data, and add an interface using the four building blocks:
 
 Every LLM product has unique and changing requirements, as do the users. Your infra should reflect this!
 
-<img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/notion_for_llm_observability_dark.gif"/>
-
 We've tried to make Unify as **(a) simple**, **(b) modular** and **(c) hackable** as possible,
 so you can quickly probe, analyze, and iterate on the data that's important for **you**, your **product** and your **users** ⚡
 

interfaces/plots.mdx

@@ -26,7 +26,9 @@ for i in range(10):
 
 We can then select the x column for the x-axis and the y column for the y-axis.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/scatter_dark.gif"/>
+</Accordion>
 
 We can also add overlay several plots on the graph,
 by selecting another column to group by (based on value equality, the same as grouping in the table).
@@ -50,7 +52,9 @@ for gender in ["male", "female"]:
 We can then select age for the x-axis, salary for the y-axis and group by gender.
 We can also add a line of best fit to each group in the plot.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/scatter_grouped_dark.gif"/>
+</Accordion>
 
 If we want to group across *multiple* independent variables, we can just create a new derived column to express the desired group.
 Let's assume we also log the nationality of the person.
@@ -76,12 +80,16 @@ for gender in ["male", "female"]:
 In order to plot against both variables, let's create a new derived column called `gender + nationality` with the equation `gender + nationality`.
 We can then group by this new column.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/scatter_two_groups_dark.gif"/>
+</Accordion>
 
 We could then create three plots for example. One which groups by gender, one which groups by location and one which groups by both.
 We can then save this and revisit this dashboard again any time in future, whenever more data is added into the project.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/three_scatter_plots_dark.gif"/>
+</Accordion>
 
 ## Line Graphs
 
@@ -97,7 +105,9 @@ for i in range(10):
     )
 ```
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/line_dark.gif"/>
+</Accordion>
 
 As before, we can also group by another column.
 Let's imagine we want to plot the speed of different models across time,
@@ -120,7 +130,9 @@ while True:
 
 We can then select time for the x-axis, speed for the y-axis and group by model.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/line_group_dark.gif"/>
+</Accordion>
 
 By default, new data will **not** be loaded into the interface unless something triggers a reload,
 such as filtering, grouping or sorting.
@@ -129,7 +141,9 @@ in order to continually stream new data into the platform.
 if we want a moving window of the runtime, we can turn streaming on for both the table and the plot,
 and then limit the time horizon to the last 5 minutes, for example.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/line_group_stream_dark.gif"/>
+</Accordion>
 
 Similar to the derived "identity" column before,
 we can create a derived "endpoint" column to plot a unique line for each model + provider combination.
@@ -163,7 +177,9 @@ for i in range(25):
 
 Let's then create the derived column and plot results for each unique **endpoint**.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/line_six_groups_dark.gif"/>
+</Accordion>
 
 ## Bar Charts
 
@@ -223,6 +239,8 @@ for month in range(1, 13):
 
 Let's take a look at the corresponding histogram.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/histogram_dark.gif"/>
+</Accordion>
 
 We can see that the usage has been steadily increasing throughout the year, good stuff! 📈

interfaces/tables.mdx

@@ -14,7 +14,9 @@ unify.log(x=1, y={"b": [4, 5, 6]}, msg="goodbye", score=0.456)
 
 This will be shown as:
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/simple_table_dark.png"/>
+</Accordion>
 
 Note that the **most recent** log is always shown at the **top** of the table,
 with row numbers in an ascending manner from top to bottom.
@@ -29,20 +31,26 @@ Columns can easily be hidden by clicking the dropdown and pressing "hide column"
 - hovering between columns and pressing the "+" button
 - clicking the column visibility dropdown and toggling the column
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/table_add_hide_columns_dark.gif"/>
+</Accordion>
 
 ### Moving Columns
 
 You can move columns by simply dragging them to where you want them.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/drag_columns_dark.gif"/>
+</Accordion>
 
 ### Pinning Columns
 
 You can pin columns to the left by dragging the left-most edge of the column towards the right (think Excel).
 This column will then be locked in place when you scroll left and right within the table.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/table_pinning_dark.gif"/>
+</Accordion>
 
 ## Grouping
 
@@ -81,17 +89,23 @@ By default, the data is just shown flat, in the order it was logged (most recent
 However, if we want to see the results of each unique experiment, we can simply group by the experiment column, and unfold the data we want to see.
 The reduction metrics are automatically calculated for each column.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/table_grouping_dark.gif"/>
+</Accordion>
 
 Conversely, if we want to see which question was the most difficult, we can group by question instead.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/table_grouping_questions_dark.gif"/>
+</Accordion>
 
 We can see that the LLM seems to find London the easiest, then Tokyo, then Paris (again, a contrived example 😁).
 
 Similarly, if we want to what the impact of a system message is, we can group by this column instead, and see the statics reduced across all experiments.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/table_grouping_sys_msg_dark.gif"/>
+</Accordion>
 
 Combined, this makes it very easily to quickly probe the data across **all** of your experiments, enabling you to easily transcending the boundaries of rigid "experiments" flexibly.
 
@@ -100,7 +114,9 @@ Combined, this makes it very easily to quickly probe the data across **all** of
 As you'd expect, sorting can also be applied to any column. Simply clicking "sort" will toggle the state between ascending, descending, and off.
 Rows are sorted in the order of the column sorts. For example, sorting by column A and *then* column B will prioritize sorting based on A, and only defer to B when the values in Column A are equal.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/sorting_dark.gif"/>
+</Accordion>
 
 ### With Grouping [🚧]
 
@@ -185,35 +201,45 @@ Everything else is column specific.
 - `Includes`: whether or not the string includes the substring
 - `Excludes`: whether or not the string excludes the substring
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/table_filter_str_dark.gif"/>
+</Accordion>
 
 ### Numbers
 
 - `==`, `!=`, `>`, `>=`, `<`, `<=`: standard comparison operators
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/table_numeric_filtering_dark.gif"/>
+</Accordion>
 
 ### DateTime
 
 - `>`, `<`: standard comparison operators
 - `Relative Mode`: select relative to the current time
 - `Absolute Mode`: select an absolute point in time
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/table_filter_datetime_dark.gif"/>
+</Accordion>
 
 ### Booleans
 
 - `True`: is true
 - `False`: is false
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/table_filter_bool_dark.gif"/>
+</Accordion>
 
 ### Lists and Dicts
 
 - `Includes`: whether or not the list includes the item / dict includes the key
 - `Excludes`: whether or not the list excludes the item / dict excludes the key
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/table_filter_dict_dark.gif"/>
+</Accordion>
 
 ### Groups [🚧]
 
@@ -238,12 +264,16 @@ unify.log(x=1, y=1)
 Let's imagine we want to filter to find the logs where `x * y > 0`. We couldn't achieve this with column filters, but we can with the global filter,
 using an expression such as `x * y > 0` or `( x > 0 and y > 0) or (x < 0 and y < 0)`.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/table_global_filter_dark.gif"/>
+</Accordion>
 
 
 We can also switch the global filter to "search" mode, which simply searches all cells for a matching substring, after casting all contents to string form (including dicts, lists, etc).
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/table_global_search_dark.gif"/>
+</Accordion>
 
 ## Derived Columns
 
@@ -259,12 +289,16 @@ for _ in range(20):
 
 We just need to provide the expression `(x**2 + y**2)**0.5`:
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/table_derived_column_dark.gif"/>
+</Accordion>
 
 Filtering, grouping, and sorting all work on derived columns, just like any other.
 However, derived columns *also* support updating their equation.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/table_derived_columns_sort_n_filter_dark.gif"/>
+</Accordion>
 
 ## Joins [🚧]
 

interfaces/views.mdx

@@ -6,7 +6,9 @@ Views enable us to actually **look** at the data, not only filter, sort, organiz
 
 A view tile must be paired with exactly one table, this can be done from the menu at the top.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/select_table_dark.gif"/>
+</Accordion>
 
 ## Cell Selection
 
@@ -23,7 +25,9 @@ GIF
 
 To avoid redundancy, every value that is shared across multiple cells is grouped in the view pane, with all the row numbers shown at the top.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/view_pane_grouping_dark.gif"/>
+</Accordion>
 
 This also makes it easy to quickly spot trends in the data.
 
@@ -35,7 +39,9 @@ The view pane supports 3 different view modes:
 2. **Plain Text**: All text is rendered as plain text.
 3. **Raw**: The columns (incuding dicts, lists, numbers etc.) are rendered as a raw strings, with no formatting or nested structure.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/text_modes_dark.gif"/>
+</Accordion>
 
 ## Hiding Columns
 
@@ -69,13 +75,17 @@ for question in ["what is 1 + 1?", "what is 2 + 2?", "what is 3 + 3?"]:
 The most intuitive way to view this data is to show the numeric data in the table (with all the power of sorting, grouping, filtering etc.),
 and the text data in the view pane to look at the finer details (and benefit from all the features explained below!)
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/view_show_hide_dark.gif"/>
+</Accordion>
 
 ## Moving Columns
 
 Columns can easily be moved in the view pane by selecting drag mode and then simply clicking and dragging them.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/view_move_columns_dark.gif"/>
+</Accordion>
 
 ## Split View
 
@@ -136,19 +146,25 @@ For string diffs, there are four modes:
 - **Side-by-side**: Per word diffs.
 - **Characters**: Per character diffs.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/string_diffs_dark.gif"/>
+</Accordion>
 
 ### Numeric
 
 Numeric value "diffs" support the four basic operators: `-`, `+`, `*` and `/`.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/numeric_diffs_dark.gif"/>
+</Accordion>
 
 ### DateTime
 
 Datetime diffs are presented as a relative difference in time, in the appropriate units (weeks, days, seconds, miliseconds etc.)
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/datetime_diffs_dark.gif"/>
+</Accordion>
 
 ### Structure Diffs
 

logging/column_contexts.mdx

@@ -21,7 +21,9 @@ with unify.Log(), unify.ColumnContext("Sciences"):
         )
 ```
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/nested_column_contexts_dark.png"/>
+</Accordion>
 
 Under the hood, column contexts are simply `/` separated field names, and so the below code is equivalent.
 
@@ -46,7 +48,9 @@ with unify.Log():
 Columns contexts can be **moved**, **hidden**, and **focused on** in the table,
 making it easy to view and organize your structured data in bulk.
 
+<Accordion title="In the Interface">
 <img class="dark-light" width="100%" src="https://raw.githubusercontent.com/unifyai/unifyai.github.io/refs/heads/main/img/externally_linked/table_column_context_manipulation_dark.gif"/>
+</Accordion>
 
 As with contexts, `unify.ColumnContext("...")` by default will also change the behaviour of `get_logs`,
 returning only the logs which are part of the column context.