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
if (import.meta.main) Deno.serve(translate);
export async function translate(req: Request) {
if (req.method === "POST") {
return await fetch("https://deepl.deno.dev/translate", {
method: "POST",
body: await req.text(),
});
}
return new Response(html, { headers: { "content-type": "text/html" } });
}
const html = `
<!DOCTYPE html>
<html lang="en">
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Translator</title>
<style>
textarea {
font-size: 1rem;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
input:focus,
textarea:focus {
border: none;
outline: none;
}
*:disabled {
cursor: wait !important;
}
</style>
<script src="https://cdn.tailwindcss.com/"></script>
<script type="module">
import { html, Component, render } from "https://cdn.cbd.int/htm/preact/standalone.module.js";
import { ofetch } from "https://esm.sh/ofetch/dist/index.mjs";
import { z } from "https://esm.sh/zod";
// https://github.com/developit/htm
class App extends Component {
state = {
text: "hello",
source_lang: "auto",
target_lang: "zh",
translation: "",
};
translate = async function () {
this.setState({ loading: true, translation: "" });
const { text, source_lang, target_lang } = this.state;
const translation = await translate({ text, source_lang, target_lang });
this.setState({ loading: false, translation });
}.bind(this);
swap = function () {
if (this.state.source_lang.toLowerCase() === "auto") {
this.setState({ source_lang: "en" });
}
this.setState(({ source_lang, target_lang }) => ({
source_lang: target_lang,
target_lang: source_lang,
}));
}.bind(this);
handleShortcut = function (e) {
if (this.state.loading !== true && e.ctrlKey && e.key === "Enter") {
this.translate();
}
}.bind(this);
componentDidMount() {
document.addEventListener("keydown", this.handleShortcut);
}
componentWillUnmount() {
document.removeEventListener("keydown", this.handleShortcut);
}
render({ page }, { todos = [] }) {
return html\`
<div class="container m-auto p-1" disabled=\${this.state.loading}>
<header class="my-8">
<h1 class="text-4xl">Translator</h1>
</header>
<div class="my-4">
<button
onClick=\${this.translate}
disabled=\${this.state.loading}
class="px-4 py-2 bg-cyan-100 active:bg-cyan-200 disabled:bg-cyan-50"
>
translate (Ctrl+Enter)
</button>
<input
value=\${this.state.source_lang}
onChange=\${({ target: { value } }) => this.setState({ source_lang: value })}
placeholder="source_lang"
class="bg-neutral-50 focus:bg-neutral-100 p-2 w-20"
/>
<button onClick=\${this.swap} class="bg-fuchsia-200 p-2">🔄</button>
<input
value=\${this.state.target_lang}
onChange=\${({ target: { value } }) => this.setState({ target_lang: value })}
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
v5
January 30, 2024