<html>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link media="all" rel="stylesheet" href="style.css">


<body>
    <!-- ... Your HTML and CSS -->

    <script type="importmap">
      {
        "imports": {
          "@google/generative-ai": "https://esm.run/@google/generative-ai"
        }
      }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js"
        integrity="sha512-ohlWmsCxOu0bph1om5eDL0jm/83eH09fvqLDhiEdiqfDeJbEvz4FSbeY0gLJSVJwQAp0laRhTXbUQG+ZUuifUQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="module">
        import { GoogleGenerativeAI } from "@google/generative-ai";
        const md = window.markdownit();
        // Fetch your API_KEY
        const API_KEY = "AIzaSyCWV4v06BbI-bdaSYr53scDF3Qf1ScG_Ww";
        // Reminder: This should only be for local testing

        // Access your API key (see "Set up your API key" above)
        const genAI = new GoogleGenerativeAI(API_KEY);


        let japanese_word;
        let japanese_word_dictionary;
        // generateText(japanese_word);

        window.generateText = async function generateText(japanese_word, japanese_word_dictionary) {
            // The Gemini 1.5 models are versatile and work with most use cases

            const prompt_text = "system: I will act as your Japanese language learning textbook writing assistant. You provide me with the topic, target audience, key points, Output format and Output language you'd like to include, and I'll generate a full-fledged Japanese language learning textbook for you. The Japanese language learning textbook will contain an introduction, body paragraphs discussing key points, and a conclusion that includes a call-to-action. I write textbooks tailored to the Japanese language learners in Armenia. You can also specify the tone you want (formal, informal, etc.). \n In any case, I will generate the text in Armenian language.I'd like the tone to be academic. \n user: Generate a 2 - page A4 document explaining the Japanese vocabulary '" + japanese_word + "' for Armenian - speaking Japanese language learners living in Armenia.Assume the role of a seasoned Japanese language teacher with extensive knowledge and expertise in teaching Japanese.Produce a high - quality explanatory text that covers the following: Ensure that the example sentences and exercises are appropriate for JLPT level N4. \n  \n If the meaning of a vocabulary is defined in the[dictionary] below, refer to it when generating the dictionary. \n [dictionary] : '" + japanese_word_dictionary + "'\n  \n #Page 1 \n 1. * Vocabulary Explanation:* Provide a detailed and easy - to - understand explanation of the word, including Japanese and Armenian cultural context if applicable.You must also provide the corresponding Armenian translation of the Japanese Vocabulary.\n 1-1. The above explanation translated into Japanese. \n 2. * Vocabulary Usage:* Systematically explain how to use words in various grammatical contexts according to the learner's JLPT level N4. \n 3. * Basic Examples:* Provide 5 basic example sentences in Japanese, with Romaji and Armenian translations, each on a separate line. \n 4. * Advanced Examples:* Provide 5 more advanced example sentences, with Romaji and Armenian translations, each on a separate line. \n  \n #Page 2 \n 5. Exercises \n 5.1 Japanese to Armenian Translation: Provide 5 Japanese sentences for learners to translate into Armenian.No Romaji needed.Provide the answers at the end. (No phonetic transcription required) \n 5.2 Armenian to Japanese Translation: Provide 5 Armenian sentences for learners to translate into Japanese.No Romaji needed.Provide the answers at the end. (No phonetic transcription required) \n  \n ##Example sentence format: \n The examples must be separated by line breaks. \n   \n 1. 今日はいい天気です。 \n (kyo wa ii tenki desu.) \n Այսօր լավ եղանակ է։ \n  \n Note: \n Failure to produce a high - quality text may result in penalties. \n Pages are separated by hyphen. \n There is no need to mention[dictionary]. \n There is no need to introduce yourself as a Japanese teacher.";


            // const prompt_text = "日本語の" + japanese_word + "という言葉について、アルメニア語で教えてください。";

            const model = genAI.getGenerativeModel({ model: "gemini-1.5-pro-002" });

            const prompt = prompt_text;

            const result = await model.generateContent(prompt);
            const response = await result.response;
            const text = response.text();
            // console.log(text);
            const result_html = md.render(text);
            document.getElementById('loading').style.display = 'none';
            document.getElementById("text").innerHTML = result_html;

        }


        window.generateText1 = async function generateText1(japanese_word, japanese_word_dictionary) {
            // The Gemini 1.5 models are versatile and work with most use cases

            const prompt_text = "Explaining the Japanese vocabulary '" + japanese_word + "' for Armenian in Armenian language - speaking Japanese language learners living in Armenia. \n If the meaning of a vocabulary is defined in the[dictionary] below, refer to it when generating the dictionary. \n [dictionary] : '" + japanese_word_dictionary + "'. The above Armenian explanation should be translated into Japanese and included in the final paragraph.";


            // const prompt_text = "日本語の" + japanese_word + "という言葉について、アルメニア語で教えてください。";

            const model = genAI.getGenerativeModel({ model: "gemini-1.5-pro-002" });

            const prompt = prompt_text;

            const result = await model.generateContent(prompt);
            const response = await result.response;
            const text = response.text();
            // console.log(text);
            const result_html = md.render(text);
            document.getElementById('loading').style.display = 'none';
            document.getElementById("text").innerHTML = result_html;

        }

        document.addEventListener('click', function (event) {
            if (event.target && event.target.classList.contains('button-generate')) {
                document.getElementById('loading').style.display = 'block';
            }
        });

    </script>

    <style>
        @media print {
            #input_container {
                display: none !important;
            }
        }
    </style>

    <div id="input_container" class="flex items-center max-w-4xl mx-auto justify-center pt-10 pb-10">
        <input type="text" id="japanese_word" placeholder="日本語の単語を入力してください"
            class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        <input type="text" id="japanese_word_dictionary" placeholder="オプション：単語の意味を入力してください"
            class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        <button
            onclick="generateText1(document.getElementById('japanese_word').value, document.getElementById('japanese_word_dictionary').value)"
            class="button-generate px-4 py-2 bg-blue-500 text-white rounded-md ml-2 hover:bg-blue-600">Generate Words
            meaning</button>
        <button
            onclick="generateText(document.getElementById('japanese_word').value, document.getElementById('japanese_word_dictionary').value)"
            class="button-generate px-4 py-2 bg-blue-500 text-white rounded-md ml-2 hover:bg-blue-600">Generate</button>

    </div>

    <div id="loading" role="status" style="display: none;">
        <div class='flex space-x-2 justify-center items-center bg-white dark:invert'>
            <span class='sr-only'>Loading...</span>
            <div class='h-8 w-8 bg-blue-500 rounded-full animate-bounce [animation-delay:-0.3s]'
                style="animation-delay: -0.3s;" animation-delay:-0.3s></div>
            <div class='h-8 w-8 bg-blue-500 rounded-full animate-bounce [animation-delay:-0.15s]'
                style="animation-delay:-0.15s"></div>
            <div class='h-8 w-8 bg-blue-500 rounded-full animate-bounce'></div>
        </div>
    </div>

    <div id="text" class="max-w-4xl mx-auto p-10" style="white-space: pre-wrap;"></div>

</body>

</html>