Update app.py

app.py

@@ -1,13 +1,11 @@
 import streamlit as st
 from PIL import Image
 import numpy as np
-import time
-import random
 
 # Page config
 st.set_page_config(
     page_title="GestureGuru",
-    page_icon="🔍",
+    page_icon="🤖",
     layout="wide",
     initial_sidebar_state="auto"
 )
@@ -16,59 +14,57 @@ st.set_page_config(
 st.markdown("""
 <style>
 body {
-    background: linear-gradient(135deg, #e0f2f1, #fce4ec);
+    background: linear-gradient(to right, #f8fbff, #eef7ff);
     font-family: 'Segoe UI', sans-serif;
-}
-header {
-    visibility: hidden;
-}
-section.main > div {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
+    color: #333;
 }
 .hero {
     text-align: center;
-    padding: 3rem 2rem;
-    background: linear-gradient(90deg, #00c9ff, #92fe9d);
-    border-radius: 16px;
-    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
+    padding: 5rem 2rem;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    border-radius: 24px;
     color: white;
+    margin-bottom: 3rem;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
 }
 .hero h1 {
-    font-size: 3.5em;
-    margin-bottom: 0.2em;
+    font-size: 3.75em;
+    font-weight: 700;
+    margin-bottom: 0.3em;
 }
 .hero p {
-    font-size: 1.25em;
+    font-size: 1.3em;
+    font-weight: 300;
     margin-top: 0.5em;
 }
 .section {
-    background-color: white;
-    border-radius: 16px;
-    padding: 2rem;
-    margin-bottom: 2rem;
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
-    transition: transform 0.3s ease;
-}
-.section:hover {
-    transform: translateY(-5px);
+    background: white;
+    border-radius: 20px;
+    padding: 2.5rem;
+    margin-bottom: 2.5rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
 }
 h3 {
-    color: #212121;
+    font-size: 1.8rem;
+    color: #333;
+    margin-bottom: 1rem;
 }
 ul, ol {
-    color: #555;
     font-size: 1.1em;
+    line-height: 1.6;
 }
-.prediction-box {
+.contact-block {
     text-align: center;
-    font-size: 1.5em;
-    padding: 1rem;
-    border-radius: 12px;
-    background: #fff3e0;
-    color: #e65100;
-    margin-top: 1rem;
-    box-shadow: 0px 4px 12px rgba(0,0,0,0.06);
+    padding: 3rem;
+    border-radius: 20px;
+    background: linear-gradient(to right, #ff416c, #ff4b2b);
+    color: white;
+    margin-top: 3rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+.contact-block a {
+    color: #fff;
+    text-decoration: underline;
 }
 </style>
 """, unsafe_allow_html=True)
@@ -76,20 +72,20 @@ ul, ol {
 # --- Hero Section ---
 st.markdown("""
 <div class="hero">
-    <h1>🔍 GestureGuru</h1>
-    <p>AI-powered Russian Sign Language Recognition</p>
-    <p>Enhancing communication through computer vision</p>
+    <h1>GestureGuru</h1>
+    <p>AI for Sign Language Understanding & Accessibility</p>
 </div>
 """, unsafe_allow_html=True)
 
 # --- Features ---
 st.markdown("""
 <div class="section">
-<h3>🌟 Features</h3>
+<h3>✨ Key Features</h3>
 <ul>
-  <li>🧠 Real-time sign language recognition</li>
-  <li>🖐️ Supports multiple gesture classes</li>
-  <li>💡 Simple, accessible UI</li>
+  <li>⚡ Real-time AI gesture recognition</li>
+  <li>🧠 Optimized for Russian Sign Language</li>
+  <li>🖥️ Lightweight and browser-based interface</li>
+  <li>🌍 Promoting accessibility and inclusive communication</li>
 </ul>
 </div>
 """, unsafe_allow_html=True)
@@ -97,48 +93,24 @@ st.markdown("""
 # --- How it works ---
 st.markdown("""
 <div class="section">
-<h3>🧰 How it works</h3>
+<h3>🛠 How it works</h3>
 <ol>
-  <li>Use the live camera or upload a gesture frame</li>
-  <li>The model processes the input</li>
-  <li>Recognized gestures appear as text output</li>
+  <li>Camera captures hand gestures</li>
+  <li>Frame is processed via ONNX deep learning model</li>
+  <li>Text prediction appears instantly on screen</li>
 </ol>
 </div>
 """, unsafe_allow_html=True)
 
-# --- Simulated Prediction Animation ---
-st.markdown("""
-<div class="section">
-<h3>🎬 Live Prediction Simulation</h3>
-<p>Watch how GestureGuru might respond in real-time:</p>
-""", unsafe_allow_html=True)
-
-placeholder = st.empty()
-progress = st.progress(0)
-
-for i in range(100):
-    time.sleep(0.03)
-    progress.progress(i + 1)
-
-gesture_samples = ["Hello", "Thank you", "Yes", "No", "Please", "Goodbye"]
-selected = random.choice(gesture_samples)
-confidence = round(random.uniform(87.0, 99.9), 1)
-
-with placeholder.container():
-    st.markdown(f"""
-    <div class="prediction-box">
-        ✅ Detected gesture: <strong>{selected}</strong><br>
-        🔍 Confidence: <strong>{confidence}%</strong>
-    </div>
-    """, unsafe_allow_html=True)
-
 # --- Contact block ---
 st.markdown("""
-<div class="section" style="text-align: center; background: linear-gradient(90deg, #fc466b, #3f5efb); color: white;">
-<h3>📢 Want to collaborate?</h3>
-<p>Email: <a style="color: #fff; text-decoration: underline;" href="mailto:your@email.com">your@email.com</a></p>
+<div class="contact-block">
+    <h3>📬 Let's collaborate!</h3>
+    <p>For demos, partnerships, or research opportunities:</p>
+    <p>Email: <a href="mailto:your@email.com">your@email.com</a></p>
 </div>
 """, unsafe_allow_html=True)
 
 
 
+