docs: update gallery docs (#51)

- Point user to examples repo - Add example cards in the docs Signed-off-by: Michele Dolfi <dol@zurich.ibm.com>
DS4SD · Nov 29, 2022 · d72ba98 · d72ba98
1 parent efeec12
commit d72ba98
Show file tree

Hide file tree

Showing 5 changed files with 943 additions and 828 deletions.
diff --git a/docs/css/custom.css b/docs/css/custom.css
@@ -1,10 +1,197 @@
 .termynal-comment {
-    color: #4a968f;
-    font-style: italic;
-    display: block;
-  }
-
-  .termy [data-termynal] {
-    white-space: pre-wrap;
-  }
-
+  color: #4a968f;
+  font-style: italic;
+  display: block;
+}
+
+.termy [data-termynal] {
+  white-space: pre-wrap;
+}
+
+.md-typeset .grid {
+  grid-gap: .4rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+  margin: 1em 0
+}
+
+.md-typeset .grid.cards>:-webkit-any(ul,
+  ol) {
+  display: contents
+}
+
+.md-typeset .grid.cards>:-moz-any(ul,
+  ol) {
+  display: contents
+}
+
+.md-typeset .grid.cards>:is(ul,
+  ol) {
+  display: contents
+}
+
+.md-typeset .grid.cards>:-webkit-any(ul,
+  ol)>li,
+.md-typeset .grid>.card {
+  border: .05rem solid var(--md-default-fg-color--lightest);
+  border-radius: .1rem;
+  display: block;
+  margin: 0;
+  padding: .8rem;
+  -webkit-transition: border .25s, box-shadow .25s;
+  transition: border .25s, box-shadow .25s
+}
+
+.md-typeset .grid.cards>:-moz-any(ul,
+  ol)>li,
+.md-typeset .grid>.card {
+  border: .05rem solid var(--md-default-fg-color--lightest);
+  border-radius: .1rem;
+  display: block;
+  margin: 0;
+  padding: .8rem;
+  -moz-transition: border .25s, box-shadow .25s;
+  transition: border .25s, box-shadow .25s
+}
+
+.md-typeset .grid.cards>:is(ul,
+  ol)>li,
+.md-typeset .grid>.card {
+  border: .05rem solid var(--md-default-fg-color--lightest);
+  border-radius: .1rem;
+  display: block;
+  margin: 0;
+  padding: .8rem;
+  transition: border .25s, box-shadow .25s
+}
+
+.md-typeset .grid.cards>:-webkit-any(ul,
+  ol)>li:-webkit-any(:focus-within,
+  :hover),
+.md-typeset .grid>.card:-webkit-any(:focus-within,
+  :hover) {
+  border-color: #0000;
+  box-shadow: var(--md-shadow-z2)
+}
+
+.md-typeset .grid.cards>:-moz-any(ul,
+  ol)>li:-moz-any(:focus-within,
+  :hover),
+.md-typeset .grid>.card:-moz-any(:focus-within,
+  :hover) {
+  border-color: #0000;
+  box-shadow: var(--md-shadow-z2)
+}
+
+.md-typeset .grid.cards>:is(ul,
+  ol)>li:is(:focus-within,
+  :hover),
+.md-typeset .grid>.card:is(:focus-within,
+  :hover) {
+  border-color: #0000;
+  box-shadow: var(--md-shadow-z2)
+}
+
+.md-typeset .grid.cards>:-webkit-any(ul,
+  ol)>li>hr,
+.md-typeset .grid>.card>hr {
+  margin-bottom: 1em;
+  margin-top: 1em
+}
+
+.md-typeset .grid.cards>:-moz-any(ul,
+  ol)>li>hr,
+.md-typeset .grid>.card>hr {
+  margin-bottom: 1em;
+  margin-top: 1em
+}
+
+.md-typeset .grid.cards>:is(ul,
+  ol)>li>hr,
+.md-typeset .grid>.card>hr {
+  margin-bottom: 1em;
+  margin-top: 1em
+}
+
+.md-typeset .grid.cards>:-webkit-any(ul,
+  ol)>li>:first-child,
+.md-typeset .grid>.card>:first-child {
+  margin-top: 0
+}
+
+.md-typeset .grid.cards>:-moz-any(ul,
+  ol)>li>:first-child,
+.md-typeset .grid>.card>:first-child {
+  margin-top: 0
+}
+
+.md-typeset .grid.cards>:is(ul,
+  ol)>li>:first-child,
+.md-typeset .grid>.card>:first-child {
+  margin-top: 0
+}
+
+.md-typeset .grid.cards>:-webkit-any(ul,
+  ol)>li>:last-child,
+.md-typeset .grid>.card>:last-child {
+  margin-bottom: 0
+}
+
+.md-typeset .grid.cards>:-moz-any(ul,
+  ol)>li>:last-child,
+.md-typeset .grid>.card>:last-child {
+  margin-bottom: 0
+}
+
+.md-typeset .grid.cards>:is(ul,
+  ol)>li>:last-child,
+.md-typeset .grid>.card>:last-child {
+  margin-bottom: 0
+}
+
+.md-typeset .grid>* {
+  margin-bottom: 0;
+  margin-top: 0
+}
+
+.md-typeset .grid>:-webkit-any(.admonition,
+  details) {
+  margin-bottom: 0;
+  margin-top: 0
+}
+
+.md-typeset .grid>:-moz-any(.admonition,
+  details) {
+  margin-bottom: 0;
+  margin-top: 0
+}
+
+.md-typeset .grid>:is(.admonition,
+  details) {
+  margin-bottom: 0;
+  margin-top: 0
+}
+
+.md-typeset .grid>.highlight>*,
+.md-typeset .grid>.highlighttable,
+.md-typeset .grid>pre {
+  margin-bottom: 0;
+  margin-top: 0
+}
+
+.md-typeset .grid>.highlight>pre:only-child,
+.md-typeset .grid>.highlight>pre>code,
+.md-typeset .grid>.highlighttable,
+.md-typeset .grid>.highlighttable>tbody,
+.md-typeset .grid>.highlighttable>tbody>tr,
+.md-typeset .grid>.highlighttable>tbody>tr>.code,
+.md-typeset .grid>.highlighttable>tbody>tr>.code>.highlight,
+.md-typeset .grid>.highlighttable>tbody>tr>.code>.highlight>pre,
+.md-typeset .grid>.highlighttable>tbody>tr>.code>.highlight>pre>code {
+  height: 100%
+}
+
+.md-typeset .grid>.tabbed-set {
+  margin-bottom: 0;
+  margin-top: 0
+}
diff --git a/docs/gallery/index.md b/docs/gallery/index.md
@@ -1,23 +1,71 @@
 # Gallery
 
