Something went wrong.

Error Details

{this.state.error.toString()}

\n );\n }\n\n return this.props.children;\n }\n}\n\nfunction APIGeneratorApp() {\n const [prompt, setPrompt] = useState(\"\");\n const [method, setMethod] = useState(\"GET\");\n const [language, setLanguage] = useState(\"TypeScript\");\n const [framework, setFramework] = useState(\"Express.js\");\n const [generatedCode, setGeneratedCode] = useState(null);\n const [isLoading, setIsLoading] = useState(false);\n const [generationType, setGenerationType] = useState(\"code\");\n const rootRef = useRef(null);\n\n useEffect(() => {\n console.log(\"Component mounted\");\n }, []);\n\n const handleGenerate = async () => {\n setIsLoading(true);\n setGeneratedCode(null);\n\n try {\n const response = await fetch(\"/generate-api\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ \n prompt, \n method, \n language, \n framework,\n generationType\n }),\n });\n\n const data = await response.json();\n setGeneratedCode(data.code);\n } catch (error) {\n console.error(\"API Generation Error:\", error);\n setGeneratedCode(`Error: ${error.message}`);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

🚀 API Code Generator

\n \n

\n setPrompt(e.target.value)}\n />\n\n

\n \n\n \n\n \n\n \n\n \n

\n\n {generatedCode && (\n

Generated {generationType.charAt(0).toUpperCase() + generationType.slice(1)}

\n \n

\n \n {generatedCode}\n \n

\n )}\n

\n );\n}\n\nfunction App() {\n return (\n \n \n \n );\n}\n\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n const root = createRoot(rootElement);\n root.render(\n \n \n \n );\n } else {\n console.error(\"Root element not found\");\n }\n}\n\n// Ensure client-side rendering only happens in browser\nif (typeof window !== \"undefined\" && typeof document !== \"undefined\") { \n client(); \n}\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/generate-api\") {\n const { OpenAI } = await import(\"https://esm.sh/openai\");\n \n try {\n const { \n prompt, \n method, \n language, \n framework,\n generationType \n } = await request.json();\n \n // Validate API key is set\n const apiKey = Deno.env.get(\"CEREBRAS_API_KEY\");\n if (!apiKey) {\n return new Response(JSON.stringify({ \n code: \"// Error: Cerebras API key not configured\" \n }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n\n const client = new OpenAI({\n apiKey: apiKey,\n baseURL: \"https://api.cerebras.ai/v1\"\n });\n\n const cerebrasPrompt = `Generate a ${generationType} for a ${method} API endpoint in ${language} using ${framework}. \n\n Endpoint Description: ${prompt}\n \n Requirements:\n - Use best practices for ${framework}\n - ${generationType === 'code' ? 'Provide a concise, production-ready implementation' : ''}\n ${generationType === 'documentation' ? '- Create comprehensive API documentation' : ''}\n ${generationType === 'tests' ? '- Write comprehensive unit and integration tests' : ''}\n - Include error handling\n - Demonstrate key functionality`;\n \n const response = await client.chat.completions.create({\n model: \"llama-3.3-70b\",\n messages: [{ role: \"user\", content: cerebrasPrompt }],\n max_tokens: 2000,\n });\n\n const generatedText = response.choices[0].message.content;\n\n return new Response(JSON.stringify({ \n code: generatedText \n }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } catch (error) {\n console.error(\"Cerebras API Error:\", error);\n return new Response(JSON.stringify({ \n code: `// Error generating ${generationType}: ${error.message}` \n }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n\n return new Response(`\n \n \n 🚀 Cerebras API Generator\n \n \n \n \n \n

\n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n}\n\nconst styles = `\n :root {\n --primary-color: #6e41c0;\n --secondary-color: #f0f0f4;\n --background-color: #ffffff;\n --text-color: #2c2c2c;\n --border-color: #e0e0e6;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--secondary-color);\n display: flex;\n justify-content: center;\n padding: 2rem;\n }\n\n .api-generator-container {\n width: 100%;\n max-width: 800px;\n background-color: var(--background-color);\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n padding: 2rem;\n }\n\n h1 {\n text-align: center;\n margin-bottom: 1.5rem;\n color: var(--primary-color);\n }\n\n textarea {\n width: 100%;\n min-height: 100px;\n padding: 0.75rem;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n margin-bottom: 1rem;\n resize: vertical;\n }\n\n .config-row {\n display: grid;\n grid-template-columns: repeat(4, 1fr) auto;\n gap: 1rem;\n align-items: center;\n }\n\n select, button {\n padding: 0.5rem;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n background-color: white;\n }\n\n button {\n background-color: var(--primary-color);\n color: white;\n border: none;\n cursor: pointer;\n transition: opacity 0.2s;\n }\n\n button:hover {\n opacity: 0.9;\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .results-section {\n margin-top: 2rem;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n }\n\n .results-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem;\n background-color: var(--secondary-color);\n border-bottom: 1px solid var(--border-color);\n }\n\n .results-header button {\n background-color: transparent;\n color: var(--primary-color);\n border: 1px solid var(--primary-color);\n }\n`;","deleted","label",[99],"permalink","https://www.val.town/x/gokulnpc/prosperousYellowMule/code/main.tsx","extension","actionData","errors"]