/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import Prism from "https://esm.sh/prismjs@1.29.0"; import "https://esm.sh/prismjs@1.29.0/components/prism-csharp"; import "https://esm.sh/prismjs@1.29.0/components/prism-typescript"; import "https://esm.sh/prismjs@1.29.0/components/prism-javascript"; const Spinner = () => (

); function App() { const [input, setInput] = useState(""); const [output, setOutput] = useState(""); const [language, setLanguage] = useState("javascript"); const [isLoading, setIsLoading] = useState(false); const handleInputChange = (e) => { setInput(e.target.value); }; const handleLanguageChange = (e) => { setLanguage(e.target.value); }; const handleSubmit = async () => { try { setIsLoading(true); const response = await fetch("/comment", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ code: input, language }), }); const data = await response.json(); setIsLoading(false); setOutput(data.commentedCode); } catch (error) { console.error("Error:", error); setOutput("An error occurred while processing the code."); } }; useEffect(() => { if (output) { Prism.highlightAll(); } }, [output]); return (

<div>
          <select value={language} onChange={handleLanguageChange} style={{ marginRight: "10px" }}>
            <option value="javascript">JavaScript</option>
            <option value="typescript">TypeScript</option>
            <option value="csharp">C#</option>
          </select>
          <button onClick={handleSubmit}>Add Comments</button>
        </div>
      </div>
      <div style={{ flex: 1, padding: "10px", overflow: "auto" }}>
        {isLoading ? (
          <Spinner />
        ) : (
          <pre>
            <code className={`language-${language}`}>
              {output}
            </code>
          </pre>
        )}
      </div>
    </div>
  );
}

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

const { code, language } = await request.json();

const completion = await openai.chat.completions.create({
      messages: [
        { role: "system", content: "You are a helpful assistant that adds concise and useful comments to code." },
        { role: "user", content: `Comment this ${language} code with concise useful comments. Return only the complete commented code:\n\n${code}` },
      ],
      model: "gpt-4o-mini",
      max_tokens: 1000,
    });

return new Response(JSON.stringify({ commentedCode: completion.choices[0].message.content }), {
      headers: { "Content-Type": "application/json" },
    });
  }

return new Response(html, {
    headers: {
      "content-type": "text/html",
    },
  });
}

const css = `
body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  animation-delay: -0.16s;
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0);
  } 40% { 
    transform: scale(1.0);
  }
}
`;

export { App };</article></body></html>

codecommenter

Version 2