steve/llama-swap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

proxy,ui-svelte: replace old UI with svelte+playground

Browse Source 
Replace the legacy React UI with the new Svelte-based one. Introduce a Playground in the UI to quickly test out text, image, text to speech and speech to text models behind llama-swap. 

Key Changes

New Svelte UI (ui-svelte/)

  - Multi-tab Playground with Chat, Image Generation, Audio Transcription, and Speech interfaces
  - Chat: message editing/regeneration, markdown rendering with LaTeX math support, image attachments, code syntax highlighting
  - Image: size selector, download/fullscreen viewing
  - Audio: transcription with peer support
  - Speech: voice caching with manual refresh, download button
  - Responsive mobile layout with collapsible navigation
  - XSS fixes and accessibility improvements

Proxy Improvements

  - Add gzip/brotli compression for UI static assets (proxy/ui_compress.go)
  - Add GET /v1/audio/voices?model={model} endpoint for voice listing
  - Add peer support for /v1/audio/transcriptions
This commit is contained in:
Benson Wong
2026-01-31 22:49:13 -08:00
committed by GitHub
parent cdea7d16bd
commit 20738f3623
65 changed files with 5031 additions and 6078 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui-svelte/src/routes/Playground.svelte
+99
View File
@@ -0,0 +1,99 @@
<script lang="ts">
import { persistentStore } from "../stores/persistent";
import ChatInterface from "../components/playground/ChatInterface.svelte";
import ImageInterface from "../components/playground/ImageInterface.svelte";
import AudioInterface from "../components/playground/AudioInterface.svelte";
import SpeechInterface from "../components/playground/SpeechInterface.svelte";
type Tab = "chat" | "images" | "speech" | "audio";
const selectedTabStore = persistentStore<Tab>("playground-selected-tab", "chat");
let mobileMenuOpen = $state(false);
const tabs: { id: Tab; label: string }[] = [
{ id: "chat", label: "Chat" },
{ id: "images", label: "Images" },
{ id: "speech", label: "Speech" },
{ id: "audio", label: "Transcription" },
];
function selectTab(tab: Tab) {
selectedTabStore.set(tab);
mobileMenuOpen = false;
}
function getTabLabel(tabId: Tab): string {
return tabs.find(t => t.id === tabId)?.label || "";
}
</script>
<div class="card h-full flex flex-col">
<!-- Tab navigation -->
<div class="shrink-0 mb-4">
<!-- Mobile: Dropdown menu (hidden on md and up) -->
<div class="block md:hidden relative">
<button
class="w-full px-4 py-2 rounded font-medium transition-colors flex items-center justify-between bg-surface hover:bg-secondary-hover border border-gray-200 dark:border-white/10"
onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
>
<span>{getTabLabel($selectedTabStore)}</span>
<svg
class="w-5 h-5 transition-transform {mobileMenuOpen ? 'rotate-180' : ''}"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
{#if mobileMenuOpen}
<div class="absolute top-full left-0 right-0 mt-1 bg-surface border border-gray-200 dark:border-white/10 rounded shadow-lg z-10">
{#each tabs as tab (tab.id)}
<button
class="w-full px-4 py-2 text-left hover:bg-secondary-hover transition-colors first:rounded-t last:rounded-b {$selectedTabStore === tab.id ? 'bg-primary/10 font-medium' : ''}"
onclick={() => selectTab(tab.id)}
>
{tab.label}
</button>
{/each}
</div>
{/if}
</div>
<!-- Desktop: Tab buttons (shown on md and up) -->
<div class="hidden md:flex flex-wrap gap-2">
{#each tabs as tab (tab.id)}
<button
class="px-4 py-2 rounded font-medium transition-colors {$selectedTabStore === tab.id
? 'bg-primary text-btn-primary-text'
: 'bg-surface hover:bg-secondary-hover border border-gray-200 dark:border-white/10'}"
onclick={() => selectTab(tab.id)}
>
{tab.label}
</button>
{/each}
</div>
</div>
<!-- Tab content -->
<div class="flex-1 overflow-hidden relative">
<div class="h-full" class:tab-hidden={$selectedTabStore !== "chat"}>
<ChatInterface />
</div>
<div class="h-full" class:tab-hidden={$selectedTabStore !== "images"}>
<ImageInterface />
</div>
<div class="h-full" class:tab-hidden={$selectedTabStore !== "speech"}>
<SpeechInterface />
</div>
<div class="h-full" class:tab-hidden={$selectedTabStore !== "audio"}>
<AudioInterface />
</div>
</div>
</div>
<style>
.tab-hidden {
display: none;
}
</style>