github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-08-10 12:42:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/new-page-framework' into dev_ty_06_end

Browse Source
This commit is contained in:
tuyang.yhj 2023-06-29 17:28:09 +08:00
commit b515b83a15
6 changed files with 330 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
datacenter/app/datastores/documents/chunklist/page.tsx
View File

@ -2,73 +2,119 @@
import { useSearchParams } from 'next/navigation' import { useSearchParams } from 'next/navigation'
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { Table } from '@/lib/mui' import { Table, Stack } from '@/lib/mui'
import { Popover } from 'antd' import { Popover, Pagination } from 'antd'
const page_size = 20
const ChunkList = () => { const ChunkList = () => {
const spaceName = useSearchParams().get('spacename') const spaceName = useSearchParams().get('spacename')
const documentId = useSearchParams().get('documentid') const documentId = useSearchParams().get('documentid')
const [total, setTotal] = useState<number>(0)
const [current, setCurrent] = useState<number>(0)
const [chunkList, setChunkList] = useState<any>([]) const [chunkList, setChunkList] = useState<any>([])
useEffect(() => { useEffect(() => {
async function fetchChunks() { async function fetchChunks() {
const res = await fetch( const res = await fetch(
`http://localhost:8000/knowledge/${spaceName}/chunk/list`, `http://30.183.154.125:5000/knowledge/${spaceName}/chunk/list`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify({ body: JSON.stringify({
document_id: documentId document_id: documentId,
page: 1,
page_size
}) })
} }
) )
const data = await res.json() const data = await res.json()
if (data.success) { if (data.success) {
setChunkList(data.data) setChunkList(data.data.data)
setTotal(data.data.total)
setCurrent(data.data.page)
} }
} }
fetchChunks() fetchChunks()
}, []) }, [])
return ( return (
<div className="p-4"> <div className="p-4">
<Table color="neutral" stripe="odd" variant="outlined"> {chunkList.length ? (
<thead> <>
<tr> <Table color="neutral" stripe="odd" variant="outlined">
<th>Name</th> <thead>
<th>Content</th> <tr>
<th>Meta Data</th> <th>Name</th>
</tr> <th>Content</th>
</thead> <th>Meta Data</th>
<tbody> </tr>
{chunkList.map((row: any) => ( </thead>
<tr key={row.id}> <tbody>
<td>{row.doc_name}</td> {chunkList.map((row: any) => (
<td> <tr key={row.id}>
{ <td>{row.doc_name}</td>
<Popover content={row.content} trigger="hover"> <td>
{row.content.length > 10 {
? `${row.content.slice(0, 10)}...` <Popover content={row.content} trigger="hover">
: row.content} {row.content.length > 10
</Popover> ? `${row.content.slice(0, 10)}...`
: row.content}
</Popover>
}
</td>
<td>
{
<Popover
content={JSON.stringify(row.meta_info || '{}', null, 2)}
trigger="hover"
>
{row.meta_info.length > 10
? `${row.meta_info.slice(0, 10)}...`
: row.meta_info}
</Popover>
}
</td>
</tr>
))}
</tbody>
</Table>
<Stack direction="row" justifyContent="flex-end" sx={{
marginTop: '20px'
}}>
<Pagination
defaultPageSize={20}
showSizeChanger={false}
current={current}
total={total}
onChange={async (page) => {
const res = await fetch(
`http://30.183.154.125:5000/knowledge/${spaceName}/chunk/list`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
document_id: documentId,
page,
page_size
})
}
)
const data = await res.json()
if (data.success) {
setChunkList(data.data.data)
setTotal(data.data.total)
setCurrent(data.data.page)
} }
</td> }}
<td> hideOnSinglePage
{ />
<Popover </Stack>
content={JSON.stringify(row.meta_info || '{}', null, 2)} </>
trigger="hover" ) : (
> <></>
{row.meta_info.length > 10 )}
? `${row.meta_info.slice(0, 10)}...`
: row.meta_info}
</Popover>
}
</td>
</tr>
))}
</tbody>
</Table>
</div> </div>
) )
} }

269
datacenter/app/datastores/documents/page.tsx
View File

