Upload 2 files

app.py

@@ -0,0 +1,134 @@
+import gradio as gr
+from interface_pages.home_page import home_page
+from interface_pages.about_page import about_page
+from interface_pages.yoga_position_from_stream import yoga_position_from_stream
+from interface_pages.yoga_position_from_video import yoga_position_from_video
+import time
+
+
+def main(page):
+    if page == "Home":
+        return home_page()
+    elif page == "About us":
+        return about_page()
+    elif page == "Yoga from stream":
+        return yoga_position_from_stream()
+    elif page == "Yoga from video":
+        return yoga_position_from_video()
+
+
+def interface():
+    css_version = int(time.time())  # Use current timestamp as version
+    with gr.Blocks(css=f"static/styles.css?v={css_version}") as demo:
+        # ASCII Logo at the top with inline gradient style
+        ascii_logo = """
+                 ___           ___           ___                 
+                 /\  \         /\__\         /\  \                
+      ___       /::\  \       /:/ _/_       /::\  \       ___     
+     /|  |     /:/\:\  \     /:/ /\  \     /:/\:\  \     /\__\    
+    |:|  |    /:/  \:\  \   /:/ /::\  \   /:/ /::\  \   /:/__/    
+    |:|  |   /:/__/ \:\__\ /:/__\/\:\__\ /:/_/:/\:\__\ /::\  \    
+  __|:|__|   \:\  \ /:/  / \:\  \ /:/  / \:\/:/  \/__/ \/\:\  \__ 
+ /::::\  \    \:\  /:/  /   \:\  /:/  /   \::/__/       ~~\:\/\__\\
+ ~~~~\:\  \    \:\/:/  /     \:\/:/  /     \:\  \          \::/  /
+      \:\__\    \::/  /       \::/  /       \:\__\         /:/  / 
+       \/__/     \/__/         \/__/         \/__/         \/__/  
+        """
+        gr.HTML(
+            f"""
+            <div class="ascii-logo-container" style="display: flex; justify-content: center; width: 100%;">
+                <pre class="ascii-logo" style="
+                    font-family: monospace;
+                    font-size: 2.1em;
+                    line-height: 1.2;
+                    white-space: pre;
+                    text-align: center;
+                    background: linear-gradient(to right, #7dc4e4, #c6a0f6);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    display: inline-block;
+                ">{ascii_logo}</pre>
+            </div>
+            """
+        )
+
+        # Layout with a Row to hold buttons and content
+        with gr.Row():
+            with gr.Column(scale=1, elem_classes=["menu-column"]):
+                # Vertical Navigation Buttons
+                home_button = gr.Button("Home", elem_classes=["menu-button"])
+                about_button = gr.Button("About us", elem_classes=["menu-button"])
+                yoga_stream_button = gr.Button(
+                    "Yoga from stream", elem_classes=["menu-button"]
+                )
+                yoga_video_button = gr.Button(
+                    "Yoga from video", elem_classes=["menu-button"]
+                )
+
+        # Create page contents
+        with gr.Column(elem_id="page-content") as page_content:
+            home_page_content = home_page()
+            about_page_content = about_page()
+            yoga_stream_content = yoga_position_from_stream()
+            yoga_video_content = yoga_position_from_video()
+
+        # Set initial visibility
+        home_page_content.visible = True
+        about_page_content.visible = False
+        yoga_stream_content.visible = False
+        yoga_video_content.visible = False
+
+        # Button click handlers
+        def show_page(page):
+            return [
+                gr.update(visible=(content == page))
+                for content in [
+                    home_page_content,
+                    about_page_content,
+                    yoga_stream_content,
+                    yoga_video_content,
+                ]
+            ]
+
+        home_button.click(
+            lambda: show_page(home_page_content),
+            outputs=[
+                home_page_content,
+                about_page_content,
+                yoga_stream_content,
+                yoga_video_content,
+            ],
+        )
+        about_button.click(
+            lambda: show_page(about_page_content),
+            outputs=[
+                home_page_content,
+                about_page_content,
+                yoga_stream_content,
+                yoga_video_content,
+            ],
+        )
+        yoga_stream_button.click(
+            lambda: show_page(yoga_stream_content),
+            outputs=[
+                home_page_content,
+                about_page_content,
+                yoga_stream_content,
+                yoga_video_content,
+            ],
+        )
+        yoga_video_button.click(
+            lambda: show_page(yoga_video_content),
+            outputs=[
+                home_page_content,
+                about_page_content,
+                yoga_stream_content,
+                yoga_video_content,
+            ],
+        )
+
+    return demo
+
+
+if __name__ == "__main__":
+    interface().launch(share=True)

static/styles.css

@@ -0,0 +1,201 @@
+:root {
+    --rosewater: #f4dbd6;
+    --flamingo: #f0c6c6;
+    --pink: #f5bde6;
+    --mauve: #c6a0f6;
+    --red: #ed8796;
+    --maroon: #ee99a0;
+    --peach: #f5a97f;
+    --yellow: #eed49f;
+    --green: #a6da95;
+    --teal: #8bd5ca;
+    --sky: #91d7e3;
+    --sapphire: #7dc4e4;
+    --blue: #8aadf4;
+    --lavender: #b7bdf8;
+    --text: #cad3f5;
+    --subtext1: #b8c0e0;
+    --subtext0: #a5adcb;
+    --overlay2: #939ab7;
+    --overlay1: #8087a2;
+    --overlay0: #6e738d;
+    --surface2: #5b6078;
+    --surface1: #494d64;
+    --surface0: #363a4f;
+    --base: #24273a;
+    --mantle: #1e2030;
+    --crust: #181926;
+}
+
+body {
+    background-color: var(--base);
+    color: var(--text);
+    font-family: 'Inter', sans-serif;
+}
+
+.gradio-container {
+    background-color: rgba(36, 39, 58, 0.7) !important;
+}
+
+/* ASCII Logo Styling */
+.ascii-logo-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 20px;
+    padding: 20px 0;
+    background: rgba(54, 58, 79, 0.3);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.ascii-logo {
+    font-family: monospace;
+    font-size: 0.7em;
+    line-height: 1.2;
+    white-space: pre;
+    text-align: center;
+    background: linear-gradient(to right, #7dc4e4, #c6a0f6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    display: inline-block;
+}
+
+.gradio-container .menu-column {
+    background: rgba(54, 58, 79, 0.3) !important;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 20px;
+    height: 100vh;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+}
+
+.gradio-container .menu-button {
+    color: var(--text) !important;
+    background: rgba(73, 77, 100, 0.3) !important;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    padding: 15px 20px !important;
+    width: 80% !important;
+    margin-left: 10% !important;
+    text-align: center !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    margin-bottom: 15px !important;
+    border-radius: 25px !important;
+    font-size: 1.2em !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
+}
+
+.gradio-container .menu-button:hover {
+    background: rgba(91, 96, 120, 0.5) !important;
+    color: var(--subtext1) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
+}
+
+.gradio-container .gr-button-primary {
+    background: rgba(138, 173, 244, 0.3) !important;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    color: var(--text) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 25px !important;
+    padding: 12px 24px !important;
+    font-size: 1.2em !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
+}
+
+.gradio-container .gr-button-secondary {
+    background: rgba(73, 77, 100, 0.3) !important;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    color: var(--text) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 25px !important;
+    padding: 12px 24px !important;
+    font-size: 1.2em !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
+}
+
+.gradio-container .gr-button-primary:hover,
+.gradio-container .gr-button-secondary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
+    background: rgba(91, 96, 120, 0.5) !important;
+}
+
+.gradio-container .gr-input,
+.gradio-container .gr-textarea {
+    background: rgba(54, 58, 79, 0.3) !important;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    color: var(--text) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 12px !important;
+    transition: all 0.3s ease !important;
+}
+
+.gradio-container .gr-input:focus,
+.gradio-container .gr-textarea:focus {
+    border-color: rgba(138, 173, 244, 0.6) !important;
+    box-shadow: 0 0 0 2px rgba(138, 173, 244, 0.3) !important;
+}
+
+.gradio-container .gr-form {
+    background: rgba(54, 58, 79, 0.3) !important;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 16px !important;
+    padding: 20px !important;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
+}
+
+.gradio-container .gr-box {
+    background: rgba(73, 77, 100, 0.3) !important;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 16px !important;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
+}
+
+.gradio-container .gr-panel {
+    background: rgba(54, 58, 79, 0.3) !important;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 16px !important;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Scrollbar styling */
+.gradio-container ::-webkit-scrollbar {
+    width: 10px;
+}
+
+.gradio-container ::-webkit-scrollbar-track {
+    background: rgba(54, 58, 79, 0.3);
+}
+
+.gradio-container ::-webkit-scrollbar-thumb {
+    background: rgba(110, 115, 141, 0.5);
+    border-radius: 5px;
+}
+
+.gradio-container ::-webkit-scrollbar-thumb:hover {
+    background: rgba(128, 135, 162, 0.7);
+}
+
+/* Media query for larger screens */
+@media (min-width: 1200px) {
+    .ascii-logo {
+        font-size: 1em;
+    }
+}