AI Content Summarizer | HTML CSS JavaScript AI Tool

AI Content Summarizer with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #19

Project Overview

The AI Content Summarizer is an AI-powered web tool that helps users quickly understand long pieces of text by generating concise summaries. Users can paste articles, notes, or paragraphs, and the application sends the text to an AI model which returns a short summary. This project demonstrates AI API integration, asynchronous JavaScript requests, dynamic UI rendering, and modern tool interfaces, making it a strong portfolio project for AI-powered web applications.

Key Features

AI-powered text summarization
Paste long content to summarize instantly
Clean and responsive interface
Real-time AI API integration
Copy summarized content easily
Dynamic UI updates using JavaScript
Mobile-friendly layout
Simple and modern design

HTML Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AI Content Summarizer</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">

<h1>AI Content Summarizer</h1>

<textarea id="inputText" placeholder="Paste your article or text here..."></textarea>

<button onclick="summarizeContent()">Summarize with AI</button>

<h2>Summary</h2>

<div id="result"></div>

</div>

<script src="script.js"></script>

</body>
</html>

CSS Code

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#042354;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
padding:20px;
}

.container{
background:white;
padding:30px;
border-radius:12px;
width:650px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

h1{
margin-bottom:20px;
}

h2{
margin-top:20px;
margin-bottom:10px;
}

textarea{
width:100%;
height:180px;
padding:10px;
border-radius:6px;
border:1px solid #ddd;
margin-bottom:10px;
resize:none;
}

button{
width:100%;
padding:12px;
background:#2563eb;
border:none;
color:white;
border-radius:6px;
cursor:pointer;
font-weight:bold;
}

button:hover{
background:#1d4ed8;
}

#result{
background:#f1f5f9;
padding:15px;
border-radius:6px;
min-height:80px;
}

Javascript Code

async function summarizeContent(){

const text = document.getElementById("inputText").value
const result = document.getElementById("result")

if(text.trim() === ""){
result.innerText = "Please paste some text to summarize."
return
}

result.innerText = "Generating AI summary..."

try{

const response = await fetch("https://openrouter.ai/api/v1/chat/completions",{

method:"POST",

headers:{
"Content-Type":"application/json",
"Authorization":"Bearer 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"
},

body:JSON.stringify({

model:"openai/gpt-4o-mini",

messages:[
{
role:"user",
content:`Summarize the following content in a clear and concise paragraph:\n\n${text}`
}
]

})

})

const data = await response.json()

result.innerText = data.choices[0].message.content

}catch(error){

result.innerText = "Error generating summary."

}

}