Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @jsx jsx */
import { jsx } from "https://deno.land/x/hono@v3.11.7/middleware.ts";
import { Hono } from "https://deno.land/x/hono@v3.11.7/mod.ts";
import { ai } from "https://esm.town/v/yawnxyz/ai";
const app = new Hono();
const Layout = ({ children, title = "Content Summary and Tagging" }) => (
<html lang="en">
<head>
<title>{title}</title>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/loading-states.js"></script>
</head>
<body hx-ext="loading-states">
{children}
</body>
</html>
);
const Home: FC = () => (
<main class="container mx-auto p-4">
<form
hx-post="/process-url"
hx-target="#contentSection"
hx-trigger="submit"
data-loading-target="#loadingState"
data-loading-class-remove="hidden"
hx-swap="innerHTML"
hx-on="submit:document.getElementById('results').classList.add('hidden')"
>
<div class="my-2">Paste a link (e.g. Nature paper, PDF) below and get summaries and tags</div>
<label for="url" class="block mb-2">URL: </label>
<div class="flex mb-4">
<input
type="text"
id="url"
name="url"
class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
type="submit"
data-loading-disable
class="px-4 py-2 bg-blue-500 text-white rounded-r-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
Process URL
</button>
</div>
<label for="summaryPrompt" class="block mb-2">Summary Prompt:</label>
<textarea
id="summaryPrompt"
name="summaryPrompt"
rows="3"
class="w-full px-4 py-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
>Summarize this article in 20 words. Do not respond with JSON or xml or stage instructions. Only reply in text</textarea>
<label for="tagsPrompt" class="block mb-2">Tags Prompt:</label>
<textarea
id="tagsPrompt"
name="tagsPrompt"
rows="3"
class="w-full px-4 py-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
>Generate tags for this article. Return the tags as a comma separated string, e.g. one, two, three. Do not respond with JSON or xml or stage instructions.</textarea>
<div id="contentSection"></div>
<div id="loadingState" class="hidden">Summarizing...</div>
</form>
</main>
);
app.get("/", (c) => {
return c.html(
<Layout>
<Home />
</Layout>
);
});
const getContent = async (url: string) => {
try {
const response = await fetch(`https://r.jina.ai/${url}`);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.text();
return data;
} catch (error) {
console.error('Error fetching the URL:', error);
return 'Error fetching the content.';
}
};
const summarize = async (text: string, summaryPrompt: string) => {
let res = await ai.gen({prompt: `${summaryPrompt} | <article>${text}</article>`, provider:'google'});
return res.text;
};
const addTags = async (text: string, tagsPrompt: string) => {
let res = await ai.gen({prompt: `${tagsPrompt} | <article>${text}</article>`, provider:'groq'});
console.log(res.text);
return res.text;