Reorganize UI controls and improve form interactions (#500)

Reorganizes control placement in the playground interfaces and
improves form interactions for better UX, particularly on mobile
devices.

## Key Changes

- **AudioInterface & ImageInterface**: Moved "Clear" buttons from the
top control bar into the action button group below the form inputs for
better visual hierarchy and logical grouping
- **ImageInterface**: 
- Added prompt clearing to the `clearImage()` function so the input
field is reset when clearing generated images
- Updated Clear button disabled state to also check if prompt is empty,
allowing users to clear an empty prompt
- Added responsive flex styling (`flex-1 md:flex-none`) to the Clear
button for better mobile layout
- **ExpandableTextarea**: 
- Imported `untrack` from Svelte to properly handle reactive
dependencies
- Wrapped `expandedValue.length` in `untrack()` to prevent unnecessary
reactivity when setting cursor position
- Improved button visibility on mobile by changing opacity from
`opacity-0` to `opacity-60` with `md:opacity-0` breakpoint, making the
expand button more discoverable on touch devices

## Implementation Details
The `untrack()` usage in ExpandableTextarea ensures that reading the
text length doesn't create a reactive dependency, preventing potential
infinite loops while still allowing the effect to run when `isExpanded`
changes.

ui-svelte/src/components/playground/ImageInterface.svelte

@@ -60,6 +60,7 @@
   function clearImage() {
     generatedImage = null;
     error = null;
+    prompt = "";
   }
 
   function downloadImage() {
@@ -117,9 +118,6 @@
         <option value="1024x1792">1024x1792 (SDXL)</option>
       </optgroup>
     </select>
-    <button class="btn" onclick={clearImage} disabled={!generatedImage && !error}>
-      Clear
-    </button>
   </div>
 
   <!-- Empty state for no models configured -->
@@ -192,6 +190,13 @@
           >
             Generate
           </button>
+          <button
+            class="btn flex-1 md:flex-none"
+            onclick={clearImage}
+            disabled={!generatedImage && !error && !prompt.trim()}
+          >
+            Clear
+          </button>
         {/if}
       </div>
     </div>