Updated page

app.py

@@ -61,26 +61,6 @@ def recommend_game(description=None, app_name=None, price_range=None, year_relea
 # Load external CSS file
 with open('style.css', 'r') as f:
     custom_css = f.read()
-# for nav
-def set_active_section(btn_id):
-    """
-    button active function and handle visibility section
-    """
-    # First set all sections to invisible
-    updates = [gr.update(visible=False) for _ in sections]
-    
-    # Then set the selected section to visible
-    if btn_id in sections:
-        index = list(sections.keys()).index(btn_id)
-        updates[index] = gr.update(visible=True)
-    
-    # Also update button active states
-    button_states = []
-    for btn in nav_buttons:
-        state = ("active" if btn.elem_id == btn_id else "") 
-        button_states.append(gr.update(elem_classes=f"nav-btn {state}"))
-    
-    return updates + button_states  
 
 """
     MAIN DEMO
@@ -88,145 +68,100 @@ def set_active_section(btn_id):
 with gr.Blocks(css = custom_css) as demo:
     # container
     with gr.Row(elem_classes="container"):
-        # navbar
-        with gr.Sidebar(elem_classes="navbar"):
-            
-            # nav header
-            with gr.Column(elem_classes="nav-header"):
-                gr.Markdown("# Game Recommendation by Your Preference")
-            
-            # nav button container
-            with gr.Column(elem_classes="nav-buttons"):
-                # nav button list  
-                nav_buttons = []
-                sections = [
-                    ('Home', 'home'),
-                    ("Dataset", "dataset"),
-                    ("Exploratory Data Analysis", "eda"),
-                    ("Preprocessing Data", "preprocess"),
-                    ("Training Result", "training"),
-                    ("Our System", "system")
-                ]
-                # create button
-                for label, section_id in sections:
-                    button = gr.Button(label, elem_classes="nav-btn", elem_id=f"btn-{section_id}")
-                    nav_buttons.append(button)
-
-            # Recommendation system
-            with gr.Column(elem_id="system", elem_classes='content-section', visible=False) as system_section:
-                # special for this section
-                gr.HTML('<h1 class="header-title">Game Recommendation System</h1>', elem_id='system')
-                with gr.Row():
-                    with gr.Column(min_width=500, elem_classes='input-column'):
-                        
-                        app_name = input_choice(
-                            Label='Select games that you liked',
-                            Choices=available_names,
+        with gr.Column(elem_id="system", elem_classes='content-section', visible=True) as system_section:
+            # special for this section
+            gr.HTML('<h1 class="header-title">Game Recommendation System</h1>', elem_id='system')
+            with gr.Row():
+                with gr.Column(min_width=500, elem_classes='input-column'):
+                    
+                    app_name = input_choice(
+                        Label='Select games that you liked',
+                        Choices=available_names,
+                        Multiselect=True
+                    )
+                    year = input_number(
+                        Label='Year Release',
+                        Precision=0,
+                        minimum=0
+                    )
+                    expected_playtime = input_number(
+                        Label='Expected Playtime (Hours)',
+                        Precision=2,
+                        minimum=0
+                    )
+                    expected_score = input_number(
+                        Label='Expected Score (% Positive)',
+                        Precision=2,
+                        minimum=0
+                    )
+                    dlc_count = input_number(
+                        Label='DLC Count',
+                        Precision=0,
+                        minimum=0
+                    )
+                    description = input_paragaph_textbox('Description', 'Describe the game (max 1200 characters)...')
+                    genre = input_choice(
+                            Label="Select Your Genre (Multiple Choice)",
+                            Choices=genres,
                             Multiselect=True
                         )
-
-                        year = input_number(
-                            Label='Year Release',
-                            Precision=0,
-                            minimum=0
-                        )
-
-                        expected_playtime = input_number(
-                            Label='Expected Playtime (Hours)',
-                            Precision=2,
-                            minimum=0
-                        )
-
-                        expected_score = input_number(
-                            Label='Expected Score (% Positive)',
-                            Precision=2,
-                            minimum=0
-                        )
-
-                        dlc_count = input_number(
-                            Label='DLC Count',
-                            Precision=0,
-                            minimum=0
-                        )
-
-                        description = input_paragaph_textbox('Description', 'Describe the game (max 1200 characters)...')
-
-                        genre = input_choice(
-                                Label="Select Your Genre (Multiple Choice)",
-                                Choices=genres,
-                                Multiselect=True
-                            )
-                        
-                        categories = input_choice(
-                                Label="Select Your Categories (Multiple Choice)",
-                                Choices=categories,
-                                Multiselect=True
-                            )
-
-                        # single selection (multiselect=False)
-                        price_range = input_choice(
-                                Label="Select Your Price Range (Only Single Choice)",
-                                Choices=price_ranges,
-                                Multiselect=False
-                            )
-                        
-                        top_n= input_number(
-                            Label='Output amount',
-                            Precision=0,
-                            minimum=0,
-                            value=10
-                        )
-                        weight_text = input_number(
-                            Label='Weight Text',
-                            Precision=2,
-                            minimum=0,
-                            maximum=1,
-                            value=0.5,
-                            step=0.01
-                        )
-                        weight_collab = input_number(
-                            Label='Weight Of Collaborative Model',
-                            Precision=2,
-                            minimum=0,
-                            maximum=1,
-                            value=0.5,
-                            step=0.01
+                    
+                    categories = input_choice(
+                            Label="Select Your Categories (Multiple Choice)",
+                            Choices=categories,
+                            Multiselect=True
                         )
-                        weight_content = input_number(
-                            Label='Weight Of Content Based Model',
-                            Precision=2,
-                            minimum=0,
-                            maximum=1,
-                            value=0.5,
-                            step=0.01
+                    # single selection (multiselect=False)
+                    price_range = input_choice(
+                            Label="Select Your Price Range (Only Single Choice)",
+                            Choices=price_ranges,
+                            Multiselect=False
                         )
-                        submit_btn = gr.Button("Get Recommendations", variant="primary", elem_id="submit-btn")
                     
-                    # Results column
-                    with gr.Column(min_width=500, elem_classes='results-column'):
-                        h2('Result')
-                        with gr.Column(elem_id='Output'):
-                            # Results column using the modular component
-                            h2('Recommended Game')
-                            recommended_game = gr.DataFrame()
-                        # click button logic
-                        submit_btn.click(
-                            fn=recommend_game,
-                            inputs=[description,app_name,price_range,year,expected_playtime,expected_score,dlc_count, genre, categories,top_n,weight_text,weight_collab,weight_content],
-                            outputs=recommended_game
-                        )
-    
-    # Navigation logic
-    sections = {
-        "btn-system": system_section
-    }
-    
-    # Set click events for navigation buttons
-    for btn in nav_buttons:
-        btn.click(
-            set_active_section,
-            inputs=gr.State(btn.elem_id),
-            outputs=list(sections.values()) + nav_buttons
-        )
+                    top_n= input_number(
+                        Label='Output amount',
+                        Precision=0,
+                        minimum=0,
+                        value=10
+                    )
+                    weight_text = input_number(
+                        Label='Weight Text',
+                        Precision=2,
+                        minimum=0,
+                        maximum=1,
+                        value=0.5,
+                        step=0.01
+                    )
+                    weight_collab = input_number(
+                        Label='Weight Of Collaborative Model',
+                        Precision=2,
+                        minimum=0,
+                        maximum=1,
+                        value=0.5,
+                        step=0.01
+                    )
+                    weight_content = input_number(
+                        Label='Weight Of Content Based Model',
+                        Precision=2,
+                        minimum=0,
+                        maximum=1,
+                        value=0.5,
+                        step=0.01
+                    )
+                    submit_btn = gr.Button("Get Recommendations", variant="primary", elem_id="submit-btn")
+                
+                # Results column
+                with gr.Column(min_width=500, elem_classes='results-column'):
+                    h2('Result')
+                    with gr.Column(elem_id='Output'):
+                        # Results column using the modular component
+                        h2('Recommended Game')
+                        recommended_game = gr.DataFrame()
+                    # click button logic
+                    submit_btn.click(
+                        fn=recommend_game,
+                        inputs=[description,app_name,price_range,year,expected_playtime,expected_score,dlc_count, genre, categories,top_n,weight_text,weight_collab,weight_content],
+                        outputs=recommended_game
+                    )
 
 demo.launch()