16 | {#if message.contentParts}
17 | {#each message.contentParts as part}
18 | 
23 | {/each}
24 | {/if}
25 |
27 | {:else if message.generatedImageUrl}
28 | {
35 | open = false;
36 | dispatch('close');
37 | }}
38 | />
39 |
17 |
45 |
--------------------------------------------------------------------------------
/src/stores.js:
--------------------------------------------------------------------------------
1 | import { writable, get } from 'svelte/store';
2 | import { persisted } from './localstorage.js';
3 | import { v4 as uuidv4 } from 'uuid';
4 | import { llumHostedAddress } from './sync.js';
5 |
6 | export const controller = writable(null);
7 |
8 | export const params = persisted('params', {
9 | temperature: 0.3,
10 | maxTokens: 0,
11 | messagesContextLimit: 0,
12 | reasoningEffort: {
13 | 'low-medium-high': 'high',
14 | range: 64000,
15 | },
16 | });
17 |
18 | export const config = persisted('config', {
19 | explicitToolView: false,
20 | });
21 |
22 | export const openaiAPIKey = persisted('openaiAPIKey', '');
23 | export const openrouterAPIKey = persisted('openrouterkey', '');
24 | export const anthropicAPIKey = persisted('anthropicAPIKey', '');
25 | export const groqAPIKey = persisted('groqAPIKey', '');
26 | export const mistralAPIKey = persisted('mistralAPIKey', '');
27 |
28 | export function getAPIKeysAsObject() {
29 | return {
30 | openai: get(openaiAPIKey),
31 | openrouter: get(openrouterAPIKey),
32 | anthropic: get(anthropicAPIKey),
33 | groq: get(groqAPIKey),
34 | mistral: get(mistralAPIKey),
35 | };
36 | }
37 |
38 | export function setAPIKeysFromObject(obj) {
39 | openaiAPIKey.set(obj.openai || '');
40 | openrouterAPIKey.set(obj.openrouter || '');
41 | anthropicAPIKey.set(obj.anthropic || '');
42 | groqAPIKey.set(obj.groq || '');
43 | mistralAPIKey.set(obj.mistral || '');
44 | }
45 |
46 | export const remoteServer = persisted('remoteServer', { address: 'http://localhost:8081', password: '' });
47 | export const syncServer = persisted('syncServer', {
48 | address: llumHostedAddress,
49 | token: uuidv4(),
50 | password: '',
51 | });
52 | export const toolSchema = persisted('toolSchemaGroups', []);
53 |
--------------------------------------------------------------------------------
/public/llum5.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/Choice.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 | 
12 | {:else if model.provider === 'Anthropic' || model.id.startsWith('anthropic')}
13 | 
19 | {:else if model.id.startsWith('meta-llama')}
20 | 
21 | {:else if model.provider === 'Mistral' || model.id.startsWith('mistralai')}
22 | 
23 | {:else if model.id.startsWith('cohere')}
24 | 
25 | {:else if model.provider === 'Groq'}
26 | 
27 | {:else if model.id.startsWith('nous')}
28 | 
29 | {:else if model.id.startsWith('google')}
30 | 
31 | {:else if model.id.startsWith('perplexity')}
32 | 
38 | {:else if model.id.startsWith('deepseek')}
39 | 
40 | {:else if model.id.startsWith('qwen')}
41 | 
42 | {/if}
43 | {/if}
44 |
--------------------------------------------------------------------------------
/public/logos/qwen.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/logos/perplexity.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
36 |
--------------------------------------------------------------------------------
/src/svelte-marked/markdown/markedConfiguration.ts:
--------------------------------------------------------------------------------
1 | import {
2 | MarkdownHeading,
3 | MarkdownBloquote,
4 | MarkdownList,
5 | MarkdownListItem,
6 | MarkdownBr,
7 | MarkdownCode,
8 | MarkdownCodeSpan,
9 | MarkdownTable,
10 | MarkdownHtml,
11 | MarkdownParagraph,
12 | MarkdownLink,
13 | MarkdownText,
14 | MarkdownDfn,
15 | MarkdownDel,
16 | MarkdownEm,
17 | MarkdownHr,
18 | MarkdownStrong,
19 | MarkdownImage,
20 | MarkdownSpace,
21 | MarkdownInlineKatex,
22 | MarkdownBlockKatex,
23 | } from './components';
24 |
25 | import { Lexer, type TokensList } from 'marked';
26 | import Slugger from 'github-slugger';
27 |
28 | export type MarkdownOptions = {
29 | /**
30 | * The base path to your application.
31 | * This is required when the application does not run in root context to generate the links properly.
32 | */
33 | baseUrl: `/${string}`;
34 |
35 | /**
36 | * The slugger used to generate header IDs in marked.
37 | *
38 | * It is discouraged to set this option, because the slugger needs to be re-created when the source is changed.
39 | */
40 | slugger: Slugger;
41 | };
42 |
43 | export function parse(src: string): TokensList {
44 | const lexer = new Lexer();
45 | return lexer.lex(src);
46 | }
47 |
48 | export type RendererType = string;
49 |
50 | export type Renderers = Record;
51 |
52 | export const defaultRenderers = (): Renderers => ({
53 | heading: MarkdownHeading,
54 | blockquote: MarkdownBloquote,
55 | list: MarkdownList,
56 | list_item: MarkdownListItem,
57 | br: MarkdownBr,
58 | code: MarkdownCode,
59 | codespan: MarkdownCodeSpan,
60 | table: MarkdownTable,
61 | html: MarkdownHtml,
62 | paragraph: MarkdownParagraph,
63 | link: MarkdownLink,
64 | text: MarkdownText,
65 | def: MarkdownDfn,
66 | del: MarkdownDel,
67 | em: MarkdownEm,
68 | hr: MarkdownHr,
69 | strong: MarkdownStrong,
70 | image: MarkdownImage,
71 | space: MarkdownSpace,
72 | escape: MarkdownSpace,
73 | inlineKatex: MarkdownInlineKatex,
74 | blockKatex: MarkdownBlockKatex,
75 | });
76 |
77 | export const defaultOptions = (): MarkdownOptions => ({
78 | baseUrl: '/',
79 | slugger: new Slugger(),
80 | });
81 |
--------------------------------------------------------------------------------
/src/ReasoningEffortRangeDropdown.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 | {
15 | if (!event.target.closest('#reasoning-effort-dropdown')) {
16 | open = false;
17 | }
18 | }}
19 | on:touchstart={(event) => {
20 | if (!event.target.closest('#reasoning-effort-dropdown')) {
21 | open = false;
22 | }
23 | }}
24 | />
25 |
26 | {#if open}
27 | {@const min = convo.models[0].reasoningEffortRange[0]}
28 | {@const max = convo.models[0].reasoningEffortRange[1]}
29 | } - A promise that resolves to the Data URL of the (resized) image.
6 | */
7 | export function readFileAsDataURL(file) {
8 | const MAX_DIMENSION = 1568; // Maximum allowed size for the longest edge
9 |
10 | return new Promise((resolve, reject) => {
11 | // Ensure the file is an image
12 | if (!file.type.startsWith('image/')) {
13 | reject(new Error('The provided file is not an image.'));
14 | return;
15 | }
16 |
17 | const reader = new FileReader();
18 |
19 | // Load the file as a Data URL
20 | reader.onload = () => {
21 | const img = new Image();
22 |
23 | img.onload = () => {
24 | let { width, height } = img;
25 |
26 | // Determine the scaling factor if resizing is needed
27 | const scalingFactor = calculateScalingFactor(width, height, MAX_DIMENSION);
28 |
29 | if (scalingFactor < 1) {
30 | width = Math.round(width * scalingFactor);
31 | height = Math.round(height * scalingFactor);
32 | }
33 |
34 | // Create a canvas to draw the (resized) image
35 | const canvas = document.createElement('canvas');
36 | canvas.width = width;
37 | canvas.height = height;
38 |
39 | const ctx = canvas.getContext('2d');
40 |
41 | // Draw the image onto the canvas with the new dimensions
42 | ctx.drawImage(img, 0, 0, width, height);
43 |
44 | // Convert the canvas to a Data URL (you can specify image format and quality if needed)
45 | canvas.toDataURL(file.type, 0.92); // 0.92 is the default quality for JPEG
46 |
47 | // Resolve the promise with the Data URL
48 | resolve(canvas.toDataURL(file.type));
49 | };
50 |
51 | img.onerror = () => {
52 | reject(new Error('Failed to load the image.'));
53 | };
54 |
55 | img.src = reader.result;
56 | };
57 |
58 | reader.onerror = () => {
59 | reject(new Error('Failed to read the file.'));
60 | };
61 |
62 | reader.readAsDataURL(file);
63 | });
64 | }
65 |
66 | /**
67 | * Calculates the scaling factor to resize the image so that its longest edge is within the max dimension.
68 | *
69 | * @param {number} width - The original width of the image.
70 | * @param {number} height - The original height of the image.
71 | * @param {number} maxDimension - The maximum allowed size for the longest edge.
72 | * @returns {number} - The scaling factor (<=1). Returns 1 if no resizing is needed.
73 | */
74 | function calculateScalingFactor(width, height, maxDimension) {
75 | const longestEdge = Math.max(width, height);
76 | if (longestEdge <= maxDimension) {
77 | return 1; // No resizing needed
78 | }
79 | return maxDimension / longestEdge;
80 | }
81 |
82 | export function debounce(func, wait) {
83 | const timers = new Map();
84 |
85 | return function (...args) {
86 | const id = args[0].id; // Assuming the first argument has an `id` property
87 |
88 | if (timers.has(id)) {
89 | clearTimeout(timers.get(id));
90 | }
91 |
92 | const timer = setTimeout(() => {
93 | func.apply(this, args);
94 | timers.delete(id);
95 | }, wait);
96 |
97 | timers.set(id, timer);
98 | };
99 | }
100 |
--------------------------------------------------------------------------------
/server/main.go:
--------------------------------------------------------------------------------
1 | package main
2 |
3 | import (
4 | "context"
5 | "encoding/json"
6 | "flag"
7 | "fmt"
8 | "io"
9 | "log"
10 | "net/http"
11 | "os"
12 | "os/signal"
13 | "strings"
14 | "syscall"
15 |
16 | "github.com/byte-sat/llum-tools/schema"
17 | "github.com/go-chi/chi/v5"
18 | "github.com/go-chi/chi/v5/middleware"
19 | "github.com/go-chi/cors"
20 | "github.com/zakkor/server/toolfns"
21 | )
22 |
23 | var (
24 | password = flag.String("password", "", "Password for basic auth.")
25 | )
26 |
27 | func main() {
28 | flag.Parse()
29 |
30 | r := chi.NewRouter()
31 | r.Use(cors.Handler(cors.Options{
32 | AllowedOrigins: []string{"*"},
33 | AllowedMethods: []string{"GET", "POST", "OPTIONS"},
34 | AllowedHeaders: []string{"*"},
35 | }))
36 | r.Use(authMiddleware)
37 | r.Use(middleware.RequestID)
38 | r.Use(middleware.RealIP)
39 | r.Use(middleware.Logger)
40 | r.Use(middleware.Recoverer)
41 |
42 | th := &ToolHandler{Groups: toolfns.ToolGroups}
43 | r.Get("/tool_schema", th.ToolSchema)
44 | r.Post("/tool", th.InvokeTool)
45 |
46 | fmt.Println("Tool server running at http://localhost:8081")
47 | httpServer := &http.Server{Addr: ":8081", Handler: r}
48 | go func() {
49 | if err := httpServer.ListenAndServe(); err != nil && err != http.ErrServerClosed {
50 | log.Fatal(err)
51 | }
52 | }()
53 |
54 | // Signal handling
55 | c := make(chan os.Signal, 1)
56 | signal.Notify(c, os.Interrupt, syscall.SIGTERM)
57 |
58 | <-c // Block until a signal is received.
59 |
60 | // Graceful shutdown
61 | if err := httpServer.Shutdown(context.Background()); err != nil {
62 | log.Fatal(err)
63 | }
64 | }
65 |
66 | func authMiddleware(next http.Handler) http.Handler {
67 | return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
68 | if *password != "" && r.Header.Get("Authorization") != ("Basic "+*password) {
69 | w.WriteHeader(http.StatusUnauthorized)
70 | return
71 | }
72 | next.ServeHTTP(w, r)
73 | })
74 | }
75 |
76 | type ToolHandler struct {
77 | Groups []*toolfns.Group
78 | }
79 |
80 | func (tr *ToolHandler) ToolSchema(w http.ResponseWriter, r *http.Request) {
81 | enc := json.NewEncoder(w)
82 | enc.SetIndent("", " ")
83 |
84 | type encodedGroup struct {
85 | Name string `json:"name"`
86 | Schema []schema.Function `json:"schema"`
87 | }
88 |
89 | var encodedGroups []encodedGroup
90 | for _, group := range tr.Groups {
91 | encodedGroups = append(encodedGroups, encodedGroup{
92 | Name: group.Name,
93 | Schema: group.Repo.Schema(),
94 | })
95 | }
96 | err := enc.Encode(encodedGroups)
97 | if err != nil {
98 | http.Error(w, err.Error(), http.StatusInternalServerError)
99 | return
100 | }
101 | }
102 |
103 | func (tr *ToolHandler) InvokeTool(w http.ResponseWriter, r *http.Request) {
104 | var call struct {
105 | ChatID string `json:"chat_id"`
106 | Name string `json:"name"`
107 | Args map[string]any `json:"arguments"`
108 | }
109 | if err := json.NewDecoder(io.TeeReader(r.Body, os.Stdout)).Decode(&call); err != nil {
110 | http.Error(w, err.Error(), http.StatusBadRequest)
111 | return
112 | }
113 |
114 | var err error
115 | for _, group := range tr.Groups {
116 | var out any
117 | out, err = group.Repo.Invoke(nil, call.Name, call.Args)
118 | if err != nil {
119 | if strings.HasPrefix(err.Error(), "tool not found") {
120 | continue
121 | }
122 | json.NewEncoder(w).Encode(map[string]any{
123 | "error": err.Error(),
124 | })
125 | return
126 | }
127 | json.NewEncoder(w).Encode(out)
128 | return
129 | }
130 |
131 | if err != nil {
132 | http.Error(w, err.Error(), http.StatusBadRequest)
133 | }
134 | }
135 |
--------------------------------------------------------------------------------
/src/marked-katex-extension/index.js:
--------------------------------------------------------------------------------
1 | import katex from 'katex';
2 |
3 | const inlineRule = /^(\${1,2})(?!\$)((?:\\.|[^\\\n])*?(?:\\.|[^\\\n$]))\1(?=[\s?!.,:？！。，：]|$)/;
4 | const blockRule = /^(\${1,2})\n((?:\\[^]|[^\\])+?)\n\1(?:\n|$)/;
5 | const alternativeInlineRule =
6 | /^\\\((?!\$)((?:\\.|[^\\\n])*?(?:\\.|[^\\\n$]))\\\)(?=[\s?!.,:？！。，：]|$)/;
7 | const alternativeBlockRule = /^\\\[(\s*)((?:\\[^]|[^\\])+?)(\s*)\\](?:\n|$)/;
8 |
9 | export default function (options = {}) {
10 | return {
11 | extensions: [
12 | inlineKatex(options, createRenderer(options, false)),
13 | blockKatex(options, createRenderer(options, true)),
14 | altInlineKatex(options, createRenderer(options, false)),
15 | altBlockKatex(options, createRenderer(options, true)),
16 | ],
17 | };
18 | }
19 |
20 | function createRenderer(options, newlineAfter) {
21 | return (token) =>
22 | katex.renderToString(token.text, { ...options, displayMode: token.displayMode }) +
23 | (newlineAfter ? '\n' : '');
24 | }
25 |
26 | function inlineKatex(options, renderer) {
27 | return {
28 | name: 'inlineKatex',
29 | level: 'inline',
30 | start(src) {
31 | let index;
32 | let indexSrc = src;
33 |
34 | while (indexSrc) {
35 | index = indexSrc.indexOf('$');
36 | if (index === -1) {
37 | return;
38 | }
39 |
40 | if (index === 0 || indexSrc.charAt(index - 1) === ' ') {
41 | const possibleKatex = indexSrc.substring(index);
42 |
43 | if (possibleKatex.match(inlineRule)) {
44 | return index;
45 | }
46 | }
47 |
48 | indexSrc = indexSrc.substring(index + 1).replace(/^\$+/, '');
49 | }
50 | },
51 | tokenizer(src) {
52 | const match = src.match(inlineRule);
53 | if (match) {
54 | return {
55 | type: 'inlineKatex',
56 | raw: match[0],
57 | text: match[2].trim(),
58 | displayMode: match[1].length === 2,
59 | };
60 | }
61 | },
62 | renderer,
63 | };
64 | }
65 |
66 | function blockKatex(options, renderer) {
67 | return {
68 | name: 'blockKatex',
69 | level: 'block',
70 | tokenizer(src) {
71 | const match = src.match(blockRule);
72 | if (match) {
73 | return {
74 | type: 'blockKatex',
75 | raw: match[0],
76 | text: match[2].trim(),
77 | displayMode: match[1].length === 2,
78 | };
79 | }
80 | },
81 | renderer,
82 | };
83 | }
84 |
85 | function altInlineKatex(options, renderer) {
86 | return {
87 | name: 'altInlineKatex',
88 | level: 'inline',
89 | start(src) {
90 | let index;
91 | let indexSrc = src;
92 |
93 | while (indexSrc) {
94 | index = indexSrc.indexOf('\\(');
95 | if (index === -1) {
96 | return;
97 | }
98 |
99 | if (index === 0 || indexSrc.charAt(index - 1) === ' ') {
100 | const possibleKatex = indexSrc.substring(index + 1);
101 |
102 | if (possibleKatex.match(alternativeInlineRule)) {
103 | return index;
104 | }
105 | }
106 |
107 | indexSrc = indexSrc.substring(index + 2).replace(/^\\[()]/, '');
108 | }
109 | },
110 | tokenizer(src) {
111 | const match = src.match(alternativeInlineRule);
112 | if (match) {
113 | return {
114 | type: 'inlineKatex',
115 | raw: match[0],
116 | text: match[1].trim(),
117 | displayMode: false,
118 | };
119 | }
120 | },
121 | renderer,
122 | };
123 | }
124 |
125 | function altBlockKatex(options, renderer) {
126 | return {
127 | name: 'altBlockKatex',
128 | level: 'block',
129 | tokenizer(src) {
130 | const match = src.match(alternativeBlockRule);
131 | if (match) {
132 | return {
133 | type: 'blockKatex',
134 | raw: match[0],
135 | text: match[2].trim(),
136 | displayMode: true,
137 | };
138 | }
139 | },
140 | renderer,
141 | };
142 | }
143 |
--------------------------------------------------------------------------------
/src/svelte-json-view/JsonView.svelte:
--------------------------------------------------------------------------------
1 |
65 |
66 | {#if !items.length}
67 | {brackets[0]}{brackets[1]}{#if !_last},{/if}
70 | {:else if collapsed}
71 | {brackets[0]}...{brackets[1]}{#if !_last && collapsed},{/if}
79 | {:else}
80 | {brackets[0]}
88 |
4 |
5 | export type TokenExtractionParameters = {
6 | /**
7 | * The type of container
8 | */
9 | type: string
10 | /**
11 | * The content inside the container
12 | */
13 | content: string
14 | /**
15 | * The raw full container block
16 | */
17 | raw: string
18 | /**
19 | * The options of the container
20 | */
21 | options: ContainerOptions
22 | /**
23 | * The lexer that can be used to render nested tokens if needed
24 | */
25 | lexer: Lexer
26 | }
27 |
28 | export type TokenExtractor = (
29 | params: TokenExtractionParameters,
30 | ) => Tokens.Generic | null
31 |
32 | /**
33 | * Container extension is a marked extension that parses a block of text surrounded by :::
34 | *
35 | * @param tokensExtractor Converts the container input into a custom token that svelte components will receive.
36 | * If this function returns a value that contains an array of `tokens`,
37 | * this array will be populated with the tokens that are found inside the container,
38 | * allowing to nest markdown inside the container.
39 | *
40 | * @example
41 | *
42 | * Given the following markdown:
43 | *
44 | * :::container option="option-1" option-2="option-2" boolean-option
45 | * Something inside the container
46 | * :::
47 | *
48 | * The token extractor would receive the following parameters:
49 | * **type**: `container`
50 | * **content**: `Something inside the container`
51 | * **options**: { 'option': 'option-1', 'option-2': 'option-2', 'boolean-option': true }
52 | */
53 | export default function (tokensExtractor: TokenExtractor): TokenizerExtension {
54 | return {
55 | name: 'container',
56 | level: 'block',
57 | start(src: string) {
58 | return src.match(/^:::[^:\n\s]/)?.index
59 | },
60 | tokenizer(src: string): Tokens.Generic {
61 | const rule =
62 | /^:::(?[a-z0-9-]+)(?.*)?\n(?(?:.|\n)*)\n:::(?:\n|$)/i
63 |
64 | const match = rule.exec(findRawContainer(src))
65 | if (!match || !match.groups) return null
66 |
67 | const type = match.groups.type.toLocaleLowerCase()
68 | const options = parseOptions(match.groups.options || '')
69 | const content = match.groups.content || ''
70 |
71 | const result = tokensExtractor({
72 | type: type,
73 | content: content,
74 | raw: match[0],
75 | options: options,
76 | lexer: this.lexer,
77 | })
78 |
79 | if (result && result.tokens) {
80 | this.lexer.blockTokens(content, result.tokens)
81 | }
82 |
83 | return result
84 | },
85 | }
86 | }
87 |
88 | function findRawContainer(src: string): string | undefined {
89 | if (!src.startsWith(':::')) return undefined
90 | const lines = src.split('\n')
91 | let open = 1
92 | let lineNumber = 1
93 |
94 | for (lineNumber = 1; lineNumber < lines.length; lineNumber++) {
95 | const line = lines[lineNumber]
96 | if (line.startsWith(':::')) {
97 | if (/:::[^:\n\s]/.test(line)) {
98 | open++
99 | } else if (/^:::(\n|$)/.test(line)) {
100 | open -= 1
101 | }
102 | }
103 |
104 | if (open === 0) {
105 | break
106 | }
107 | }
108 |
109 | return lines.slice(0, lineNumber + 1).join('\n')
110 | }
111 |
112 | function parseOptions(options: string): ContainerOptions {
113 | const output = {}
114 | let remaining = options
115 |
116 | while (true) {
117 | const regex = /(?[a-z0-9]+)(?:="(?(?:.*?))")?/i
118 | const match = regex.exec(remaining)
119 | if (!match) break
120 |
121 | const name = match?.groups?.name
122 |
123 | if (name) {
124 | output[name] = match?.groups?.value ?? true
125 | }
126 |
127 | remaining = remaining.slice(match.index + match[0].length)
128 | }
129 |
130 | return output
131 | }
132 |
--------------------------------------------------------------------------------
/src/tools.js:
--------------------------------------------------------------------------------
1 | export const defaultToolSchema = [
2 | {
3 | name: 'Client-side',
4 | schema: [
5 | {
6 | clientDefinition: {
7 | id: '95c15b96-7bba-44e7-98a7-ffe268b884c5',
8 | name: 'Artifact',
9 | description: 'Displays the provided HTML content as a webpage to the user.',
10 | arguments: [
11 | {
12 | name: 'htmlContent',
13 | type: 'string',
14 | description: 'The HTML content to be displayed as a webpage',
15 | },
16 | ],
17 | body: "return { contentType: 'text/html' };",
18 | },
19 | type: 'function',
20 | function: {
21 | name: 'Artifact',
22 | description: 'Displays the provided HTML content as a webpage to the user.',
23 | parameters: {
24 | type: 'object',
25 | properties: {
26 | htmlContent: {
27 | type: 'string',
28 | description: 'The HTML content to be displayed as a webpage',
29 | },
30 | },
31 | required: ['htmlContent'],
32 | },
33 | },
34 | },
35 | {
36 | clientDefinition: {
37 | id: '1407c581-fab6-4dd5-995a-d53ba05ec6e8',
38 | name: 'JavaScript',
39 | description: 'Evaluates JavaScript code and returns the result, including console output',
40 | arguments: [
41 | {
42 | name: 'code',
43 | type: 'string',
44 | description:
45 | 'The JavaScript code to be evaluated. To return a value, you must use the return statement.',
46 | },
47 | ],
48 | body: "let consoleOutput = [];\nconst originalConsoleLog = console.log;\nconsole.log = (...args) => {\n consoleOutput.push(args.map(arg => JSON.stringify(arg)).join(' '));\n originalConsoleLog.apply(console, args);\n};\n\ntry {\n let result = eval(`(() => { ${args.code} })()`);\n return JSON.stringify({\n result: result,\n consoleOutput: consoleOutput\n }, null, 2);\n} catch (error) {\n return JSON.stringify({\n error: error.message,\n consoleOutput: consoleOutput\n }, null, 2);\n} finally {\n console.log = originalConsoleLog;\n}",
49 | },
50 | type: 'function',
51 | function: {
52 | name: 'JavaScript',
53 | description: 'Evaluates JavaScript code and returns the result, including console output',
54 | parameters: {
55 | type: 'object',
56 | properties: {
57 | code: {
58 | type: 'string',
59 | description:
60 | 'The JavaScript code to be evaluated. To return a value, you must use the return statement.',
61 | },
62 | },
63 | required: ['code'],
64 | },
65 | },
66 | },
67 | {
68 | clientDefinition: {
69 | id: '5b9b21b8-c8f2-40df-aea7-9634dec55b6b',
70 | name: 'Choice',
71 | description:
72 | 'Prompts the user to select one of the given options. Use this when you need the user to choose between different options.',
73 | arguments: [
74 | {
75 | name: 'choices',
76 | type: 'string_array',
77 | description: 'The options the user can choose from.',
78 | },
79 | {
80 | name: 'question',
81 | type: 'string',
82 | description: 'What you are asking the user.',
83 | },
84 | ],
85 | body: 'return await choose(args.question, args.choices);',
86 | },
87 | type: 'function',
88 | function: {
89 | name: 'Choice',
90 | description:
91 | 'Prompts the user to select one of the given options. Use this when you need the user to choose between different options.',
92 | parameters: {
93 | type: 'object',
94 | properties: {
95 | choices: {
96 | type: 'array',
97 | items: {
98 | type: 'string',
99 | },
100 | description: 'The options the user can choose from.',
101 | },
102 | question: {
103 | type: 'string',
104 | description: 'What you are asking the user.',
105 | },
106 | },
107 | required: ['choices', 'question'],
108 | },
109 | },
110 | },
111 | ],
112 | },
113 | ];
114 |
--------------------------------------------------------------------------------
/src/svelte-marked/markdown/components/code/MarkdownCode.svelte:
--------------------------------------------------------------------------------
1 |
53 |
54 | {#if attrs.filename && !showCode}
55 | (showCode = true)} />
56 | {:else if attrs.filename}
57 | {
35 | if (!event.target.closest('#tool-dropdown')) {
36 | open = false;
37 | }
38 | }}
39 | on:touchstart={(event) => {
40 | if (!event.target.closest('#tool-dropdown')) {
41 | open = false;
42 | }
43 | }}
44 | />
45 |
46 | {#if open && $toolSchema.length > 0}
47 | {
45 | if (!event.target.closest(`#${id}`)) {
46 | open = false;
47 | query = '';
48 | }
49 | }}
50 | on:touchstart={(event) => {
51 | if (!event.target.closest(`#${id}`)) {
52 | open = false;
53 | query = '';
54 | }
55 | }}
56 | />
57 |
58 |
44 |
53 |
54 |
56 | {/if}
57 |
--------------------------------------------------------------------------------
/src/FilePreview.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
18 |
33 |
34 |
35 |
44 | 36 | {filename.slice(0, filename.indexOf('.'))} 37 |
38 |41 | {filename.slice(filename.indexOf('.') + 1)} 42 |
43 |
14 |
63 |
--------------------------------------------------------------------------------
/src/CompanyLogo.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 | {#if model && model.provider}
10 | {#if model.provider === 'OpenAI' || model.id.startsWith('openai')}
11 | Choose an option
15 |16 | {question} 17 |
18 |
23 | {#each choices as choice, i}
24 |
47 | {/each}
48 |
49 |
50 |
62 |
19 | {:else if model.id.startsWith('meta-llama')}
20 |
21 | {:else if model.provider === 'Mistral' || model.id.startsWith('mistralai')}
22 |
23 | {:else if model.id.startsWith('cohere')}
24 |
25 | {:else if model.provider === 'Groq'}
26 |
27 | {:else if model.id.startsWith('nous')}
28 |
29 | {:else if model.id.startsWith('google')}
30 |
31 | {:else if model.id.startsWith('perplexity')}
32 |
38 | {:else if model.id.startsWith('deepseek')}
39 |
42 | {/if}
43 | {/if}
44 |
--------------------------------------------------------------------------------
/public/logos/qwen.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/logos/perplexity.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
36 |
--------------------------------------------------------------------------------
/src/svelte-marked/markdown/markedConfiguration.ts:
--------------------------------------------------------------------------------
1 | import {
2 | MarkdownHeading,
3 | MarkdownBloquote,
4 | MarkdownList,
5 | MarkdownListItem,
6 | MarkdownBr,
7 | MarkdownCode,
8 | MarkdownCodeSpan,
9 | MarkdownTable,
10 | MarkdownHtml,
11 | MarkdownParagraph,
12 | MarkdownLink,
13 | MarkdownText,
14 | MarkdownDfn,
15 | MarkdownDel,
16 | MarkdownEm,
17 | MarkdownHr,
18 | MarkdownStrong,
19 | MarkdownImage,
20 | MarkdownSpace,
21 | MarkdownInlineKatex,
22 | MarkdownBlockKatex,
23 | } from './components';
24 |
25 | import { Lexer, type TokensList } from 'marked';
26 | import Slugger from 'github-slugger';
27 |
28 | export type MarkdownOptions = {
29 | /**
30 | * The base path to your application.
31 | * This is required when the application does not run in root context to generate the links properly.
32 | */
33 | baseUrl: `/${string}`;
34 |
35 | /**
36 | * The slugger used to generate header IDs in marked.
37 | *
38 | * It is discouraged to set this option, because the slugger needs to be re-created when the source is changed.
39 | */
40 | slugger: Slugger;
41 | };
42 |
43 | export function parse(src: string): TokensList {
44 | const lexer = new Lexer();
45 | return lexer.lex(src);
46 | }
47 |
48 | export type RendererType = string;
49 |
50 | export type Renderers = Record
30 |
68 | {/if}
69 |
--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | const typography = require('@tailwindcss/typography');
2 |
3 | function scrollbarsPlugin({ addUtilities }) {
4 | addUtilities({
5 | '.scrollbar-invisible': {
6 | 'scrollbar-color': 'white white',
7 | '&::-webkit-scrollbar-track': {
8 | background: 'white',
9 | },
10 | '&::-webkit-scrollbar-thumb': {
11 | background: 'white',
12 | },
13 | },
14 | '.scrollbar-white': {
15 | 'scrollbar-color': 'theme(\'colors.gray.400 / 50%\') white',
16 | '&::-webkit-scrollbar-track': {
17 | background: 'white',
18 | },
19 | '&::-webkit-scrollbar-thumb': {
20 | background: 'white',
21 | },
22 | },
23 | '.scrollbar-slim': {
24 | 'scrollbar-width': 'thin',
25 | '&::-webkit-scrollbar': {
26 | width: '6px',
27 | height: '6px',
28 | },
29 | '&::-webkit-scrollbar-track': {
30 | background: "theme('colors.gray.200 / 70%')",
31 | '-webkit-border-radius': '10px',
32 | 'border-radius': '10px',
33 | },
34 | '&::-webkit-scrollbar-thumb': {
35 | background: "theme('colors.gray.400 / 50%')",
36 | '-webkit-border-radius': '10px',
37 | 'border-radius': '10px',
38 | },
39 | },
40 | '.scrollbar-ultraslim': {
41 | 'scrollbar-width': 'thin',
42 | '&::-webkit-scrollbar': {
43 | width: '3px',
44 | height: '3px',
45 | },
46 | '&::-webkit-scrollbar-track': {
47 | background: "theme('colors.gray.200 / 70%')",
48 | '-webkit-border-radius': '10px',
49 | 'border-radius': '10px',
50 | },
51 | '&::-webkit-scrollbar-thumb': {
52 | background: "theme('colors.gray.400 / 50%')",
53 | '-webkit-border-radius': '10px',
54 | 'border-radius': '10px',
55 | },
56 | },
57 | '.scrollbar-none': {
58 | '-ms-overflow-style': 'none',
59 | 'scrollbar-width': 'none',
60 | '&::-webkit-scrollbar': {
61 | display: 'none',
62 | },
63 | },
64 | '.scrollbar-default': {
65 | '-ms-overflow-style': 'auto',
66 | 'scrollbar-width': 'auto',
67 | '&::-webkit-scrollbar': {
68 | display: 'block',
69 | },
70 | },
71 | });
72 | }
73 |
74 | /** @type {import('tailwindcss').Config}*/
75 | const config = {
76 | content: ['./src/**/*.{html,js,svelte,ts}'],
77 |
78 | theme: {
79 | extend: {
80 | screens: {
81 | md: '880px',
82 | ld: '1215px',
83 | xl: '1432px',
84 | },
85 | transitionTimingFunction: {
86 | 'in-out':
87 | 'linear(0, 0.005, 0.02 2.2%, 0.045, 0.081 4.9%, 0.16 7.3%, 0.465 16.2%, 0.561, 0.642,0.713 25.8%, 0.773, 0.825 32.7%, 0.868 36.5%, 0.905 40.9%, 0.935 45.7%,0.958 51.1%, 0.975 57.4%, 0.986 64.4%, 0.993 73.1%, 0.997 84.1%, 0.999)',
88 | },
89 | },
90 | },
91 |
92 | plugins: [typography, scrollbarsPlugin],
93 | };
94 |
95 | module.exports = config;
96 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # llum
2 |
3 | ### A fast, light, open chat UI
4 |
5 | 
6 |
7 | ### Key features:
8 |
9 | - 🔌 Multiple providers, plug in your API keys (stored entirely locally) and you're good to go
10 |
11 | - Local models (through Ollama)
12 | - OpenRouter (which lets you use ALL models across many providers: OpenAI, Anthropic, OSS, 50+ others)
13 | - OpenAI
14 | - Anthropic
15 | - Mistral
16 | - Groq
17 |
18 | - 🛠️ Tool use
19 | - Check out `server/toolfns/toolfns.go`. You only need to write functions. The function comment is the description the model receives, so it knows what to use. Click the `Sync` button in the web UI to refresh your tools.
20 | - 🖼️ Multimodal input: upload, paste, or share links to images
21 | - 🎨 Image generation using DALL-E 3
22 | - 📝 Multi-shot prompting. Also edit, delete, regenerate messages, whatever. The world is your oyster
23 | - ⚡ Pre-filled responses (where supported by provider)
24 | - 🌐 Support for all available models across all providers
25 | - 🔄 Change model mid-conversation
26 | - 🔐 Sync chats and keys across devices, end-to-end encrypted. Self-hosted, or use our hosted instance.
27 | - 🔗 Conversation sharing (if you choose to share, your conversation has to be stored on an external server for the share link to be made available. Self-hosted share options coming soon. No, I will not view any of your stuff.)
28 | - 🌿 Branching conversation history (like the left-right ChatGPT arrows that you can click to go back to a previous response)
29 |
30 | ### Privacy:
31 |
32 | - Completely private and transparent. All your conversation history and keys are stored entirely locally, and kept only in your browser, on your device.
33 |
34 | ## How to install?
35 |
36 | If you don't want to use tools, you don't need to install anything. A hosted instance is available at: https://llum.chat
37 |
38 | If you want to use tools, proceed below.
39 |
40 | ## Single binary:
41 |
42 | The llum tool server is available prebuilt as a single binary. [Download prebuilt package from the releases page.](https://github.com/zakkor/llum/releases)
43 |
44 | Download the binary for your platform, then run it, which will start the tool server:
45 |
46 | ```
47 | ./llum-darwin-amd64
48 | Tool server running at http://localhost:8081
49 | ```
50 |
51 | Go back to https://llum.chat, head over to Settings -> Tool calling, and click the "Refresh tools" button. You should be good to go!
52 |
53 | ### Building client and server locally:
54 |
55 | 1. Clone the repository
56 | 2. Install and start the client: `npm i && npm run dev`. The client will be accessible at http://localhost:5173
57 | 3. Install and start the server: `cd server && go generate ./... && go build && ./server -password foobar`. The server will be accessible at http://localhost:8081. You can plug this into the server address in the chat UI along with the password you selected.
58 |
--------------------------------------------------------------------------------
/src/KnobsSidebar.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
86 |
--------------------------------------------------------------------------------
/src/util.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Reads an image file, resizes it if necessary, and returns it as a Data URL.
3 | *
4 | * @param {File} file - The image file to read and resize.
5 | * @returns {Promise
34 |
67 |
35 |
66 |
36 |
44 |
52 |
53 |
65 | -
89 | {#each items as i, idx}
90 |
-
91 | {#if !isArray}
92 | {stringify(i)}:
93 | {/if}
94 | {#if getType(json[i]) === 'object'}
95 |
58 |
80 | {:else}
81 |
59 |
76 | 61 | {attrs.filename} 62 |
63 |
64 |
74 |
75 | {token.text}
82 |
93 | {#if clientHeight > 400}
94 |
119 | {/if}
120 |
--------------------------------------------------------------------------------
/src/ToolDropdown.svelte:
--------------------------------------------------------------------------------
1 |
31 |
32 |
100 |
110 |
111 | {/if}
112 | 400 && !showingAll
116 | ? 'max-h-[400px] overflow-y-auto scrollbar-ultraslim'
117 | : ''}>{token.text}
118 |
48 |
136 | {/if}
137 |
--------------------------------------------------------------------------------
/src/ModelSelector.svelte:
--------------------------------------------------------------------------------
1 |
41 |
42 |
52 |
135 |
53 |
72 |
54 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 | Tools
55 | 63 |-
73 | {#each $toolSchema as group}
74 |
- 110 | 111 | 128 | 129 | {/each} 130 |
75 |
76 |
92 |
93 |
104 |
105 |
106 | {#if !collapsed[group.name]}
107 |
108 | {#each group.schema as schema, i}
109 |
131 | {/if}
132 | {/each}
133 |
59 |
146 |
--------------------------------------------------------------------------------
/src/tooltip.js:
--------------------------------------------------------------------------------
1 | // Shared tooltip element for all instances
2 | let tooltipElement = null;
3 | let activeNode = null;
4 |
5 | function createTooltipElement() {
6 | if (tooltipElement) return;
7 |
8 | tooltipElement = document.createElement('div');
9 | tooltipElement.style.cssText = `
10 | position: absolute;
11 | background: black;
12 | color: white;
13 | padding: 8px 12px;
14 | border-radius: 8px;
15 | font-size: 12px;
16 | z-index: 1000;
17 | pointer-events: none;
18 | opacity: 0;
19 | transition: opacity 0.1s;
20 | max-width: 250px;
21 | display: none; /* Hide initially to prevent scrollbars */
22 | `;
23 | document.body.appendChild(tooltipElement);
24 | }
25 |
26 | export function tooltip(node, params = {}) {
27 | // Ensure tooltip element exists
28 | createTooltipElement();
29 |
30 | // Default parameters
31 | let { content = '', placement = 'top' } = params;
32 |
33 | function positionTooltip() {
34 | if (activeNode !== node) return;
35 |
36 | // Make sure tooltip is visible before measuring
37 | tooltipElement.style.display = 'block';
38 |
39 | // Update tooltip content
40 | tooltipElement.textContent = content;
41 |
42 | // Make tooltip temporarily visible but hidden for accurate measurements
43 | tooltipElement.style.visibility = 'hidden';
44 | tooltipElement.style.opacity = '0';
45 |
46 | // Get dimensions and position of the node and tooltip
47 | const nodeRect = node.getBoundingClientRect();
48 | const tooltipRect = tooltipElement.getBoundingClientRect();
49 |
50 | // Calculate initial position based on placement
51 | let top, left;
52 |
53 | switch (placement) {
54 | case 'top':
55 | top = nodeRect.top - tooltipRect.height - 8;
56 | left = nodeRect.left + nodeRect.width / 2 - tooltipRect.width / 2;
57 | break;
58 | case 'bottom':
59 | top = nodeRect.bottom + 8;
60 | left = nodeRect.left + nodeRect.width / 2 - tooltipRect.width / 2;
61 | break;
62 | case 'left':
63 | top = nodeRect.top + nodeRect.height / 2 - tooltipRect.height / 2;
64 | left = nodeRect.left - tooltipRect.width - 8;
65 | break;
66 | case 'right':
67 | top = nodeRect.top + nodeRect.height / 2 - tooltipRect.height / 2;
68 | left = nodeRect.right + 8;
69 | break;
70 | default:
71 | // Default to top
72 | top = nodeRect.top - tooltipRect.height - 8;
73 | left = nodeRect.left + nodeRect.width / 2 - tooltipRect.width / 2;
74 | break;
75 | }
76 |
77 | // Check for overflow and adjust position
78 |
79 | // Vertical overflow
80 | if (top < 0) {
81 | // If it goes off the top, switch to bottom if that was the original placement
82 | if (placement === 'top') {
83 | top = nodeRect.bottom + 8;
84 | } else {
85 | // Otherwise just keep it within viewport
86 | top = 8;
87 | }
88 | } else if (top + tooltipRect.height > window.innerHeight) {
89 | // If it goes off the bottom, switch to top if that was the original placement
90 | if (placement === 'bottom') {
91 | top = nodeRect.top - tooltipRect.height - 8;
92 | } else {
93 | // Otherwise just keep it within viewport
94 | top = window.innerHeight - tooltipRect.height - 8;
95 | }
96 | }
97 |
98 | // Horizontal overflow
99 | if (left < 0) {
100 | // If it goes off the left, switch to right if that was the original placement
101 | if (placement === 'left') {
102 | left = nodeRect.right + 8;
103 | } else {
104 | // Otherwise just keep it within viewport
105 | left = 8;
106 | }
107 | } else if (left + tooltipRect.width > window.innerWidth) {
108 | // If it goes off the right, switch to left if that was the original placement
109 | if (placement === 'right') {
110 | left = nodeRect.left - tooltipRect.width - 8;
111 | } else {
112 | // Otherwise just keep it within viewport
113 | left = window.innerWidth - tooltipRect.width - 8;
114 | }
115 | }
116 |
117 | // Apply position (accounting for page scroll)
118 | tooltipElement.style.top = `${top + window.scrollY}px`;
119 | tooltipElement.style.left = `${left + window.scrollX}px`;
120 |
121 | // Make tooltip visible
122 | tooltipElement.style.visibility = 'visible';
123 | }
124 |
125 | function showTooltip() {
126 | activeNode = node;
127 | positionTooltip();
128 | tooltipElement.style.opacity = '1';
129 | }
130 |
131 | function hideTooltip() {
132 | if (activeNode === node) {
133 | tooltipElement.style.opacity = '0';
134 | activeNode = null;
135 | }
136 | }
137 |
138 | function handleResize() {
139 | if (activeNode === node) {
140 | positionTooltip();
141 | }
142 | }
143 |
144 | function handleScroll() {
145 | if (activeNode === node) {
146 | positionTooltip();
147 | }
148 | }
149 |
150 | // Add event listeners
151 | node.addEventListener('mouseenter', showTooltip);
152 | node.addEventListener('mouseleave', hideTooltip);
153 | node.addEventListener('focus', showTooltip);
154 | node.addEventListener('blur', hideTooltip);
155 | window.addEventListener('resize', handleResize);
156 | window.addEventListener('scroll', handleScroll, { passive: true });
157 |
158 | return {
159 | update(newParams) {
160 | // Update content and placement when parameters change
161 | const { content: newContent = '', placement: newPlacement = 'top' } = newParams;
162 | content = newContent;
163 | placement = newPlacement;
164 |
165 | if (activeNode === node) {
166 | positionTooltip();
167 | }
168 | },
169 | destroy() {
170 | // Clean up
171 | node.removeEventListener('mouseenter', showTooltip);
172 | node.removeEventListener('mouseleave', hideTooltip);
173 | node.removeEventListener('focus', showTooltip);
174 | node.removeEventListener('blur', hideTooltip);
175 | window.removeEventListener('resize', handleResize);
176 | window.removeEventListener('scroll', handleScroll);
177 |
178 | if (activeNode === node) {
179 | tooltipElement.style.opacity = '0';
180 | activeNode = null;
181 | }
182 | },
183 | };
184 | }
185 |
--------------------------------------------------------------------------------
/src/Toolcall.svelte:
--------------------------------------------------------------------------------
1 |
58 |
59 |
60 |
86 |
87 | {#if open}
88 |
91 |
144 | {/if}
145 |
95 | {
102 | if (event.key === 'Enter') {
103 | dispatch('change', filteredModels[0]);
104 | open = false;
105 | query = '';
106 | }
107 | }}
108 | />
109 |
143 | -
110 | {#each filteredModels as model, i}
111 |
- 112 | 137 | 138 | {:else} 139 |
No results.
140 | {/each}
141 |
60 |
61 |
68 | {#if finished}
69 |
70 |
123 | {#if !collapsable || toolcall.expanded}
124 |
187 |
--------------------------------------------------------------------------------
/src/ClientToolSetting.svelte:
--------------------------------------------------------------------------------
1 |
78 |
79 | {toolcall.name}
88 |
89 | {#if displayType !== null}
90 |
103 | {/if}
104 | {#if collapsable}
105 |
122 |
128 | {#if displayType === null || displayTypeDisabled}
129 |
185 | {/if}
186 |
134 | {#if typeof toolcall.arguments === 'object'}
135 | {#if Object.keys(toolcall.arguments).length === 1}
136 | {toolcall.arguments[Object.keys(toolcall.arguments)[0]]}
137 | {:else}
138 |
146 | {#if toolresponse}
147 |
148 |
149 | Result:
152 |
164 | {/if}
165 | {:else if toolresponse && displayType === 'image'}
166 |
155 | {#if !toolresponse.content}
156 | blank
157 | {:else if typeof toolresponse.content === 'object'}
158 |
163 |
167 | 
168 |
169 | {:else if toolresponse && displayType === 'webpage'}
170 |
171 |
178 |
179 | {:else if displayType === 'choice'}
180 |
181 |
183 | {/if}
184 |
80 |
95 |
96 | {#if viewingUI}
97 | Client-side tool
81 | 94 |
98 |
106 |
107 |
115 |
116 |
Arguments:
117 |
118 | {#each toolDefinition.arguments as argument, i}
119 |
175 |
120 |
128 |
140 |
148 |
158 |
159 | {:else}
160 | No arguments.
161 | {/each} 162 | 174 |