ui: fix text size svg

Added new images for model loading and real-time log streaming sections.

README.md

@@ -5,7 +5,7 @@
 
 # llama-swap
 
-Run multiple LLM models on your machine and hot-swap between them as needed. llama-swap works with any OpenAI API-compatible server, giving you the flexibility to switch models without restarting your applications.
+Run multiple generative AI models on your machine and hot-swap between them on demand. llama-swap works with any OpenAI and Anthropic API compatible server and is used by thousands of people to power their local AI workflows. 
 
 Built in Go for performance and simplicity, llama-swap has zero dependencies and is incredibly easy to set up. Get started in minutes - just one binary and one configuration file.
 
@@ -48,13 +48,27 @@ Built in Go for performance and simplicity, llama-swap has zero dependencies and
 
 ### Web UI
 
-llama-swap includes a real time web interface for monitoring logs and controlling models:
+llama-swap includes a real time web interface with a playground for testing out all sorts of local models: 
 
-<img width="1164" height="745" alt="image" src="https://github.com/user-attachments/assets/bacf3f9d-819f-430b-9ed2-1bfaa8d54579" />
+<img width="1125" height="876" alt="image" src="https://github.com/user-attachments/assets/8ee41947-97af-463d-b0f0-8e9c478fac07" />
 
-The Activity Page shows recent requests:
+View detailed token metrics:
+
+<img width="1111" height="515" alt="image" src="https://github.com/user-attachments/assets/64bfb280-d7a3-4126-971a-a128fd40410c" />
+
+Inspect request and responses:
+
+<img width="1111" height="720" alt="image" src="https://github.com/user-attachments/assets/24fe4aca-1448-4d7c-b9e8-a967589bda6c" />
+
+Manually load and unload models: 
+
+<img width="1109" height="719" alt="image" src="https://github.com/user-attachments/assets/02b1e1f2-abd0-4050-84ae-facd66ff01c4" />
+
+
+Real time log streaming: 
+
+<img width="1107" height="559" alt="image" src="https://github.com/user-attachments/assets/39669a10-cff2-409e-836a-5bad8bd0140c" />
 
-<img width="1360" height="963" alt="image" src="https://github.com/user-attachments/assets/5f3edee6-d03a-4ae5-ae06-b20ac1f135bd" />
 
 ## Installation
 

config-schema.json

@@ -200,11 +200,20 @@
                                 "additionalProperties": true,
                                 "default": {},
                                 "description": "Dictionary of parameters to set/override in requests. Useful for enforcing specific parameter values. Protected params like 'model' cannot be overridden. Values can be strings, numbers, booleans, arrays, or objects."
+                            },
+                            "setParamsByID": {
+                                "type": "object",
+                                "additionalProperties": {
+                                    "type": "object",
+                                    "additionalProperties": true
+                                },
+                                "default": {},
+                                "description": "Dictionary mapping requested model IDs (or aliases) to parameters to set/override in requests. Applied after setParams and can override those values. Useful with aliases to vary behaviour depending on which alias the client used (e.g. different reasoning_effort per alias). Keys support ${MODEL_ID} macro substitution. Protected params like 'model' cannot be overridden."
                             }
                         },
                         "additionalProperties": false,
                         "default": {},
