diff --git a/package-lock.json b/package-lock.json index 962c1ec..42532ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,11 @@ "name": "sidebar-with-submenu", "version": "0.0.0", "dependencies": { +<<<<<<< HEAD + "clsx": "^2.0.0", +======= "brace": "^0.11.1", +>>>>>>> ec296f09265fdd16ff55c55c5109a4433f2d7ff7 "framer-motion": "^9.0.1", "react": "^18.2.0", "react-ace": "^10.1.0", @@ -5821,6 +5825,16 @@ "node": ">= 6" } }, +<<<<<<< HEAD + "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/chrome-trace-event": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", @@ -5904,6 +5918,7 @@ "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz", "integrity": "sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==" }, +>>>>>>> ec296f09265fdd16ff55c55c5109a4433f2d7ff7 "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 5e9fd36..20b1eb1 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,11 @@ "preview": "vite preview" }, "dependencies": { +<<<<<<< HEAD + "clsx": "^2.0.0", +======= "brace": "^0.11.1", +>>>>>>> 7bfa9711185edc10a0705e7875f8a9e740eb9c7a "framer-motion": "^9.0.1", "react": "^18.2.0", "react-ace": "^10.1.0", diff --git a/src/App.jsx b/src/App.jsx index a93983d..25321b4 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,10 @@ import { Route, Routes, Outlet } from "react-router-dom"; import RootLayout from "./layouts/RootLayout"; 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"; import MatplotlibBasics from "./Python_Library_Pages/Matplotlib/Intro-to-Matplotlib"; import PandasBasics from "./Python_Library_Pages/Pandas/Intro-to-Pandas"; import OperatorsBasics from "./Python_Library_Pages/Python_Basics/Intrduction-to-Operators"; @@ -40,6 +41,17 @@ const App = () => { {/* if we have child element we need added here */} }> + } /> + + + {/* } /> + } /> + } /> */} + + + }> + } /> + } /> }> diff --git a/src/Constants/index.js b/src/Constants/index.js index fb2c926..16bc630 100644 --- a/src/Constants/index.js +++ b/src/Constants/index.js @@ -284,6 +284,16 @@ export const subMenusList = [ }, ], }, + { + name: "Streamlit-Library", + title: "4. Intro to Streamlit", + children: [ + { + title: "Intro to Streamlit", + name: "Intro-to-Streamlit", + }, + ], + }, { name: "Pillow (PIL)", title: "Pillow (PIL)", 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; }