Spaces:
Running
Running
import React, { useState } from 'react'; | |
import { | |
Container, | |
Typography, | |
Button, | |
TextField, | |
Box, | |
Paper | |
} from '@mui/material'; | |
function App() { | |
const [file, setFile] = useState(null); | |
const [question, setQuestion] = useState(''); | |
const [response, setResponse] = useState(''); | |
const [sessionId, setSessionId] = useState(''); | |
const [error, setError] = useState(''); | |
const [isProcessing, setIsProcessing] = useState(false); | |
const handleFileUpload = async (event) => { | |
event.preventDefault(); | |
const formData = new FormData(); | |
formData.append('file', event.target.files[0]); | |
setError(''); | |
setIsProcessing(true); | |
try { | |
const response = await fetch('http://localhost:8000/upload', { | |
method: 'POST', | |
body: formData, | |
headers: { | |
'Accept': 'application/json' | |
} | |
}); | |
const data = await response.json(); | |
if (data.session_id) { | |
setSessionId(data.session_id); | |
console.log('Upload successful, session ID:', data.session_id); | |
} else { | |
setError('Upload failed: No session ID received'); | |
console.error('Upload response:', data); | |
} | |
} catch (error) { | |
setError('Upload failed: ' + error.message); | |
console.error('Upload error:', error); | |
} finally { | |
setIsProcessing(false); | |
} | |
}; | |
const handleQuestionSubmit = async () => { | |
if (!sessionId) { | |
setError('Please upload a document first'); | |
return; | |
} | |
setError(''); | |
setResponse(''); // Clear previous response | |
try { | |
console.log('Sending query with session ID:', sessionId); | |
const response = await fetch('http://localhost:8000/query', { | |
method: 'POST', | |
headers: { | |
'Content-Type': 'application/json', | |
'Accept': 'application/json', | |
}, | |
body: JSON.stringify({ | |
session_id: sessionId, | |
query: question | |
}), | |
}); | |
console.log('Response status:', response.status); | |
const responseText = await response.text(); | |
console.log('Raw response:', responseText); | |
if (!response.ok) { | |
throw new Error(`HTTP error! status: ${response.status}, body: ${responseText}`); | |
} | |
const data = JSON.parse(responseText); | |
console.log('Parsed response data:', data); | |
if (data.answer) { | |
console.log('Setting response:', data.answer); | |
setResponse(data.answer); | |
console.log('Response state after setting:', data.answer); | |
} else { | |
setError('No answer received from the server'); | |
console.error('Unexpected response format:', data); | |
} | |
} catch (error) { | |
setError('Query failed: ' + error.message); | |
console.error('Query error:', error); | |
} | |
}; | |
return ( | |
<Container maxWidth="md"> | |
<Box sx={{ my: 4 }}> | |
<Typography variant="h4" component="h1" gutterBottom> | |
RAG Application | |
</Typography> | |
<Paper sx={{ p: 2, mb: 2 }}> | |
<Typography variant="h6" gutterBottom> | |
Upload Document | |
</Typography> | |
<Button | |
variant="contained" | |
component="label" | |
disabled={isProcessing} | |
> | |
{isProcessing ? 'Processing...' : 'Choose File'} | |
<input | |
type="file" | |
hidden | |
onChange={handleFileUpload} | |
disabled={isProcessing} | |
/> | |
</Button> | |
<Typography sx={{ mt: 1, color: isProcessing ? 'info.main' : 'success.main' }}> | |
{isProcessing ? 'Processing document...' : | |
sessionId ? 'Document uploaded and processed successfully!' : | |
'No document uploaded yet'} | |
</Typography> | |
</Paper> | |
<Paper sx={{ p: 2, mb: 2 }}> | |
<Typography variant="h6" gutterBottom> | |
Ask a Question | |
</Typography> | |
<TextField | |
fullWidth | |
multiline | |
rows={2} | |
value={question} | |
onChange={(e) => setQuestion(e.target.value)} | |
sx={{ mb: 2 }} | |
placeholder="Enter your question here..." | |
/> | |
<Button | |
variant="contained" | |
onClick={handleQuestionSubmit} | |
disabled={!sessionId || isProcessing} | |
> | |
Submit Query | |
</Button> | |
</Paper> | |
<Paper sx={{ p: 2 }}> | |
<Typography variant="h6" gutterBottom> | |
Response | |
</Typography> | |
<Box sx={{ mb: 2 }}> | |
{error && ( | |
<Typography sx={{ color: 'error.main', mb: 2 }}> | |
{error} | |
</Typography> | |
)} | |
<Typography sx={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}> | |
{response || "No response yet. Please upload a document and ask a question."} | |
</Typography> | |
</Box> | |
</Paper> | |
</Box> | |
</Container> | |
); | |
} | |
export default App; |