@ -17,7 +17,7 @@ import {
import moment from 'moment' import moment from 'moment'
import { InboxOutlined } from '@ant-design/icons' import { InboxOutlined } from '@ant-design/icons'
import type { UploadProps } from 'antd' import type { UploadProps } from 'antd'
import { Upload, message } from 'antd' import { Upload, Pagination, message } from 'antd'
const { Dragger } = Upload const { Dragger } = Upload
const Item = styled(Sheet)(({ theme }) => ({ const Item = styled(Sheet)(({ theme }) => ({
@ -38,19 +38,20 @@ const documentTypeList = [
{ {
type: 'text', type: 'text',
title: 'Text', title: 'Text',
subTitle: 'Paste some text' subTitle: 'Fill your raw text'
}, },
{ {
type: 'webPage', type: 'webPage',
title: 'Web Page', title: 'URL',
subTitle: 'Crawl text from a web page' subTitle: 'Fetch the content of a URL'
}, },
{ {
type: 'file', type: 'file',
title: 'File', title: 'Document',
subTitle: 'It can be: PDF, CSV, JSON, Text, PowerPoint, Word, Excel' subTitle: 'Upload a document, document type can be PDF, CSV, Text, PowerPoint, Word, Markdown'
} }
] ]
const page_size = 20;
const Documents = () => { const Documents = () => {
const router = useRouter() const router = useRouter()
@ -62,9 +63,11 @@ const Documents = () => {
const [documents, setDocuments] = useState<any>([]) const [documents, setDocuments] = useState<any>([])
const [webPageUrl, setWebPageUrl] = useState<string>('') const [webPageUrl, setWebPageUrl] = useState<string>('')
const [documentName, setDocumentName] = useState<any>('') const [documentName, setDocumentName] = useState<any>('')
const [textSource, setTextSource] = useState<string>(''); const [textSource, setTextSource] = useState<string>('')
const [text, setText] = useState<string>(''); const [text, setText] = useState<string>('')
const [originFileObj, setOriginFileObj] = useState<any>(null) const [originFileObj, setOriginFileObj] = useState<any>(null)
const [total, setTotal] = useState<number>(0)
const [current, setCurrent] = useState<number>(0)
const props: UploadProps = { const props: UploadProps = {
name: 'file', name: 'file',
multiple: false, multiple: false,
@ -82,18 +85,23 @@ const Documents = () => {
useEffect(() => { useEffect(() => {
async function fetchDocuments() { async function fetchDocuments() {
const res = await fetch( const res = await fetch(
`http://localhost:8000/knowledge/${spaceName}/document/list`, `http://30.183.154.125:5000/knowledge/${spaceName}/document/list`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify({}) body: JSON.stringify({
page: 1,
page_size
})
} }
) )
const data = await res.json() const data = await res.json()
if (data.success) { if (data.success) {
setDocuments(data.data) setDocuments(data.data.data)
setTotal(data.data.total)
setCurrent(data.data.page)
} }
} }
fetchDocuments() fetchDocuments()
@ -113,89 +121,127 @@ const Documents = () => {
+ Add Datasource + Add Datasource
</Button> </Button>
</Sheet> </Sheet>
<Table color="neutral" stripe="odd" variant="outlined"> {documents.length ? (
<thead> <>
<tr> <Table color="neutral" stripe="odd" variant="outlined">
<th>Name</th> <thead>
<th>Type</th> <tr>
<th>Size</th> <th>Name</th>
<th>Last Synch</th> <th>Type</th>
<th>Status</th> <th>Size</th>
<th>Operation</th> <th>Last Synch</th>
</tr> <th>Status</th>
</thead> <th>Operation</th>
<tbody> </tr>
{documents.map((row: any) => ( </thead>
<tr key={row.id}> <tbody>
<td>{row.doc_name}</td> {documents.map((row: any) => (
<td>{row.doc_type}</td> <tr key={row.id}>
<td>{row.chunk_size}</td> <td>{row.doc_name}</td>
<td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td> <td>{row.doc_type}</td>
<td> <td>{row.chunk_size}</td>
<Chip <td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td>
color={(function () { <td>
switch (row.status) { <Chip
case 'TODO': color={(function () {
return 'neutral' switch (row.status) {
case 'RUNNING': case 'TODO':
return 'primary' return 'neutral'
case 'FINISHED': case 'RUNNING':
return 'success' return 'primary'
case 'FAILED': case 'FINISHED':
return 'danger' return 'success'
} case 'FAILED':
})()} return 'danger'
>
{row.status}
</Chip>
</td>
<td>
{
<>
<Button
variant="outlined"
size="sm"
onClick={async () => {
const res = await fetch(
`http://localhost:8000/knowledge/${spaceName}/document/sync`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
doc_ids: [row.id]
})
}
)
const data = await res.json()
if (data.success) {
message.success('success')
} else {
message.error(data.err_msg || 'failed')
} }
}} })()}
> >
Synch {row.status}
</Button> </Chip>
<Button </td>
variant="outlined" <td>
size="sm" {
onClick={() => { <>
router.push( <Button
`/datastores/documents/chunklist?spacename=${spaceName}&documentid=${row.id}` variant="outlined"
) size="sm"
}} onClick={async () => {
> const res = await fetch(
Detail of Chunks `http://30.183.154.125:5000/knowledge/${spaceName}/document/sync`,
</Button> {
</> method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
doc_ids: [row.id]
})
}
)
const data = await res.json()
if (data.success) {
message.success('success')
} else {
message.error(data.err_msg || 'failed')
}
}}
>
Synch
</Button>
<Button
variant="outlined"
size="sm"
onClick={() => {
router.push(
`/datastores/documents/chunklist?spacename=${spaceName}&documentid=${row.id}`
)
}}
>
Detail of Chunks
</Button>
</>
}
</td>
</tr>
))}
</tbody>
</Table>
<Stack direction="row" justifyContent="flex-end" sx={{
marginTop: '20px'
}}>
<Pagination
defaultPageSize={20}
showSizeChanger={false}
current={current}
total={total}
onChange={async (page) => {
const res = await fetch(
`http://30.183.154.125:5000/knowledge/${spaceName}/document/list`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
page,
page_size
})
}
)
const data = await res.json()
if (data.success) {
setDocuments(data.data.data)
setTotal(data.data.total)
setCurrent(data.data.page)
} }
</td> }}
</tr> hideOnSinglePage
))} />
</tbody> </Stack>
</Table> </>
) : (
<></>
)}
<Modal <Modal
sx={{ sx={{
display: 'flex', display: 'flex',
@ -323,7 +369,7 @@ const Documents = () => {
return return
} }
const res = await fetch( const res = await fetch(
`http://localhost:8000/knowledge/${spaceName}/document/add`, `http://30.183.154.125:5000/knowledge/${spaceName}/document/add`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
@ -341,18 +387,23 @@ const Documents = () => {
message.success('success') message.success('success')
setIsAddDocumentModalShow(false) setIsAddDocumentModalShow(false)
const res = await fetch( const res = await fetch(
`http://localhost:8000/knowledge/${spaceName}/document/list`, `http://30.183.154.125:5000/knowledge/${spaceName}/document/list`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify({}) body: JSON.stringify({
page: current,
page_size
})
} }
) )
const data = await res.json() const data = await res.json()
if (data.success) { if (data.success) {
setDocuments(data.data) setDocuments(data.data)
setTotal(data.data.total)
setCurrent(data.data.page)
} }
} else { } else {
message.error(data.err_msg || 'failed') message.error(data.err_msg || 'failed')
@ -362,12 +413,12 @@ const Documents = () => {
message.error('Please select a file') message.error('Please select a file')
return return
} }
const formData = new FormData(); const formData = new FormData()
formData.append('doc_name', documentName); formData.append('doc_name', documentName)
formData.append('doc_file', originFileObj); formData.append('doc_file', originFileObj)
formData.append('doc_type', 'DOCUMENT'); formData.append('doc_type', 'DOCUMENT')
const res = await fetch( const res = await fetch(
`http://localhost:8000/knowledge/${spaceName}/document/upload`, `http://30.183.154.125:5000/knowledge/${spaceName}/document/upload`,
{ {
method: 'POST', method: 'POST',
body: formData body: formData
@ -378,18 +429,23 @@ const Documents = () => {
message.success('success') message.success('success')
setIsAddDocumentModalShow(false) setIsAddDocumentModalShow(false)
const res = await fetch( const res = await fetch(
`http://localhost:8000/knowledge/${spaceName}/document/list`, `http://30.183.154.125:5000/knowledge/${spaceName}/document/list`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify({}) body: JSON.stringify({
page: current,
page_size
})
} }
) )
const data = await res.json() const data = await res.json()
if (data.success) { if (data.success) {
setDocuments(data.data) setDocuments(data.data)
setTotal(data.data.total)
setCurrent(data.data.page)
} }
} else { } else {
message.error(data.err_msg || 'failed') message.error(data.err_msg || 'failed')
@ -400,7 +456,7 @@ const Documents = () => {
return return
} }
const res = await fetch( const res = await fetch(
`http://localhost:8000/knowledge/${spaceName}/document/add`, `http://30.183.154.125:5000/knowledge/${spaceName}/document/add`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
@ -419,18 +475,23 @@ const Documents = () => {
message.success('success') message.success('success')
setIsAddDocumentModalShow(false) setIsAddDocumentModalShow(false)
const res = await fetch( const res = await fetch(
`http://localhost:8000/knowledge/${spaceName}/document/list`, `http://30.183.154.125:5000/knowledge/${spaceName}/document/list`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify({}) body: JSON.stringify({
page: current,
page_size
})
} }
) )
const data = await res.json() const data = await res.json()
if (data.success) { if (data.success) {
setDocuments(data.data) setDocuments(data.data)
setTotal(data.data.total)
setCurrent(data.data.page)
} }
} else { } else {
message.error(data.err_msg || 'failed') message.error(data.err_msg || 'failed')

109
datacenter/app/datastores/page.tsx
View File

@ -39,17 +39,17 @@ const documentTypeList = [
{ {
type: 'text', type: 'text',
title: 'Text', title: 'Text',
subTitle: 'Paste some text' subTitle: 'Fill your raw text'
}, },
{ {
type: 'webPage', type: 'webPage',
title: 'Web Page', title: 'URL',
subTitle: 'Crawl text from a web page' subTitle: 'Fetch the content of a URL'
}, },
{ {
type: 'file', type: 'file',
title: 'File', title: 'Document',
subTitle: 'It can be: PDF, CSV, JSON, Text, PowerPoint, Word, Excel' subTitle: 'Upload a document, document type can be PDF, CSV, Text, PowerPoint, Word, Markdown'
} }
] ]
@ -63,8 +63,8 @@ const Index = () => {
const [knowledgeSpaceName, setKnowledgeSpaceName] = useState<string>('') const [knowledgeSpaceName, setKnowledgeSpaceName] = useState<string>('')
const [webPageUrl, setWebPageUrl] = useState<string>('') const [webPageUrl, setWebPageUrl] = useState<string>('')
const [documentName, setDocumentName] = useState<any>('') const [documentName, setDocumentName] = useState<any>('')
const [textSource, setTextSource] = useState<string>(''); const [textSource, setTextSource] = useState<string>('')
const [text, setText] = useState<string>(''); const [text, setText] = useState<string>('')
const [originFileObj, setOriginFileObj] = useState<any>(null) const [originFileObj, setOriginFileObj] = useState<any>(null)
const props: UploadProps = { const props: UploadProps = {
name: 'file', name: 'file',
@ -82,13 +82,16 @@ const Index = () => {
} }
useEffect(() => { useEffect(() => {
async function fetchData() { async function fetchData() {
const res = await fetch('http://localhost:8000/knowledge/space/list', { const res = await fetch(
method: 'POST', 'http://30.183.154.125:5000/knowledge/space/list',
headers: { {
'Content-Type': 'application/json' method: 'POST',
}, headers: {
body: JSON.stringify({}) 'Content-Type': 'application/json'
}) },
body: JSON.stringify({})
}
)
const data = await res.json() const data = await res.json()
if (data.success) { if (data.success) {
setKnowledgeSpaceList(data.data) setKnowledgeSpaceList(data.data)
@ -121,35 +124,39 @@ const Index = () => {
</Button> </Button>
</Sheet> </Sheet>
<div className="page-body p-4"> <div className="page-body p-4">
<Table color="neutral" stripe="odd" variant="outlined"> {knowledgeSpaceList.length ? (
<thead> <Table color="neutral" stripe="odd" variant="outlined">
<tr> <thead>
<th>Name</th> <tr>
<th>Provider</th> <th>Name</th>
<th>Owner</th> <th>Provider</th>
</tr> <th>Owner</th>
</thead>
<tbody>
{knowledgeSpaceList.map((row: any) => (
<tr key={row.id}>
<td>
{
<a
href="javascript:;"
onClick={() =>
router.push(`/datastores/documents?name=${row.name}`)
}
>
{row.name}
</a>
}
</td>
<td>{row.vector_type}</td>
<td>{row.owner}</td>
</tr> </tr>
))} </thead>
</tbody> <tbody>
</Table> {knowledgeSpaceList.map((row: any) => (
<tr key={row.id}>
<td>
{
<a
href="javascript:;"
onClick={() =>
router.push(`/datastores/documents?name=${row.name}`)
}
>
{row.name}
</a>
}
</td>
<td>{row.vector_type}</td>
<td>{row.owner}</td>
</tr>
))}
</tbody>
</Table>
) : (
<></>
)}
</div> </div>
<Modal <Modal
sx={{ sx={{
@ -199,7 +206,7 @@ const Index = () => {
return return
} }
const res = await fetch( const res = await fetch(
'http://localhost:8000/knowledge/space/add', 'http://30.183.154.125:5000/knowledge/space/add',
{ {
method: 'POST', method: 'POST',
headers: { headers: {
@ -218,7 +225,7 @@ const Index = () => {
message.success('success') message.success('success')
setActiveStep(1) setActiveStep(1)
const res = await fetch( const res = await fetch(
'http://localhost:8000/knowledge/space/list', 'http://30.183.154.125:5000/knowledge/space/list',
{ {
method: 'POST', method: 'POST',
headers: { headers: {
@ -335,7 +342,7 @@ const Index = () => {
return return
} }
const res = await fetch( const res = await fetch(
`http://localhost:8000/knowledge/${knowledgeSpaceName}/document/add`, `http://30.183.154.125:5000/knowledge/${knowledgeSpaceName}/document/add`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
@ -360,12 +367,12 @@ const Index = () => {
message.error('Please select a file') message.error('Please select a file')
return return
} }
const formData = new FormData(); const formData = new FormData()
formData.append('doc_name', documentName); formData.append('doc_name', documentName)
formData.append('doc_file', originFileObj); formData.append('doc_file', originFileObj)
formData.append('doc_type', 'DOCUMENT'); formData.append('doc_type', 'DOCUMENT')
const res = await fetch( const res = await fetch(
`http://localhost:8000/knowledge/${knowledgeSpaceName}/document/upload`, `http://30.183.154.125:5000/knowledge/${knowledgeSpaceName}/document/upload`,
{ {
method: 'POST', method: 'POST',
body: formData body: formData
@ -384,7 +391,7 @@ const Index = () => {
return return
} }
const res = await fetch( const res = await fetch(
`http://localhost:8000/knowledge/${knowledgeSpaceName}/document/add`, `http://30.183.154.125:5000/knowledge/${knowledgeSpaceName}/document/add`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {

17
datacenter/app/globals.css
View File

@ -10,4 +10,21 @@ body {
font-size: var(--joy-fontSize-md, 1rem); font-size: var(--joy-fontSize-md, 1rem);
line-height: var(--joy-lineHeight-md, 1.5); line-height: var(--joy-lineHeight-md, 1.5);
background-color: var(--joy-palette-background-body); background-color: var(--joy-palette-background-body);
}
.ant-pagination .ant-pagination-prev * {
color: rgb(145, 35, 167) !important;
}
.ant-pagination .ant-pagination-next * {
color: rgb(145, 35, 167) !important;
}
.ant-pagination .ant-pagination-item {
border-color: rgb(145, 35, 167) !important;
background-color: rgb(145, 35, 167) !important;
}
.ant-pagination .ant-pagination-item.ant-pagination-item-active a {
color: white !important;
} }

19
datacenter/components/leftSider.tsx
View File

@ -4,8 +4,7 @@ import { usePathname, useSearchParams } from 'next/navigation';
import Link from 'next/link'; import Link from 'next/link';
import Image from 'next/image'; import Image from 'next/image';
import { Box, List, ListItem, ListItemButton, ListItemDecorator, ListItemContent, Typography, Button, useColorScheme } from '@/lib/mui'; import { Box, List, ListItem, ListItemButton, ListItemDecorator, ListItemContent, Typography, Button, useColorScheme } from '@/lib/mui';
import SmartToyRoundedIcon from '@mui/icons-material/SmartToyRounded'; // Icons import import Article from '@mui/icons-material/Article';
import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
import DarkModeIcon from '@mui/icons-material/DarkMode'; import DarkModeIcon from '@mui/icons-material/DarkMode';
import WbSunnyIcon from '@mui/icons-material/WbSunny'; import WbSunnyIcon from '@mui/icons-material/WbSunny';
import MenuIcon from '@mui/icons-material/Menu'; import MenuIcon from '@mui/icons-material/Menu';
@ -19,14 +18,9 @@ const LeftSider = () => {
const menus = useMemo(() => { const menus = useMemo(() => {
return [{ return [{
label: 'Agents', label: 'Knowledge Space',
icon: <SmartToyRoundedIcon fontSize="small" />,
route: '/agents',
active: pathname === '/agents',
}, {
label: 'Datastores',
route: '/datastores', route: '/datastores',
icon: <StorageRoundedIcon fontSize="small" />, icon: <Article fontSize="small" />,
active: pathname === '/datastores' active: pathname === '/datastores'
}]; }];
}, [pathname]); }, [pathname]);
@ -75,13 +69,6 @@ const LeftSider = () => {
}} }}
> >
<div className='flex items-center gap-3'> <div className='flex items-center gap-3'>
<Image
src="/databerry-logo-icon.png"
width="100"
height="100"
className='w-12'
alt="Databerry"
/>
<Typography component="h1" fontWeight="xl"> <Typography component="h1" fontWeight="xl">
DB-GPT DB-GPT
</Typography> </Typography>

BIN
datacenter/public/databerry-logo-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 115 KiB