diff --git a/Unsloth_Studio_Colab.ipynb b/Unsloth_Studio_Colab.ipynb index fb2ca72604..7778b2254a 100644 --- a/Unsloth_Studio_Colab.ipynb +++ b/Unsloth_Studio_Colab.ipynb @@ -63,7 +63,7 @@ "\n", "import os\n", "github_token = os.environ['GITHUB_TOKEN']\n", - "!git clone -b feature/colab-notebook https://{github_token}@github.com/unslothai/new-ui-prototype.git\n", + "!git clone https://{github_token}@github.com/unslothai/new-ui-prototype.git\n", "%cd /content/new-ui-prototype\n", "\n", "# Run setup script\n", diff --git a/setup.sh b/setup.sh index 2db0c7f5a5..b54f782ded 100755 --- a/setup.sh +++ b/setup.sh @@ -58,6 +58,7 @@ fi if [ "$NEED_NODE" = true ]; then # ── 2. Install nvm ── + export NODE_OPTIONS=--dns-result-order=ipv4first # or else fails on colab. echo "Installing nvm..." curl -so- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash > /dev/null 2>&1 diff --git a/studio/backend/core/inference/inference.py b/studio/backend/core/inference/inference.py index 99a7c485e7..6423e7a128 100644 --- a/studio/backend/core/inference/inference.py +++ b/studio/backend/core/inference/inference.py @@ -107,6 +107,23 @@ class InferenceBackend: # Apply inference optimization FastVisionModel.for_inference(model) + # FastVisionModel may return a raw tokenizer (e.g. GemmaTokenizerFast) + # instead of a proper Processor for some models (e.g. Gemma-3). + # In that case, load the real processor from the base model. + from transformers import ProcessorMixin + if not (isinstance(processor, ProcessorMixin) or hasattr(processor, "image_processor")): + processor_source = config.base_model if config.is_lora else config.identifier + logger.warning( + f"FastVisionModel returned {type(processor).__name__} (no image_processor) " + f"for '{model_name}' — loading proper processor from '{processor_source}'" + ) + from transformers import AutoProcessor + processor = AutoProcessor.from_pretrained( + processor_source, + token=hf_token if hf_token and hf_token.strip() else None, + ) + logger.info(f"Loaded {type(processor).__name__} from {processor_source}") + self.models[model_name]["model"] = model self.models[model_name]["tokenizer"] = processor self.models[model_name]["processor"] = processor @@ -574,59 +591,78 @@ class InferenceBackend: model_info = self.models[self.active_model_name] is_vision = model_info.get("is_vision", False) tokenizer = model_info.get("tokenizer") or model_info.get("processor") + # Unwrap processor → raw tokenizer for VLMs on the text path + tokenizer = getattr(tokenizer, "tokenizer", tokenizer) top_k = self._normalize_top_k(top_k) - if is_vision: - # Vision model generation - yield from self._generate_vision_response( - messages, system_prompt, image, - temperature, top_p, top_k, min_p, max_new_tokens, repetition_penalty, - cancel_event=cancel_event, + if is_vision and image: + # Vision model generation (only when an image is actually provided) + # Check that the stored processor can actually handle images. + # FastVisionModel may return a raw tokenizer (e.g. GemmaTokenizerFast) + # instead of a proper ProcessorMixin for some models (e.g. Gemma-3). + from transformers import ProcessorMixin + processor = model_info.get("processor") + has_image_processing = ( + processor is not None + and (isinstance(processor, ProcessorMixin) or hasattr(processor, "image_processor")) ) - else: - # Text model: Use training pipeline approach - # Messages are already in ChatML format from eval.py - - # Step 1: Apply get_chat_template if model is in mapper - try: - from utils.datasets import MODEL_TO_TEMPLATE_MAPPER, get_tokenizer_chat_template - - model_name_lower = self.active_model_name.lower() - - # Check if model has a registered template - if model_name_lower in MODEL_TO_TEMPLATE_MAPPER: - template_name = MODEL_TO_TEMPLATE_MAPPER[model_name_lower] - logger.info(f"Applying chat template '{template_name}' for {self.active_model_name}") - - # This modifies the tokenizer with the correct template - tokenizer = get_chat_template( - tokenizer, - self.active_model_name - ) - else: - logger.info(f"No registered template for {self.active_model_name}, using tokenizer default") - except Exception as e: - logger.warning(f"Could not apply get_chat_template: {e}") - - # Step 2: Format with tokenizer.apply_chat_template() - try: - formatted_prompt = tokenizer.apply_chat_template( - messages, - tokenize=False, - add_generation_prompt=True + if has_image_processing: + yield from self._generate_vision_response( + messages, system_prompt, image, + temperature, top_p, top_k, min_p, max_new_tokens, repetition_penalty, + cancel_event=cancel_event, + ) + return + else: + logger.warning( + f"Model '{self.active_model_name}' is marked as vision but its processor " + f"({type(processor).__name__}) has no image_processor — " + f"falling back to text-only generation (image will be ignored)." ) - logger.debug(f"Formatted prompt: {formatted_prompt[:200]}...") - except Exception as e: - logger.error(f"Error applying chat template: {e}") - # Fallback to manual formatting - formatted_prompt = self.format_chat_prompt(messages, system_prompt) - # Step 3: Generate - yield from self.generate_stream( - formatted_prompt, temperature, top_p, top_k, min_p, max_new_tokens, repetition_penalty, - cancel_event=cancel_event, - _adapter_state=_adapter_state, + # Text path: Use training pipeline approach + # Messages are already in ChatML format from eval.py + + # Step 1: Apply get_chat_template if model is in mapper + try: + from utils.datasets import MODEL_TO_TEMPLATE_MAPPER, get_tokenizer_chat_template + + model_name_lower = self.active_model_name.lower() + + # Check if model has a registered template + if model_name_lower in MODEL_TO_TEMPLATE_MAPPER: + template_name = MODEL_TO_TEMPLATE_MAPPER[model_name_lower] + logger.info(f"Applying chat template '{template_name}' for {self.active_model_name}") + + # This modifies the tokenizer with the correct template + tokenizer = get_chat_template( + tokenizer, + chat_template=template_name, + ) + else: + logger.info(f"No registered template for {self.active_model_name}, using tokenizer default") + except Exception as e: + logger.warning(f"Could not apply get_chat_template: {e}") + + # Step 2: Format with tokenizer.apply_chat_template() + try: + formatted_prompt = tokenizer.apply_chat_template( + messages, + tokenize=False, + add_generation_prompt=True ) + logger.debug(f"Formatted prompt: {formatted_prompt[:200]}...") + except Exception as e: + logger.error(f"Error applying chat template: {e}") + # Fallback to manual formatting + formatted_prompt = self.format_chat_prompt(messages, system_prompt) + + # Step 3: Generate + yield from self.generate_stream( + formatted_prompt, temperature, top_p, top_k, min_p, max_new_tokens, repetition_penalty, + cancel_event=cancel_event, + _adapter_state=_adapter_state, + ) def _generate_vision_response(self, messages, system_prompt, image, temperature, top_p, top_k, min_p, max_new_tokens, @@ -635,6 +671,9 @@ class InferenceBackend: model_info = self.models[self.active_model_name] model = model_info["model"] processor = model_info["processor"] + # FastVisionModel may return a raw tokenizer (e.g. GemmaTokenizerFast) + # instead of a Processor for some models. Safe unwrap for tokenize-only ops. + raw_tokenizer = getattr(processor, "tokenizer", processor) # Extract user message user_message = "" @@ -658,7 +697,7 @@ class InferenceBackend: } ] - input_text = processor.apply_chat_template(vision_messages, add_generation_prompt=True) + input_text = processor.apply_chat_template(vision_messages, add_generation_prompt=True, tokenize=False) inputs = processor( image, input_text, @@ -668,7 +707,7 @@ class InferenceBackend: else: # Text-only for vision model formatted_prompt = self.format_chat_prompt(messages, system_prompt) - inputs = processor.tokenizer(formatted_prompt, return_tensors="pt").to(self.device) + inputs = raw_tokenizer(formatted_prompt, return_tensors="pt").to(self.device) # Stream with TextIteratorStreamer + background thread try: @@ -676,7 +715,7 @@ class InferenceBackend: import threading streamer = TextIteratorStreamer( - processor.tokenizer, + raw_tokenizer, skip_prompt=True, skip_special_tokens=True, timeout=0.2, @@ -766,7 +805,11 @@ class InferenceBackend: model_info = self.models[self.active_model_name] model = model_info["model"] + # For VLMs the stored "tokenizer" is actually the processor. + # Unwrap to get the real tokenizer so TextIteratorStreamer's + # skip_prompt / skip_special_tokens work correctly. tokenizer = model_info["tokenizer"] + tokenizer = getattr(tokenizer, "tokenizer", tokenizer) try: inputs = tokenizer(prompt, return_tensors="pt").to(model.device) @@ -876,6 +919,7 @@ class InferenceBackend: chat_template_info = self.models[self.active_model_name].get("chat_template_info", {}) tokenizer = self.models[self.active_model_name]["tokenizer"] + tokenizer = getattr(tokenizer, "tokenizer", tokenizer) chat_messages = [] @@ -1116,24 +1160,13 @@ class InferenceBackend: return img def _clean_generated_text(self, text: str) -> str: - import re - - text = re.sub(r'<\|start_header_id\|>.*?<\|end_header_id\|>', '', text) - text = re.sub(r'<\|eot_id\|>', '', text) - text = re.sub(r'<\|begin_of_text\|>', '', text) - - text = re.sub(r'\[INST\].*?\[/INST\]', '', text) - text = re.sub(r'|', '', text) - - # Clean ChatML tokens (used by Qwen2-VL and similar models) - text = re.sub(r'<\|im_start\|>.*?<\|im_end\|>', '', text) - text = re.sub(r'<\|im_end\|>', '', text) - text = re.sub(r'<\|im_start\|>', '', text) - - text = re.sub(r'^\s*(assistant|user|system):\s*', '', text, flags=re.IGNORECASE) - text = text.strip() - - return text + """Strip leaked special tokens using the tokenizer's own token list.""" + tokenizer = self.models.get(self.active_model_name, {}).get("tokenizer") + if tokenizer: + for token in getattr(tokenizer, "all_special_tokens", []): + if token in text: + text = text.replace(token, "") + return text.strip() def _load_chat_template_info(self, model_name: str): if model_name not in self.models or not self.models[model_name].get("tokenizer"): diff --git a/studio/backend/requirements/extras-no-deps.txt b/studio/backend/requirements/extras-no-deps.txt index c2a9c6bad8..b78b479e51 100644 --- a/studio/backend/requirements/extras-no-deps.txt +++ b/studio/backend/requirements/extras-no-deps.txt @@ -11,3 +11,4 @@ git+https://github.com/meta-pytorch/OpenEnv.git executorch==1.0.1 torch-c-dlpack-ext sentence_transformers==5.2.0 +transformers==4.57.1 diff --git a/studio/backend/requirements/overrides.txt b/studio/backend/requirements/overrides.txt index 02770f3953..6852f601ed 100644 --- a/studio/backend/requirements/overrides.txt +++ b/studio/backend/requirements/overrides.txt @@ -1,6 +1,5 @@ # Torch AO overrides (installed with --force-reinstall --no-cache-dir) torchao==0.14.0 -transformers==4.57.1 pytorch_tokenizers # Kernel packages diff --git a/studio/backend/requirements/studio.txt b/studio/backend/requirements/studio.txt index fd7da2626d..6a732664d2 100644 --- a/studio/backend/requirements/studio.txt +++ b/studio/backend/requirements/studio.txt @@ -11,3 +11,4 @@ pyjwt easydict addict gradio>=4.0.0 +huggingface-hub==0.36.0 \ No newline at end of file diff --git a/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx b/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx index b90cdd0e3b..fc579dd32a 100644 --- a/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx +++ b/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx @@ -1,7 +1,20 @@ import { Input } from "@/components/ui/input"; import { Spinner } from "@/components/ui/spinner"; -import { useDebouncedValue, useHfModelSearch, useInfiniteScroll } from "@/hooks"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/components/ui/tooltip"; +import { + useDebouncedValue, + useGpuInfo, + useHfModelSearch, + useInfiniteScroll, + useRecommendedModelVram, +} from "@/hooks"; import { cn, formatCompact } from "@/lib/utils"; +import type { VramFitStatus } from "@/lib/vram"; +import { checkVramFit, estimateLoadingVram } from "@/lib/vram"; import { Search01Icon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { useMemo, useState, type ReactNode } from "react"; @@ -28,27 +41,77 @@ function ModelRow({ meta, selected, onClick, + vramStatus, + vramEst, + gpuGb, }: { label: string; meta?: string; selected?: boolean; onClick: () => void; + vramStatus?: VramFitStatus | null; + vramEst?: number; + gpuGb?: number; }) { - return ( + const exceeds = vramStatus === "exceeds"; + const showVramTooltip = + vramEst != null && vramEst > 0 && gpuGb != null && gpuGb > 0; + const vramTooltipText = + showVramTooltip && vramStatus + ? exceeds + ? `Needs ~${vramEst}GB VRAM (GPU: ${gpuGb}GB)` + : vramStatus === "tight" + ? `~${vramEst}GB VRAM (tight fit on ${gpuGb}GB)` + : `~${vramEst}GB VRAM` + : null; + + const content = ( ); + + if (vramTooltipText) { + return ( + + {content} + + {label} + {vramTooltipText} + + + ); + } + return content; } export function HubModelPicker({ @@ -60,6 +123,7 @@ export function HubModelPicker({ value?: string; onSelect: (id: string, meta: ModelSelectorChangeMeta) => void; }) { + const gpu = useGpuInfo(); const [query, setQuery] = useState(""); const debouncedQuery = useDebouncedValue(query); const { results, isLoading, isLoadingMore, fetchMore } = useHfModelSearch( @@ -71,6 +135,9 @@ export function HubModelPicker({ [models, value], ); + const { paramCountById: recommendedParamCountById } = + useRecommendedModelVram(recommendedIds); + const showHfSection = debouncedQuery.trim().length > 0; const recommendedSet = useMemo(() => new Set(recommendedIds), [recommendedIds]); @@ -94,6 +161,49 @@ export function HubModelPicker({ [results], ); + const vramMap = useMemo(() => { + const map = new Map< + string, + { est: number; status: VramFitStatus | null; detail: string | null } + >(); + for (const r of results) { + const detail = r.totalParams + ? formatCompact(r.totalParams) + : r.downloads != null + ? `↓${formatCompact(r.downloads)}` + : null; + if (r.totalParams) { + const est = estimateLoadingVram(r.totalParams, "qlora"); + const status = gpu.available + ? checkVramFit(est, gpu.memoryTotalGb) + : null; + map.set(r.id, { est, status, detail }); + } else { + map.set(r.id, { est: 0, status: null, detail }); + } + } + return map; + }, [results, gpu]); + + const recommendedVramMap = useMemo(() => { + const map = new Map< + string, + { est: number; status: VramFitStatus | null; detail: string | null } + >(); + for (const id of recommendedIds) { + const totalParams = recommendedParamCountById.get(id); + if (totalParams) { + const est = estimateLoadingVram(totalParams, "qlora"); + const status = gpu.available + ? checkVramFit(est, gpu.memoryTotalGb) + : null; + const detail = formatCompact(totalParams); + map.set(id, { est, status, detail }); + } + } + return map; + }, [recommendedIds, recommendedParamCountById, gpu]); + const { scrollRef, sentinelRef } = useInfiniteScroll(fetchMore, results.length); return ( @@ -124,14 +234,23 @@ export function HubModelPicker({ No default models. ) : ( - recommendedIds.map((id) => ( - onSelect(id, { source: "hub", isLora: false })} - /> - )) + recommendedIds.map((id) => { + const vram = recommendedVramMap.get(id); + return ( + + onSelect(id, { source: "hub", isLora: false }) + } + vramStatus={vram?.status ?? null} + vramEst={vram?.est} + gpuGb={gpu.available ? gpu.memoryTotalGb : undefined} + /> + ); + }) )} ) : null} @@ -144,15 +263,23 @@ export function HubModelPicker({ No matching models. ) : ( - hfIds.map((id) => ( - onSelect(id, { source: "hub", isLora: false })} - /> - )) + hfIds.map((id) => { + const vram = vramMap.get(id); + return ( + + onSelect(id, { source: "hub", isLora: false }) + } + vramStatus={vram?.status ?? null} + vramEst={vram?.est} + gpuGb={gpu.available ? gpu.memoryTotalGb : undefined} + /> + ); + }) )}
{isLoadingMore ? ( diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx index c109c92ead..aaaca0eeb3 100644 --- a/studio/frontend/src/components/assistant-ui/thread.tsx +++ b/studio/frontend/src/components/assistant-ui/thread.tsx @@ -8,6 +8,7 @@ import { Reasoning, ReasoningGroup } from "@/components/assistant-ui/reasoning"; import { ToolFallback } from "@/components/assistant-ui/tool-fallback"; import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button"; import { Button } from "@/components/ui/button"; +import { copyToClipboard } from "@/lib/copy-to-clipboard"; import { cn } from "@/lib/utils"; import { ActionBarMorePrimitive, @@ -38,7 +39,7 @@ import { RefreshCwIcon, SquareIcon, } from "lucide-react"; -import { type FC, useRef } from "react"; +import { type FC, useRef, useState } from "react"; export const Thread: FC<{ hideComposer?: boolean; hideWelcome?: boolean }> = ({ hideComposer, @@ -275,6 +276,32 @@ const AssistantMessage: FC = () => { ); }; +const COPY_RESET_MS = 2000; + +const CopyButton: FC = () => { + const aui = useAui(); + const [copied, setCopied] = useState(false); + const resetTimeoutRef = useRef | null>(null); + + const handleCopy = () => { + const text = aui.message().getCopyText(); + if (copyToClipboard(text)) { + setCopied(true); + if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current); + resetTimeoutRef.current = setTimeout(() => { + setCopied(false); + resetTimeoutRef.current = null; + }, COPY_RESET_MS); + } + }; + + return ( + + {copied ? : } + + ); +}; + const AssistantActionBar: FC = () => { return ( { autohideFloat="single-branch" className="aui-assistant-action-bar-root col-start-3 row-start-2 -ml-1 flex gap-1 text-muted-foreground data-floating:absolute data-floating:rounded-md data-floating:border data-floating:bg-background data-floating:p-1 data-floating:shadow-sm" > - - - message.isCopied}> - - - !message.isCopied}> - - - - + @@ -352,16 +370,7 @@ const UserActionBar: FC = () => { autohide="not-last" className="aui-user-action-bar-root flex items-center" > - - - message.isCopied}> - - - !message.isCopied}> - - - - + diff --git a/studio/frontend/src/components/navbar.tsx b/studio/frontend/src/components/navbar.tsx index db293a80e1..7b93bd46f3 100644 --- a/studio/frontend/src/components/navbar.tsx +++ b/studio/frontend/src/components/navbar.tsx @@ -59,7 +59,7 @@ export function Navbar() { }; return ( -
+
{/* Left: logo */}
= [ + { value: "adamw_8bit", label: "AdamW 8-bit" }, + { value: "paged_adamw_8bit", label: "Paged AdamW 8-bit" }, + { value: "adamw_bnb_8bit", label: "AdamW BNB 8-bit" }, + { value: "paged_adamw_32bit", label: "Paged AdamW 32-bit" }, + { value: "adamw_torch", label: "AdamW (PyTorch)" }, + { value: "adamw_torch_fused", label: "AdamW (PyTorch Fused)" }, +]; + +export const LR_SCHEDULER_OPTIONS: ReadonlyArray<{ value: string; label: string }> = [ + { value: "linear", label: "Linear" }, + { value: "cosine", label: "Cosine" }, +]; + export const DEFAULT_HYPERPARAMS = { epochs: 3, contextLength: 2048, learningRate: 2e-4, + optimizerType: "adamw_8bit", + lrSchedulerType: "linear", loraRank: 16, loraAlpha: 32, loraDropout: 0.05, diff --git a/studio/frontend/src/features/chat/api/chat-adapter.ts b/studio/frontend/src/features/chat/api/chat-adapter.ts index 8997570271..af8f10156f 100644 --- a/studio/frontend/src/features/chat/api/chat-adapter.ts +++ b/studio/frontend/src/features/chat/api/chat-adapter.ts @@ -65,6 +65,15 @@ function findLatestUserImageBase64(messages: RunMessages): string | undefined { continue; } + // Image in message.content (e.g. compare view appends content with image parts) + for (const part of message.content ?? []) { + if (part.type === "image" && "image" in part) { + const encoded = extractImageBase64(part.image); + if (encoded) return encoded; + } + } + + // Image in message.attachments (e.g. chat composer) if ("attachments" in message && (message.attachments?.length ?? 0) > 0) { for (const attachment of message.attachments ?? []) { for (const part of attachment.content ?? []) { @@ -159,7 +168,7 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter { if (abortSignal.aborted) return; warmupToastShown = true; toast.promise(firstTokenPromise, { - loading: "Warming up model", + loading: "Generating", success: "Generating", error: (err) => err instanceof Error && err.message ? err.message : "Generation failed", diff --git a/studio/frontend/src/features/chat/chat-page.tsx b/studio/frontend/src/features/chat/chat-page.tsx index 34443ec87f..1184183088 100644 --- a/studio/frontend/src/features/chat/chat-page.tsx +++ b/studio/frontend/src/features/chat/chat-page.tsx @@ -5,6 +5,7 @@ import { } from "@/components/assistant-ui/model-selector"; import { Thread } from "@/components/assistant-ui/thread"; import { Button } from "@/components/ui/button"; +import { Spinner } from "@/components/ui/spinner"; import { SidebarProvider, SidebarTrigger, useSidebar } from "@/components/ui/sidebar"; import { Sheet, @@ -283,7 +284,8 @@ export function ChatPage(): ReactElement { const modelsFromStore = useChatRuntimeStore((state) => state.models); const lorasFromStore = useChatRuntimeStore((state) => state.loras); const modelsError = useChatRuntimeStore((state) => state.modelsError); - const { refresh, selectModel, ejectModel } = useChatModelRuntime(); + const { refresh, selectModel, ejectModel, loadingModel } = + useChatModelRuntime(); const refreshRef = useRef(refresh); const selectModelRef = useRef(selectModel); @@ -518,6 +520,17 @@ export function ChatPage(): ReactElement { contentDataTour="chat-model-selector-popover" className="max-w-[62vw] sm:max-w-none" /> + {loadingModel ? ( +
+ + + Downloading model… + +
+ ) : null}
{modelsError && (
diff --git a/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts b/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts index 03aba01736..961967cc9c 100644 --- a/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts +++ b/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts @@ -1,4 +1,4 @@ -import { useCallback } from "react"; +import { useCallback, useState } from "react"; import { toast } from "sonner"; import { getInferenceStatus, @@ -116,6 +116,11 @@ export function useChatModelRuntime() { const setCheckpoint = useChatRuntimeStore((state) => state.setCheckpoint); const clearCheckpoint = useChatRuntimeStore((state) => state.clearCheckpoint); + const [loadingModel, setLoadingModel] = useState<{ + id: string; + displayName: string; + } | null>(null); + const refresh = useCallback(async () => { setModelsError(null); try { @@ -157,6 +162,7 @@ export function useChatModelRuntime() { const displayName = model?.name || lora?.name || modelId; setModelsError(null); + setLoadingModel({ id: modelId, displayName }); try { async function performLoad(): Promise { if (params.checkpoint) { @@ -176,19 +182,20 @@ export function useChatModelRuntime() { await refresh(); } - let description = "Base model selected."; - if (isLora) { - description = "Fine-tuned (LoRA) selected."; - } + const loadPromise = performLoad().finally(() => { + setLoadingModel(null); + }); - await toast.promise(performLoad(), { - loading: `Loading ${displayName}`, + await toast.promise(loadPromise, { + loading: "Loading model…", success: `${displayName} loaded`, error: (err) => err instanceof Error ? err.message : "Failed to load model", - description, + description: + "This may include downloading. Large models can take a while.", }); } catch (error) { + setLoadingModel(null); const message = error instanceof Error ? error.message : "Failed to load model"; setModelsError(message); @@ -227,5 +234,6 @@ export function useChatModelRuntime() { refresh, selectModel, ejectModel, + loadingModel, }; } diff --git a/studio/frontend/src/features/chat/shared-composer.tsx b/studio/frontend/src/features/chat/shared-composer.tsx index f849d3f5b7..6b3fc29d9e 100644 --- a/studio/frontend/src/features/chat/shared-composer.tsx +++ b/studio/frontend/src/features/chat/shared-composer.tsx @@ -1,25 +1,102 @@ import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button"; import { Button } from "@/components/ui/button"; import { useAui } from "@assistant-ui/react"; -import { ArrowUpIcon, SquareIcon } from "lucide-react"; +import { ArrowUpIcon, MicIcon, PlusIcon, SquareIcon, XIcon } from "lucide-react"; import { type KeyboardEvent, type MutableRefObject, type ReactElement, type ReactNode, createContext, + useCallback, useContext, useEffect, useRef, useState, } from "react"; +export type CompareMessagePart = + | { type: "text"; text: string } + | { type: "image"; image: string }; + export interface CompareHandle { - append: (content: { type: "text"; text: string }[]) => void; + append: (content: CompareMessagePart[]) => void; cancel: () => void; isRunning: () => boolean; } +const IMAGE_ACCEPT = "image/jpeg,image/png,image/webp,image/gif"; +const MAX_IMAGE_SIZE = 20 * 1024 * 1024; + +function fileToBase64DataURL(file: File): Promise { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => resolve(reader.result as string); + reader.onerror = () => reject(new Error("Failed to read image file")); + reader.readAsDataURL(file); + }); +} + +function useDictation( + setText: (value: string | ((prev: string) => string)) => void, +) { + const [isDictating, setIsDictating] = useState(false); + const recognitionRef = useRef(null); + + const start = useCallback(() => { + const SpeechRecognitionAPI = + typeof window !== "undefined" && + (window.SpeechRecognition ?? (window as unknown as { webkitSpeechRecognition?: typeof SpeechRecognition }).webkitSpeechRecognition); + if (!SpeechRecognitionAPI) { + return; + } + const recognition = new SpeechRecognitionAPI() as SpeechRecognition; + recognition.continuous = true; + recognition.interimResults = true; + recognition.lang = "en-US"; + recognition.onresult = (event: SpeechRecognitionEvent) => { + const last = event.resultIndex; + const result = event.results[last]; + if (!result?.isFinal) return; + const transcript = result[0]?.transcript?.trim(); + if (transcript) { + setText((prev) => (prev ? `${prev} ${transcript}` : transcript)); + } + }; + recognition.onerror = () => { + setIsDictating(false); + }; + recognition.onend = () => { + setIsDictating(false); + }; + recognition.start(); + recognitionRef.current = recognition; + setIsDictating(true); + }, [setText]); + + const stop = useCallback(() => { + if (recognitionRef.current) { + recognitionRef.current.stop(); + recognitionRef.current = null; + } + setIsDictating(false); + }, []); + + useEffect(() => { + return () => { + if (recognitionRef.current) { + recognitionRef.current.abort(); + } + }; + }, []); + + const supported = + typeof window !== "undefined" && + !!(window.SpeechRecognition ?? (window as unknown as { webkitSpeechRecognition?: unknown }).webkitSpeechRecognition); + + return { isDictating, start, stop, supported }; +} + export type CompareHandles = MutableRefObject>; const CompareHandlesContext = createContext(null); @@ -66,6 +143,37 @@ export function RegisterCompareHandle({ return null; } +type PendingImage = { id: string; file: File }; + +function PendingImageThumb({ + file, + onRemove, +}: { + file: File; + onRemove: () => void; +}): ReactElement { + const [src, setSrc] = useState(null); + useEffect(() => { + const url = URL.createObjectURL(file); + setSrc(url); + return () => URL.revokeObjectURL(url); + }, [file]); + if (!src) return
; + return ( +
+ {file.name} + +
+ ); +} + export function SharedComposer({ handlesRef, }: { @@ -73,7 +181,14 @@ export function SharedComposer({ }): ReactElement { const [text, setText] = useState(""); const [running, setRunning] = useState(false); + const [pendingImages, setPendingImages] = useState([]); + const [dragging, setDragging] = useState(false); const textareaRef = useRef(null); + const fileInputRef = useRef(null); + + const { isDictating, start: startDictation, stop: stopDictation, supported: dictationSupported } = useDictation( + setText, + ); useEffect(() => { const id = setInterval(() => { @@ -84,23 +199,50 @@ export function SharedComposer({ return () => clearInterval(id); }, [handlesRef]); - function send() { - const msg = text.trim(); - if (!msg) { - return; + const addFiles = useCallback((files: FileList | null) => { + if (!files?.length) return; + const next: PendingImage[] = []; + for (let i = 0; i < files.length; i++) { + const file = files[i]; + if (!file?.type.match(/^image\/(jpeg|png|webp|gif)$/i)) continue; + if (file.size > MAX_IMAGE_SIZE) continue; + next.push({ id: crypto.randomUUID(), file }); } + setPendingImages((prev) => [...prev, ...next]); + }, []); + + const removePendingImage = useCallback((id: string) => { + setPendingImages((prev) => prev.filter((p) => p.id !== id)); + }, []); + + async function send() { + const msg = text.trim(); + if (!msg && pendingImages.length === 0) return; + + const content: CompareMessagePart[] = []; + for (const { file } of pendingImages) { + try { + const image = await fileToBase64DataURL(file); + content.push({ type: "image", image }); + } catch { + // skip failed image + } + } + if (msg) { + content.push({ type: "text", text: msg }); + } + if (content.length === 0) return; - const content: { type: "text"; text: string }[] = [ - { type: "text", text: msg }, - ]; for (const handle of Object.values(handlesRef.current)) { handle.append(content); } setText(""); + setPendingImages([]); textareaRef.current?.focus(); } function stop() { + if (isDictating) stopDictation(); for (const handle of Object.values(handlesRef.current)) { handle.cancel(); } @@ -115,8 +257,33 @@ export function SharedComposer({ } } + const canSend = (text.trim().length > 0 || pendingImages.length > 0) && !running; + return ( -
+
{ + e.preventDefault(); + setDragging(true); + }} + onDragLeave={() => setDragging(false)} + onDrop={(e) => { + e.preventDefault(); + setDragging(false); + addFiles(e.dataTransfer.files); + }} + > + {pendingImages.length > 0 && ( +
+ {pendingImages.map(({ id, file }) => ( + removePendingImage(id)} + /> + ))} +
+ )}