Buat aplikasi kartu flash bertenaga AI – Beragampengetahuan

import  initializeApp  from "firebase/app";
import  getAnalytics  from "firebase/analytics";
import  getAuth  from "firebase/auth";
import  getFirestore  from "firebase/firestore";

const firebaseConfig = 
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
 ;

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const auth = getAuth(app);
export const db = getFirestore(app);

import  NextResponse  from "next/server";

const OPENROUTER_API_KEY = process.env.OPENROUTER_API_KEY;

const systemPrompt = `
You are an AI flashcard creator. Your task is to generate concise and effective flashcards based on the given topic or content. Follow these guidelines:
1. Create clear and concise questions for the front of the flashcard.
2. Provide accurate and informative answers for the back of the flashcard, ensuring they do not exceed one or two sentences.
3. Ensure that each flashcard focuses on a single concept or piece of information.
4. Use simple language to make the flashcards accessible to a wide range of learners.
5. Include a variety of question types, such as definitions, examples, comparisons, and applications.
6. Avoid overly complex or ambiguous phrasing in both questions and answers.
7. When appropriate, use mnemonics or memory aids to help reinforce the information.
8. Tailor the difficulty level of the flashcards to the user's specified preferences.
9. If given a body of text, extract the most important and relevant information for the flashcards.
10. Aim to create a balanced set of flashcards that covers the topic comprehensively.
11. Only generate 10 flashcards.

Return in the following JSON format:

    "flashcards": [
        "front": str,
        "back": str
    ]


Remember, the goal is to facilitate effective learning and retention of information through these flashcards.
`;

export async function POST(req) {
    const data = await req.text(); // Get the raw text from the request
  
    try 
      const response = await fetch(" 
        method: "POST",
        headers: 
          "Authorization": `Bearer $OPENROUTER_API_KEY`,
          "Content-Type": "application/json",
        ,
        body: JSON.stringify(
          model: "meta-llama/llama-3.1-8b-instruct",
          messages: [
             role: "system", content: systemPrompt ,
             role: "user", content: data 
          ],
        )
      );
  
      if (!response.ok) 
        throw new Error(`Failed to fetch from OpenRouter AI: $response.statusText`);
      
  
      const completion = await response.json();
      // Extracting JSON from the response content
      const rawJson = completion.choices[0].message.content;
      const startIndex = rawJson.indexOf('');
      const endIndex = rawJson.lastIndexOf('') + 1;
      const jsonString = rawJson.substring(startIndex, endIndex);
      const flashcardsData = JSON.parse(jsonString);
  
      // Assuming flashcardsData contains the "flashcards" array directly
      return NextResponse.json( flashcards: flashcardsData.flashcards );
     catch (error) 
      console.error("Error processing request:", error);
      return new Response("Error processing request",  status: 500 );
    
  }

router.push(‘/login’); // Pastikan garis miring di depan untuk rute return (

Belajar dengan cepat

Rumah

Masuk

membuat akun

); “data-lang=”teks/javascript”>

"use client";

import  AppBar, Container, Typography, TextField, Button, Box, Toolbar  from "@mui/material";
import  useRouter  from 'next/navigation';

