lyly21/xformjs_mobilevit_assignment
0
1<!DOCTYPE html>2<html lang="en">3 4<head>5 <meta charset="UTF-8">6 <title>Image Classification - 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">19</head>20 21<body>22 <div class="container-main">23 24 <!-- Back to Home button -->25 <div class="row mt-5">26 <div class="col-md-12 text-center">27 <a href="index.html" class="btn btn-outline-secondary"28 style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>29 </div>30 </div>31 32 <!-- Content -->33 <div class="container mt-5">34 <!-- Centered Titles -->35 <div class="text-center">36 <h2>Computer Vision</h2>37 <h4>Image Classification</h4>38 </div>39 40 <!-- Actual Content of this page -->41 <div id="image-classification-container" class="container mt-4">42 <h5>Classify an Image:</h5>43 <div class="d-flex align-items-center">44 <label for="imageClassificationURLText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter45 image URL:</label>46 <input type="text" class="form-control flex-grow-1" id="imageClassificationURLText"47 value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg"48 placeholder="Enter image" style="margin-right: 15px; margin-left: 15px;">49 <button id="ClassifyButton" class="btn btn-primary" onclick="classifyImage()">Classify</button>50 </div>51 <div class="mt-4">52 <h4>Output:</h4>53 <pre id="outputArea"></pre>54 </div>55 </div>56 57 <hr> <!-- Line Separator -->58 59 <div id="image-classification-local-container" class="container mt-4">60 <h5>Classify a Local Image:</h5>61 <div class="d-flex align-items-center">62 <label for="imageClassificationLocalFile" class="mb-0 text-nowrap"63 style="margin-right: 15px;">Select Local Image:</label>64 <input type="file" id="imageClassificationLocalFile" accept="image/*" />65 <button id="ClassifyButtonLocal" class="btn btn-primary"66 onclick="classifyImageLocal()">Classify</button>67 </div>68 <div class="mt-4">69 <h4>Output:</h4>70 <pre id="outputAreaLocal"></pre>71 </div>72 </div>73 74 <hr> <!-- Line Separator -->75 76 <div id="image-classification-top-container" class="container mt-4">77 <h5>Classify an Image and Return Top n Classes:</h5>78 <div class="d-flex align-items-center">79 <label for="imageClassificationTopURLText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter80 image URL:</label>81 <input type="text" class="form-control flex-grow-1" id="imageClassificationTopURLText"82 value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg"83 placeholder="Enter image" style="margin-right: 15px; margin-left: 15px;">84 <button id="ClassifyTopButton" class="btn btn-primary" onclick="classifyTopImage()">Classify</button>85 </div>86 <div class="mt-4">87 <h4>Output:</h4>88 <pre id="outputAreaTop"></pre>89 </div>90 </div>91 92 <!-- Back to Home button -->93 <div class="row mt-5">94 <div class="col-md-12 text-center">95 <a href="index.html" class="btn btn-outline-secondary"96 style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>97 </div>98 </div>99 </div>100 </div>101 102 <script>103 104 let classifier;105 106 // Initialize the sentiment analysis model107 async function initializeModel() {108 // TO-Do: pipeline() 함수를 사용하여 ViT 모델 인스턴스를 classifier라는 이름으로 생성하십시오/109 110 111 }112 113 async function classifyImage() {114 const textFieldValue = document.getElementById("imageClassificationURLText").value.trim();115 116 const result = await classifier(textFieldValue);117 118 document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);119 }120 121 async function classifyImageLocal() {122 const fileInput = document.getElementById("imageClassificationLocalFile");123 const file = fileInput.files[0];124 125 if (!file) {126 alert('Please select an image file first.');127 return;128 }129 130 // Create a Blob URL from the file131 const url = URL.createObjectURL(file);132 133 // classifier에 url을 입력하여 출력되는 결과를 result에 저장하십시오.134 // 힌트: cont result = ???135 136 // HTML코드 중 element Id가 'outputAreaLocal'인 요소에 resul의 값을 JSON string 형태로 text로 출력하십시오.137 // 힌트: document.getElementById와 JSON.stringify 이용138 }139 140 async function classifyTopImage() {141 // 코드 삭제됨142 }143 144 // Initialize the model after the DOM is completely loaded145 window.addEventListener("DOMContentLoaded", initializeModel);146 </script>147</body>148 149</html>