philipk22's picture
fix code
486165c
raw
history blame contribute delete
5.05 kB
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;