From 0f434546aa1fd6df27e4c13e517bfb588b6a078e Mon Sep 17 00:00:00 2001
From: MarkLo <yao920127@gmail.com>
Date: Sun, 21 Dec 2025 02:00:38 +0800
Subject: [PATCH]

---
 frontend/components/analysis/AnalysisForm.tsx | 337 ++++++++++++++----
 frontend/pnpm-lock.yaml                       |   8 +-
 frontend/public/logos/huggingface-color.svg   |   1 +
 llm_logo/huggingface-color.svg                |   1 +
 4 files changed, 279 insertions(+), 68 deletions(-)
 create mode 100644 frontend/public/logos/huggingface-color.svg
 create mode 100644 llm_logo/huggingface-color.svg

diff --git a/frontend/components/analysis/AnalysisForm.tsx b/frontend/components/analysis/AnalysisForm.tsx
index 5c7da812..02ddc9d4 100644
--- a/frontend/components/analysis/AnalysisForm.tsx
+++ b/frontend/components/analysis/AnalysisForm.tsx
@@ -11,6 +11,7 @@ import { format } from "date-fns";
 import { CheckIcon } from "lucide-react";
 import { getApiSettingsAsync } from "@/lib/storage";
 import { getBaseUrlForModel, getApiKeyForModel } from "@/lib/api-helpers";
+import Image from "next/image";
 
 import { cn } from "@/lib/utils";
 
