tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Projects 1 Releases 2 Packages 1 Activity Actions

feat: documents file upload

Browse source
This commit is contained in:
Timothy J. Baek 2024-01-08 01:26:15 -08:00
parent df3d95bf2a
commit 54c4e0761a
3 changed files with 174 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

12
backend/apps/rag/main.py
View file

@ -119,7 +119,11 @@ def store_web(form_data: StoreWebForm, user=Depends(get_current_user)):
loader = WebBaseLoader(form_data.url)
data = loader.load()
store_data_in_vector_db(data, form_data.collection_name)
return {"status": True, "collection_name": form_data.collection_name}
return {
"status": True,
"collection_name": form_data.collection_name,
"filename": form_data.url,
}
except Exception as e:
print(e)
raise HTTPException(
@ -176,7 +180,11 @@ def store_doc(
result = store_data_in_vector_db(data, collection_name)
if result:
return {"status": True, "collection_name": collection_name}
return {
"status": True,
"collection_name": collection_name,
"filename": filename,
}
else:
raise HTTPException(
status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,

16
src/routes/(app)/+layout.svelte
View file

@ -13,13 +13,22 @@
import { getOpenAIModels } from '$lib/apis/openai';
import { user, showSettings, settings, models, modelfiles, prompts } from '$lib/stores';
import {
user,
showSettings,
settings,
models,
modelfiles,
prompts,
documents
} from '$lib/stores';
import { REQUIRED_OLLAMA_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';
import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
import Sidebar from '$lib/components/layout/Sidebar.svelte';
import { checkVersion } from '$lib/utils';
import ShortcutsModal from '$lib/components/chat/ShortcutsModal.svelte';
import { getDocs } from '$lib/apis/documents';
let ollamaVersion = '';
let loaded = false;
@ -93,11 +102,10 @@
console.log();
await settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
await modelfiles.set(await getModelfiles(localStorage.token));
await prompts.set(await getPrompts(localStorage.token));
console.log($modelfiles);
await documents.set(await getDocs(localStorage.token));
modelfiles.subscribe(async () => {
// should fetch models

112
src/routes/(app)/documents/+page.svelte
View file

@ -6,10 +6,13 @@
import { onMount } from 'svelte';
import { documents } from '$lib/stores';
import { createNewDoc, deleteDocByName, getDocs } from '$lib/apis/documents';
import AddFilesPlaceholder from '$lib/components/AddFilesPlaceholder.svelte';
import { SUPPORTED_FILE_TYPE } from '$lib/constants';
import { uploadDocToVectorDB } from '$lib/apis/rag';
let importFiles = '';
let inputFiles = '';
let query = '';
let dragged = false;
@ -19,16 +22,31 @@
await documents.set(await getDocs(localStorage.token));
};
onMount(() => {
// const dropZone = document.querySelector('body');
const dropZone = document.getElementById('dropzone');
const uploadDoc = async (file) => {
const res = await uploadDocToVectorDB(localStorage.token, '', file);
dropZone?.addEventListener('dragover', (e) => {
if (res) {
await createNewDoc(
localStorage.token,
res.collection_name,
res.filename,
res.filename,
res.filename
);
await documents.set(await getDocs(localStorage.token));
}
};
const onDragOver = (e) => {
e.preventDefault();
dragged = true;
});
};
dropZone?.addEventListener('drop', async (e) => {
const onDragLeave = () => {
dragged = false;
};
const onDrop = async (e) => {
e.preventDefault();
console.log(e);
@ -38,8 +56,7 @@
if (inputFiles && inputFiles.length > 0) {
const file = inputFiles[0];
if (SUPPORTED_FILE_TYPE.includes(file['type'])) {
console.log(file);
// uploadDoc(file);
uploadDoc(file);
} else {
toast.error(`Unsupported File Type '${file['type']}'.`);
}
@ -47,12 +64,9 @@
toast.error(`File not found.`);
}
}
});
dropZone?.addEventListener('dragleave', () => {
dragged = false;
});
});
};
</script>
<div class="min-h-screen w-full flex justify-center dark:text-white">
@ -86,9 +100,11 @@
</div>
<div>
<a
<button
class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
href="/prompts/create"
on:click={() => {
document.getElementById('upload-doc-input')?.click();
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -100,26 +116,56 @@
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>
</a>
</button>
</div>
</div>
<input
id="upload-doc-input"
bind:files={inputFiles}
type="file"
hidden
on:change={async (e) => {
if (inputFiles && inputFiles.length > 0) {
const file = inputFiles[0];
if (SUPPORTED_FILE_TYPE.includes(file['type'])) {
uploadDoc(file);
} else {
toast.error(`Unsupported File Type '${file['type']}'.`);
}
inputFiles = null;
e.target.value = '';
} else {
toast.error(`File not found.`);
}
}}
/>
<div>
<div
class="z-50 touch-none pointer-events-none"
id="dropzone"
class="my-3 py-16 rounded-lg border-2 border-dashed dark:border-gray-600 {dragged &&
' dark:bg-gray-700'} "
role="region"
aria-label="Drag and Drop Container"
on:drop={onDrop}
on:dragover={onDragOver}
on:dragleave={onDragLeave}
>
{#if $documents.length === 0 || dragged}
<div class="my-3 py-16 rounded-lg border-2 border-dashed dark:border-gray-600">
<AddFilesPlaceholder />
<div class=" pointer-events-none">
<div class="text-center dark:text-white text-2xl font-semibold z-50">Add Files</div>
<div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
Drop any files here to add to the conversation
</div>
{:else}
</div>
</div>
</div>
{#each $documents.filter((p) => query === '' || p.name.includes(query)) as doc}
<hr class=" dark:border-gray-700 my-2.5" />
<div class=" flex space-x-4 cursor-pointer w-full mb-3">
<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
<a href={`/prompts/edit?command=${encodeURIComponent(doc.name)}`}>
<a href={`#`}>
<div class=" flex-1 self-center pl-5">
<div class=" font-bold line-clamp-1">#{doc.name} ({doc.filename})</div>
<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
@ -154,21 +200,20 @@
class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
type="button"
on:click={() => {
sharePrompt(prompt);
console.log('download file');
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
/>
<path
d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
/>
</svg>
</button> -->
@ -198,9 +243,6 @@
</div>
</div>
{/each}
{/if}
</div>
{#if $documents.length != 0}
<hr class=" dark:border-gray-700 my-2.5" />