mirror of
https://github.com/ggml-org/llama.cpp.git
synced 2026-09-17 20:31:47 +02:00
ui : drop the new discover stories pending the state-machine pass
Remove the discover stories and their fixture added on this branch. Stories (and component state machines) return after the discover models, custom prompts library, skills support and conversation compaction features land. The pre-existing ModelsSelector story is kept. Assisted-by: llama-ui:Qwen3.8-Flash-Next
This commit is contained in:
Aleksander Grygier
@@ -1,145 +0,0 @@
|
||||
<script lang="ts" module>
|
||||
import { mockDetails, mockSiblings } from './fixtures/models-discover';
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import ModelsDiscoverChatTemplateDialog from '$lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverChatTemplateDialog.svelte';
|
||||
import ModelsDiscoverDetails from '$lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetails.svelte';
|
||||
import ModelsDiscoverDetailsDownloadOptions from '$lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptions.svelte';
|
||||
import ModelsDiscoverDetailsHeader from '$lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsHeader.svelte';
|
||||
import ModelsDiscoverDetailsReadme from '$lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsReadme.svelte';
|
||||
import type { HfModelSibling } from '$lib/types';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
tags: ['autodocs'],
|
||||
title: 'Models/Discover/Details'
|
||||
});
|
||||
|
||||
const files: HfModelSibling[] = mockSiblings;
|
||||
|
||||
const readme = [
|
||||
'# Gemma 4 12B IT',
|
||||
'',
|
||||
'Quantized ggml-org build of google/gemma-4-12b-it.',
|
||||
'',
|
||||
'| Quant | Size |',
|
||||
'| ----- | ---- |',
|
||||
'| Q4_K_M | 7.3 GB |',
|
||||
'| Q8_0 | 13.1 GB |'
|
||||
].join('\n');
|
||||
|
||||
const CHAT_TEMPLATE = '{% for message in messages %}{ tools }{% endfor %}';
|
||||
</script>
|
||||
|
||||
<Story name="Header">
|
||||
<div class="w-160 p-4">
|
||||
<ModelsDiscoverDetailsHeader
|
||||
baseModels={mockDetails.cardData?.base_model ? [String(mockDetails.cardData.base_model)] : []}
|
||||
details={mockDetails}
|
||||
hasReasoning
|
||||
hasTools
|
||||
hasVision
|
||||
licenseTag={mockDetails.tags
|
||||
?.find((t) => t.startsWith('license:'))
|
||||
?.replace('license:', '') ?? null}
|
||||
modelId={mockDetails.id ?? 'ggml-org/gemma-4-12b-it-GGUF'}
|
||||
/>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Download options">
|
||||
<div class="w-200 p-4">
|
||||
<ModelsDiscoverDetailsDownloadOptions
|
||||
bitDepthRows={[
|
||||
{ bitDepth: 4, files: files.filter((f) => f.path.includes('Q4_K_M')) },
|
||||
{ bitDepth: 8, files: files.filter((f) => f.path.includes('Q8_0')) },
|
||||
{ bitDepth: 16, files: files.filter((f) => f.path.includes('BF16')) }
|
||||
]}
|
||||
modelId="ggml-org/gemma-4-12b-it-GGUF"
|
||||
/>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Download options (unknown device)">
|
||||
<div class="w-200 p-4">
|
||||
<ModelsDiscoverDetailsDownloadOptions
|
||||
bitDepthRows={[
|
||||
{ bitDepth: 4, files: files.filter((f) => f.path.includes('Q4_K_M')) },
|
||||
{ bitDepth: 8, files: files.filter((f) => f.path.includes('Q8_0')) }
|
||||
]}
|
||||
modelId="ggml-org/gemma-4-12b-it-GGUF"
|
||||
/>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<!-- Injected download states cover the non-idle chip looks: downloading,
|
||||
paused, downloaded and the failed retry badge. -->
|
||||
<Story name="Download options (download states)">
|
||||
<div class="w-200 p-4">
|
||||
<ModelsDiscoverDetailsDownloadOptions
|
||||
bitDepthRows={[
|
||||
{ bitDepth: 4, files: files.filter((f) => f.path.includes('Q4_K_M')) },
|
||||
{ bitDepth: 8, files: files.filter((f) => f.path.includes('Q8_0')) },
|
||||
{ bitDepth: 16, files: files.filter((f) => f.path.includes('BF16')) }
|
||||
]}
|
||||
getDownloadState={(repoWithTag, filePath) => ({
|
||||
isDownloaded: filePath.includes('BF16'),
|
||||
isDownloading: filePath.includes('Q4_K_M') && !filePath.includes('mtp'),
|
||||
isFailed: filePath.includes('mtp'),
|
||||
isPaused: filePath.includes('Q8_0'),
|
||||
progress: filePath.includes('Q4_K_M')
|
||||
? { downloadedBytes: 3_200_000_000, files: {}, totalBytes: 7_300_000_000 }
|
||||
: filePath.includes('Q8_0')
|
||||
? { downloadedBytes: 1_300_000_000, files: {}, totalBytes: 13_100_000_000 }
|
||||
: null,
|
||||
repoWithTag
|
||||
})}
|
||||
modelId="ggml-org/gemma-4-12b-it-GGUF"
|
||||
/>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Readme">
|
||||
<div class="w-160 p-4">
|
||||
<ModelsDiscoverDetailsReadme {readme} />
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Chat template dialog">
|
||||
<div class="p-4">
|
||||
<ModelsDiscoverChatTemplateDialog chatTemplate={CHAT_TEMPLATE} open />
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Details (loading)">
|
||||
<div class="h-96 w-200 border">
|
||||
<ModelsDiscoverDetails
|
||||
details={null}
|
||||
files={[]}
|
||||
loading
|
||||
modelId="ggml-org/gemma-4-12b-it-GGUF"
|
||||
readme={null}
|
||||
/>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Details (error)">
|
||||
<div class="h-96 w-200 border">
|
||||
<ModelsDiscoverDetails
|
||||
details={null}
|
||||
error="Model not found"
|
||||
files={[]}
|
||||
modelId="ggml-org/does-not-exist-GGUF"
|
||||
readme={null}
|
||||
/>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Details (loaded)">
|
||||
<div class="h-96 w-200 overflow-y-auto border">
|
||||
<ModelsDiscoverDetails
|
||||
details={mockDetails}
|
||||
{files}
|
||||
modelId={mockDetails.id ?? 'ggml-org/gemma-4-12b-it-GGUF'}
|
||||
{readme}
|
||||
/>
|
||||
</div>
|
||||
</Story>
|
||||
@@ -1,58 +0,0 @@
|
||||
<script lang="ts" module>
|
||||
import { mockListModels } from './fixtures/models-discover';
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import DialogModelsDiscover from '$lib/components/app/dialogs/DialogModelsDiscover.svelte';
|
||||
import DownloadProgressBar from '$lib/components/app/models/discover/DownloadProgressBar.svelte';
|
||||
import ModelsDiscover from '$lib/components/app/models/discover/ModelsDiscover.svelte';
|
||||
import { modelsDiscoverStore } from '$lib/stores';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
tags: ['autodocs'],
|
||||
title: 'Models/Discover/Dialog'
|
||||
});
|
||||
|
||||
// Wire the hub store singleton with fixtures so the container renders data.
|
||||
modelsDiscoverStore.models = mockListModels;
|
||||
modelsDiscoverStore.loading = false;
|
||||
modelsDiscoverStore.error = null;
|
||||
</script>
|
||||
|
||||
<Story name="Progress bar">
|
||||
<div class="space-y-4 p-4">
|
||||
<div class="space-y-1">
|
||||
<p class="text-xs text-muted-foreground">0%</p>
|
||||
|
||||
<DownloadProgressBar downloadedBytes={0} totalBytes={7300000000} />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<p class="text-xs text-muted-foreground">49%</p>
|
||||
|
||||
<DownloadProgressBar downloadedBytes={3600000000} totalBytes={7300000000} />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<p class="text-xs text-muted-foreground">100%</p>
|
||||
|
||||
<DownloadProgressBar downloadedBytes={7300000000} totalBytes={7300000000} />
|
||||
</div>
|
||||
|
||||
<div class="relative h-8 overflow-hidden rounded border">
|
||||
<p class="p-1 text-xs text-muted-foreground">overlay</p>
|
||||
|
||||
<DownloadProgressBar downloadedBytes={3600000000} overlay totalBytes={7300000000} />
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Discover (dialog shell)">
|
||||
<div class="h-160 w-full overflow-hidden border">
|
||||
<DialogModelsDiscover open />
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Discover (panes)">
|
||||
<div class="flex h-160 w-full border">
|
||||
<ModelsDiscover />
|
||||
</div>
|
||||
</Story>
|
||||
@@ -1,50 +0,0 @@
|
||||
<script lang="ts" module>
|
||||
import { mockGemma, mockListModels, mockQwen } from './fixtures/models-discover';
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import ModelsDiscoverAvatar from '$lib/components/app/models/discover/ModelsDiscoverAvatar.svelte';
|
||||
import ModelsDiscoverList from '$lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverList.svelte';
|
||||
import ModelsDiscoverListItem from '$lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListItem.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
tags: ['autodocs'],
|
||||
title: 'Models/Discover/List'
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Avatar">
|
||||
<div class="flex flex-col gap-4 p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<ModelsDiscoverAvatar org="ggml-org" />
|
||||
|
||||
<span class="text-sm">repo org only</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<ModelsDiscoverAvatar org="ggml-org" quantOrg="Qwen" />
|
||||
|
||||
<span class="text-sm">base org + quant corner badge</span>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Info">
|
||||
<div class="flex w-80 flex-col gap-2 p-4">
|
||||
<ModelsDiscoverListItem model={mockGemma} />
|
||||
|
||||
<ModelsDiscoverListItem model={mockQwen} />
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Item">
|
||||
<ul class="w-96 p-2">
|
||||
<ModelsDiscoverListItem active model={mockGemma} />
|
||||
|
||||
<ModelsDiscoverListItem model={mockQwen} />
|
||||
</ul>
|
||||
</Story>
|
||||
|
||||
<Story name="List">
|
||||
<div class="h-64 w-96 overflow-y-auto">
|
||||
<ModelsDiscoverList activeId={mockGemma.id} models={mockListModels} />
|
||||
</div>
|
||||
</Story>
|
||||
@@ -1,79 +0,0 @@
|
||||
import type { HfModelDetailInfo, HfModelInfo, HfModelSibling } from '$lib/types';
|
||||
|
||||
/**
|
||||
* Fixtures for the Models Discover stories. Shapes mirror the HF API
|
||||
* responses (`/api/models`, `/api/models/{id}?full=true`, `/tree`) with
|
||||
* realistic ggml-org style values.
|
||||
*/
|
||||
|
||||
export const mockSiblings: HfModelSibling[] = [
|
||||
{ path: 'Q8_0/gemma-4-12b-it-Q8_0.gguf', size: 13_100_000_000 },
|
||||
{ path: 'Q8_0/mmproj-Q8_0.gguf', size: 800_000_000 },
|
||||
{ path: 'Q4_K_M/gemma-4-12b-it-Q4_K_M.gguf', size: 7_300_000_000 },
|
||||
{ path: 'Q4_K_M/mmproj-Q4_K_M.gguf', size: 530_000_000 },
|
||||
{ path: 'Q4_K_M/mtp-Q4_K_M.gguf', size: 460_000_000 },
|
||||
{ path: 'BF16/gemma-4-12b-it-BF16.gguf', size: 24_500_000_000 }
|
||||
];
|
||||
|
||||
export const mockGemma: HfModelInfo = {
|
||||
_id: 'gemma',
|
||||
author: 'ggml-org',
|
||||
createdAt: '2026-07-01T00:00:00.000Z',
|
||||
downloads: 1_234_567,
|
||||
gguf: {
|
||||
architecture: 'gemma4',
|
||||
context_length: 131072,
|
||||
total: 12_000_000_000
|
||||
},
|
||||
id: 'ggml-org/gemma-4-12b-it-GGUF',
|
||||
library_name: 'transformers',
|
||||
likes: 8900,
|
||||
modelId: 'ggml-org/gemma-4-12b-it-GGUF',
|
||||
pipeline_tag: 'image-text-to-text',
|
||||
private: false,
|
||||
siblings: mockSiblings.map((s) => ({ rfilename: s.path })),
|
||||
tags: ['gguf', 'license:gemma', 'base_model:google/gemma-4-12b-it'],
|
||||
trendingScore: 42
|
||||
};
|
||||
|
||||
export const mockQwen: HfModelInfo = {
|
||||
...mockGemma,
|
||||
_id: 'qwen',
|
||||
createdAt: '2026-08-15T00:00:00.000Z',
|
||||
downloads: 45600,
|
||||
gguf: {
|
||||
architecture: 'qwen3',
|
||||
context_length: 262144,
|
||||
total: 27_000_000_000
|
||||
},
|
||||
id: 'ggml-org/Qwen3.8-27B-GGUF',
|
||||
likes: 1200,
|
||||
modelId: 'ggml-org/Qwen3.8-27B-GGUF',
|
||||
pipeline_tag: 'text-generation',
|
||||
tags: ['gguf', 'license:apache-2.0'],
|
||||
trendingScore: 90
|
||||
};
|
||||
|
||||
export const mockListModels: HfModelInfo[] = [mockGemma, mockQwen];
|
||||
|
||||
// Chat template exercising the tool-use and thinking detectors.
|
||||
const CHAT_TEMPLATE = [
|
||||
'{%- for message in messages %}',
|
||||
'{%- if tools %}{{ tools }}{% endif %}',
|
||||
'{%- if enable_think %} {% endif %}',
|
||||
'{%- endfor %}'
|
||||
].join('\n');
|
||||
|
||||
export const mockDetails: HfModelDetailInfo = {
|
||||
...mockGemma,
|
||||
gated: false,
|
||||
gguf: {
|
||||
architecture: 'gemma4',
|
||||
chat_template: CHAT_TEMPLATE,
|
||||
context_length: 131072,
|
||||
total: 12_000_000_000
|
||||
},
|
||||
id: 'ggml-org/gemma-4-12b-it-GGUF',
|
||||
lastModified: '2026-08-01T00:00:00.000Z',
|
||||
usedStorage: 26_000_000_000
|
||||
};
|
||||
Reference in New Issue
Block a user