/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Smurf text transformer function const smurfTransform = (text) => { if (!text) return "Smurfa in lite text!"; // Split the AI output at the double newline to isolate the translation const translation = text.split("\n\n")[0]; // Convert to lowercase const lowerCaseText = translation.toLowerCase(); // Remove the prefix const smurfText = lowerCaseText.replace("Here's the translation to Smurf language:\n\n", ""); // Replace periods with exclamation marks const finalText = smurfText.replace(/smurf\./g, "smurf!"); return finalText; }; function App() { const [inputText, setInputText] = useState(""); const [smurfedText, setSmurfedText] = useState(""); const [glifUrl, setGlifUrl] = useState(""); const handleTransform = () => { setSmurfedText(smurfTransform(inputText)); // Generate Glif.app embedding URL const baseUrl = import.meta.url; setGlifUrl(`https://glif.app/import?url=${encodeURIComponent(baseUrl)}`); }; return (

🐱 Smurf Text Transformer 🐱

setInputText(e.target.value)} placeholder="Skriv din text här..." style={styles.textarea} /> {smurfedText && (

Smurfad Text:

{smurfedText}

)} {glifUrl && (

Glif.app Embed URL:

e.target.select()} /> Open in Glif.app

)} View Source

); } const styles = { container: { fontFamily: 'Arial, sans-serif', maxWidth: '600px', margin: '0 auto', padding: '20px', textAlign: 'center', }, textarea: { width: '100%', height: '150px', marginBottom: '10px', }, button: { backgroundColor: '#4CAF50', color: 'white', padding: '10px 20px', border: 'none', borderRadius: '5px', cursor: 'pointer', }, result: { marginTop: '20px', padding: '10px', backgroundColor: '#f0f0f0', borderRadius: '5px', }, sourceLink: { display: 'block', marginTop: '20px', color: '#888', textDecoration: 'none', }, embedSection: { marginTop: '20px', padding: '10px', backgroundColor: '#f9f9f9', borderRadius: '5px', }, embedInput: { width: '100%', padding: '5px', marginTop: '10px', backgroundColor: '#f0f0f0', border: '1px solid #ddd', borderRadius: '3px', }, glifButton: { display: 'inline-block', marginTop: '10px', padding: '10px 20px', backgroundColor: '#007bff', color: 'white', textDecoration: 'none', borderRadius: '5px', } }; function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); const textToSmurf = url.searchParams.get('text'); const processedSmurfText = smurfTransform(textToSmurf); return new Response(JSON.stringify({ data: processedSmurfText }), { headers: { "content-type": "application/json", }, }); }

glamorousJadeLobster

Versions

v0