test
import React, { useState } from ‘react’;
import { ChevronLeft, ChevronRight } from ‘lucide-react’;
const FlashcardApp = () => {
const [mode, setMode] = useState(‘create’); // ‘create’, ‘loading’, ‘study’
const [topic, setTopic] = useState(”);
const [flashcards, setFlashcards] = useState([]);
const [currentIndex, setCurrentIndex] = useState(0);
const [flipped, setFlipped] = useState(false);
const [activeTab, setActiveTab] = useState(‘describe’);
const [animating, setAnimating] = useState(false);
const generateFlashcards = async () => {
if (!topic.trim()) return;
setMode(‘loading’);
let prompt;
if (activeTab === ‘paste’) {
prompt = `You are tasked with extracting flashcard content from a given text chunk. Your goal is to identify key terms and their corresponding definitions or explanations that would be suitable for creating flashcards.
Here’s the text chunk you need to analyze:
${topic}
Guidelines for extracting flashcard content:
1. Identify important terms, concepts, or phrases that are central to the text’s topic.
2. For each term, find a corresponding definition, explanation, or key information from the text.
3. Ensure that the term and definition pairs are concise and clear.
4. Extract only the most relevant and significant information.
5. Aim for a balance between comprehensiveness and brevity.
Create between 3-10 flashcards based on the content available.
Respond ONLY with a valid JSON array in this exact format:
[
{
“front”: “Term or concept (keep concise, 1-5 words ideal)”,
“back”: “Definition or explanation from the text (clear and educational, under 50 words)”
}
]
DO NOT include any text outside the JSON array.`;
} else {
prompt = `You are tasked with creating educational flashcards about “${topic}”. Your goal is to create concise, clear, and accurate flashcard pairs that would help someone learn this topic.
Guidelines for creating effective flashcards:
1. Each flashcard should have a clear term/concept on one side and a concise definition/explanation on the other
2. Terms should be specific and focused (ideally 1-5 words)
3. Definitions should be clear and brief (ideally under 50 words)
4. Focus on the most important concepts related to the topic
5. Make the content educational, accurate, and helpful for learning
Based on the topic, adapt your approach:
* For locations (countries, cities): Use the location as the term and key facts as the definition
* For historical subjects: Use events/people as terms and dates/significance as definitions
* For scientific topics: Use concepts/terms as the front and explanations as the back
* For language learning: Use words in one language as terms and translations as definitions
Please provide exactly 10 flashcards in this JSON format – don’t include any text outside the JSON:
[
{
“front”: “Term or concept”,
“back”: “Definition or explanation”
}
]`;
}
try {
const response = await window.claude.complete(prompt);
const cards = JSON.parse(response);
setFlashcards(cards);
setCurrentIndex(0);
setFlipped(false);
setMode(‘study’);
} catch (error) {
console.error(‘Error generating flashcards:’, error);
alert(‘Failed to generate flashcards. Please try again.’);
setMode(‘create’);
}
};
const handleFlip = () => {
setFlipped(!flipped);
};
const handleNext = () => {
if (currentIndex < flashcards.length - 1 && !animating) {
setAnimating(true);
setTimeout(() => {
setFlipped(false);
setCurrentIndex(currentIndex + 1);
setTimeout(() => setAnimating(false), 50);
}, 150);
}
};
const handlePrevious = () => {
if (currentIndex > 0 && !animating) {
setAnimating(true);
setTimeout(() => {
setFlipped(false);
setCurrentIndex(currentIndex – 1);
setTimeout(() => setAnimating(false), 50);
}, 150);
}
};
const handleKeyPress = (e) => {
if (mode === ‘study’) {
if (e.key === ‘ArrowLeft’) handlePrevious();
if (e.key === ‘ArrowRight’) handleNext();
if (e.key === ‘ArrowUp’ || e.key === ‘ArrowDown’) {
e.preventDefault();
handleFlip();
}
}
};
React.useEffect(() => {
window.addEventListener(‘keydown’, handleKeyPress);
return () => window.removeEventListener(‘keydown’, handleKeyPress);
}, [mode, currentIndex, flashcards.length, flipped, animating]);
if (mode === ‘create’) {
return (