import { Hono } from "https://deno.land/x/hono@v3.11.7/mod.ts"; import { get_encoding } from "npm:tiktoken"; import "jsr:@std/dotenv/load"; // Inlined content from ./middleware.js export const pipeline_url = `https://yawnxyz-executeproxy.web.val.run/execute`; // export const pipeline_url = `http://localhost:9999/execute`; export const pageshotHandler = async (c) => { const body = await c.req.json(); const { url, useCache } = body; console.log("url::", url) // return c.json(url) const pipeline = [ { "name": "getContent", "save": "jina", "settings": { "url": url, "optionStr": "content,metadata,screenshot,pageshot,citation,doi,images,links", "crawlMode": "jina", "outputMode": "json" } }, { "name": "concurrent", "steps": [ { "name": "ai", "save": "summary", "settings": { "model": "gpt-4o-mini", "provider": "openai", "system": "please summarize the following article in a 2-4 sentences, describing it from a 3rd person point of view", "prompt": "{jina.content}" } }, // { // "name": "jinaSegment", // "save": "segments", // "settings": { // "text": "{jina.content}", // "return_chunks": true // } // } ] }, { "name": "data", "settings": { "data": { "summary": "{summary}", "jina": "jq: .jina", "segments": "jq: .segments" } } } ]; const data = { useCache: useCache, saveCache: true, // always save cache, even when not retrieving it pipeline } console.log(">>>> Data", data) const response = await fetch(pipeline_url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }); const result = await response.json(); return c.json(result); }; // Inlined content from ./styles.js export const getTailwindConfig = () => ({ theme: { extend: { colors: { 'background': '#F5F4F4', 'page-bg': '#F5F4F4', 'app-bg': '#FDFBF7', 'app-bg-alt': '#FFFFFF', 'app-accent': '#E2DFDF', 'primary': '#0E141B', 'accent': '#FDFAF4', 'secondary': '#D9D5D4', 'text': '#100C04', 'button': '#39516A', 'button-hover': '#0063CC', } } } }); export const getStyles = () => ` @tailwind base; @tailwind components; @tailwind utilities; html { @apply bg-background; } .AppBody { @apply bg-page-bg text-text py-4; } .AppContainer { @apply container mx-auto; } .App { @apply max-w-2xl mx-2 md:mx-auto p-4 bg-app-bg border border-app-accent rounded-md shadow-sm; } .AppFooter { @apply mt-4 text-center text-sm; } .AppFooter a { @apply text-primary hover:text-button-hover underline; } h1 { @apply text-3xl font-semibold mb-4 text-primary; } textarea { @apply w-full mb-2 py-2 px-4 bg-app-bg-alt border border-app-accent rounded-md focus:outline-none focus:ring-1 focus:ring-secondary; } summary { @apply cursor-pointer hover:text-button-hover; } button { @apply bg-button text-white px-4 py-2 rounded hover:bg-button-hover transition-colors; } button.accordion { @apply bg-app-bg text-primary px-0 py-2 rounded-md transition-colors hover:text-button-hover; } .SummaryOutput { @apply mt-4 relative; } .SummaryOutput pre { @apply p-4 bg-app-bg-alt border border-app-accent rounded-md text-sm overflow-x-auto whitespace-pre-wrap; } .SummaryOutput button { @apply absolute top-2 right-2 text-xs bg-button text-white px-2 py-1 rounded-md hover:bg-button-hover transition duration-300; } .TextOutput { @apply mt-4; } .TextOutput-content { @apply p-4 bg-app-bg-alt border border-primary rounded-md; } .TextOutput-header { @apply mb-2 text-xs text-gray-600 flex justify-between items-center; } .TextOutput button { @apply text-xs bg-button text-white px-2 py-1 rounded-md hover:bg-button-hover transition duration-300; } .history-item { @apply flex flex-row justify-between items-center p-2 bg-accent hover:bg-app-bg-alt border border-app-accent rounded-md cursor-pointer hover:bg-app-bg-alt transition-colors; } .delete-button { @apply self-end bg-button text-white px-2 py-1 rounded text-sm hover:bg-button-hover transition-colors; } `; const app = new Hono(); // Alpine data and methods const getAlpineModule = () => ` document.addEventListener('alpine:init', () => { Alpine.data('pageshotApp', () => ({ db: new Dexie('PageShot'), input: 'https://arstechnica.com/cars/2024/10/generative-ai-is-coming-to-google-maps-google-earth-waze/', output: '', textOutput: '', timerDisplay: '0.00s', charCount: '0 characters', wordCount: '0 words', history: [], startTime: null, timerInterval: null, isTimerGreen: false, metadata: { accessDate: '', publishedDate: '', title: '', description: '', image: '', pageshotUrl: '', screenshotUrl: '' }, result: null, useCache: true, isRunning: false, init() { this.db.version(1).stores({ history: '++id, input, output, timestamp' }); this.updateHistoryList(); // Auto-open first accordion and rotate its icon // this.$nextTick(() => { // this.toggleAccordion('accordion-1'); // }); }, async copyToClipboard(text, button) { try { await navigator.clipboard.writeText(text); const originalText = button.textContent; button.textContent = 'Copied!'; setTimeout(() => { button.textContent = originalText; }, 2000); } catch (err) { console.error('Failed to copy text: ', err); } }, startTimer() { this.startTime = Date.now(); this.isTimerGreen = false; this.timerInterval = setInterval(() => { const elapsedTime = ((Date.now() - this.startTime) / 1000).toFixed(2); this.timerDisplay = elapsedTime + 's'; }, 10); }, stopTimer() { clearInterval(this.timerInterval); const elapsedTime = ((Date.now() - this.startTime) / 1000).toFixed(2); this.timerDisplay = elapsedTime + 's'; this.isTimerGreen = true; }, updateStats(text) { const encoder = new TextEncoder(); const utf8 = new Uint8Array(text.length * 3); const { written } = encoder.encodeInto(text, utf8); text = new TextDecoder().decode(utf8.subarray(0, written)); text = text.replace(/[\\u00A0\\u1680\\u2000-\\u200A\\u202F\\u205F\\u3000\\n\\r\\v\\f]/g, " "); const words = text.trim().split(" ").filter(word => word.length > 0); const chars = text.length; this.wordCount = words.length.toLocaleString() + " words"; this.charCount = chars.toLocaleString() + " characters"; }, async updateHistoryList() { this.history = await this.db.history.reverse().limit(50).toArray(); }, async loadHistoryItem(item) { this.input = item.input; this.output = item.output; this.textOutput = item.output; this.updateStats(item.output); }, async deleteHistoryItem(id) { if (confirm('Are you sure you want to delete this history item?')) { await this.db.history.delete(id); await this.updateHistoryList(); } }, toggleAccordion(buttonId) { const content = document.getElementById('accordion-content-' + buttonId.split('-')[1]); const isOpen = content.classList.contains('grid-rows-[1fr]'); content.classList.toggle('grid-rows-[0fr]', isOpen); content.classList.toggle('grid-rows-[1fr]', !isOpen); content.classList.toggle('opacity-0', isOpen); content.classList.toggle('opacity-100', !isOpen); // Toggle plus/minus icon const rects = document.getElementById(buttonId).querySelectorAll('rect'); rects[1].classList.toggle('!rotate-180', !isOpen); }, async execute() { this.isRunning = true; this.startTimer(); this.isTimerGreen = false; this.timerDisplay = '0.00s'; try { // Check if input is a DOI and format URL accordingly const doiMatch = this.input.match(/\\b(10\\.\\d{4,9}\\/[-_.()\\/:\\w]+)\\b/i); if (doiMatch && !this.input.startsWith('http')) { this.input = 'https://doi.org/' + doiMatch[1]; } const response = await fetch('/pageshot', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: this.input, useCache: this.useCache }) }); let result; const contentType = response.headers.get('content-type'); if (contentType && contentType.includes('application/json')) { result = await response.json(); } else { result = await response.text(); } console.log(">>>> Result", result) // Handle metadata and summary output const accessDate = result.jina?.accessDate || 'No access date available'; const publishedDate = result.jina?.content?.publishedTime ? new Date(result.jina.content.publishedTime).toLocaleDateString() : 'No published date available'; const metadata = result.jina?.metadata || {}; const title = metadata.title || metadata['og:title'] || metadata['twitter:title'] || 'No title available'; const description = metadata.description || metadata['og:description'] || metadata['twitter:description'] || 'No description available'; const image = metadata['og:image'] || metadata['twitter:image'] || ''; const pageshotUrl = result.jina?.pageshot || ''; const screenshotUrl = result.jina?.screenshot || ''; // Store the data in Alpine properties this.metadata = { accessDate, publishedDate, title, description, image, pageshotUrl: result.jina?.pageshot, screenshotUrl: result.jina?.screenshot }; console.log(">>>> Metadata", this.metadata, pageshotUrl) // Make result available to the template for citation and DOI this.result = result; // Store just the summary text const summaryText = result.summary || 'No summary available'; this.output = summaryText; // Handle markdown output const markdownText = result.jina?.content?.content || 'No markdown content available'; this.textOutput = markdownText; this.updateStats(markdownText); // Save to Dexie await this.db.history.add({ input: this.input, output: summaryText, timestamp: new Date() }); this.autoResize(document.querySelector('textarea[x-model="textOutput"]')); // Update history list await this.updateHistoryList(); } catch (error) { this.output = JSON.stringify({ error: error.message }, null, 2); this.textOutput = JSON.stringify({ error: error.message }, null, 2); this.updateStats(error.message); } finally { this.stopTimer(); this.isRunning = false; } }, autoResize(element) { // Add a small delay to ensure content is updated setTimeout(() => { element.style.height = '0'; element.style.height = element.scrollHeight + 'px'; }, 0); }, })); }); `; const getHtml = (moduleScript) => ` PageShot — Get data about any web page

PageShot

Get data about any web page

•

A labspace.ai experiment

`; app.get("/", (c) => c.html(getHtml())); app.post("/pageshot", pageshotHandler); export default (typeof Deno !== "undefined" && Deno.env.get("valtown")) ? app.fetch : app;