Created
December 1, 2023 18:45
-
-
Save jojosati/6f3f1ad0a3486a1f5c524cb9aac2f9bf to your computer and use it in GitHub Desktop.
Transformers.js: playing AI in single HTML
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>transformers AI</title> | |
| <meta property="og:title" content="transformers AI"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" integrity="sha512-mG7Xo6XLlQ13JGPQLgLxI7bz8QlErrsE9rYQDRgF+6AlQHm9Tn5bh/vaIKxBmM9mULPC6yizAhEmKyGgNHCIvg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
| </head> | |
| <body ng-app> | |
| <div class="container" ng-controller="transformersCtrl"> | |
| <h2>transformers AI : {{ task }}</h2> | |
| <div class="row"> | |
| <div class="col-xs-12 col-md-6"> | |
| <div class="form-group"> | |
| <label>spec</label> | |
| <select class="form-control" | |
| ng-options="item as item.label for item in speclist track by item.id" | |
| ng-model="selected" | |
| ng-change="loadModel(selected);"></select> | |
| </div> | |
| <div ng-show="selected" class="help-block"> | |
| <div>task: {{ selected.task }}</div> | |
| <div ng-show="selected.model"> | |
| model: {{ selected.model }} | |
| <a ng-show="selected.url" ng-href="{{ selected.url }}" target="_blank"> | |
| <i class="glyphicon glyphicon-new-window"></i> | |
| </a> | |
| </div> | |
| <div ng-show="selected.options">options: {{ selected.options | json }}</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row" ng-show="selected"> | |
| <div class="col-xs-12 col-md-10"> | |
| <div class="form-group"> | |
| <label>options</label> | |
| <input class="form-control" type="text" ng-model="options"/> | |
| </div> | |
| <div class="form-group"> | |
| <label>expression</label> | |
| <input class="form-control" type="text" ng-model="expr"/> | |
| </div> | |
| <div class="form-group" ng-show="expr"> | |
| <button ng-show="selected.executer && !statusText" | |
| class="btn btn-primary" | |
| ng-click="statusText='processing..'; process(selected, expr, options)"> | |
| process | |
| </button> | |
| </div> | |
| <div class="text-warning">{{ statusText }}</div> | |
| <pre ng-show="result" class="bg-info">{{ result }}</pre> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="module"> | |
| // Imported the cdn of the transformers library | |
| import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]'; | |
| window.transformers = {pipeline, env} | |
| </script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.32/angular.min.js" integrity="sha512-QaPMeB0UECrUSaJoWZfBkKK2LtKphYS6HM7krY98a3einXpAooyQQOv2FNm4r+umav2dQsfBHFiHnwBZovSjpw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script> | |
| function transformersCtrl($scope, $window, $timeout) { | |
| $scope.speclist = [ | |
| { id: 1, | |
| label: 'classifier', | |
| task: 'sentiment-analysis', | |
| sample: 'I love transformers!' | |
| }, | |
| { id: 2, | |
| label: 'reviewer', | |
| task: 'sentiment-analysis', | |
| model:'Xenova/bert-base-multilingual-uncased-sentiment', | |
| url: 'https://huggingface.co/Xenova/bert-base-multilingual-uncased-sentiment', | |
| sample: 'The Shawshank Redemption is a true masterpiece of cinema.' | |
| }, | |
| { id: 3, | |
| label: 'translator', | |
| task: 'translation', | |
| model:'Xenova/nllb-200-distilled-600M', | |
| url: 'https://huggingface.co/Xenova/nllb-200-distilled-600M', | |
| sample: 'I like to walk my dog.', | |
| options: { | |
| src_lang: 'eng_Latn', | |
| // tgt_lang: 'ell_Grek' | |
| tgt_lang: 'tha_Thai' | |
| }, | |
| }, | |
| { id: 4, | |
| label: 'poet', | |
| task: 'text2text-generation', | |
| model:'Xenova/LaMini-Flan-T5-783M', | |
| url: 'https://huggingface.co/Xenova/LaMini-Flan-T5-783M', | |
| sample: 'Write me a love poem about cheese.', | |
| options: { | |
| max_new_tokens: 200, | |
| temperature: 0.9, | |
| repetition_penalty: 2.0, | |
| no_repeat_ngram_size: 3, | |
| }, | |
| }, | |
| ] | |
| $scope.loadModel = function (spec) { | |
| $scope.statusText = '' | |
| $scope.result = '' | |
| $scope.expr = spec.sample; | |
| $scope.options = spec.options? JSON.stringify(spec.options) : '' | |
| if (!spec.executer) { | |
| $scope.statusText = `loading model (${spec.label})..` | |
| $window.transformers.pipeline(spec.task, spec.model) | |
| .then(function(executer) { | |
| console.debug('loaded:', spec.task) | |
| spec.executer = executer | |
| $scope.statusText = '' | |
| }, function (err){ | |
| $scope.statusText = `error loading: ${err}` | |
| }) | |
| .finally(function(){ | |
| $scope.$digest() | |
| }) | |
| } | |
| } | |
| $scope.process = function (spec, nval, options) { | |
| $scope.result = '' | |
| $scope.statusText = `processing ${spec.label}..` | |
| if (spec && nval && spec.executer) { | |
| if (options) { | |
| try { | |
| options = JSON.parse(options) | |
| } | |
| catch (err) { | |
| $scope.statusText = `error options: ${err}` | |
| return; | |
| } | |
| } | |
| // My slow CPU, give a while for the DOM update before extensively processing | |
| $timeout(function (){ | |
| return spec.executer(nval, options || spec.options) | |
| }, 50) | |
| .then(function (result){ | |
| console.debug(result) | |
| if (options) | |
| spec.options = options | |
| $scope.result = `${nval}\n\n${JSON.stringify(result, null, 2)}` | |
| }, function (err) { | |
| $scope.result = JSON.stringify(err) | |
| }) | |
| .finally(function (){ | |
| $scope.statusText = '' | |
| $scope.$digest() | |
| }) | |
| } | |
| else | |
| $scope.result = nval | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment