PROGRAM :

const mysql = require('mysql2/promise');

// Create a connection pool
const pool = mysql.createPool({
host: 'localhost',
user: 'root', // Replace with your MySQL username
password: 'password', // Replace with your MySQL password
database: 'school' // Replace with your database name
});
async function main() {
try {
// Get a connection from the pool
const connection = await pool.getConnection();
console.log('Connected to MySQL database!');
// Create students table if it doesn't exist
await connection.execute(`
CREATE TABLE IF NOT EXISTS students (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
age INT NOT NULL,
grade VARCHAR(5) NOT NULL
)`);
// Clear existing data for clean demo
await connection.execute('TRUNCATE TABLE students');
// Insert sample student data
console.log('\n--- Inserting student data ---');
const insertResult = await connection.execute(
'INSERT INTO students (name, age, grade) VALUES (?, ?, ?)',
['John Doe', 18, 'A']
);
const studentId = insertResult[0].insertId;
console.log(`Inserted student with ID: ${studentId}`);
// Insert multiple students at once
await connection.execute(
'INSERT INTO students (name, age, grade) VALUES (?, ?, ?), (?, ?, ?)',
['Jane Smith', 19, 'A+', 'Bob Johnson', 20, 'B']
)
// Retrieve all students
console.log('\n--- Retrieved student data after insert ---');
const [rows] = await connection.execute('SELECT * FROM students');
console.log(rows);
// Update student data
console.log('\n--- Updating student data ---');
await connection.execute(
'UPDATE students SET grade = ? WHERE id = ?',
['A++', studentId]
);
console.log(`Updated student with ID: ${studentId}`);
// Retrieve updated student data
console.log('\n--- Retrieved student data after update ---');
const [updatedRows] = await connection.execute('SELECT * FROM students');
console.log(updatedRows);
// Release connection back to the pool
 connection.release();
console.log('\nConnection released back to the pool');
} catch (error) {
console.error('Error:', error);
} finally {
// End the pool to close all connections
await pool.end();
console.log('Pool ended and all connections closed');
}
}
main();

OUTPUT :
PROGRAM:
LoginUser.js:

const redis = require('redis');

async function loginUser(email, password) {
const client = redis.createClient({
url: 'redis://localhost:6379'
});
await client.connect();
console.log("Connected to Redis");
const userKey = user:${email};
const storedPassword = await client.get(userKey);
if (!storedPassword) {
console.log("User not found.");
} else if (storedPassword === password) {
console.log(" Login successful!");
} else {
console.log(" Invalid password.");
}
await client.quit();
}
loginUser('[email protected]', 'securepassword123');

registerUser.js:

const redis = require('redis');

async function registerUser(email, password) {
const client = redis.createClient({
 url: 'redis://localhost:6379'
});
await client.connect();
console.log("Connected to Redis");
const userKey = user:${email};
await client.set(userKey, password);
console.log(User ${email} registered.);
const storedPassword = await client.get(userKey);
console.log(Stored password for ${email}: ${storedPassword});
await client.quit();
}
registerUser('[email protected]', 'securepassword123');

OUTPUT:
PROGRAM:

sendEmail.js:

const nodemailer = require('nodemailer');

const transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: '[email protected]',
pass: 'amrzbsgewqgyajoi'
}
});

const mailOptions = {
from: '[email protected]',
to: '[email protected]',
subject: 'Default Subject',
text: 'This is the default email content sent using Node.js!'
};

transporter.sendMail(mailOptions, (error, info) => {

if (error) {
return console.error('Error sending email:', error);
}
console.log('Email sent:', info.response);
});
OUTPUT :
Step 1.

Create a New Directory

mkdir git_demo

Explanation:
Creates a new folder named git_demo in the current directory. This is where you’ll store
your project files.

Step 2.

Change into the Directory

cd git_demo

Explanation:
Moves you into the newly created git_demo directory so you can start working inside it.

Step 3.

Create a README File

echo "# git_demo" >> README.md

Explanation:
Creates a file named README.md and writes # git_demo into it.
The >> appends content to the file, creating it if it doesn't exist.
README.md is commonly used to describe the project.

Step 4.

Initialize a Git Repository

git init

Explanation:
Initializes a new Git repository in the current directory.
This creates a hidden .git folder where Git stores its data and version history.
Step 5.

Stage the README File

git add README.md

Explanation:
Stages README.md for commit, meaning Git will track this file in the next commit.

Step 6.

Commit the File

git commit -m "first commit"

Explanation:
Commits the staged file(s) to the repository with the message "first commit".
This creates the first snapshot of your project.

Step 7.

Rename the Branch to main

git branch -M main

Explanation:
Renames the default branch from master to main (GitHub and other platforms now use
main by default).
-M forces the rename even if main already exists.

Step 8.

Add a Remote Repository

git remote add origin https://github.com/your-username/git_demo.git

 Explanation:
Links your local Git repository to a remote repository hosted on GitHub.
origin is the name given to the remote URL.

Step 9.

Push to GitHub

git push -u origin main

Explanation:
Pushes your local main branch to the origin (GitHub).
-u sets origin/main as the default upstream branch, so you can use git push/git pull
directly next time.

Step 10.

Result

Your local Git project is now uploaded to GitHub at:

🔗 https://github.com/your-username/git_demo.git
OUTPUT :
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document Analyzer</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

VITE.CONFIG.JS
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({

plugins: [react()],
optimizeDeps: {
exclude: ['lucide-react'],
},
});

CAPACITOR.CONFIG.JSON
{
"appId": "com.example.documentanalyzer",
"appName": "DocumentAnalyzer",
"webDir": "dist",
"bundledWebRuntime": falseimport React, { useState, useCallback } from 'react';
import { pdfjs } from 'react-pdf';
import { Document, Page } from 'react-pdf';
import { FileUp, FileText, Layers, BookOpen, Download, Copy, Maximize2, ChevronLeft,
ChevronRight } from 'lucide-react';
import DocumentSummary from './components/DocumentSummary';
import KeyInsights from './components/KeyInsights';
import ExtractedContent from './components/ExtractedContent';
import UploadZone from './components/UploadZone';

// Set up the worker for PDF.js

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.js',
import.meta.url,
).toString();

function App() {
const [file, setFile] = useState(null);
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
const [scale, setScale] = useState(1.2);
const [activeTab, setActiveTab] = useState('summary');
const [extractedText, setExtractedText] = useState('');
 const [isAnalyzing, setIsAnalyzing] = useState(false);
const [insights, setInsights] = useState([]);
const [summary, setSummary] = useState('');
}

App.jsx

import React, { useState, useCallback } from 'react';

import { pdfjs } from 'react-pdf';
import { Document, Page } from 'react-pdf';
import { FileUp, FileText, Layers, BookOpen, Download, Copy, Maximize2, ChevronLeft,
ChevronRight } from 'lucide-react';
import DocumentSummary from './components/DocumentSummary';
import KeyInsights from './components/KeyInsights';
import ExtractedContent from './components/ExtractedContent';
import UploadZone from './components/UploadZone';

// Set up the worker for PDF.js

pdfjs.GlobalWorkerOptions.workerSrc = new URL(

'pdfjs-dist/build/pdf.worker.min.js',
import.meta.url,
).toString();

