Update app.py

app.py

@@ -221,8 +221,255 @@ custom_css = """
 }
 """
 
-# Create the Gradio interface
-with gr.Blocks(css=custom_css, title="Memory Palace Builder", theme=gr.themes.Soft()) as app:
+def create_sample_inputs_accordion():
+    """Create a Gradio accordion with all sample inputs for testing"""
+    
+    with gr.Accordion("📋 Sample Test Inputs & Examples", open=False):
+        gr.HTML("""
+        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; border-radius: 10px; margin-bottom: 20px;">
+            <h2 style="margin: 0; text-align: center;">🏰 Memory Palace Builder - Test Guide</h2>
+            <p style="margin: 10px 0 0 0; text-align: center;">Copy these examples to test each feature</p>
+        </div>
+        """)
+        
+        # API Setup Section
+        with gr.Accordion("🔑 API Setup", open=False):
+            gr.HTML("""
+            <div style="padding: 10px; background-color: #f8f9fa; border-radius: 5px;">
+                <h4>OpenRouter API Key:</h4>
+                <ul>
+                    <li>Get your free API key from: <a href="https://openrouter.ai/" target="_blank">https://openrouter.ai/</a></li>
+                    <li>Paste it in the password field and click "Validate API Key"</li>
+                </ul>
+            </div>
+            """)
+        
+        # Space Analysis Section
+        with gr.Accordion("🗺️ Space Analysis Examples", open=False):
+            with gr.Tab("🏠 Home/Apartment"):
+                gr.HTML("<h4>Space Type: Home/Apartment</h4>")
+                sample_home = gr.Textbox(
+                    label="Sample Home Description",
+                    value="""My studio apartment has a single main room with distinct areas. When you enter through the front door, there's a small entryway with a coat closet on the left. The living area has a comfortable blue sofa facing a 55-inch TV mounted on the white wall. Behind the sofa is a small dining table with two wooden chairs next to a large window that faces east and gets bright morning sunlight.
+
+The kitchen area is along the right wall with white cabinets, a black granite countertop, a stainless steel refrigerator, and a small microwave. There's a distinctive red coffee maker on the counter that I use every morning.
+
+The bedroom area is separated by a tall bookshelf filled with novels and textbooks. My bed has a navy blue comforter and sits against the far wall next to a wooden nightstand with a lamp that has a green shade. 
+
+The bathroom is compact with white tiles, a shower with a clear glass door, and a mirror with Hollywood-style lights around it. There's always a lavender scent from the candle on the sink counter.""",
+                    lines=8,
+                    max_lines=12
+                )
+            
+            with gr.Tab("🏢 Office/Workplace"):
+                gr.HTML("<h4>Space Type: Office/Workplace</h4>")
+                sample_office = gr.Textbox(
+                    label="Sample Office Description",
+                    value="""My office is a rectangular room on the 5th floor with a large window overlooking the city park. My desk is positioned diagonally in the corner near the window - it's a modern white desk with a dual monitor setup and a mechanical keyboard that makes a satisfying clicking sound.
+
+Behind my chair is a tall filing cabinet with a small cactus plant on top. To my left is a comfortable reading chair with a grey fabric cover next to a small side table where I keep my coffee mug.
+
+The opposite wall has a whiteboard covered in colorful sticky notes and project timelines. Below it is a long credenza with three drawers where I store supplies. On top of the credenza are several awards and a photo of my family.
+
+Near the door is a coat rack and a small waste basket. The lighting comes from overhead fluorescent lights and a warm desk lamp with an adjustable arm. The carpet is industrial grey, and there's always a faint smell of coffee from the break room down the hall.""",
+                    lines=8,
+                    max_lines=12
+                )
+            
+            with gr.Tab("🚶 Neighborhood Route"):
+                gr.HTML("<h4>Space Type: Neighborhood Route</h4>")
+                sample_route = gr.Textbox(
+                    label="Sample Walking Route Description",
+                    value="""My daily walking route starts at my house with the red mailbox and proceeds down Maple Street. I pass the old oak tree with the tire swing, then the yellow house with the garden gnomes in the front yard.
+
+At the first intersection, there's a stop sign and Mrs. Johnson's house with the purple door and wind chimes. I turn right onto Pine Avenue and walk past the small park with the blue playground and the memorial bench dedicated to local veterans.
+
+Continuing straight, I pass the corner grocery store with the neon "OPEN" sign and the barber shop with the classic spinning pole. The route curves left at the fire station with its bright red trucks visible through the glass doors.
+
+The final stretch goes past the community center with basketball courts where teenagers often play loud music, then the old church with the tall bell tower and beautiful stained glass windows, before ending back at my street near the bus stop with the green bench and newspaper stand.""",
+                    lines=8,
+                    max_lines=12
+                )
+        
+        # Learning Content Section
+        with gr.Accordion("🏰 Learning Content Examples", open=False):
+            with gr.Tab("🗣️ Language Vocabulary"):
+                gr.HTML("<h4>Content Type: Language Vocabulary | Difficulty: Intermediate</h4>")
+                sample_language = gr.Textbox(
+                    label="Spanish Kitchen Vocabulary",
+                    value="""Spanish Kitchen Vocabulary:
+- cocina (kitchen) - koh-SEE-nah
+- refrigerador (refrigerator) - reh-free-heh-rah-DOHR
+- estufa (stove) - es-TOO-fah
+- microondas (microwave) - mee-kroh-ON-dahs
+- fregadero (sink) - freh-gah-DEH-roh
+- mesa (table) - MEH-sah
+- silla (chair) - SEE-yah
+- plato (plate) - PLAH-toh
+- vaso (glass) - VAH-soh
+- cuchillo (knife) - koo-CHEE-yoh
+- tenedor (fork) - teh-neh-DOHR
+- cuchara (spoon) - koo-CHAH-rah""",
+                    lines=8,
+                    max_lines=15
+                )
+            
+            with gr.Tab("📚 Historical Facts"):
+                gr.HTML("<h4>Content Type: Historical Facts | Difficulty: Advanced</h4>")
+                sample_history = gr.Textbox(
+                    label="World War II Pacific Theater Timeline",
+                    value="""World War II Pacific Theater Timeline:
+- December 7, 1941: Pearl Harbor attack - Japan surprises US naval base
+- April 18, 1942: Doolittle Raid - First US bombing of Japanese mainland
+- June 4-7, 1942: Battle of Midway - Decisive US naval victory
+- August 7, 1942: Guadalcanal Campaign begins - First major Allied offensive
+- October 20, 1944: MacArthur returns to Philippines - Battle of Leyte Gulf
+- February 19, 1945: Iwo Jima invasion - Iconic flag raising photo
+- April 1, 1945: Okinawa invasion - Largest Pacific campaign
+- August 6, 1945: Hiroshima atomic bomb - "Little Boy"
+- August 9, 1945: Nagasaki atomic bomb - "Fat Man"
+- August 15, 1945: Japan surrenders - Emperor's radio broadcast""",
+                    lines=8,
+                    max_lines=12
+                )
+            
+            with gr.Tab("💻 Programming Concepts"):
+                gr.HTML("<h4>Content Type: Programming Code | Difficulty: Beginner</h4>")
+                sample_programming = gr.Textbox(
+                    label="Python Data Types and Operations",
+                    value="""Python Data Types and Operations:
+- int: Whole numbers (5, -3, 0) - Use type(5)
+- float: Decimal numbers (3.14, -2.5) - Use type(3.14)
+- str: Text in quotes ("hello", 'world') - Use len("hello")
+- bool: True or False values - Use type(True)
+- list: Ordered collection [1, 2, 3] - Use append(), remove()
+- dict: Key-value pairs {"name": "John"} - Use keys(), values()
+- tuple: Immutable sequence (1, 2, 3) - Cannot change after creation
+- set: Unique values {1, 2, 3} - Use add(), remove()
+
+Common Operations:
+- len() - Get length of object
+- print() - Display output
+- input() - Get user input
+- range() - Generate number sequence""",
+                    lines=10,
+                    max_lines=15
+                )
+            
+            with gr.Tab("🔬 Scientific Concepts"):
+                gr.HTML("<h4>Content Type: Scientific Concepts | Difficulty: Intermediate</h4>")
+                sample_science = gr.Textbox(
+                    label="Periodic Table First 20 Elements",
+                    value="""Periodic Table First 20 Elements:
+1. Hydrogen (H) - Lightest element, fuel for stars
+2. Helium (He) - Noble gas, makes balloons float
+3. Lithium (Li) - Soft metal, used in batteries
+4. Beryllium (Be) - Light metal, toxic to humans
+5. Boron (B) - Metalloid, used in glass and ceramics
+6. Carbon (C) - Basis of organic chemistry, diamond/graphite
+7. Nitrogen (N) - 78% of atmosphere, inert gas
+8. Oxygen (O) - 21% of atmosphere, essential for life
+9. Fluorine (F) - Most reactive element, in toothpaste
+10. Neon (Ne) - Noble gas, glows orange-red in tubes
+11. Sodium (Na) - Reactive metal, table salt component
+12. Magnesium (Mg) - Light metal, burns with bright white flame
+13. Aluminum (Al) - Lightweight metal, common in foil/cans
+14. Silicon (Si) - Metalloid, major component of computer chips
+15. Phosphorus (P) - Essential for DNA, glows in dark
+16. Sulfur (S) - Yellow nonmetal, rotten egg smell
+17. Chlorine (Cl) - Green gas, table salt component
+18. Argon (Ar) - Noble gas, used in light bulbs
+19. Potassium (K) - Soft metal, essential nutrient
+20. Calcium (Ca) - Metal, essential for bones and teeth""",
+                    lines=12,
+                    max_lines=20
+                )
+        
+        # Testing Combinations Section
+        with gr.Accordion("🎯 Recommended Testing Combinations", open=False):
+            gr.HTML("""
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; margin: 20px 0;">
+                <div style="background: #e8f5e8; padding: 15px; border-radius: 10px; border-left: 4px solid #28a745;">
+                    <h4 style="color: #155724; margin-top: 0;">🟢 Easy Test</h4>
+                    <ul style="margin: 0;">
+                        <li><strong>Space:</strong> Home/Apartment</li>
+                        <li><strong>Content:</strong> Programming Concepts</li>
+                        <li><strong>Difficulty:</strong> Beginner</li>
+                    </ul>
+                </div>
+                
+                <div style="background: #fff3cd; padding: 15px; border-radius: 10px; border-left: 4px solid #ffc107;">
+                    <h4 style="color: #856404; margin-top: 0;">🟡 Medium Test</h4>
+                    <ul style="margin: 0;">
+                        <li><strong>Space:</strong> Office/Workplace</li>
+                        <li><strong>Content:</strong> Language Vocabulary</li>
+                        <li><strong>Difficulty:</strong> Intermediate</li>
+                    </ul>
+                </div>
+                
+                <div style="background: #f8d7da; padding: 15px; border-radius: 10px; border-left: 4px solid #dc3545;">
+                    <h4 style="color: #721c24; margin-top: 0;">🔴 Hard Test</h4>
+                    <ul style="margin: 0;">
+                        <li><strong>Space:</strong> Neighborhood Route</li>
+                        <li><strong>Content:</strong> Historical Facts</li>
+                        <li><strong>Difficulty:</strong> Advanced</li>
+                    </ul>
+                </div>
+                
+                <div style="background: #d1ecf1; padding: 15px; border-radius: 10px; border-left: 4px solid #17a2b8;">
+                    <h4 style="color: #0c5460; margin-top: 0;">🚀 Expert Test</h4>
+                    <ul style="margin: 0;">
+                        <li><strong>Space:</strong> Custom detailed description</li>
+                        <li><strong>Content:</strong> Scientific Concepts</li>
+                        <li><strong>Difficulty:</strong> Expert</li>
+                    </ul>
+                </div>
+            </div>
+            """)
+        
+        # Quiz and Features Section
+        with gr.Accordion("📝 Quiz Types & Features", open=False):
+            gr.HTML("""
+            <div style="background-color: #f8f9fa; padding: 15px; border-radius: 8px;">
+                <h4>Quiz Types to Test:</h4>
+                <ul>
+                    <li><strong>Quick Review:</strong> 3-5 basic recall questions</li>
+                    <li><strong>Comprehensive Test:</strong> 8-10 detailed questions covering all content</li>
+                    <li><strong>Spatial Navigation:</strong> Questions about the palace journey and locations</li>
+                    <li><strong>Random Recall:</strong> Mixed difficulty questions in random order</li>
+                </ul>
+                
+                <h4>Other Features:</h4>
+                <ul>
+                    <li><strong>Study Tips:</strong> Click after creating a palace for personalized strategies</li>
+                    <li><strong>Export:</strong> Save your palace as JSON for later use</li>
+                </ul>
+            </div>
+            """)
+        
+        # Step-by-step Testing Guide
+        with gr.Accordion("🔄 Step-by-Step Testing Guide", open=False):
+            gr.HTML("""
+            <div style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); padding: 20px; border-radius: 10px;">
+                <h4 style="margin-top: 0;">🎯 Quick 5-Minute Test:</h4>
+                <ol style="line-height: 1.6;">
+                    <li><strong>Setup:</strong> Add your OpenRouter API key</li>
+                    <li><strong>Space:</strong> Copy the studio apartment description</li>
+                    <li><strong>Content:</strong> Use Spanish kitchen vocabulary</li>
+                    <li><strong>Build:</strong> Set difficulty to "Intermediate" and create palace</li>
+                    <li><strong>Test:</strong> Generate a "Quick Review" quiz</li>
+                    <li><strong>Tips:</strong> Get personalized study recommendations</li>
+                    <li><strong>Export:</strong> Save your first palace</li>
+                </ol>
+                
+                <div style="margin-top: 15px; padding: 10px; background-color: rgba(255,255,255,0.7); border-radius: 5px;">
+                    <strong>💡 Pro Tip:</strong> Try different combinations to see how the AI adapts its spatial reasoning to different content types and difficulty levels!
+                </div>
+            </div>
+            """)
+
+# Create the enhanced Gradio interface
+with gr.Blocks(css=custom_css, title="Memory Palace Builder Enhanced", theme=gr.themes.Soft()) as app:
     gr.HTML("""
     <div class="palace-header">
         <h1>🏰 Memory Palace Builder</h1>
@@ -230,6 +477,9 @@ with gr.Blocks(css=custom_css, title="Memory Palace Builder", theme=gr.themes.So
     </div>
     """)
     
