/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [germanText, setGermanText] = useState(""); const [englishTranslation, setEnglishTranslation] = useState(""); const [isTranslating, setIsTranslating] = useState(false); const handleTranslate = async () => { setIsTranslating(true); setEnglishTranslation("(waiting for translation)"); try { const response = await fetch("https://rozek-gdi_aitranslatorservice.web.val.run", { method: "POST", body: germanText, }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.text(); setEnglishTranslation(result); } catch (error) { setEnglishTranslation(`Translation failed with: ${error.message}`); } finally { setIsTranslating(false); } }; return (

Translator DE ➜ EN

German Text:

setGermanText(e.target.value)}
        placeholder="(enter german text)"
        disabled={isTranslating}
      />
      <label htmlFor="englishTranslation">English Translation:</label>
      <textarea
        id="englishTranslation"
        value={englishTranslation}
        readOnly
        placeholder="(english translation)"
      />
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

export default async function server(request: Request): Promise<Response> {
  return new Response(
    `
    <html>
      <head>
        <title>Translator DE ➜ EN</title>
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: {
        "content-type": "text/html",
      },
    }
  );
}

const css = `
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(to bottom, #87CEEB, #E0F6FF);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-container {
  background-color: white;
  padding: 1rem 1.5rem;
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 500px;
}

h1 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.input-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  position: relative;
}

label {
  font-weight: bold;
  margin-bottom: 0.5rem;
  display: block;
}

label[for="germanText"] {
  position: relative;
  top: 14px;
}

textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-height: 100px;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
`;</article></body></html>

rozek_at_hft