function App() {
const [file, setFile] = useState(null);
const [numPages, setNumPages] = useState(null);
 const [pageNumber, setPageNumber] = useState(1);
const [scale, setScale] = useState(1.2);
const [activeTab, setActiveTab] = useState('summary');
const [extractedText, setExtractedText] = useState('');
const [isAnalyzing, setIsAnalyzing] = useState(false);
const [insights, setInsights] = useState([]);
const [summary, setSummary] = useState('');
const onDocumentLoadSuccess = ({ numPages }) => {
setNumPages(numPages);
setPageNumber(1);
simulateAnalysis();
};

const simulateAnalysis = () => {

setIsAnalyzing(true);

// Simulate text extraction and analysis

setTimeout(() => {
const dummyText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor,
nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor,
nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.";
setExtractedText(dummyText.repeat(10));

setSummary("This document appears to be a comprehensive analysis of market trends in the

technology sector for Q2 2023. It covers emerging technologies, market forecasts, and strategic
recommendations for stakeholders. The report highlights significant growth in AI and machine
learning applications across industries, with particular emphasis on healthcare and financial
services.");
 setInsights([
"AI adoption increased by 34% in healthcare sector",
"Financial institutions investing 28% more in blockchain technologies",
"Remote work technologies showing sustained growth post-pandemic",
"Cybersecurity concerns remain the top priority for 78% of surveyed companies",
"Renewable energy tech investments doubled compared to previous year"
]);

setIsAnalyzing(false);
}, 2000);
};

const changePage = (offset) => {

setPageNumber(prevPageNumber => {
const newPageNumber = prevPageNumber + offset;
return numPages ? Math.min(Math.max(1, newPageNumber), numPages) : 1;
});
};

const previousPage = () => changePage(-1);

const nextPage = () => changePage(1);

const onFileChange = (file) => {

setFile(file);
setActiveTab('summary');
// Reset states
setExtractedText('');
 setInsights([]);
setSummary('');
};

const zoomIn = () => setScale(prevScale => Math.min(prevScale + 0.2, 3));

const zoomOut = () => setScale(prevScale => Math.max(prevScale - 0.2, 0.6));

const copyToClipboard = (text) => {

navigator.clipboard.writeText(text);
alert('Copied to clipboard!');
};

return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
<header className="bg-white shadow-sm">
<div className="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between
items-center">
<div className="flex items-center space-x-2">
<FileText className="h-8 w-8 text-indigo-600" />

<h1 className="text-2xl font-bold text-gray-900">Document Analyzer</h1>

</div>
<div className="flex space-x-2">
{file && (
<button
onClick={() => copyToClipboard(extractedText)}
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm
text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
 >
<Copy className="h-4 w-4 mr-2" />
Copy Text
</button>
)}
{file && (
<button
onClick={() => window.open(URL.createObjectURL(file))}
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm
text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<Download className="h-4 w-4 mr-2" />
Download
</button>
)}
</div>
</div>
</header>

<main className="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">

{!file ? (
<UploadZone onFileChange={onFileChange} />
):(
<div className="flex flex-col lg:flex-row gap-6">
{/* PDF Viewer */}
<div className="lg:w-1/2 bg-white rounded-lg shadow-md p-4 flex flex-col">
<div className="flex justify-between items-center mb-4">
 <h2 className="text-lg font-medium text-gray-900 flex items-center">
<BookOpen className="h-5 w-5 mr-2 text-indigo-500" />
Document Viewer
</h2>
<div className="flex space-x-2">
<button
onClick={zoomOut}
className="p-1 rounded-md hover:bg-gray-100"
aria-label="Zoom out"
>
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-600"
viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"
clipRule="evenodd" />
</svg>
</button>
<button
onClick={zoomIn}
className="p-1 rounded-md hover:bg-gray-100"
aria-label="Zoom in"
>
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-600"
viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2
0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clipRule="evenodd" />
</svg>
</button>
<button
 onClick={() => setScale(1.2)}
className="p-1 rounded-md hover:bg-gray-100"
aria-label="Reset zoom"
>
<Maximize2 className="h-5 w-5 text-gray-600" />
</button>
</div>
</div>

<div className="flex-grow overflow-auto border border-gray-200 rounded-md">

<Document
file={file}
onLoadSuccess={onDocumentLoadSuccess}
loading={
<div className="flex justify-center items-center h-full">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-
500"></div>
</div>
}

error={
<div className="flex flex-col justify-center items-center h-full text-red-500 p-4">
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12
9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-
3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<p className="mt-2 text-center">Failed to load PDF. Please ensure it's a valid
PDF document.</p>
 </div>
}
>
<Page
pageNumber={pageNumber}
scale={scale}
renderTextLayer={false}
renderAnnotationLayer={false}
className="mx-auto"
/>
</Document>
</div>

{numPages && (
<div className="flex justify-between items-center mt-4">
<button
onClick={previousPage}
disabled={pageNumber <= 1}
className={`flex items-center px-3 py-1 rounded-md ${pageNumber <= 1 ? 'text-
gray-400 cursor-not-allowed' : 'text-gray-700 hover:bg-gray-100'}`}
>
<ChevronLeft className="h-5 w-5 mr-1" />
Previous
</button>

<p className="text-sm text-gray-700">

Page {pageNumber} of {numPages}
 </p>

<button
onClick={nextPage}
disabled={pageNumber >= (numPages || 1)}
className={`flex items-center px-3 py-1 rounded-md ${pageNumber >=
(numPages || 1) ? 'text-gray-400 cursor-not-allowed' : 'text-gray-700 hover:bg-gray-100'}`}

>
Next
<ChevronRight className="h-5 w-5 ml-1" />
</button>
</div>
)}
</div>

{/* Analysis Panel */}

<div className="lg:w-1/2 bg-white rounded-lg shadow-md overflow-hidden">
<div className="border-b border-gray-200">
<nav className="flex -mb-px">

<button
onClick={() => setActiveTab('summary')}
className={`py-4 px-6 text-center border-b-2 font-medium text-sm flex-1 ${
activeTab === 'summary'
? 'border-indigo-500 text-indigo-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
}`}
>
 Summary
</button>
<button
onClick={() => setActiveTab('insights')}
className={`py-4 px-6 text-center border-b-2 font-medium text-sm flex-1 ${
activeTab === 'insights'
? 'border-indigo-500 text-indigo-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
}`}
>
Key Insights
</button>
<button
onClick={() => setActiveTab('extracted')}
className={`py-4 px-6 text-center border-b-2 font-medium text-sm flex-1 ${
activeTab === 'extracted'
? 'border-indigo-500 text-indigo-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
}`}
>
Extracted Text
</button>
</nav>
</div>

<div className="p-6">
{isAnalyzing ? (
 <div className="flex flex-col items-center justify-center py-12">
<div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2
border-indigo-500 mb-4"></div>
<h3 className="text-lg font-medium text-gray-900 mb-1">Analyzing
Document</h3>
<p className="text-sm text-gray-500">Extracting and processing content...</p>
</div>
):(
<>
{activeTab === 'summary' && <DocumentSummary summary={summary} />}
{activeTab === 'insights' && <KeyInsights insights={insights} />}
{activeTab === 'extracted' && <ExtractedContent text={extractedText} />}
</>
)}
</div>
</div>
</div>
)}
</main>
</div>
);
}

