github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-08-13 14:06:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: upload files

Browse Source
This commit is contained in:
shiweisong.ssw 2023-06-28 16:19:12 +08:00
parent 2813aa0ed1
commit 7adeceaf00
2 changed files with 275 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,8 +14,21 @@ import {
styled styled
} from '@/lib/mui' } from '@/lib/mui'
import moment from 'moment' import moment from 'moment'
import { message } from 'antd' import { InboxOutlined } from '@ant-design/icons'
import type { UploadProps } from 'antd'
import { Upload, message } from 'antd'
const { Dragger } = Upload
const Item = styled(Sheet)(({ theme }) => ({
width: '50%',
backgroundColor:
theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
borderRadius: 4,
color: theme.vars.palette.text.secondary
}))
const stepsOfAddingDocument = [ const stepsOfAddingDocument = [
'Choose a Datasource type', 'Choose a Datasource type',
'Setup the Datasource' 'Setup the Datasource'
@ -37,16 +50,6 @@ const documentTypeList = [
subTitle: 'It can be: PDF, CSV, JSON, Text, PowerPoint, Word, Excel' subTitle: 'It can be: PDF, CSV, JSON, Text, PowerPoint, Word, Excel'
} }
] ]
const Item = styled(Sheet)(({ theme }) => ({
width: '50%',
backgroundColor:
theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
borderRadius: 4,
color: theme.vars.palette.text.secondary
}))
const Documents = () => { const Documents = () => {
const router = useRouter() const router = useRouter()
@ -54,9 +57,25 @@ const Documents = () => {
const [isAddDocumentModalShow, setIsAddDocumentModalShow] = const [isAddDocumentModalShow, setIsAddDocumentModalShow] =
useState<boolean>(false) useState<boolean>(false)
const [activeStep, setActiveStep] = useState<number>(0) const [activeStep, setActiveStep] = useState<number>(0)
const [documentType, setDocumentType] = useState<string>('')
const [documents, setDocuments] = useState<any>([]) const [documents, setDocuments] = useState<any>([])
const [webPageUrl, setWebPageUrl] = useState<string>('') const [webPageUrl, setWebPageUrl] = useState<string>('')
const [documentName, setDocumentName] = useState<string>('') const [documentName, setDocumentName] = useState<any>('')
const [originFileObj, setOriginFileObj] = useState<any>(null)
const props: UploadProps = {
name: 'file',
multiple: false,
onChange(info) {
console.log(info)
if (info.fileList.length === 0) {
setOriginFileObj(null)
setDocumentName('')
return
}
setOriginFileObj(info.file.originFileObj)
setDocumentName(info.file.originFileObj?.name)
}
}
useEffect(() => { useEffect(() => {
async function fetchDocuments() { async function fetchDocuments() {
const res = await fetch( const res = await fetch(
@ -109,20 +128,24 @@ const Documents = () => {
<td>{row.doc_type}</td> <td>{row.doc_type}</td>
<td>{row.chunk_size}</td> <td>{row.chunk_size}</td>
<td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td> <td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td>
<td><Chip color={ <td>
(function(){ <Chip
switch(row.status) { color={(function () {
case 'TODO': switch (row.status) {
return 'neutral'; case 'TODO':
case 'RUNNING': return 'neutral'
return 'primary'; case 'RUNNING':
case 'FINISHED': return 'primary'
return 'success'; case 'FINISHED':
case 'FAILED': return 'success'
return 'danger'; case 'FAILED':
} return 'danger'
})() }
}>{row.status}</Chip></td> })()}
>
{row.status}
</Chip>
</td>
<td> <td>
{ {
<> <>
@ -221,6 +244,7 @@ const Documents = () => {
}} }}
onClick={() => { onClick={() => {
if (item.type === 'webPage') { if (item.type === 'webPage') {
setDocumentType(item.type)
setActiveStep(1) setActiveStep(1)
} }
}} }}
@ -243,10 +267,36 @@ const Documents = () => {
sx={{ marginBottom: '20px' }} sx={{ marginBottom: '20px' }}
/> />
Web Page URL: Web Page URL:
<Input {documentType === 'webPage' ? (
placeholder="Please input the Web Page URL" <>
onChange={(e: any) => setWebPageUrl(e.target.value)} Web Page URL:
/> <Input
placeholder="Please input the Web Page URL"
onChange={(e: any) => setWebPageUrl(e.target.value)}
/>
</>
) : documentType === 'file' ? (
<>
<Dragger {...props}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p
style={{ color: 'rgb(22, 108, 255)', fontSize: '20px' }}
>
Select or Drop file
</p>
<p
className="ant-upload-hint"
style={{ color: 'rgb(22, 108, 255)' }}
>
PDF, PowerPoint, Excel, Word, Text, Markdown,
</p>
</Dragger>
</>
) : (
<></>
)}
</Box> </Box>
<Button <Button
onClick={async () => { onClick={async () => {
@ -254,44 +304,86 @@ const Documents = () => {
message.error('Please input the name') message.error('Please input the name')
return return
} }
if (webPageUrl === '') { if (documentType === 'webPage') {
message.error('Please input the Web Page URL') if (webPageUrl === '') {
return message.error('Please input the Web Page URL')
} return
const res = await fetch(
`http://localhost:8000/knowledge/${spaceName}/document/add`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
doc_name: documentName,
content: webPageUrl,
doc_type: 'URL'
})
} }
)
const data = await res.json()
if (data.success) {
message.success('success')
setIsAddDocumentModalShow(false)
const res = await fetch( const res = await fetch(
`http://localhost:8000/knowledge/${spaceName}/document/list`, `http://localhost:8000/knowledge/${spaceName}/document/add`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify({}) body: JSON.stringify({
doc_name: documentName,
content: webPageUrl,
doc_type: 'URL'
})
} }
) )
const data = await res.json() const data = await res.json()
if (data.success) { if (data.success) {
setDocuments(data.data) message.success('success')
setIsAddDocumentModalShow(false)
const res = await fetch(
`http://localhost:8000/knowledge/${spaceName}/document/list`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({})
}
)
const data = await res.json()
if (data.success) {
setDocuments(data.data)
}
} else {
message.error(data.err_msg || 'failed')
}
} else if (documentType === 'file') {
if (!originFileObj) {
message.error('Please select a file')
return
}
const res = await fetch(
`http://localhost:8000/knowledge/${spaceName}/document/upload`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
doc_name: documentName,
doc_file: originFileObj,
doc_type: 'DOCUMENT'
})
}
)
const data = await res.json()
if (data.success) {
message.success('success')
setIsAddDocumentModalShow(false)
const res = await fetch(
`http://localhost:8000/knowledge/${spaceName}/document/list`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({})
}
)
const data = await res.json()
if (data.success) {
setDocuments(data.data)
}
} else {
message.error(data.err_msg || 'failed')
} }
} else {
message.error(data.err_msg || 'failed')
} }
}} }}
> >

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

@ -2,7 +2,9 @@
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { message } from 'antd' import { InboxOutlined } from '@ant-design/icons'
import type { UploadProps } from 'antd'
import { message, Upload } from 'antd'
import { import {
Modal, Modal,
Button, Button,
@ -14,6 +16,8 @@ import {
styled styled
} from '@/lib/mui' } from '@/lib/mui'
const { Dragger } = Upload
const Item = styled(Sheet)(({ theme }) => ({ const Item = styled(Sheet)(({ theme }) => ({
width: '33%', width: '33%',
backgroundColor: backgroundColor:
@ -51,12 +55,28 @@ const documentTypeList = [
const Index = () => { const Index = () => {
const router = useRouter() const router = useRouter()
const [activeStep, setActiveStep] = useState<number>(0) const [activeStep, setActiveStep] = useState<number>(0)
const [documentType, setDocumentType] = useState<string>('')
const [knowledgeSpaceList, setKnowledgeSpaceList] = useState<any>([]) const [knowledgeSpaceList, setKnowledgeSpaceList] = useState<any>([])
const [isAddKnowledgeSpaceModalShow, setIsAddKnowledgeSpaceModalShow] = const [isAddKnowledgeSpaceModalShow, setIsAddKnowledgeSpaceModalShow] =
useState<boolean>(false) useState<boolean>(false)
const [knowledgeSpaceName, setKnowledgeSpaceName] = useState<string>('') const [knowledgeSpaceName, setKnowledgeSpaceName] = useState<string>('')
const [webPageUrl, setWebPageUrl] = useState<string>('') const [webPageUrl, setWebPageUrl] = useState<string>('')
const [documentName, setDocumentName] = useState<string>('') const [documentName, setDocumentName] = useState<any>('')
const [originFileObj, setOriginFileObj] = useState<any>(null)
const props: UploadProps = {
name: 'file',
multiple: false,
onChange(info) {
console.log(info)
if (info.fileList.length === 0) {
setOriginFileObj(null)
setDocumentName('')
return
}
setOriginFileObj(info.file.originFileObj)
setDocumentName(info.file.originFileObj?.name)
}
}
useEffect(() => { useEffect(() => {
async function fetchData() { async function fetchData() {
const res = await fetch('http://localhost:8000/knowledge/space/list', { const res = await fetch('http://localhost:8000/knowledge/space/list', {
@ -75,14 +95,21 @@ const Index = () => {
}, []) }, [])
return ( return (
<> <>
<Sheet sx={{ <Sheet
display: "flex", sx={{
justifyContent: "space-between" display: 'flex',
}} className="p-4"> justifyContent: 'space-between'
<Sheet sx={{ }}
fontSize: '30px', className="p-4"
fontWeight: 'bold' >
}}>Knowledge Spaces</Sheet> <Sheet
sx={{
fontSize: '30px',
fontWeight: 'bold'
}}
>
Knowledge Spaces
</Sheet>
<Button <Button
onClick={() => setIsAddKnowledgeSpaceModalShow(true)} onClick={() => setIsAddKnowledgeSpaceModalShow(true)}
variant="outlined" variant="outlined"
@ -218,7 +245,7 @@ const Index = () => {
sx={{ sx={{
boxSizing: 'border-box', boxSizing: 'border-box',
height: '80px', height: '80px',
padding: '12px', padding: '12px',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'space-between', justifyContent: 'space-between',
@ -228,12 +255,13 @@ const Index = () => {
cursor: 'pointer' cursor: 'pointer'
}} }}
onClick={() => { onClick={() => {
if (item.type === 'webPage') { setDocumentType(item.type)
setActiveStep(2); setActiveStep(2)
}
}} }}
> >
<Sheet sx={{ fontSize: '20px', fontWeight: 'bold' }}>{item.title}</Sheet> <Sheet sx={{ fontSize: '20px', fontWeight: 'bold' }}>
{item.title}
</Sheet>
<Sheet>{item.subTitle}</Sheet> <Sheet>{item.subTitle}</Sheet>
</Sheet> </Sheet>
))} ))}
@ -246,44 +274,97 @@ const Index = () => {
<Input <Input
placeholder="Please input the name" placeholder="Please input the name"
onChange={(e: any) => setDocumentName(e.target.value)} onChange={(e: any) => setDocumentName(e.target.value)}
sx={{ marginBottom: '20px'}} sx={{ marginBottom: '20px' }}
/>
Web Page URL:
<Input
placeholder="Please input the Web Page URL"
onChange={(e: any) => setWebPageUrl(e.target.value)}
/> />
{documentType === 'webPage' ? (
<>
Web Page URL:
<Input
placeholder="Please input the Web Page URL"
onChange={(e: any) => setWebPageUrl(e.target.value)}
/>
</>
) : documentType === 'file' ? (
<>
<Dragger {...props}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p
style={{ color: 'rgb(22, 108, 255)', fontSize: '20px' }}
>
Select or Drop file
</p>
<p
className="ant-upload-hint"
style={{ color: 'rgb(22, 108, 255)' }}
>
PDF, PowerPoint, Excel, Word, Text, Markdown,
</p>
</Dragger>
</>
) : (
<></>
)}
</Box> </Box>
<Button <Button
onClick={async () => { onClick={async () => {
if (documentName === '') { if (documentName === '') {
message.error('Please input the name'); message.error('Please input the name')
return; return
} }
if (webPageUrl === '') { if (documentType === 'webPage') {
message.error('Please input the Web Page URL'); if (webPageUrl === '') {
return; message.error('Please input the Web Page URL')
} return
const res = await fetch( }
`http://localhost:8000/knowledge/${knowledgeSpaceName}/document/add`, const res = await fetch(
{ `http://localhost:8000/knowledge/${knowledgeSpaceName}/document/add`,
method: 'POST', {
headers: { method: 'POST',
'Content-Type': 'application/json' headers: {
}, 'Content-Type': 'application/json'
body: JSON.stringify({ },
doc_name: documentName, body: JSON.stringify({
content: webPageUrl, doc_name: documentName,
doc_type: 'URL' content: webPageUrl,
}) doc_type: 'URL'
})
}
)
const data = await res.json()
if (data.success) {
message.success('success')
setIsAddKnowledgeSpaceModalShow(false)
} else {
message.error(data.err_msg || 'failed')
}
} else if (documentType === 'file') {
if (!originFileObj) {
message.error('Please select a file')
return
}
const res = await fetch(
`http://localhost:8000/knowledge/${knowledgeSpaceName}/document/upload`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
doc_name: documentName,
doc_file: originFileObj,
doc_type: 'DOCUMENT'
})
}
)
const data = await res.json()
if (data.success) {
message.success('success')
setIsAddKnowledgeSpaceModalShow(false)
} else {
message.error(data.err_msg || 'failed')
} }
)
const data = await res.json()
if (data.success) {
message.success('success')
setIsAddKnowledgeSpaceModalShow(false)
} else {
message.error(data.err_msg || 'failed')
} }
}} }}
> >