Update app.py

app.py

@@ -91,116 +91,62 @@ st.markdown(
         from { opacity: 0; }
         to { opacity: 1; }
     }
-
-    /* Стили для интерактивных элементов боковой панели */
-    .sidebar .element-container {
-        margin: 20px 0;
-    }
-
-    .sidebar .element-container h3 {
-        color: #ff7043;
-        margin-bottom: 10px;
-    }
-
-    .sidebar .element-container input[type="text"] {
-        padding: 10px;
-        border-radius: 5px;
-        border: 1px solid #ccc;
-        width: 100%;
-    }
-
-    .sidebar .element-container textarea {
-        padding: 10px;
-        border-radius: 5px;
-        border: 1px solid #ccc;
-        width: 100%;
-        height: 100px;
-    }
     </style>
     """,
     unsafe_allow_html=True,
 )
 
-# Основной контент
-st.title("GestureGuru")
-st.subheader("Russian Sign Language Recognition")
-st.markdown("""
-    <div class="card fade-in">
-        <p>This application is designed to recognize sign language using a webcam feed. The model has been trained to recognize various sign language gestures and display the corresponding text in real-time.</p>
-    </div>
-    <div class="divider"></div>
-    <div class="card fade-in">
-        <h3>Features:</h3>
-        <ul>
-            <li>Real-time sign language recognition</li>
-            <li>Supports multiple gestures</li>
-            <li>Easy to use interface</li>
-        </ul>
-    </div>
-    <div class="divider"></div>
-    <div class="card fade-in">
-        <h3>How it works:</h3>
-        <ol>
-            <li>Upload a video or use the camera for live recognition.</li>
-            <li>The model processes the video and identifies the gestures.</li>
-            <li>The recognized gestures are displayed as text.</li>
-        </ol>
-    </div>
-    <div class="divider"></div>
-    <div class="card fade-in">
-        <h3>Why use this app:</h3>
-        <ul>
-            <li>Helps bridge the communication gap between sign language users and others.</li>
-            <li>Useful for educational purposes and learning sign language.</li>
-            <li>Enhances accessibility for people with hearing impairments.</li>
-        </ul>
-    </div>
-    """, unsafe_allow_html=True)
-
-# Добавление картинки
-st.image("image.webp", caption="Sign Language Recognition", use_column_width=True)
-
 # Боковая панель
 st.sidebar.title("Navigation")
-st.sidebar.markdown(
-    """
-    <style>
-    .sidebar .sidebar-content a {
-        color: #4CAF50;
-        font-size: 1.2rem;
-        text-decoration: none;
-    }
-    .sidebar .sidebar-content a:hover {
-        color: #f4511e;
-        text-decoration: underline;
-    }
-    </style>
-    """, 
-    unsafe_allow_html=True
-)
-
-# Добавление ссылок навигации
-st.sidebar.markdown("### Pages")
 page = st.sidebar.radio("Select a page:", ["Main", "Camera", "Video Upload"])
 
+# Установка параметров URL
+st.experimental_set_query_params(page=page)
+
+# Основной контент
 if page == "Main":
+    st.title("GestureGuru")
+    st.subheader("Russian Sign Language Recognition")
     st.markdown("""
         <div class="card fade-in">
-            <p>This is the main page of the application. Use the navigation menu on the left to access different features of the app.</p>
+            <p>This application is designed to recognize sign language using a webcam feed. The model has been trained to recognize various sign language gestures and display the corresponding text in real-time.</p>
         </div>
-    """, unsafe_allow_html=True)
-
-elif page == "Camera":
-    st.markdown("""
+        <div class="divider"></div>
         <div class="card fade-in">
-            <p>This is the Camera page. Here you can use your webcam to recognize sign language gestures in real-time.</p>
+            <h3>Features:</h3>
+            <ul>
+                <li>Real-time sign language recognition</li>
+                <li>Supports multiple gestures</li>
+                <li>Easy to use interface</li>
+            </ul>
         </div>
-    """, unsafe_allow_html=True)
-
-elif page == "Video Upload":
-    st.markdown("""
+        <div class="divider"></div>
         <div class="card fade-in">
-            <p>This is the Video Upload page. Here you can upload a video file to recognize sign language gestures from the video.</p>
+            <h3>How it works:</h3>
+            <ol>
+                <li>Upload a video or use the camera for live recognition.</li>
+                <li>The model processes the video and identifies the gestures.</li>
+                <li>The recognized gestures are displayed as text.</li>
+            </ol>
         </div>
-    """, unsafe_allow_html=True)
+        <div class="divider"></div>
+        <div class="card fade-in">
+            <h3>Why use this app:</h3>
+            <ul>
+                <li>Helps bridge the communication gap between sign language users and others.</li>
+                <li>Useful for educational purposes and learning sign language.</li>
+                <li>Enhances accessibility for people with hearing impairments.</li>
+            </ul>
+        </div>
+        """, unsafe_allow_html=True)
+    st.image("/mnt/data/A_colorful,_artistic_representation_of_hands_signi.png", caption="Sign Language Recognition", use_column_width=True)
+
+elif page == "Camera":
+    from pages import camera
+    camera.display()
+
+elif page == "Video Upload":
+    from pages import video_upload
+    video_upload.display()
+