export default App;

main.jsx

import { StrictMode } from 'react';

 import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';

createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
);

DocumentSummary.jsx

import React from 'react';

import { FileText } from 'lucide-react';

const DocumentSummary = ({ summary }) => {

if (!summary) {
return (
<div className="flex flex-col items-center justify-center py-12 text-gray-500">
<FileText className="h-12 w-12 mb-4 text-gray-400" />
<h3 className="text-lg font-medium text-gray-900 mb-1">No Summary
Available</h3>
<p className="text-sm text-center">Upload a document to generate a
summary.</p>
</div>
);
}
 return (
<div>
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center">
<FileText className="h-5 w-5 mr-2 text-indigo-500" />
Document Summary
</h3>
<div className="prose prose-indigo max-w-none">
<p className="text-gray-700 leading-relaxed">{summary}</p>
</div>
<div className="mt-6 bg-indigo-50 p-4 rounded-md border border-indigo-100">
<h4 className="text-sm font-medium text-indigo-800 mb-2">Document Type
Analysis</h4>
<div className="grid grid-cols-2 gap-4">
<div className="bg-white p-3 rounded shadow-sm">
<div className="text-xs text-gray-500 mb-1">Document Type</div>
<div className="font-medium">Business Report</div>
</div>
<div className="bg-white p-3 rounded shadow-sm">
<div className="text-xs text-gray-500 mb-1">Confidence</div>

<div className="font-medium">92%</div>
</div>
<div className="bg-white p-3 rounded shadow-sm">
<div className="text-xs text-gray-500 mb-1">Pages</div>
<div className="font-medium">12</div>
</div>
<div className="bg-white p-3 rounded shadow-sm">
<div className="text-xs text-gray-500 mb-1">Word Count</div>
 <div className="font-medium">3,245</div>
</div>
</div>
</div>
</div>
);
};

