UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-03-25 06:58:04 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy J. Baek 2024-10-03 21:10:33 -07:00
parent 6747478f67
commit b862dff185
9 changed files with 263 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
backend/open_webui/apps/retrieval/main.py
View File

@ -785,10 +785,7 @@ def process_file(
"content": text_content, "content": text_content,
} }
except Exception as e: except Exception as e:
raise HTTPException( raise e
status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
detail=e,
)
except Exception as e: except Exception as e:
log.exception(e) log.exception(e)
if "No pandoc was found" in str(e): if "No pandoc was found" in str(e):
@ -799,7 +796,7 @@ def process_file(
else: else:
raise HTTPException( raise HTTPException(
status_code=status.HTTP_400_BAD_REQUEST, status_code=status.HTTP_400_BAD_REQUEST,
detail=ERROR_MESSAGES.DEFAULT(e), detail=str(e),
) )

31
src/lib/components/common/FileItem.svelte
View File

@ -9,8 +9,7 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
export let className = 'w-60'; export let className = 'w-60';
export let colorClassName = export let colorClassName = 'bg-white dark:bg-gray-850 border border-gray-50 dark:border-white/5';
'bg-white dark:bg-gray-850 border border-gray-50 dark:border-gray-850';
export let url: string | null = null; export let url: string | null = null;
export let dismissible = false; export let dismissible = false;
@ -31,7 +30,7 @@
{/if} {/if}
<button <button
class="relative group p-1 {className} flex items-center {colorClassName} rounded-2xl text-left" class="relative group p-1.5 {className} flex items-center {colorClassName} rounded-2xl text-left"
type="button" type="button"
on:click={async () => { on:click={async () => {
if (file?.file?.content) { if (file?.file?.content) {
@ -106,7 +105,7 @@
{/if} {/if}
</div> </div>
<div class="flex flex-col justify-center -space-y-0.5 px-2 w-full"> <div class="flex flex-col justify-center -space-y-0.5 px-2.5 w-full">
<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1 mb-1"> <div class=" dark:text-gray-100 text-sm font-medium line-clamp-1 mb-1">
{name} {name}
</div> </div>
@ -128,16 +127,34 @@
</div> </div>
{#if dismissible} {#if dismissible}
<div class=" pr-2"> <div class=" absolute -top-2 -right-2">
<button <button
class=" px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl group-hover:visible invisible transition" class=" bg-gray-400 text-white border border-white rounded-full group-hover:visible invisible transition"
type="button" type="button"
on:click={() => { on:click={() => {
dispatch('dismiss'); dispatch('dismiss');
}} }}
> >
<GarbageBin /> <svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
</svg>
</button> </button>
<!-- <button
class=" p-1 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-full group-hover:visible invisible transition"
type="button"
on:click={() => {
}}
>
<GarbageBin />
</button> -->
</div> </div>
{/if} {/if}
</button> </button>

19
src/lib/components/icons/BarsArrowUp.svelte Normal file
View File

@ -0,0 +1,19 @@
<script lang="ts">
export let className = 'size-4';
export let strokeWidth = '1.5';
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
class={className}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12"
/>
</svg>

266
src/lib/components/workspace/Knowledge/Item.svelte → src/lib/components/workspace/Knowledge/Collection.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { onMount, getContext } from 'svelte'; import { onMount, getContext, onDestroy } from 'svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
@ -14,12 +14,13 @@
import Spinner from '$lib/components/common/Spinner.svelte'; import Spinner from '$lib/components/common/Spinner.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import Badge from '$lib/components/common/Badge.svelte'; import Badge from '$lib/components/common/Badge.svelte';
import Files from './Files.svelte'; import Files from './Collection/Files.svelte';
import AddFilesPlaceholder from '$lib/components/AddFilesPlaceholder.svelte'; import AddFilesPlaceholder from '$lib/components/AddFilesPlaceholder.svelte';
import AddContentModal from './AddContentModal.svelte'; import AddContentModal from './Collection/AddTextContentModal.svelte';
import { transcribeAudio } from '$lib/apis/audio'; import { transcribeAudio } from '$lib/apis/audio';
import { blobToFile } from '$lib/utils'; import { blobToFile } from '$lib/utils';
import { processFile } from '$lib/apis/retrieval'; import { processFile } from '$lib/apis/retrieval';
import AddContentMenu from './Collection/AddContentMenu.svelte';
let largeScreen = true; let largeScreen = true;
@ -40,30 +41,9 @@
let selectedFileId = null; let selectedFileId = null;
let debounceTimeout = null; let debounceTimeout = null;
let mediaQuery;
let dragged = false; let dragged = false;
let showAddContentModal = false;
const changeDebounceHandler = () => {
console.log('debounce');
if (debounceTimeout) {
clearTimeout(debounceTimeout);
}
debounceTimeout = setTimeout(async () => {
const res = await updateKnowledgeById(localStorage.token, id, {
name: knowledge.name,
description: knowledge.description
}).catch((e) => {
toast.error(e);
});
if (res) {
toast.success($i18n.t('Knowledge updated successfully'));
}
}, 1000);
};
const uploadFileHandler = async (file) => { const uploadFileHandler = async (file) => {
console.log(file); console.log(file);
@ -87,28 +67,8 @@
}); });
if (uploadedFile) { if (uploadedFile) {
const processedFile = await processFile(localStorage.token, uploadedFile.id, id).catch( console.log(uploadedFile);
(e) => { processFileHandler(uploadedFile);
toast.error(e);
}
);
if (processedFile.status) {
knowledge.data.file_ids = [...(knowledge.data.file_ids ?? []), uploadedFile.id];
const updatedKnowledge = await updateKnowledgeById(localStorage.token, id, {
data: knowledge.data
}).catch((e) => {
toast.error(e);
});
if (updatedKnowledge) {
knowledge = updatedKnowledge;
toast.success($i18n.t('File added successfully.'));
}
} else {
toast.error($i18n.t('Failed to process file.'));
}
} else { } else {
toast.error($i18n.t('Failed to upload file.')); toast.error($i18n.t('Failed to upload file.'));
} }
@ -117,17 +77,95 @@
} }
}; };
const processFileHandler = async (uploadedFile) => {
const processedFile = await processFile(localStorage.token, uploadedFile.id, id).catch((e) => {
toast.error(e);
});
if (processedFile.status) {
console.log(processedFile);
if (!knowledge.data) {
knowledge.data = {};
}
knowledge.data.file_ids = [...(knowledge?.data?.file_ids ?? []), uploadedFile.id];
console.log(knowledge);
const updatedKnowledge = await updateKnowledgeById(localStorage.token, id, {
data: knowledge?.data ?? {}
}).catch((e) => {
console.error(e);
});
if (updatedKnowledge) {
knowledge = updatedKnowledge;
toast.success($i18n.t('File added successfully.'));
}
} else {
toast.error($i18n.t('Failed to process file.'));
}
};
const changeDebounceHandler = () => {
console.log('debounce');
if (debounceTimeout) {
clearTimeout(debounceTimeout);
}
debounceTimeout = setTimeout(async () => {
const res = await updateKnowledgeById(localStorage.token, id, {
name: knowledge.name,
description: knowledge.description
}).catch((e) => {
toast.error(e);
});
if (res) {
toast.success($i18n.t('Knowledge updated successfully'));
}
}, 1000);
};
const handleMediaQuery = async (e) => {
if (e.matches) {
largeScreen = true;
} else {
largeScreen = false;
}
};
const onDragOver = (e) => {
e.preventDefault();
dragged = true;
};
const onDragLeave = () => {
dragged = false;
};
const onDrop = async (e) => {
e.preventDefault();
if (e.dataTransfer?.files) {
const inputFiles = e.dataTransfer?.files;
if (inputFiles && inputFiles.length > 0) {
for (const file of inputFiles) {
await uploadFileHandler(file);
}
} else {
toast.error($i18n.t(`File not found.`));
}
}
dragged = false;
};
onMount(async () => { onMount(async () => {
// listen to resize 1024px // listen to resize 1024px
const mediaQuery = window.matchMedia('(min-width: 1024px)'); mediaQuery = window.matchMedia('(min-width: 1024px)');
const handleMediaQuery = async (e) => {
if (e.matches) {
largeScreen = true;
} else {
largeScreen = false;
}
};
mediaQuery.addEventListener('change', handleMediaQuery); mediaQuery.addEventListener('change', handleMediaQuery);
handleMediaQuery(mediaQuery); handleMediaQuery(mediaQuery);
@ -146,45 +184,17 @@
} }
const dropZone = document.querySelector('body'); const dropZone = document.querySelector('body');
const onDragOver = (e) => {
e.preventDefault();
dragged = true;
};
const onDragLeave = () => {
dragged = false;
};
const onDrop = async (e) => {
e.preventDefault();
if (e.dataTransfer?.files) {
const inputFiles = e.dataTransfer?.files;
if (inputFiles && inputFiles.length > 0) {
for (const file of inputFiles) {
await uploadFileHandler(file);
}
} else {
toast.error($i18n.t(`File not found.`));
}
}
dragged = false;
};
dropZone?.addEventListener('dragover', onDragOver); dropZone?.addEventListener('dragover', onDragOver);
dropZone?.addEventListener('drop', onDrop); dropZone?.addEventListener('drop', onDrop);
dropZone?.addEventListener('dragleave', onDragLeave); dropZone?.addEventListener('dragleave', onDragLeave);
});
return () => { onDestroy(() => {
mediaQuery.removeEventListener('change', handleMediaQuery); mediaQuery?.removeEventListener('change', handleMediaQuery);
const dropZone = document.querySelector('body');
dropZone?.removeEventListener('dragover', onDragOver); dropZone?.removeEventListener('dragover', onDragOver);
dropZone?.removeEventListener('drop', onDrop); dropZone?.removeEventListener('drop', onDrop);
dropZone?.removeEventListener('dragleave', onDragLeave); dropZone?.removeEventListener('dragleave', onDragLeave);
};
}); });
</script> </script>
@ -211,13 +221,6 @@
</div> </div>
{/if} {/if}
<AddContentModal
bind:show={showAddContentModal}
on:add={(e) => {
console.log(e);
}}
/>
<div class="flex flex-col w-full max-h-[100dvh] h-full"> <div class="flex flex-col w-full max-h-[100dvh] h-full">
<button <button
class="flex space-x-1" class="flex space-x-1"
@ -282,57 +285,44 @@
<div <div
class=" {largeScreen class=" {largeScreen
? 'flex-shrink-0' ? 'flex-shrink-0'
: 'flex-1'} p-2.5 w-80 rounded-2xl border border-gray-50 dark:border-gray-850" : 'flex-1'} flex py-2.5 w-80 rounded-2xl border border-gray-50 dark:border-gray-850"
> >
<div class=" flex flex-col w-full space-x-2 rounded-lg h-full"> <div class=" flex flex-col w-full space-x-2 rounded-lg h-full">
<div class="flex px-1"> <div class="w-full h-full flex flex-col">
<div class=" self-center ml-1 mr-3"> <div class=" px-3">
<svg <div class="flex">
xmlns="http://www.w3.org/2000/svg" <div class=" self-center ml-1 mr-3">
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd"
/>
</svg>
</div>
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
bind:value={query}
placeholder={$i18n.t('Search Collection')}
/>
<div>
<Tooltip content={$i18n.t('Add Content')}>
<button
class=" px-2 py-2 rounded-xl border border-gray-100 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
on:click={() => {
showAddContentModal = true;
}}
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
class="w-4 h-4" class="w-4 h-4"
> >
<path <path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd"
/> />
</svg> </svg>
</button> </div>
</Tooltip> <input
</div> class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
</div> bind:value={query}
<hr class="my-2 border-gray-50 dark:border-gray-850" /> placeholder={$i18n.t('Search Collection')}
/>
<div class="w-full h-full flex"> <div>
{#if (knowledge?.data?.file_ids ?? []).length > 0} <AddContentMenu />
<Files files={knowledge.files} /> </div>
</div>
<hr class=" mt-2 mb-1 border-gray-50 dark:border-gray-850" />
</div>
{#if (knowledge?.files ?? []).length > 0}
<div class=" flex overflow-y-auto h-full w-full scrollbar-hidden text-xs">
<Files files={knowledge.files} />
</div>
{:else} {:else}
<div class="m-auto text-gray-500 text-xs">No content found</div> <div class="m-auto text-gray-500 text-xs">No content found</div>
{/if} {/if}

86
src/lib/components/workspace/Knowledge/Collection/AddContentMenu.svelte Normal file
View File

@ -0,0 +1,86 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
import { getContext, createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
import Dropdown from '$lib/components/common/Dropdown.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
import Pencil from '$lib/components/icons/Pencil.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Tags from '$lib/components/chat/Tags.svelte';
import Share from '$lib/components/icons/Share.svelte';
import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte';
import ArrowUpCircle from '$lib/components/icons/ArrowUpCircle.svelte';
import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
import BarsArrowUp from '$lib/components/icons/BarsArrowUp.svelte';
const i18n = getContext('i18n');
export let onClose: Function = () => {};
let show = false;
</script>
<Dropdown
bind:show
on:change={(e) => {
if (e.detail === false) {
onClose();
}
}}
align="end"
>
<Tooltip content={$i18n.t('Add Content')}>
<button
class=" px-2 py-2 rounded-xl border border-gray-100 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
on:click={(e) => {
e.stopPropagation();
show = true;
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
/>
</svg>
</button>
</Tooltip>
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-44 rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow"
sideOffset={4}
side="bottom"
align="end"
transition={flyAndScale}
>
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
on:click={() => {
dispatch('files');
}}
>
<ArrowUpCircle strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Upload files')}</div>
</DropdownMenu.Item>
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
on:click={() => {
dispatch('text');
}}
>
<BarsArrowUp strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Add text content')}</div>
</DropdownMenu.Item>
</DropdownMenu.Content>
</div>
</Dropdown>

0
src/lib/components/workspace/Knowledge/AddContentModal.svelte → src/lib/components/workspace/Knowledge/Collection/AddTextContentModal.svelte
View File

0
src/lib/components/workspace/Knowledge/CreateKnowledge.svelte → src/lib/components/workspace/Knowledge/CreateCollection.svelte
View File

4
src/routes/(app)/workspace/knowledge/[id]/+page.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import Knowledge from '$lib/components/workspace/Knowledge/Item.svelte'; import Collection from '$lib/components/workspace/Knowledge/Collection.svelte';
</script> </script>
<Knowledge /> <Collection />

4
src/routes/(app)/workspace/knowledge/create/+page.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import CreateKnowledge from '$lib/components/workspace/Knowledge/CreateKnowledge.svelte'; import CreateCollection from '$lib/components/workspace/Knowledge/CreateCollection.svelte';
</script> </script>
<CreateKnowledge /> <CreateCollection />