@@ -520,96 +521,194 @@ export function AnalysisForm({ onSubmit, loading = false }: AnalysisFormProps) {
                         <SelectContent>
                           {/* OpenAI */}
                           <SelectItem value="gpt-5.2-2025-12-11">
-                            OpenAI: GPT-5.2
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>GPT-5.2</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gpt-5.1">
-                            OpenAI: GPT-5.1
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>GPT-5.1</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gpt-5-mini">
-                            OpenAI: GPT-5 Mini
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>GPT-5 Mini</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gpt-5-nano">
-                            OpenAI: GPT-5 Nano
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>GPT-5 Nano</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gpt-4.1-mini">
-                            OpenAI: GPT-4.1 Mini
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>GPT-4.1 Mini</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gpt-4.1-nano">
-                            OpenAI: GPT-4.1 Nano
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>GPT-4.1 Nano</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="o4-mini">
-                            OpenAI: o4-mini
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>o4-mini</span>
+                            </div>
                           </SelectItem>
 
                           {/* Anthropic (Official model IDs) */}
                           <SelectItem value="claude-sonnet-4-5-20250929">
-                            Anthropic: Claude Sonnet 4.5
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
+                              <span>Claude Sonnet 4.5</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="claude-haiku-4-5-20251001">
-                            Anthropic: Claude Haiku 4.5
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
+                              <span>Claude Haiku 4.5</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="claude-sonnet-4-20250514">
-                            Anthropic: Claude Sonnet 4
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
+                              <span>Claude Sonnet 4</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="claude-3-7-sonnet-20250219">
-                            Anthropic: Claude 3.7 Sonnet
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
+                              <span>Claude 3.7 Sonnet</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="claude-3-5-haiku-20241022">
-                            Anthropic: Claude 3.5 Haiku
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
+                              <span>Claude 3.5 Haiku</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="claude-3-haiku-20240307">
-                            Anthropic: Claude 3 Haiku
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
+                              <span>Claude 3 Haiku</span>
+                            </div>
                           </SelectItem>
 
                           {/* Google */}
                           <SelectItem value="gemini-2.5-pro">
-                            Google: Gemini 2.5 Pro
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
+                              <span>Gemini 2.5 Pro</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gemini-2.5-flash">
-                            Google: Gemini 2.5 Flash
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
+                              <span>Gemini 2.5 Flash</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gemini-2.5-flash-lite">
-                            Google: Gemini 2.5 Flash Lite
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
+                              <span>Gemini 2.5 Flash Lite</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gemini-2.0-flash">
-                            Google: Gemini 2.0 Flash
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
+                              <span>Gemini 2.0 Flash</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gemini-2.0-flash-lite">
-                            Google: Gemini 2.0 Flash Lite
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
+                              <span>Gemini 2.0 Flash Lite</span>
+                            </div>
                           </SelectItem>
 
                           {/* Grok */}
                           <SelectItem value="grok-4-1-fast-reasoning">
-                            Grok: 4.1 Fast Reasoning
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
+                              <span>Grok 4.1 Fast Reasoning</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="grok-4-1-fast-non-reasoning">
-                            Grok: 4.1 Fast Non Reasoning
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
+                              <span>Grok 4.1 Fast Non Reasoning</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="grok-4-fast-reasoning">
-                            Grok: 4 Fast Reasoning
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
+                              <span>Grok 4 Fast Reasoning</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="grok-4-fast-non-reasoning">
-                            Grok: 4 Fast Non Reasoning
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
+                              <span>Grok 4 Fast Non Reasoning</span>
+                            </div>
+                          </SelectItem>
+                          <SelectItem value="grok-4-0709">
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
+                              <span>Grok 4</span>
+                            </div>
+                          </SelectItem>
+                          <SelectItem value="grok-3">
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
+                              <span>Grok 3</span>
+                            </div>
                           </SelectItem>
-                          <SelectItem value="grok-4-0709">Grok: 4</SelectItem>
-                          <SelectItem value="grok-3">Grok: 3</SelectItem>
                           <SelectItem value="grok-3-mini">
-                            Grok: 3 Mini
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
+                              <span>Grok 3 Mini</span>
+                            </div>
                           </SelectItem>
 
                           {/* DeepSeek */}
                           <SelectItem value="deepseek-reasoner">
-                            DeepSeek: Reasoner
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/deepseek-color.svg" alt="DeepSeek" width={16} height={16} className="shrink-0" />
+                              <span>DeepSeek Reasoner</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="deepseek-chat">
-                            DeepSeek: Chat
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/deepseek-color.svg" alt="DeepSeek" width={16} height={16} className="shrink-0" />
+                              <span>DeepSeek Chat</span>
+                            </div>
                           </SelectItem>
 
                           {/* Qwen */}
-                          <SelectItem value="qwen3-max">Qwen: 3 Max</SelectItem>
-                          <SelectItem value="qwen-plus">Qwen: Plus</SelectItem>
+                          <SelectItem value="qwen3-max">
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/qwen-color.svg" alt="Qwen" width={16} height={16} className="shrink-0" />
+                              <span>Qwen 3 Max</span>
+                            </div>
+                          </SelectItem>
+                          <SelectItem value="qwen-plus">
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/qwen-color.svg" alt="Qwen" width={16} height={16} className="shrink-0" />
+                              <span>Qwen Plus</span>
+                            </div>
+                          </SelectItem>
                           <SelectItem value="qwen-flash">
-                            Qwen: Flash
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/qwen-color.svg" alt="Qwen" width={16} height={16} className="shrink-0" />
+                              <span>Qwen Flash</span>
+                            </div>
                           </SelectItem>
 
                           {/* Custom Model */}
@@ -662,96 +761,194 @@ export function AnalysisForm({ onSubmit, loading = false }: AnalysisFormProps) {
                         <SelectContent>
                           {/* OpenAI */}
                           <SelectItem value="gpt-5.2-2025-12-11">
-                            OpenAI: GPT-5.2
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>GPT-5.2</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gpt-5.1">
-                            OpenAI: GPT-5.1
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>GPT-5.1</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gpt-5-mini">
-                            OpenAI: GPT-5 Mini
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>GPT-5 Mini</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gpt-5-nano">
-                            OpenAI: GPT-5 Nano
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>GPT-5 Nano</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gpt-4.1-mini">
-                            OpenAI: GPT-4.1 Mini
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>GPT-4.1 Mini</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gpt-4.1-nano">
-                            OpenAI: GPT-4.1 Nano
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>GPT-4.1 Nano</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="o4-mini">
-                            OpenAI: o4-mini
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>o4-mini</span>
+                            </div>
                           </SelectItem>
 
                           {/* Anthropic (Official model IDs) */}
                           <SelectItem value="claude-sonnet-4-5-20250929">
-                            Anthropic: Claude Sonnet 4.5
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
+                              <span>Claude Sonnet 4.5</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="claude-haiku-4-5-20251001">
-                            Anthropic: Claude Haiku 4.5
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
+                              <span>Claude Haiku 4.5</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="claude-sonnet-4-20250514">
-                            Anthropic: Claude Sonnet 4
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
+                              <span>Claude Sonnet 4</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="claude-3-7-sonnet-20250219">
-                            Anthropic: Claude 3.7 Sonnet
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
+                              <span>Claude 3.7 Sonnet</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="claude-3-5-haiku-20241022">
-                            Anthropic: Claude 3.5 Haiku
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
+                              <span>Claude 3.5 Haiku</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="claude-3-haiku-20240307">
-                            Anthropic: Claude 3 Haiku
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
+                              <span>Claude 3 Haiku</span>
+                            </div>
                           </SelectItem>
 
                           {/* Google */}
                           <SelectItem value="gemini-2.5-pro">
-                            Google: Gemini 2.5 Pro
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
+                              <span>Gemini 2.5 Pro</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gemini-2.5-flash">
-                            Google: Gemini 2.5 Flash
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
+                              <span>Gemini 2.5 Flash</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gemini-2.5-flash-lite">
-                            Google: Gemini 2.5 Flash Lite
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
+                              <span>Gemini 2.5 Flash Lite</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gemini-2.0-flash">
-                            Google: Gemini 2.0 Flash
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
+                              <span>Gemini 2.0 Flash</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="gemini-2.0-flash-lite">
-                            Google: Gemini 2.0 Flash Lite
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
+                              <span>Gemini 2.0 Flash Lite</span>
+                            </div>
                           </SelectItem>
 
                           {/* Grok */}
                           <SelectItem value="grok-4-1-fast-reasoning">
-                            Grok: 4.1 Fast Reasoning
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
+                              <span>Grok 4.1 Fast Reasoning</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="grok-4-1-fast-non-reasoning">
-                            Grok: 4.1 Fast Non Reasoning
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
+                              <span>Grok 4.1 Fast Non Reasoning</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="grok-4-fast-reasoning">
-                            Grok: 4 Fast Reasoning
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
+                              <span>Grok 4 Fast Reasoning</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="grok-4-fast-non-reasoning">
-                            Grok: 4 Fast Non Reasoning
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
+                              <span>Grok 4 Fast Non Reasoning</span>
+                            </div>
+                          </SelectItem>
+                          <SelectItem value="grok-4-0709">
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
+                              <span>Grok 4</span>
+                            </div>
+                          </SelectItem>
+                          <SelectItem value="grok-3">
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
+                              <span>Grok 3</span>
+                            </div>
                           </SelectItem>
-                          <SelectItem value="grok-4-0709">Grok: 4</SelectItem>
-                          <SelectItem value="grok-3">Grok: 3</SelectItem>
                           <SelectItem value="grok-3-mini">
-                            Grok: 3 Mini
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
+                              <span>Grok 3 Mini</span>
+                            </div>
                           </SelectItem>
 
                           {/* DeepSeek */}
                           <SelectItem value="deepseek-reasoner">
-                            DeepSeek: Reasoner
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/deepseek-color.svg" alt="DeepSeek" width={16} height={16} className="shrink-0" />
+                              <span>DeepSeek Reasoner</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="deepseek-chat">
-                            DeepSeek: Chat
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/deepseek-color.svg" alt="DeepSeek" width={16} height={16} className="shrink-0" />
+                              <span>DeepSeek Chat</span>
+                            </div>
                           </SelectItem>
 
                           {/* Qwen */}
-                          <SelectItem value="qwen3-max">Qwen: 3 Max</SelectItem>
-                          <SelectItem value="qwen-plus">Qwen: Plus</SelectItem>
+                          <SelectItem value="qwen3-max">
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/qwen-color.svg" alt="Qwen" width={16} height={16} className="shrink-0" />
+                              <span>Qwen 3 Max</span>
+                            </div>
+                          </SelectItem>
+                          <SelectItem value="qwen-plus">
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/qwen-color.svg" alt="Qwen" width={16} height={16} className="shrink-0" />
+                              <span>Qwen Plus</span>
+                            </div>
+                          </SelectItem>
                           <SelectItem value="qwen-flash">
-                            Qwen: Flash
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/qwen-color.svg" alt="Qwen" width={16} height={16} className="shrink-0" />
+                              <span>Qwen Flash</span>
+                            </div>
                           </SelectItem>
 
                           {/* Custom Model */}
@@ -805,18 +1002,30 @@ export function AnalysisForm({ onSubmit, loading = false }: AnalysisFormProps) {
                         <SelectContent>
                           {/* 本地開源模型 (不需要 API Key) */}
                           <SelectItem value="all-MiniLM-L6-v2">
-                            🖥️：all-MiniLM-L6-v2
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/huggingface-color.svg" alt="HuggingFace" width={16} height={16} className="shrink-0" />
+                              <span>all-MiniLM-L6-v2</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="all-mpnet-base-v2">
-                            🖥️：all-mpnet-base-v2
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/huggingface-color.svg" alt="HuggingFace" width={16} height={16} className="shrink-0" />
+                              <span>all-mpnet-base-v2</span>
+                            </div>
                           </SelectItem>
                           
                           {/* OpenAI API 模型 (需要 API Key) */}
                           <SelectItem value="text-embedding-3-small">
-                            ☁️：text-embedding-3-small
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>text-embedding-3-small</span>
+                            </div>
                           </SelectItem>
                           <SelectItem value="text-embedding-3-large">
-                            ☁️：text-embedding-3-large
+                            <div className="flex items-center gap-2">
+                              <Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
+                              <span>text-embedding-3-large</span>
+                            </div>
                           </SelectItem>
                         </SelectContent>
                       </Select>
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 910a2071..d2e70602 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -1940,8 +1940,8 @@ packages:
   immer@10.2.0:
     resolution: {integrity: sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==}
 
-  immer@11.0.1:
-    resolution: {integrity: sha512-naDCyggtcBWANtIrjQEajhhBEuL9b0Zg4zmlWK2CzS6xCWSE39/vvf4LqnMjUAWHBhot4m9MHCM/Z+mfWhUkiA==}
+  immer@11.1.0:
+    resolution: {integrity: sha512-dlzb07f5LDY+tzs+iLCSXV2yuhaYfezqyZQc+n6baLECWkOMEWxkECAOnXL0ba7lsA25fM9b2jtzpu/uxo1a7g==}
 
   import-fresh@3.3.1:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
@@ -3789,7 +3789,7 @@ snapshots:
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@standard-schema/utils': 0.3.0
-      immer: 11.0.1
+      immer: 11.1.0
       redux: 5.0.1
       redux-thunk: 3.1.0(redux@5.0.1)
       reselect: 5.1.1
@@ -4990,7 +4990,7 @@ snapshots:
 
   immer@10.2.0: {}
 
-  immer@11.0.1: {}
+  immer@11.1.0: {}
 
   import-fresh@3.3.1:
     dependencies:
diff --git a/frontend/public/logos/huggingface-color.svg b/frontend/public/logos/huggingface-color.svg
new file mode 100644
index 00000000..dc1cf3ff
--- /dev/null
+++ b/frontend/public/logos/huggingface-color.svg
@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>HuggingFace</title><path d="M2.25 11.535c0-3.407 1.847-6.554 4.844-8.258a9.822 9.822 0 019.687 0c2.997 1.704 4.844 4.851 4.844 8.258 0 5.266-4.337 9.535-9.687 9.535S2.25 16.8 2.25 11.535z" fill="#FF9D0B"></path><path d="M11.938 20.086c4.797 0 8.687-3.829 8.687-8.551 0-4.722-3.89-8.55-8.687-8.55-4.798 0-8.688 3.828-8.688 8.55 0 4.722 3.89 8.55 8.688 8.55z" fill="#FFD21E"></path><path d="M11.875 15.113c2.457 0 3.25-2.156 3.25-3.263 0-.576-.393-.394-1.023-.089-.582.283-1.365.675-2.224.675-1.798 0-3.25-1.693-3.25-.586 0 1.107.79 3.263 3.25 3.263h-.003z" fill="#FF323D"></path><path d="M14.76 9.21c.32.108.445.753.767.585.447-.233.707-.708.659-1.204a1.235 1.235 0 00-.879-1.059 1.262 1.262 0 00-1.33.394c-.322.384-.377.92-.14 1.36.153.283.638-.177.925-.079l-.002.003zm-5.887 0c-.32.108-.448.753-.768.585a1.226 1.226 0 01-.658-1.204c.048-.495.395-.913.878-1.059a1.262 1.262 0 011.33.394c.322.384.377.92.14 1.36-.152.283-.64-.177-.925-.079l.003.003zm1.12 5.34a2.166 2.166 0 011.325-1.106c.07-.02.144.06.219.171l.192.306c.069.1.139.175.209.175.074 0 .15-.074.223-.172l.205-.302c.08-.11.157-.188.234-.165.537.168.986.536 1.25 1.026.932-.724 1.275-1.905 1.275-2.633 0-.508-.306-.426-.81-.19l-.616.296c-.52.24-1.148.48-1.824.48-.676 0-1.302-.24-1.823-.48l-.589-.283c-.52-.248-.838-.342-.838.177 0 .703.32 1.831 1.187 2.56l.18.14z" fill="#3A3B45"></path><path d="M17.812 10.366a.806.806 0 00.813-.8c0-.441-.364-.8-.813-.8a.806.806 0 00-.812.8c0 .442.364.8.812.8zm-11.624 0a.806.806 0 00.812-.8c0-.441-.364-.8-.812-.8a.806.806 0 00-.813.8c0 .442.364.8.813.8zM4.515 13.073c-.405 0-.765.162-1.017.46a1.455 1.455 0 00-.333.925 1.801 1.801 0 00-.485-.074c-.387 0-.737.146-.985.409a1.41 1.41 0 00-.2 1.722 1.302 1.302 0 00-.447.694c-.06.222-.12.69.2 1.166a1.267 1.267 0 00-.093 1.236c.238.533.81.958 1.89 1.405l.24.096c.768.3 1.473.492 1.478.494.89.243 1.808.375 2.732.394 1.465 0 2.513-.443 3.115-1.314.93-1.342.842-2.575-.274-3.763l-.151-.154c-.692-.684-1.155-1.69-1.25-1.912-.195-.655-.71-1.383-1.562-1.383-.46.007-.889.233-1.15.605-.25-.31-.495-.553-.715-.694a1.87 1.87 0 00-.993-.312zm14.97 0c.405 0 .767.162 1.017.46.216.262.333.588.333.925.158-.047.322-.071.487-.074.388 0 .738.146.985.409a1.41 1.41 0 01.2 1.722c.22.178.377.422.445.694.06.222.12.69-.2 1.166.244.37.279.836.093 1.236-.238.533-.81.958-1.889 1.405l-.239.096c-.77.3-1.475.492-1.48.494-.89.243-1.808.375-2.732.394-1.465 0-2.513-.443-3.115-1.314-.93-1.342-.842-2.575.274-3.763l.151-.154c.695-.684 1.157-1.69 1.252-1.912.195-.655.708-1.383 1.56-1.383.46.007.889.233 1.15.605.25-.31.495-.553.718-.694.244-.162.523-.265.814-.3l.176-.012z" fill="#FF9D0B"></path><path d="M9.785 20.132c.688-.994.638-1.74-.305-2.667-.945-.928-1.495-2.288-1.495-2.288s-.205-.788-.672-.714c-.468.074-.81 1.25.17 1.971.977.721-.195 1.21-.573.534-.375-.677-1.405-2.416-1.94-2.751-.532-.332-.907-.148-.782.541.125.687 2.357 2.35 2.14 2.707-.218.362-.983-.42-.983-.42S2.953 14.9 2.43 15.46c-.52.558.398 1.026 1.7 1.803 1.308.778 1.41.985 1.225 1.28-.187.295-3.07-2.1-3.34-1.083-.27 1.011 2.943 1.304 2.745 2.006-.2.7-2.265-1.324-2.685-.537-.425.79 2.913 1.718 2.94 1.725 1.075.276 3.813.859 4.77-.522zm4.432 0c-.687-.994-.64-1.74.305-2.667.943-.928 1.493-2.288 1.493-2.288s.205-.788.675-.714c.465.074.807 1.25-.17 1.971-.98.721.195 1.21.57.534.377-.677 1.407-2.416 1.94-2.751.532-.332.91-.148.782.541-.125.687-2.355 2.35-2.137 2.707.215.362.98-.42.98-.42S21.05 14.9 21.57 15.46c.52.558-.395 1.026-1.7 1.803-1.308.778-1.408.985-1.225 1.28.187.295 3.07-2.1 3.34-1.083.27 1.011-2.94 1.304-2.743 2.006.2.7 2.263-1.324 2.685-.537.423.79-2.912 1.718-2.94 1.725-1.077.276-3.815.859-4.77-.522z" fill="#FFD21E"></path></svg>
\ No newline at end of file
diff --git a/llm_logo/huggingface-color.svg b/llm_logo/huggingface-color.svg
new file mode 100644
index 00000000..dc1cf3ff
--- /dev/null
+++ b/llm_logo/huggingface-color.svg
@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>HuggingFace</title><path d="M2.25 11.535c0-3.407 1.847-6.554 4.844-8.258a9.822 9.822 0 019.687 0c2.997 1.704 4.844 4.851 4.844 8.258 0 5.266-4.337 9.535-9.687 9.535S2.25 16.8 2.25 11.535z" fill="#FF9D0B"></path><path d="M11.938 20.086c4.797 0 8.687-3.829 8.687-8.551 0-4.722-3.89-8.55-8.687-8.55-4.798 0-8.688 3.828-8.688 8.55 0 4.722 3.89 8.55 8.688 8.55z" fill="#FFD21E"></path><path d="M11.875 15.113c2.457 0 3.25-2.156 3.25-3.263 0-.576-.393-.394-1.023-.089-.582.283-1.365.675-2.224.675-1.798 0-3.25-1.693-3.25-.586 0 1.107.79 3.263 3.25 3.263h-.003z" fill="#FF323D"></path><path d="M14.76 9.21c.32.108.445.753.767.585.447-.233.707-.708.659-1.204a1.235 1.235 0 00-.879-1.059 1.262 1.262 0 00-1.33.394c-.322.384-.377.92-.14 1.36.153.283.638-.177.925-.079l-.002.003zm-5.887 0c-.32.108-.448.753-.768.585a1.226 1.226 0 01-.658-1.204c.048-.495.395-.913.878-1.059a1.262 1.262 0 011.33.394c.322.384.377.92.14 1.36-.152.283-.64-.177-.925-.079l.003.003zm1.12 5.34a2.166 2.166 0 011.325-1.106c.07-.02.144.06.219.171l.192.306c.069.1.139.175.209.175.074 0 .15-.074.223-.172l.205-.302c.08-.11.157-.188.234-.165.537.168.986.536 1.25 1.026.932-.724 1.275-1.905 1.275-2.633 0-.508-.306-.426-.81-.19l-.616.296c-.52.24-1.148.48-1.824.48-.676 0-1.302-.24-1.823-.48l-.589-.283c-.52-.248-.838-.342-.838.177 0 .703.32 1.831 1.187 2.56l.18.14z" fill="#3A3B45"></path><path d="M17.812 10.366a.806.806 0 00.813-.8c0-.441-.364-.8-.813-.8a.806.806 0 00-.812.8c0 .442.364.8.812.8zm-11.624 0a.806.806 0 00.812-.8c0-.441-.364-.8-.812-.8a.806.806 0 00-.813.8c0 .442.364.8.813.8zM4.515 13.073c-.405 0-.765.162-1.017.46a1.455 1.455 0 00-.333.925 1.801 1.801 0 00-.485-.074c-.387 0-.737.146-.985.409a1.41 1.41 0 00-.2 1.722 1.302 1.302 0 00-.447.694c-.06.222-.12.69.2 1.166a1.267 1.267 0 00-.093 1.236c.238.533.81.958 1.89 1.405l.24.096c.768.3 1.473.492 1.478.494.89.243 1.808.375 2.732.394 1.465 0 2.513-.443 3.115-1.314.93-1.342.842-2.575-.274-3.763l-.151-.154c-.692-.684-1.155-1.69-1.25-1.912-.195-.655-.71-1.383-1.562-1.383-.46.007-.889.233-1.15.605-.25-.31-.495-.553-.715-.694a1.87 1.87 0 00-.993-.312zm14.97 0c.405 0 .767.162 1.017.46.216.262.333.588.333.925.158-.047.322-.071.487-.074.388 0 .738.146.985.409a1.41 1.41 0 01.2 1.722c.22.178.377.422.445.694.06.222.12.69-.2 1.166.244.37.279.836.093 1.236-.238.533-.81.958-1.889 1.405l-.239.096c-.77.3-1.475.492-1.48.494-.89.243-1.808.375-2.732.394-1.465 0-2.513-.443-3.115-1.314-.93-1.342-.842-2.575.274-3.763l.151-.154c.695-.684 1.157-1.69 1.252-1.912.195-.655.708-1.383 1.56-1.383.46.007.889.233 1.15.605.25-.31.495-.553.718-.694.244-.162.523-.265.814-.3l.176-.012z" fill="#FF9D0B"></path><path d="M9.785 20.132c.688-.994.638-1.74-.305-2.667-.945-.928-1.495-2.288-1.495-2.288s-.205-.788-.672-.714c-.468.074-.81 1.25.17 1.971.977.721-.195 1.21-.573.534-.375-.677-1.405-2.416-1.94-2.751-.532-.332-.907-.148-.782.541.125.687 2.357 2.35 2.14 2.707-.218.362-.983-.42-.983-.42S2.953 14.9 2.43 15.46c-.52.558.398 1.026 1.7 1.803 1.308.778 1.41.985 1.225 1.28-.187.295-3.07-2.1-3.34-1.083-.27 1.011 2.943 1.304 2.745 2.006-.2.7-2.265-1.324-2.685-.537-.425.79 2.913 1.718 2.94 1.725 1.075.276 3.813.859 4.77-.522zm4.432 0c-.687-.994-.64-1.74.305-2.667.943-.928 1.493-2.288 1.493-2.288s.205-.788.675-.714c.465.074.807 1.25-.17 1.971-.98.721.195 1.21.57.534.377-.677 1.407-2.416 1.94-2.751.532-.332.91-.148.782.541-.125.687-2.355 2.35-2.137 2.707.215.362.98-.42.98-.42S21.05 14.9 21.57 15.46c.52.558-.395 1.026-1.7 1.803-1.308.778-1.408.985-1.225 1.28.187.295 3.07-2.1 3.34-1.083.27 1.011-2.94 1.304-2.743 2.006.2.7 2.263-1.324 2.685-.537.423.79-2.912 1.718-2.94 1.725-1.077.276-3.815.859-4.77-.522z" fill="#FFD21E"></path></svg>
\ No newline at end of file