add model

.streamlit/config.toml

@@ -0,0 +1,2 @@
+[theme]
+base="dark"

README.md

@@ -5,8 +5,27 @@ colorFrom: indigo
 colorTo: indigo
 sdk: streamlit
 sdk_version: 1.30.0
-app_file: app.py
+app_file: main.py
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Omdena Algeria & Bhopal Streamlit App
+
+## Requirements
+
+To run this locally, you need to have the following dependencies installed:
+
+- Python 3.8 or above
+- Streamlit
+
+```shell
+pip install -r requirements.txt
+```
+
+## Run Web Application Locally
+
+To start the system, run the following command in your terminal:
+
+```shell
+streamlit run main.py
+```

_model.py

@@ -0,0 +1,5 @@
+import streamlit as st
+
+def model_page():
+    st.info("##### Model is yet to be fitted.")
+    return None

assets/styles.css

@@ -0,0 +1,61 @@
+h3 {
+    color: #fff;
+    font-size:1.393rem;
+}
+
+p { 
+    color: #ffffff99;
+    text-shadow: 0px 0px #ffffff99;
+}
+
+a:link {
+    text-decoration: none;
+}
+a:visited {
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: none;
+}
+a:active {
+    text-decoration: none;
+}
+
+footer {
+    visibility: hidden;
+}
+
+body {
+    background-color: #f8f8f8;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+#MainMenu {
+    visibility: hidden;
+}
+
+.team-container {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 20px;
+    margin: 30px auto;
+}
+
+.team-member {
+    background-color: #ffffff35;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+    text-align: center;
+    width: 200px;
+    height: 130px;
+}
+
+[data-testid="stSidebar"] {
+    background-color: #00000050;
+}
+
+h1 .sidebar_h1 {
+    color: #00ff00;
+}

config.py

@@ -0,0 +1,116 @@
+CSS = open("assets/styles.css", 'r').read()
+
+IMG_BANNER = "assets/banner.png"
+IMG_OMDENA = "assets/omdena-logo.png"
+IMG_LOGO = "assets/logo.png"
+
+SIDEBAR_TEXT_1 = """
+<center><h1>Omdena<br> Algeria & Bhopal<br>Chapter</h1></center>
+"""
+SIDEBAR_TEXT_2 = """
+<hr>
+<h3 class='sidebar_h1'>Disclaimer</h3>
+<h5 class='sidebar_h1'>The predictions provided by this system are for informational purposes only.</h5>
+"""
+
+
+PROJECT_BACKGROUND = """
+## Project background
+The arid climate of several Algerian regions and the water-stressed region of Bhopal, effective water management and forecasting are crucial. This project aims to harness the power of machine learning to address the unique water resource challenges faced by both regions. By creating an open-source solution, we aim to empower Algeria and Bhopal to make informed decisions, optimize resource allocation, and build resilient water infrastructure for a sustainable future. <br><br>
+Local Chapter Website : [Visit Site](https://www.omdena.com/chapter-challenges/open-source-water-management-and-forecasting-project-in-algeria-and-bhopal) <br>
+Dagshub Repository : [Visit Site](https://dagshub.com/Omdena/AlgeriaBhopal_WaterManagementandForecasting) <br>
+"""
+
+PROJECT_PROBLEM = f"""
+## The Problem
+The different water resource challenges faced by both Algeria and Bhopal region in India.
+"""
+
+PROJECT_GOALS = """
+## Project Goals
+##### **1. Develop a Comprehensive Open-Source Water Management and Forecasting System:**
+Create a user-friendly platform tailored to the specific needs of Algeria and Bhopal, integrating machine learning algorithms for precise water forecasting and efficient water resource management. 
+##### **2. Enhance Water Resource Utilization:**
+Improve the sustainable use of water resources in both regions by providing accurate forecasts and real-time monitoring.
+##### **3. Capacity Building:**
+Empower local stakeholders in Algeria and Bhopal with the knowledge and tools necessary to make well-informed decisions about water management.
+##### **4. Community Engagement:**
+Foster collaboration among local government agencies, NGOs, and the research community to collectively address water-related challenges in both regions.
+"""
+
+PROJECT_TIMELINE = """
+## Project Timeline
+##### 1. Project Initiation: 
+Define project goals and scope. Identify key stakeholders and project team members and teams. Secure resources.
+##### 2. Research and Data Collection: 
+Gather historical weather and water data specific to Algeria and Bhopal. Collect satellite imagery and remote sensing data. Use open source data.
+##### 3. Visualization and Exploration:
+Visualize and explore the data and identify relevant machine learning algorithms accordingly.
+##### 4. Development of Water Management Platform: 
+Design and develop the open-source platform for water management and forecasting. Implement machine learning models for water forecasting, water resources disponibility, quality and risks.
+##### 5. Testing and Validation: 
+Conduct extensive testing of the platform using historical data. Validate the accuracy of machine learning models. Address any issues or bugs that arise during testing.
+##### 6. Deployment and Maintenance: 
+Deploy the water management platform for operational use. Monitor and maintain the platform. Provide ongoing support and updates.
+##### 7. Data Dissemination:
+Refine the github repository of the project and prepare the final demo for presentation on the official platforms of Omdena and the parties involved. Write conference and/or journal papers to publish the presented solutions.
+"""
+
+
+ABOUT_US = """
+<h4 style="text-align: center; color:#FFF6F4 !important;">{More info about the problem statement}</h4><hr>
+"""
+
+
+CONTRIBUTORS = """  
+<h1 style="text-align: center; color:#FFF6F4;">A heartfelt thankyou to all our contributors ❤️</h1><hr>
+<div style="text-align:center;">
+<table>
+<tr>
+    <th width="20%" style="font-size: 140%;">Chapter Name</th>    
+    <th width="20%" style="font-size: 140%;">Chapter Lead</th>    
+</tr>
+<tr>
+    <td>Omdena Algeria Chapter</td>    
+    <td>Chapter Lead</td>    
+</tr>
+<tr>
+    <td>Omdena Bhopal Chapter</td>    
+    <td>Chapter Lead</td>    
+</tr>
+</table>
+<br>
+<table>
+    <tbody>
+        <tr>
+            <th width="20%" style="font-size: 140%;" colspan="3">Contributors</th>
+        </tr>
+        <tr>
+            <td>John Doe</td>
+            <td>John Doe</td>
+            <td>John Doe</td>
+        </tr>
+        <tr>
+            <td>John Doe</td>
+            <td>John Doe</td>
+            <td>John Doe</td>
+        </tr>
+        <tr>
+            <td>John Doe</td>
+            <td>John Doe</td>
+            <td>John Doe</td>
+        </tr>
+        <tr>
+            <td>John Doe</td>
+            <td>John Doe</td>
+            <td>John Doe</td>
+        </tr>
+        <tr>
+            <td>John Doe</td>
+            <td>John Doe</td>
+            <td>John Doe</td>
+        </tr>
+    </tbody>
+</table>
+</div>
+"""

