| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Goals of the World Health Organization</title> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.13.0/dist/tf.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.13.0/dist/transformers.min.js"></script> | |
| <style> | |
| /* Set the background color and add a 3D effect */ | |
| body { | |
| background-color: #2196F3; | |
| background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px), | |
| linear-gradient(rgba(255,255,255,0.2) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255,255,255,0.2) 1px, transparent 1px); | |
| background-size: 30px 30px, 30px 30px, 15px 15px, 15px 15px; | |
| background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; | |
| } | |
| /* Center the content */ | |
| #content { | |
| margin: 0 auto; | |
| max-width: 800px; | |
| text-align: center; | |
| } | |
| /* Add some padding to the content */ | |
| #goals { | |
| padding: 30px; | |
| } | |
| /* Add a border to the GIF */ | |
| #gif { | |
| border: 5px solid white; | |
| } | |
| </style> | |
| <script> | |
| async function generateGoals() { | |
| // Load the GPT-2 model | |
| const model = await transformers.gpt2.GPT2Model.fromPretrained("gpt2"); | |
| // Set up the tokenizer | |
| const tokenizer = await transformers.gpt2.GPT2Tokenizer.fromPretrained("gpt2"); | |
| // Define the input text | |
| const input = "The goals of the World Health Organization are"; | |
| // Encode the input text | |
| const encodedInput = tokenizer.encode(input); | |
| // Generate the output text using the GPT-2 model | |
| const output = await model.generate(tf.tensor2d(encodedInput, [1, encodedInput.length]), { maxOutputLength: 200 }); | |
| // Decode the output text | |
| const decodedOutput = tokenizer.decode(output.arraySync()[0], { skipSpecialTokens: true }); | |
| // Display the output text and link to the WHO website in the HTML page | |
| document.getElementById("goals").innerHTML = decodedOutput; | |
| document.getElementById("wholink").href = "https://www.who.int/about/mission/en/"; | |
| } | |
| </script> | |
| </head> | |
| <body onload="generateGoals()"> | |
| <div id="content"> | |
| <h1>Goals of the World Health Organization</h1> | |
| <p id="goals">Loading...</p> | |
| <img id="gif" src="https://media.giphy.com/media/l0MYt5jPR6QX5pnqM/giphy.gif" alt="GIF design"> | |
| <br> | |
| <a id="wholink" href="#">Learn more about the WHO</a> | |
| </div> | |
| </body> | |
| </html> | |