-                        "description": "Dictionary of filter settings. Supports stripParams and setParams."
+                        "description": "Dictionary of filter settings. Supports stripParams, setParams, and setParamsByID."
                     },
                     "metadata": {
                         "type": "object",

config.example.yaml

@@ -126,7 +126,7 @@ apiKeys:
 # - below are examples of the all the settings a model can have
 models:
   # keys are the model names used in API requests
-  "llama":
+  "gpt-oss-120b":
     # macros: a dictionary of string substitutions specific to this model
     # - optional, default: empty dictionary
     # - macros defined here override macros defined in the global macros section
@@ -143,7 +143,7 @@ models:
     cmd: |
       # ${latest-llama} is a macro that is defined above
       ${latest-llama}
-      --model path/to/llama-8B-Q4_K_M.gguf
+      --model path/to/gpt-oss-120B.gguf
       --ctx-size ${default_ctx}
       --temperature ${temp}
 
@@ -151,13 +151,13 @@ models:
     # - optional, default: empty string
     # - if set, it will be used in the v1/models API response
     # - if not set, it will be omitted in the JSON model record
-    name: "llama 3.1 8B"
+    name: "gpt-oss 120B"
 
     # description: a description for the model
     # - optional, default: empty string
     # - if set, it will be used in the v1/models API response
     # - if not set, it will be omitted in the JSON model record
-    description: "A small but capable model used for quick testing"
+    description: "A thinking model from OpenAI"
 
     # env: define an array of environment variables to inject into cmd's environment
     # - optional, default: empty array
@@ -172,14 +172,6 @@ models:
     # - if you use a custom port in cmd this *must* be set
     proxy: http://127.0.0.1:8999
 
-    # aliases: alternative model names that this model configuration is used for
-    # - optional, default: empty array
-    # - aliases must be unique globally
-    # - useful for impersonating a specific model
-    aliases:
-      - "gpt-4o-mini"
-      - "gpt-3.5-turbo"
-
     # checkEndpoint: URL path to check if the server is ready
     # - optional, default: /health
     # - endpoint is expected to return an HTTP 200 response
@@ -197,7 +189,7 @@ models:
     # - optional, default: ""
     # - useful for when the upstream server expects a specific model name that
     #   is different from the model's ID
-    useModelName: "qwen:qwq"
+    useModelName: "openai/gpt-oss-120B"
 
     # filters: a dictionary of filter settings
     # - optional, default: empty dictionary
@@ -216,11 +208,38 @@ models:
       # - useful for enforcing specific parameter values
       # - protected params like "model" cannot be overridden
       # - values can be strings, numbers, booleans, arrays, or objects
+      # - always runs for the model
       setParams:
         # Example: enforce specific sampling parameters
         temperature: 0.7
         top_p: 0.9
 
+      # setParamsByID: a dictionary of parameters to set based the model ID
+      # - optional, default: empty dictionary
+      # - combine with aliases to create variant behaviour without reloading the model
+      # - parameters are set in the request body JSON
+      # - run after setParams so it will override any settings
+      # - protected params like "model" cannot be overridden
+      # - values can be strings, numbers, booleans, arrays, or objects
+      # - model aliases will be automatically created for each key
+      setParamsByID:
+        "${MODEL_ID}":
+          chat_template_kwargs:
+            reasoning_effort: medium
+        "${MODEL_ID}:high":
+          chat_template_kwargs:
+            reasoning_effort: high
+        "${MODEL_ID}:low":
+          chat_template_kwargs:
+            reasoning_effort: low
+
+    # aliases: alternative model names that this model configuration is used for
+    # - optional, default: empty array
+    # - aliases must be unique globally
+    # - useful for impersonating a specific model
+    aliases:
+      - "gpt-4o-mini"
+
     # metadata: a dictionary of arbitrary values that are included in /v1/models
     # - optional, default: empty dictionary
     # - while metadata can contains complex types it is recommended to keep it simple

proxy/config/config.go

@@ -294,6 +294,24 @@ func LoadConfigFromReader(r io.Reader) (Config, error) {
 			modelConfig.CheckEndpoint = strings.ReplaceAll(modelConfig.CheckEndpoint, macroSlug, macroStr)
 			modelConfig.Filters.StripParams = strings.ReplaceAll(modelConfig.Filters.StripParams, macroSlug, macroStr)
 
+			// Substitute macros in SetParamsByID keys and values
+			if len(modelConfig.Filters.SetParamsByID) > 0 {
+				newSetParamsByID := make(map[string]map[string]any, len(modelConfig.Filters.SetParamsByID))
+				for key, paramMap := range modelConfig.Filters.SetParamsByID {
+					newKey := strings.ReplaceAll(key, macroSlug, macroStr)
+					newValAny, err := substituteMacroInValue(any(paramMap), entry.Name, entry.Value)
+					if err != nil {
+						return Config{}, fmt.Errorf("model %s filters.setParamsByID: %s", modelId, err.Error())
+					}
+					newParamMap, ok := newValAny.(map[string]any)
+					if !ok {
+						return Config{}, fmt.Errorf("model %s filters.setParamsByID: unexpected type after macro substitution", modelId)
+					}
+					newSetParamsByID[newKey] = newParamMap
+				}
+				modelConfig.Filters.SetParamsByID = newSetParamsByID
+			}
+
 			// Substitute in metadata (type-preserving)
 			if len(modelConfig.Metadata) > 0 {
 				result, err := substituteMacroInValue(modelConfig.Metadata, entry.Name, entry.Value)
@@ -359,6 +377,34 @@ func LoadConfigFromReader(r io.Reader) (Config, error) {
 			}
 		}
 
+		// Validate SetParamsByID keys and values
+		for key, paramMap := range modelConfig.Filters.SetParamsByID {
+			if matches := macroPatternRegex.FindAllStringSubmatch(key, -1); len(matches) > 0 {
+				return Config{}, fmt.Errorf("unknown macro '${%s}' found in model %s filters.setParamsByID key", matches[0][1], modelId)
+			}
+			if err := validateNestedForUnknownMacros(any(paramMap), fmt.Sprintf("model %s filters.setParamsByID[%s]", modelId, key)); err != nil {
+				return Config{}, err
+			}
+		}
+
+		// Auto-register setParamsByID keys as aliases (skip the model's own ID)
+		for key := range modelConfig.Filters.SetParamsByID {
+			if key == modelId {
+				continue
+			}
+			if _, exists := config.Models[key]; exists {
+				return Config{}, fmt.Errorf("model %s filters.setParamsByID: key '%s' conflicts with an existing model ID", modelId, key)
+			}
+			if existingModel, exists := config.aliases[key]; exists {
+				if existingModel != modelId {
+					return Config{}, fmt.Errorf("duplicate alias '%s' in model %s filters.setParamsByID, already used by model %s", key, modelId, existingModel)
+				}
+				continue // already registered as explicit alias for this model
+			}
+			config.aliases[key] = modelId
+			modelConfig.Aliases = append(modelConfig.Aliases, key)
+		}
+
 		if _, err := url.Parse(modelConfig.Proxy); err != nil {
 			return Config{}, fmt.Errorf("model %s: invalid proxy URL: %w", modelId, err)
 		}

proxy/config/filters.go

@@ -20,6 +20,12 @@ type Filters struct {
 	// SetParams is a dictionary of parameters to set/override in requests
 	// Protected params (like "model") cannot be set
 	SetParams map[string]any `yaml:"setParams"`
+
+	// SetParamsByID maps requested model IDs to parameters to set/override in requests.
+	// Useful with aliases: a single loaded model can behave differently depending on
+	// which alias the client used. Applied after SetParams, so it can override those values.
+	// Protected params (like "model") cannot be set.
+	SetParamsByID map[string]map[string]any `yaml:"setParamsByID"`
 }
 
 // SanitizedStripParams returns a sorted list of parameters to strip,
@@ -51,6 +57,33 @@ func (f Filters) SanitizedStripParams() []string {
 	return cleaned
 }
 
+// SanitizedSetParamsByID returns the params to set for the given requestedModelID,
+// with protected params removed and keys sorted for consistent iteration order.
+// Returns nil if the ID has no entry or all its params are protected.
+func (f Filters) SanitizedSetParamsByID(requestedModelID string) (map[string]any, []string) {
+	if len(f.SetParamsByID) == 0 {
+		return nil, nil
+	}
+	params, found := f.SetParamsByID[requestedModelID]
+	if !found || len(params) == 0 {
+		return nil, nil
+	}
+	result := make(map[string]any, len(params))
+	keys := make([]string, 0, len(params))
+	for key, value := range params {
+		if slices.Contains(ProtectedParams, key) {
+			continue
+		}
+		result[key] = value
+		keys = append(keys, key)
+	}
+	sort.Strings(keys)
+	if len(result) == 0 {
+		return nil, nil
+	}
+	return result, keys
+}
+
 // SanitizedSetParams returns a copy of SetParams with protected params removed
 // and keys sorted for consistent iteration order
 func (f Filters) SanitizedSetParams() (map[string]any, []string) {

proxy/config/filters_test.go

@@ -162,6 +162,123 @@ func TestFilters_SanitizedSetParams(t *testing.T) {
 	}
 }
 
+func TestFilters_SanitizedSetParamsByID(t *testing.T) {
+	tests := []struct {
+		name             string
+		setParamsByID    map[string]map[string]any
+		requestedModelID string
+		wantParams       map[string]any
+		wantKeys         []string
+	}{
+		{
+			name:             "empty SetParamsByID returns nil",
+			setParamsByID:    nil,
+			requestedModelID: "model1",
+			wantParams:       nil,
+			wantKeys:         nil,
+		},
+		{
+			name:             "empty map returns nil",
+			setParamsByID:    map[string]map[string]any{},
+			requestedModelID: "model1",
+			wantParams:       nil,
+			wantKeys:         nil,
+		},
+		{
+			name: "non-matching model ID returns nil",
+			setParamsByID: map[string]map[string]any{
+				"model2": {"temperature": 0.9},
+			},
+			requestedModelID: "model1",
+			wantParams:       nil,
+			wantKeys:         nil,
+		},
+		{
+			name: "matching model ID returns correct params",
+			setParamsByID: map[string]map[string]any{
+				"model1": {"temperature": 0.7, "top_p": 0.9},
+				"model2": {"temperature": 0.5},
+			},
+			requestedModelID: "model1",
+			wantParams: map[string]any{
+				"temperature": 0.7,
+				"top_p":       0.9,
+			},
+			wantKeys: []string{"temperature", "top_p"},
+		},
+		{
+			name: "protected param model is filtered out",
+			setParamsByID: map[string]map[string]any{
+				"model1": {
+					"model":       "should-be-filtered",
+					"temperature": 0.7,
+				},
+			},
+			requestedModelID: "model1",
+			wantParams: map[string]any{
+				"temperature": 0.7,
+			},
+			wantKeys: []string{"temperature"},
+		},
+		{
+			name: "only protected param returns nil",
+			setParamsByID: map[string]map[string]any{
+				"model1": {
+					"model": "should-be-filtered",
+				},
+			},
+			requestedModelID: "model1",
+			wantParams:       nil,
+			wantKeys:         nil,
+		},
+		{
+			name: "keys are sorted",
+			setParamsByID: map[string]map[string]any{
+				"model1": {
+					"z_param": "z",
+					"a_param": "a",
+					"m_param": "m",
+				},
+			},
+			requestedModelID: "model1",
+			wantParams: map[string]any{
+				"z_param": "z",
+				"a_param": "a",
+				"m_param": "m",
+			},
+			wantKeys: []string{"a_param", "m_param", "z_param"},
+		},
+		{
+			name: "alias style key lookup",
+			setParamsByID: map[string]map[string]any{
+				"model1:high": {"reasoning_effort": "high"},
+				"model1:low":  {"reasoning_effort": "low"},
+			},
+			requestedModelID: "model1:high",
+			wantParams: map[string]any{
+				"reasoning_effort": "high",
+			},
+			wantKeys: []string{"reasoning_effort"},
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := Filters{SetParamsByID: tt.setParamsByID}
+			gotParams, gotKeys := f.SanitizedSetParamsByID(tt.requestedModelID)
+
+			if tt.wantParams == nil {
+				assert.Nil(t, gotParams)
+				assert.Nil(t, gotKeys)
+				return
+			}
+
+			assert.Equal(t, tt.wantKeys, gotKeys)
+			assert.Equal(t, tt.wantParams, gotParams)
+		})
+	}
+}
+
 func TestProtectedParams(t *testing.T) {
 	// Verify that "model" is protected
 	assert.Contains(t, ProtectedParams, "model")

proxy/config/model_config_test.go

@@ -73,6 +73,72 @@ models:
 	}
 }
 
