feat(dash): improved frontend dashboard (#6)
Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com> Reviewed-on: #6
This commit was merged in pull request #6.
This commit is contained in:
221
src/pages/providers.rs
Normal file
221
src/pages/providers.rs
Normal file
@@ -0,0 +1,221 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use crate::components::PageHeader;
|
||||
use crate::models::{EmbeddingEntry, LlmProvider, ModelEntry, ProviderConfig};
|
||||
|
||||
/// Providers page for configuring LLM and embedding model backends.
|
||||
///
|
||||
/// Two-column layout: left side has a configuration form, right side
|
||||
/// shows the currently active provider status.
|
||||
#[component]
|
||||
pub fn ProvidersPage() -> Element {
|
||||
let mut selected_provider = use_signal(|| LlmProvider::Ollama);
|
||||
let mut selected_model = use_signal(|| "llama3.1:8b".to_string());
|
||||
let mut selected_embedding = use_signal(|| "nomic-embed-text".to_string());
|
||||
let mut api_key = use_signal(String::new);
|
||||
let mut saved = use_signal(|| false);
|
||||
|
||||
let models = mock_models();
|
||||
let embeddings = mock_embeddings();
|
||||
|
||||
// Filter models/embeddings by selected provider
|
||||
let provider_val = selected_provider.read().clone();
|
||||
let available_models: Vec<_> = models
|
||||
.iter()
|
||||
.filter(|m| m.provider == provider_val)
|
||||
.collect();
|
||||
let available_embeddings: Vec<_> = embeddings
|
||||
.iter()
|
||||
.filter(|e| e.provider == provider_val)
|
||||
.collect();
|
||||
|
||||
let active_config = ProviderConfig {
|
||||
provider: provider_val.clone(),
|
||||
selected_model: selected_model.read().clone(),
|
||||
selected_embedding: selected_embedding.read().clone(),
|
||||
api_key_set: !api_key.read().is_empty(),
|
||||
};
|
||||
|
||||
rsx! {
|
||||
section { class: "providers-page",
|
||||
PageHeader {
|
||||
title: "Providers".to_string(),
|
||||
subtitle: "Configure your LLM and embedding backends".to_string(),
|
||||
}
|
||||
div { class: "providers-layout",
|
||||
div { class: "providers-form",
|
||||
div { class: "form-group",
|
||||
label { "Provider" }
|
||||
select {
|
||||
class: "form-select",
|
||||
value: "{provider_val.label()}",
|
||||
onchange: move |evt: Event<FormData>| {
|
||||
let val = evt.value();
|
||||
let prov = match val.as_str() {
|
||||
"Hugging Face" => LlmProvider::HuggingFace,
|
||||
"OpenAI" => LlmProvider::OpenAi,
|
||||
"Anthropic" => LlmProvider::Anthropic,
|
||||
_ => LlmProvider::Ollama,
|
||||
};
|
||||
selected_provider.set(prov);
|
||||
saved.set(false);
|
||||
},
|
||||
option { value: "Ollama", "Ollama" }
|
||||
option { value: "Hugging Face", "Hugging Face" }
|
||||
option { value: "OpenAI", "OpenAI" }
|
||||
option { value: "Anthropic", "Anthropic" }
|
||||
}
|
||||
}
|
||||
div { class: "form-group",
|
||||
label { "Model" }
|
||||
select {
|
||||
class: "form-select",
|
||||
value: "{selected_model}",
|
||||
onchange: move |evt: Event<FormData>| {
|
||||
selected_model.set(evt.value());
|
||||
saved.set(false);
|
||||
},
|
||||
for m in &available_models {
|
||||
option { value: "{m.id}", "{m.name} ({m.context_window}k ctx)" }
|
||||
}
|
||||
}
|
||||
}
|
||||
div { class: "form-group",
|
||||
label { "Embedding Model" }
|
||||
select {
|
||||
class: "form-select",
|
||||
value: "{selected_embedding}",
|
||||
onchange: move |evt: Event<FormData>| {
|
||||
selected_embedding.set(evt.value());
|
||||
saved.set(false);
|
||||
},
|
||||
for e in &available_embeddings {
|
||||
option { value: "{e.id}", "{e.name} ({e.dimensions}d)" }
|
||||
}
|
||||
}
|
||||
}
|
||||
div { class: "form-group",
|
||||
label { "API Key" }
|
||||
input {
|
||||
class: "form-input",
|
||||
r#type: "password",
|
||||
placeholder: "Enter API key...",
|
||||
value: "{api_key}",
|
||||
oninput: move |evt: Event<FormData>| {
|
||||
api_key.set(evt.value());
|
||||
saved.set(false);
|
||||
},
|
||||
}
|
||||
}
|
||||
button {
|
||||
class: "btn-primary",
|
||||
onclick: move |_| saved.set(true),
|
||||
"Save Configuration"
|
||||
}
|
||||
if *saved.read() {
|
||||
p { class: "form-success", "Configuration saved." }
|
||||
}
|
||||
}
|
||||
div { class: "providers-status",
|
||||
h3 { "Active Configuration" }
|
||||
div { class: "status-card",
|
||||
div { class: "status-row",
|
||||
span { class: "status-label", "Provider" }
|
||||
span { class: "status-value", "{active_config.provider.label()}" }
|
||||
}
|
||||
div { class: "status-row",
|
||||
span { class: "status-label", "Model" }
|
||||
span { class: "status-value", "{active_config.selected_model}" }
|
||||
}
|
||||
div { class: "status-row",
|
||||
span { class: "status-label", "Embedding" }
|
||||
span { class: "status-value", "{active_config.selected_embedding}" }
|
||||
}
|
||||
div { class: "status-row",
|
||||
span { class: "status-label", "API Key" }
|
||||
span { class: "status-value",
|
||||
if active_config.api_key_set {
|
||||
"Set"
|
||||
} else {
|
||||
"Not set"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Returns mock model entries for all providers.
|
||||
fn mock_models() -> Vec<ModelEntry> {
|
||||
vec![
|
||||
ModelEntry {
|
||||
id: "llama3.1:8b".into(),
|
||||
name: "Llama 3.1 8B".into(),
|
||||
provider: LlmProvider::Ollama,
|
||||
context_window: 128,
|
||||
},
|
||||
ModelEntry {
|
||||
id: "llama3.1:70b".into(),
|
||||
name: "Llama 3.1 70B".into(),
|
||||
provider: LlmProvider::Ollama,
|
||||
context_window: 128,
|
||||
},
|
||||
ModelEntry {
|
||||
id: "mistral:7b".into(),
|
||||
name: "Mistral 7B".into(),
|
||||
provider: LlmProvider::Ollama,
|
||||
context_window: 32,
|
||||
},
|
||||
ModelEntry {
|
||||
id: "meta-llama/Llama-3.1-8B".into(),
|
||||
name: "Llama 3.1 8B".into(),
|
||||
provider: LlmProvider::HuggingFace,
|
||||
context_window: 128,
|
||||
},
|
||||
ModelEntry {
|
||||
id: "gpt-4o".into(),
|
||||
name: "GPT-4o".into(),
|
||||
provider: LlmProvider::OpenAi,
|
||||
context_window: 128,
|
||||
},
|
||||
ModelEntry {
|
||||
id: "claude-sonnet-4-6".into(),
|
||||
name: "Claude Sonnet 4.6".into(),
|
||||
provider: LlmProvider::Anthropic,
|
||||
context_window: 200,
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
/// Returns mock embedding entries for all providers.
|
||||
fn mock_embeddings() -> Vec<EmbeddingEntry> {
|
||||
vec![
|
||||
EmbeddingEntry {
|
||||
id: "nomic-embed-text".into(),
|
||||
name: "Nomic Embed Text".into(),
|
||||
provider: LlmProvider::Ollama,
|
||||
dimensions: 768,
|
||||
},
|
||||
EmbeddingEntry {
|
||||
id: "sentence-transformers/all-MiniLM-L6-v2".into(),
|
||||
name: "MiniLM-L6-v2".into(),
|
||||
provider: LlmProvider::HuggingFace,
|
||||
dimensions: 384,
|
||||
},
|
||||
EmbeddingEntry {
|
||||
id: "text-embedding-3-small".into(),
|
||||
name: "Embedding 3 Small".into(),
|
||||
provider: LlmProvider::OpenAi,
|
||||
dimensions: 1536,
|
||||
},
|
||||
EmbeddingEntry {
|
||||
id: "voyage-3".into(),
|
||||
name: "Voyage 3".into(),
|
||||
provider: LlmProvider::Anthropic,
|
||||
dimensions: 1024,
|
||||
},
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user