-*Examples of complete analysis and usages*
+*Showcase some common usage of Deep Search for **Document conversion** as well as **Data and Knowledge exploration**.*
+
 
 Examples are usually demonstrated as Jupyter notebooks which are listed in the [examples](https://github.com/DS4SD/deepsearch-toolkit/tree/main/examples) folder.
 
-[To the examples :octicons-link-external-16:](https://github.com/DS4SD/deepsearch-toolkit/tree/main/examples){ .md-button .md-button--primary }
+[To the examples :octicons-link-external-16:](https://github.com/DS4SD/deepsearch-examples){ .md-button .md-button--primary }
+
+
+## Examples
+
+<div class="grid cards" markdown>
+
+-   __Convert documents quick start__
+
+    ---
+
+    <img src="https://github.com/DS4SD/deepsearch-examples/raw/main/.readme_resources/doc_conversion_quick_start.png" width="300px" />
+    <br />
+
+    Full example on programmatic document conversion
+
+    [:octicons-arrow-right-24: Try it out](https://github.com/DS4SD/deepsearch-examples/tree/main/examples/document_conversion_quick_start)
+
+-   __Visualize bounding boxes__
+
+    ---
+
+    <img src="https://github.com/DS4SD/deepsearch-examples/raw/main/.readme_resources/visualize_bbox.png" width="300px" />
+    <br />
+
+    Visualize the bbox of the text elements
+
+    [:octicons-arrow-right-24: Try it out](https://github.com/DS4SD/deepsearch-examples/tree/main/examples/document_conversion_visualize_bbox)
+
+-   __Extract figures from documents__
+
+    ---
+
+    <img src="https://github.com/DS4SD/deepsearch-examples/raw/main/.readme_resources/extract_figures.png" width="300px" />
+    <br />
+
+    Given a PDF file, extract the figures
+
+    [:octicons-arrow-right-24: Try it out](https://github.com/DS4SD/deepsearch-examples/tree/main/examples/document_conversion_extract_figures)
+
+-   __Extract tables__
+
+    ---
+
+    <img src="https://github.com/DS4SD/deepsearch-examples/raw/main/.readme_resources/extract_tables.png" width="300px" />
+    <br />
+
+    Given a PDF file, extract the tables
+
+    [:octicons-arrow-right-24: Try it out](https://github.com/DS4SD/deepsearch-examples/tree/main/examples/document_conversion_extract_tables)
 
+-   __Data query quick start__
 
-!!! tip "Dependencies"
+    ---
 
-    Running the examples requires additional dependencies such as [jupyter/notebook](https://github.com/jupyter/notebook) and [pandas](https://pandas.pydata.org/).
-    These are easily installed with the `examples` extra dependency.
+    <img src="https://github.com/DS4SD/deepsearch-examples/raw/main/.readme_resources/data_query_quick_start.png" width="300px" />
+    <br />
 
-    <div class="termy">
+    Example listing data collections, making search in one and more document collections, using source for projection
 
-    ```console
-    $ pip install deepsearch-toolkit[examples]
+    [:octicons-arrow-right-24: Try it out](https://github.com/DS4SD/deepsearch-examples/tree/main/examples/data_query_quick_start)
 
-    ---> 100%
-    ```
+</div>
 
-    </div>
diff --git a/examples/README.md b/examples/README.md
@@ -1,5 +1,15 @@
 # Deep Search examples
 
+Examples are now available in a dedicated gallery.
+
+:point_right: [https://github.com/DS4SD/deepsearch-examples](https://github.com/DS4SD/deepsearch-examples)
+
+
+---
+
+> This section is deprecated
+
+
 ## Install
 
 The examples notebooks contained in this folder require additional dependencies for being executed.