+func TestConfig_SetParamsByIDAutoAlias(t *testing.T) {
+	content := `
+models:
+  model1:
+    cmd: path/to/cmd --port ${PORT}
+    filters:
+      setParamsByID:
+        "${MODEL_ID}:high":
+          reasoning_effort: high
+        "${MODEL_ID}:low":
+          reasoning_effort: low
+`
+	cfg, err := LoadConfigFromReader(strings.NewReader(content))
+	assert.NoError(t, err)
+
+	// Keys (other than the model's own ID) should be registered as aliases
+	realName, found := cfg.RealModelName("model1:high")
+	assert.True(t, found, "model1:high should be an auto-registered alias")
+	assert.Equal(t, "model1", realName)
+
+	realName, found = cfg.RealModelName("model1:low")
+	assert.True(t, found, "model1:low should be an auto-registered alias")
+	assert.Equal(t, "model1", realName)
+
+	// Auto-aliases should also appear in modelConfig.Aliases
+	aliases := cfg.Models["model1"].Aliases
+	assert.Contains(t, aliases, "model1:high")
+	assert.Contains(t, aliases, "model1:low")
+}
+
+func TestConfig_SetParamsByIDAutoAliasConflictWithModelID(t *testing.T) {
+	content := `
+models:
+  model1:
+    cmd: path/to/cmd --port ${PORT}
+    filters:
+      setParamsByID:
+        model2:
+          reasoning_effort: high
+  model2:
+    cmd: path/to/cmd --port ${PORT}
+`
+	_, err := LoadConfigFromReader(strings.NewReader(content))
+	assert.ErrorContains(t, err, "conflicts with an existing model ID")
+}
+
+func TestConfig_SetParamsByIDAutoAliasConflictWithOtherModel(t *testing.T) {
+	content := `
+models:
+  model1:
+    cmd: path/to/cmd --port ${PORT}
+    filters:
+      setParamsByID:
+        "shared-alias":
+          reasoning_effort: high
+  model2:
+    cmd: path/to/cmd --port ${PORT}
+    filters:
+      setParamsByID:
+        "shared-alias":
+          reasoning_effort: low
+`
+	_, err := LoadConfigFromReader(strings.NewReader(content))
+	assert.ErrorContains(t, err, "duplicate alias")
+}
+
 func TestConfig_ModelFiltersWithSetParams(t *testing.T) {
 	content := `
 models:

proxy/proxymanager.go

@@ -720,6 +720,17 @@ func (pm *ProxyManager) proxyInferenceHandler(c *gin.Context) {
 			}
 		}
 
+		// setParamsByID: set params based on the requested model ID (runs after setParams, can override it)
+		setParamsByIDParams, setParamsByIDKeys := pm.config.Models[modelID].Filters.SanitizedSetParamsByID(requestedModel)
+		for _, key := range setParamsByIDKeys {
+			pm.proxyLogger.Debugf("<%s> setting param by id: %s", requestedModel, key)
+			bodyBytes, err = sjson.SetBytes(bodyBytes, key, setParamsByIDParams[key])
+			if err != nil {
+				pm.sendErrorResponse(c, http.StatusInternalServerError, fmt.Sprintf("error setting parameter %s in request", key))
+				return
+			}
+		}
+
 		pm.proxyLogger.Debugf("ProxyManager using local Process for model: %s", requestedModel)
 		nextHandler = processGroup.ProxyRequest
 	} else if pm.peerProxy != nil && pm.peerProxy.HasPeerModel(requestedModel) {

proxy/proxymanager_api.go

@@ -20,6 +20,7 @@ type Model struct {
 	State       string   `json:"state"`
 	Unlisted    bool     `json:"unlisted"`
 	PeerID      string   `json:"peerID"`
+	Aliases     []string `json:"aliases,omitempty"`
 }
 
 func addApiHandlers(pm *ProxyManager) {
@@ -83,6 +84,7 @@ func (pm *ProxyManager) getModelStatus() []Model {
 			Description: pm.config.Models[modelID].Description,
 			State:       state,
 			Unlisted:    pm.config.Models[modelID].Unlisted,
+			Aliases:     pm.config.Models[modelID].Aliases,
 		})
 	}
 

proxy/proxymanager_test.go

@@ -1046,6 +1046,61 @@ func TestProxyManager_FiltersStripParams(t *testing.T) {
 	// t.Logf("%v", response)
 }
 
+func TestProxyManager_FiltersSetParamsByID(t *testing.T) {
+	// no explicit aliases — setParamsByID keys are auto-registered as aliases
+	configStr := strings.Replace(`
+logLevel: error
+models:
+  model1:
+    cmd: 'SRPATH --port ${PORT} --silent --respond model1'
+    proxy: "http://127.0.0.1:${PORT}"
+    filters:
+      setParams:
+        reasoning_effort: medium
+      setParamsByID:
+        "${MODEL_ID}:high":
+          reasoning_effort: high
+        "${MODEL_ID}:low":
+          reasoning_effort: low
+`, "SRPATH", simpleResponderPath, -1)
+
+	cfg, err := config.LoadConfigFromReader(strings.NewReader(configStr))
+	if !assert.NoError(t, err, "invalid test configuration") {
+		return
+	}
+
+	proxy := New(cfg)
+	defer proxy.StopProcesses(StopWaitForInflightRequest)
+
+	tests := []struct {
+		requestedModel string
+		wantEffort     string
+	}{
+		// setParams applies, no setParamsByID match
+		{requestedModel: "model1", wantEffort: "medium"},
+		// setParamsByID overrides setParams
+		{requestedModel: "model1:high", wantEffort: "high"},
+		{requestedModel: "model1:low", wantEffort: "low"},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.requestedModel, func(t *testing.T) {
+			reqBody := fmt.Sprintf(`{"model":%q}`, tt.requestedModel)
+			req := httptest.NewRequest("POST", "/v1/chat/completions", bytes.NewBufferString(reqBody))
+			w := CreateTestResponseRecorder()
+			proxy.ServeHTTP(w, req)
+			assert.Equal(t, http.StatusOK, w.Code)
+
+			var response map[string]interface{}
+			assert.NoError(t, json.Unmarshal(w.Body.Bytes(), &response))
+
+			requestBody, _ := response["request_body"].(string)
+			gotEffort := gjson.Get(requestBody, "reasoning_effort").String()
+			assert.Equal(t, tt.wantEffort, gotEffort, "reasoning_effort mismatch for model %s", tt.requestedModel)
+		})
+	}
+}
+
 func TestProxyManager_HealthEndpoint(t *testing.T) {
 	config := config.AddDefaultGroupToConfig(config.Config{
 		HealthCheckTimeout: 15,

ui-svelte/src/components/LogPanel.svelte

@@ -65,10 +65,17 @@
   });
 
   let preElement: HTMLPreElement;
+  let userScrolledUp = $state(false);
 
-  // Auto scroll to bottom when logs change
+  function handleScroll() {
+    if (!preElement) return;
+    const { scrollTop, scrollHeight, clientHeight } = preElement;
+    userScrolledUp = scrollHeight - scrollTop - clientHeight > 40;
+  }
+
+  // Auto scroll to bottom when logs change, unless user has scrolled up
   $effect(() => {
-    if (preElement && filteredLogs) {
+    if (preElement && filteredLogs && !userScrolledUp) {
       preElement.scrollTop = preElement.scrollHeight;
     }
   });
@@ -82,7 +89,7 @@
       <div class="flex gap-2 items-center">
         <button class="btn border-0" onclick={toggleFontSize} title="Change font size">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
-            <path fill-rule="evenodd" d="M10.5 3.75a6 6 0 0 0-5.98 6.496A5.25 5.25 0 0 0 6.75 20.25H18a4.5 4.5 0 0 0 2.206-8.423 3.75 3.75 0 0 0-4.133-4.303A6.001 6.001 0 0 0 10.5 3.75Zm2.25 6a.75.75 0 0 0-1.5 0v4.94l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V9.75Z" clip-rule="evenodd" />
+            <path d="M2 4v3h5v12h3V7h5V4H2zm19 5h-9v3h3v7h3v-7h3V9z"/>
           </svg>
         </button>
         <button class="btn border-0" onclick={toggleWrapText} title="Toggle text wrap">
@@ -127,6 +134,6 @@
     {/if}
   </div>
   <div class="rounded-lg bg-background font-mono text-sm flex-1 overflow-hidden">
-    <pre bind:this={preElement} class="{textWrapClass} {fontSizeClass} h-full overflow-auto p-4">{filteredLogs}</pre>
+    <pre bind:this={preElement} onscroll={handleScroll} class="{textWrapClass} {fontSizeClass} h-full overflow-auto p-4">{filteredLogs}</pre>
   </div>
 </div>

ui-svelte/src/components/ModelsPanel.svelte

@@ -165,6 +165,9 @@
               {#if model.description}
                 <p class={model.unlisted ? "text-opacity-70" : ""}><em>{model.description}</em></p>
               {/if}
+              {#if model.aliases && model.aliases.length > 0}
+                <p class="text-xs text-txtsecondary">Aliases: {model.aliases.join(", ")}</p>
+              {/if}
             </td>
             <td class="w-12">
               {#if model.state === "stopped"}

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

@@ -16,7 +16,7 @@
   let fileInput = $state<HTMLInputElement | null>(null);
   let copied = $state(false);
 
-  const ACCEPTED_FORMATS = ['.mp3', '.wav'];
+  const ACCEPTED_FORMATS = ['.mp3', '.wav', '.ogg'];
   const MAX_FILE_SIZE = 25 * 1024 * 1024; // 25MB
 
   let hasModels = $derived($models.some((m) => !m.unlisted));
@@ -31,7 +31,7 @@
     const ext = '.' + file.name.split('.').pop()?.toLowerCase();
 
     if (!ACCEPTED_FORMATS.includes(ext)) {
-      return { valid: false, error: 'Invalid file type. Accepted: MP3, WAV' };
+      return { valid: false, error: 'Invalid file type. Accepted: MP3, WAV, OGG' };
     }
 
     if (file.size > MAX_FILE_SIZE) {
@@ -208,7 +208,7 @@
           <div>
             <p class="mb-2">Drag and drop an audio file here</p>
             <p class="text-sm">or use the Browse button below</p>
-            <p class="text-xs mt-4">Accepted formats: MP3, WAV (max 25MB)</p>
+            <p class="text-xs mt-4">Accepted formats: MP3, WAV, OGG (max 25MB)</p>
           </div>
         </div>
       {/if}
@@ -218,7 +218,7 @@
     <div class="shrink-0 flex gap-2">
       <input
         type="file"
-        accept=".mp3,.wav"
+        accept=".mp3,.wav,.ogg"
         class="hidden"
         onchange={handleFileSelect}
         bind:this={fileInput}

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

@@ -25,6 +25,11 @@
       <optgroup label="Local">
         {#each grouped.local as model (model.id)}
           <option value={model.id}>{model.id}</option>
+          {#if model.aliases}
+            {#each model.aliases as alias (alias)}
+              <option value={alias}>  ↳ {alias}</option>
+            {/each}
+          {/if}
         {/each}
       </optgroup>
     {/if}

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

@@ -0,0 +1,406 @@
+<script lang="ts">
+  import { models } from "../../stores/api";
+  import { persistentStore } from "../../stores/persistent";
+  import { rerank } from "../../lib/rerankApi";
+  import { playgroundStores } from "../../stores/playgroundActivity";
+  import ModelSelector from "./ModelSelector.svelte";
+
+  type RerankRow = { doc: string; score: number | null };
+  type SortOrder = "none" | "asc" | "desc";
+  type EditorMode = "table" | "json";
+
+  const selectedModelStore = persistentStore<string>("playground-rerank-model", "");
+
+  const defaultQuery = "How do LLM's work?";
+  const defaultDocs = [
+    "Large language models (LLMs) use transformer architectures to predict the next token in a sequence based on massive amounts of text data.",
+    "LLMs are trained on diverse internet text, learning statistical patterns of language that allow them to generate coherent responses.",
+    "During training, LLMs minimize a loss function that measures the difference between predicted and actual tokens across billions of examples.",
+    "Attention mechanisms in transformers enable LLMs to weigh the importance of different words when generating output.",
+    "Fine\u2011tuning allows a pre\u2011trained LLM to adapt to a specific downstream task with a smaller dataset.",
+    "Neural networks consist of layers of interconnected neurons that adjust their weights during back\u2011propagation.",
+    "The history of the Roman Empire spanned over a thousand years.",
+    "Soccer is the most popular sport in many countries around the world.",
+    "Quantum computing uses qubits to perform calculations that are intractable for classical computers.",
+  ];
+
+  let query = $state(defaultQuery);
+  let rows = $state<RerankRow[]>([
+    ...defaultDocs.map((doc) => ({ doc, score: null })),
+    { doc: "", score: null },
+  ]);
+  let isLoading = $state(false);
+  let error = $state<string | null>(null);
+  let usage = $state<{ prompt_tokens: number; total_tokens: number } | null>(null);
+  let abortController: AbortController | null = null;
+  let sortOrder = $state<SortOrder>("desc");
+  let editorMode = $state<EditorMode>("table");
+  let jsonText = $state("");
+  let jsonError = $state<string | null>(null);
+
+  let hasModels = $derived($models.some((m) => !m.unlisted));
+
+  let canSubmit = $derived((() => {
+    if (!$selectedModelStore || isLoading) return false;
+    if (editorMode === "json") {
+      try {
+        const parsed = JSON.parse(jsonText) as Record<string, unknown>;
+        return (
+          typeof parsed.query === "string" &&
+          parsed.query.trim() !== "" &&
+          Array.isArray(parsed.documents) &&
+          (parsed.documents as unknown[]).some(
+            (d) => typeof d === "string" && (d as string).trim() !== ""
+          )
+        );
+      } catch {
+        return false;
+      }
+    }
+    return query.trim() !== "" && rows.some((r) => r.doc.trim() !== "");
+  })());
+
+  // Display rows with sort applied (display-only transform, rows[] is never mutated by sorting)
+  let displayRows = $derived((() => {
+    const indexed = rows.map((row, i) => ({ row, i }));
+    if (sortOrder === "none") return indexed;
+    return [...indexed].sort((a, b) => {
+      if (a.row.score === null && b.row.score === null) return 0;
+      if (a.row.score === null) return 1;
+      if (b.row.score === null) return -1;
+      return sortOrder === "desc"
+        ? b.row.score - a.row.score
+        : a.row.score - b.row.score;
+    });
+  })());
+
+  // Auto-add a new empty row when the last row gets content (table mode only)
+  $effect(() => {
+    if (editorMode === "table" && rows[rows.length - 1]?.doc.trim() !== "") {
+      rows = [...rows, { doc: "", score: null }];
+    }
+  });
+
+  // Sync loading state to activity store
+  $effect(() => {
+    playgroundStores.rerankLoading.set(isLoading);
+  });
+
+  function switchToJson() {
+    if (editorMode === "json") return;
+    const docs = rows.filter((r) => r.doc.trim() !== "").map((r) => r.doc);
+    jsonText = JSON.stringify({ query, documents: docs }, null, 2);
+    jsonError = null;
+    editorMode = "json";
+  }
+
+  function switchToTable() {
+    if (editorMode === "table") return;
+    if (jsonText.trim() === "") {
+      query = "";
+      rows = [{ doc: "", score: null }];
+      jsonError = null;
+      editorMode = "table";
+      return;
+    }
+    try {
+      const parsed = JSON.parse(jsonText) as unknown;
+      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+        throw new Error("Expected a JSON object");
+      }
+      const obj = parsed as Record<string, unknown>;
+      if (typeof obj.query !== "string") throw new Error('"query" must be a string');
+      if (!Array.isArray(obj.documents)) throw new Error('"documents" must be an array');
+      query = obj.query;
+      const newRows: RerankRow[] = (obj.documents as unknown[]).map((d) => ({
+        doc: typeof d === "string" ? d : String(d),
+        score: null,
+      }));
+      if (newRows.length === 0 || newRows[newRows.length - 1].doc.trim() !== "") {
+        newRows.push({ doc: "", score: null });
+      }
+      rows = newRows;
+      jsonError = null;
+      editorMode = "table";
+    } catch (err) {
+      jsonError = err instanceof Error ? err.message : "Invalid JSON";
+    }
+  }
+
+  function cycleSortOrder() {
+    sortOrder = sortOrder === "none" ? "desc" : sortOrder === "desc" ? "asc" : "none";
+  }
+
+  function sortIndicator(): string {
+    if (sortOrder === "desc") return " ↓";
+    if (sortOrder === "asc") return " ↑";
+    return "";
+  }
+
+  async function submit() {
+    if (!canSubmit) return;
+
+    let submitQuery: string;
+    let nonEmptyEntries: { originalIndex: number; doc: string }[];
+
+    if (editorMode === "json") {
+      // Parse JSON, sync state to table, then submit
+      try {
+        const parsed = JSON.parse(jsonText) as Record<string, unknown>;
+        submitQuery = parsed.query as string;
+        const docs = (parsed.documents as string[]).filter((d) => d.trim() !== "");
+        const newRows: RerankRow[] = docs.map((d) => ({ doc: d, score: null }));
+        newRows.push({ doc: "", score: null });
+        rows = newRows;
+        query = submitQuery;
+        editorMode = "table";
+      } catch {
+        error = "Invalid JSON — fix before submitting";
+        return;
+      }
+      nonEmptyEntries = rows
+        .map((r, i) => ({ originalIndex: i, doc: r.doc }))
+        .filter((e) => e.doc.trim() !== "");
+    } else {
+      submitQuery = query;
+      nonEmptyEntries = rows
+        .map((r, i) => ({ originalIndex: i, doc: r.doc }))
+        .filter((e) => e.doc.trim() !== "");
+    }
+
+    isLoading = true;
+    error = null;
+    usage = null;
+
+    // Clear previous scores
+    rows = rows.map((r) => ({ ...r, score: null }));
+
+    abortController = new AbortController();
+
+    try {
+      const response = await rerank(
+        $selectedModelStore,
+        submitQuery,
+        nonEmptyEntries.map((e) => e.doc),
+        abortController.signal
+      );
+
+      usage = response.usage;
+
+      // Map result.index (position in submitted docs array) back to original rows[] index
+      const updated = rows.map((r) => ({ ...r }));
+      for (const result of response.results) {
+        const entry = nonEmptyEntries[result.index];
+        if (entry !== undefined) {
+          updated[entry.originalIndex].score = result.relevance_score;
+        }
+      }
+      rows = updated;
+    } catch (err) {
+      if (err instanceof Error && err.name === "AbortError") {
+        // User cancelled
+      } else {
+        error = err instanceof Error ? err.message : "An error occurred";
+      }
+    } finally {
+      isLoading = false;
+      abortController = null;
+    }
+  }
+
+  function cancel() {
+    abortController?.abort();
+  }
+
+  function clear() {
+    query = defaultQuery;
+    rows = [...defaultDocs.map((doc) => ({ doc, score: null })), { doc: "", score: null }];
+    error = null;
+    usage = null;
+    sortOrder = "desc";
+    jsonText = "";
+    jsonError = null;
+  }
+
+  function deleteRow(originalIndex: number) {
+    if (rows.length <= 1) return;
+    rows = rows.filter((_, i) => i !== originalIndex);
+  }
+
+  function updateDoc(originalIndex: number, value: string) {
+    const updated = rows.map((r) => ({ ...r }));
+    updated[originalIndex].doc = value;
+    rows = updated;
+  }
+
+  function scoreColor(score: number | null): string {
+    if (score === null) return "text-txtsecondary";
+    if (score > 0) return "text-green-600 dark:text-green-400";
+    return "text-red-500 dark:text-red-400";
+  }
+
+  function formatScore(score: number | null): string {
+    if (score === null) return "—";
+    return score.toFixed(3);
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      submit();
+    }
+  }
+
+  let isCleared = $derived(
+    query === defaultQuery &&
+    rows.every((r, i) => r.score === null && r.doc === (defaultDocs[i] ?? "")) &&
+    rows.length === defaultDocs.length + 1 &&
+    !jsonText.trim() &&
+    !error &&
+    !usage
+  );
+</script>
+
+<div class="flex flex-col h-full">
+  <!-- Top bar: model selector + query input (table mode) + mode toggle -->
+  <div class="shrink-0 flex flex-wrap gap-2 mb-4">
+    <ModelSelector bind:value={$selectedModelStore} placeholder="Select a rerank model..." disabled={isLoading} />
+    {#if editorMode === "table"}
+      <input
+        type="text"
+        class="min-w-0 flex-1 basis-48 px-3 py-2 rounded border border-gray-200 dark:border-white/10 bg-surface focus:outline-none focus:ring-2 focus:ring-primary"
+        placeholder="Query..."
+        bind:value={query}
+        disabled={isLoading}
+        onkeydown={handleKeyDown}
+      />
+    {/if}
+    <!-- Table / JSON toggle -->
+    <div class="flex rounded border border-gray-200 dark:border-white/10 overflow-hidden shrink-0">
+      <button
+        class="px-3 py-1.5 text-sm transition-colors {editorMode === 'table'
+          ? 'bg-primary text-btn-primary-text'
+          : 'bg-surface hover:bg-secondary-hover'}"
+        onclick={switchToTable}
+        disabled={isLoading}
+      >
+        Table
+      </button>
+      <button
+        class="px-3 py-1.5 text-sm border-l border-gray-200 dark:border-white/10 transition-colors {editorMode === 'json'
+          ? 'bg-primary text-btn-primary-text'
+          : 'bg-surface hover:bg-secondary-hover'}"
+        onclick={switchToJson}
+        disabled={isLoading}
+      >
+        JSON
+      </button>
+    </div>
+  </div>
+
+  {#if !hasModels}
+    <div class="flex-1 flex items-center justify-center text-txtsecondary">
+      <p>No models configured. Add models to your configuration to use reranking.</p>
+    </div>
+  {:else if editorMode === "json"}
+    <!-- JSON editor -->
+    <div class="flex-1 flex flex-col min-h-0 mb-4">
+      <textarea
+        class="flex-1 w-full font-mono text-sm px-3 py-2 rounded border border-gray-200 dark:border-white/10 bg-surface focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+        bind:value={jsonText}
+        disabled={isLoading}
+        placeholder={'{\n  "query": "your search query",\n  "documents": [\n    "document one",\n    "document two"\n  ]\n}'}
+        spellcheck={false}
+      ></textarea>
+      {#if jsonError}
+        <p class="mt-1 text-sm text-red-500">{jsonError}</p>
+      {/if}
+    </div>
+  {:else}
+    <!-- Document table -->
+    <div class="flex-1 overflow-y-auto mb-4 border border-gray-200 dark:border-white/10 rounded">
+      <table class="w-full border-collapse table-fixed">
+        <colgroup>
+          <col class="w-auto" />
+          <col style="width: 120px" />
+          <col style="width: 40px" />
+        </colgroup>
+        <thead class="sticky top-0 bg-surface border-b border-gray-200 dark:border-white/10">
+          <tr>
+            <th class="px-3 py-2 text-left text-sm font-medium text-txtsecondary">Document</th>
+            <th
+              class="px-3 py-2 text-right text-sm font-medium text-txtsecondary cursor-pointer select-none hover:text-txtprimary transition-colors"
+              onclick={cycleSortOrder}
+            >
+              Score{sortIndicator()}
+            </th>
+            <th class="px-2 py-2"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each displayRows as { row, i } (i)}
+            <tr class="border-b border-gray-100 dark:border-white/5 last:border-0">
+              <td class="px-3 py-1.5">
+                <input
+                  type="text"
+                  class="w-full bg-transparent focus:outline-none focus:ring-1 focus:ring-primary rounded px-1 py-0.5"
+                  placeholder={i === rows.length - 1 ? "Add document..." : "Document text..."}
+                  value={row.doc}
+                  oninput={(e) => updateDoc(i, (e.target as HTMLInputElement).value)}
+                  disabled={isLoading}
+                  onkeydown={handleKeyDown}
+                />
+              </td>
+              <td class="px-3 py-1.5 text-right font-mono text-sm {scoreColor(row.score)}">
+                {#if isLoading && row.score === null && row.doc.trim() !== ""}
+                  <span class="inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin align-middle"></span>
+                {:else}
+                  {formatScore(row.score)}
+                {/if}
+              </td>
+              <td class="px-2 py-1.5 text-center">
+                <button
+                  class="w-7 h-7 flex items-center justify-center text-txtsecondary hover:text-red-500 transition-colors rounded disabled:opacity-30 disabled:cursor-not-allowed"
+                  onclick={() => deleteRow(i)}
+                  disabled={rows.length <= 1}
+                  tabindex="-1"
+                  aria-label="Remove row"
+                >
+                  ×
+                </button>
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {/if}
+
+  <!-- Bottom toolbar -->
+  {#if hasModels}
+    <div class="shrink-0 flex flex-wrap items-center gap-2">
+      {#if isLoading}
+        <button class="btn bg-red-500 hover:bg-red-600 text-white" onclick={cancel}>
+          Cancel
+        </button>
+      {:else}
+        <button
+          class="btn bg-primary text-btn-primary-text hover:opacity-90"
+          onclick={submit}
+          disabled={!canSubmit}
+        >
+          Rerank
+        </button>
+        <button class="btn" onclick={clear} disabled={isCleared}>
+          Clear
+        </button>
+      {/if}
+
+      {#if error}
+        <span class="text-sm text-red-500 ml-2">{error}</span>
+      {:else if usage}
+        <span class="text-sm text-txtsecondary ml-2">{usage.total_tokens} tokens</span>
+      {/if}
+    </div>
+  {/if}
+</div>

ui-svelte/src/lib/rerankApi.ts

@@ -0,0 +1,27 @@
+export interface RerankResult {
+  index: number;
+  relevance_score: number;
+}
+
+export interface RerankResponse {
+  model: string;
+  object: string;
+  usage: { prompt_tokens: number; total_tokens: number };
+  results: RerankResult[];
+}
+
+export async function rerank(
+  model: string,
+  query: string,
+  documents: string[],
+  signal: AbortSignal
+): Promise<RerankResponse> {
+  const response = await fetch("/v1/rerank", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ model, query, documents }),
+    signal,
+  });
+  if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
+  return response.json();
+}

ui-svelte/src/lib/types.ts

@@ -9,6 +9,7 @@ export interface Model {
   description: string;
   unlisted: boolean;
   peerID: string;
+  aliases?: string[];
 }
 
 export interface Metrics {

ui-svelte/src/routes/Playground.svelte

@@ -4,8 +4,9 @@
   import ImageInterface from "../components/playground/ImageInterface.svelte";
   import AudioInterface from "../components/playground/AudioInterface.svelte";
   import SpeechInterface from "../components/playground/SpeechInterface.svelte";
+  import RerankInterface from "../components/playground/RerankInterface.svelte";
 
-  type Tab = "chat" | "images" | "speech" | "audio";
+  type Tab = "chat" | "images" | "speech" | "audio" | "rerank";
 
   const selectedTabStore = persistentStore<Tab>("playground-selected-tab", "chat");
   let mobileMenuOpen = $state(false);
@@ -15,6 +16,7 @@
     { id: "images", label: "Images" },
     { id: "speech", label: "Speech" },
     { id: "audio", label: "Transcription" },
+    { id: "rerank", label: "Rerank" },
   ];
 
   function selectTab(tab: Tab) {
@@ -89,6 +91,9 @@
     <div class="h-full" class:tab-hidden={$selectedTabStore !== "audio"}>
       <AudioInterface />
     </div>
+    <div class="h-full" class:tab-hidden={$selectedTabStore !== "rerank"}>
+      <RerankInterface />
+    </div>
   </div>
 </div>
 

ui-svelte/src/stores/playgroundActivity.ts

@@ -4,10 +4,11 @@ const chatStreaming = writable(false);
 const imageGenerating = writable(false);
 const speechGenerating = writable(false);
 const audioTranscribing = writable(false);
+const rerankLoading = writable(false);
 
 export const playgroundActivity = derived(
-  [chatStreaming, imageGenerating, speechGenerating, audioTranscribing],
+  [chatStreaming, imageGenerating, speechGenerating, audioTranscribing, rerankLoading],
-  ([$chat, $image, $speech, $audio]) => $chat || $image || $speech || $audio
+  ([$chat, $image, $speech, $audio, $rerank]) => $chat || $image || $speech || $audio || $rerank
 );
 
 export const playgroundStores = {
@@ -15,4 +16,5 @@ export const playgroundStores = {
   imageGenerating,
   speechGenerating,
   audioTranscribing,
+  rerankLoading,
 };