/** @jsxImportSource https://esm.sh/react@18.2.0 */ import mermaid from "https://esm.sh/mermaid@10.6.1"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; // Spinner Component const Spinner = ({ size = 40, color = "#6366F1" }) => (

); function App() { const [functionInput, setFunctionInput] = useState(""); const [mermaidDiagram, setMermaidDiagram] = useState(""); const [error, setError] = useState(""); const [correctionError, setCorrectionError] = useState(""); const [isSubmitting, setIsSubmitting] = useState(false); const [isGenerating, setIsGenerating] = useState(false); useEffect(() => { mermaid.initialize({ startOnLoad: false, theme: 'dark' }); }, []); useEffect(() => { renderDiagram(); }, [mermaidDiagram]); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setError(""); setMermaidDiagram(""); setIsGenerating(true); try { const response = await fetch("https://hameed-adeptgoldswordfish.web.val.run", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ function: functionInput }), }); if (!response.ok) { throw new Error("Failed to generate mermaid diagram"); } const data = await response.json(); const cleanedDiagramCode = data.mermaidCode .replace(/^```mermaid\n/, "") .replace(/```$/, "") .trim(); setMermaidDiagram(cleanedDiagramCode); } catch (err) { setError(err instanceof Error ? err.message : "An unknown error occurred"); } finally { setIsGenerating(false); } }; const handleCorrectMermaid = async () => { setCorrectionError(""); setIsSubmitting(true); try { const response = await fetch("https://hameed-adeptgoldswordfish.web.val.run", { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ functionDescription: functionInput, currentMermaidCode: `\`\`\`mermaid\n${mermaidDiagram}\n\`\`\``, }), }); if (!response.ok) { throw new Error("Failed to submit mermaid correction"); } const result = await response.json(); const cleanedDiagramCode = result.mermaidCode .replace(/^```mermaid\n/, "") .replace(/```$/, "") .trim(); setMermaidDiagram(cleanedDiagramCode); alert("Mermaid diagram correction submitted successfully!"); } catch (err) { setCorrectionError(err instanceof Error ? err.message : "An unknown error occurred during correction"); } finally { setIsSubmitting(false); } }; const renderDiagram = () => { try { const element = document.getElementById("diagram"); if (element && mermaidDiagram) { element.innerHTML = ""; mermaid.render("dynamicDiagram", mermaidDiagram) .then(({ svg }) => { element.innerHTML = svg; }) .catch(error => { element.innerHTML = `Error: ${error.message}`; }); } } catch (error) { console.error("Diagram rendering error:", error); setError(error instanceof Error ? error.message : "Unknown rendering error"); } }; return (

🔍 Function Diagram Generator

Transform code into visual flowcharts

setFunctionInput(e.target.value)}
          placeholder="Paste your function here... (JavaScript/TypeScript)"
          style={styles.textarea}
          rows={10}
        />
        <button 
          type="submit" 
          style={{
            ...styles.button,
            backgroundColor: isGenerating ? '#6366F1' : '#4F46E5',
            opacity: isGenerating ? 0.7 : 1
          }}
          disabled={isGenerating}
        >
          {isGenerating ? 'Generating...' : 'Generate Diagram'}
        </button>
      </form>

{error && <div style={styles.errorBanner}>{error}</div>}

{isGenerating && <Spinner />}

{mermaidDiagram && !isGenerating && (
        <div style={styles.diagramSection}>
          <div style={styles.diagramColumn}>
            <h2 style={styles.sectionTitle}>📝 Mermaid Code</h2>
            <pre style={styles.mermaidCodePre}>{mermaidDiagram}</pre>
            
            <div style={styles.warning} role="alert">
              <div style={styles.warningHeader}>
                <p style={styles.warningTitle}>⚠️ Diagram Correction</p>
              </div>
              <p style={styles.warningText}>
                Notice an error? Click below to suggest a correction.
              </p>

<button
                onClick={handleCorrectMermaid}
                style={{
                  ...styles.button,
                  marginTop: "10px",
                  backgroundColor: isSubmitting ? "#9CA3AF" : "#10B981",
                }}
                disabled={isSubmitting}
              >
                {isSubmitting ? "Submitting..." : "Correct Mermaid"}
              </button>
            </div>

{correctionError && <div style={styles.errorBanner}>{correctionError}</div>}
          </div>
          
          <div style={styles.diagramColumn}>
            <h2 style={styles.sectionTitle}>🖼️ Diagram Visualization</h2>
            <div
              id="diagram"
              style={styles.diagramContainer}
            />
          </div>
        </div>
      )}
    </div>
  );
}

