Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,40 +1,75 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
+from utils import (
+    render_intro_section,
+    render_objective_section,
+    render_architecture_section,
+    render_process_section,
+    render_technology_section,
+    render_applications_section,
+    render_live_demo_section
+)
 
-"""
-# Welcome to Streamlit!
+# Page configuration
+st.set_page_config(
+    page_title="Facial Gesture Recognition AI",
+    page_icon="🧠",
+    layout="wide"
+)
 
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
+# Custom styles for the presentation
+st.markdown("""
+    <style>
+    .main-header {
+        font-size: 42px;
+        font-weight: bold;
+        margin-bottom: 0;
+    }
+    .sub-header {
+        font-size: 24px;
+        color: #1E88E5;
+        margin-top: 0;
+    }
+    .section-header {
+        font-size: 32px;
+        font-weight: bold;
+        border-bottom: 2px solid #1E88E5;
+        padding-bottom: 10px;
+        margin-top: 30px;
+    }
+    </style>
+""", unsafe_allow_html=True)
 
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
+# Title and introduction
+st.markdown('<p class="main-header">Facial Gesture Recognition Using AI</p>', unsafe_allow_html=True)
+st.markdown('<p class="sub-header">Real-time video processing with CNN-LSTM architecture</p>', unsafe_allow_html=True)
 
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
+# Navigation sidebar
+st.sidebar.title("Navigation")
+section = st.sidebar.radio(
+    "Go to",
+    ["Introduction", "Project Objective", "Architecture & Methodology", 
+     "Process Flow", "Technologies", "Applications", "Live Demo"]
+)
 
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
+# Render the selected section
+if section == "Introduction":
+    render_intro_section()
+elif section == "Project Objective":
+    render_objective_section()
+elif section == "Architecture & Methodology":
+    render_architecture_section()
+elif section == "Process Flow":
+    render_process_section()
+elif section == "Technologies":
+    render_technology_section()
+elif section == "Applications":
+    render_applications_section()
+elif section == "Live Demo":
+    render_live_demo_section()
 
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+# Footer
+st.sidebar.markdown("---")
+st.sidebar.info(
+    "This interactive presentation showcases a facial gesture recognition system "
+    "using CNN-LSTM architecture for real-time video processing."
+)