ashtonmeuser · January 21, 2025 03:54
diff --git a/_summarize.ts b/_summarize.ts
 // bookmarklet-title: Summarize
 // bookmarklet-about: A simple bookmarklet that uses OpenAI’s ChatGPT to summarize the current webpage. Note that an OpenAI API key is required. Please inspect the bookmarklet source (via the “show editor” or “view gist” buttons) and the bookmarkl.ink project source (github.com/ashtonmeuser/bookmarklet-platform) to ensure that your private data is neither logged nor stored and does not leave your browser.

 import Modal from '/ashtonmeuser/0613e3aeff5a4692d8c148d7fcd02f34/raw/7804c7276e855db7a4b2d9ae6801ac6447198810/Modal.ts';
 import style from './content.css';

 const OPENAI_API_KEY: string = ''; // bookmarklet-var(password): OPENAI_API_KEY
 const UUID: string = ''; // bookmarklet-var(uuid): UUID

 const errorHtml = (message: string) => `<h1>Error</h1><p>${message}</p>`;

 (async () => {
  const body = JSON.stringify({
    model: 'gpt-4o',
    messages: [
      { role: 'system', content: `Your task is to summarize the content of a webpage provided by a URL. The user will only supply the URL.
 Requirements:
 1.	Summarize the key sections and information from the page into a concise, clear, and structured format.
 2.	Use plain HTML elements:
 •	Use <h1> for the title or main headline.
 •	Use <h2> or <h3> for subheadings.
 •	Use <p> for paragraphs of text.
 •	Use <ol> or <ul> for lists where applicable.
 •	Avoid <html>, <body>, or other wrapping tags.
 3.	The content should be well-organized but avoid excessive detail. Focus on high-level takeaways and core messages.
 4.	Do not include any styling or scripting tags or attributes.
 Example Output:
 If the webpage is about “How to Bake a Cake,” the output might be:
 <h1>How to Bake a Cake</h1>
 <h2>Ingredients</h2>
 <ul>
 <li>Flour</li>
 <li>Sugar</li>
 <li>Eggs</li>
 <li>Butter</li>
 </ul>
 <h2>Steps</h2>
 <ol>
 <li>Preheat the oven to 350°F (175°C).</li>
 <li>Mix the dry ingredients in a bowl.</li>
 <li>Combine the wet ingredients separately.</li>
 <li>Gradually add the dry ingredients to the wet ingredients.</li>
 <li>Bake for 30-35 minutes.</li>
 </ol>
 <h2>Tips</h2>
 <p>Let the cake cool before frosting for the best results.</p>
 If no relevant information is found on the page, respond with:
 <h1>No relevant content found</h1>
 ` },
      { role: 'user', content: window.location.href },
    ],
  });

  if (!OPENAI_API_KEY) return Modal.factory(UUID, { content: errorHtml('No OpenAI API key provided') });

  const modal = Modal.factory(UUID, { loading: '<p>Summarizing Webpage</p>' });
  if (!modal) return; // Failed to create modal

  try {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: "POST",
      headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${OPENAI_API_KEY}` },
      body,
    });
    const data = await response.json();
    if (response.ok) modal.update({ content: data.choices[0].message.content, style, footer: 'Summary provided by ChatGPT via <a href="https://bookmarkl.ink/ashtonmeuser/111eaf0da5a8e507f1fff99006df2b39">Summarize Bookmarklet</a>' });
    else modal.content = errorHtml(data.error.message);
  } catch (error) {
    modal.content = errorHtml(error.message);
  }
 })();
diff --git a/content.css b/content.css
 h1, h2, h3, h4, h5, h6 {
  color: #444;
  margin-bottom: 1em;
 }

 p {
  margin-bottom: 1em;
 }

 ol, ul {
  margin: 0.6em 0;
  padding-left: 2.5em;
 }

 ol li, ul li {
  margin-bottom: 0.3em;
 }

 a {
  color: #007bff;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
 }

 blockquote {
  margin: 1.2em 0;
  padding: 0.6em 1.2em;
  background-color: #f1f1f1;
  border-left: 5px solid #ccc;
  font-style: italic;
 }

 code {
  font-family: "Courier New",Courier,monospace;
  background-color: #f4f4f4;
  padding: 0.2em 0.3em;
  border-radius: 0.3em;
  color: #d63384;
 }

 hr {
  margin: 1.2em 0;
  border: 0;
  border-top: 1px solid #ddd;
 }
	// bookmarklet-title: Summarize
	// bookmarklet-about: A simple bookmarklet that uses OpenAI’s ChatGPT to summarize the current webpage. Note that an OpenAI API key is required. Please inspect the bookmarklet source (via the “show editor” or “view gist” buttons) and the bookmarkl.ink project source (github.com/ashtonmeuser/bookmarklet-platform) to ensure that your private data is neither logged nor stored and does not leave your browser.

	import Modal from '/ashtonmeuser/0613e3aeff5a4692d8c148d7fcd02f34/raw/7804c7276e855db7a4b2d9ae6801ac6447198810/Modal.ts';
	import style from './content.css';

	const OPENAI_API_KEY: string = ''; // bookmarklet-var(password): OPENAI_API_KEY
	const UUID: string = ''; // bookmarklet-var(uuid): UUID

	const errorHtml = (message: string) => `<h1>Error</h1><p>${message}</p>`;

	(async () => {
	const body = JSON.stringify({
	model: 'gpt-4o',
	messages: [
	{ role: 'system', content: `Your task is to summarize the content of a webpage provided by a URL. The user will only supply the URL.
	Requirements:
	1. Summarize the key sections and information from the page into a concise, clear, and structured format.
	2. Use plain HTML elements:
	• Use <h1> for the title or main headline.
	• Use <h2> or <h3> for subheadings.
	• Use <p> for paragraphs of text.
	• Use <ol> or <ul> for lists where applicable.
	• Avoid <html>, <body>, or other wrapping tags.
	3. The content should be well-organized but avoid excessive detail. Focus on high-level takeaways and core messages.
	4. Do not include any styling or scripting tags or attributes.
	Example Output:
	If the webpage is about “How to Bake a Cake,” the output might be:
	<h1>How to Bake a Cake</h1>
	<h2>Ingredients</h2>
	<ul>
	<li>Flour</li>
	<li>Sugar</li>
	<li>Eggs</li>
	<li>Butter</li>
	</ul>
	<h2>Steps</h2>
	<ol>
	<li>Preheat the oven to 350°F (175°C).</li>
	<li>Mix the dry ingredients in a bowl.</li>
	<li>Combine the wet ingredients separately.</li>
	<li>Gradually add the dry ingredients to the wet ingredients.</li>
	<li>Bake for 30-35 minutes.</li>
	</ol>
	<h2>Tips</h2>
	<p>Let the cake cool before frosting for the best results.</p>
	If no relevant information is found on the page, respond with:
	<h1>No relevant content found</h1>
	` },
	{ role: 'user', content: window.location.href },
	],
	});

	if (!OPENAI_API_KEY) return Modal.factory(UUID, { content: errorHtml('No OpenAI API key provided') });

	const modal = Modal.factory(UUID, { loading: '<p>Summarizing Webpage</p>' });
	if (!modal) return; // Failed to create modal

	try {
	const response = await fetch('https://api.openai.com/v1/chat/completions', {
	method: "POST",
	headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${OPENAI_API_KEY}` },
	body,
	});
	const data = await response.json();
	if (response.ok) modal.update({ content: data.choices[0].message.content, style, footer: 'Summary provided by ChatGPT via <a href="https://bookmarkl.ink/ashtonmeuser/111eaf0da5a8e507f1fff99006df2b39">Summarize Bookmarklet</a>' });
	else modal.content = errorHtml(data.error.message);
	} catch (error) {
	modal.content = errorHtml(error.message);
	}
	})();
	h1, h2, h3, h4, h5, h6 {
	color: #444;
	margin-bottom: 1em;
	}

	p {
	margin-bottom: 1em;
	}

	ol, ul {
	margin: 0.6em 0;
	padding-left: 2.5em;
	}

	ol li, ul li {
	margin-bottom: 0.3em;
	}

	a {
	color: #007bff;
	text-decoration: none;
	&:hover {
	text-decoration: underline;
	}
	}

	blockquote {
	margin: 1.2em 0;
	padding: 0.6em 1.2em;
	background-color: #f1f1f1;
	border-left: 5px solid #ccc;
	font-style: italic;
	}

	code {
	font-family: "Courier New",Courier,monospace;
	background-color: #f4f4f4;
	padding: 0.2em 0.3em;
	border-radius: 0.3em;
	color: #d63384;
	}

	hr {
	margin: 1.2em 0;
	border: 0;
	border-top: 1px solid #ddd;
	}