/** * This val creates a website that generates optimized prompts for Val Town based on user input. * It uses the OpenAI API to generate prompts and incorporates a loading animation. * The generated prompt is tailored to Val Town's specific features and best practices. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const valTownFeatures = [ "HTTP vals", "Scheduled vals", "SQLite database", "Blob storage", "Email sending", "OpenAI integration", "React support", "TypeScript support", "Deno runtime", "Web APIs", ]; function App() { const [idea, setIdea] = useState(""); const [prompt, setPrompt] = useState(""); const [loading, setLoading] = useState(false); const generatePrompt = async () => { setLoading(true); try { const response = await fetch("/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ idea }), }); if (!response.ok) throw new Error("Failed to generate prompt"); const data = await response.json(); setPrompt(data.prompt); } catch (error) { console.error("Error generating prompt:", error); setPrompt("An error occurred while generating the prompt. Please try again."); } finally { setLoading(false); } }; return (

Val Town Prompt Generator

setIdea(e.target.value)}
        placeholder="Enter your Val Town application idea"
        rows={4}
      />
      <button onClick={generatePrompt} disabled={loading || !idea}>
        Generate Optimized Prompt
      </button>
      {loading && (
        <div className="loading">
          <div className="spinner"></div>
          <p>Generating prompt...</p>
        </div>
      )}
      {prompt && (
        <div className="result">
          <h2>Generated Prompt:</h2>
          <pre>{prompt}</pre>
        </div>
      )}
      <a
        href={import.meta.url.replace("esm.town", "val.town")}
        target="_blank"
        rel="noopener noreferrer"
        className="view-source"
      >
        View Source
      </a>
    </div>
  );
}

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

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

async function server(request: Request): Promise<Response> {
  const url = new URL(request.url);

if (url.pathname === "/generate" && request.method === "POST") {
    const { OpenAI } = await import("https://esm.town/v/std/openai");
    const openai = new OpenAI();

try {
      const { idea } = await request.json();
      const completion = await openai.chat.completions.create({
        messages: [
          {
            role: "system",
            content:
              "You are an expert in Val Town development. Generate an optimized prompt for creating a Val Town application based on the user's idea. Include specific Val Town features and best practices in your response. Respond with only with the prompt in a single text line.",
          },
          {
            role: "user",
            content:
              `Generate a prompt for a Val Town application with the following idea: ${idea}. Include references to Val Town features like: ${
                valTownFeatures.join(", ")
              }. The prompt should guide the user to create a well-structured Val Town application.`,
          },
        ],
        model: "gpt-4-1106-preview",
        max_tokens: 500,
      });

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>Val Town Prompt Generator</title>
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <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;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

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

button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

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

.loading {
  text-align: center;
  margin-top: 20px;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.result {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.view-source {
  display: inline-block;
  margin-top: 20px;
  padding: 5px 10px;
  background-color: #28a745;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}
`;

export default server;</article></body></html>

promptGen