export default DocumentSummary;

KeyInsights.jsx
import React from 'react';
import { Lightbulb } from 'lucide-react';

const KeyInsights = ({ insights }) => {

if (!insights.length) {
return (
<div className="flex flex-col items-center justify-center py-12 text-gray-500">
<Lightbulb className="h-12 w-12 mb-4 text-gray-400" />
<h3 className="text-lg font-medium text-gray-900 mb-1">No Insights
Available</h3>
<p className="text-sm text-center">Upload a document to extract key
insights.</p>
</div>
);
}
 return (
<div>
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center">
<Lightbulb className="h-5 w-5 mr-2 text-indigo-500" />
Key Insights
</h3>

<ul className="space-y-3">
{insights.map((insight, index) => (
<li key={index} className="bg-white p-4 rounded-lg border border-gray-200
shadow-sm hover:shadow-md transition-shadow">
<div className="flex">
<span className="flex-shrink-0 flex items-center justify-center h-8 w-8
rounded-full bg-indigo-100 text-indigo-600 text-sm font-medium mr-3">
{index + 1}
</span>
<p className="text-gray-700">{insight}</p>
</div>
</li>
))}
</ul>

<div className="mt-6 bg-green-50 p-4 rounded-md border border-green-100">

<h4 className="text-sm font-medium text-green-800 mb-2">Sentiment
Analysis</h4>
<div className="flex items-center">
<div className="w-full bg-gray-200 rounded-full h-2.5">
 <div className="bg-green-600 h-2.5 rounded-full" style={{ width: '70%'
}}></div>
</div>
<span className="ml-3 text-sm font-medium text-gray-700">70%
Positive</span>
</div>
</div>
</div>
);
};

export default KeyInsights;

UploadZone.jsx
import React, { useCallback, useState } from 'react';
import { FileUp, FileText } from 'lucide-react';

const UploadZone = ({ onFileChange }) => {

const [isDragging, setIsDragging] = useState(false);

const handleDragEnter = useCallback((e) => {

e.preventDefault();
e.stopPropagation();
setIsDragging(true);
}, []);
const handleDragLeave = useCallback((e) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
}, []);

const handleDragOver = useCallback((e) => {

e.preventDefault();
e.stopPropagation();
}, []);

const handleDrop = useCallback((e) => {

e.preventDefault();
e.stopPropagation();
setIsDragging(false);

if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {

const file = e.dataTransfer.files[0];
if (file.type === 'application/pdf') {
onFileChange(file);
} else {
alert('Please upload a PDF file.');
}
}
}, [onFileChange]);

const handleFileChange = useCallback((e) => {

 if (e.target.files && e.target.files.length > 0) {
const file = e.target.files[0];
if (file.type === 'application/pdf') {
onFileChange(file);
} else {
alert('Please upload a PDF file.');
}
}
}, [onFileChange]);

