Files
llama.cpp/tools/server/webui/src/lib/utils/convert-files-to-extra.ts
T
Aleksander GrygierandXuan Son Nguyen ab6120cde5 webui: Spring Cleaning Refactor v1 (#22505)
* wip: server_tools

* feat: Integrate with `/tools` endpoint

* feat: Builtin + MCP + JSON Schema Tools WIP

* refactor

* displayName -> display_name

* snake_case everywhere

* rm redundant field

* feat: Improvements

* chore: update webui build output

* refactor: Updates after server updates

* chore: update webui build output

* change arg to --tools all

* feat: UI improvements

* chore: update webui build output

* add readme mention

* llama-gen-docs

* chore: update webui build output

* chore: update webui build output

* chore: update webui build output

* feat: Reorganize settings sections

* feat: Separate dialogs for MCP Servers Settings and Import/Export

* feat: WIP

* feat: WIP

* feat: WIP

* feat: WIP

* feat: WIP

* feat: WIP

* WIP on allozaur/20677-webui-server-tools

* feat: UI improvements

* chore: Update package lock

* chore: Run `npm audit fix`

* feat: UI WIP

* feat: UI

* refactor: Desktop Icon Strip DRY

* feat: Cleaner rendering and transition for ChatScreen

* feat: UI improvements

* feat: UI improvement

* feat: Remove MCP Server "enable" switch from Tools submenu

* chore: Run `npm audit fix`

* feat: WIP

* feat: Logic improvements

* refactor: Cleanup

* refactor: DRY

* test: Fix Chat Sidebar UI Tests

* chore: Update package lock

* refactor: Cleanup

* feat: Chat Message Action Card with Continue and Permission flow implementations

* feat: Add agentic steering messages, draft messages and improve chat UX

* fix: Search results UI

* test: Fix unit test

* feat: UI/UX improvements

* refactor: Simplify `useToolsPanel` access in components

* feat: Implement Processing Info Context API

* feat: Implement 'Go back to chat' functionality for settings

* feat: Enhance MCP Server management in Chat Form Attachments

* style: Minor UI and branding adjustments

* chore: Update webui static build output

* chore: Formatting, linting & type checks

* feat: Draft messages logic

* feat: UI improvements

* feat: Steering Messages improvements

* refactor: Cleanup

* refactor: Cleanup

* feat: Improve UI

* refactor: Settings navigation hook

* refactor: DRY code

* refactor: DRY ChatMessageUser UI components

* refactor: Desktop Icon Strip DRY

* refactor: Tools & permissions

* fix: Navigation condition

* refactor: Cleanup

* refactor: Cleanup

* refactor: Cleanup

* fix: preserve reasoning_content in agentic flow

* refactor: Storybook cleanup

* refactor: isInViewport util function

* refactor: Rename globally `onClick` to `onclick`

* chore: `npm audit fix`

* refactor: Action Icon usage

* refactor: Naming

* refactor: JS in `class` directive

* refactor: Chat components cleanup WIP

* refactor: Components structure

* refactor: Cleanup WIP

* feat: New ChatAttachmentsPreview component

* feat: UI improvements

* feat: UI improvements

* refactor: Cleanup

* refactor: ChatAttachmentsPreview UI/UX

* refactor: Remove dead code

* refactor: Cleanup

* fix: Model Name aliases displaying

* feat: Shortcut improvements

* refactor: Chat Message

* feat: Move Import/Export to settings

* refactor: Cleanup

* refactor: Cleanup

* refactor: Cleanup

* refactor: Cleanup

---------

Co-authored-by: Xuan Son Nguyen <son@huggingface.co>
2026-05-01 18:36:29 +02:00

209 lines
6.1 KiB
TypeScript

import { convertPDFToImage, convertPDFToText } from './pdf-processing';
import { isSvgMimeType, svgBase64UrlToPngDataURL } from './svg-to-png';
import { isWebpMimeType, webpBase64UrlToPngDataURL } from './webp-to-png';
import { FileTypeCategory, AttachmentType, SpecialFileType } from '$lib/enums';
import { config, settingsStore } from '$lib/stores/settings.svelte';
import { modelsStore } from '$lib/stores/models.svelte';
import { getFileTypeCategory } from '$lib/utils';
import { readFileAsText, isLikelyTextFile } from './text-files';
import { toast } from 'svelte-sonner';
import type { FileProcessingResult, ChatUploadedFile, DatabaseMessageExtra } from '$lib/types';
function readFileAsBase64(file: File): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
// Extract base64 data without the data URL prefix
const dataUrl = reader.result as string;
const base64 = dataUrl.split(',')[1];
resolve(base64);
};
reader.onerror = () => reject(reader.error);
reader.readAsDataURL(file);
});
}
export async function parseFilesToMessageExtras(
files: ChatUploadedFile[],
activeModelId?: string
): Promise<FileProcessingResult> {
const extras: DatabaseMessageExtra[] = [];
const emptyFiles: string[] = [];
for (const file of files) {
if (file.type === SpecialFileType.MCP_PROMPT && file.mcpPrompt) {
extras.push({
type: AttachmentType.MCP_PROMPT,
name: file.name,
size: file.size,
serverName: file.mcpPrompt.serverName,
promptName: file.mcpPrompt.promptName,
content: file.textContent ?? '',
arguments: file.mcpPrompt.arguments
});
continue;
}
if (getFileTypeCategory(file.type) === FileTypeCategory.IMAGE) {
if (file.preview) {
let base64Url = file.preview;
if (isSvgMimeType(file.type)) {
try {
base64Url = await svgBase64UrlToPngDataURL(base64Url);
} catch (error) {
console.error('Failed to convert SVG to PNG for database storage:', error);
}
} else if (isWebpMimeType(file.type)) {
try {
base64Url = await webpBase64UrlToPngDataURL(base64Url);
} catch (error) {
console.error('Failed to convert WebP to PNG for database storage:', error);
}
}
extras.push({
type: AttachmentType.IMAGE,
name: file.name,
size: file.size,
base64Url
});
}
} else if (getFileTypeCategory(file.type) === FileTypeCategory.AUDIO) {
// Process audio files (MP3 and WAV)
try {
const base64Data = await readFileAsBase64(file.file);
extras.push({
type: AttachmentType.AUDIO,
name: file.name,
size: file.size,
base64Data: base64Data,
mimeType: file.type
});
} catch (error) {
console.error(`Failed to process audio file ${file.name}:`, error);
}
} else if (getFileTypeCategory(file.type) === FileTypeCategory.PDF) {
try {
// Always get base64 data for preview functionality
const base64Data = await readFileAsBase64(file.file);
const currentConfig = config();
// Use per-model vision check for router mode
const hasVisionSupport = activeModelId
? modelsStore.modelSupportsVision(activeModelId)
: false;
// Force PDF-to-text for non-vision models
let shouldProcessAsImages = Boolean(currentConfig.pdfAsImage) && hasVisionSupport;
// If user had pdfAsImage enabled but model doesn't support vision, update setting and notify
if (currentConfig.pdfAsImage && !hasVisionSupport) {
console.log('Non-vision model detected: forcing PDF-to-text mode and updating settings');
// Update the setting in localStorage
settingsStore.updateConfig('pdfAsImage', false);
// Show toast notification to user
toast.warning(
'PDF setting changed: Non-vision model detected, PDFs will be processed as text instead of images.',
{
duration: 5000
}
);
shouldProcessAsImages = false;
}
if (shouldProcessAsImages) {
// Process PDF as images (only for vision models)
try {
const images = await convertPDFToImage(file.file);
// Show success toast for PDF image processing
toast.success(
`PDF "${file.name}" processed as ${images.length} images for vision model.`,
{
duration: 3000
}
);
extras.push({
type: AttachmentType.PDF,
name: file.name,
size: file.size,
content: `PDF file with ${images.length} pages`,
images: images,
processedAsImages: true,
base64Data: base64Data
});
} catch (imageError) {
console.warn(
`Failed to process PDF ${file.name} as images, falling back to text:`,
imageError
);
// Fallback to text processing
const content = await convertPDFToText(file.file);
extras.push({
type: AttachmentType.PDF,
name: file.name,
size: file.size,
content: content,
processedAsImages: false,
base64Data: base64Data
});
}
} else {
// Process PDF as text (default or forced for non-vision models)
const content = await convertPDFToText(file.file);
// Show success toast for PDF text processing
toast.success(`PDF "${file.name}" processed as text content.`, {
duration: 3000
});
extras.push({
type: AttachmentType.PDF,
name: file.name,
size: file.size,
content: content,
processedAsImages: false,
base64Data: base64Data
});
}
} catch (error) {
console.error(`Failed to process PDF file ${file.name}:`, error);
}
} else {
try {
const content = await readFileAsText(file.file);
// Check if file is empty
if (content.trim() === '') {
console.warn(`File ${file.name} is empty and will be skipped`);
emptyFiles.push(file.name);
} else if (isLikelyTextFile(content)) {
extras.push({
type: AttachmentType.TEXT,
name: file.name,
size: file.size,
content: content
});
} else {
console.warn(`File ${file.name} appears to be binary and will be skipped`);
}
} catch (error) {
console.error(`Failed to read file ${file.name}:`, error);
}
}
}
return { extras, emptyFiles };
}