rominirani · November 6, 2024 07:31
diff --git a/summarizer.html b/summarizer.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Text Summarizer</title>
  <style>
    body {
      font-family: sans-serif;
    }

    textarea {
      width: 100%;
      height: 200px;
      resize: vertical;
      margin-bottom: 10px;
    }

    button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }

    #summary-container {
      margin-top: 20px;
      border: 1px solid #ccc;
      padding: 10px;
    }

    #summary-container > div {
      margin-bottom: 15px;
      padding: 10px;
      border: 1px solid #eee;
      border-radius: 5px;
    }

    #summary-container > div h3 {
      margin-top: 0;
    }

    #wait-cursor {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 3em;
    }
  </style>
 </head>
 <body>

  <h1>Text Summarizer</h1>

  <textarea id="input-text" placeholder="Enter your text here..."></textarea>

  <button id="summarize-button">Summarize</button>

  <div id="wait-cursor">⏳</div>
  <div id="summary-container">
    <h2>Summary:</h2>
    <div id="tl;dr-summary">
      <h3>TL;DR Summary:</h3>
      <p></p> </div>
    <div id="key-points-summary">
      <h3>Key Points:</h3>
      <p></p> </div>
    <div id="teaser-summary">
      <h3>Teaser:</h3>
      <p></p> </div>
    <div id="headline-summary">
      <h3>Headline:</h3>
      <p></p> </div>
    </div>

  <script>
    const inputText = document.getElementById('input-text');
    const summarizeButton = document.getElementById('summarize-button');
    const tlDrSummary = document.getElementById('tl;dr-summary');
    const keyPointsSummary = document.getElementById('key-points-summary');
    const teaserSummary = document.getElementById('teaser-summary');
    const headlineSummary = document.getElementById('headline-summary');
    const waitCursor = document.getElementById('wait-cursor');

    summarizeButton.addEventListener('click', async () => {
      const text = inputText.value;
      try {
        // Check for browser AI support
        const summarizerCapabilities = await ai.summarizer.capabilities();
        if (summarizerCapabilities.available === 'no') {
          alert('Text Summarizer API not available in this browser.');
          return;
        }

        // Show the wait cursor
        waitCursor.style.display = 'block';

        // Create summarizer instances for each type
        const tlDrSummarizer = await ai.summarizer.create({ type: 'tl;dr', format: 'plain-text', length: 'short' });
        const keyPointsSummarizer = await ai.summarizer.create({ type: 'key-points', format: 'plain-text' });
        const teaserSummarizer = await ai.summarizer.create({ type: 'teaser', format: 'plain-text', length : 'short' });
        const headlineSummarizer = await ai.summarizer.create({ type: 'headline', format: 'plain-text', length: 'short' });

        // Summarize using each summarizer
        const tlDrSummaryText = await tlDrSummarizer.summarize(text);
        const keyPointsSummaryText = await keyPointsSummarizer.summarize(text);
        const teaserSummaryText = await teaserSummarizer.summarize(text);
        const headlineSummaryText = await headlineSummarizer.summarize(text);

        // Display the summaries
        tlDrSummary.querySelector('p').textContent = tlDrSummaryText;
        keyPointsSummary.querySelector('p').textContent = keyPointsSummaryText;
        teaserSummary.querySelector('p').textContent = teaserSummaryText;
        headlineSummary.querySelector('p').textContent = headlineSummaryText;
      } catch (error) {
        console.error('Error summarizing text:', error);
        alert('Error summarizing text. Please try again.');
      } finally {
        // Hide the wait cursor
        waitCursor.style.display = 'none';
      }
    });
  </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Text Summarizer</title>
	<style>
	body {
	font-family: sans-serif;
	}

	textarea {
	width: 100%;
	height: 200px;
	resize: vertical;
	margin-bottom: 10px;
	}

	button {
	padding: 10px 20px;
	background-color: #4CAF50;
	color: white;
	border: none;
	cursor: pointer;
	}

	#summary-container {
	margin-top: 20px;
	border: 1px solid #ccc;
	padding: 10px;
	}

	#summary-container > div {
	margin-bottom: 15px;
	padding: 10px;
	border: 1px solid #eee;
	border-radius: 5px;
	}

	#summary-container > div h3 {
	margin-top: 0;
	}

	#wait-cursor {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3em;
	}
	</style>
	</head>
	<body>

	<h1>Text Summarizer</h1>

	<textarea id="input-text" placeholder="Enter your text here..."></textarea>

	<button id="summarize-button">Summarize</button>

	<div id="wait-cursor">⏳</div>
	<div id="summary-container">
	<h2>Summary:</h2>
	<div id="tl;dr-summary">
	<h3>TL;DR Summary:</h3>
	<p></p> </div>
	<div id="key-points-summary">
	<h3>Key Points:</h3>
	<p></p> </div>
	<div id="teaser-summary">
	<h3>Teaser:</h3>
	<p></p> </div>
	<div id="headline-summary">
	<h3>Headline:</h3>
	<p></p> </div>
	</div>

	<script>
	const inputText = document.getElementById('input-text');
	const summarizeButton = document.getElementById('summarize-button');
	const tlDrSummary = document.getElementById('tl;dr-summary');
	const keyPointsSummary = document.getElementById('key-points-summary');
	const teaserSummary = document.getElementById('teaser-summary');
	const headlineSummary = document.getElementById('headline-summary');
	const waitCursor = document.getElementById('wait-cursor');

	summarizeButton.addEventListener('click', async () => {
	const text = inputText.value;
	try {
	// Check for browser AI support
	const summarizerCapabilities = await ai.summarizer.capabilities();
	if (summarizerCapabilities.available === 'no') {
	alert('Text Summarizer API not available in this browser.');
	return;
	}

	// Show the wait cursor
	waitCursor.style.display = 'block';

	// Create summarizer instances for each type
	const tlDrSummarizer = await ai.summarizer.create({ type: 'tl;dr', format: 'plain-text', length: 'short' });
	const keyPointsSummarizer = await ai.summarizer.create({ type: 'key-points', format: 'plain-text' });
	const teaserSummarizer = await ai.summarizer.create({ type: 'teaser', format: 'plain-text', length : 'short' });
	const headlineSummarizer = await ai.summarizer.create({ type: 'headline', format: 'plain-text', length: 'short' });

	// Summarize using each summarizer
	const tlDrSummaryText = await tlDrSummarizer.summarize(text);
	const keyPointsSummaryText = await keyPointsSummarizer.summarize(text);
	const teaserSummaryText = await teaserSummarizer.summarize(text);
	const headlineSummaryText = await headlineSummarizer.summarize(text);

	// Display the summaries
	tlDrSummary.querySelector('p').textContent = tlDrSummaryText;
	keyPointsSummary.querySelector('p').textContent = keyPointsSummaryText;
	teaserSummary.querySelector('p').textContent = teaserSummaryText;
	headlineSummary.querySelector('p').textContent = headlineSummaryText;
	} catch (error) {
	console.error('Error summarizing text:', error);
	alert('Error summarizing text. Please try again.');
	} finally {
	// Hide the wait cursor
	waitCursor.style.display = 'none';
	}
	});
	</script>

	</body>
	</html>