From 1427ef05b1682cd08a0422596e3b0ef003182e9c Mon Sep 17 00:00:00 2001
From: Andreas Motl <andreas.motl@crate.io>
Date: Thu, 27 Jun 2024 11:52:57 +0200
Subject: [PATCH] Framework: Add items about programming frameworks Gradio and
 Streamlit

---
 docs/index.md               | 24 +++++++---
 docs/integrate/framework.md | 90 +++++++++++++++++++++++++++++++++++++
 2 files changed, 107 insertions(+), 7 deletions(-)
 create mode 100644 docs/integrate/framework.md

diff --git a/docs/index.md b/docs/index.md
index 7ef8a2a..d3c1b0e 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -64,19 +64,19 @@ List of HTTP and PostgreSQL client drivers, and tutorials.
 :::
 
 
-:::{grid-item-card} {material-outlined}`crop_landscape;2em` DataFrame Libraries
-:link: df
+:::{grid-item-card} {material-outlined}`data_object;2em` ORM Libraries
+:link: orm
 :link-type: ref
 
-Connectivity with DataFrame libraries like pandas and Dask.
+Connectivity with ORM libraries like SQLAlchemy.
 :::
 
 
-:::{grid-item-card} {material-outlined}`data_object;2em` ORM Libraries
-:link: orm
+:::{grid-item-card} {material-outlined}`crop_landscape;2em` DataFrame Libraries
+:link: df
 :link-type: ref
 
-Connectivity with ORM libraries like SQLAlchemy.
+Connectivity with DataFrame libraries like pandas and Dask.
 :::
 
 
@@ -109,6 +109,15 @@ All on one page.
 :gutter: 1
 
 
+:::{grid-item-card} {material-outlined}`code;2em` Programming Frameworks
+:link: framework
+:link-type: ref
+
+Connectivity with open-source programming frameworks and libraries
+like Gradio, Plotly, or Streamlit.
+:::
+
+
 :::{grid-item-card} {material-outlined}`transform;2em` ETL
 :link: etl
 :link-type: ref
@@ -173,13 +182,14 @@ Looking for the previous content on this page? Visit [](#index-legacy).
 IDE applications <connect/ide>
 CLI programs <connect/cli>
 Database Drivers <connect/index>
-DataFrame Libraries <connect/df>
 ORM Libraries <connect/orm>
+DataFrame Libraries <connect/df>
 ```
 
 ```{toctree}
 :hidden:
 
+Programming Frameworks <integrate/framework>
 Load and Export <integrate/etl>
 System Metrics <integrate/metrics>
 Data Visualization <integrate/visualize>
diff --git a/docs/integrate/framework.md b/docs/integrate/framework.md
new file mode 100644
index 0000000..0dd0838
--- /dev/null
+++ b/docs/integrate/framework.md
@@ -0,0 +1,90 @@
+(framework)=
+# Using Programming Frameworks with CrateDB
+
+Application programming frameworks integrating with CrateDB.
+
+Many of them are built on top of the Python programming language, making it easy
+to use the Python libraries that you know and love.
+
+:::::{grid} 1 2 2 2
+:margin: 4 4 0 0
+:padding: 0
+:gutter: 2
+
+::::{grid-item-card} {material-outlined}`lightbulb;2em` Examples
+
+A few quick examples about how to use relevant frameworks together with CrateDB.
+
+- https://github.com/crate/cratedb-examples/tree/main/framework
++++
+{tag-info}`Gradio` {tag-info}`Streamlit`
+::::
+
+::::{grid-item-card} {material-outlined}`read_more;2em` SQLAlchemy
+CrateDB's SQLAlchemy dialect implementation provides fundamental database adapter
+infrastructure to framework integrations.
++++
+[ORM Guides](inv:guide#orm) •
+{ref}`ORM Catalog <orm>`
+::::
+
+:::::
+
+
+(gradio)=
+## Gradio
+
+```{div}
+:style: "float: right; margin-left: 0.5em"
+[![](https://raw.githubusercontent.com/gradio-app/gradio/main/readme_files/gradio.svg){w=180px}](https://www.gradio.app/)
+```
+
+[Gradio] is an open source programming framework for quickly creating and sharing
+machine learning model demo applications, written in Python.
+
+- Creating a user interface only requires adding a couple lines of code to your project.
+- It does not require any experience with HTML/JS/CSS, or web hosting.
+- Gradio can be embedded in Python notebooks, or presented as a web application.
+- Once you've created an interface, you can permanently host it on [Hugging Face].
+
+```{div}
+:style: "clear: both"
+```
+
+<iframe width="480" height="320" src="https://www.youtube-nocookie.com/embed/44vi31hehw4?si=J0w5yG56Ld4fIXfm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+_How to Build Machine Learning APIs Using Gradio._
+
+
+(streamlit)=
+## Streamlit
+
+```{div}
+:style: "float: right; margin-left: 0.5em"
+[![](https://github.com/crate/crate-clients-tools/assets/453543/0fffb2d4-1d17-49c9-96e3-fd6ae42a39c4){w=180px}](https://streamlit.io/)
+```
+
+[Streamlit] is an open source application programming framework for quickly sketching
+out Python data applications. It provides fast, interactive prototyping, and live editing.
+
+- Build dashboards, generate reports, or create chat apps using beautiful, easy-to-read code.
+- No in-depth knowledge of HTML/JS/CSS needed, the framework offers elegant default
+  styling, which can be adjusted when applicable.
+- Transform Python scripts into interactive web apps in minutes, instead of weeks.
+- Build upon a range of [Streamlit components](https://streamlit.io/components).
+- Optionally use their [Community Cloud platform](https://streamlit.io/cloud) to deploy, 
+  manage, and share your application.
+
+```{div}
+:style: "clear: both"
+```
+
+<iframe width="480" height="320" src="https://www.youtube-nocookie.com/embed/UI4f4iiVT6c?si=J0w5yG56Ld4fIXfm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+_Streamlit 101 - A faster way to build and share data applications._
+
+
+
+[Gradio]: https://www.gradio.app/
+[Hugging Face]: https://en.wikipedia.org/wiki/Hugging_Face
+[Streamlit]: https://streamlit.io/