lyly21/xformjs_mobilevit_assignment
0
1<!DOCTYPE html>2<html lang="en">3 4<head>5 <meta charset="UTF-8">6 <title>Text-to-text Generation - Hugging Face Transformers.js</title>7 8 <script type="module">9 // Import the library10 import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';11 // Make it available globally12 window.pipeline = pipeline;13 </script>14 15 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">16 17 <link rel="stylesheet" href="css/styles.css">18</head>19 20<body>21 <div class="container-main">22 23 <!-- Back to Home button -->24 <div class="row mt-5">25 <div class="col-md-12 text-center">26 <a href="index.html" class="btn btn-outline-secondary"27 style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>28 </div>29 </div>30 31 <!-- Content -->32 <div class="container mt-5">33 <!-- Centered Titles -->34 <div class="text-center">35 <h2>Natural Language Processing</h2>36 <h4>Text-to-text Generation</h4>37 </div>38 39 <!-- Actual Content of this page -->40 <div id="text-to-text-generation-container" class="container mt-4">41 <h5>Text-to-text generation w/ Xenova/LaMini-Flan-T5-783M:</h5>42 <div class="d-flex align-items-center">43 <label for="text-to-textGenerationText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter44 input text sequence:</label>45 <input type="text" class="form-control flex-grow-1" id="text-to-textGenerationText"46 value="how can I become more healthy?" placeholder="Enter text"47 style="margin-right: 15px; margin-left: 15px;">48 <button id="generateButton" class="btn btn-primary" onclick="generateText()">Generate</button>49 </div>50 <div class="mt-4">51 <h4>Output:</h4>52 <pre id="outputArea"></pre>53 </div>54 </div>55 56 <hr> <!-- Line Separator -->57 58 <div id="text-to-text-generation-container2" class="container mt-4">59 <h5>Generate a Poem Using LaMini-Flan-T5-783M:</h5>60 <div class="d-flex align-items-center">61 <label for="text-to-textGenerationText2" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter62 Poem to63 Generate:</label>64 <input type="text" class="form-control flex-grow-1" id="text-to-textGenerationText2"65 value="Write me a love poem about cheese." placeholder="Enter text"66 style="margin-right: 15px; margin-left: 15px;">67 <button id="generateButton2" class="btn btn-primary" onclick="generateText2()">Generate</button>68 </div>69 <div class="mt-4">70 <h4>Output:</h4>71 <pre id="outputArea2"></pre>72 </div>73 </div>74 75 <!-- Back to Home button -->76 <div class="row mt-5">77 <div class="col-md-12 text-center">78 <a href="index.html" class="btn btn-outline-secondary"79 style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>80 </div>81 </div>82 </div>83 </div>84 85 <script>86 let generator;87 // Initialize the sentiment analysis model88 async function initializeModel() {89 generator = await pipeline('text2text-generation', 'Xenova/LaMini-Flan-T5-783M');90 }91 async function generateText() {92 const textFieldValue = document.getElementById("text-to-textGenerationText").value.trim();93 const currentDate = new Date().toDateString();94 const currentTime = new Date().toLocaleTimeString();95 const result = await generator(textFieldValue, {96 max_new_tokens: 100,97 });98 document.getElementById("outputArea").innerText = `Current Date: ${currentDate}\nCurrent Time: ${currentTime}\n\n${JSON.stringify(result, null, 2)}`;99 }100 101 async function generateText2() {102 const textFieldValue = document.getElementById("text-to-textGenerationText2").value.trim();103 const currentDate = new Date().toDateString();104 const currentTime = new Date().toLocaleTimeString();105 const result = await generator(textFieldValue, {106 max_new_tokens: 200,107 temperature: 0.9,108 repetition_penalty: 2.0,109 no_repeat_ngram_size: 3,110 // top_k: 20,111 // do_sample: true,112 });113 document.getElementById("outputArea2").innerText = `Current Date: ${currentDate}\nCurrent Time: ${currentTime}\n\n${JSON.stringify(result, null, 2)}`;114 }115 // Initialize the model after the DOM is completely loaded116 window.addEventListener("DOMContentLoaded", initializeModel);117 </script>118</body>119 120</html>