To generate this application, you could use a prompt similar to this:
"Generate a single-page web application that functions as a **Musical Looper**. The app should use **HTML**, **Tailwind CSS** for styling, **Tone.js** for audio synthesis and sequencing, **LZ-String** for URL compression, and the **Gemini API** for LLM interaction.
**Core Functionality:**
The application should feature a **single large musical canvas** where users can draw musical loops by dragging their mouse or finger. When a drawing is completed, it's immediately quantized to musical notes (soft piano sound) and harmonically snapped to any existing loops, or to a C Major scale if no loops are present.
**UI Elements:**
- A main **Musical Canvas** for drawing.
- A **"Save Latest Loop" button** below the canvas to add the current drawing to the composition. The current drawing should be visibly **thicker** than saved loops.
- A **"Saved Loops" section** on the right side of the page, displaying a list of all saved loops. Each list item should include a miniature visual representation of the loop, an **"Isolate" button** (which plays only that loop and makes its line **bold** on the main canvas during playback), and a **"Delete" button**.
- A **vertical highlight bar** should move left-to-right across the main musical canvas, synchronized with the overall music playback. This bar should be hidden when music is not playing.
- An **"Advanced Controls" section** at the bottom-left of the page.
- Inside "Advanced Controls": a **"Play Music" checkbox** to globally toggle all audio output (including highlight bar movement).
- Inside "Advanced Controls": a **"✨ Get Idea for Canvas" button**, which is disabled unless at least one loop is saved. When clicked, it uses the Gemini API to generate a harmonically complementary drawing path on the canvas, based on the existing composition.
- A **"Shareable Link"** below the "Saved Loops" list. This link's URL parameters should be compressed using LZ-String and encode the saved loops, allowing users to share their compositions. The app should load loops from this URL on page load.
**Visuals & UX:**
- Maintain a dark theme with rounded corners on elements.
- Ensure the layout is fully responsive and adaptable to different screen sizes.
- Provide subtle visual feedback for actions (e.g., message box hovering to the right of the save button).
- Avoid temporary status messages for routine actions.
- Ensure Tone.js context starts on first user interaction.
- All vertical staff lines should be removed from the canvas; only horizontal staff lines should be visible.
- Implement robust error handling for API calls and drawing logic.
"