+    # Add the sample inputs accordion at the top
+    create_sample_inputs_accordion()
+    
     with gr.Tab("🔑 Setup"):
         gr.HTML("<div class='section-header'><h3>API Configuration</h3></div>")
         
@@ -270,7 +520,6 @@ with gr.Blocks(css=custom_css, title="Memory Palace Builder", theme=gr.themes.So
                     placeholder="""Describe your space in detail. For example:
                     
 'My apartment has a front door that opens to a small hallway. To the left is the living room with a big window, couch, and TV. Straight ahead is the kitchen with white cabinets and a small dining table. The bedroom is to the right with a bed, dresser, and closet. The bathroom is next to the bedroom with a blue shower curtain.'
-
 Include layouts, colors, furniture, lighting, and any distinctive features.""",
                     info="The more detail you provide, the better your memory palace will be!"
                 )
@@ -311,11 +560,8 @@ Include layouts, colors, furniture, lighting, and any distinctive features.""",
                     lines=8,
                     label="Content to Memorize",
                     placeholder="""Enter the information you want to memorize. Examples:
-
 For Language: 'French words: maison (house), chat (cat), livre (book), eau (water), rouge (red)'
-
 For History: 'World War II timeline: 1939 - Germany invades Poland, 1941 - Pearl Harbor attack, 1944 - D-Day landings, 1945 - End of war'
-
 For Programming: 'Python list methods: append(), remove(), pop(), insert(), index(), count()'""",
                     info="Be specific and organized - this will be mapped to your space!"
                 )