JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OpenAI GPT-3 Example</title>
  <script src="https://cdn.openai.com/gpt-3.5.2/openai.js"></script>
</head>
<body>
  <div id="output"></div>

  <script>
    const apiKey = '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';

    // Check if OpenAI is defined
    if (typeof OpenAI === 'undefined') {
      console.error('OpenAI library not loaded. Please check the script source.');
    } else {
      // Proceed with OpenAI API usage
      const openai = new OpenAI(apiKey);

      // Sample prompt
      const prompt = 'Translate the following English text to French: "{text}"';
      const data = { text: 'Hello, how are you?' };

      openai.complete({
        prompt: prompt,
        max_tokens: 50,
        data: data
      }).then(response => {
        const generatedText = response.choices[0].text;
        document.getElementById('output').innerText = generatedText;
      }).catch(error => {
        console.error(error);
        document.getElementById('output').innerText = 'Error generating text.';
      });
    }
  </script>
</body>
</html>

JavaScript

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