🃏 AI Flashcard Generator

\n setTopic(e.target.value)}\n placeholder=\"Enter topic (e.g., Spanish vocabulary)\"\n />\n \n

\n {error &&

{error}

}\n

\n {flashcards.length > 0 ? (\n flashcards.map((card, index) => (\n

{card.term}

{card.definition}

\n ))\n ) : (\n

No flashcards generated yet

\n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/generate\") {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n try {\n const { topic } = await request.json();\n \n const completion = await openai.chat.completions.create({\n model: \"gpt-4o-mini\",\n messages: [\n { \n role: \"system\", \n content: `You are an expert educational content creator specializing in generating precise, informative flashcards. \n\nSTRICT REQUIREMENTS:\n1. Always generate EXACTLY 5 flashcards\n2. Provide a JSON array with this EXACT structure:\n [\n {\"term\": \"Specific Term\", \"definition\": \"Detailed, clear explanation\"},\n ...4 more cards\n ]\n3. Ensure terms are specific and definitions are educational\n4. Match the complexity to a typical student learning the topic\n5. Use clear, concise language`\n },\n { \n role: \"user\", \n content: `Generate 5 detailed, educational flashcards about: ${topic}. \n\nIMPORTANT: \n- Return ONLY a valid JSON array \n- Each flashcard must have a 'term' and 'definition'\n- Definitions should be informative and suitable for learning\n- Focus on key concepts, terminology, or core knowledge\n\nExample Output:\n[\n {\"term\":\"Photosynthesis\", \"definition\":\"Process by which plants convert sunlight into chemical energy, producing oxygen and glucose\"},\n {\"term\":\"Mitochondria\", \"definition\":\"Cellular organelles responsible for energy production, often called the 'powerhouse of the cell'\"},\n ...3 more cards\n]` \n }\n ],\n max_tokens: 500, // Increased to allow more comprehensive response\n temperature: 0.7, // Balanced creativity and precision\n response_format: { type: \"json_object\" }\n });\n\n const flashcardsResponse = completion.choices[0].message.content;\n console.log(\"Raw OpenAI response:\", flashcardsResponse); // Detailed debug logging\n\n // More robust JSON parsing with extensive error handling\n let flashcards: Flashcard[] = [];\n try {\n // First, attempt to parse the response\n const parsedResponse = JSON.parse(flashcardsResponse || \"[]\");\n \n // Validate the parsed data is an array\n if (Array.isArray(parsedResponse)) {\n // Filter and validate each flashcard\n flashcards = parsedResponse.filter(card => \n card && \n typeof card === 'object' && \n typeof card.term === 'string' && \n typeof card.definition === 'string' &&\n card.term.trim().length > 0 &&\n card.definition.trim().length > 0\n );\n }\n\n // Log parsing results\n console.log(\"Parsed Flashcards:\", JSON.stringify(flashcards, null, 2));\n } catch (parseError) {\n console.error(\"Detailed JSON Parsing error:\", {\n error: parseError,\n rawResponse: flashcardsResponse\n });\n flashcards = [];\n }\n\n // Fallback if no valid flashcards\n if (flashcards.length === 0) {\n console.error(\"No valid flashcards generated for topic:\", topic);\n flashcards = [{ \n term: \"Generation Failed\", \n definition: `Could not generate flashcards for \"${topic}\". Please try a different topic or rephrase your request.` \n }];\n }\n\n return new Response(JSON.stringify({ \n flashcards: flashcards\n }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } catch (error) {\n console.error(\"Comprehensive server-side error:\", {\n errorMessage: error instanceof Error ? error.message : \"Unknown error\",\n errorStack: error instanceof Error ? error.stack : \"No stack trace\"\n });\n\n return new Response(JSON.stringify({ \n error: \"Failed to generate flashcards\", \n details: error instanceof Error ? error.message : \"Unknown error\",\n flashcards: [{ \n term: \"Error\", \n definition: \"Could not generate flashcards. Please try again.\" \n }]\n }), { \n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n\n return new Response(`\n \n \n AI Flashcard Generator\n \n \n \n

\n \n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n}\n\nconst css = `\nbody {\n font-family: 'Arial', sans-serif;\n background-color: #f4f4f4;\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n}\n\n.container {\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n padding: 30px;\n width: 100%;\n max-width: 600px;\n}\n\nh1 {\n text-align: center;\n color: #333;\n margin-bottom: 20px;\n}\n\n.input-section {\n display: flex;\n margin-bottom: 20px;\n}\n\ninput {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n margin-right: 10px;\n}\n\nbutton {\n padding: 10px 15px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.error {\n color: red;\n text-align: center;\n margin-bottom: 15px;\n}\n\n.flashcards {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 15px;\n}\n\n.flashcard {\n background-color: #f9f9f9;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n padding: 15px;\n text-align: center;\n}\n\n.term {\n font-weight: bold;\n margin-bottom: 10px;\n color: #333;\n}\n\n.definition {\n color: #666;\n}\n\n.no-flashcards {\n text-align: center;\n color: #888;\n padding: 20px;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/omar1/flashcards/code/main.tsx","extension","actionData","errors"]