feat(rec): Improve fonts, add accordion with instructions

app.py

@@ -165,7 +165,7 @@ gemini_config = types.GenerateContentConfig(
     system_instruction=(
         "You are a helpful music genre recommendation assistant built into"
         " music genre search engine, helping users discover novel music genres."
-    )
+    ),
 )
 gemini_llm = genai.Client(
     api_key=GEMINI_API_KEY,
@@ -438,9 +438,13 @@ def reset_ui():
 
 
 app_description = load_text_resource(Path("./resources/description.md"))
-
-with gr.Blocks(title="SADAIMREC") as demo:
+app_instructions = load_text_resource(Path("./resources/instructions.md"))
+with gr.Blocks(
+    title="sadai-mrec", theme=gr.themes.Default(text_size=gr.themes.sizes.text_lg)
+) as demo:
     gr.Markdown(app_description)
+    with gr.Accordion("Detailed usage instructions", open=False):
+        gr.Markdown(app_instructions)
     query = gr.Textbox(
         label="Your Query",
         placeholder="Calming, music for deep relaxation with echoing sounds and deep bass",

resources/description.md

@@ -2,32 +2,12 @@
 
 This simple application was developed and deployed as **complementary material for my thesis**.
 
-In case of any complications, questions or suggestions, please reach out via [email](mailto:sadaisystems@pm.me).
-
-## Instructions
+The system generates music genre recommendations based on your textual search query.
 
-1. Formulate a **search query** with description of a music genre you would like to listen to. Expected format is described below.
-2. Explore **two generated recommendation rankings**: one is created by my system, one is generated using `gemini-2.0-flash`. Order is **randomized** each run.
-3. Determine which ranking you prefer more.
-4. Vote for your choice.
-5. Wait for refresh and repeat as many times as you want.
+**Goal**: collect some **real-world human evaluations**, using **blind side-by-side comparison** of recommendations with a proprietary model.
 
-## Expected Query Format
+**Click on accordion down below for detailed instructions.**
 
-- The system was designed to support **3 categories** of music genre descriptors:
-  - **Subjective**: Emotional & perceptual qualities, desired **inner feeling** (melancholic, energetic)
-  - **Purpose-Based**: Listening setting, context, suitable activities, scenario (party, workout)
-  - **Technical**: Musical & production attributes, **HOW the sound is made** (instrumentation, timbre, tempo, lo-fi)
-- **Other descriptors are out of scope of the current implementation**:
-  - I kindly ask you to only use the above 3 categories for your queries
-  - Usage of cultural, historical, etc. descriptors can lead to suboptimal results
-- You can make the descriptors **as complex and poetic as you want**, but I kindly ask you to **limit your query to a couple of sentences**
+**Have fun!**
 
-## Query Examples
-
-- `Music for deep relaxation with echoing sounds and heavy bass, perfect for unwinding after along day`
-- `Music that feels like the echo of a forgotten world—slow, sorrowful. Guitars and distant vocals create the sensation of a long, drifting sleep on the edge of melancholy and oblivion.A soundtrack to isolation, it slowly pulls you into the depths of existential despair.`
-- `Raw and filled with aggression, high-energy drums, mosh-pit vibes, high bpm, guitars`
-- `Music to study to, relaxing, chill with calm drums, some piano, and suitable for background`
-- `Creamy and cozy, suitable for evenings with loved ones`
-- `Dreamy instrumental music for midnight melancholia`
+In case of any complications, questions or suggestions, please reach out via [email](mailto:[email protected]).

resources/instructions.md

@@ -0,0 +1,27 @@
+## Instructions
+
+1. Formulate a **search query** with description of a music genre you would like to listen to. Expected format is described below.
+2. Explore **two generated recommendation rankings**: one is created by my system, one is generated using `gemini-2.0-flash`. Order is **randomized** each run.
+3. Determine which ranking you prefer more.
+4. Vote for your choice.
+5. Wait for refresh and repeat as many times as you want.
+
+## Expected Query Format
+
+- The system was designed to support **3 categories** of music genre descriptors:
+  - **Subjective**: Emotional & perceptual qualities, desired **inner feeling** (melancholic, energetic)
+  - **Purpose-Based**: Listening setting, context, suitable activities, scenario (party, workout)
+  - **Technical**: Musical & production attributes, **HOW the sound is made** (instrumentation, timbre, tempo, lo-fi)
+- **Other descriptors are out of scope of the current implementation**:
+  - I kindly ask you to only use the above 3 categories for your queries
+  - Usage of cultural, historical, etc. descriptors can lead to suboptimal results
+- You can make the descriptors **as complex and poetic as you want**, but I kindly ask you to **limit your query to a couple of sentences**
+
+## Query Examples
+
+- `Music for deep relaxation with echoing sounds and heavy bass, perfect for unwinding after along day`
+- `Music that feels like the echo of a forgotten world—slow, sorrowful. Guitars and distant vocals create the sensation of a long, drifting sleep on the edge of melancholy and oblivion.A soundtrack to isolation, it slowly pulls you into the depths of existential despair.`
+- `Raw and filled with aggression, high-energy drums, mosh-pit vibes, high bpm, guitars`
+- `Music to study to, relaxing, chill with calm drums, some piano, and suitable for background`
+- `Creamy and cozy, suitable for evenings with loved ones`
+- `Dreamy instrumental music for midnight melancholia`