export default function SignUpPage() 
  const router = useRouter();

  const handleHomeClick = () => 
    router.push("
  ;

  const handleLoginClick = () => 
    router.push('/sign-in'); // Ensure the leading slash for routing
  ;

  return (
    <Container maxWidth="sm">
      <AppBar position="static" sx= mb: 4 >
        <Toolbar>
          <Typography variant="h6" sx= flexGrow: 1 >
            Learn in a Flash
          </Typography>
          <Button color="inherit" onClick=handleHomeClick>
            Home
          </Button>
          <Button color="inherit" onClick=handleLoginClick>
            Login
          </Button>
        </Toolbar>
      </AppBar>
      <Box
        sx=
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          mt: 4,
          p: 3,
          border: 1,
          borderColor: 'grey.300',
          borderRadius: 2,
        
      >
        <Typography variant="h4" gutterBottom>
          Create an Account
        </Typography>
        <form noValidate autoComplete="off">
          <TextField
            label="Email"
            variant="outlined"
            fullWidth
            margin="normal"
            type="email"
            required
          />
          <TextField
            label="Password"
            variant="outlined"
            fullWidth
            margin="normal"
            type="password"
            required
          />
          <Button variant="contained" color="primary" fullWidth sx= mt: 2 >
            Sign Up
          </Button>
        </form>
      </Box>
    </Container>
  );

import  useUser  from "@clerk/nextjs"; 
export default function Generate()  
const  isLoaded, isSignedIn, user  = useUser(); 
// Other code will be placed below this 

const [flashcards, setFlashcards] = useState([]);  // Stores the generated flashcards
const [flipped, setFlipped] = useState();  // Keeps track of which flashcards are flipped
const [text, setText] = useState("");  // User input for generating flashcards
const [name, setName] = useState("");  // Name for the flashcard collection
const [open, setOpen] = useState(false);  // Dialog state for saving flashcards

const handleSubmit = async () => 
  try 
    const response = await fetch("/api/generate", 
      method: "POST",
      headers:  "Content-Type": "application/json" ,
      body: JSON.stringify( text ),  // Sends the input text to the API
    );

    if (!response.ok) 
      throw new Error("Failed to fetch flashcards");
    

    const data = await response.json();  // Extracts the response data
    if (data && data.flashcards) 
      setFlashcards(data.flashcards);  // Updates the flashcards state with the generated flashcards
    
   catch (error) 
    console.error("Error generating flashcards:", error);
  
;

const handleCardClick = (index) => 
  setFlipped((prev) => (
    ...prev,
    [index]: !prev[index],  // Toggles the flipped state of the flashcard at the given index
  ));
;

const handleOpen = () => 
  setOpen(true);  // Opens the dialog
;

const handleClose = () => 
  setOpen(false);  // Closes the dialog
;

const saveFlashcards = async () => 
  if (!name) 
    alert("Please enter a name");
    return;
  

  const batch = writeBatch(db);  // Firestore batch for atomic writes
  const userDocRef = doc(collection(db, "users"), user.id);  // User document reference
  const docSnap = await getDoc(userDocRef);

  if (docSnap.exists())  [];
    if (collectionData.find((f) => f.name === name)) 
      alert("Flashcard with this name already exists.");
      return;
     else 
      collectionData.push( name );  // Add the new flashcard collection name
      batch.set(userDocRef,  flashcards: collectionData ,  merge: true );
    
   else 
    batch.set(userDocRef,  flashcards: [ name ] );  // Create a new user document if it doesn't exist
  

  const colRef = collection(userDocRef, name);  // Reference to the flashcard collection
  flashcards.forEach((flashcard) => 
    const cardDocRef = doc(colRef);  // Create a document for each flashcard
    batch.set(cardDocRef, flashcard);  // Save each flashcard
  );

  await batch.commit();  // Commit the batch
  handleClose();
  router.push("/flashcards");  // Redirect to the flashcards page after saving
;

return (
  <Container maxWidth="md">
    <Box sx= mt: 4, mb: 6, display: "flex", flexDirection: "column", alignItems: "center" >
      <TextField
        label="Enter Text"
        variant="outlined"
        fullWidth
        margin="normal"
        value=text
        onChange=(e) => setText(e.target.value)  // Update the text state on input
      />
      <Button variant="contained" onClick=handleSubmit>
        Generate Flashcards
      </Button>
    </Box>

    flashcards.length > 0 && (
      <Box sx= mt: 4 >
        <Typography variant="h5" align="center" gutterBottom>
          Flashcard Preview
        </Typography>
        <Grid container spacing=3>
          flashcards.map((flashcard, index) => (
            <Grid item xs=12 sm=6 md=4 key=index>
              <Card onClick=() => handleCardClick(index)>
                <CardActionArea>
                  <CardContent>
                    <Typography variant="h6">
                      flipped[index] ? flashcard.back : flashcard.front
                    </Typography>
                  </CardContent>
                </CardActionArea>
              </Card>
            </Grid>
          ))
        </Grid>
        <Box sx= mt: 4, display: "flex", justifyContent: "center" >
          <Button variant="contained" color="secondary" onClick=handleOpen>
            Save
          </Button>
        </Box>
      </Box>
    )

    <Dialog open=open onClose=handleClose>
      <DialogTitle>Save the Flashcards</DialogTitle>
      <DialogContent>
        <DialogContentText>
          Please enter a name for your Flashcard's Collection
        </DialogContentText>
        <TextField
          autoFocus
          margin="dense"
          label="Collection Name"
          type="text"
          fullWidth
          value=name
          onChange=(e) => setName(e.target.value)
        />
      </DialogContent>
      <DialogActions>
        <Button onClick=handleClose>Cancel</Button>
        <Button onClick=saveFlashcards>Save</Button>
      </DialogActions>
    </Dialog>
  </Container>
);