194 lines
10 KiB
PHP
194 lines
10 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 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 = () => {
|
|
// Placeholder for AI report generation
|
|
setReportContent("Generating report... (This is a placeholder, AI integration is not yet implemented). Based on the document, the key points are...");
|
|
};
|
|
|
|
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">
|
|
<p className="text-sm text-gray-600">{reportContent}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="mt-6 flex justify-end space-x-4">
|
|
<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>
|