/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import ReactMarkdown from 'https://esm.sh/react-markdown'; import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter'; import { vscDarkPlus } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism'; function App() { const [input, setInput] = useState(""); const [response, setResponse] = useState(""); const [loading, setLoading] = useState(false); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setLoading(true); try { const res = await fetch("/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: input }), }); const data = await res.json(); setResponse(data.response); } catch (error) { console.error("Error:", error); setResponse("An error occurred while generating the response."); } setLoading(false); }; return (

Solana Transaction Code Generator

setInput(e.target.value)}
          placeholder="Describe the Solana transaction you want to create..."
          rows={4}
        />
        <button type="submit" disabled={loading}>
          {loading ? "Generating..." : "Generate Code"}
        </button>
      </form>
      {response && (
        <div className="response-container">
          <h2>Generated Response:</h2>
          <ReactMarkdown
            children={response}
            components={{
              code({node, inline, className, children, ...props}) {
                const match = /language-(\w+)/.exec(className || '')
                return !inline && match ? (
                  <SyntaxHighlighter
                    {...props}
                    children={String(children).replace(/\n$/, '')}
                    style={vscDarkPlus}
                    language={match[1]}
                    PreTag="div"
                  />
                ) : (
                  <code {...props} className={className}>
                    {children}
                  </code>
                )
              }
            }}
          />
        </div>
      )}
      <footer>
        <a href={import.meta.url.replace("esm.town", "val.town")}>View Source</a>
      </footer>
    </div>
  );
}

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

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

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

const url = new URL(request.url);

if (request.method === "POST" && url.pathname === "/generate") {
    const { prompt } = await request.json();

try {
      const completion = await openai.chat.completions.create({
        model: "gpt-4o",
        messages: [
          { role: "system", content: "You are an expert in Solana blockchain development. Generate TypeScript code for Solana transactions based on the user's description. Provide your response in markdown format, including code blocks where appropriate." },
          { role: "user", content: `Generate TypeScript code for the following Solana transaction: ${prompt}` },
        ],
        max_tokens: 1000,
      });

const responseData = completion.choices[0].message.content;

return new Response(JSON.stringify({ response: responseData }), {
        headers: { "Content-Type": "application/json" },
      });
    } catch (error) {
      console.error("Error generating response:", error);
      return new Response(JSON.stringify({
        response: "An error occurred while generating the response."
      }), {
        headers: { "Content-Type": "application/json" },
        status: 500,
      });
    }
  }

return new Response(`
    <html>
      <head>
        <title>Solana Transaction Code Generator</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <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 {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f4f4;
}

.container {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2, h3 {
  color: #2c3e50;
}

textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
}

button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #2980b9;
}

button:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
}

.response-container {
  margin-top: 20px;
}

pre {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  overflow-x: auto;
}

code {
  font-family: 'Courier New', Courier, monospace;
}

footer {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
}

footer a {
  color: #3498db;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}
`;</article></body></html>

generateSolanaTransactionCode