/** @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 App() { const [text, setText] = useState(''); const [correction, setCorrection] = useState(null); const [loading, setLoading] = useState(false); const checkGrammar = async () => { setLoading(true); try { const response = await fetch('/grammar', { method: 'POST', body: JSON.stringify({ text }) }); const result = await response.json(); setCorrection(result); } catch (error) { console.error('Grammar check failed', error); setCorrection({ error: 'Failed to check grammar' }); } finally { setLoading(false); } }; return (

📝 Grammar Checker

setText(e.target.value)}
        placeholder="Enter your text here..."
        rows={6}
      />
      <button 
        style={styles.button} 
        onClick={checkGrammar}
        disabled={loading}
      >
        {loading ? 'Checking...' : 'Check Grammar'}
      </button>
      
      {correction && (
        <div style={styles.resultContainer}>
          <h2>Results:</h2>
          {correction.error ? (
            <p style={styles.error}>{correction.error}</p>
          ) : (
            <>
              <div style={styles.correctedText}>
                <strong>Corrected Text:</strong> {correction.correctedText}
              </div>
              <div style={styles.explanation}>
                <strong>Explanation:</strong> {correction.explanation}
              </div>
            </>
          )}
        </div>
      )}
      <a 
        href={import.meta.url.replace("esm.town", "val.town")} 
        target="_top" 
        style={styles.sourceLink}
      >
        View Source
      </a>
    </div>
  );
}

const styles = {
  container: {
    maxWidth: '600px',
    margin: '0 auto',
    padding: '20px',
    fontFamily: 'Arial, sans-serif',
  },
  title: {
    textAlign: 'center',
    color: '#333',
  },
  textarea: {
    width: '100%',
    padding: '10px',
    marginBottom: '10px',
    borderRadius: '5px',
    border: '1px solid #ccc',
  },
  button: {
    width: '100%',
    padding: '10px',
    backgroundColor: '#4CAF50',
    color: 'white',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
  },
  resultContainer: {
    marginTop: '20px',
    padding: '15px',
    backgroundColor: '#f4f4f4',
    borderRadius: '5px',
  },
  correctedText: {
    marginBottom: '10px',
  },
  explanation: {
    fontStyle: 'italic',
  },
  error: {
    color: 'red',
  },
  sourceLink: {
    display: 'block',
    textAlign: 'center',
    marginTop: '20px',
    color: '#666',
    textDecoration: 'none',
  }
};

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

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

try {
      const { text } = await request.json();
      
      const completion = await openai.chat.completions.create({
        messages: [
          { 
            role: "system", 
            content: "You are a professional grammar checker. Provide a corrected version of the text and a detailed explanation of the grammar improvements." 
          },
          { 
            role: "user", 
            content: `Please check the grammar in this text and provide corrections and explanations:\n\n${text}` 
          }
        ],
        model: "gpt-4o-mini",
        max_tokens: 300,
      });

const response = completion.choices[0].message.content;
      const [correctedText, explanation] = response.split('Explanation:');

return new Response(JSON.stringify({
        correctedText: correctedText.replace('Corrected Text:', '').trim(),
        explanation: explanation ? explanation.trim() : 'No specific grammar issues found.'
      }), {
        headers: { 'Content-Type': 'application/json' }
      });
    } catch (error) {
      return new Response(JSON.stringify({ error: error.message }), {
        status: 500,
        headers: { 'Content-Type': 'application/json' }
      });
    }
  }

return new Response(`
    <html>
      <head>
        <title>Grammar Checker</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>

grammarCheckApp

Versions

v0