return (
<div className="max-w-3xl mx-auto">
<div className="text-center mb-8">
<FileText className="h-12 w-12 text-indigo-600 mx-auto mb-4" />
<h2 className="text-3xl font-extrabold text-gray-900 mb-2">Document
Analyzer</h2>
<p className="text-lg text-gray-600">
Upload a PDF document to analyze its content, extract insights, and generate
summaries.
</p>
</div>

<div
className={`mt-6 flex justify-center px-6 pt-5 pb-6 border-2 border-dashed
rounded-lg ${
isDragging ? 'border-indigo-500 bg-indigo-50' : 'border-gray-300 hover:border-
indigo-400'
} transition-colors duration-200 ease-in-out`}
 onDragEnter={handleDragEnter}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
<div className="space-y-1 text-center">
<FileUp className="mx-auto h-12 w-12 text-gray-400" />
<div className="flex text-sm text-gray-600">
<label
htmlFor="file-upload"
className="relative cursor-pointer bg-white rounded-md font-medium text-
indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-
within:ring-offset-2 focus-within:ring-indigo-500"
>
<span>Upload a PDF file</span>
<input
id="file-upload"
name="file-upload"
type="file"
className="sr-only"
accept="application/pdf"
onChange={handleFileChange}
/>
</label>
<p className="pl-1">or drag and drop</p>
</div>
<p className="text-xs text-gray-500">PDF up to 10MB</p>
</div>
 </div>

<div className="mt-10 bg-white p-6 rounded-lg shadow-md">

<h3 className="text-lg font-medium text-gray-900 mb-4">What Our Document
Analyzer Can Do</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-indigo-50 p-4 rounded-lg">

<div className="flex items-center mb-3">

<div className="bg-indigo-100 rounded-full p-2 mr-3">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-indigo-
600" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v10a2 2 0 01-
2 2H5a2 2 0 01-2-2V5zm11 1H6v8l4-2 4 2V6z" clipRule="evenodd" />
</svg>
</div>
<h4 className="font-medium text-gray-900">Summarize Content</h4>
</div>
<p className="text-sm text-gray-600">
Extract the key points and generate concise summaries of lengthy documents.
</p>
</div>

<div className="bg-indigo-50 p-4 rounded-lg">

<div className="flex items-center mb-3">
<div className="bg-indigo-100 rounded-full p-2 mr-3">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-indigo-
600" viewBox="0 0 20 20" fill="currentColor">
<path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-
1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0
110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414
1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0
11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954
0c.27.213.462.519.476.859h4.002z" />
</svg>
</div>
<h4 className="font-medium text-gray-900">Extract Insights</h4>
</div>
<p className="text-sm text-gray-600">

Identify key insights, trends, and important information from your documents.
</p>
</div>

<div className="bg-indigo-50 p-4 rounded-lg">

<div className="flex items-center mb-3">
<div className="bg-indigo-100 rounded-full p-2 mr-3">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-indigo-
600" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0
1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clipRule="evenodd" />
</svg>
</div>
<h4 className="font-medium text-gray-900">Full Text Search</h4>
</div>
<p className="text-sm text-gray-600">
Extract all text from documents and search through the content with ease.
</p>
</div>
 </div>
</div>
</div>
);
};

export default UploadZone;

ExtractedContent.jsx

import React, { useState } from 'react';

import { FileText, Copy, Search } from 'lucide-react';

const ExtractedContent = ({ text }) => {

const [searchTerm, setSearchTerm] = useState('');

if (!text) {
return (
<div className="flex flex-col items-center justify-center py-12 text-gray-500">
<FileText className="h-12 w-12 mb-4 text-gray-400" />
<h3 className="text-lg font-medium text-gray-900 mb-1">No Extracted Text</h3>
<p className="text-sm text-center">Upload a document to extract its text
content.</p>
</div>
);
}
 const copyToClipboard = () => {
navigator.clipboard.writeText(text);
alert('Text copied to clipboard!');
};

const highlightSearchTerm = (content, term) => {

if (!term.trim()) return content;

const regex = new RegExp(`(${term})`, 'gi');

return content.replace(regex, '<mark class="bg-yellow-200">$1</mark>');
};

const displayText = searchTerm ? highlightSearchTerm(text, searchTerm) : text;

return (
<div>
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-medium text-gray-900 flex items-center">
<FileText className="h-5 w-5 mr-2 text-indigo-500" />
Extracted Text
</h3>
<button
onClick={copyToClipboard}
className="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm
text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
 <Copy className="h-4 w-4 mr-2" />
Copy All
</button>
</div>

<div className="mb-4 relative">

<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-
none">
<Search className="h-5 w-5 text-gray-400" />
</div>
<input
type="text"
className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md
leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400
focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
placeholder="Search in text..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>

<div className="bg-gray-50 p-4 rounded-md border border-gray-200 h-96 overflow-

y-auto">
<div
className="text-gray-700 whitespace-pre-wrap"
dangerouslySetInnerHTML={{ __html: displayText }}
></div>
</div>
 <div className="mt-4 text-xs text-gray-500 flex justify-between">
<span>Character count: {text.length}</span>
<span>Word count: {text.split(/\s+/).filter(Boolean).length}</span>
</div>
</div>
);
};

export default ExtractedContent;

OUTPUT :