Skip to content

feat: streamlit config established #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Abhishek-Mallick wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat: streamlit config established #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5d525e0
Added starter documentation on streamlit
Abhishek-Mallick Oct 8, 2023
ff4b2f7
feat:updated streamlit docs - merge resolved
Abhishek-Mallick Oct 9, 2023
0f5fd48
Merge resolved
Abhishek-Mallick Oct 10, 2023
4f0384b
Merge branch 'main' into feat/streamlit-doc
Abhishek-Mallick Oct 11, 2023
578de04
Merge branch 'main' into feat/streamlit-doc
Abhishek-Mallick Oct 17, 2023
553a460
Merge branch 'main' into feat/streamlit-doc
Abhishek-Mallick Oct 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 13 additions & 1 deletion src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -40,6 +41,17 @@ const App = () => {
{/* if we have child element we need added here */}
</Route>
<Route path="Pandas-Library" element={<Outlet />}>
<Route path="Intro-to-pandas" element={<PandasBasics />} />


{/* <Route index element={<Two />} />
<Route path="Inbuilt-Functions" element={<Inbuilt />} />
<Route path="Loops-in-Python" element={<User />} /> */}

</Route>
<Route path="Streamlit-Library" element={<Outlet />}>
<Route path="Intro-to-Streamlit" element={<StreamlitBasics />} />

<Route path="Intro-to-pandas" element={<PandasBasics />} />
</Route>
<Route path="Matplotlib-Library" element={<Outlet />}>
Expand Down
10 changes: 10 additions & 0 deletions src/Constants/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)",
Expand Down
271 changes: 271 additions & 0 deletions src/Python_Library_Pages/Streamlit/Intro-to-Streamlit.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,271 @@
import React from "react";

const StreamlitBasics = () => {
return (
<div>
<h1><b>Introduction to Streamlit</b></h1>
<br />
<pre>
<code>
{`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.
`}
</code>
</pre>
<br />
<br />
<h1>
<b>How to use Streamlit</b>
</h1>
<h2><b>Install Streamlit</b></h2>
<p>
<br />
<h2>
<b>For Windows:</b>
</h2>
<h2>
- <u>Install Anaconda and create your environment</u>
- <u>Open the terminal:</u>
</h2>
<ol>
<li>
Type this command in the terminal to install Streamlit:{" "}
<a href="">
<b>
<b>pip install streamlit</b>
</b>
</a>
</li>
</ol>
<br />
<h2>
<b>For MacOS:</b>
</h2>
<h2>
- <u>Install pip:</u>
- <u>Open the terminal:</u>
</h2>
<ol>
<li>
Type this command in the terminal to install pip:{" "}
<a href="">
<b>
<b>sudo easy_install pip</b>
</b>
</a>
</li>
</ol>
<br />
<h2>
- <u>Install pipenv:</u>
</h2>
<ol>
<li>Run this code.</li>
<b>
<b>pip3 install pipenv</b>
</b>
</ol>
<h2>
<br></br>
- <u>Create your environment. Open your project folder:</u>
</h2>
<ol>
<li>Run this code.</li>
<b>
<b>cd project_folder_name</b>
</b>
</ol>
<br />
<h2>
- <u>Create a pipenv environment::</u>
</h2>
<ol>
<li>Run this code.</li>
<b>
<b>pipenv shell</b>
</b>
</ol>

<h2>
- <u>Type this command to install Streamlit:</u>
</h2>
<ol>
<li>Run this code.</li>
<b>
<b>pip install streamlit</b>
</b>
</ol>

<h2>
- <u>Create a pipenv environment::</u>
</h2>
<ol>
<li>Run this code.</li>
<b>
<b>pipenv shell</b>
</b>
<li>Test if the installation worked.</li>
<b>
<b>streamlit hello</b>
</b>
</ol>

<h2>
<b>For Linux:</b>
</h2>
<h2>
- <u>Install pip:</u>
- <u>Open the terminal:</u>
</h2>
<ol>
<li>
Type this command in the terminal to install pip:{" "}
<a href="">
<b>
<b>sudo apt-get install python3-pip</b>
</b>
</a>
</li>
</ol>
<br />
<h2>
- <u>Install pipenv:</u>
</h2>
<ol>
<li>Run this code.</li>
<b>
<b>pip3 install pipenv</b>
</b>
</ol>
<h2>
<br></br>
- <u>Create your environment. Open your project folder:</u>
</h2>
<ol>
<li>Run this code.</li>
<b>
<b>cd project_folder_name</b>
</b>
</ol>
<br />
<h2>
- <u>Create a pipenv environment:</u>
</h2>
<ol>
<li>Run this code.</li>
<b>
<b>pipenv shell</b>
</b>
</ol>

<h2>
- <u>Type this command to install Streamlit:</u>
</h2>
<ol>
<li>Run this code.</li>
<b>
<b>pip install streamlit</b>
</b>
</ol>

<h2>
- <u>Create a pipenv environment::</u>
</h2>
<ol>
<li>Run this code.</li>
<b>
<b>pipenv shell</b>
</b>
<li>Test if the installation worked.</li>
<b>
<b>streamlit hello</b>
</b>
</ol>
<br />

<h2>How to run your Streamlit code</h2>
<li><b>streamlit run file_name.py</b></li>
<br />


</p>
<br />
<br />

<h2><b>Streamlit Components</b></h2>
<p>
Streamlit apps are built using a set of components that allow you to create interactive user interfaces. Some commonly used Streamlit components include:
</p>
<ul>
<li><b>st.text()</b>: Display plain text.</li>
<li><b>st.markdown()</b>: Render Markdown-formatted text.</li>
<li><b>st.title()</b>: Display a title.</li>
<li><b>st.image()</b>: Display images.</li>
<li><b>st.dataframe()</b>: Display DataFrames.</li>
<li><b>st.plotly_chart()</b>: Render Plotly charts.</li>
<li><b>st.map()</b>: Display interactive maps.</li>
</ul>
<p>
You can combine these components to build rich and interactive Streamlit apps. For detailed usage and examples, refer to the Streamlit documentation.
</p>

<br />
<h2><b>Deploying a Streamlit App</b></h2>
<p>
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:
</p>

<h3><b>Streamlit Sharing (Free Hosting)</b></h3>
<p>
Streamlit offers a free hosting platform called Streamlit Sharing. Follow these steps to deploy your app:
</p>
<ol>
<li>Create a GitHub repository containing your Streamlit app.</li>
<li>Sign in to Streamlit Sharing with your GitHub account.</li>
<li>Select your GitHub repository and deploy your app.</li>
<li>Streamlit Sharing will provide a URL where your app is hosted.</li>
</ol>
<br />
<h3><b>Heroku (Custom Hosting)</b></h3>
<p>
If you prefer custom hosting, you can deploy your Streamlit app on Heroku:
</p>
<ol>
<li>Create a Heroku account if you don't have one.</li>
<li>Install the Heroku CLI.</li>
<li>Create a requirements.txt file containing your app's dependencies.</li>
<li>Create a Procfile to specify how Heroku should run your app.</li>
<li>Deploy your app to Heroku using Git.</li>
<li>Heroku will provide a URL where your app is hosted.</li>
</ol>
<br />
<h3><b>Other Deployment Options</b></h3>
<p>
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.
</p>

</div>
);
};

export default StreamlitBasics;
5 changes: 4 additions & 1 deletion src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down