main.py

@@ -0,0 +1,78 @@
+import base64
+import streamlit as st
+
+from config import *
+from _model import model_page 
+
+st.set_page_config(
+    page_title=f"Omdena Algeria & Bhopal Chapter",
+    page_icon="💦",
+    initial_sidebar_state="expanded"
+)
+
+def set_page_background(png_file):
+    @st.cache_data()
+    def get_base64_of_bin_file(bin_file):
+        with open(bin_file, 'rb') as f:
+            data = f.read()
+        return base64.b64encode(data).decode()
+
+    bin_str = get_base64_of_bin_file(png_file)
+    custom_css = f'''
+        <style>
+            .stApp {{
+                background-image: url("data:image/png;base64,{bin_str}");
+                background-size: cover;
+                background-repeat: no-repeat;
+                background-attachment: scroll;
+            }}
+            
+            #MainMenu {{visibility: hidden;}}
+
+            footer {{visibility: hidden;}}
+            icon {{color: white;}}
+            nav-link {{--hover-color: grey; }}
+            nav-link-selected {{background-color: #4ABF7E;}}
+        </style>
+    '''
+    st.markdown(custom_css, unsafe_allow_html=True)
+
+set_page_background('assets/background.webp')
+st.markdown(f"<style>{CSS}</style>", unsafe_allow_html=True)
+
+def home_page():
+    left, mid, right = st.columns([2, 3, 1])
+    with left, right:
+        st.empty()
+    with mid:
+        st.image(IMG_OMDENA, width=180)
+        
+    st.write("<center><h1 style='font-size: 2.7rem;'>Water Management and Forecasting Project in Algeria & Bhopal<br><br></h1></center>", unsafe_allow_html=True)
+
+    with st.expander("📜 **PROJECT PROBLEM**", expanded=True):
+        st.write(PROJECT_PROBLEM)
+    with st.expander("🎯 **PROJECT GOALS**"):
+        st.write(PROJECT_GOALS)
+    with st.expander("📖 **PROJECT BACKGROUND**"):
+        st.write(PROJECT_BACKGROUND, unsafe_allow_html=True)
+    with st.expander("📆 **PROJECT TIMELINE**"):
+        st.write(PROJECT_TIMELINE)
+
+def main():
+    st.sidebar.image("assets/logo.png")
+    st.sidebar.write(SIDEBAR_TEXT_1, unsafe_allow_html=True)
+    selected_task = st.sidebar.selectbox("Please navigate through the different sections of our website from here", ["Home", "About", "Model", "Contributors"], label_visibility="hidden")
+    st.sidebar.write(SIDEBAR_TEXT_2, unsafe_allow_html=True)
+    
+    if selected_task == "Home":
+        home_page()
+    elif selected_task == "About":
+        st.write(ABOUT_US, unsafe_allow_html=True)
+    elif selected_task == "Model":
+        model_page()
+    elif selected_task == "Contributors":
+        st.balloons()
+        st.write(CONTRIBUTORS, unsafe_allow_html=True)
+    
+if __name__ == "__main__":
+    main()

requirements.txt

@@ -0,0 +1,2 @@
+streamlit==1.26.0
+streamlit_option_menu==0.3.6