const styles = {
  container: {
    maxWidth: "1200px",
    margin: "0 auto",
    padding: "20px",
    fontFamily: "'Inter', system-ui, sans-serif",
    backgroundColor: '#111827',
    color: '#F9FAFB',
    minHeight: '100vh',
  },
  header: {
    textAlign: 'center',
    marginBottom: '2rem',
    padding: '20px',
    background: 'linear-gradient(135deg, #4F46E5 0%, #6366F1 100%)',
    borderRadius: '12px',
  },
  title: {
    fontSize: '2.5rem',
    marginBottom: '0.5rem',
    color: 'white',
  },
  subtitle: {
    color: '#E0E7FF',
    fontSize: '1rem',
  },
  form: {
    display: "flex",
    flexDirection: "column",
    gap: "15px",
    background: '#1F2937',
    padding: '20px',
    borderRadius: '12px',
  },
  textarea: {
    width: "100%",
    padding: "12px",
    borderRadius: "8px",
    border: "2px solid #374151",
    backgroundColor: '#111827',
    color: '#F9FAFB',
    fontSize: '0.95rem',
  },
  button: {
    padding: "12px 20px",
    backgroundColor: "#4F46E5",
    color: "white",
    border: "none",
    borderRadius: "8px",
    cursor: "pointer",
    transition: "all 0.3s ease",
    fontWeight: 'bold',
  },
  errorBanner: {
    backgroundColor: '#DC2626',
    color: 'white',
    padding: '15px',
    borderRadius: '8px',
    marginTop: '15px',
    textAlign: 'center',
  },
  diagramSection: {
    display: "flex",
    gap: "20px",
    marginTop: "20px",
    background: '#1F2937',
    padding: '20px',
    borderRadius: '12px',
  },
  diagramColumn: {
    flex: 1,
    minWidth: 0,
  },
  sectionTitle: {
    color: '#E0E7FF',
    marginBottom: '15px',
  },
  mermaidCodePre: {
    backgroundColor: "#111827",
    padding: "15px",
    borderRadius: "8px",
    overflowX: "auto",
    border: "1px solid #374151",
    color: '#10B981',
  },
  diagramContainer: {
    backgroundColor: "#111827",
    padding: "15px",
    borderRadius: "8px",
    overflowX: "auto",
    border: "1px solid #374151",
  },
  warning: {
    backgroundColor: "#1E3A8A", 
    color: "#BFDBFE", 
    padding: "16px", 
    borderRadius: "8px",
    marginTop: '15px',
  },
  warningHeader: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
  },
  warningTitle: {
    fontWeight: "bold",
    fontSize: '1.1rem',
  },
  warningText: {
    marginTop: "10px",
    fontSize: '0.9rem',
  },
};

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 === "PUT") {
    try {
      const body = await request.json();
      // Here you would typically process the correction
      // For now, we'll just return a success response
      return new Response(
        JSON.stringify({
          status: "success",
          message: "Mermaid correction received",
        }),
        {
          headers: { "Content-Type": "application/json" },
        },
      );
    } catch (error) {
      return new Response(
        JSON.stringify({
          status: "error",
          message: error instanceof Error ? error.message : "Unknown error",
        }),
        {
          status: 400,
          headers: { "Content-Type": "application/json" },
        },
      );
    }
  }

return new Response(
    `
    <html>
      <head>
        <title>Function Mermaid Diagram Generator</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
        <script src="https://esm.town/v/std/catch"></script>
      </head>
      <body style="margin: 0; background-color: #111827;">
        <div id="root"></div>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: {
        "content-type": "text/html",
      },
    },
  );
}</article></body></html>