hfjsdemo

Running

App Files Files Community

hfjsdemo / src-bk /summarization.html

boazchung

Rename summarization.html to src-bk/summarization.html

c4c7f01 verified 5 months ago

raw history blame

No virus

5.17 kB

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Summarization - Hugging Face Transformers.js</title>

	<script type="module">
	// Import the library
	import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';

	// Make it available globally
	window.pipeline = pipeline;
	</script>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">

	<link rel="stylesheet" href="css/styles.css">
	</head>

	<body>
	<div class="container-main">
	<!-- Page Header -->
	<div class="header">
	<div class="header-logo">
	<img src="images/logo.png" alt="logo">
	</div>
	<div class="header-main-text">
	<h1>Hugging Face Transformers.js</h1>
	</div>
	<div class="header-sub-text">
	<h3>Free AI Models for JavaScript Web Development</h3>
	</div>
	</div>
	<hr> <!-- Separator -->

	<!-- Back to Home button -->
	<div class="row mt-5">
	<div class="col-md-12 text-center">
	<a href="index.html" class="btn btn-outline-secondary"
	style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
	</div>
	</div>

	<!-- Content -->
	<div class="container mt-5">
	<!-- Centered Titles -->
	<div class="text-center">
	<h2>Natural Language Processing</h2>
	<h4>Summarization</h4>
	</div>

	<!-- Actual Content of this page -->
	<div id="summarization-container" class="container mt-4">
	<h5>Summarization with a Specific Model:</h5>
	<div class="d-flex flex-column align-items-start">
	<label for="summarizationText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
	Summarize:</label>
	<textarea class="form-control flex-grow-1 mb-2" id="summarizationText" rows="6"
	style="margin-right: 15px; margin-left: 15px;">The tower is 324 metres (1,063 ft) tall, about the same height as an 81-storey building, and the tallest structure in Paris. Its base is square, measuring 125 metres (410 ft) on each side. During its construction, the Eiffel Tower surpassed the Washington Monument to become the tallest man-made structure in the world, a title it held for 41 years until the Chrysler Building in New York City was finished in 1930. It was the first structure to reach a height of 300 metres. Due to the addition of a broadcasting aerial at the top of the tower in 1957, it is now taller than the Chrysler Building by 5.2 metres (17 ft). Excluding transmitters, the Eiffel Tower is the second tallest free-standing structure in France after the Millau Viaduct.</textarea>

	<button id="summarizeButton" class="btn btn-primary" onclick="summarizeText()">Summarize</button>
	</div>
	<div class="mt-4">
	<h4>Output:</h4>
	<pre id="summarizationOutputArea"></pre>
	</div>
	</div>

	<!-- Back to Home button -->
	<div class="row mt-5">
	<div class="col-md-12 text-center">
	<a href="index.html" class="btn btn-outline-secondary"
	style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
	</div>
	</div>
	</div>
	</div>

	<script>

	let generator;

	// Initialize the sentiment analysis model
	async function initializeModel() {
	generator = await pipeline('summarization', 'Xenova/distilbart-cnn-6-6');
	}

	async function summarizeText() {

	// Reference to the textarea and the button
	const textArea = document.getElementById("summarizationText");
	const summarizeButton = document.getElementById("summarizeButton");

	const textAreaValue = textArea.value.trim();

	document.getElementById("summarizationOutputArea").innerText = ""

	// Disable textarea and button, and set cursor to hourglass
	textArea.disabled = true;
	summarizeButton.disabled = true;
	document.body.style.cursor = "wait";

	// Ensure the DOM updates before making the API call
	setTimeout(async () => {
	let summary = await generator(textAreaValue, { max_new_tokens: 100 });

	document.getElementById("summarizationOutputArea").innerText = JSON.stringify(summary, null, 2);

	// Re-enable textarea and button, and reset cursor
	textArea.disabled = false;
	summarizeButton.disabled = false;
	document.body.style.cursor = "default";
	}, 10);
	}

	// Initialize the model after the DOM is completely loaded
	window.addEventListener("DOMContentLoaded", initializeModel);
	</script>
	</body>

	</html>