lyly21/xformjs_mobilevit_assignment
0
1<!DOCTYPE html>2<html lang="en">3 4<head>5 <meta charset="UTF-8">6 <title>Image to Text - 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 12 // Make it available globally13 window.pipeline = pipeline;14 </script>15 16 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">17 18 <link rel="stylesheet" href="css/styles.css"></head>19<body>20 <div class="container-main">21 22 <!-- Back to Home button -->23 <div class="row mt-5">24 <div class="col-md-12 text-center">25 <a href="index.html" class="btn btn-outline-secondary"26 style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>27 </div>28 </div>29 30 <!-- Content -->31 <div class="container mt-5">32 <!-- Centered Titles -->33 <div class="text-center">34 <h2>Computer Vision</h2>35 <h4>Image to Text</h4>36 </div>37 38 <!-- Actual Content of this page -->39 <div id="image-to-text-container" class="container mt-4">40 <h5>Generate a Caption for an Image w/ Xenova/vit-gpt2-image-captionin:</h5>41 <div class="d-flex align-items-center">42 <label for="imageToTextURLText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter43 image to Caption URL:</label>44 <input type="text" class="form-control flex-grow-1" id="imageToTextURLText"45 value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/cats.jpg"46 placeholder="Enter image" style="margin-right: 15px; margin-left: 15px;">47 <button id="ImagetoTextButton" class="btn btn-primary" onclick="captionImage()">Caption</button>48 </div>49 <div class="mt-4">50 <h4>Output:</h4>51 <pre id="outputArea"></pre>52 </div>53 </div>54 55 <hr> <!-- Line Separator -->56 57 <div id="image-to-text-local-container" class="container mt-4">58 <h5>Generate a Caption for a Local Image:</h5>59 <div class="d-flex align-items-center">60 <label for="imagetoTextLocalFile" class="mb-0 text-nowrap"61 style="margin-right: 15px;">Select Local Image:</label>62 <input type="file" id="imagetoTextLocalFile" accept="image/*" />63 <button id="CaptionButtonLocal" class="btn btn-primary"64 onclick="captionImageLocal()">Caption</button>65 </div>66 <div class="mt-4">67 <h4>Output:</h4>68 <pre id="outputAreaLocal"></pre>69 </div>70 </div>71 72 <!-- Back to Home button -->73 <div class="row mt-5">74 <div class="col-md-12 text-center">75 <a href="index.html" class="btn btn-outline-secondary"76 style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>77 </div>78 </div>79 </div>80 </div>81 82 <script>83 84 let captioner;85 86 // Initialize the sentiment analysis model87 async function initializeModel() {88 captioner = await pipeline('image-to-text', 'Xenova/vit-gpt2-image-captioning');89 90 }91 92 async function captionImage() {93 const textFieldValue = document.getElementById("imageToTextURLText").value.trim();94 95 const result = await captioner(textFieldValue);96 97 document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);98 }99 100 async function captionImageLocal() {101 const fileInput = document.getElementById("imagetoTextLocalFile");102 const file = fileInput.files[0];103 104 if (!file) {105 alert('Please select an image file first.');106 return;107 }108 109 // Create a Blob URL from the file110 const url = URL.createObjectURL(file);111 112 const result = await captioner(url);113 114 document.getElementById("outputAreaLocal").innerText = JSON.stringify(result, null, 2);115 }116 117 // Initialize the model after the DOM is completely loaded118 window.addEventListener("DOMContentLoaded", initializeModel);119 </script>120</body>121 122</html>