// This app will create a confessional interface where users can input their sins // and receive a penance in the form of Catholic prayers. We'll use React for the // frontend and ChatGPT to determine the number of prayers based on the // confession. The app will use server-side processing to interact with the // OpenAI API. /** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [confession, setConfession] = useState(""); const [penance, setPenance] = useState(null); const calculatePenance = () => { const wordCount = confession.trim().split(/\s+/).length; const gloryBe = Math.ceil(wordCount / 10); const ourFather = Math.ceil(wordCount / 20); const hailMary = Math.ceil(wordCount / 15); fetch("/penance", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ confession }), }) .then((response) => response.text()) .then((penanceHtml) => { // Strip out ```html and ``` if present const penanceText = penanceHtml.replace(/```html|```/g, ''); console.log(penanceText); // For debugging setPenance(penanceText); }) .catch((error) => console.error("Error:", error)); }; return (

Virtual Confessional

setConfession(e.target.value)}
        placeholder="Confess your sins here..."
        rows={5}
      />
      <button onClick={calculatePenance}>Receive Penance</button>
      {penance && (
        <div className="penance">
          <h2>Your Penance:</h2>
          <p dangerouslySetInnerHTML={{ __html: penance }} />
        </div>
      )}
      <footer style={{ marginTop: '2rem', fontSize: '0.9rem', textAlign: 'center' }}>
        <a href={import.meta.url.replace("esm.town", "val.town")} style={{ color: '#ffd700', textDecoration: 'none' }}>
          View Source
        </a>
      </footer>
    </div>
  );
}

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

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

// Server-side code
export default async function server(request: Request): Promise<Response> {
  if (request.method === "POST" && new URL(request.url).pathname === "/penance") {
    const { OpenAI } = await import("https://esm.town/v/std/openai");
    const openai = new OpenAI();

const { confession } = await request.json();

const completion = await openai.chat.completions.create({
      messages: [
        { role: "system", content: "You are a Catholic priest assigning penance. Respond with a short paragraph in HTML format, describing the penance in terms of Glory Be, Our Father, and Hail Mary prayers. Use <b> tags to bold the number and type of each prayer." },
        { role: "user", content: `Based on this confession, assign an appropriate penance. Your response should be in HTML format with the number and type of prayers in bold: "${confession}"` },
      ],
      model: "gpt-4-mini",
      max_tokens: 150,
    });

const penance = completion.choices[0].message.content.trim();
    
    return new Response(penance, {
      headers: { "Content-Type": "text/html" },
    });
  }

return new Response(`
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Virtual Confessional</title>
        <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap" rel="stylesheet">
        <style>${css}</style>
      </head>
      <body>
        <div class="stained-glass"></div>
        <div class="confessional">
          <div id="root"></div>
        </div>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { "Content-Type": "text/html" },
  });
}

confessionalApp