234 lines
13 KiB
PHP
234 lines
13 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MAKDOC - AI Legal Assistant</title>
|
|
<!-- Scripts -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js"></script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
|
<script>pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js`;</script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<link href="assets/css/custom.css" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<div id="root"></div>
|
|
|
|
<script type="text/babel">
|
|
const { useState, useEffect } = React;
|
|
|
|
// Main App Component
|
|
function App() {
|
|
const [file, setFile] = useState(null);
|
|
const [fileContent, setFileContent] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [reportContent, setReportContent] = useState('AI-generated report will appear here.');
|
|
const [reportTemplate, setReportTemplate] = useState('summary');
|
|
|
|
const handleFileChange = (e) => {
|
|
const selectedFile = e.target.files[0];
|
|
if (selectedFile) {
|
|
setFile(selectedFile);
|
|
extractText(selectedFile);
|
|
}
|
|
};
|
|
|
|
const extractText = (fileToProcess) => {
|
|
setIsLoading(true);
|
|
setFileContent('');
|
|
const reader = new FileReader();
|
|
const fileType = fileToProcess.type;
|
|
|
|
if (fileType === 'application/pdf') {
|
|
reader.onload = (e) => {
|
|
const typedarray = new Uint8Array(e.target.result);
|
|
pdfjsLib.getDocument(typedarray).promise.then(pdf => {
|
|
let text = '';
|
|
const numPages = pdf.numPages;
|
|
const promises = [];
|
|
for (let i = 1; i <= numPages; i++) {
|
|
promises.push(pdf.getPage(i).then(page => {
|
|
return page.getTextContent().then(content => {
|
|
return content.items.map(item => item.str).join(' ');
|
|
});
|
|
}));
|
|
}
|
|
Promise.all(promises).then(pagesText => {
|
|
setFileContent(pagesText.join('\n\n'));
|
|
setIsLoading(false);
|
|
});
|
|
});
|
|
};
|
|
reader.readAsArrayBuffer(fileToProcess);
|
|
} else if (fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
|
|
reader.onload = (e) => {
|
|
mammoth.extractRawText({ arrayBuffer: e.target.result })
|
|
.then(result => {
|
|
setFileContent(result.value);
|
|
setIsLoading(false);
|
|
})
|
|
.catch(err => {
|
|
console.error("Mammoth error:", err);
|
|
setFileContent("Error extracting text from DOCX file.");
|
|
setIsLoading(false);
|
|
});
|
|
};
|
|
reader.readAsArrayBuffer(fileToProcess);
|
|
} else {
|
|
setFileContent('Unsupported file type. Please upload a PDF or DOCX file.');
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const generateReport = () => {
|
|
setReportContent('<div class="flex justify-center items-center h-full"><i class="fas fa-spinner fa-spin text-3xl text-indigo-500"></i></div>');
|
|
fetch('/api/generate_report.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ text: fileContent, template: reportTemplate }),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
setReportContent(data.report);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error generating report:', error);
|
|
setReportContent('An error occurred while generating the report.');
|
|
});
|
|
};
|
|
|
|
const exportToPdf = () => {
|
|
const element = document.getElementById('report-content-wrapper');
|
|
if (!element) {
|
|
alert("No content to export.");
|
|
return;
|
|
}
|
|
const opt = {
|
|
margin: 0.5,
|
|
filename: 'MAKDOC_Report.pdf',
|
|
image: { type: 'jpeg', quality: 0.98 },
|
|
html2canvas: { scale: 2 },
|
|
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
|
|
};
|
|
html2pdf().from(element).set(opt).save();
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-screen bg-gray-100 font-sans">
|
|
{/* Sidebar */}
|
|
<aside className="w-64 bg-white shadow-md">
|
|
<div className="p-6">
|
|
<h1 className="text-2xl font-bold text-indigo-600">MAKDOC.AI</h1>
|
|
</div>
|
|
<nav className="mt-6">
|
|
<a href="#" className="flex items-center px-6 py-3 text-gray-700 bg-gray-200">
|
|
<i className="fas fa-file-upload mr-3"></i>
|
|
Document Analysis
|
|
</a>
|
|
<a href="#" className="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-200">
|
|
<i className="fas fa-history mr-3"></i>
|
|
History
|
|
</a>
|
|
<a href="#" className="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-200">
|
|
<i className="fas fa-cog mr-3"></i>
|
|
Settings
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-1 p-8">
|
|
<div className="glass-card p-6 h-full flex flex-col">
|
|
<div className="glass-card-header -m-6 mb-6 p-4">
|
|
<h2 className="text-xl font-semibold text-gray-800">AI Document Analysis</h2>
|
|
</div>
|
|
|
|
{/* Upload Area */}
|
|
<div className="mb-6">
|
|
<label htmlFor="file-upload" className="cursor-pointer btn-gradient text-white font-bold py-3 px-6 rounded-lg inline-block">
|
|
<i className="fas fa-upload mr-2"></i>
|
|
{file ? 'Change Document' : 'Upload Document (PDF/DOCX)'}
|
|
</label>
|
|
<input id="file-upload" type="file" className="hidden" onChange={handleFileChange} accept=".pdf,.docx" />
|
|
{file && <span className="ml-4 text-gray-600">{file.name}</span>}
|
|
</div>
|
|
|
|
{/* Content & Report Area */}
|
|
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-6 min-h-0">
|
|
{/* Extracted Text */}
|
|
<div className="bg-white rounded-lg shadow p-4 flex flex-col">
|
|
<h3 className="text-lg font-semibold text-gray-700 mb-2">Extracted Content</h3>
|
|
<div className="flex-1 overflow-y-auto p-2 border rounded">
|
|
{isLoading ? (
|
|
<div className="flex justify-center items-center h-full">
|
|
<i className="fas fa-spinner fa-spin text-3xl text-indigo-500"></i>
|
|
</div>
|
|
) : (
|
|
<pre className="whitespace-pre-wrap text-sm text-gray-600">{fileContent || "Upload a document to see its content here."}</pre>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* AI Generated Report */}
|
|
<div className="bg-white rounded-lg shadow p-4 flex flex-col">
|
|
<h3 className="text-lg font-semibold text-gray-700 mb-2">Generated Report</h3>
|
|
<div id="report-content-wrapper" className="flex-1 overflow-y-auto p-2 border rounded">
|
|
<div className="text-sm text-gray-600" dangerouslySetInnerHTML={{ __html: reportContent }}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="mt-6 flex justify-end items-center space-x-4">
|
|
<div className="relative">
|
|
<select
|
|
value={reportTemplate}
|
|
onChange={(e) => setReportTemplate(e.target.value)}
|
|
className="appearance-none bg-white border border-gray-300 rounded-lg py-2 pl-4 pr-8 text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
>
|
|
<option value="summary">Case Summary</option>
|
|
<option value="timeline">Timeline of Events</option>
|
|
<option value="persons">Key Individuals</option>
|
|
<option value="evidence">Evidence Log</option>
|
|
<option value="case_diary">Case Diary Status Report</option>
|
|
<option value="bail_reply">Bail Reply</option>
|
|
<option value="high_court_status">High Court Status Report</option>
|
|
<option value="seizure_memo">Seizure Memo</option>
|
|
<option value="chargesheet">Chargesheet</option>
|
|
<option value="disclosure_statement">Disclosure Statement</option>
|
|
<option value="exemption_request">Exemption Request</option>
|
|
<option value="nbw">NBW</option>
|
|
<option value="release_of_rc_reply">Release of RC Reply</option>
|
|
<option value="request_for_cartridges">Request for Cartridges</option>
|
|
</select>
|
|
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
|
<i className="fas fa-chevron-down text-xs"></i>
|
|
</div>
|
|
</div>
|
|
<button onClick={generateReport} disabled={!fileContent} className="btn-gradient font-bold py-2 px-6 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<i className="fas fa-magic mr-2"></i>
|
|
Generate Report
|
|
</button>
|
|
<button onClick={exportToPdf} disabled={!fileContent} className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-6 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<i className="fas fa-file-pdf mr-2"></i>
|
|
Export as PDF
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ReactDOM.render(<App />, document.getElementById('root'));
|
|
</script>
|
|
</body>
|
|
</html>
|