/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function AdvancedPromptGenerator() { const [role, setRole] = useState(''); const [task, setTask] = useState(''); const [context, setContext] = useState(''); const [constraints, setConstraints] = useState(''); const [generatedPrompt, setGeneratedPrompt] = useState(''); const generatePrompt = () => { if (!role || !task) { alert('Role and Task are required fields'); return; } const basePrompt = `Act as ${role}. ${task}${ context ? ` In the context of: ${context}.` : '' }${ constraints ? ` Specific constraints: ${constraints}.` : '' }`; setGeneratedPrompt(basePrompt); }; const copyToClipboard = () => { navigator.clipboard.writeText(generatedPrompt); alert('Prompt copied! 📋'); }; return (

🤖 ChatGPT Prompt Forge

Role/Persona: setRole(e.target.value)} placeholder="e.g., a senior software architect" style={{ width: '100%', padding: '8px', marginTop: '5px' }} />

Task/Objective:

setTask(e.target.value)}
          placeholder="What do you want the AI to do?"
          style={{ width: '100%', padding: '8px', marginTop: '5px', minHeight: '100px' }}
        />
      </div>

<div style={{ marginBottom: '15px' }}>
        <label style={{ fontWeight: 'bold' }}>Context (Optional):</label>
        <input 
          type="text" 
          value={context} 
          onChange={(e) => setContext(e.target.value)}
          placeholder="Additional background information"
          style={{ width: '100%', padding: '8px', marginTop: '5px' }}
        />
      </div>

<div style={{ marginBottom: '15px' }}>
        <label style={{ fontWeight: 'bold' }}>Constraints (Optional):</label>
        <input 
          type="text" 
          value={constraints} 
          onChange={(e) => setConstraints(e.target.value)}
          placeholder="Specific guidelines or limitations"
          style={{ width: '100%', padding: '8px', marginTop: '5px' }}
        />
      </div>

<button 
        onClick={generatePrompt}
        style={{ 
          width: '100%', 
          padding: '12px', 
          backgroundColor: '#4CAF50', 
          color: 'white', 
          border: 'none',
          borderRadius: '5px',
          fontSize: '16px',
          cursor: 'pointer'
        }}
      >
        🔮 Generate Prompt
      </button>

{generatedPrompt && (
        <div style={{ 
          marginTop: '20px', 
          border: '1px solid #ddd', 
          padding: '15px', 
          backgroundColor: 'white',
          borderRadius: '5px'
        }}>
          <h3>Your Crafted Prompt:</h3>
          <p style={{ fontStyle: 'italic' }}>{generatedPrompt}</p>
          <button 
            onClick={copyToClipboard}
            style={{ 
              backgroundColor: '#2196F3', 
              color: 'white', 
              border: 'none', 
              padding: '8px 15px',
              borderRadius: '5px',
              cursor: 'pointer'
            }}
          >
            📋 Copy Prompt
          </button>
        </div>
      )}

<footer style={{ 
        marginTop: '20px', 
        textAlign: 'center', 
        fontSize: '0.8em', 
        color: '#666' 
      }}>
        <a 
          href={import.meta.url.replace("esm.town", "val.town")} 
          target="_top"
        >
          View Source
        </a>
      </footer>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<AdvancedPromptGenerator />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  return new Response(`
    <html>
      <head>
        <title>ChatGPT Prompt Forge</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </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" }
  });
}</article></body></html>

tarekr93