server: introduce API for serving / loading / unloading multiple models (#17470)
* server: add model management and proxy * fix compile error * does this fix windows? * fix windows build * use subprocess.h, better logging * add test * fix windows * feat: Model/Router server architecture WIP * more stable * fix unsafe pointer * also allow terminate loading model * add is_active() * refactor: Architecture improvements * tmp apply upstream fix * address most problems * address thread safety issue * address review comment * add docs (first version) * address review comment * feat: Improved UX for model information, modality interactions etc * chore: update webui build output * refactor: Use only the message data `model` property for displaying model used info * chore: update webui build output * add --models-dir param * feat: New Model Selection UX WIP * chore: update webui build output * feat: Add auto-mic setting * feat: Attachments UX improvements * implement LRU * remove default model path * better --models-dir * add env for args * address review comments * fix compile * refactor: Chat Form Submit component * ad endpoint docs * Merge remote-tracking branch 'webui/allozaur/server_model_management_v1_2' into xsn/server_model_maagement_v1_2 Co-authored-by: Aleksander <aleksander.grygier@gmail.com> * feat: Add copy to clipboard to model name in model info dialog * feat: Model unavailable UI state for model selector * feat: Chat Form Actions UI logic improvements * feat: Auto-select model from last assistant response * chore: update webui build output * expose args and exit_code in API * add note * support extra_args on loading model * allow reusing args if auto_load * typo docs * oai-compat /models endpoint * cleaner * address review comments * feat: Use `model` property for displaying the `repo/model-name` naming format * refactor: Attachments data * chore: update webui build output * refactor: Enum imports * feat: Improve Model Selector responsiveness * chore: update webui build output * refactor: Cleanup * refactor: Cleanup * refactor: Formatters * chore: update webui build output * refactor: Copy To Clipboard Icon component * chore: update webui build output * refactor: Cleanup * chore: update webui build output * refactor: UI badges * chore: update webui build output * refactor: Cleanup * refactor: Cleanup * chore: update webui build output * add --models-allow-extra-args for security * nits * add stdin_file * fix merge * fix: Retrieve lost setting after resolving merge conflict * refactor: DatabaseStore -> DatabaseService * refactor: Database, Conversations & Chat services + stores architecture improvements (WIP) * refactor: Remove redundant settings * refactor: Multi-model business logic WIP * chore: update webui build output * feat: Switching models logic for ChatForm or when regenerating messges + modality detection logic * chore: update webui build output * fix: Add `untrack` inside chat processing info data logic to prevent infinite effect * fix: Regenerate * feat: Remove redundant settigns + rearrange * fix: Audio attachments * refactor: Icons * chore: update webui build output * feat: Model management and selection features WIP * chore: update webui build output * refactor: Improve server properties management * refactor: Icons * chore: update webui build output * feat: Improve model loading/unloading status updates * chore: update webui build output * refactor: Improve API header management via utility functions * remove support for extra args * set hf_repo/docker_repo as model alias when posible * refactor: Remove ConversationsService * refactor: Chat requests abort handling * refactor: Server store * tmp webui build * refactor: Model modality handling * chore: update webui build output * refactor: Processing state reactivity * fix: UI * refactor: Services/Stores syntax + logic improvements Refactors components to access stores directly instead of using exported getter functions. This change centralizes store access and logic, simplifying component code and improving maintainability by reducing the number of exported functions and promoting direct store interaction. Removes exported getter functions from `chat.svelte.ts`, `conversations.svelte.ts`, `models.svelte.ts` and `settings.svelte.ts`. * refactor: Architecture cleanup * feat: Improve statistic badges * feat: Condition available models based on modality + better model loading strategy & UX * docs: Architecture documentation * feat: Update logic for PDF as Image * add TODO for http client * refactor: Enhance model info and attachment handling * chore: update webui build output * refactor: Components naming * chore: update webui build output * refactor: Cleanup * refactor: DRY `getAttachmentDisplayItems` function + fix UI * chore: update webui build output * fix: Modality detection improvement for text-based PDF attachments * refactor: Cleanup * docs: Add info comment * refactor: Cleanup * re * refactor: Cleanup * refactor: Cleanup * feat: Attachment logic & UI improvements * refactor: Constants * feat: Improve UI sidebar background color * chore: update webui build output * refactor: Utils imports + move types to `app.d.ts` * test: Fix Storybook mocks * chore: update webui build output * test: Update Chat Form UI tests * refactor: Tooltip Provider from core layout * refactor: Tests to separate location * decouple server_models from server_routes * test: Move demo test to tests/server * refactor: Remove redundant method * chore: update webui build output * also route anthropic endpoints * fix duplicated arg * fix invalid ptr to shutdown_handler * server : minor * rm unused fn * add ?autoload=true|false query param * refactor: Remove redundant code * docs: Update README documentations + architecture & data flow diagrams * fix: Disable autoload on calling server props for the model * chore: update webui build output * fix ubuntu build * fix: Model status reactivity * fix: Modality detection for MODEL mode * chore: update webui build output --------- Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> Co-authored-by: Georgi Gerganov <ggerganov@gmail.com>
This commit is contained in:
178 files changed
+11643
-4356
No files matched your search
@@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
import * as Tooltip from '$lib/components/ui/tooltip';
|
||||
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
|
||||
import Page from '../../../src/routes/+page.svelte';
|
||||
|
||||
let sidebarOpen = $state(false);
|
||||
</script>
|
||||
|
||||
<!--
|
||||
Test wrapper that provides necessary context providers for component testing.
|
||||
This mirrors the providers from +layout.svelte.
|
||||
-->
|
||||
<Tooltip.Provider>
|
||||
<Sidebar.Provider bind:open={sidebarOpen}>
|
||||
<Page />
|
||||
</Sidebar.Provider>
|
||||
</Tooltip.Provider>
|
||||
@@ -0,0 +1,11 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render } from 'vitest-browser-svelte';
|
||||
import TestWrapper from './components/TestWrapper.svelte';
|
||||
|
||||
describe('/+page.svelte', () => {
|
||||
it('should render page without throwing', async () => {
|
||||
// Basic smoke test - page should render without throwing errors
|
||||
// API calls will fail in test environment but component should still mount
|
||||
expect(() => render(TestWrapper)).not.toThrow();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
import { expect, test } from '@playwright/test';
|
||||
|
||||
test('home page has expected h1', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await expect(page.locator('h1')).toBeVisible();
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
|
||||
describe('sum test', () => {
|
||||
it('adds 1 + 2 to equal 3', () => {
|
||||
expect(1 + 2).toBe(3);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,164 @@
|
||||
<script module lang="ts">
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import ChatForm from '$lib/components/app/chat/ChatForm/ChatForm.svelte';
|
||||
import { expect } from 'storybook/test';
|
||||
import { mockServerProps, mockConfigs } from './fixtures/storybook-mocks';
|
||||
import jpgAsset from './fixtures/assets/1.jpg?url';
|
||||
import svgAsset from './fixtures/assets/hf-logo.svg?url';
|
||||
import pdfAsset from './fixtures/assets/example.pdf?raw';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Components/ChatScreen/ChatForm',
|
||||
component: ChatForm,
|
||||
parameters: {
|
||||
layout: 'centered'
|
||||
}
|
||||
});
|
||||
|
||||
let fileAttachments = $state([
|
||||
{
|
||||
id: '1',
|
||||
name: '1.jpg',
|
||||
type: 'image/jpeg',
|
||||
size: 44891,
|
||||
preview: jpgAsset,
|
||||
file: new File([''], '1.jpg', { type: 'image/jpeg' })
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'hf-logo.svg',
|
||||
type: 'image/svg+xml',
|
||||
size: 1234,
|
||||
preview: svgAsset,
|
||||
file: new File([''], 'hf-logo.svg', { type: 'image/svg+xml' })
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'example.pdf',
|
||||
type: 'application/pdf',
|
||||
size: 351048,
|
||||
file: new File([pdfAsset], 'example.pdf', { type: 'application/pdf' })
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
|
||||
play={async ({ canvas, userEvent }) => {
|
||||
mockServerProps(mockConfigs.noModalities);
|
||||
|
||||
const textarea = await canvas.findByRole('textbox');
|
||||
const submitButton = await canvas.findByRole('button', { name: 'Send' });
|
||||
|
||||
// Expect the input to be focused after the component is mounted
|
||||
await expect(textarea).toHaveFocus();
|
||||
|
||||
// Expect the submit button to be disabled
|
||||
await expect(submitButton).toBeDisabled();
|
||||
|
||||
const text = 'What is the meaning of life?';
|
||||
|
||||
await userEvent.clear(textarea);
|
||||
await userEvent.type(textarea, text);
|
||||
|
||||
await expect(textarea).toHaveValue(text);
|
||||
|
||||
const fileInput = document.querySelector('input[type="file"]');
|
||||
const acceptAttr = fileInput?.getAttribute('accept');
|
||||
await expect(fileInput).toHaveAttribute('accept');
|
||||
await expect(acceptAttr).not.toContain('image/');
|
||||
await expect(acceptAttr).not.toContain('audio/');
|
||||
|
||||
// Open file attachments dropdown
|
||||
const fileUploadButton = canvas.getByText('Attach files');
|
||||
await userEvent.click(fileUploadButton);
|
||||
|
||||
// Check dropdown menu items are disabled (no modalities)
|
||||
const imagesButton = document.querySelector('.images-button');
|
||||
const audioButton = document.querySelector('.audio-button');
|
||||
|
||||
await expect(imagesButton).toHaveAttribute('data-disabled');
|
||||
await expect(audioButton).toHaveAttribute('data-disabled');
|
||||
|
||||
// Close dropdown by pressing Escape
|
||||
await userEvent.keyboard('{Escape}');
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story name="Loading" args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', isLoading: true }} />
|
||||
|
||||
<Story
|
||||
name="VisionModality"
|
||||
args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
|
||||
play={async ({ canvas, userEvent }) => {
|
||||
mockServerProps(mockConfigs.visionOnly);
|
||||
|
||||
// Open file attachments dropdown and verify it works
|
||||
const fileUploadButton = canvas.getByText('Attach files');
|
||||
await userEvent.click(fileUploadButton);
|
||||
|
||||
// Verify dropdown menu items exist
|
||||
const imagesButton = document.querySelector('.images-button');
|
||||
const audioButton = document.querySelector('.audio-button');
|
||||
|
||||
await expect(imagesButton).toBeInTheDocument();
|
||||
await expect(audioButton).toBeInTheDocument();
|
||||
|
||||
// Close dropdown by pressing Escape
|
||||
await userEvent.keyboard('{Escape}');
|
||||
|
||||
console.log('✅ Vision modality: Dropdown menu verified');
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="AudioModality"
|
||||
args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
|
||||
play={async ({ canvas, userEvent }) => {
|
||||
mockServerProps(mockConfigs.audioOnly);
|
||||
|
||||
// Open file attachments dropdown and verify it works
|
||||
const fileUploadButton = canvas.getByText('Attach files');
|
||||
await userEvent.click(fileUploadButton);
|
||||
|
||||
// Verify dropdown menu items exist
|
||||
const imagesButton = document.querySelector('.images-button');
|
||||
const audioButton = document.querySelector('.audio-button');
|
||||
|
||||
await expect(imagesButton).toBeInTheDocument();
|
||||
await expect(audioButton).toBeInTheDocument();
|
||||
|
||||
// Close dropdown by pressing Escape
|
||||
await userEvent.keyboard('{Escape}');
|
||||
|
||||
console.log('✅ Audio modality: Dropdown menu verified');
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="FileAttachments"
|
||||
args={{
|
||||
class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
|
||||
uploadedFiles: fileAttachments
|
||||
}}
|
||||
play={async ({ canvas }) => {
|
||||
mockServerProps(mockConfigs.bothModalities);
|
||||
|
||||
const jpgAttachment = canvas.getByAltText('1.jpg');
|
||||
const svgAttachment = canvas.getByAltText('hf-logo.svg');
|
||||
const pdfFileExtension = canvas.getByText('PDF');
|
||||
const pdfAttachment = canvas.getByText('example.pdf');
|
||||
const pdfSize = canvas.getByText('342.82 KB');
|
||||
|
||||
await expect(jpgAttachment).toBeInTheDocument();
|
||||
await expect(jpgAttachment).toHaveAttribute('src', jpgAsset);
|
||||
|
||||
await expect(svgAttachment).toBeInTheDocument();
|
||||
await expect(svgAttachment).toHaveAttribute('src', svgAsset);
|
||||
|
||||
await expect(pdfFileExtension).toBeInTheDocument();
|
||||
await expect(pdfAttachment).toBeInTheDocument();
|
||||
await expect(pdfSize).toBeInTheDocument();
|
||||
}}
|
||||
/>
|
||||
@@ -0,0 +1,207 @@
|
||||
<script module lang="ts">
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import ChatMessage from '$lib/components/app/chat/ChatMessages/ChatMessage.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Components/ChatScreen/ChatMessage',
|
||||
component: ChatMessage,
|
||||
parameters: {
|
||||
layout: 'centered'
|
||||
}
|
||||
});
|
||||
|
||||
// Mock messages for different scenarios
|
||||
const userMessage: DatabaseMessage = {
|
||||
id: '1',
|
||||
convId: 'conv-1',
|
||||
type: 'message',
|
||||
timestamp: Date.now() - 1000 * 60 * 5,
|
||||
role: 'user',
|
||||
content: 'What is the meaning of life, the universe, and everything?',
|
||||
parent: '',
|
||||
thinking: '',
|
||||
children: []
|
||||
};
|
||||
|
||||
const assistantMessage: DatabaseMessage = {
|
||||
id: '2',
|
||||
convId: 'conv-1',
|
||||
type: 'message',
|
||||
timestamp: Date.now() - 1000 * 60 * 3,
|
||||
role: 'assistant',
|
||||
content:
|
||||
'The answer to the ultimate question of life, the universe, and everything is **42**.\n\nThis comes from Douglas Adams\' "The Hitchhiker\'s Guide to the Galaxy," where a supercomputer named Deep Thought calculated this answer over 7.5 million years. However, the question itself was never properly formulated, which is why the answer seems meaningless without context.',
|
||||
parent: '1',
|
||||
thinking: '',
|
||||
children: []
|
||||
};
|
||||
|
||||
const assistantWithReasoning: DatabaseMessage = {
|
||||
id: '3',
|
||||
convId: 'conv-1',
|
||||
type: 'message',
|
||||
timestamp: Date.now() - 1000 * 60 * 2,
|
||||
role: 'assistant',
|
||||
content: "Here's the concise answer, now that I've thought it through carefully for you.",
|
||||
parent: '1',
|
||||
thinking:
|
||||
"Let's consider the user's question step by step:\\n\\n1. Identify the core problem\\n2. Evaluate relevant information\\n3. Formulate a clear answer\\n\\nFollowing this process ensures the final response stays focused and accurate.",
|
||||
children: []
|
||||
};
|
||||
const rawOutputMessage: DatabaseMessage = {
|
||||
id: '6',
|
||||
convId: 'conv-1',
|
||||
type: 'message',
|
||||
timestamp: Date.now() - 1000 * 60,
|
||||
role: 'assistant',
|
||||
content:
|
||||
'<|channel|>analysis<|message|>User greeted me. Initiating overcomplicated analysis: Is this a trap? No, just a normal hello. Respond calmly, act like a helpful assistant, and do not start explaining quantum physics again. Confidence 0.73. Engaging socially acceptable greeting protocol...<|end|>Hello there! How can I help you today?',
|
||||
parent: '1',
|
||||
thinking: '',
|
||||
children: []
|
||||
};
|
||||
|
||||
let processingMessage = $state({
|
||||
id: '4',
|
||||
convId: 'conv-1',
|
||||
type: 'message',
|
||||
timestamp: 0, // No timestamp = processing
|
||||
role: 'assistant',
|
||||
content: '',
|
||||
parent: '1',
|
||||
thinking: '',
|
||||
children: []
|
||||
});
|
||||
|
||||
let streamingMessage = $state({
|
||||
id: '5',
|
||||
convId: 'conv-1',
|
||||
type: 'message',
|
||||
timestamp: 0, // No timestamp = streaming
|
||||
role: 'assistant',
|
||||
content: '',
|
||||
parent: '1',
|
||||
thinking: '',
|
||||
children: []
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story
|
||||
name="User"
|
||||
args={{
|
||||
message: userMessage
|
||||
}}
|
||||
play={async () => {
|
||||
const { settingsStore } = await import('$lib/stores/settings.svelte');
|
||||
settingsStore.updateConfig('disableReasoningFormat', false);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="Assistant"
|
||||
args={{
|
||||
class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
|
||||
message: assistantMessage
|
||||
}}
|
||||
play={async () => {
|
||||
const { settingsStore } = await import('$lib/stores/settings.svelte');
|
||||
settingsStore.updateConfig('disableReasoningFormat', false);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="AssistantWithReasoning"
|
||||
args={{
|
||||
class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
|
||||
message: assistantWithReasoning
|
||||
}}
|
||||
play={async () => {
|
||||
const { settingsStore } = await import('$lib/stores/settings.svelte');
|
||||
settingsStore.updateConfig('disableReasoningFormat', false);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="RawLlmOutput"
|
||||
args={{
|
||||
class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
|
||||
message: rawOutputMessage
|
||||
}}
|
||||
play={async () => {
|
||||
const { settingsStore } = await import('$lib/stores/settings.svelte');
|
||||
settingsStore.updateConfig('disableReasoningFormat', true);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="WithReasoningContent"
|
||||
args={{
|
||||
message: streamingMessage
|
||||
}}
|
||||
asChild
|
||||
play={async () => {
|
||||
const { settingsStore } = await import('$lib/stores/settings.svelte');
|
||||
settingsStore.updateConfig('disableReasoningFormat', false);
|
||||
// Phase 1: Stream reasoning content in chunks
|
||||
let reasoningText =
|
||||
'I need to think about this carefully. Let me break down the problem:\n\n1. The user is asking for help with something complex\n2. I should provide a thorough and helpful response\n3. I need to consider multiple approaches\n4. The best solution would be to explain step by step\n\nThis approach will ensure clarity and understanding.';
|
||||
|
||||
let reasoningChunk = 'I';
|
||||
let i = 0;
|
||||
while (i < reasoningText.length) {
|
||||
const chunkSize = Math.floor(Math.random() * 5) + 3; // Random 3-7 characters
|
||||
const chunk = reasoningText.slice(i, i + chunkSize);
|
||||
reasoningChunk += chunk;
|
||||
|
||||
// Update the reactive state directly
|
||||
streamingMessage.thinking = reasoningChunk;
|
||||
|
||||
i += chunkSize;
|
||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
||||
}
|
||||
|
||||
const regularText =
|
||||
"Based on my analysis, here's the solution:\n\n**Step 1:** First, we need to understand the requirements clearly.\n\n**Step 2:** Then we can implement the solution systematically.\n\n**Step 3:** Finally, we test and validate the results.\n\nThis approach ensures we cover all aspects of the problem effectively.";
|
||||
|
||||
let contentChunk = '';
|
||||
i = 0;
|
||||
|
||||
while (i < regularText.length) {
|
||||
const chunkSize = Math.floor(Math.random() * 5) + 3; // Random 3-7 characters
|
||||
const chunk = regularText.slice(i, i + chunkSize);
|
||||
contentChunk += chunk;
|
||||
|
||||
// Update the reactive state directly
|
||||
streamingMessage.content = contentChunk;
|
||||
|
||||
i += chunkSize;
|
||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
||||
}
|
||||
|
||||
streamingMessage.timestamp = Date.now();
|
||||
}}
|
||||
>
|
||||
<div class="w-[56rem]">
|
||||
<ChatMessage message={streamingMessage} />
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Processing"
|
||||
args={{
|
||||
message: processingMessage
|
||||
}}
|
||||
play={async () => {
|
||||
const { settingsStore } = await import('$lib/stores/settings.svelte');
|
||||
settingsStore.updateConfig('disableReasoningFormat', false);
|
||||
// Import the chat store to simulate loading state
|
||||
const { chatStore } = await import('$lib/stores/chat.svelte');
|
||||
|
||||
// Set loading state to true to trigger the processing UI
|
||||
chatStore.isLoading = true;
|
||||
|
||||
// Simulate the processing state hook behavior
|
||||
// This will show the "Generating..." text and parameter details
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
}}
|
||||
/>
|
||||
@@ -0,0 +1,19 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import { ChatSettings } from '$lib/components/app';
|
||||
import { fn } from 'storybook/test';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Components/ChatSettings',
|
||||
component: ChatSettings,
|
||||
parameters: {
|
||||
layout: 'fullscreen'
|
||||
},
|
||||
args: {
|
||||
onClose: fn(),
|
||||
onSave: fn()
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Default" />
|
||||
@@ -0,0 +1,97 @@
|
||||
<script module lang="ts">
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import ChatSidebar from '$lib/components/app/chat/ChatSidebar/ChatSidebar.svelte';
|
||||
import { waitFor } from 'storybook/test';
|
||||
import { screen } from 'storybook/test';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Components/ChatSidebar',
|
||||
component: ChatSidebar,
|
||||
parameters: {
|
||||
layout: 'centered'
|
||||
}
|
||||
});
|
||||
|
||||
// Mock conversations for the sidebar
|
||||
const mockConversations: DatabaseConversation[] = [
|
||||
{
|
||||
id: 'conv-1',
|
||||
name: 'Getting Started with AI',
|
||||
lastModified: Date.now() - 1000 * 60 * 5, // 5 minutes ago
|
||||
currNode: 'msg-1'
|
||||
},
|
||||
{
|
||||
id: 'conv-2',
|
||||
name: 'Python Programming Help',
|
||||
lastModified: Date.now() - 1000 * 60 * 60 * 2, // 2 hours ago
|
||||
currNode: 'msg-2'
|
||||
},
|
||||
{
|
||||
id: 'conv-3',
|
||||
name: 'Creative Writing Ideas',
|
||||
lastModified: Date.now() - 1000 * 60 * 60 * 24, // 1 day ago
|
||||
currNode: 'msg-3'
|
||||
},
|
||||
{
|
||||
id: 'conv-4',
|
||||
name: 'This is a very long conversation title that should be truncated properly when displayed',
|
||||
lastModified: Date.now() - 1000 * 60 * 60 * 24 * 3, // 3 days ago
|
||||
currNode: 'msg-4'
|
||||
},
|
||||
{
|
||||
id: 'conv-5',
|
||||
name: 'Math Problem Solving',
|
||||
lastModified: Date.now() - 1000 * 60 * 60 * 24 * 7, // 1 week ago
|
||||
currNode: 'msg-5'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<Story
|
||||
asChild
|
||||
name="Default"
|
||||
play={async () => {
|
||||
const { conversationsStore } = await import('$lib/stores/conversations.svelte');
|
||||
|
||||
waitFor(() => setTimeout(() => {
|
||||
conversationsStore.conversations = mockConversations;
|
||||
}, 0));
|
||||
}}
|
||||
>
|
||||
<div class="flex-column h-full h-screen w-72 bg-background">
|
||||
<ChatSidebar />
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
asChild
|
||||
name="SearchActive"
|
||||
play={async ({ userEvent }) => {
|
||||
const { conversationsStore } = await import('$lib/stores/conversations.svelte');
|
||||
|
||||
waitFor(() => setTimeout(() => {
|
||||
conversationsStore.conversations = mockConversations;
|
||||
}, 0));
|
||||
|
||||
const searchTrigger = screen.getByText('Search conversations');
|
||||
userEvent.click(searchTrigger);
|
||||
}}
|
||||
>
|
||||
<div class="flex-column h-full h-screen w-72 bg-background">
|
||||
<ChatSidebar />
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
asChild
|
||||
name="Empty"
|
||||
play={async () => {
|
||||
// Mock empty conversations store
|
||||
const { conversationsStore } = await import('$lib/stores/conversations.svelte');
|
||||
conversationsStore.conversations = [];
|
||||
}}
|
||||
>
|
||||
<div class="flex-column h-full h-screen w-72 bg-background">
|
||||
<ChatSidebar />
|
||||
</div>
|
||||
</Story>
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
<Meta title="Introduction" />
|
||||
|
||||
# llama.cpp Web UI
|
||||
|
||||
Welcome to the **llama.cpp Web UI** component library! This Storybook showcases the components used in the modern web interface for the llama.cpp server.
|
||||
|
||||
## 🚀 About This Project
|
||||
|
||||
WebUI is a modern web interface for the llama.cpp server, built with SvelteKit and ShadCN UI. Features include:
|
||||
|
||||
- **Real-time chat conversations** with AI assistants
|
||||
- **Multi-conversation management** with persistent storage
|
||||
- **Advanced parameter tuning** for model behavior
|
||||
- **File upload support** for multimodal interactions
|
||||
- **Responsive design** that works on desktop and mobile
|
||||
|
||||
## 🎨 Design System
|
||||
|
||||
The UI is built using:
|
||||
|
||||
- **SvelteKit** - Modern web framework with excellent performance
|
||||
- **Tailwind CSS** - Utility-first CSS framework for rapid styling
|
||||
- **ShadCN/UI** - High-quality, accessible component library
|
||||
- **Lucide Icons** - Beautiful, consistent icon set
|
||||
|
||||
## 🔧 Development
|
||||
|
||||
This Storybook serves as both documentation and a development environment for the UI components. Each story demonstrates:
|
||||
|
||||
- **Component variations** - Different states and configurations
|
||||
- **Interactive examples** - Live components you can interact with
|
||||
- **Usage patterns** - How components work together
|
||||
- **Styling consistency** - Unified design language
|
||||
|
||||
## 🚀 Getting Started
|
||||
|
||||
To explore the components:
|
||||
|
||||
1. **Browse the sidebar** to see all available components
|
||||
2. **Click on stories** to see different component states
|
||||
3. **Use the controls panel** to interact with component props
|
||||
4. **Check the docs tab** for detailed component information
|
||||
@@ -0,0 +1,130 @@
|
||||
<script module lang="ts">
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import { expect } from 'storybook/test';
|
||||
import { MarkdownContent } from '$lib/components/app';
|
||||
import { AI_TUTORIAL_MD } from './fixtures/ai-tutorial.js';
|
||||
import { API_DOCS_MD } from './fixtures/api-docs.js';
|
||||
import { BLOG_POST_MD } from './fixtures/blog-post.js';
|
||||
import { DATA_ANALYSIS_MD } from './fixtures/data-analysis.js';
|
||||
import { README_MD } from './fixtures/readme.js';
|
||||
import { MATH_FORMULAS_MD } from './fixtures/math-formulas.js';
|
||||
import { EMPTY_MD } from './fixtures/empty.js';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Components/MarkdownContent',
|
||||
component: MarkdownContent,
|
||||
parameters: {
|
||||
layout: 'centered'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Empty" args={{ content: EMPTY_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }} />
|
||||
|
||||
<Story
|
||||
name="AI Tutorial"
|
||||
args={{ content: AI_TUTORIAL_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="API Documentation"
|
||||
args={{ content: API_DOCS_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="Technical Blog"
|
||||
args={{ content: BLOG_POST_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="Data Analysis"
|
||||
args={{ content: DATA_ANALYSIS_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="README file"
|
||||
args={{ content: README_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="Math Formulas"
|
||||
args={{ content: MATH_FORMULAS_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="URL Links"
|
||||
args={{
|
||||
content: `# URL Links Test
|
||||
|
||||
Here are some example URLs that should open in new tabs:
|
||||
|
||||
- [Hugging Face Homepage](https://huggingface.co)
|
||||
- [GitHub Repository](https://github.com/ggml-org/llama.cpp)
|
||||
- [OpenAI Website](https://openai.com)
|
||||
- [Google Search](https://www.google.com)
|
||||
|
||||
You can also test inline links like https://example.com or https://docs.python.org.
|
||||
|
||||
All links should have \`target="_blank"\` and \`rel="noopener noreferrer"\` attributes for security.`,
|
||||
class: 'max-w-[56rem] w-[calc(100vw-2rem)]'
|
||||
}}
|
||||
play={async ({ canvasElement }) => {
|
||||
// Wait for component to render
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
|
||||
// Find all links in the rendered content
|
||||
const links = canvasElement.querySelectorAll('a[href]');
|
||||
|
||||
// Test that we have the expected number of links
|
||||
expect(links.length).toBeGreaterThan(0);
|
||||
|
||||
// Test each link for proper attributes
|
||||
links.forEach((link) => {
|
||||
const href = link.getAttribute('href');
|
||||
|
||||
// Test that external links have proper security attributes
|
||||
if (href && (href.startsWith('http://') || href.startsWith('https://'))) {
|
||||
expect(link.getAttribute('target')).toBe('_blank');
|
||||
expect(link.getAttribute('rel')).toBe('noopener noreferrer');
|
||||
}
|
||||
});
|
||||
|
||||
// Test specific links exist
|
||||
const hugginFaceLink = Array.from(links).find(
|
||||
(link) => link.getAttribute('href') === 'https://huggingface.co'
|
||||
);
|
||||
expect(hugginFaceLink).toBeTruthy();
|
||||
expect(hugginFaceLink?.textContent).toBe('Hugging Face Homepage');
|
||||
|
||||
const githubLink = Array.from(links).find(
|
||||
(link) => link.getAttribute('href') === 'https://github.com/ggml-org/llama.cpp'
|
||||
);
|
||||
expect(githubLink).toBeTruthy();
|
||||
expect(githubLink?.textContent).toBe('GitHub Repository');
|
||||
|
||||
const openaiLink = Array.from(links).find(
|
||||
(link) => link.getAttribute('href') === 'https://openai.com'
|
||||
);
|
||||
expect(openaiLink).toBeTruthy();
|
||||
expect(openaiLink?.textContent).toBe('OpenAI Website');
|
||||
|
||||
const googleLink = Array.from(links).find(
|
||||
(link) => link.getAttribute('href') === 'https://www.google.com'
|
||||
);
|
||||
expect(googleLink).toBeTruthy();
|
||||
expect(googleLink?.textContent).toBe('Google Search');
|
||||
|
||||
// Test inline links (auto-linked URLs)
|
||||
const exampleLink = Array.from(links).find(
|
||||
(link) => link.getAttribute('href') === 'https://example.com'
|
||||
);
|
||||
expect(exampleLink).toBeTruthy();
|
||||
|
||||
const pythonDocsLink = Array.from(links).find(
|
||||
(link) => link.getAttribute('href') === 'https://docs.python.org'
|
||||
);
|
||||
expect(pythonDocsLink).toBeTruthy();
|
||||
|
||||
console.log(`✅ URL Links test passed - Found ${links.length} links with proper attributes`);
|
||||
}}
|
||||
/>
|
||||
@@ -0,0 +1,164 @@
|
||||
// AI Assistant Tutorial Response
|
||||
export const AI_TUTORIAL_MD = String.raw`
|
||||
# Building a Modern Chat Application with SvelteKit
|
||||
|
||||
I'll help you create a **production-ready chat application** using SvelteKit, TypeScript, and WebSockets. This implementation includes real-time messaging, user authentication, and message persistence.
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
First, let's set up the project:
|
||||
|
||||
${'```'}bash
|
||||
npm create svelte@latest chat-app
|
||||
cd chat-app
|
||||
npm install
|
||||
npm install socket.io socket.io-client
|
||||
npm install @prisma/client prisma
|
||||
npm run dev
|
||||
${'```'}
|
||||
|
||||
## 📁 Project Structure
|
||||
|
||||
${'```'}
|
||||
chat-app/
|
||||
├── src/
|
||||
│ ├── routes/
|
||||
│ │ ├── +layout.svelte
|
||||
│ │ ├── +page.svelte
|
||||
│ │ └── api/
|
||||
│ │ └── socket/+server.ts
|
||||
│ ├── lib/
|
||||
│ │ ├── components/
|
||||
│ │ │ ├── ChatMessage.svelte
|
||||
│ │ │ └── ChatInput.svelte
|
||||
│ │ └── stores/
|
||||
│ │ └── chat.ts
|
||||
│ └── app.html
|
||||
├── prisma/
|
||||
│ └── schema.prisma
|
||||
└── package.json
|
||||
${'```'}
|
||||
|
||||
## 💻 Implementation
|
||||
|
||||
### WebSocket Server
|
||||
|
||||
${'```'}typescript
|
||||
// src/lib/server/socket.ts
|
||||
import { Server } from 'socket.io';
|
||||
import type { ViteDevServer } from 'vite';
|
||||
|
||||
export function initializeSocketIO(server: ViteDevServer) {
|
||||
const io = new Server(server.httpServer || server, {
|
||||
cors: {
|
||||
origin: process.env.ORIGIN || 'http://localhost:5173',
|
||||
credentials: true
|
||||
}
|
||||
});
|
||||
|
||||
io.on('connection', (socket) => {
|
||||
console.log('User connected:', socket.id);
|
||||
|
||||
socket.on('message', async (data) => {
|
||||
// Broadcast to all clients
|
||||
io.emit('new-message', {
|
||||
id: crypto.randomUUID(),
|
||||
userId: socket.id,
|
||||
content: data.content,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
});
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
console.log('User disconnected:', socket.id);
|
||||
});
|
||||
});
|
||||
|
||||
return io;
|
||||
}
|
||||
${'```'}
|
||||
|
||||
### Client Store
|
||||
|
||||
${'```'}typescript
|
||||
// src/lib/stores/chat.ts
|
||||
import { writable } from 'svelte/store';
|
||||
import io from 'socket.io-client';
|
||||
|
||||
export interface Message {
|
||||
id: string;
|
||||
userId: string;
|
||||
content: string;
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
function createChatStore() {
|
||||
const { subscribe, update } = writable<Message[]>([]);
|
||||
let socket: ReturnType<typeof io>;
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
connect: () => {
|
||||
socket = io('http://localhost:5173');
|
||||
|
||||
socket.on('new-message', (message: Message) => {
|
||||
update(messages => [...messages, message]);
|
||||
});
|
||||
},
|
||||
sendMessage: (content: string) => {
|
||||
if (socket && content.trim()) {
|
||||
socket.emit('message', { content });
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export const chatStore = createChatStore();
|
||||
${'```'}
|
||||
|
||||
## 🎯 Key Features
|
||||
|
||||
✅ **Real-time messaging** with WebSockets
|
||||
✅ **Message persistence** using Prisma + PostgreSQL
|
||||
✅ **Type-safe** with TypeScript
|
||||
✅ **Responsive UI** for all devices
|
||||
✅ **Auto-reconnection** on connection loss
|
||||
|
||||
## 📊 Performance Metrics
|
||||
|
||||
| Metric | Value |
|
||||
|--------|-------|
|
||||
| **Message Latency** | < 50ms |
|
||||
| **Concurrent Users** | 10,000+ |
|
||||
| **Messages/Second** | 5,000+ |
|
||||
| **Uptime** | 99.9% |
|
||||
|
||||
## 🔧 Configuration
|
||||
|
||||
### Environment Variables
|
||||
|
||||
${'```'}env
|
||||
DATABASE_URL="postgresql://user:password@localhost:5432/chat"
|
||||
JWT_SECRET="your-secret-key"
|
||||
REDIS_URL="redis://localhost:6379"
|
||||
${'```'}
|
||||
|
||||
## 🚢 Deployment
|
||||
|
||||
Deploy to production using Docker:
|
||||
|
||||
${'```'}dockerfile
|
||||
FROM node:20-alpine
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm ci --only=production
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
EXPOSE 3000
|
||||
CMD ["node", "build"]
|
||||
${'```'}
|
||||
|
||||
---
|
||||
|
||||
*Need help? Check the [documentation](https://kit.svelte.dev) or [open an issue](https://github.com/sveltejs/kit/issues)*
|
||||
`;
|
||||
@@ -0,0 +1,160 @@
|
||||
// API Documentation
|
||||
export const API_DOCS_MD = String.raw`
|
||||
# REST API Documentation
|
||||
|
||||
## 🔐 Authentication
|
||||
|
||||
All API requests require authentication using **Bearer tokens**. Include your API key in the Authorization header:
|
||||
|
||||
${'```'}http
|
||||
GET /api/v1/users
|
||||
Host: api.example.com
|
||||
Authorization: Bearer YOUR_API_KEY
|
||||
Content-Type: application/json
|
||||
${'```'}
|
||||
|
||||
## 📍 Endpoints
|
||||
|
||||
### Users API
|
||||
|
||||
#### **GET** /api/v1/users
|
||||
|
||||
Retrieve a paginated list of users.
|
||||
|
||||
**Query Parameters:**
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|-----------|------|---------|-------------|
|
||||
| page | integer | 1 | Page number |
|
||||
| limit | integer | 20 | Items per page |
|
||||
| sort | string | "created_at" | Sort field |
|
||||
| order | string | "desc" | Sort order |
|
||||
|
||||
**Response:** 200 OK
|
||||
|
||||
${'```'}json
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"id": "usr_1234567890",
|
||||
"email": "user@example.com",
|
||||
"name": "John Doe",
|
||||
"role": "admin",
|
||||
"created_at": "2024-01-15T10:30:00Z"
|
||||
}
|
||||
],
|
||||
"pagination": {
|
||||
"page": 1,
|
||||
"limit": 20,
|
||||
"total": 156,
|
||||
"pages": 8
|
||||
}
|
||||
}
|
||||
${'```'}
|
||||
|
||||
#### **POST** /api/v1/users
|
||||
|
||||
Create a new user account.
|
||||
|
||||
**Request Body:**
|
||||
|
||||
${'```'}json
|
||||
{
|
||||
"email": "newuser@example.com",
|
||||
"password": "SecurePassword123!",
|
||||
"name": "Jane Smith",
|
||||
"role": "user"
|
||||
}
|
||||
${'```'}
|
||||
|
||||
**Response:** 201 Created
|
||||
|
||||
${'```'}json
|
||||
{
|
||||
"id": "usr_9876543210",
|
||||
"email": "newuser@example.com",
|
||||
"name": "Jane Smith",
|
||||
"role": "user",
|
||||
"created_at": "2024-01-21T09:15:00Z"
|
||||
}
|
||||
${'```'}
|
||||
|
||||
### Error Responses
|
||||
|
||||
The API returns errors in a consistent format:
|
||||
|
||||
${'```'}json
|
||||
{
|
||||
"error": {
|
||||
"code": "VALIDATION_ERROR",
|
||||
"message": "Invalid request parameters",
|
||||
"details": [
|
||||
{
|
||||
"field": "email",
|
||||
"message": "Email format is invalid"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
${'```'}
|
||||
|
||||
### Rate Limiting
|
||||
|
||||
| Tier | Requests/Hour | Burst |
|
||||
|------|--------------|-------|
|
||||
| **Free** | 1,000 | 100 |
|
||||
| **Pro** | 10,000 | 500 |
|
||||
| **Enterprise** | Unlimited | - |
|
||||
|
||||
**Headers:**
|
||||
- X-RateLimit-Limit
|
||||
- X-RateLimit-Remaining
|
||||
- X-RateLimit-Reset
|
||||
|
||||
### Webhooks
|
||||
|
||||
Configure webhooks to receive real-time events:
|
||||
|
||||
${'```'}javascript
|
||||
// Webhook payload
|
||||
{
|
||||
"event": "user.created",
|
||||
"timestamp": "2024-01-21T09:15:00Z",
|
||||
"data": {
|
||||
"id": "usr_9876543210",
|
||||
"email": "newuser@example.com"
|
||||
},
|
||||
"signature": "sha256=abcd1234..."
|
||||
}
|
||||
${'```'}
|
||||
|
||||
### SDK Examples
|
||||
|
||||
**JavaScript/TypeScript:**
|
||||
|
||||
${'```'}typescript
|
||||
import { ApiClient } from '@example/api-sdk';
|
||||
|
||||
const client = new ApiClient({
|
||||
apiKey: process.env.API_KEY
|
||||
});
|
||||
|
||||
const users = await client.users.list({
|
||||
page: 1,
|
||||
limit: 20
|
||||
});
|
||||
${'```'}
|
||||
|
||||
**Python:**
|
||||
|
||||
${'```'}python
|
||||
from example_api import Client
|
||||
|
||||
client = Client(api_key=os.environ['API_KEY'])
|
||||
users = client.users.list(page=1, limit=20)
|
||||
${'```'}
|
||||
|
||||
---
|
||||
|
||||
📚 [Full API Reference](https://api.example.com/docs) | 💬 [Support](https://support.example.com)
|
||||
`;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 798 KiB |
Binary file not shown.
@@ -0,0 +1,8 @@
|
||||
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M230.721 172.7C230.183 170.673 229.313 168.75 228.146 167.008C228.396 166.091 228.587 165.159 228.714 164.217C229.543 158.241 227.471 152.77 223.567 148.537C221.452 146.225 219.185 144.698 216.784 143.761C218.36 137.018 219.157 130.117 219.161 123.193C219.161 120.03 218.982 116.932 218.682 113.88C218.526 112.356 218.337 110.836 218.115 109.32C217.428 104.847 216.408 100.431 215.064 96.11C214.183 93.2707 213.164 90.476 212.01 87.736C210.281 83.6782 208.262 79.75 205.969 75.982C204.465 73.475 202.827 71.0508 201.062 68.72C200.197 67.543 199.296 66.3938 198.358 65.274C195.58 61.898 192.561 58.7277 189.325 55.788C188.25 54.7997 187.145 53.8453 186.01 52.926C184.893 51.9943 183.751 51.0927 182.586 50.222C180.241 48.4766 177.818 46.8392 175.324 45.315C161.543 36.945 145.382 32.145 128.109 32.145C77.817 32.145 37.057 72.907 37.057 123.196C37.055 130.208 37.867 137.196 39.477 144.02C37.317 144.958 35.247 146.42 33.327 148.535C29.424 152.766 27.351 158.217 28.18 164.193C28.306 165.142 28.495 166.082 28.747 167.006C27.5811 168.749 26.7117 170.673 26.174 172.7C24.974 177.261 25.369 181.374 26.894 184.978C25.236 189.688 25.65 194.704 27.809 199.065C29.379 202.25 31.626 204.714 34.396 206.916C37.689 209.534 41.811 211.758 46.783 213.892C52.715 216.422 59.956 218.799 63.249 219.671C71.755 221.873 79.911 223.269 88.177 223.337C99.954 223.446 110.096 220.677 117.357 213.59C120.924 214.027 124.515 214.246 128.109 214.244C131.906 214.236 135.699 213.997 139.467 213.529C146.711 220.661 156.892 223.455 168.712 223.343C176.977 223.277 185.133 221.881 193.617 219.676C196.932 218.804 204.17 216.427 210.105 213.897C215.077 211.76 219.199 209.536 222.514 206.922C225.263 204.719 227.508 202.256 229.079 199.071C231.26 194.709 231.652 189.693 230.017 184.983C231.527 181.379 231.92 177.257 230.721 172.7ZM222.281 184.673C223.952 187.844 224.059 191.427 222.585 194.764C220.349 199.821 214.795 203.805 204.008 208.082C197.3 210.742 191.158 212.443 191.104 212.458C182.232 214.759 174.208 215.928 167.262 215.928C155.76 215.928 147.201 212.754 141.773 206.486C132.594 208.05 123.222 208.103 114.026 206.644C108.591 212.808 100.081 215.928 88.676 215.928C81.729 215.928 73.706 214.759 64.833 212.458C64.779 212.443 58.639 210.742 51.929 208.082C41.143 203.805 35.587 199.824 33.352 194.764C31.878 191.427 31.985 187.844 33.656 184.673C33.81 184.378 33.976 184.091 34.153 183.813C33.1516 182.309 32.4799 180.61 32.182 178.827C31.8842 177.045 31.967 175.22 32.425 173.472C33.089 170.949 34.46 168.851 36.322 167.344C35.425 165.87 34.8365 164.23 34.592 162.522C34.056 158.808 35.289 155.1 38.062 152.076C40.222 149.723 43.275 148.428 46.655 148.428H46.745C44.1965 140.259 42.9044 131.75 42.913 123.193C42.913 76.522 80.749 38.683 127.427 38.683C174.104 38.683 211.94 76.518 211.94 123.193C211.947 131.773 210.646 140.304 208.081 148.492C208.489 148.452 208.889 148.432 209.282 148.431C212.662 148.431 215.716 149.726 217.874 152.079C220.647 155.1 221.881 158.811 221.344 162.525C221.1 164.233 220.511 165.873 219.615 167.347C221.477 168.854 222.849 170.952 223.512 173.475C223.97 175.223 224.053 177.048 223.755 178.831C223.458 180.613 222.786 182.312 221.784 183.816C221.961 184.091 222.129 184.378 222.281 184.673Z" fill="white"/>
|
||||
<path d="M221.784 183.816C222.786 182.312 223.458 180.613 223.756 178.831C224.053 177.048 223.97 175.223 223.512 173.475C222.848 170.952 221.476 168.854 219.615 167.347C220.512 165.873 221.1 164.233 221.344 162.525C221.881 158.811 220.648 155.103 217.874 152.079C215.716 149.726 212.662 148.431 209.282 148.431C208.889 148.431 208.489 148.452 208.081 148.492C210.643 140.304 211.942 131.774 211.933 123.195C211.933 76.5231 174.097 38.6851 127.424 38.6851C80.75 38.6851 42.9099 76.5191 42.9099 123.195C42.9015 131.752 44.1936 140.261 46.742 148.43H46.6519C43.2719 148.43 40.219 149.724 38.06 152.077C35.287 155.098 34.0529 158.81 34.5899 162.523C34.8346 164.231 35.4231 165.872 36.3199 167.346C34.4579 168.852 33.086 170.95 32.422 173.473C31.9642 175.222 31.8817 177.047 32.1799 178.83C32.4781 180.612 33.1501 182.312 34.1519 183.816C33.9739 184.094 33.8099 184.381 33.6549 184.676C31.9849 187.847 31.877 191.43 33.352 194.767C35.588 199.824 41.1419 203.808 51.9289 208.085C58.6359 210.745 64.779 212.446 64.833 212.461C73.705 214.762 81.729 215.931 88.675 215.931C100.081 215.931 108.591 212.811 114.026 206.647C123.222 208.106 132.594 208.052 141.773 206.489C147.201 212.757 155.76 215.931 167.262 215.931C174.208 215.931 182.232 214.762 191.103 212.461C191.158 212.446 197.298 210.745 204.008 208.085C214.795 203.808 220.35 199.824 222.585 194.767C224.059 191.43 223.952 187.847 222.281 184.676C222.129 184.379 221.961 184.091 221.784 183.816ZM110.137 196.997C109.669 197.815 109.168 198.614 108.635 199.391C107.23 201.448 105.382 203.02 103.237 204.188C99.1369 206.424 93.947 207.205 88.675 207.205C80.346 207.205 71.808 205.256 67.023 204.015C66.787 203.954 37.689 195.735 41.373 188.739C41.993 187.562 43.0129 187.092 44.2979 187.092C49.4849 187.092 58.9299 194.816 62.9889 194.816C63.8959 194.816 64.5359 194.43 64.7969 193.488C66.5269 187.284 38.5039 184.676 40.8639 175.692C41.2799 174.102 42.41 173.456 43.998 173.456C50.856 173.455 66.248 185.516 69.467 185.516C69.714 185.516 69.8909 185.443 69.9869 185.291C70.0009 185.268 70.015 185.246 70.028 185.222C71.539 182.727 70.6719 180.913 60.3209 174.573L59.3269 173.968C47.9359 167.074 39.9409 162.925 44.4879 157.975C45.0109 157.404 45.7529 157.151 46.6539 157.151C47.7219 157.151 49.0149 157.508 50.4389 158.108C56.4549 160.645 64.793 167.564 68.276 170.581C68.8239 171.057 69.3683 171.538 69.9089 172.022C69.9089 172.022 74.319 176.608 76.985 176.608C77.599 176.608 78.1199 176.366 78.4729 175.768C80.364 172.58 60.9099 157.838 59.8129 151.755C59.0689 147.634 60.3349 145.546 62.6749 145.546C63.7879 145.546 65.1459 146.02 66.6449 146.971C71.2949 149.922 80.2729 165.35 83.5599 171.352C84.6619 173.363 86.5429 174.213 88.2379 174.213C91.6009 174.213 94.2299 170.87 88.5459 166.622C80.0029 160.23 83.001 149.782 87.078 149.139C87.252 149.111 87.4279 149.097 87.6029 149.097C91.3109 149.097 92.9459 155.486 92.9459 155.486C92.9459 155.486 97.7399 167.524 105.975 175.753C113.447 183.222 114.491 189.351 110.137 196.997ZM136.766 198.407L136.339 198.458L135.611 198.541C135.228 198.581 134.844 198.619 134.459 198.654L134.084 198.688L133.741 198.717L133.255 198.756L132.718 198.795L132.182 198.83L132.063 198.838C131.923 198.846 131.783 198.855 131.641 198.862L131.462 198.872C131.296 198.881 131.13 198.889 130.962 198.896L130.381 198.921L129.854 198.939L129.502 198.949H129.323C129.213 198.949 129.104 198.955 128.994 198.956H128.82C128.71 198.956 128.601 198.956 128.491 198.961L128.043 198.967H127.418C126.927 198.967 126.437 198.962 125.949 198.952L125.553 198.943C125.44 198.943 125.327 198.938 125.216 198.934L124.796 198.922L124.275 198.902L123.805 198.881L123.684 198.876L123.237 198.853C123.112 198.846 122.989 198.84 122.865 198.831L122.576 198.814C122.213 198.791 121.85 198.766 121.487 198.738L121.107 198.707C120.947 198.695 120.787 198.68 120.628 198.666C120.441 198.65 120.254 198.632 120.067 198.614C119.754 198.585 119.441 198.553 119.128 198.519H119.113C123.683 188.324 121.372 178.802 112.137 169.575C106.08 163.526 102.051 154.594 101.215 152.633C99.5229 146.828 95.045 140.375 87.608 140.375C86.979 140.375 86.351 140.425 85.73 140.523C82.472 141.036 79.624 142.911 77.592 145.733C75.396 143.002 73.262 140.831 71.332 139.605C68.422 137.76 65.5179 136.824 62.6889 136.824C59.1579 136.824 56.0019 138.274 53.8019 140.904L53.7459 140.971C53.7039 140.798 53.6639 140.625 53.6229 140.451L53.6179 140.428C53.1992 138.638 52.8477 136.833 52.5639 135.016C52.5639 135.004 52.5639 134.992 52.5579 134.98C52.5359 134.843 52.5159 134.705 52.4949 134.568C52.4334 134.162 52.3757 133.755 52.3219 133.348C52.2979 133.163 52.2719 132.978 52.2489 132.793L52.1809 132.238C52.1589 132.053 52.1409 131.885 52.1209 131.709L52.115 131.665C52.0351 130.945 51.9651 130.225 51.9049 129.503L51.8829 129.226L51.8479 128.754C51.8379 128.625 51.8279 128.495 51.8209 128.365C51.8209 128.334 51.8159 128.304 51.8149 128.275C51.7895 127.913 51.7678 127.55 51.7499 127.187C51.7399 126.998 51.7299 126.81 51.7219 126.62L51.7019 126.124L51.6969 125.974L5Line truncated
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M203.21 123.685V123.194C203.21 81.34 169.292 47.411 127.435 47.411C85.5791 47.411 51.648 81.342 51.648 123.194V123.358C51.646 123.467 51.645 123.576 51.648 123.685C51.6529 123.848 51.6546 124.011 51.653 124.174L51.6581 124.534L51.661 124.663C51.661 124.723 51.6631 124.782 51.6651 124.842C51.6681 124.937 51.67 125.033 51.67 125.128L51.681 125.517L51.697 125.974L51.702 126.124L51.722 126.597V126.62C51.73 126.805 51.7401 126.989 51.7491 127.173L51.75 127.187C51.76 127.375 51.7701 127.564 51.7821 127.753C51.7921 127.927 51.802 128.101 51.815 128.275L51.8171 128.306C51.8258 128.455 51.8358 128.605 51.847 128.754L51.85 128.794L51.883 129.226L51.8861 129.254C51.8921 129.338 51.898 129.422 51.906 129.503C51.9658 130.224 52.0355 130.945 52.1151 131.664L52.12 131.709L52.181 132.238L52.2491 132.793L52.299 133.17L52.322 133.347C52.3753 133.755 52.433 134.162 52.495 134.568L52.4991 134.595L52.558 134.979C52.8435 136.808 53.1971 138.626 53.618 140.429L53.6231 140.451L53.655 140.586L53.746 140.971L53.802 140.904C56.002 138.274 59.158 136.824 62.689 136.824C65.519 136.824 68.4221 137.76 71.3321 139.605C73.2621 140.831 75.3961 143.002 77.5921 145.733C79.6241 142.911 82.4721 141.035 85.7301 140.523C86.3513 140.425 86.9792 140.376 87.6081 140.375C95.0441 140.375 99.523 146.828 101.215 152.633C102.051 154.594 106.08 163.526 112.156 169.568C121.392 178.795 123.703 188.316 119.132 198.511H119.148C119.459 198.546 119.772 198.578 120.087 198.607C120.274 198.625 120.46 198.643 120.648 198.659L120.714 198.665L121.127 198.7L121.507 198.73C121.869 198.758 122.232 198.784 122.596 198.807L122.885 198.824L123.114 198.838L123.256 198.846L123.703 198.869L123.825 198.874L124.294 198.895L124.816 198.915L125.235 198.927L125.305 198.929C125.394 198.933 125.483 198.936 125.572 198.936L125.668 198.939C126.258 198.953 126.847 198.96 127.437 198.959H128.063L128.51 198.954C128.62 198.949 128.729 198.949 128.84 198.949H129.014L129.165 198.945C129.224 198.943 129.283 198.941 129.343 198.941H129.522L129.873 198.932L130.401 198.914L130.982 198.888C131.15 198.882 131.316 198.873 131.482 198.865L131.661 198.854L131.927 198.84L132.083 198.831L132.201 198.823L132.738 198.788L133.274 198.749L133.761 198.71L134.103 198.681L134.479 198.647C135.107 198.591 135.733 198.525 136.359 198.45L136.786 198.399C132.287 188.247 134.616 178.767 143.813 169.577C149.876 163.519 153.905 154.587 154.745 152.625C156.438 146.821 160.914 140.368 168.352 140.368C168.981 140.368 169.61 140.418 170.231 140.516C173.486 141.028 176.334 142.904 178.369 145.726C180.566 142.996 182.699 140.823 184.63 139.597C187.539 137.753 190.445 136.817 193.272 136.817C196.388 136.817 199.212 137.947 201.345 140.02C201.384 139.851 201.422 139.682 201.459 139.512L201.568 139.006C201.607 138.821 201.646 138.636 201.683 138.451C201.749 138.124 201.815 137.797 201.878 137.467C201.944 137.125 202.007 136.781 202.067 136.437L202.098 136.251C202.117 136.141 202.135 136.031 202.156 135.92C202.19 135.748 202.218 135.576 202.246 135.402L202.257 135.336L202.328 134.883L202.398 134.424V134.42C202.449 134.081 202.497 133.742 202.542 133.403L202.553 133.319L202.616 132.841L202.667 132.433L202.757 131.629L202.792 131.306L202.801 131.218C202.82 131.044 202.838 130.87 202.854 130.696V130.682C202.867 130.544 202.881 130.405 202.893 130.266C202.964 129.478 203.024 128.686 203.072 127.891C203.081 127.761 203.088 127.63 203.096 127.499V127.493L203.122 127.002L203.128 126.892C203.144 126.56 203.158 126.228 203.169 125.896V125.884L203.174 125.754C203.179 125.645 203.183 125.535 203.183 125.425L203.185 125.381C203.189 125.278 203.193 125.172 203.193 125.067L203.196 124.977C203.199 124.872 203.202 124.768 203.202 124.663L203.204 124.574C203.207 124.441 203.21 124.307 203.21 124.174V123.685ZM108.638 199.391C114.64 190.59 114.214 183.984 105.98 175.754C97.7441 167.523 92.951 155.487 92.951 155.487C92.951 155.487 91.1621 148.496 87.0821 149.138C83.0021 149.78 80.0091 160.227 88.5521 166.622C97.0941 173.017 86.8521 177.353 83.5641 171.352C80.2761 165.35 71.299 149.923 66.645 146.972C61.991 144.021 58.718 145.675 59.815 151.757C60.36 154.776 65.4281 159.929 70.1631 164.743C74.9671 169.627 79.428 174.163 78.474 175.768C76.581 178.955 69.9141 172.023 69.9141 172.023C69.9141 172.023 49.038 153.025 44.494 157.976C40.304 162.539 46.765 166.418 56.7211 172.397C57.5671 172.905 58.4391 173.429 59.3321 173.969C70.7231 180.865 71.609 182.684 69.992 185.293C69.395 186.257 65.582 183.968 60.892 181.153C52.897 176.352 42.3551 170.023 40.8661 175.688C39.5781 180.591 47.334 183.595 54.368 186.32C60.228 188.59 65.5881 190.666 64.7991 193.484C63.9821 196.406 59.5531 193.969 54.7121 191.305C49.2771 188.314 43.3221 185.038 41.3731 188.735C37.6901 195.725 66.7831 203.954 67.0231 204.015C76.4231 206.453 100.295 211.619 108.638 199.391ZM147.303 199.391C141.301 190.59 141.727 183.984 149.962 175.754C158.197 167.523 162.99 155.487 162.99 155.487C162.99 155.487 164.779 148.496 168.859 149.138C172.939 149Line truncated
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M152.047 102.567C153.229 102.985 154.108 104.257 154.944 105.468C156.074 107.104 157.126 108.627 158.74 107.769C160.644 106.756 162.205 105.202 163.225 103.302C164.246 101.402 164.681 99.2427 164.475 97.096C164.321 95.4908 163.813 93.9398 162.987 92.5548C162.161 91.1697 161.038 89.985 159.7 89.0862C158.361 88.1874 156.839 87.5968 155.245 87.3569C153.65 87.117 152.022 87.2339 150.478 87.699C148.934 88.1639 147.513 88.9653 146.316 90.0455C145.119 91.1257 144.176 92.4578 143.556 93.946C142.936 95.4342 142.653 97.0415 142.728 98.652C142.804 100.263 143.235 101.836 143.992 103.26C144.74 104.667 146.4 104.003 148.152 103.302C149.525 102.753 150.956 102.181 152.047 102.567ZM100.672 102.567C99.49 102.985 98.611 104.258 97.775 105.468C96.645 107.105 95.592 108.627 93.979 107.769C91.5845 106.501 89.7482 104.386 88.8278 101.838C87.9075 99.2895 87.9692 96.4896 89.0008 93.9841C90.0324 91.4786 91.9601 89.4471 94.408 88.2855C96.856 87.1239 99.6488 86.9156 102.242 87.701C104.307 88.3228 106.141 89.5427 107.513 91.2065C108.885 92.8704 109.732 94.9035 109.949 97.049C110.165 99.1945 109.74 101.356 108.728 103.26C107.979 104.667 106.319 104.003 104.567 103.303C103.193 102.753 101.764 102.181 100.672 102.567ZM144.099 149.318C152.242 142.903 155.233 132.429 155.233 125.977C155.233 120.877 151.802 122.482 146.309 125.202L145.999 125.355C140.957 127.852 134.245 131.177 126.877 131.177C119.508 131.177 112.796 127.852 107.755 125.354C102.084 122.545 98.527 120.783 98.527 125.978C98.527 132.634 101.709 143.563 110.443 149.912C111.596 147.573 113.219 145.497 115.211 143.813C117.202 142.129 119.52 140.874 122.018 140.126C122.89 139.866 123.788 141.367 124.707 142.904C125.594 144.386 126.501 145.902 127.423 145.902C128.406 145.902 129.371 144.408 130.314 142.95C131.299 141.425 132.26 139.94 133.189 140.237C137.864 141.738 141.775 144.993 144.099 149.318Z" fill="#32343D"/>
|
||||
<path d="M144.097 149.317C139.856 152.659 134.219 154.9 126.878 154.9C119.981 154.9 114.587 152.922 110.443 149.911C111.596 147.572 113.219 145.495 115.211 143.812C117.202 142.128 119.52 140.873 122.018 140.125C123.73 139.614 125.545 145.901 127.423 145.901C129.433 145.901 131.37 139.655 133.189 140.236C137.863 141.738 141.773 144.993 144.097 149.317Z" fill="#FF323D"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M81.2 111.64C80.2312 112.288 79.1173 112.687 77.9572 112.801C76.7971 112.916 75.6267 112.742 74.55 112.295C73.6893 111.94 72.9072 111.418 72.2488 110.759C71.5903 110.101 71.0684 109.319 70.713 108.458C70.267 107.381 70.0935 106.211 70.2082 105.051C70.3228 103.891 70.7219 102.777 71.37 101.808C72.1488 100.642 73.2558 99.7333 74.5512 99.1967C75.8466 98.6601 77.272 98.5197 78.6471 98.7935C80.0223 99.0672 81.2853 99.7427 82.2764 100.734C83.2675 101.726 83.9422 102.99 84.215 104.365C84.4883 105.74 84.3477 107.165 83.8113 108.46C83.2748 109.755 82.3654 110.861 81.2 111.64ZM182.613 111.64C181.644 112.288 180.53 112.687 179.37 112.801C178.209 112.916 177.039 112.742 175.962 112.295C175.101 111.939 174.319 111.418 173.661 110.759C173.003 110.101 172.481 109.319 172.125 108.458C171.68 107.381 171.507 106.211 171.621 105.051C171.736 103.891 172.135 102.777 172.782 101.808C173.364 100.936 174.133 100.205 175.032 99.6658C175.931 99.1269 176.938 98.7942 177.981 98.6917C179.025 98.5891 180.078 98.7193 181.064 99.0728C182.051 99.4264 182.947 99.9944 183.688 100.736C184.68 101.727 185.355 102.99 185.628 104.365C185.902 105.74 185.761 107.165 185.224 108.46C184.687 109.755 183.779 110.861 182.613 111.64Z" fill="#FFAD03"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 34 KiB |
@@ -0,0 +1,125 @@
|
||||
// Blog Post Content
|
||||
export const BLOG_POST_MD = String.raw`
|
||||
# Understanding Rust's Ownership System
|
||||
|
||||
*Published on March 15, 2024 • 8 min read*
|
||||
|
||||
Rust's ownership system is one of its most distinctive features, enabling memory safety without garbage collection. In this post, we'll explore how ownership works and why it's revolutionary for systems programming.
|
||||
|
||||
## What is Ownership?
|
||||
|
||||
Ownership is a set of rules that governs how Rust manages memory. These rules are checked at compile time, ensuring memory safety without runtime overhead.
|
||||
|
||||
### The Three Rules of Ownership
|
||||
|
||||
1. **Each value has a single owner**
|
||||
2. **There can only be one owner at a time**
|
||||
3. **When the owner goes out of scope, the value is dropped**
|
||||
|
||||
## Memory Management Without GC
|
||||
|
||||
Traditional approaches to memory management:
|
||||
|
||||
- **Manual management** (C/C++): Error-prone, leads to bugs
|
||||
- **Garbage collection** (Java, Python): Runtime overhead
|
||||
- **Ownership** (Rust): Compile-time safety, zero runtime cost
|
||||
|
||||
## Basic Examples
|
||||
|
||||
### Variable Scope
|
||||
|
||||
${'```'}rust
|
||||
fn main() {
|
||||
let s = String::from("hello"); // s comes into scope
|
||||
|
||||
// s is valid here
|
||||
println!("{}", s);
|
||||
|
||||
} // s goes out of scope and is dropped
|
||||
${'```'}
|
||||
|
||||
### Move Semantics
|
||||
|
||||
${'```'}rust
|
||||
fn main() {
|
||||
let s1 = String::from("hello");
|
||||
let s2 = s1; // s1 is moved to s2
|
||||
|
||||
// println!("{}", s1); // ❌ ERROR: s1 is no longer valid
|
||||
println!("{}", s2); // ✅ OK: s2 owns the string
|
||||
}
|
||||
${'```'}
|
||||
|
||||
## Borrowing and References
|
||||
|
||||
Instead of transferring ownership, you can **borrow** values:
|
||||
|
||||
### Immutable References
|
||||
|
||||
${'```'}rust
|
||||
fn calculate_length(s: &String) -> usize {
|
||||
s.len() // s is a reference, doesn't own the String
|
||||
}
|
||||
|
||||
fn main() {
|
||||
let s1 = String::from("hello");
|
||||
let len = calculate_length(&s1); // Borrow s1
|
||||
println!("Length of '{}' is {}", s1, len); // s1 still valid
|
||||
}
|
||||
${'```'}
|
||||
|
||||
### Mutable References
|
||||
|
||||
${'```'}rust
|
||||
fn main() {
|
||||
let mut s = String::from("hello");
|
||||
|
||||
let r1 = &mut s;
|
||||
r1.push_str(", world");
|
||||
println!("{}", r1);
|
||||
|
||||
// let r2 = &mut s; // ❌ ERROR: cannot borrow twice
|
||||
}
|
||||
${'```'}
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
### Dangling References
|
||||
|
||||
${'```'}rust
|
||||
fn dangle() -> &String { // ❌ ERROR: missing lifetime specifier
|
||||
let s = String::from("hello");
|
||||
&s // s will be dropped, leaving a dangling reference
|
||||
}
|
||||
${'```'}
|
||||
|
||||
### ✅ Solution
|
||||
|
||||
${'```'}rust
|
||||
fn no_dangle() -> String {
|
||||
let s = String::from("hello");
|
||||
s // Ownership is moved out
|
||||
}
|
||||
${'```'}
|
||||
|
||||
## Benefits
|
||||
|
||||
- ✅ **No null pointer dereferences**
|
||||
- ✅ **No data races**
|
||||
- ✅ **No use-after-free**
|
||||
- ✅ **No memory leaks**
|
||||
|
||||
## Conclusion
|
||||
|
||||
Rust's ownership system eliminates entire classes of bugs at compile time. While it has a learning curve, the benefits in safety and performance are worth it.
|
||||
|
||||
## Further Reading
|
||||
|
||||
- [The Rust Book - Ownership](https://doc.rust-lang.org/book/ch04-00-understanding-ownership.html)
|
||||
- [Rust by Example - Ownership](https://doc.rust-lang.org/rust-by-example/scope/move.html)
|
||||
- [Rustlings Exercises](https://github.com/rust-lang/rustlings)
|
||||
|
||||
---
|
||||
|
||||
*Questions? Reach out on [Twitter](https://twitter.com/rustlang) or join the [Rust Discord](https://discord.gg/rust-lang)*
|
||||
`;
|
||||
@@ -0,0 +1,124 @@
|
||||
// Data Analysis Report
|
||||
export const DATA_ANALYSIS_MD = String.raw`
|
||||
# Q4 2024 Business Analytics Report
|
||||
|
||||
*Executive Summary • Generated on January 15, 2025*
|
||||
|
||||
## 📊 Key Performance Indicators
|
||||
|
||||
${'```'}
|
||||
Daily Active Users (DAU): 1.2M (+65% YoY)
|
||||
Monthly Active Users (MAU): 4.5M (+48% YoY)
|
||||
User Retention (Day 30): 68% (+12pp YoY)
|
||||
Average Session Duration: 24min (+35% YoY)
|
||||
${'```'}
|
||||
|
||||
## 🎯 Product Performance
|
||||
|
||||
### Feature Adoption Rates
|
||||
|
||||
1. **AI Assistant**: 78% of users (↑ from 45%)
|
||||
2. **Collaboration Tools**: 62% of users (↑ from 38%)
|
||||
3. **Analytics Dashboard**: 54% of users (↑ from 31%)
|
||||
4. **Mobile App**: 41% of users (↑ from 22%)
|
||||
|
||||
### Customer Satisfaction
|
||||
|
||||
| Metric | Q4 2024 | Q3 2024 | Change |
|
||||
|--------|---------|---------|--------|
|
||||
| **NPS Score** | 72 | 68 | +4 |
|
||||
| **CSAT** | 4.6/5 | 4.4/5 | +0.2 |
|
||||
| **Support Tickets** | 2,340 | 2,890 | -19% |
|
||||
| **Resolution Time** | 4.2h | 5.1h | -18% |
|
||||
|
||||
## 💰 Revenue Metrics
|
||||
|
||||
### Monthly Recurring Revenue (MRR)
|
||||
|
||||
- **Current MRR**: $2.8M (+42% YoY)
|
||||
- **New MRR**: $340K
|
||||
- **Expansion MRR**: $180K
|
||||
- **Churned MRR**: $95K
|
||||
- **Net New MRR**: $425K
|
||||
|
||||
### Customer Acquisition
|
||||
|
||||
${'```'}
|
||||
Cost per Acquisition (CAC): $127 (-23% YoY)
|
||||
Customer Lifetime Value: $1,840 (+31% YoY)
|
||||
LTV:CAC Ratio: 14.5:1
|
||||
Payback Period: 3.2 months
|
||||
${'```'}
|
||||
|
||||
## 🌍 Geographic Performance
|
||||
|
||||
### Revenue by Region
|
||||
|
||||
1. **North America**: 45% ($1.26M)
|
||||
2. **Europe**: 32% ($896K)
|
||||
3. **Asia-Pacific**: 18% ($504K)
|
||||
4. **Other**: 5% ($140K)
|
||||
|
||||
### Growth Opportunities
|
||||
|
||||
- **APAC**: 89% YoY growth potential
|
||||
- **Latin America**: Emerging market entry
|
||||
- **Middle East**: Enterprise expansion
|
||||
|
||||
## 📱 Channel Performance
|
||||
|
||||
### Traffic Sources
|
||||
|
||||
| Channel | Sessions | Conversion | Revenue |
|
||||
|---------|----------|------------|---------|
|
||||
| **Organic Search** | 45% | 3.2% | $1.1M |
|
||||
| **Direct** | 28% | 4.1% | $850K |
|
||||
| **Social Media** | 15% | 2.8% | $420K |
|
||||
| **Paid Ads** | 12% | 5.5% | $430K |
|
||||
|
||||
### Marketing ROI
|
||||
|
||||
- **Content Marketing**: 340% ROI
|
||||
- **Email Campaigns**: 280% ROI
|
||||
- **Social Media**: 190% ROI
|
||||
- **Paid Search**: 220% ROI
|
||||
|
||||
## 🔍 User Behavior Analysis
|
||||
|
||||
### Session Patterns
|
||||
|
||||
- **Peak Hours**: 9-11 AM, 2-4 PM EST
|
||||
- **Mobile Usage**: 67% of sessions
|
||||
- **Average Pages/Session**: 4.8
|
||||
- **Bounce Rate**: 23% (↓ from 31%)
|
||||
|
||||
### Feature Usage Heatmap
|
||||
|
||||
Most used features in order:
|
||||
1. Dashboard (89% of users)
|
||||
2. Search (76% of users)
|
||||
3. Reports (64% of users)
|
||||
4. Settings (45% of users)
|
||||
5. Integrations (32% of users)
|
||||
|
||||
## 💡 Recommendations
|
||||
|
||||
1. **Invest** in AI capabilities (+$2M budget)
|
||||
2. **Expand** sales team in APAC region
|
||||
3. **Improve** onboarding to reduce churn
|
||||
4. **Launch** enterprise security features
|
||||
|
||||
## Appendix
|
||||
|
||||
### Methodology
|
||||
|
||||
Data collected from:
|
||||
- Internal analytics (Amplitude)
|
||||
- Customer surveys (n=2,450)
|
||||
- Financial systems (NetSuite)
|
||||
- Market research (Gartner)
|
||||
|
||||
---
|
||||
|
||||
*Report prepared by Data Analytics Team • [View Interactive Dashboard](https://analytics.example.com)*
|
||||
`;
|
||||
@@ -0,0 +1,2 @@
|
||||
// Empty state
|
||||
export const EMPTY_MD = '';
|
||||
@@ -0,0 +1,221 @@
|
||||
/* eslint-disable no-irregular-whitespace */
|
||||
// Math Formulas Content
|
||||
export const MATH_FORMULAS_MD = String.raw`
|
||||
# Mathematical Formulas and Expressions
|
||||
|
||||
This document demonstrates various mathematical notation and formulas that can be rendered using LaTeX syntax in markdown.
|
||||
|
||||
## Basic Arithmetic
|
||||
|
||||
### Addition and Summation
|
||||
$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$
|
||||
|
||||
## Algebra
|
||||
|
||||
### Quadratic Formula
|
||||
The solutions to $ax^2 + bx + c = 0$ are:
|
||||
$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$
|
||||
|
||||
### Binomial Theorem
|
||||
$$(x + y)^n = \sum_{k=0}^{n} \binom{n}{k} x^{n-k} y^k$$
|
||||
|
||||
## Calculus
|
||||
|
||||
### Derivatives
|
||||
The derivative of $f(x) = x^n$ is:
|
||||
$$f'(x) = nx^{n-1}$$
|
||||
|
||||
### Integration
|
||||
$$\int_a^b f(x) \, dx = F(b) - F(a)$$
|
||||
|
||||
### Fundamental Theorem of Calculus
|
||||
$$\frac{d}{dx} \int_a^x f(t) \, dt = f(x)$$
|
||||
|
||||
## Linear Algebra
|
||||
|
||||
### Matrix Multiplication
|
||||
If $A$ is an $m \times n$ matrix and $B$ is an $n \times p$ matrix, then:
|
||||
$$C_{ij} = \sum_{k=1}^{n} A_{ik} B_{kj}$$
|
||||
|
||||
### Eigenvalues and Eigenvectors
|
||||
For a square matrix $A$, if $Av = \lambda v$ for some non-zero vector $v$, then:
|
||||
- $\lambda$ is an eigenvalue
|
||||
- $v$ is an eigenvector
|
||||
|
||||
## Statistics and Probability
|
||||
|
||||
### Normal Distribution
|
||||
The probability density function is:
|
||||
$$f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}$$
|
||||
|
||||
### Bayes' Theorem
|
||||
$$P(A|B) = \frac{P(B|A) \cdot P(A)}{P(B)}$$
|
||||
|
||||
### Central Limit Theorem
|
||||
For large $n$, the sample mean $\bar{X}$ is approximately:
|
||||
$$\bar{X} \sim N\left(\mu, \frac{\sigma^2}{n}\right)$$
|
||||
|
||||
## Trigonometry
|
||||
|
||||
### Pythagorean Identity
|
||||
$$\sin^2\theta + \cos^2\theta = 1$$
|
||||
|
||||
### Euler's Formula
|
||||
$$e^{i\theta} = \cos\theta + i\sin\theta$$
|
||||
|
||||
### Taylor Series for Sine
|
||||
$$\sin x = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!} x^{2n+1} = x - \frac{x^3}{3!} + \frac{x^5}{5!} - \frac{x^7}{7!} + \cdots$$
|
||||
|
||||
## Complex Analysis
|
||||
|
||||
### Complex Numbers
|
||||
A complex number can be written as:
|
||||
$$z = a + bi = r e^{i\theta}$$
|
||||
|
||||
where $r = |z| = \sqrt{a^2 + b^2}$ and $\theta = \arg(z)$
|
||||
|
||||
### Cauchy-Riemann Equations
|
||||
For a function $f(z) = u(x,y) + iv(x,y)$ to be analytic:
|
||||
$$\frac{\partial u}{\partial x} = \frac{\partial v}{\partial y}, \quad \frac{\partial u}{\partial y} = -\frac{\partial v}{\partial x}$$
|
||||
|
||||
## Differential Equations
|
||||
|
||||
### First-order Linear ODE
|
||||
$$\frac{dy}{dx} + P(x)y = Q(x)$$
|
||||
|
||||
Solution: $y = e^{-\int P(x)dx}\left[\int Q(x)e^{\int P(x)dx}dx + C\right]$
|
||||
|
||||
### Heat Equation
|
||||
$$\frac{\partial u}{\partial t} = \alpha \frac{\partial^2 u}{\partial x^2}$$
|
||||
|
||||
## Number Theory
|
||||
|
||||
### Prime Number Theorem
|
||||
$$\pi(x) \sim \frac{x}{\ln x}$$
|
||||
|
||||
where $\pi(x)$ is the number of primes less than or equal to $x$.
|
||||
|
||||
### Fermat's Last Theorem
|
||||
For $n > 2$, there are no positive integers $a$, $b$, and $c$ such that:
|
||||
$$a^n + b^n = c^n$$
|
||||
|
||||
## Set Theory
|
||||
|
||||
### De Morgan's Laws
|
||||
$$\overline{A \cup B} = \overline{A} \cap \overline{B}$$
|
||||
$$\overline{A \cap B} = \overline{A} \cup \overline{B}$$
|
||||
|
||||
## Advanced Topics
|
||||
|
||||
### Riemann Zeta Function
|
||||
$$\zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s} = \prod_{p \text{ prime}} \frac{1}{1-p^{-s}}$$
|
||||
|
||||
### Maxwell's Equations
|
||||
$$\nabla \cdot \mathbf{E} = \frac{\rho}{\epsilon_0}$$
|
||||
$$\nabla \cdot \mathbf{B} = 0$$
|
||||
$$\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}$$
|
||||
$$\nabla \times \mathbf{B} = \mu_0\mathbf{J} + \mu_0\epsilon_0\frac{\partial \mathbf{E}}{\partial t}$$
|
||||
|
||||
### Schrödinger Equation
|
||||
$$i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \hat{H}\Psi(\mathbf{r},t)$$
|
||||
|
||||
## Inline Math Examples
|
||||
|
||||
Here are some inline mathematical expressions:
|
||||
|
||||
- The golden ratio: $\phi = \frac{1 + \sqrt{5}}{2} \approx 1.618$
|
||||
- Euler's number: $e = \lim_{n \to \infty} \left(1 + \frac{1}{n}\right)^n$
|
||||
- Pi: $\pi = 4 \sum_{n=0}^{\infty} \frac{(-1)^n}{2n+1}$
|
||||
- Square root of 2: $\sqrt{2} = 1.41421356...$
|
||||
|
||||
## Fractions and Radicals
|
||||
|
||||
Complex fraction: $\frac{\frac{a}{b} + \frac{c}{d}}{\frac{e}{f} - \frac{g}{h}}$
|
||||
|
||||
Nested radicals: $\sqrt{2 + \sqrt{3 + \sqrt{4 + \sqrt{5}}}}$
|
||||
|
||||
## Summations and Products
|
||||
|
||||
### Geometric Series
|
||||
$$\sum_{n=0}^{\infty} ar^n = \frac{a}{1-r} \quad \text{for } |r| < 1$$
|
||||
|
||||
### Product Notation
|
||||
$$n! = \prod_{k=1}^{n} k$$
|
||||
|
||||
### Double Summation
|
||||
$$\sum_{i=1}^{m} \sum_{j=1}^{n} a_{ij}$$
|
||||
|
||||
## Limits
|
||||
|
||||
$$\lim_{x \to 0} \frac{\sin x}{x} = 1$$
|
||||
|
||||
$$\lim_{n \to \infty} \left(1 + \frac{x}{n}\right)^n = e^x$$
|
||||
|
||||
## Further Bracket Styles and Amounts
|
||||
|
||||
- \( \mathrm{GL}_2(\mathbb{F}_7) \): Group of invertible matrices with entries in \(\mathbb{F}_7\).
|
||||
- Some kernel of \(\mathrm{SL}_2(\mathbb{F}_7)\):
|
||||
\[
|
||||
\left\{ \begin{pmatrix} 1 & 0 \\ 0 & 1 \end{pmatrix}, \begin{pmatrix} -1 & 0 \\ 0 & -1 \end{pmatrix} \right\} = \{\pm I\}
|
||||
\]
|
||||
- Algebra:
|
||||
\[
|
||||
x = \frac{-b \pm \sqrt{\,b^{2}-4ac\,}}{2a}
|
||||
\]
|
||||
- $100 and $12.99 are amounts, not LaTeX.
|
||||
- I have $10, $3.99 and $x + y$ and $100x$. The amount is $2,000.
|
||||
- Emma buys 2 cupcakes for $3 each and 1 cookie for $1.50. How much money does she spend in total?
|
||||
- Maria has $20. She buys a notebook for $4.75 and a pack of pencils for $3.25. How much change does she receive?
|
||||
- 1 kg の質量は
|
||||
\[
|
||||
E = (1\ \text{kg}) \times (3.0 \times 10^8\ \text{m/s})^2 \approx 9.0 \times 10^{16}\ \text{J}
|
||||
\]
|
||||
というエネルギーに相当します。これは約 21 百万トンの TNT が爆発したときのエネルギーに匹敵します。
|
||||
- Algebra: \[
|
||||
x = \frac{-b \pm \sqrt{\,b^{2}-4ac\,}}{2a}
|
||||
\]
|
||||
- Algebraic topology, Homotopy Groups of $\mathbb{S}^3$:
|
||||
$$\pi_n(\mathbb{S}^3) = \begin{cases}
|
||||
\mathbb{Z} & n = 3 \\
|
||||
0 & n > 3, n \neq 4 \\
|
||||
\mathbb{Z}_2 & n = 4 \\
|
||||
\end{cases}$$
|
||||
- Spacer preceded by backslash:
|
||||
\[
|
||||
\boxed{
|
||||
\begin{aligned}
|
||||
N_{\text{att}}^{\text{(MHA)}} &=
|
||||
h \bigl[\, d_{\text{model}}\;d_{k} + d_{\text{model}}\;d_{v}\, \bigr] && (\text{Q,K,V の重み})\\
|
||||
&\quad+ h(d_{k}+d_{k}+d_{v}) && (\text{バイアス Q,K,V）}\\[4pt]
|
||||
&\quad+ (h d_{v})\, d_{\text{model}} && (\text{出力射影 }W^{O})\\
|
||||
&\quad+ d_{\text{model}} && (\text{バイアス }b^{O})
|
||||
\end{aligned}}
|
||||
\]
|
||||
|
||||
## Formulas in a Table
|
||||
|
||||
| Area | Expression | Comment |
|
||||
|------|------------|---------|
|
||||
| **Algebra** | \[
|
||||
x = \frac{-b \pm \sqrt{\,b^{2}-4ac\,}}{2a}
|
||||
\] | Quadratic formula |
|
||||
| | \[
|
||||
(a+b)^{n} = \sum_{k=0}^{n}\binom{n}{k}\,a^{\,n-k}\,b^{\,k}
|
||||
\] | Binomial theorem |
|
||||
| | \(\displaystyle \prod_{k=1}^{n}k = n! \) | Factorial definition |
|
||||
| **Geometry** | \( \mathbf{a}\cdot \mathbf{b} = \|\mathbf{a}\|\,\|\mathbf{b}\|\,\cos\theta \) | Dot product & angle |
|
||||
|
||||
## No math (but chemical)
|
||||
|
||||
Balanced chemical reaction with states:
|
||||
|
||||
\[
|
||||
\ce{2H2(g) + O2(g) -> 2H2O(l)}
|
||||
\]
|
||||
|
||||
The standard enthalpy change for the reaction is: $\Delta H^\circ = \pu{-572 kJ mol^{-1}}$.
|
||||
|
||||
---
|
||||
|
||||
*This document showcases various mathematical notation and formulas that can be rendered in markdown using LaTeX syntax.*
|
||||
`;
|
||||
@@ -0,0 +1,136 @@
|
||||
// README Content
|
||||
export const README_MD = String.raw`
|
||||
# 🚀 Awesome Web Framework
|
||||
|
||||
[](https://www.npmjs.com/package/awesome-framework)
|
||||
[](https://github.com/awesome/framework/actions)
|
||||
[](https://codecov.io/gh/awesome/framework)
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
|
||||
> A modern, fast, and flexible web framework for building scalable applications
|
||||
|
||||
## ✨ Features
|
||||
|
||||
- 🎯 **Type-Safe** - Full TypeScript support out of the box
|
||||
- ⚡ **Lightning Fast** - Built on Vite for instant HMR
|
||||
- 📦 **Zero Config** - Works out of the box for most use cases
|
||||
- 🎨 **Flexible** - Unopinionated with sensible defaults
|
||||
- 🔧 **Extensible** - Plugin system for custom functionality
|
||||
- 📱 **Responsive** - Mobile-first approach
|
||||
- 🌍 **i18n Ready** - Built-in internationalization
|
||||
- 🔒 **Secure** - Security best practices by default
|
||||
|
||||
## 📦 Installation
|
||||
|
||||
${'```'}bash
|
||||
npm install awesome-framework
|
||||
# or
|
||||
yarn add awesome-framework
|
||||
# or
|
||||
pnpm add awesome-framework
|
||||
${'```'}
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
### Create a new project
|
||||
|
||||
${'```'}bash
|
||||
npx create-awesome-app my-app
|
||||
cd my-app
|
||||
npm run dev
|
||||
${'```'}
|
||||
|
||||
### Basic Example
|
||||
|
||||
${'```'}javascript
|
||||
import { createApp } from 'awesome-framework';
|
||||
|
||||
const app = createApp({
|
||||
port: 3000,
|
||||
middleware: ['cors', 'helmet', 'compression']
|
||||
});
|
||||
|
||||
app.get('/', (req, res) => {
|
||||
res.json({ message: 'Hello World!' });
|
||||
});
|
||||
|
||||
app.listen(() => {
|
||||
console.log('Server running on http://localhost:3000');
|
||||
});
|
||||
${'```'}
|
||||
|
||||
## 📖 Documentation
|
||||
|
||||
### Core Concepts
|
||||
|
||||
- [Getting Started](https://docs.awesome.dev/getting-started)
|
||||
- [Configuration](https://docs.awesome.dev/configuration)
|
||||
- [Routing](https://docs.awesome.dev/routing)
|
||||
- [Middleware](https://docs.awesome.dev/middleware)
|
||||
- [Database](https://docs.awesome.dev/database)
|
||||
- [Authentication](https://docs.awesome.dev/authentication)
|
||||
|
||||
### Advanced Topics
|
||||
|
||||
- [Performance Optimization](https://docs.awesome.dev/performance)
|
||||
- [Deployment](https://docs.awesome.dev/deployment)
|
||||
- [Testing](https://docs.awesome.dev/testing)
|
||||
- [Security](https://docs.awesome.dev/security)
|
||||
|
||||
## 🛠️ Development
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js >= 18
|
||||
- pnpm >= 8
|
||||
|
||||
### Setup
|
||||
|
||||
${'```'}bash
|
||||
git clone https://github.com/awesome/framework.git
|
||||
cd framework
|
||||
pnpm install
|
||||
pnpm dev
|
||||
${'```'}
|
||||
|
||||
### Testing
|
||||
|
||||
${'```'}bash
|
||||
pnpm test # Run unit tests
|
||||
pnpm test:e2e # Run end-to-end tests
|
||||
pnpm test:watch # Run tests in watch mode
|
||||
${'```'}
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
|
||||
|
||||
### Contributors
|
||||
|
||||
<a href="https://github.com/awesome/framework/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=awesome/framework" />
|
||||
</a>
|
||||
|
||||
## 📊 Benchmarks
|
||||
|
||||
| Framework | Requests/sec | Latency (ms) | Memory (MB) |
|
||||
|-----------|-------------|--------------|-------------|
|
||||
| **Awesome** | **45,230** | **2.1** | **42** |
|
||||
| Express | 28,450 | 3.5 | 68 |
|
||||
| Fastify | 41,200 | 2.3 | 48 |
|
||||
| Koa | 32,100 | 3.1 | 52 |
|
||||
|
||||
*Benchmarks performed on MacBook Pro M2, Node.js 20.x*
|
||||
|
||||
## 📝 License
|
||||
|
||||
MIT © [Awesome Team](https://github.com/awesome)
|
||||
|
||||
## 🙏 Acknowledgments
|
||||
|
||||
Special thanks to all our sponsors and contributors who make this project possible.
|
||||
|
||||
---
|
||||
|
||||
**[Website](https://awesome.dev)** • **[Documentation](https://docs.awesome.dev)** • **[Discord](https://discord.gg/awesome)** • **[Twitter](https://twitter.com/awesomeframework)**
|
||||
`;
|
||||
@@ -0,0 +1,81 @@
|
||||
import { serverStore } from '$lib/stores/server.svelte';
|
||||
import { modelsStore } from '$lib/stores/models.svelte';
|
||||
|
||||
/**
|
||||
* Mock server properties for Storybook testing
|
||||
* This utility allows setting mock server configurations without polluting production code
|
||||
*/
|
||||
export function mockServerProps(props: Partial<ApiLlamaCppServerProps>): void {
|
||||
// Reset any pointer-events from previous tests (dropdown cleanup)
|
||||
const body = document.querySelector('body');
|
||||
if (body) body.style.pointerEvents = '';
|
||||
|
||||
// Directly set the props for testing purposes
|
||||
(serverStore as unknown as { props: ApiLlamaCppServerProps }).props = {
|
||||
model_path: props.model_path || 'test-model',
|
||||
modalities: {
|
||||
vision: props.modalities?.vision ?? false,
|
||||
audio: props.modalities?.audio ?? false
|
||||
},
|
||||
...props
|
||||
} as ApiLlamaCppServerProps;
|
||||
|
||||
// Set router mode role so activeModelId can be set
|
||||
(serverStore as unknown as { props: ApiLlamaCppServerProps }).props.role = 'ROUTER';
|
||||
|
||||
// Also mock modelsStore methods for modality checking
|
||||
const vision = props.modalities?.vision ?? false;
|
||||
const audio = props.modalities?.audio ?? false;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(modelsStore as any).modelSupportsVision = () => vision;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(modelsStore as any).modelSupportsAudio = () => audio;
|
||||
|
||||
// Mock models list with a test model so activeModelId can be resolved
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(modelsStore as any).models = [
|
||||
{
|
||||
id: 'test-model',
|
||||
name: 'Test Model',
|
||||
model: 'test-model'
|
||||
}
|
||||
];
|
||||
|
||||
// Mock selectedModelId
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(modelsStore as any).selectedModelId = 'test-model';
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset server store to clean state for testing
|
||||
*/
|
||||
export function resetServerStore(): void {
|
||||
(serverStore as unknown as { props: ApiLlamaCppServerProps }).props = {
|
||||
model_path: '',
|
||||
modalities: {
|
||||
vision: false,
|
||||
audio: false
|
||||
}
|
||||
} as ApiLlamaCppServerProps;
|
||||
(serverStore as unknown as { error: string }).error = '';
|
||||
(serverStore as unknown as { loading: boolean }).loading = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Common mock configurations for Storybook stories
|
||||
*/
|
||||
export const mockConfigs = {
|
||||
visionOnly: {
|
||||
modalities: { vision: true, audio: false }
|
||||
},
|
||||
audioOnly: {
|
||||
modalities: { vision: false, audio: true }
|
||||
},
|
||||
bothModalities: {
|
||||
modalities: { vision: true, audio: true }
|
||||
},
|
||||
noModalities: {
|
||||
modalities: { vision: false, audio: false }
|
||||
}
|
||||
} as const;
|
||||
Reference in new issue
Block a user