In the development and debugging workflow of DSH (DeepSeek Harness), the visual presentation of the web interface is often the starting point for customization requests. Although DSH provides a basic plugin architecture, the default background style is relatively plain. The dsh-whale-background plugin is designed to address this issue by providing a deep-sea whale girl-themed wallpaper for DSH Web GUI, supporting a semi-transparent frosted glass effect, and allowing developers to customize the background image, opacity, and placement mode.

Plugin Positioning

This is a background extension plugin for DSH Web GUI and belongs to the “fun reskin” category. It is maintained by the developer tuogusa under the MIT license. It changes the visual presentation of the application surface by injecting CSS styles and templates, without modifying core logic.

Core Features

  1. Built-in whale wallpaper: The plugin includes a default deep-sea whale girl-themed wallpaper. This image is inlined as Base64 during the build, so no external resources need to be loaded for direct use.
  2. Custom background on the settings page: You can configure it from the DSH Web settings page.
    • Local image: Select a local file, and the plugin will automatically convert it to a data URL.
    • Remote image: Paste an image URL, and the plugin will perform a preload check. If loading fails, it will show a clear message. When loading remote images, a no-referrer policy is automatically added to reduce the impact of anti-hotlinking.
  3. Reset and clear: Supports one-click clearing of custom image settings and restoring the built-in whale wallpaper.
  4. Surface opacity: Provides a 0-100% slider to adjust the opacity of the application surface in real time, creating a frosted glass effect.
  5. Placement mode: Supports selecting the background image placement behavior.
    • contain: Displays the full image and leaves blank space on the sides.
    • cover: Fills the entire screen and crops the excess.
  6. Persistent storage: All settings (background image, opacity, and placement mode) are saved in the browser’s localStorage, so they remain after refreshing the page or restarting DSH.

Installation and Configuration

Install the Plugin

The plugin is compatible only with the web profile (DSH Web GUI). Use the following command to install it:

dsh plugin --profile web add github:tuogusa/dsh-whale-background

After installation is complete, restart DSH and press Ctrl+Shift+R to refresh the browser (if HMR is not connected).

Update the Plugin

If you need to update to the latest version, you can use the following CLI command:

dsh plugin --profile web update dsh-whale-background

Customize the Wallpaper (Developer Operation)

If you want to replace the default whale wallpaper, you can directly replace the image file in the source.

  1. Overwrite the new wallpaper image (JPG/PNG/WebP/GIF supported) onto assets/wallpaper.jpg.
  2. Run the build script to regenerate the client code:
node build.js

This regenerates lib/client.js and inlines the new wallpaper. If HMR is connected, the update will take effect automatically; otherwise, refresh the browser.

Usage

After installing and restarting, open the DSH Web interface:

  1. Click the settings button in the top-right corner.
  2. Find the “Background” tab.
  3. On this page, perform the following operations:
    • Change background: Click “Select file” to upload a local image, or paste a URL.
    • Adjust opacity: Drag the slider to adjust the strength of the frosted effect.
    • Adjust placement: Select contain or cover mode.
    • Restore default: Click the “Restore default” button to clear all custom settings.

Notes

  • Compatibility: Only applicable to DSH Web GUI and not compatible with other profiles.
  • Network policy: Remote image loading uses the no-referrer policy to reduce anti-hotlinking interception caused by Referer-based checks.
  • Refresh mechanism: If you modify the plugin source code or settings without HMR connected, it is recommended to force-refresh the browser with Ctrl+Shift+R to ensure that the styles take effect.

This plugin provides developers with a lightweight UI customization solution, allowing the visual style of DSH Web to be changed with simple configuration. For more details and source code, refer to the plugin directory or the GitHub repository.