From 5d525e0f975b65d567fd2cb7c811b283cd43551d Mon Sep 17 00:00:00 2001 From: Abhishek Mallick Date: Sun, 8 Oct 2023 16:24:02 +0530 Subject: [PATCH] Added starter documentation on streamlit --- package-lock.json | 9 + package.json | 1 + src/App.jsx | 8 +- src/Constants/index.js | 10 + .../Streamlit/Intro-to-Streamlit.jsx | 271 ++++++++++++++++++ src/index.css | 5 +- 6 files changed, 302 insertions(+), 2 deletions(-) create mode 100644 src/Python_Library_Pages/Streamlit/Intro-to-Streamlit.jsx diff --git a/package-lock.json b/package-lock.json index 9da240d..49ffd07 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "sidebar-with-submenu", "version": "0.0.0", "dependencies": { + "clsx": "^2.0.0", "framer-motion": "^9.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -1117,6 +1118,14 @@ "node": ">= 6" } }, + "node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", diff --git a/package.json b/package.json index 93e905f..7249cc0 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "dependencies": { + "clsx": "^2.0.0", "framer-motion": "^9.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/src/App.jsx b/src/App.jsx index 0ddb027..68eea99 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -5,7 +5,7 @@ import AllApps from "./Python_Library_Pages/AllApps"; import PythonBasics from "./Python_Library_Pages/Python_Basics/Introduction-to-Python"; import NumpyBasics from "./Python_Library_Pages/Numpy/Intro-to-Numpy"; import PandasBasics from "./Python_Library_Pages/Pandas/Intro-to-Pandas"; - +import StreamlitBasics from "./Python_Library_Pages/Streamlit/Intro-to-Streamlit"; const App = () => { return ( @@ -26,9 +26,15 @@ const App = () => { }> } /> + + {/* } /> } /> } /> */} + + + }> + } /> {/* remaing routes*/} diff --git a/src/Constants/index.js b/src/Constants/index.js index 7eeaefc..33522da 100644 --- a/src/Constants/index.js +++ b/src/Constants/index.js @@ -31,5 +31,15 @@ export const subMenusList = [ } ], }, + { + name: "Streamlit-Library", + title: "4. Intro to Streamlit", + children: [ + { + title: "Intro to Streamlit", + name: "Intro-to-Streamlit", + } + ], + }, /* remaining contents*/ ]; diff --git a/src/Python_Library_Pages/Streamlit/Intro-to-Streamlit.jsx b/src/Python_Library_Pages/Streamlit/Intro-to-Streamlit.jsx new file mode 100644 index 0000000..eff090e --- /dev/null +++ b/src/Python_Library_Pages/Streamlit/Intro-to-Streamlit.jsx @@ -0,0 +1,271 @@ +import React from "react"; + +const StreamlitBasics = () => { + return ( +
+

Introduction to Streamlit

+
+ 
+        
+          {`Streamlit is a free and open-source framework to rapidly build and share beautiful machine learning and 
+data science web apps.It is a Python-based library specifically designed for machine learning engineers. 
+Data scientists or machine learning engineers are not web developers and they're not interested in spending
+weeks learning to use these frameworks to build web apps. Instead, they want a tool that is easier to learn
+and to use, as long as it can display data and collect needed parameters for modeling. Streamlit allows you
+to create a stunning-looking application with only a few lines of code.The best thing about Streamlit is that
+you don't even need to know the basics of web development to get started or to create your first web application.
+
+So if you're somebody who's into data science and you want to deploy your models easily, quickly, and with only
+a few lines of code, Streamlit is a good fit.
+
+One of the important aspects of making an application successful is to deliver it with an effective and intuitive user
+ interface. Many of the modern data-heavy apps face the challenge of building an effective user interface quickly, without
+  taking complicated steps. Streamlit is a promising open-source Python library, which enables developers to build 
+  attractive user interfaces in no time.
+
+Streamlit is the easiest way especially for people with no front-end knowledge to put their code into a web application:
+  - No front-end (html, js, css) experience or knowledge is required.
+  - You don't need to spend days or months to create a web app, you can create a really beautiful machine learning or data science app in only a few hours or even minutes.
+  - It is compatible with the majority of Python libraries (e.g. pandas, matplotlib, seaborn, plotly, Keras, PyTorch, SymPy(latex)).
+  - Less code is needed to create amazing web apps.
+  - Data caching simplifies and speeds up computation pipelines.
+`}
+        
+
+
+
+

+ How to use Streamlit +

+

Install Streamlit

+

+
+

+ For Windows: +

+

+ - Install Anaconda and create your environment + - Open the terminal: +

+
    +
  1. + Type this command in the terminal to install Streamlit:{" "} + + + pip install streamlit + + +
    2. +
+
+

+ For MacOS: +

+

+ - Install pip: + - Open the terminal: +

+
    +
  1. + Type this command in the terminal to install pip:{" "} + + + sudo easy_install pip + + +
    2. +
+
+

+ - Install pipenv: +

+
    +
  1. Run this code.
    2. + + pip3 install pipenv + +
+

+

+ - Create your environment. Open your project folder: +

+
    +
  1. Run this code.
    2. + + cd project_folder_name + +
+
+

+ - Create a pipenv environment:: +

+
    +
  1. Run this code.
    2. + + pipenv shell + +
+ +

+ - Type this command to install Streamlit: +

+
    +
  1. Run this code.
    2. + + pip install streamlit + +
+ +

+ - Create a pipenv environment:: +

+
    +
  1. Run this code.
    2. + + pipenv shell + +
  2. Test if the installation worked.
    3. + + streamlit hello + +
+ +

+ For Linux: +

+

+ - Install pip: + - Open the terminal: +

+
    +
  1. + Type this command in the terminal to install pip:{" "} + + + sudo apt-get install python3-pip + + +
    2. +
+
+

+ - Install pipenv: +

+
    +
  1. Run this code.
    2. + + pip3 install pipenv + +
+

+

+ - Create your environment. Open your project folder: +

+
    +
  1. Run this code.
    2. + + cd project_folder_name + +
+
+

+ - Create a pipenv environment: +

+
    +
  1. Run this code.
    2. + + pipenv shell + +
+ +

+ - Type this command to install Streamlit: +

+
    +
  1. Run this code.
    2. + + pip install streamlit + +
+ +

+ - Create a pipenv environment:: +

+
    +
  1. Run this code.
    2. + + pipenv shell + +
  2. Test if the installation worked.
    3. + + streamlit hello + +
+
+ +

How to run your Streamlit code

+
  • streamlit run file_name.py
    • +
    + + +

    +
    +
    + +

    Streamlit Components

    +

    + Streamlit apps are built using a set of components that allow you to create interactive user interfaces. Some commonly used Streamlit components include: +

    +
      +
    • st.text(): Display plain text.
      • +
    • st.markdown(): Render Markdown-formatted text.
      • +
    • st.title(): Display a title.
      • +
    • st.image(): Display images.
      • +
    • st.dataframe(): Display DataFrames.
      • +
    • st.plotly_chart(): Render Plotly charts.
      • +
    • st.map(): Display interactive maps.
      • +
    +

    + You can combine these components to build rich and interactive Streamlit apps. For detailed usage and examples, refer to the Streamlit documentation. +

    + +
    +

    Deploying a Streamlit App

    +

    + Once you've created your Streamlit app, you might want to deploy it to make it accessible to others. Here are some common deployment options: +

    + +

    Streamlit Sharing (Free Hosting)

    +

    + Streamlit offers a free hosting platform called Streamlit Sharing. Follow these steps to deploy your app: +

    +
      +
    1. Create a GitHub repository containing your Streamlit app.
      2. +
    2. Sign in to Streamlit Sharing with your GitHub account.
      3. +
    3. Select your GitHub repository and deploy your app.
      4. +
    4. Streamlit Sharing will provide a URL where your app is hosted.
      5. +
    +
    +

    Heroku (Custom Hosting)

    +

    + If you prefer custom hosting, you can deploy your Streamlit app on Heroku: +

    +
      +
    1. Create a Heroku account if you don't have one.
      2. +
    2. Install the Heroku CLI.
      3. +
    3. Create a requirements.txt file containing your app's dependencies.
      4. +
    4. Create a Procfile to specify how Heroku should run your app.
      5. +
    5. Deploy your app to Heroku using Git.
      6. +
    6. Heroku will provide a URL where your app is hosted.
      7. +
    +
    +

    Other Deployment Options

    +

    + Besides Streamlit Sharing and Heroku, you can deploy your Streamlit app to various cloud platforms like AWS, Google Cloud, or use containerization tools like Docker for deployment. The choice of deployment platform depends on your specific requirements and preferences. +

    + +
    + ); +}; + +export default StreamlitBasics; diff --git a/src/index.css b/src/index.css index 1a907e1..f31ae5f 100644 --- a/src/index.css +++ b/src/index.css @@ -17,7 +17,10 @@ @apply text-xl font-medium capitalize; } } - +h2{ + font-style: italic; + font-weight: bold; +} .link { @apply p-2.5 flex rounded-md gap-6 items-center md:cursor-pointer cursor-default duration-300 font-medium; }